/* ============================================================
   Site chrome: mobile drawer + footer grid.

   The navbar's hamburger used to toggle `.mobile-menu`, an element that
   was never in the DOM and had no styles — so mobile had no navigation
   at all. This file supplies both.
   ============================================================ */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
}
.mobile-menu[hidden] { display: none; }

.mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.mobile-menu.is-open .mobile-menu-backdrop { opacity: 1; }

.mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(86vw, 340px);
    background: var(--bg, #fff);
    border-left: 1px solid var(--border, #E2E8F0);
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    overscroll-behavior: contain;
}
.mobile-menu.is-open .mobile-menu-panel { transform: translateX(0); }

.mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #E2E8F0);
    flex-shrink: 0;
}

.mobile-menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px calc(12px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 48px min height keeps every row a comfortable thumb target */
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #0F172A);
    transition: background 0.15s;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus-visible { background: var(--surface-2, #F1F5F9); }
.mobile-menu-link i,
.mobile-menu-link svg { color: var(--primary, #2563EB); flex-shrink: 0; }

.mobile-menu-foot {
    display: grid;
    gap: 8px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border, #E2E8F0);
    flex-shrink: 0;
}

/* ---- One breakpoint for the whole header ----
   components.css dropped the nav links at 768px while the search and CTAs
   held on until 1023px, so between roughly 1024 and 1100 every element was
   on screen at once and the bar overflowed (it needs ~1071px of room and a
   1024px window only offers ~1009 once the scrollbar is taken out).
   Everything now switches together at 1100px. */
@media (min-width: 1100px) {
    .mobile-menu { display: none !important; }
}
@media (max-width: 1099px) {
    .navbar-nav { display: none; }
    .navbar-mobile-toggle { display: inline-flex; }
    .navbar-search,
    .navbar-signin,
    .navbar-cta { display: none !important; }
    .navbar-actions { gap: 6px; }
}

body.has-drawer-open { overflow: hidden; }

/* ============================================================
   Header polish.

   Fixes four things the bar was missing: no current-page indicator, a
   ~320px dead gap between the links and the actions, no search (the one
   control a services marketplace header should always have), and no
   elevation once the page scrolls under it.
   ============================================================ */

/* Push the search into the middle so the bar reads brand | links | search | actions
   instead of leaving a void. */
.navbar > .container > .navbar-nav { margin-left: var(--space-2, 8px); }
.navbar-search { margin-left: auto; }
.navbar > .container > .navbar-actions { margin-left: var(--space-3, 12px); }

.navbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    width: clamp(180px, 22vw, 280px);
    padding: 0 10px 0 12px;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 10px;
    background: var(--surface-2, #F8FAFC);
    color: var(--text-tertiary, #94A3B8);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.navbar-search:focus-within {
    background: #fff;
    border-color: var(--primary, #2563EB);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2563EB) 14%, transparent);
}
.navbar-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--text-primary, #0F172A);
}
.navbar-search input::placeholder { color: var(--text-tertiary, #94A3B8); }
/* Hide the browser's own clear button — it fights the kbd hint */
.navbar-search input::-webkit-search-cancel-button { display: none; }
.navbar-search kbd {
    flex-shrink: 0;
    padding: 2px 7px;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary, #94A3B8);
}
.navbar-search:focus-within kbd { display: none; }

/* Icon + label on one line. Without this the two are inline and wrap onto
   separate lines as soon as the bar gets tight, which is what pushed the
   icons above their labels. */
.navbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ---- Mega menu ----
   It was anchored to the "Services" trigger with left:50% + a 720px min-width,
   so half of it hung off the left edge of the screen. Anchoring to the bar
   instead centres it in the viewport. */
.navbar .mega-menu-trigger { position: static; }
.navbar .mega-menu {
    top: calc(100% + 8px);
    left: 50%;
    min-width: 0;
    width: min(940px, calc(100vw - 32px));
    max-width: none;
}

/* app.js implements hover-intent for this menu (150ms grace on leave, reopen
   on entering the panel) and toggles `is-open` on the MENU — but the only
   stylesheet rule matched `.mega-menu-trigger.is-open`, i.e. the trigger. So
   the JS ran and changed nothing, leaving pure `:hover` in charge. Because the
   panel now hangs below the whole bar, the pointer crosses navbar space that
   isn't part of the trigger on its way down, `:hover` drops, and the menu
   vanished mid-travel. Honouring the class the JS actually sets fixes it. */
.navbar .mega-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Compact cards: the 48px icon tiles made each row tall enough that the panel
   ran most of the screen height. */
.navbar .mega-menu .service-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 10px 12px;
}
.navbar .mega-menu .service-card-icon {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin-bottom: 0;
}
.navbar .mega-menu .service-card-icon svg { width: 18px; height: 18px; }
.navbar .mega-menu .service-card-title { grid-column: 2; align-self: end; font-size: 13.5px; }
.navbar .mega-menu .service-card-desc  { grid-column: 2; align-self: start; font-size: 12px; }

/* Current section */
.navbar-link.is-active {
    color: var(--primary, #2563EB);
    background: var(--primary-subtle, #EFF6FF);
    border-radius: 8px;
}

/* Elevation appears only once content scrolls beneath the bar */
.navbar { transition: box-shadow .2s ease, border-color .2s ease; }
.navbar.is-stuck { box-shadow: 0 6px 20px -12px rgb(15 23 42 / .25); }

@media (max-width: 1240px) {
    .navbar-search { width: 190px; }
}

/* ---- Footer ---- */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: var(--space-8, 32px);
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}
.footer-links a { transition: color 0.15s; }
.footer-links a:hover { color: var(--primary, #2563EB); }

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6, 24px); }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* Bottom nav overlaps the page end — reserve room so the footer clears it.
   Must match where components.css actually shows the bar (<=768px). */
@media (max-width: 768px) {
    body { padding-bottom: 64px; }
}