/* 
##################
Filen: app/static/css/public.css
##################
*/

/* 
##################
SECTION 001: ROOT + THEME TOKENS
##################
*/
:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;

  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.18);

  --container: 1180px;
  --header-offset: 90px; /* used for anchor offset */
}

/* 
##################
SECTION 002: RESET & BASE
##################
*/
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ min-height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height:1.6;
  overflow-x: hidden; /* prevents horizontal scroll from full-bleed hero */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }

/* 
##################
SECTION 003: HEADER / NAV (STICKY + PURPLE FADE)
##################
*/
.header{
  position: -webkit-sticky; /* iOS Safari */
  position: sticky;
  top: 0;
  z-index: 1000;            /* keep above everything on scroll */
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(900px 400px at 10% -100%, var(--purple-300) 0%, transparent 70%),
    radial-gradient(900px 400px at 90% -120%, var(--purple-400) 0%, transparent 70%),
    linear-gradient(180deg, var(--purple-100) 0%, #ffffff 75%);
  backdrop-filter:saturate(1.1) blur(6px);
  will-change: transform;   /* smoother on mobile */
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; position:relative; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand img{ height:40px; max-height:40px; width:auto; border-radius:8px; box-shadow:var(--shadow-sm); }
.brand .brand-title{ font-weight:800; letter-spacing:.3px; font-size:clamp(1.15rem, 1.8vw, 1.55rem); }
.nav-links{ display:flex; align-items:center; gap:12px; font-weight:600; }
.nav-links a,
.nav-links button.nav-link{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 12px; border-radius:10px; transition:.2s ease;
  background:transparent; border:none; font:inherit; color:inherit; text-decoration:none; cursor:pointer;
}
.nav-links a:hover,
.nav-links button.nav-link:hover{ background:#f5f5f7; }
.nav-link-strong{ font-weight:800 !important; }
.dropdown{ position:relative; }
.dropdown-right .dropdown-menu{ left:auto; right:0; }
.dropdown-toggle span{ font-size:.82em; }
.dropdown-menu{
  position:absolute; top:110%; left:0; min-width:230px; max-width:min(92vw, 360px);
  max-height:min(72vh, calc(100svh - 140px)); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-md); padding:8px;
  display:none; z-index: 1100; /* above header content */
}
.dropdown-menu-wide{ min-width:min(340px, 92vw); }
@media (min-width: 1101px){
  .dropdown:hover .dropdown-menu{ display:block; }
  body.force-close-dropdown .dropdown:hover .dropdown-menu{ display:none; }
}
.dropdown.open .dropdown-menu{ display:block; }
.dropdown-menu a{ display:block; padding:10px; border-radius:8px; }
.dropdown-menu a:hover{ background:#f8fafc; }

.nav-cta{ display:flex; gap:10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid transparent; font-weight:700;
  cursor:pointer; transition:.2s ease;
}
.btn-primary{ background:var(--purple-600); color:#fff; }
.btn-primary:hover{ background:var(--purple-700); }
.btn-ghost{ border-color:var(--border); }
.btn-ghost:hover{ background:#f9fafb; }

.nav-toggle{
  display:none !important; border:1px solid var(--border); padding:10px 12px; border-radius:10px; background:#fff;
}
@media (max-width: 1100px){
  .nav-links, .nav-cta{ display:none; }
  .nav.open{ flex-direction:column; align-items:stretch; gap:10px; }
  .nav.open .nav-links, .nav.open .nav-cta{
    display:flex; flex-direction:column; align-items:stretch; width:100%;
    max-height:calc(100svh - 96px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    padding:6px 0 10px;
  }
  .nav.open .nav-links a,
  .nav.open .nav-links button.nav-link{ width:100%; justify-content:flex-start; text-align:left; }
  .nav.open .dropdown{ width:100%; }
  .nav-toggle{ display:inline-flex !important; }
  .dropdown-menu{ position:static; display:none; border:none; box-shadow:none; padding:6px 0 0; margin:0 0 0 12px; min-width:0; max-width:none; max-height:none; background:transparent; }
  .dropdown.open .dropdown-menu{ display:block; }
}
@media (min-width: 1101px){
  .nav-toggle{ display:none !important; }
}
.header.scrolled{ box-shadow:var(--shadow-md); }

/* 
##################
SECTION 004: HERO (PURPLE DEPTH)
##################
*/
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(1200px 600px at 10% -20%, var(--purple-300) 0%, transparent 70%),
    radial-gradient(900px 500px at 90% -10%, var(--purple-400) 0%, transparent 70%),
    linear-gradient(180deg, var(--purple-100) 0%, var(--purple-50) 100%);
}
.hero-inner{ padding:86px 0 72px; }
.hero-card{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius);
  backdrop-filter: blur(6px);
  box-shadow:var(--shadow-lg);
  padding:26px;
}
.hero h1{ margin:24px 0 12px; font-size: clamp(28px, 4.5vw, 54px); line-height:1.1; letter-spacing:.3px; }
.hero p{ color:#374151; font-size: clamp(14px, 2.2vw, 18px); }
.hero-actions{ display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; }

/* 
##################
SECTION 005: FEATURE CARDS
##################
*/
.features{ padding:46px 0; }
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:18px; }
@media (max-width:1000px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }
.card{ border:1px solid var(--border); border-radius:var(--radius); padding:22px; background:#fff; box-shadow:var(--shadow-sm); }
.card h3{ margin:0 0 8px; font-size:1.05rem; }
.card p{ color:var(--muted); margin:0; }

/* 
##################
SECTION 006: DETAILED SERVICES (WITH IMAGES)
##################
*/
.services{ padding:56px 0; border-top:1px solid var(--border); }
.service{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; margin:32px 0; }
.service.reverse{ grid-template-columns:.9fr 1.1fr; }
@media (max-width:960px){ .service,.service.reverse{ grid-template-columns:1fr; } }
.service-figure{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-md);
  background:
    radial-gradient(120% 120% at 20% 0%, var(--purple-100) 0%, rgba(255,255,255,.6) 60%),
    #fff;
}
.service-figure img{ width:100%; height:300px; object-fit:contain; display:block; padding:16px; }
.service h3{ margin:0 0 8px; font-size:1.5rem; }
.service p{ margin:0 0 10px; color:var(--muted); }
.service ul{ margin:12px 0 0; padding-left:18px; }
.service li{ margin:4px 0; color:#4b5563; }

/* 
##################
SECTION 007: GENERIC SECTIONS + CONTACT
##################
*/
.section{ padding:64px 0; border-top:1px solid var(--border); }
.section h2{ font-size:1.9rem; margin:0 0 14px; }
.section .sub{ color:var(--muted); margin-bottom:18px; }
.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:start; }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }
.input, textarea{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fff; }
textarea{ min-height:140px; resize:vertical; }
.input:focus, textarea:focus{ outline:none; border-color:var(--purple-400); box-shadow:0 0 0 3px rgba(168,85,247,.15); }

/* 
##################
SECTION 008: SERVICE AREA CHIPS
##################
*/
.localities{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.localities .chip{ padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:.9rem; }

/* 
##################
SECTION 009: FOOTER + UTILITIES
##################
*/
.footer{ padding:32px 0; border-top:1px solid var(--border); color:var(--muted); font-size:.95rem; }
.badge{ display:inline-block; padding:12px 10px; border-radius:999px; background:var(--purple-100); color:#5b21b6; font-weight:700; font-size:.82rem; }
.center{text-align:center;}
.mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:18px;} .mt-6{margin-top:26px;}

/* 
##################
SECTION 010: ANIMATIONS
##################
*/
.fade-up{ opacity:0; transform:translateY(8px); animation:fadeup .6s ease .1s forwards; }
@keyframes fadeup{ to{ opacity:1; transform:none; } }

/* 
##################
SECTION 011: ANCHOR OFFSET HELPERS
##################
*/
.features, .section, .service { scroll-margin-top: var(--header-offset); }

/* 
##################
SECTION 020: PORTAL — HEADER TEXT & THEME TWEAKS
##################
*/
.portal { --border: #e5e7eb; } /* lighter borders in portal */

.portal .header { color:#111827; } /* dark text inside portal header */
.portal .header .brand-title,
.portal .header .nav-links a,
.portal .header .nav-links .nav-link { color:#111827 !important; }

.portal .dropdown-menu{ background:#fff; color:#111827; }
.portal .dropdown-menu a{ color:#111827 !important; }
.portal .header .btn-ghost{ background:#fff; border-color:var(--border); color:#111827 !important; }

/* 
##################
SECTION 021: PORTAL — FULL-BLEED HERO (matches public edge-to-edge)
Works no matter how the hero is wrapped (direct child or inside .container).
##################
*/
.portal .hero{
  /* break the hero out of any width clamp */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0 !important; /* butt up to sticky header */
}

/* If the hero sits inside a .container wrapper, force it full-bleed anyway */
.portal .container > .hero{
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Keep content inside the hero nicely centered/narrow */
.portal .hero > .container,
.portal .hero > .inner,
.portal .hero > .hero-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* 
##################
SECTION 075: Dealer List Tiles – Pop & Contrast (portal)
##################
*/
:root{
  --dealer-accent: var(--purple-500, #a855f7);
  --dealer-accent-2: var(--purple-400, #c084fc);
}
.dealers-grid .card,
.dealer-list .card,
.dealer-cards .card,
.dealer-card,
.dealer-tile,
.dealer-box{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border:1px solid #e6e8f0; border-radius:16px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, .12), 0 2px 6px rgba(17, 24, 39, .07);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.dealers-grid .card::before,
.dealer-list .card::before,
.dealer-cards .card::before,
.dealer-card::before,
.dealer-tile::before,
.dealer-box::before{
  content:""; position:absolute; inset:-1px; border-radius:16px;
  background:
    radial-gradient(600px 240px at 0% -10%, rgba(160, 120, 255, .12), transparent 65%),
    radial-gradient(600px 240px at 100% -10%, rgba(125, 211, 252, .12), transparent 65%);
  pointer-events:none;
}
.dealers-grid .card:hover,
.dealer-list .card:hover,
.dealer-cards .card:hover,
.dealer-card:hover,
.dealer-tile:hover,
.dealer-box:hover{
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--dealer-accent) 45%, #e6e8f0);
  box-shadow: 0 18px 40px rgba(17, 24, 39, .18), 0 4px 10px rgba(17, 24, 39, .10);
  background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
}
.dealers-grid .card h3,
.dealer-list .card h3,
.dealer-card h3,
.dealer-tile h3,
.dealer-box h3{ margin:0 0 6px; font-weight:800; letter-spacing:.2px; color:#0f172a; }
.dealer-acct-pill,
.dealers-grid .card .acct-pill,
.dealer-card .acct-pill{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background: color-mix(in oklch, var(--dealer-accent) 90%, white 10%);
  color:#fff; font-size:12px; font-weight:800; letter-spacing:.2px;
  box-shadow:0 4px 10px rgba(168,85,247,.25);
}
.dealer-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#f8fafc; border:1px solid #e6e8f0; color:#374151;
  font-size:.85rem; font-weight:600;
}
.dealer-link,
.dealers-grid .card a,
.dealer-card a{ color: var(--dealer-accent); text-decoration:none; }
.dealer-link:hover,
.dealers-grid .card a:hover,
.dealer-card a:hover{ text-decoration:underline; }
.dealers-grid .card:focus-within,
.dealer-card:focus-within{
  outline:3px solid color-mix(in oklch, var(--dealer-accent-2) 45%, transparent);
  outline-offset:2px;
}
.dealers-grid .card,
.dealer-list .card,
.dealer-card,
.dealer-tile,
.dealer-box{ padding:16px 16px; }
.dealers-grid, .dealer-list, .dealer-cards{ --border:#e6e8f0; }

/* 
##################
SECTION 080: FLASH MESSAGES (shared)
##################
*/
.flash{
  max-width: var(--container, 1180px);
  margin: 10px auto;
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  color: #111827;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: flex; align-items: center; gap: .6rem;
  transition: opacity .6s ease, transform .6s ease, height .6s ease, margin .6s ease, padding .6s ease, border-width .6s ease;
  animation: flash-hide 0s ease 10s forwards; /* auto-hide after 10s */
}
.flash.success{ background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 70%); border-color:#a7f3d0; color:#065f46; }
.flash.error{   background: linear-gradient(180deg, #fef2f2 0%, #ffffff 70%); border-color:#fecaca; color:#991b1b; }
.flash.warning{ background: linear-gradient(180deg, #fffbeb 0%, #ffffff 70%); border-color:#fde68a; color:#92400e; }
.flash.info{    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 70%); border-color:#bfdbfe; color:#1e3a8a; }
.flash::before,
.flash.success::before,
.flash.error::before,
.flash.warning::before,
.flash.info::before{ content:none !important; }
.flash.is-hidden{ opacity:0; transform:translateY(-6px); height:0; margin:0; padding:0; border-width:0; pointer-events:none; }
@keyframes flash-hide{
  to{ opacity:0; transform:translateY(-6px); height:0; margin:0; padding:0; border-width:0; pointer-events:none; }
}

/* 
##################
SECTION 090: PORTAL CARD “HALO” (subtle glow, global in portal)
##################
*/
:root{
  --pc-line:    rgba(168,85,247,.22);
  --pc-glow-1:  rgba(168,85,247,.14);
  --pc-glow-2:  rgba(99,102,241,.12);
  --pc-glow-3:  rgba(34,211,238,.10);
  --pc-radius:  16px;
}
.portal .card{
  position: relative;
  border-radius: var(--pc-radius) !important;
  border: 1px solid var(--pc-line) !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.02),
    0 10px 24px var(--pc-glow-1),
    0 18px 50px var(--pc-glow-2),
    0 28px 60px var(--pc-glow-3) !important;
  background-image:
    radial-gradient(120% 120% at 0% 0%,     rgba(192,132,252,.28), transparent 70%),
    radial-gradient(120% 120% at 100% 0%,   rgba(99,102,241,.22),  transparent 70%),
    radial-gradient(120% 120% at 0% 100%,   rgba(34,211,238,.18),  transparent 70%),
    radial-gradient(120% 120% at 100% 100%, rgba(168,85,247,.22),  transparent 70%);
  background-blend-mode: screen;
  transition: transform .15s ease, box-shadow .15s ease;
}
.portal .card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.02),
    0 16px 40px var(--pc-glow-1),
    0 28px 70px var(--pc-glow-2),
    0 40px 90px var(--pc-glow-3) !important;
}
.portal .card[style*="background:#0a0a0a"],
.portal .card[style*="background: #0a0a0a"]{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 10px 24px var(--pc-glow-1),
    0 18px 50px var(--pc-glow-2),
    0 28px 60px var(--pc-glow-3) !important;
}


/* ===============================================
   SECTION 030: PORTAL – Header/Hero seam + sticky fixes
   =============================================== */

/* 1) Keep the header always above everything on the portal */
.portal .header{
  position: sticky;   /* keep sticky behavior */
  top: 0;
  z-index: 9999 !important;   /* ensure nothing scrolls over it */
}

/* Some browsers can “clip” sticky if any parent has overflow.
   Force the main wrappers to be visible so sticky never drops. */
html, body,
.portal .main, .portal main, .portal .content, .portal .main-content{
  overflow: visible !important;
}

/* 2) Give the hero the same full-bleed band as public
      (no side gutters on the first container that wraps it) */
.portal .main-content > .container:first-child,
.portal main > .container:first-child,
.portal .content > .container:first-child{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Remove any vertical gap between the sticky header and the hero */
.portal .header + *{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If the first thing under the header is a container, nuke its top padding. */
.portal .header + .container{
  padding-top: 0 !important;
}

/* Compensate for the header’s 1px bottom border so the purple band
   “kisses” the header (no visible seam). */
.portal .hero{
  margin-top: -1px !important;
  border-top: 0 !important;
}

/* 4) Keep the hero content nicely centered like public */
.portal .hero > .container,
.portal .hero > .hero-inner,
.portal .hero > .inner{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* 5) Defensive: if any old spacer is present, hide it on portal */
.portal .header + .header-spacer,
.portal .header + .spacer{
  display: none !important;
}
/* ===============================================
   SECTION 031: Portal mobile overflow fixes
   =============================================== */

/* Keep header always above content (safety) */
.portal .header{ z-index: 9999 !important; }

/* --- 1) Stop any horizontal page scroll on mobile --- */
@media (max-width: 768px){
  html, body{ overflow-x: hidden !important; }
  body.portal,
  .portal .main-content,
  .portal main,
  .portal .content{ overflow-x: hidden !important; max-width: 100vw; }
}

/* --- 2) Card halos can cause overflow; trim them on small screens --- */
@media (max-width: 768px){
  /* outside glows around cards/lists */
  .portal .card::after,
  .portal .grid .card::before{
    content: none !important;
  }
  /* if you kept any “ambient” ::before glows on special dealer tiles */
  .portal .dealer-card::before,
  .portal .dealer-tile::before,
  .portal .dealer-box::before{
    content: none !important;
  }
}

/* --- 3) Make horizontal chip/tab rows scroll inside themselves,
          not widen the page (covers common class names) --- */
.portal .tabs,
.portal .chip-row,
.portal .subtabs,
.portal .pill-nav,
.portal .localities{
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.portal .tabs > *,
.portal .chip-row > *,
.portal .subtabs > *,
.portal .pill-nav > *,
.portal .localities > *{
  flex: 0 0 auto; /* don’t stretch, allow horizontal scroll */
}

/* --- 4) Defensive width guards for cards/containers on mobile --- */
@media (max-width: 768px){
  .portal .container,
  .portal .card,
  .portal .grid,
  .portal .dealer-card,
  .portal .dealer-box,
  .portal .dealer-tile{
    max-width: 100%;
  }
}

/* ===============================================
   SECTION 032: Portal – sensible wrapping (no tables)
   =============================================== */

/* Let flex/grid children shrink (prevents weird overflows) */
.portal .card,
.portal .grid,
.portal .row,
.portal .flex,
.portal .content,
.portal .container { min-width: 0; }
.portal .card > *,
.portal .grid > *,
.portal .row > *,
.portal .flex > * { min-width: 0; }

/* General text in cards can wrap normally… */
.portal .card,
.portal .card *{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* …but NEVER wrap inside tables (we’ll scroll horizontally on mobile) */
.portal .card table,
.portal .card table *{
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: nowrap !important;
}

/* ===============================================
   SECTION 034: Portal tables – readable on phones
   (single-letter headers fix + horizontal scroll)
   =============================================== */

.portal .card table{
  width: 100%;
  table-layout: auto !important;   /* natural column sizing */
  border-collapse: collapse;
}
.portal .card th,
.portal .card td{
  white-space: nowrap !important;  /* stop “S t a t u s” */
  word-break: normal !important;
  overflow-wrap: normal !important;
  vertical-align: top;
}

/* Allow wrapping ONLY when you opt-in with .wrap on a cell */
.portal .card td.wrap,
.portal .card th.wrap{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Phones: scroll the card sideways instead of squashing columns */
@media (max-width: 768px){
  .portal .card{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .portal .card table{
    min-width: 680px !important;   /* adjust if your table needs a bit more */
  }
}


/*
##################
SECTION 011: COMMAND BAR
##################
*/
.nav-search-trigger{
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font:inherit;
}
.nav-search-trigger:hover{ background:#faf5ff; border-color:var(--purple-300); }
@media (max-width: 1100px){
  .nav-search-trigger{ width:100%; justify-content:flex-start !important; }
}

.command-bar-backdrop[hidden],
.command-bar-modal[hidden]{
  display:none !important;
}
body.command-bar-open{
  overflow:hidden;
}
.command-bar-results{
  min-height:72px;
}

.command-bar-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.48); backdrop-filter:blur(4px); z-index:20000;
}
.command-bar-modal{
  position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:12vh 20px 20px; z-index:20001;
}
.command-bar-card{
  width:min(860px, 100%); background:#fff; border:1px solid rgba(148,163,184,.25); border-radius:24px; box-shadow:0 28px 80px rgba(15,23,42,.28); overflow:hidden;
}
.command-bar-input-row{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); }
.command-bar-icon{ font-size:1.15rem; }
#command-bar-input{ flex:1 1 auto; border:none; outline:none; font-size:1.08rem; background:transparent; color:var(--text); }
#command-bar-input::placeholder{ color:var(--muted); }
.command-bar-close{ border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; }
.command-bar-help{ padding:10px 20px 0; color:var(--muted); font-size:.88rem; }
.command-bar-results{ max-height:62vh; overflow:auto; padding:14px 12px 16px; display:grid; gap:14px; }
.command-bar-group{ display:grid; gap:8px; }
.command-bar-group-title{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:0 10px; }
.command-bar-item{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:16px; border:1px solid rgba(148,163,184,.18); background:#fff; transition:background .15s ease, border-color .15s ease, transform .15s ease; }
.command-bar-item:hover, .command-bar-item.is-active{ background:#faf5ff; border-color:var(--purple-300); transform:translateY(-1px); }
.command-bar-item-icon{ width:34px; height:34px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:rgba(168,85,247,.1); flex:0 0 34px; }
.command-bar-item-copy{ min-width:0; flex:1 1 auto; }
.command-bar-item-title{ font-weight:800; color:var(--text); }
.command-bar-item-subtitle{ color:var(--muted); font-size:.9rem; margin-top:2px; }
.command-bar-item-badge{ flex:0 0 auto; align-self:center; padding:4px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.22); background:#f8fafc; font-size:.78rem; font-weight:700; color:#334155; }
.command-bar-empty{ padding:18px; color:var(--muted); text-align:center; }
@media (max-width: 767px){
  .command-bar-modal{ padding:14vh 12px 16px; }
  .command-bar-card{ border-radius:20px; }
  .command-bar-input-row{ padding:16px; }
}