/* ====================================================================
   SWAYAM POLYMER — Refined Industrial (Moodboard 1a) — TEST PALETTE
   Bootstrap 5 companion stylesheet
   Variable names kept as-is (sp-teal/sp-orange etc.) to avoid touching
   every selector below; only the palette VALUES were swapped from the
   Technical Precision (teal/orange) direction to Refined Industrial
   (navy/amber), per documents/docs-swapolymerr/mood board/swayam-polymer-color-codes.md
   ==================================================================== */

:root {
  --sp-bg:        #F4F1EA;  /* was #F2F3F0 — now --cream */
  --sp-teal:      #12233D;  /* was #0F3D3E — now --navy */
  --sp-dark:      #2A2A28;  /* was #23272A — now --graphite */
  --sp-orange:    #D98A34;  /* was #E8622C — now --amber */
  --sp-gray:      #C9CDC7;  /* unchanged */
  --sp-line:      #E4E0D6;  /* was #e2e4de — now --line */
  --sp-text:      #4A4A46;  /* was #4a4d47 — now --ink */
  --sp-muted:     #8a8d85;  /* unchanged */
  --sp-steel:     #2C4A6E;  /* new — secondary accent from Refined Industrial palette */
  --font-head:    'Space Grotesk', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  color: var(--sp-text);
  background: var(--sp-bg);
  font-size: 15px;
  line-height: 1.7;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--sp-teal);
  line-height: 1.2;
}
a { color: var(--sp-orange); }

/* Mono uppercase section tag */
.sp-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sp-orange);
  margin-bottom: 14px;
  display: block;
}
.sp-tag::before { content: "// "; opacity: .55; }
.sp-tag.text-light-tag { color: var(--sp-orange); }

.sp-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sp-muted);
}

/* ---------- Buttons ---------- */
.btn { border-radius: 2px; font-weight: 600; font-size: 14px; padding: 12px 26px; }
.btn-sp-orange {
  background: var(--sp-orange); color: #fff; border: 1px solid var(--sp-orange);
}
.btn-sp-orange:hover { background: #C67C29; border-color: #C67C29; color: #fff; }
.btn-sp-outline-light {
  border: 1px solid rgba(255,255,255,.45); color: #fff; background: transparent;
}
.btn-sp-outline-light:hover { border-color: #fff; color: var(--sp-teal); background: #fff; }
.btn-sp-outline-teal {
  border: 1px solid var(--sp-teal); color: var(--sp-teal); background: transparent;
}
.btn-sp-outline-teal:hover { background: var(--sp-teal); color: #fff; }

/* ---------- Navbar ---------- */
.sp-navbar {
  background: #fff;
  border-bottom: 1px solid var(--sp-line);
}
.sp-navbar .navbar-brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  color: var(--sp-teal);
  letter-spacing: -.01em;
}
.sp-navbar .navbar-brand .brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-right: 10px;
  background: var(--sp-teal); color: var(--sp-orange);
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  border-radius: 2px;
}
.sp-navbar .nav-link {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  color: var(--sp-teal); margin: 0 6px;
}
.sp-navbar .nav-link:hover, .sp-navbar .nav-link.active { color: var(--sp-orange); }
.sp-topbar {
  background: var(--sp-dark);
  font-family: var(--font-mono); font-size: 11.5px;
  color: rgba(255,255,255,.65);
  padding: 7px 0;
}
.sp-topbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.sp-topbar a:hover { color: var(--sp-orange); }
.sp-topbar .bi { color: var(--sp-orange); margin-right: 5px; }

/* ---------- Navbar dropdown (Products, etc. — driven by $topHeader) ---------- */
.sp-navbar .dropdown-menu {
  border: 1px solid var(--sp-line);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(18,35,61,.08);
  padding: 6px 0;
  margin-top: 4px;
}
.sp-navbar .dropdown-item {
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  color: var(--sp-teal) !important; padding: 8px 20px; background: transparent !important;
}
.sp-navbar .dropdown-item:hover, .sp-navbar .dropdown-item:focus, .sp-navbar .dropdown-item.active {
  background: var(--sp-bg) !important; color: var(--sp-orange) !important;
}
.sp-navbar .nav-link.dropdown-toggle::after { vertical-align: 2px; opacity: .6; }
@media (min-width: 992px) {
  .sp-navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
}

/* ---------- Hero ---------- */
.sp-hero { background: var(--sp-teal); color: #fff; position: relative; overflow: hidden; }
.sp-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none;
}
.sp-hero > .container { position: relative; z-index: 1; }
.sp-hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 52px); }
.sp-hero .lead { color: rgba(255,255,255,.78); font-size: 17px; }
.sp-hero .hero-body { color: rgba(255,255,255,.6); font-size: 14.5px; max-width: 560px; }

/* Hero / page stats */
.sp-stats { border-top: 1px solid rgba(255,255,255,.15); }
.sp-stat .num {
  font-family: var(--font-mono); font-weight: 700; font-size: 26px; color: var(--sp-orange);
}
.sp-stat .lbl { font-size: 11.5px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Image placeholders (CMS will replace) ---------- */
.sp-img-ph {
  position: relative; width: 100%; overflow: hidden; border-radius: 2px;
  background: repeating-linear-gradient(135deg, #dfe1db 0, #dfe1db 12px, #e8eae4 12px, #e8eae4 24px);
  border: 1px solid var(--sp-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--sp-muted); min-height: 220px;
}
.sp-img-ph.dark {
  background: repeating-linear-gradient(135deg, #16283f 0, #16283f 12px, #1c3252 12px, #1c3252 24px);
  border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5);
}
.sp-img-ph .bi { font-size: 34px; opacity: .6; }
.sp-img-ph .ph-label {
  position: absolute; top: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45); color: #fff;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  padding: 5px 10px; text-transform: uppercase;
}
.sp-img-ph.ratio-hero { min-height: 340px; }
.sp-img-ph.ratio-card { min-height: 180px; }

/* Hero image slider — homepage.index, Banner Manager location "HomeHeroSlider" */
.sp-hero-slider { position: relative; }
.sp-hero-slider .sp-hero-slide {
    display: none;
    width: 100%;
}
.sp-hero-slider .sp-hero-slide.active {
    display: block;
    animation: spHeroFade .6s ease;
}
@keyframes spHeroFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.sp-hero-slider .sp-hero-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.sp-hero-slider .sp-hero-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(255,255,255,.45);
    cursor: pointer;
}
.sp-hero-slider .sp-hero-dots button.active { background: #fff; }

/* ---------- Section rhythm ---------- */
.sp-section { padding: 72px 0; }
.sp-section.tight { padding: 56px 0; }
.sp-section h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 16px; }
.bg-sp-white { background: #fff; }
.bg-sp-teal  { background: var(--sp-teal); }
.bg-sp-dark  { background: var(--sp-dark); }

/* ---------- Spec-sheet cards ---------- */
/* NOTE: previously used `gap: 1px` on this flex row to fake divider lines.
   Bootstrap's col-lg-3 / col-md-6 columns have flex-shrink: 0, so they can't
   shrink to absorb that extra gap width — the row overflowed by a few px and
   the 4th column wrapped onto its own line, leaving an empty box in both rows.
   Dividers are now drawn as borders on the columns themselves instead, so the
   4 columns always total exactly 100% and stay on one row. */
.sp-grid { border: 1px solid var(--sp-line); background: #fff; }
.sp-grid > div { border-right: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }
.sp-grid > div:last-child { border-right: none; }
@media (min-width: 768px) and (max-width: 991.98px) {
  .sp-grid > div:nth-child(2n) { border-right: none; }
}
@media (min-width: 992px) {
  .sp-grid > div:nth-child(4n) { border-right: none; }
}
.sp-cell { background: #fff; padding: 26px 24px; height: 100%; }
.sp-cell .bi { font-size: 26px; color: var(--sp-orange); }
.sp-cell h3, .sp-cell h5 { font-size: 17px; margin: 12px 0 8px; }
.sp-cell p { font-size: 13.5px; margin: 0; color: var(--sp-text); }
.sp-cell .cell-mono { font-family: var(--font-mono); font-size: 11px; color: var(--sp-muted); margin-top: 10px; }
.sp-cell .cell-mono .hl { color: var(--sp-orange); }

/* Product spec cards */
.sp-product { background: #fff; padding: 26px 24px; height: 100%; position: relative; }
.sp-product .p-code {
  font-family: var(--font-mono); font-size: 10px; color: var(--sp-muted);
  position: absolute; top: 14px; right: 16px; letter-spacing: .08em;
}
.sp-product h3 { font-size: 20px; margin-bottom: 4px; }
.sp-product .p-full { font-size: 12.5px; color: var(--sp-muted); margin-bottom: 14px; }
.sp-product ul { list-style: none; margin: 0 0 14px; padding: 0; }
.sp-product ul li {
  font-family: var(--font-mono); font-size: 13px; color: var(--sp-text);
  padding: 6px 0; border-bottom: 1px dashed var(--sp-line);
}
.sp-product ul li::before { content: "· "; color: var(--sp-orange); font-weight: 700; }
.sp-product .p-link {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  text-decoration: none; color: var(--sp-teal);
}
.sp-product .p-link:hover { color: var(--sp-orange); }

/* ---------- Index-style list (01 — Packaging) ---------- */
.sp-index { font-family: var(--font-mono); font-size: 13px; color: var(--sp-teal); }
.sp-index .idx-item {
  padding: 14px 4px; border-bottom: 1px solid var(--sp-line);
  display: flex; align-items: center; gap: 12px;
}
.sp-index .idx-num { color: var(--sp-orange); font-weight: 600; }
.sp-index .bi { color: var(--sp-muted); margin-left: auto; }

/* ---------- Scale banner / bar chart ---------- */
.sp-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.sp-bars .bar { flex: 1; background: rgba(255,255,255,.22); position: relative; border-radius: 2px 2px 0 0; }
.sp-bars .bar.hl { background: var(--sp-orange); }
.sp-bars .bar .b-lbl {
  position: absolute; bottom: -24px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.55);
}
.sp-bars .bar .b-val {
  position: absolute; top: -20px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.8);
}

/* ---------- Client strip ---------- */
.sp-client {
  background: #fff; border: 1px solid var(--sp-line); border-radius: 2px;
  padding: 18px 14px; text-align: center; height: 100%;
  font-family: var(--font-mono); font-size: 12px; color: var(--sp-teal);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Mission / Vision cards ---------- */
.sp-mv-card {
  background: #fff; border: 1px solid var(--sp-line); border-top: 3px solid var(--sp-orange);
  border-radius: 2px; padding: 34px 30px; transition: transform .25s ease, box-shadow .25s ease;
}
.sp-mv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(18,35,61,.10); }
.sp-mv-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--sp-teal); color: var(--sp-orange);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px;
}
.sp-mv-card h3 { font-size: 19px; color: var(--sp-teal); margin-bottom: 10px; }
.sp-mv-card p { font-size: 14.5px; color: var(--sp-text); margin: 0; }

/* ---------- Values / checklist ---------- */
.sp-check { list-style: none; padding: 0; margin: 0; }
.sp-check li { padding: 9px 0; border-bottom: 1px dashed var(--sp-line); font-size: 14.5px; }
.sp-check li .bi { color: var(--sp-orange); margin-right: 10px; }

/* ---------- CTA band ---------- */
.sp-cta { background: var(--sp-teal); color: #fff; }
.sp-cta h2 { color: #fff; }
.sp-cta p { color: rgba(255,255,255,.7); }

/* ---------- Page header (inner pages) ---------- */
.sp-pagehead { background: var(--sp-teal); color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden; }
.sp-pagehead::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none;
}
.sp-pagehead > .container { position: relative; z-index: 1; }
.sp-pagehead h1 { color: #fff; font-size: clamp(28px, 3.6vw, 44px); }
.sp-pagehead p { color: rgba(255,255,255,.7); max-width: 640px; }
.sp-breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 16px; }
.sp-breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.sp-breadcrumb a:hover { color: var(--sp-orange); }

/* ---------- Contact ---------- */
.sp-contact-card { background: #fff; border: 1px solid var(--sp-line); border-radius: 2px; padding: 30px 28px; height: 100%; }
.sp-contact-card .bi { font-size: 22px; color: var(--sp-orange); }
.sp-contact-card h5 { font-size: 15px; margin: 12px 0 6px; }
.sp-contact-card p, .sp-contact-card a { font-size: 14px; margin: 0; color: var(--sp-text); text-decoration: none; }
.sp-contact-card a:hover { color: var(--sp-orange); }

.sp-form { background: #fff; border: 1px solid var(--sp-line); border-radius: 2px; padding: 36px 32px; }
.sp-form .form-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sp-teal);
}
.sp-form .form-control, .sp-form .form-select {
  border-radius: 2px; border-color: var(--sp-gray); font-size: 14px; padding: 10px 14px;
}
.sp-form .form-control:focus, .sp-form .form-select:focus {
  border-color: var(--sp-teal); box-shadow: 0 0 0 .2rem rgba(18,35,61,.12);
}

/* ---------- Footer ---------- */
.sp-footer { background: var(--sp-dark); color: rgba(255,255,255,.65); font-size: 13.5px; }
.sp-footer h6 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #fff;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px;
}
.sp-footer h6::before { content: "// "; color: var(--sp-orange); }
.sp-footer a { color: rgba(255,255,255,.65); text-decoration: none; display: block; padding: 3px 0; }
.sp-footer a:hover { color: var(--sp-orange); }
.sp-footer .footer-brand { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #fff; }
.sp-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4);
}
.sp-footer .bi { color: var(--sp-orange); margin-right: 8px; }

/* ---------- Misc ---------- */
.text-orange { color: var(--sp-orange) !important; }
.map-ph { min-height: 320px; }
@media (max-width: 767px) {
  .sp-section { padding: 52px 0; }
  .sp-bars { height: 110px; }
}

/* ====================================================================
   LEGACY THEME RE-SKIN — Dream Clarity → Swayam Polymer
   This file loads AFTER public/usercss/webstyle.css, so overriding the
   old theme's root CSS custom properties here re-themes every
   old-theme component that references them via var(...) without having
   to rewrite each selector individually. This covers the site-wide
   Storm Widget (public/userjs/storm-widget.js — topbar, onload/exit
   modals, trust-proof card, cookie banner, WhatsApp FAB, chat widget —
   all styled by the .sw-* classes in webstyle.css) plus any other
   not-yet-rebuilt page still relying on these same variables.
   ==================================================================== */
:root {
  --accent:       #D98A34;  /* was #FFD369 (Dream Clarity gold) → Swayam Polymer amber */
  --accent-deep:  #C67C29;  /* was #FFC34D → amber hover/active */
  --bg-primary:   #12233D;  /* was #0B132B → Swayam Polymer navy */
  --bg-secondary: #1B3455;  /* was #1D2A53 → lighter navy */
  --bg-cream:     #F4F1EA;  /* was #FBF7F2 → Swayam Polymer cream */
  --bg-sage:      #2C4A6E;  /* was #B4C5A7 → steel accent (Refined Industrial) */
  --text-light:   #F9F9F9;  /* unchanged — still works on navy */
  --text-dark:    #12233D;  /* was #0B132B → matches new navy */
  --support-sage: #2C4A6E;  /* was #B4C5A7 → steel accent */
}

/* ====================================================================
   TEMPLATE MIGRATION HELPERS
   Added when the old "Dream Clarity" per-template inline <style> blocks
   (dc-*/dcp-*/dcl-*/dcs-* classes, one copy per cms/*.blade.php file)
   were removed from resources/views/cms/*. These give the CMS page
   templates (Default / Product / Legal / Solution Layout) the small set
   of extra components they need, built on the --sp-* tokens above so
   every page template stays on one design system instead of each
   carrying its own copy of the old theme.
   ==================================================================== */
.sp-pagehead.sp-pagehead-lg { padding: 96px 0 64px; min-height: 420px; display: flex; align-items: center; text-align: center; }
.sp-hero-sub { color: rgba(255,255,255,.75); font-size: 17px; max-width: 620px; }
.sp-pagehead.sp-pagehead-lg .sp-hero-sub { margin: 0 auto 28px; }

.sp-content-img { border-radius: 2px; box-shadow: 0 12px 40px rgba(18,35,61,.14); width: 100%; object-fit: cover; }

.sp-numlist .num-item { display: flex; align-items: flex-start; gap: 18px; padding: 20px 0; border-bottom: 1px dashed rgba(255,255,255,.15); }
.sp-numlist .num-item:last-child { border-bottom: none; }
.sp-numlist .num-item .num { font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: var(--sp-orange); min-width: 46px; line-height: 1; }
.sp-numlist .num-item h4 { color: #fff; font-size: 16.5px; margin-bottom: 4px; }
.sp-numlist .num-item p { color: rgba(255,255,255,.75); font-size: 14.5px; margin: 0; }

.sp-checklist .check-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.sp-checklist .check-row:last-child { border-bottom: none; }
.sp-checklist .check-row .tick { width: 30px; height: 30px; border-radius: 50%; background: var(--sp-orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--sp-teal); font-size: 13px; }
.sp-checklist .check-row .ctext { color: #fff; font-size: 15px; line-height: 1.6; }

.sp-blockquote { background: #fff; border-left: 3px solid var(--sp-orange); padding: 22px 26px; margin-bottom: 24px; font-size: 18px; font-style: italic; color: var(--sp-teal); }

.sp-prose { color: var(--sp-text); font-size: 16px; line-height: 1.85; }
.sp-prose h2 { font-size: 22px; margin-top: 40px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--sp-line); }
.sp-prose h3 { font-size: 17px; margin-top: 26px; margin-bottom: 10px; color: var(--sp-steel); }
.sp-prose p, .sp-prose li { color: var(--sp-text); margin-bottom: 14px; }
.sp-prose a { color: var(--sp-orange); text-decoration: underline; }

.sp-card { background: #fff; border-radius: 2px; padding: 48px 52px; box-shadow: 0 4px 24px rgba(18,35,61,.08); }
.sp-toc { position: sticky; top: 100px; }
.sp-toc-card { background: #fff; border: 1px solid var(--sp-line); border-radius: 2px; padding: 24px; }
.sp-toc-card h6 { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--sp-teal); margin-bottom: 18px; }
.sp-toc-card ul { list-style: none; padding: 0; margin: 0; }
.sp-toc-card ul li { margin-bottom: 10px; }
.sp-toc-card ul li a { font-size: 13.5px; color: var(--sp-muted); text-decoration: none; }
.sp-toc-card ul li a:hover { color: var(--sp-orange); }

@media (max-width: 992px) { .sp-card { padding: 32px 24px; } .sp-toc { display: none; } }