/* ============================================================
   UFI SHARED CSS — site chrome only (tokens, base, buttons, nav, footer)
   Loaded by every page. Edit here once; every page picks it up.
   Page-specific sections (hero, product grid, spotlight, FAQ, etc.)
   stay in each page's own <style> block — see design-system.md.
   ============================================================ */

:root{
  --navy: #000a1e;
  --navy-soft: #0c1c34;
  --teal: #006a6a;
  --teal-deep: #004f4f;
  --gold: #FBB03D;         /* sampled directly from the real logo, not the muted Material auto-tone */
  --canvas: #FDFCFB;
  --stage: #F3F4F6;
  --ink: #001A35;
  --ink-sm: #4b5c68;
  --ink-soft: #6b7a87;
  --ink-dim: #b7c2cc;
  --line: #e4e2dd;

  --gold-deep: #DB8F1F;    /* deeper gold for hover/active states */

  /* Category accent colors — see design-system.md color table.
     These five are the only place hue varies by category. */
  --cat-store:    #006a6a;
  --cat-school:   #FBB03D;
  --cat-hospital: #3E6690;
  --cat-office:   #5b6b76;
  --cat-home:     #C1694F;

  /* Category deep variants */
  --cat-store-deep:    #004f4f;
  --cat-school-deep:   #DB8F1F;
  --cat-hospital-deep: #2C4A69;
  --cat-office-deep:   #3f4c56;
  --cat-home-deep:     #A0523B;

  /* Legacy alias names referenced directly by category page <style> blocks */
  --steel: var(--cat-hospital);
  --steel-deep: var(--cat-hospital-deep);
  --slate: var(--cat-office);
  --slate-deep: var(--cat-office-deep);
  --terracotta: var(--cat-home);
  --terracotta-deep: var(--cat-home-deep);

  /* Typography scale — every font-size in the site references one of these.
     Change a value here and it updates everywhere that role is used. */
  --fs-h1: clamp(2rem, 4.6vw, 3.1rem);        /* hero headline only */
  --fs-h2: clamp(1.5rem, 3vw, 2.2rem);         /* every section heading */
  --fs-h2-sm: clamp(1.25rem, 2.4vw, 1.7rem);   /* compact pinned heading */
  --fs-h3: 1.05rem;                             /* card / tile / step titles */
  --fs-h3-sm: .88rem;                           /* small card titles */
  --fs-lead: .92rem;                            /* intro paragraph under a heading */
  --fs-lead-sm: .8rem;                          /* intro paragraph, space-constrained */
  --fs-body: .86rem;                            /* card & caption description text */
  --fs-sm: .78rem;                              /* footer meta, small captions */
  --fs-xs: .72rem;                              /* eyebrow labels, tiny sub-labels */
  --fs-xxs: .68rem;                             /* compact eyebrow */
  --fs-btn: .92rem;                             /* buttons */

  /* ============================================================
     DESIGN TOKENS — semantic groups
     ============================================================ */

  /* Spacing scale */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

/* Semantic spacing scale */
  --space-xs: .25rem;   /* 4px */
  --space-sm: .5rem;    /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */

  /* Motion tokens */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* Radius */
  --radius-sm: .25rem;
  --radius-md: .4rem;
  --radius-lg: .6rem;
  --radius-xl: .75rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--canvas); font-family:'Hanken Grotesk', sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; }
.wrap{ max-width:1220px; margin:0 auto; padding:0 1.75rem; }
.eyebrow{ font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:700; display:flex; align-items:center; gap:.6rem; }
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.6; }

.btn{ display:inline-block; font-family:inherit; font-weight:600; font-size:var(--fs-btn); border-radius:.3rem; padding:.85rem 1.5rem; cursor:pointer; border:none; transition:transform .15s ease, background .2s ease, border-color .2s ease; }
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn-solid{ background:var(--teal); color:#fff; }
.btn-solid:hover{ background:var(--teal-deep); }
.btn-outline{ background:transparent; border:1.5px solid var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; }
.btn-ghost-light{ display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.4); padding:.85rem 1.4rem .85rem 1rem; }
.btn-ghost-light:hover{ background:rgba(255,255,255,.16); border-color:#fff; }

/* Card / surface utility — shared foundation for product, category, feature cards */
.card{ background:var(--canvas); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:box-shadow var(--transition-normal), transform var(--transition-fast); overflow:hidden; }
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============ PAGE TRANSITION ============ */
.ufi-page-transition{ animation:ufiFadeIn var(--duration-fast) var(--ease-out); }
@keyframes ufiFadeIn{ from{opacity:.92;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
@media (prefers-reduced-motion:reduce){
  .ufi-page-transition{ animation:none; }
}

/* Focus visible — global */
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible){ outline:none; }
/* Custom focus-visible states for interactive elements */
.hamburger:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.h-node:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.modal-close:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.filter-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.swatch:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.tier-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.rotate-tag:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.qc-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.tile:focus-visible .tile-img{ outline:2px solid var(--gold); outline-offset:2px; }

/* ============ NAV ============ */
header{ position:sticky; top:0; z-index:40; background:rgba(253,252,251,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); }
header.at-top{ background:var(--navy) !important; border-bottom-color:transparent !important; backdrop-filter:none !important; }
header.at-top .nav-links a{ color:rgba(255,255,255,.92); }
header.at-top .nav-links a:hover{ color:var(--gold); }
header.at-top .hamburger span{ background:#fff; }
header.at-top .brand span{ color:#fff; }
@media (max-width:880px){
  header.at-top .nav-links{ background:var(--canvas); }
  header.at-top .nav-links a{ color:var(--ink-soft); }
  header.at-top .nav-links a:hover{ color:var(--navy); }
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.75rem; max-width:1220px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand img{ width:42px; height:42px; }
.brand span{ font-weight:800; font-size:.95rem; letter-spacing:.01em; color:var(--navy); display:none; }
.nav-links{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:.88rem; font-weight:600; color:var(--ink-soft); transition:color .2s; position:relative; }
.nav-links a::after{ content:""; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--teal); transition:width var(--transition-fast); }
.nav-links a:hover::after, .nav-links a.current::after{ width:100%; }
.nav-links a:hover{ color:var(--navy); }
.nav-links a.current{ color:var(--teal); }
header.at-top .nav-links a.current{ color:var(--gold); }
header.at-top .nav-links a.current::after{ background:var(--gold); }
.nav-right{ display:flex; align-items:center; gap:1rem; }
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; }
.hamburger span{ width:22px; height:2px; background:var(--navy); display:block; transition:transform var(--transition-fast), opacity var(--transition-fast); transform-origin:center; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-links{ position:absolute; top:100%; left:0; right:0; background:var(--canvas); flex-direction:column; gap:0; border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height var(--transition-normal), opacity var(--transition-fast); opacity:0; }
  .nav-links.open{ max-height:400px; opacity:1; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding:1rem 1.75rem; }
  .hamburger{ display:flex; }
  .brand span{ display:inline; font-size:.8rem; }
}
@media (max-width: 420px){
  .nav-cta{ padding:.6rem .9rem; font-size:.8rem; }
  .brand span{ display:none; }
}

/* ============ CURVE DIVIDER (shared utility — see design-system.md) ============ */
.curve{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; width:100%; height:8vw; min-height:56px; max-height:120px; overflow:hidden; }

/* ============ SHARED COMPONENTS (moved from page inlines) ============ */

/* Hero content — centered text block within all hero sections.
   Pages with dark heroes override with color:#fff in their own <style>. */
.hero-content{ max-width:720px; margin:0 auto; position:relative; z-index:2; padding:5rem 1.75rem; }

/* Hero subtitle — consistent across all pages with a hero */
.hero-content .sub{ font-size:1.02rem; line-height:1.6; color:var(--ink-dim); max-width:520px; margin:0 0 2rem; }

  /* Breadcrumb helpers — --ink-dim is the light grey for dark hero backgrounds */
  .breadcrumb{ font-size:var(--fs-sm); color:var(--ink-dim); margin:0 0 1.75rem; display:flex; align-items:center; gap:.5rem; }
  .breadcrumb a{ transition:color .2s; }
  .breadcrumb a:hover{ color:var(--gold); }
  .breadcrumb .sep{ opacity:.5; }
  .breadcrumb .current{ color:#fff; font-weight:600; }

/* Stage image placeholder label */
.stage-placeholder{ position:absolute; bottom:.75rem; right:.9rem; font-family:'IBM Plex Mono', monospace; font-size:.62rem; color:var(--ink-sm); opacity:.55; text-align:right; }

/* Spotlight description — category pages */
.spotlight-desc{ font-size:1rem; line-height:1.65; color:var(--ink-sm); margin:0 0 2rem; max-width:460px; }

/* Stats row — homepage, about, projects */
.stats-row{ display:flex; justify-content:center; gap:3.5rem; margin:3rem 0; flex-wrap:wrap; }
.stat{ text-align:center; }
.stat b{ display:block; font-size:2rem; font-weight:800; color:var(--gold); font-family:'IBM Plex Mono', monospace; }
.stat span{ font-size:.8rem; color:var(--ink-sm); }
@media (max-width:880px){ .stats-row{ gap:2rem; } }

/* Bulk CTA — category pages, projects. Canvas (light) background
   so it alternates with the dark footer per the section-rhythm rule. */
.bulk-cta{ background:var(--canvas); padding:4rem 0; position:relative; }
.bulk-cta .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.bulk-cta h2{ font-size:var(--fs-h2); font-weight:800; margin:0 0 .4rem; color:var(--navy); }
.bulk-cta p{ font-size:var(--fs-lead); color:var(--ink-sm); margin:0; }
.bulk-cta-actions{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:1.5rem; }

/* ============ FOOTER ============ */
footer{ background:var(--navy); color:var(--ink-dim); padding:4rem 0 0; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand img{ width:56px; height:56px; margin-bottom:1rem; }
.footer-brand p{ font-size:var(--fs-body); line-height:1.6; max-width:260px; }
.footer-col h4{ color:#fff; font-size:var(--fs-sm); letter-spacing:.08em; text-transform:uppercase; margin:0 0 1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ font-size:var(--fs-body); transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:1.5rem 0; font-size:var(--fs-sm); flex-wrap:wrap; gap:1rem; }
.social{ display:flex; gap:.75rem; }
.social a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s; }
.social a:hover{ border-color:var(--gold); background:rgba(251,176,61,.1); }
.social svg{ width:15px; height:15px; }
.crafted-by{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-xs); color:var(--ink-dim); }

/* ============ MEGA-MENU ============ */
.nav-item.has-submenu{ position:relative; display:flex; align-items:center; }

@media (min-width:900px){
  .nav-item.has-submenu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
  }
  .submenu{
    position:absolute; top:calc(100% + 10px); left:50%;
    transform:translate(-50%,8px);
    width:640px; max-width:90vw; background:#fff; border-radius:1rem;
    box-shadow:0 24px 48px rgba(0,10,30,.16); border:1px solid var(--line);
    display:grid; grid-template-columns:220px 1fr; overflow:hidden;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    z-index:50;
  }
  .nav-item.has-submenu:hover .submenu,
  .nav-item.has-submenu:focus-within .submenu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  }
  .submenu-list{ list-style:none; margin:0; padding:.75rem; display:flex; flex-direction:column; gap:.15rem; }
  .submenu-list a{ display:flex; align-items:center; gap:.7rem; padding:.65rem .75rem;
    border-radius:.5rem; font-size:var(--fs-body); font-weight:600; color:var(--ink);
    transition:background .15s ease, color .15s ease; }
  header.at-top .nav-links .submenu-list a{ color:var(--ink); }
  .submenu-list a:hover, .submenu-list a:focus-visible{ background:var(--stage); color:var(--navy); }
  .submenu-icon{ width:22px; height:22px; color:var(--teal); flex-shrink:0; }
  .submenu-preview{ position:relative; background:var(--navy); overflow:hidden; }
  .submenu-preview-media{ position:absolute; inset:0; background-size:cover;
    background-position:center; transition:opacity .25s ease; }
  .submenu-preview-scrim{ position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,10,30,0) 30%, rgba(0,10,30,.9) 100%); }
  .submenu-preview-copy{ position:absolute; left:0; right:0; bottom:0; padding:1.2rem; }
  .submenu-preview-copy b{ display:block; color:#fff; font-size:var(--fs-h3-sm); font-weight:800; }
  .submenu-preview-copy p{ color:rgba(255,255,255,.8); font-size:var(--fs-xs); margin:.3rem 0 .8rem; }
  .submenu-preview-cta{ color:var(--gold); font-size:var(--fs-xs); font-weight:700; }
}
@media (prefers-reduced-motion:reduce){
  .submenu, .submenu-preview-media{ transition:none; }
}
@media (max-width:899px){
  .submenu{ display:none; }
  .nav-item.has-submenu{ display:block; position:static; }
}
@media (max-width:880px){ .footer-top{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:span 2; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } .footer-brand{ grid-column:auto; } }