/*
 * SemDev brand color overrides
 * Source theme primary: #0b69f6
 *
 * Brand navy:   #0b224d
 * Brand orange: #f87110
 *
 * Load this file AFTER theme.css.
 */

:root,
[data-bs-theme="light"] {
  /* SemDev brand palette */
  --semdev-navy: #0b224d;
  --semdev-navy-rgb: 11, 34, 77;

  --semdev-orange: #f87110;
  --semdev-orange-rgb: 248, 113, 16;

  --semdev-orange-hover: #d3600e;
  --semdev-orange-active: #c65a0d;
  --semdev-orange-active-border: #ba550c;
  --semdev-orange-focus-border: #fcb888;
  --semdev-orange-subtle: #fee3cf;
  --semdev-orange-border-subtle: #fcc69f;
  --semdev-orange-soft: #fdd4b7;

  /* Bootstrap primary/accent */
  --bs-blue: var(--semdev-orange);
  --bs-primary: var(--semdev-orange);
  --bs-primary-rgb: var(--semdev-orange-rgb);

  /* Brand text */
  --bs-heading-color: var(--semdev-navy);
  --bs-emphasis-color: var(--semdev-navy);
  --bs-emphasis-color-rgb: var(--semdev-navy-rgb);

  /* Links: navy -> orange on hover */
  --bs-link-color: var(--semdev-navy);
  --bs-link-color-rgb: var(--semdev-navy-rgb);
  --bs-link-hover-color: var(--semdev-orange);
  --bs-link-hover-color-rgb: var(--semdev-orange-rgb);

  /* Primary contextual colors */
  --bs-primary-text-emphasis: var(--semdev-navy);
  --bs-primary-bg-subtle: var(--semdev-orange-subtle);
  --bs-primary-border-subtle: var(--semdev-orange-border-subtle);

  /* Focus ring */
  --bs-focus-ring-color: rgba(var(--semdev-orange-rgb), .25);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--semdev-navy);
}

/* Generic links */
a:hover {
  color: var(--semdev-orange);
}

/* Bootstrap primary links */
.link-primary {
  color: rgba(var(--semdev-orange-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: rgba(var(--semdev-orange-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-primary:focus,
.link-primary:hover {
  color: rgba(211, 96, 14, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: rgba(211, 96, 14, var(--bs-link-underline-opacity, 1)) !important;
}

/* Primary button */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--semdev-orange);
  --bs-btn-border-color: var(--semdev-orange);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--semdev-orange-hover);
  --bs-btn-hover-border-color: var(--semdev-orange-active);

  --bs-btn-focus-shadow-rgb: 249, 134, 52;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--semdev-orange-active);
  --bs-btn-active-border-color: var(--semdev-orange-active-border);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--semdev-orange);
  --bs-btn-disabled-border-color: var(--semdev-orange);
}
.btn-outline-primary:hover,
.btn-primary:hover {
	color: #fff;
}

/* Outline primary button */
.btn-outline-primary {
  --bs-btn-color: var(--semdev-orange);
  --bs-btn-border-color: var(--semdev-orange);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--semdev-orange);
  --bs-btn-hover-border-color: var(--semdev-orange);

  --bs-btn-focus-shadow-rgb: var(--semdev-orange-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--semdev-orange);
  --bs-btn-active-border-color: var(--semdev-orange);

  --bs-btn-disabled-color: var(--semdev-orange);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--semdev-orange);
}

/* Accordion / close button focus */
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--semdev-orange-rgb), .25);
  --bs-accordion-active-color: var(--semdev-orange);
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--semdev-orange-rgb), .25);
}

/* Dropdown active item */
.dropdown-menu,
.dropdown-menu-dark {
  --bs-dropdown-link-active-bg: var(--semdev-orange);
}

/* Forms */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--semdev-orange-focus-border);
  box-shadow: 0 0 0 .25rem rgba(var(--semdev-orange-rgb), .25);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--semdev-orange);
  border-color: var(--semdev-orange);
}

/* Range input */
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--semdev-orange-rgb), .25);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--semdev-orange-rgb), .25);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--semdev-orange);
}

.form-range::-moz-range-thumb {
  background-color: var(--semdev-orange);
}

.form-range::-webkit-slider-thumb:active {
  background-color: var(--semdev-orange-soft);
}

.form-range::-moz-range-thumb:active {
  background-color: var(--semdev-orange-soft);
}

/* Active list items */
.list-group {
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: var(--semdev-orange);
  --bs-list-group-active-border-color: var(--semdev-orange);
}

/* Nav pills */
.nav-pills {
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: var(--semdev-orange);
}

/* Progress */
.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--semdev-orange);
}

/* Focus states that were hard-coded to old blue in theme.css */
.nav-link:focus-visible,
.search-filters__form-check--color .color:focus-visible,
.stars-selector:has(.stars-selector__input:focus-visible) {
  box-shadow: 0 0 0 .25rem rgba(var(--semdev-orange-rgb), .25);
}

/* Pagination */
.pagination {
  --bs-pagination-color: var(--semdev-navy);
  --bs-pagination-hover-color: var(--semdev-orange);
  --bs-pagination-focus-color: var(--semdev-orange);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--semdev-orange-rgb), .25);
  --bs-pagination-active-color: var(--semdev-orange);
}

/* Primary table variant */
.table-primary {
  --bs-table-color: var(--semdev-navy);
  --bs-table-bg: var(--semdev-orange-subtle);
  --bs-table-border-color: #e5c4ab;
  --bs-table-striped-bg: #f3d8c4;
  --bs-table-striped-color: var(--semdev-navy);
  --bs-table-active-bg: #edceb7;
  --bs-table-active-color: var(--semdev-navy);
  --bs-table-hover-bg: #f0d3bd;
  --bs-table-hover-color: var(--semdev-navy);
}

/*
 * Dark mode: keep the same orange brand accent,
 * but use lighter orange variants for readable links/text.
 */
[data-bs-theme="dark"] {
  --bs-primary: var(--semdev-orange);
  --bs-primary-rgb: var(--semdev-orange-rgb);

  --bs-primary-text-emphasis: #fbaa70;
  --bs-primary-bg-subtle: #321703;
  --bs-primary-border-subtle: #632d06;

  --bs-link-color: #fbaa70;
  --bs-link-color-rgb: 251, 170, 112;
  --bs-link-hover-color: var(--semdev-orange);
  --bs-link-hover-color-rgb: var(--semdev-orange-rgb);

  --bs-focus-ring-color: rgba(var(--semdev-orange-rgb), .25);
}


.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link:focus{
	Outline:none;
}
@media (min-width: 1200px) {
    .page-product .product__container {
        gap: 2rem;
        grid-template-columns: 40% minmax(0, 1fr);
    }
}
@media (min-width: 768px) {
    .header-bottom .navbar-brand .logo {
        max-width: 13rem;
    }
}
/* SemDev / ps_imageslider homepage styling */
#ps_imageslider {
  --semdev-navy: #0b2f63;
  --semdev-navy-dark: #08244c;
  --semdev-orange: #ff7a00;
  --semdev-text: #1b2d45;
  --semdev-muted: #667085;
  --semdev-border: #e8edf3;

  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

#ps_imageslider .ps-imageslider__figure {
  position: relative;
  margin: 0;
}

#ps_imageslider .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Text lives in HTML/DB, not in the image */
#ps_imageslider .ps-imageslider__figcaption {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 5.5%;
  width: 43%;
  padding: 0;
  transform: translateY(-50%);
  text-align: left;
  color: var(--semdev-text);
  text-shadow: none;
  	max-width:400px; 
	background-color:transparent;
}

/* Small category / overline */
#ps_imageslider .ps-imageslider__figcaption > h2 {
  margin: 0 0 .65rem;
  color: var(--semdev-orange);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Main slide heading stored in description as H3 */
#ps_imageslider .ps-imageslider__figcaption h3 {
  margin: 0 0 .85rem;
  color: var(--semdev-navy-dark);
  font-size: clamp(1.65rem, 2.35vw, 2.8rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
}

#ps_imageslider .ps-imageslider__figcaption p {
  max-width: 34rem;
  margin: 0;
  color: var(--semdev-muted);
  font-size: clamp(.9rem, 1.05vw, 1.08rem);
  font-weight: 400;
  line-height: 1.55;
}

/* Indicators */
#ps_imageslider .carousel-indicators {
  bottom: 12px;
  margin-bottom: 0;
}

#ps_imageslider .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border: 0;
  border-radius: 50%;
  background-color: var(--semdev-navy);
  opacity: .28;
}

#ps_imageslider .carousel-indicators .active {
  background-color: var(--semdev-orange);
  opacity: 1;
}

/* Arrows – visible but unobtrusive */
#ps_imageslider .carousel-control-prev,
#ps_imageslider .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 38px;
  height: 38px;
  margin: 0 12px;
  transform: translateY(-50%);
  border: 1px solid rgba(11, 47, 99, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  opacity: 0;
  transition: opacity .2s ease, box-shadow .2s ease;
}

#ps_imageslider:hover .carousel-control-prev,
#ps_imageslider:hover .carousel-control-next,
#ps_imageslider:focus-within .carousel-control-prev,
#ps_imageslider:focus-within .carousel-control-next {
  opacity: 1;
}

#ps_imageslider .carousel-control-prev:hover,
#ps_imageslider .carousel-control-next:hover {
  box-shadow: 0 4px 16px rgba(11, 47, 99, .12);
}

#ps_imageslider .carousel-control-prev-icon,
#ps_imageslider .carousel-control-next-icon {
  width: 16px;
  height: 16px;
  
}

/* Tablet */
@media (max-width: 991.98px) {
  /* Bootstrap's d-none hides the caption below lg; force it back so the DB text is visible. */
  #ps_imageslider .ps-imageslider__figcaption.d-none {
    display: block !important;
  }

  #ps_imageslider .ps-imageslider__figcaption {
    position: static;
    width: 100%;
    padding: 1.1rem 1.25rem 1.35rem;
    transform: none;
    background: #fff;
    border-top: 1px solid var(--semdev-border);

  }

  #ps_imageslider .ps-imageslider__figcaption > h2 {
    margin-bottom: .4rem;
    font-size: .72rem;
  }

  #ps_imageslider .ps-imageslider__figcaption h3 {
    margin-bottom: .5rem;
    font-size: 1.45rem;
  }

  #ps_imageslider .ps-imageslider__figcaption p {
    font-size: .92rem;
    line-height: 1.45;
  }

  #ps_imageslider .carousel-indicators {
    top: auto;
    bottom: 8px;
  }

  #ps_imageslider .carousel-control-prev,
  #ps_imageslider .carousel-control-next {
    top: 28%;
    opacity: .85;
  }
}

@media (max-width: 575.98px) {
  #ps_imageslider {
    border-radius: 6px;
  }

  #ps_imageslider .ps-imageslider__figcaption {
    padding: .9rem 1rem 1.25rem;
  }

  #ps_imageslider .ps-imageslider__figcaption h3 {
    font-size: 1.25rem;
  }

  #ps_imageslider .ps-imageslider__figcaption p {
    font-size: .86rem;
  }

  #ps_imageslider .carousel-control-prev,
  #ps_imageslider .carousel-control-next {
    width: 32px;
    height: 32px;
    margin: 0 7px;
  }
}