/* ==========================================================================
   Sterling Organics — theme layer on top of Bootstrap 5
   Load AFTER bootstrap.min.css
   ========================================================================== */

:root{
  --so-ink:      #1A2229;
  --so-steel:    #293846;
  --so-paper:    #EDF0EC;
  --so-paper-alt:#E3E8E2;
  --so-line:     #BFC8C1;
  --so-accent:   #C6862E;
  --so-accent-dk:#AD7526;
  --so-teal:     #2F5D57;
  --so-white:    #FAFAF8;

  /* Remap Bootstrap theme colors so components (btn-primary, etc.) inherit our palette */
  --bs-primary: var(--so-accent);
  --bs-primary-rgb: 198,134,46;
  --bs-body-font-family: 'IBM Plex Sans', sans-serif;
  --bs-body-color: var(--so-ink);
  --bs-body-bg: var(--so-paper);
  --bs-border-color: var(--so-line);
  --bs-link-color: var(--so-teal);
  --bs-link-hover-color: var(--so-accent);
}

body{
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--so-paper);
  color: var(--so-ink);
}

.font-serif{ font-family:'Fraunces', serif; }
.font-mono{ font-family:'IBM Plex Mono', monospace; }
.text-accent{ color: var(--so-accent) !important; }
.text-teal{ color: var(--so-teal) !important; }
.bg-steel{ background: var(--so-steel) !important; }
.bg-ink{ background: var(--so-ink) !important; }
.bg-paper-alt{ background: var(--so-paper-alt) !important; }

/* ===== Navbar ===== */
.navbar-sterling{
  background: var(--so-steel);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar-sterling .navbar-brand{
  display:flex; align-items:center; gap:12px;
}
.brand-mark{
  width:34px; height:34px; border:1.5px solid var(--so-accent);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(45deg); flex-shrink:0;
}
.brand-mark span{
  transform:rotate(-45deg); font-family:'Fraunces', serif; font-weight:600;
  color: var(--so-accent); font-size:15px;
}
.brand-text .brand-name{ color: var(--so-white); font-family:'Fraunces', serif; font-size:19px; line-height:1.1;}
.brand-text .brand-sub{ color:#8FA0AC; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.navbar-sterling .nav-link{
  color:#C7D1D8; font-size:14px; letter-spacing:.02em;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.navbar-sterling .nav-link:hover,
.navbar-sterling .nav-link.active{ color: var(--so-white); border-color: var(--so-accent); }
.navbar-sterling .navbar-toggler{ border-color: rgba(255,255,255,.3); }
.btn-accent{
  background: var(--so-accent); border-color: var(--so-accent); color: var(--so-steel);
  font-weight:600; font-size:14px;
}
.btn-accent:hover{ background: var(--so-accent-dk); border-color: var(--so-accent-dk); color: var(--so-steel); }
.btn-outline-light-sm{
  border:1px solid rgba(255,255,255,.6); color: var(--so-white); font-size:14px;
}
.btn-outline-light-sm:hover{ background: rgba(255,255,255,.08); color: var(--so-white); }

/* ===== Hero ===== */
.hero-content h1{
  font-family:'Fraunces', serif; font-weight:500; line-height:1.08; letter-spacing:-.01em;
  font-size: clamp(34px, 4.6vw, 56px);
}
.hero-content h1 em{ font-style:italic; color: var(--so-accent); font-weight:500; }
.hero-content .lede{ color:#B9C4CC; font-size:16px; max-width:480px; }
.hero-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--so-accent); display:flex; align-items:center; gap:10px;
}
.hero-eyebrow::before{ content:''; width:26px; height:1px; background: var(--so-accent); }

.spec-panel{ background: var(--so-ink); border:1px solid rgba(255,255,255,.12); padding:24px; }
.spec-panel-title{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#8FA0AC; border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:12px; margin-bottom:14px; display:flex; justify-content:space-between;
}
.spec-row{
  display:flex; justify-content:space-between; padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.1); font-size:13.5px;
}
.spec-row:last-child{ border-bottom:none; }
.spec-row .lbl{ color:#8FA0AC; }
.spec-row .val{ font-family:'IBM Plex Mono', monospace; color: var(--so-white); }
.spec-row .val.accent{ color: var(--so-accent); }

.hero-stats{ border-top:1px solid rgba(255,255,255,.1); }
.hero-stats .stat{ padding:20px 28px; border-right:1px solid rgba(255,255,255,.1); }
.hero-stats .stat:first-child{ padding-left:0; }
.hero-stats .stat:last-child{ border-right:none; padding-right:0; }
.hero-stats .stat .stat-icon{ display:block; font-size:18px; color: var(--so-accent); margin-bottom:8px; }
.hero-stats .stat .num{ font-family:'Fraunces', serif; font-size:24px; color: var(--so-accent); }
.hero-stats .stat .lbl{ font-size:11px; color:#8FA0AC; }

/* ===== Section heads ===== */
.section-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--so-teal);
}
.section h2{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:-.01em; }

/* ===== Sector / category cards ===== */
.sector-card{
  background: var(--so-paper); border:1px solid var(--so-line);
  padding:28px 22px; height:100%; transition:.2s; text-decoration:none; display:block; color:inherit;
}
.sector-card:hover{ background: var(--so-steel); color:var(--so-white); }
.sector-card:hover .sc-code{ color: var(--so-accent); }
.sector-card:hover .sc-desc{ color:#C7D1D8; }
.sector-card:hover .sc-arrow{ opacity:1; transform:translateX(0); }
.sc-code{ font-family:'IBM Plex Mono', monospace; font-size:13px; color: var(--so-accent); margin-bottom:16px; display:block; }
.sc-title{ font-family:'Fraunces', serif; font-size:20px; margin-bottom:6px; }
.sc-desc{ font-size:13px; color:#5C6873; }
.sc-arrow{ opacity:0; transform:translateX(-4px); transition:.2s; color: var(--so-accent); }

/* Category list item (sector.php) */
.category-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px; background: var(--so-paper); border:1px solid var(--so-line);
  text-decoration:none; color:inherit; transition:.15s;
}
.category-row:hover{ background: var(--so-paper-alt); border-color: var(--so-teal); color:inherit; }
.category-row .cr-name{ font-family:'Fraunces', serif; font-size:17px; }
.category-row .cr-count{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:#5C6873; }

/* Product row (category.php) */
.product-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 20px; border-bottom:1px solid var(--so-line);
}
.product-row:first-child{ border-top:1px solid var(--so-line); }
.product-row .pr-name{ font-family:'IBM Plex Mono', monospace; font-size:14.5px; letter-spacing:.01em; }
.pdf-badge{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  border:1px solid var(--so-teal); color: var(--so-teal); padding:5px 12px; text-decoration:none; white-space:nowrap;
}
.pdf-badge:hover{ background: var(--so-teal); color: var(--so-white); }
.pdf-badge.disabled{ border-color: var(--so-line); color:#9AA5AC; pointer-events:none; }

/* ===== Breadcrumb ===== */
.so-breadcrumb{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:#5C6873;
}
.so-breadcrumb a{ color: var(--so-teal); text-decoration:none; }
.so-breadcrumb a:hover{ color: var(--so-accent); }

/* ===== Contact ===== */
.contact-section{ background: var(--so-steel); color: var(--so-white); }
.contact-section .form-control,
.contact-section .form-select{
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18); color: var(--so-white);
}
.contact-section .form-control::placeholder{ color:#7C8993; }
.contact-section .form-control:focus,
.contact-section .form-select:focus{
  background: rgba(255,255,255,.08); border-color: var(--so-accent);
  box-shadow: 0 0 0 .2rem rgba(198,134,46,.25);
}
.contact-section label{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#8FA0AC;
}
.cd-row{ border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:14px; margin-bottom:14px; }
.cd-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; color: var(--so-accent); letter-spacing:.08em; }

/* ===== Quote request button + modal ===== */
.enquire-btn{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  background: var(--so-accent); color: var(--so-steel); border:1px solid var(--so-accent);
  padding:5px 12px; white-space:nowrap;
}
.enquire-btn:hover{ background: var(--so-accent-dk); border-color: var(--so-accent-dk); color: var(--so-steel); }

#quoteModal .modal-content{
  background: var(--so-white); border:1px solid var(--so-line); border-radius:0;
}
#quoteModal .modal-header{
  border-bottom:1px solid var(--so-line); padding:22px 26px;
}
#quoteModal .modal-title{ font-family:'Fraunces', serif; font-size:24px; color: var(--so-ink); }
#quoteModal .btn-close{ opacity:.6; }
#quoteModal .modal-body{ padding:26px; }
#quoteModal label{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#5C6873; margin-bottom:6px; display:block;
}
#quoteModal .form-control, #quoteModal .form-select{
  border:1px solid var(--so-line); border-radius:0; padding:12px 14px; font-size:14.5px;
}
#quoteModal .form-control:focus, #quoteModal .form-select:focus{
  border-color: var(--so-accent); box-shadow: 0 0 0 .2rem rgba(198,134,46,.15);
}
#quoteModal .form-control[readonly]{ background: var(--so-paper-alt); color: var(--so-ink); }
#quoteModal .captcha-row{
  background: var(--so-paper-alt); border:1px dashed var(--so-line);
  padding:14px 16px; display:flex; align-items:center; gap:14px;
}
#quoteModal .captcha-question{ font-family:'IBM Plex Mono', monospace; font-size:14px; white-space:nowrap; }
#quoteModal .captcha-row input{ max-width:90px; }
#quoteModal .btn-submit-quote{
  background: var(--so-steel); color: var(--so-white); border:none; padding:13px 20px;
  font-weight:600; font-size:14.5px; width:100%;
}
#quoteModal .btn-submit-quote:hover{ background: var(--so-ink); color: var(--so-white); }
#quoteModal .btn-submit-quote:disabled{ opacity:.6; }

/* ===== Footer ===== */
.site-footer{ background: var(--so-ink); color:#8FA0AC; font-size:12.5px; }
.site-footer a{ color:#B9C4CC; }

/* ===== Misc ===== */
.hairline{ border-color: var(--so-line) !important; }