/**
 * products.css — Products listing page styles
 * Loaded via $extra_css in pages/products.php
 * All values reference tokens from variables.css only.
 */


/* ══════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL HERO — dark gradient background
   Matches the Contact page hero gradient. Text styles unchanged.
══════════════════════════════════════════════════════════════════════ */

.product-hero {
  background: linear-gradient(125deg, #0d1b2a 0%, #1a3a52 45%, #2D6E8F 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Radial gold glow — top-left accent */
.product-hero::before {
  content:       '';
  position:      absolute;
  top:           -80px;
  left:          -80px;
  width:         420px;
  height:        420px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(212,160,48,0.14) 0%, transparent 65%);
  pointer-events: none;
  z-index:       0;
}
.product-hero .container {
  position: relative;
  z-index:  1;
}


/* ══════════════════════════════════════════════════════════════════════
   BOOTSTRAP PRIMARY COLOR OVERRIDE
   Remap Bootstrap's --bs-primary from #0d6efd to brand blue #2D6E8F
   across all product pages (listing + detail).
══════════════════════════════════════════════════════════════════════ */

:root {
  --bs-primary:        #2D6E8F;
  --bs-primary-rgb:    45, 110, 143;
  --bs-btn-bg:         #2D6E8F;
  --bs-btn-border-color: #2D6E8F;
  --bs-btn-hover-bg:   #235872;
  --bs-btn-hover-border-color: #235872;
  --bs-btn-active-bg:  #235872;
  --bs-btn-active-border-color: #235872;
  --bs-link-color:     #2D6E8F;
  --bs-link-hover-color: #235872;
}

.btn-primary {
  --bs-btn-bg:                   #2D6E8F;
  --bs-btn-border-color:         #2D6E8F;
  --bs-btn-hover-bg:             #235872;
  --bs-btn-hover-border-color:   #235872;
  --bs-btn-active-bg:            #235872;
  --bs-btn-active-border-color:  #235872;
  --bs-btn-focus-shadow-rgb:     45, 110, 143;
}

.bg-primary    { background-color: #2D6E8F !important; }
.text-primary  { color:            #2D6E8F !important; }
.border-primary{ border-color:     #2D6E8F !important; }
.link-primary  { color:            #2D6E8F !important; }


/* ══════════════════════════════════════════════════════════════════════
   PRODUCTS HERO
   Full-width section with background image + dark overlay.
══════════════════════════════════════════════════════════════════════ */

.products-hero {
  background: url('/assets/images/products/products-hero.jpg') center / cover no-repeat;
  padding:    var(--space-28) 0 var(--space-24);
  position:   relative;
  overflow:   hidden;
}
.products-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    105deg,
    rgba(13, 27, 42, 0.93) 0%,
    rgba(13, 27, 42, 0.78) 55%,
    rgba(13, 27, 42, 0.50) 100%
  );
}
.products-hero .container {
  position: relative;
  z-index:  1;
}

/* Breadcrumb overrides on dark background */
.products-hero .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.60);
}
.products-hero .breadcrumb-item a:hover {
  color: rgba(255, 255, 255, 0.90);
}
.products-hero .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.30);
}
.products-hero .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.80);
}


/* ══════════════════════════════════════════════════════════════════════
   PRODUCT CARD — KEY FEATURES LIST
   Inline bullet list inside product card body.
══════════════════════════════════════════════════════════════════════ */

.product-card__features {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}
.product-card__features li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-2);
  font-size:   var(--font-size-xs);
  color:       var(--color-text-secondary);
  line-height: var(--line-height-normal);
}
.product-card__features li::before {
  content:          '';
  display:          block;
  width:            16px;
  height:           16px;
  flex-shrink:      0;
  margin-top:       1px;
  background-color: var(--color-blue-light);
  border-radius:    50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%232D6E8F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     9px;
}


/* ══════════════════════════════════════════════════════════════════════
   APPLICATION CARDS
   Icon-centered sector cards for the Applications section.
══════════════════════════════════════════════════════════════════════ */

.application-card {
  text-align:     center;
  padding:        var(--space-6) var(--space-4);
  border:         1px solid var(--color-border);
  border-radius:  var(--border-radius-xl);
  background:     var(--color-bg-white);
  height:         100%;
  transition:     box-shadow var(--transition-base),
                  transform var(--transition-base),
                  border-color var(--transition-base);
}
.application-card:hover {
  box-shadow:   var(--shadow-gold);
  transform:    translateY(-3px);
  border-color: var(--color-gold-border);
}
.application-card__icon {
  width:          52px;
  height:         52px;
  border-radius:  var(--border-radius-lg);
  background:     var(--color-gold-light);
  display:        flex;
  align-items:    center;
  justify-content: center;
  margin:         0 auto var(--space-3);
}
.application-card__icon svg {
  width:  24px;
  height: 24px;
  color:  var(--color-gold-hover);
}
.application-card__title {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
  margin:      0;
  line-height: var(--line-height-snug);
}


/* ══════════════════════════════════════════════════════════════════════
   COMPARISON TABLE
   Styled wrapper for the product comparison table.
══════════════════════════════════════════════════════════════════════ */

.comparison-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}
.comparison-table thead th {
  background-color: var(--color-blue);
  color:            var(--color-white);
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  text-transform:   uppercase;
  letter-spacing:   var(--tracking-wide);
  padding:          var(--space-4) var(--space-5);
  text-align:       left;
  border-bottom:    none;
}
.comparison-table thead th:first-child {
  border-radius: 0;
}
.comparison-table tbody tr:nth-child(odd) td {
  background-color: var(--color-bg-white);
}
.comparison-table tbody tr:nth-child(even) td {
  background-color: var(--color-bg-alt);
}
.comparison-table tbody tr:hover td {
  background-color: var(--color-blue-xlight);
}
.comparison-table td {
  padding:       var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  color:         var(--color-text-primary);
  vertical-align: middle;
}
.comparison-table td:first-child {
  font-weight: var(--font-weight-semibold);
  color:       var(--color-blue);
}
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* Best-fit badge inside comparison table */
.best-fit-badge {
  display:       inline-block;
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-semibold);
  padding:       2px var(--space-3);
  border-radius: var(--border-radius-pill);
  white-space:   nowrap;
}
.best-fit-badge--gold {
  background: var(--color-gold-light);
  color:      var(--color-gold-hover);
  border:     1px solid var(--color-gold-border);
}
.best-fit-badge--blue {
  background: var(--color-blue-light);
  color:      var(--color-blue);
  border:     1px solid rgba(45,110,143,0.20);
}
.best-fit-badge--green {
  background: var(--color-green-light);
  color:      var(--color-green);
  border:     1px solid rgba(61,140,82,0.20);
}


/* ══════════════════════════════════════════════════════════════════════
   FAQ ACCORDION
   Overrides Bootstrap accordion for brand consistency.
══════════════════════════════════════════════════════════════════════ */

.products-faq .accordion-item {
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius-lg) !important;
  overflow:      hidden;
  margin-bottom: var(--space-3);
}
.products-faq .accordion-button {
  font-size:        var(--font-size-base);
  font-weight:      var(--font-weight-semibold);
  color:            var(--color-text-primary);
  background-color: var(--color-bg-white);
  padding:          var(--space-5) var(--space-6);
  box-shadow:       none;
  border-radius:    var(--border-radius-lg) !important;
}
.products-faq .accordion-button:not(.collapsed) {
  color:            var(--color-blue);
  background-color: var(--color-blue-light);
  box-shadow:       none;
}
.products-faq .accordion-button::after {
  filter: none;
}
.products-faq .accordion-button:not(.collapsed)::after {
  filter: none;
}
.products-faq .accordion-button:focus {
  box-shadow: var(--input-focus-shadow);
}
.products-faq .accordion-body {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  padding:     var(--space-4) var(--space-6) var(--space-6);
  background:  var(--color-bg-white);
}


/* ══════════════════════════════════════════════════════════════════════
   PRODUCTS CTA SECTION
   Full-width bg image with dark-blue gradient overlay.
══════════════════════════════════════════════════════════════════════ */

.products-cta {
  background: url('/assets/images/products/cta-bg.jpg') center / cover no-repeat;
  padding:    var(--space-24) 0;
  position:   relative;
  overflow:   hidden;
  text-align: center;
}
.products-cta::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    rgba(13, 27, 42, 0.93) 0%,
    rgba(45, 110, 143, 0.88) 100%
  );
}
.products-cta .container {
  position: relative;
  z-index:  1;
}
.products-cta h2 {
  color:         #fff;
  margin-bottom: var(--space-4);
}
.products-cta__lead {
  color:       rgba(255, 255, 255, 0.82);
  font-size:   var(--font-size-lg);
  max-width:   55ch;
  margin:      0 auto var(--space-8);
  line-height: var(--line-height-relaxed);
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  .products-hero {
    padding: var(--space-16) 0 var(--space-12);
  }
  .products-cta {
    padding: var(--space-16) 0;
  }
}

@media (max-width: 575.98px) {
  .comparison-table thead th,
  .comparison-table td {
    padding: var(--space-3) var(--space-3);
    font-size: var(--font-size-xs);
  }
}