/* ==========================================================================
   Augmented Systems — Site header / primary navigation
   --------------------------------------------------------------------------
   Scoped stylesheet for the redesigned navbar (client reference, 2026-08-18):
   solid white bar, centred nav, icon-tile mega panels, gradient "Talk to an
   Expert" CTA, and a light off-canvas drawer on mobile.

   WHY THIS FILE EXISTS
   frontend/includes/head.blade.php loads plugins.css + style.css from a
   hardcoded remote host, so edits to the local copy of style.css never reach
   the browser. Anything site-wide has to live in a locally served file linked
   AFTER style.css — same reasoning as typography.css.
   Load order: plugins.css -> style.css -> typography.css -> header-nav.css

   EVERY selector is scoped under `.navbar.as-nav` so nothing here can leak
   into other components. `.as-nav` is set in frontend/includes/header.blade.php
   and is copied onto the Headhesive sticky clone (`.navbar-clone.fixed`)
   automatically, so the sticky header inherits the same design.
   ========================================================================== */

.navbar.as-nav {
    /* Root font-size is 20px on this theme, so 1rem = 20px throughout. */
    --as-nav-h: 3.6rem;
    --as-ink: #101828;
    --as-ink-2: #5a6478;
    --as-blue: #3b6fd4;
    --as-blue-dark: #2450b5;
    --as-blue-soft: #e9f0fc;
    --as-line: rgba(16, 24, 40, 0.08);
    --as-panel-radius: 1.15rem;
    --as-panel-shadow:
        0 1.5rem 3.5rem rgba(16, 24, 40, 0.13),
        0 0.15rem 0.4rem rgba(16, 24, 40, 0.05);
}

/* --------------------------------------------------------------------------
   1. The bar
   The header keeps the theme's `position-absolute` so the ~40 existing pages
   that already reserve top padding for it do not shift. It is now opaque
   (the reference shows a solid white bar) with a hairline, instead of the
   old fully transparent treatment.
   -------------------------------------------------------------------------- */
.navbar.as-nav {
    background: #fff !important;
    border-bottom: 1px solid var(--as-line);
    padding-top: 0;
    padding-bottom: 0;
}

/* Sticky clone produced by Headhesive — lift it off the page instead of
   drawing a hairline, so the transition reads as "floating". */
.navbar.as-nav.fixed {
    border-bottom-color: transparent;
    box-shadow: 0 0.4rem 1.6rem rgba(16, 24, 40, 0.08);
}

.navbar.as-nav > .container {
    min-height: var(--as-nav-h);
}

.navbar.as-nav .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar.as-nav .navbar-brand img {
    height: 2rem;
    width: auto;
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .navbar.as-nav > .container {
        min-height: 3.2rem;
    }

    .navbar.as-nav .navbar-brand img {
        height: 1.8rem;
    }
}

/* Desktop layout: logo | centred nav | CTA. The two flanking cells share the
   leftover space equally, which is what actually centres the nav — the theme's
   `.center-nav` class has no styles of its own in style.css. */
@media (min-width: 992px) {
    .navbar.as-nav .navbar-brand.w-100 {
        width: auto !important;
        flex: 1 1 0;
    }

    .navbar.as-nav .navbar-collapse {
        flex: 0 0 auto;
    }

    .navbar.as-nav .navbar-other {
        flex: 1 1 0;
        display: flex;
        justify-content: flex-end;
        margin-left: 1rem !important;
    }
}

/* --------------------------------------------------------------------------
   2. Top-level links
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* The bar is taller than the link pills, so the strip of bar underneath a
       link used to belong to nobody: moving down towards a panel left the
       <li>, `:hover` dropped, and the menu closed before the cursor got there.
       Stretching the collapse -> list -> items to the full bar height folds
       that strip into the item itself. No overlay is involved, so every other
       link stays hoverable and clickable, and each pill keeps its own size
       because the link is centred inside the now taller <li>. */
    .navbar.as-nav .navbar-collapse {
        align-self: stretch;
    }

    .navbar.as-nav .navbar-collapse .offcanvas-body > .navbar-nav {
        flex: 1 1 auto;
    }

    .navbar.as-nav .navbar-nav {
        align-items: stretch;
        gap: 0.15rem;
    }

    .navbar.as-nav .navbar-collapse .navbar-nav > .nav-item {
        display: flex;
        align-items: center;
    }

    .navbar.as-nav .navbar-collapse .nav-link {
        color: var(--as-ink) !important;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: -0.005em;
        padding: 0.55rem 0.8rem !important;
        border-radius: 0.6rem;
        transition: color 0.18s ease, background-color 0.18s ease;
    }

    /* Bootstrap puts `.show` on the toggle itself and on the menu — never on
       the parent <li> — so the open state is matched on `.nav-link.show`. */
    .navbar.as-nav .navbar-collapse .nav-item:hover > .nav-link,
    .navbar.as-nav .navbar-collapse .nav-link:focus-visible,
    .navbar.as-nav .navbar-collapse .nav-link.show {
        color: var(--as-blue) !important;
        background: var(--as-blue-soft);
    }

    /* Current section */
    .navbar.as-nav .navbar-collapse .nav-item.as-current > .nav-link {
        color: var(--as-blue) !important;
    }

    /* Caret: recoloured, and flipped while the panel is open. */
    .navbar.as-nav .navbar-collapse .dropdown-toggle::after {
        color: currentColor !important;
        font-size: 0.85rem;
        margin-left: 0.15rem;
        transition: transform 0.2s ease;
    }

    .navbar.as-nav .navbar-nav > .dropdown:hover > .dropdown-toggle::after,
    .navbar.as-nav .navbar-nav > .dropdown > .dropdown-toggle.show::after {
        transform: rotate(180deg);
    }
}

/* --------------------------------------------------------------------------
   3. Dropdown panels — desktop
   Two positioning strategies:
     .as-dd-full  → the <li> goes `position: static`, so the menu is laid out
                    against the .navbar and stretched edge to edge. An inner
                    `.as-dd-rail` mirrors Bootstrap's .container and the card
                    sits inside it. Used by the wide panels because it can
                    never overflow the viewport, at any width.
     (default)    → menu is centred under its own trigger. Only used by the
                    narrow panels, which are too small to overflow.

   Popper never writes inline positions here: Bootstrap disables its
   applyStyles modifier for any dropdown inside a .navbar, which is why the
   theme positions these panels in CSS in the first place.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar.as-nav .navbar-nav > .nav-item.dropdown {
        position: relative;
    }

    .navbar.as-nav .navbar-nav > .nav-item.dropdown > .dropdown-menu {
        margin: 0 !important;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        min-width: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 17rem;
    }

    /* Wide panels: full-bleed track + inner container rail.
       This selector must stay at least as specific as the narrow-panel one
       above, or the `left/transform/width` set there wins and the wide panel
       is laid out as a 17rem column. */
    .navbar.as-nav .navbar-nav > .nav-item.dropdown.as-dd-full {
        position: static;
    }

    .navbar.as-nav .navbar-nav > .nav-item.dropdown.as-dd-full > .dropdown-menu {
        left: 0;
        right: 0;
        width: auto;
        transform: none;
        /* The track spans the viewport, so only the card itself should catch
           the pointer — otherwise the menu stays open while the cursor is far
           away over the hero. Closed panels are inert regardless: the theme
           hides them with `visibility: hidden`. */
        pointer-events: none !important;
    }

    .navbar.as-nav .as-dd-rail {
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 0.75rem;
        pointer-events: none;
    }

    .navbar.as-nav .as-dd-full .as-dd-panel {
        pointer-events: auto;
    }

    .navbar.as-nav .as-dd-panel {
        position: relative;
        margin-top: 0.35rem;
    }

    /* The theme reveals desktop panels on :hover only, so clicking a toggle or
       reaching it with the keyboard (Arrow Down opens it in Bootstrap) left the
       panel invisible. Honour Bootstrap's own `.show` state as well.

       Both states are pinned to `top: 100%` — the theme's own hover rule opens
       at `top: 80%`, which is inside the bar, so hover and click used to land
       the card at two different heights and the hovered one had to clear the
       bar with a large margin. Same specificity as the theme rule, later in the
       load order, so this wins. */
    .navbar.as-nav .navbar-nav > .nav-item.dropdown:hover > .dropdown-menu,
    .navbar.as-nav .navbar-nav > .nav-item.dropdown > .dropdown-menu.show {
        top: 100%;
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transition: all 0.25s ease-in-out;
    }

    /* Keeps the remaining margin between the bar and the card hoverable, so the
       panel does not close while the cursor crosses it. Kept just big enough to
       reach the bar's bottom edge: any taller and it would sit over the links
       of the neighbouring items (the wide panels span most of the bar). */
    .navbar.as-nav .as-dd-panel::before {
        content: "";
        position: absolute;
        top: -0.45rem;
        left: 0;
        right: 0;
        height: 0.5rem;
        display: block;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar.as-nav .navbar-collapse .nav-link {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }
}

/* --------------------------------------------------------------------------
   4. The panel card + icon-tile items (shared by desktop and mobile)
   -------------------------------------------------------------------------- */
.navbar.as-nav .as-dd-panel {
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: var(--as-panel-radius);
    box-shadow: var(--as-panel-shadow);
    padding: 0.85rem;
}

.navbar.as-nav .as-dd-panel.as-dd-solutions {
    max-width: 34rem;
}

.navbar.as-nav .as-dd-panel.as-dd-industries {
    max-width: 48rem;
}

.navbar.as-nav .as-dd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.1rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 992px) {
    .navbar.as-nav .as-dd-grid.as-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .navbar.as-nav .as-dd-grid.as-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* `.dropdown-item` is kept on the anchors so Bootstrap's keyboard navigation
   inside an open dropdown keeps working — the theme's list styling is undone
   here rather than the class being dropped. */
.navbar.as-nav .as-dd-item {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.65rem !important;
    border-radius: 0.75rem;
    white-space: normal !important;
    text-decoration: none;
    background: transparent;
    transition: background-color 0.18s ease;
}

.navbar.as-nav .as-dd-item:hover,
.navbar.as-nav .as-dd-item:focus-visible,
.navbar.as-nav .as-dd-item.as-current {
    background: #f4f7fd;
}

.navbar.as-nav .as-dd-ico {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    background: var(--as-blue-soft);
    color: var(--as-blue);
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.navbar.as-nav .as-dd-item:hover .as-dd-ico,
.navbar.as-nav .as-dd-item:focus-visible .as-dd-ico,
.navbar.as-nav .as-dd-item.as-current .as-dd-ico {
    background: var(--as-blue);
    color: #fff;
}

.navbar.as-nav .as-dd-text {
    min-width: 0;
}

.navbar.as-nav .as-dd-title {
    display: block;
    color: var(--as-ink);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.navbar.as-nav .as-dd-item:hover .as-dd-title,
.navbar.as-nav .as-dd-item:focus-visible .as-dd-title {
    color: var(--as-blue);
}

.navbar.as-nav .as-dd-sub {
    display: block;
    color: var(--as-ink-2);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 0.1rem;
}

/* "All Solutions →" style cell: no tile, arrow travels on hover. */
.navbar.as-nav .as-dd-item.as-dd-more {
    padding-left: 0.75rem !important;
}

.navbar.as-nav .as-dd-more .as-dd-title i {
    font-size: 0.85rem;
    vertical-align: -1px;
    margin-left: 0.15rem;
    transition: transform 0.18s ease;
    display: inline-block;
}

.navbar.as-nav .as-dd-more:hover .as-dd-title i {
    transform: translateX(0.2rem);
}

/* --------------------------------------------------------------------------
   5. "Talk to an Expert" CTA
   -------------------------------------------------------------------------- */
.navbar.as-nav .as-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 1.35rem;
    border-radius: 50rem;
    background: linear-gradient(135deg, var(--as-blue) 0%, var(--as-blue-dark) 100%);
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 0.5rem 1.15rem rgba(59, 111, 212, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.navbar.as-nav .as-nav-cta:hover,
.navbar.as-nav .as-nav-cta:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 0.7rem 1.4rem rgba(59, 111, 212, 0.34);
}

.navbar.as-nav .as-nav-cta i {
    font-size: 0.9rem;
    transition: transform 0.18s ease;
}

.navbar.as-nav .as-nav-cta:hover i {
    transform: translateX(0.2rem);
}

@media (prefers-reduced-motion: reduce) {
    .navbar.as-nav .as-nav-cta,
    .navbar.as-nav .as-nav-cta i,
    .navbar.as-nav .as-dd-item,
    .navbar.as-nav .as-dd-ico,
    .navbar.as-nav .dropdown-toggle::after {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   6. Mobile — light off-canvas drawer
   The theme ships a dark drawer whose nav links are `color:#fff !important`
   via `.navbar-expand-lg .navbar-collapse …` (0,3,0). The `.navbar.as-nav`
   prefix here is (0,4,0), so it wins on specificity, not on source order.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar.as-nav .offcanvas-nav {
        background: #fff;
        width: min(21rem, 88vw);
        box-shadow: 0 0 3rem rgba(16, 24, 40, 0.18);
    }

    .navbar.as-nav .offcanvas-nav .offcanvas-header {
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--as-line);
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
    }

    .navbar.as-nav .offcanvas-nav .offcanvas-header img {
        height: 2.1rem;
        width: auto;
    }

    .navbar.as-nav .offcanvas-nav .offcanvas-body {
        overflow-y: auto;
        flex-grow: 1;
        padding-top: 0.75rem;
        padding-bottom: 1.5rem;
    }

    .navbar.as-nav .navbar-collapse .navbar-nav {
        width: 100%;
    }

    .navbar.as-nav .navbar-collapse .nav-item + .nav-item {
        border-top: 1px solid var(--as-line);
    }

    .navbar.as-nav .navbar-collapse .nav-link,
    .navbar.as-nav .navbar-collapse .nav-link:hover,
    .navbar.as-nav .navbar-collapse .nav-link:focus,
    .navbar.as-nav .navbar-collapse .show > .nav-link {
        color: var(--as-ink) !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 700;
        padding: 0.85rem 0.15rem !important;
    }

    .navbar.as-nav .navbar-collapse .nav-item.as-current > .nav-link,
    .navbar.as-nav .navbar-collapse .nav-link.dropdown-toggle.show {
        color: var(--as-blue) !important;
    }

    /* The theme absolutely positions the caret off to the right of the link;
       inside a flex row it belongs in the normal flow. */
    .navbar.as-nav .navbar-collapse .dropdown-toggle::after {
        position: static !important;
        margin: 0 !important;
        top: auto !important;
        right: auto !important;
        font-size: 1rem;
        color: var(--as-ink-2) !important;
        transition: transform 0.2s ease;
    }

    .navbar.as-nav .navbar-collapse .dropdown-toggle.show::after {
        transform: rotate(180deg);
        color: var(--as-blue) !important;
    }

    /* Inline accordion panel: flat, no card chrome inside the drawer. */
    .navbar.as-nav .navbar-collapse .dropdown-menu {
        padding: 0 0 0.6rem !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0;
        box-shadow: none;
    }

    .navbar.as-nav .as-dd-panel {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        max-width: none;
    }

    .navbar.as-nav .as-dd-rail {
        padding: 0;
    }

    .navbar.as-nav .as-dd-item {
        padding: 0.5rem 0.15rem !important;
        gap: 0.65rem;
    }

    .navbar.as-nav .as-dd-ico {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.9rem;
        border-radius: 0.6rem;
    }

    .navbar.as-nav .as-dd-title {
        font-size: 0.76rem;
        font-weight: 600;
    }

    .navbar.as-nav .as-dd-item.as-dd-more {
        padding-left: 0.15rem !important;
    }

    /* Drawer footer: CTA + contact details */
    .navbar.as-nav .as-nav-drawer-foot {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--as-line);
    }

    .navbar.as-nav .as-nav-drawer-foot .as-nav-cta {
        display: flex;
        justify-content: center;
        width: 100%;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .navbar.as-nav .as-nav-drawer-foot a:not(.as-nav-cta) {
        color: var(--as-ink-2);
        font-size: 0.78rem;
        text-decoration: none;
    }

    .navbar.as-nav .as-nav-drawer-foot a:not(.as-nav-cta):hover {
        color: var(--as-blue);
    }

    .navbar.as-nav .as-nav-drawer-foot .social a {
        color: var(--as-ink-2);
        font-size: 1.05rem;
    }
}

/* Very small phones: the drawer takes the full width. */
@media (max-width: 380px) {
    .navbar.as-nav .offcanvas-nav {
        width: 100vw;
    }
}