/* ==========================================================================
   Sachdeva Group — light header bar
   Scope     : index.html only (loaded after marine.css / marine-pages.css)
   Namespace : every rule is gated on .sgh-header, the class added to
               <header class="header sgh-header">, so the other 12 pages keep
               the existing navy/teal gradient bar untouched.
   Palette   : shares the footer's ink + cyan so the page reads as one system.
   ========================================================================== */

:root {
    --sgh-ink: #071a2e;
    /* header bar                     */
    --sgh-panel: #0a2340;
    /* dropdown panel                 */
    --sgh-cyan: #22b3e6;
    --sgh-cyan-bright: #35c6f4;
    --sgh-cyan-deep: #1195cf;
    /* #1195cf is only 2.96:1 on the light bar, which fails for 15.5px nav text.
       This deeper marine reads 5.2:1 and still holds the cyan identity. */
    --sgh-cyan-ink: #0a6a9c;
    --sgh-link: #e7f0f8;
    --sgh-link-dim: #b9cbdc;
    --sgh-ease: cubic-bezier(.16, 1, .3, 1);
    /* Montserrat is what style.css asks for site-wide but is never actually
       loaded as a webfont, so name the platform fallbacks explicitly rather
       than dropping to whatever generic sans the browser picks. */
    --sgh-font: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==========================================================================
   1. The bar
   ========================================================================== */

/* The bar is LIGHT so the plain colour mark reads as artwork — no plate, no
   halo, no filter on the image.
   A light passage on the left only was tried first and rejected: the menu is
   ~850px wide, so at a 1000px viewport the first nav link starts at x=110,
   i.e. inside the light zone, where white type disappears. Lighting the whole
   bar and flipping the nav to ink is the only version that cannot break at
   any width. Ink type on this ground measures 15.9:1. */
.sgh-header {
    --sgh-bar-1: #ffffff;
    --sgh-bar-2: #e9f1f8;

    background: linear-gradient(150deg, var(--sgh-bar-1) 0%, var(--sgh-bar-2) 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(7, 26, 46, .10);
    box-shadow: 0 12px 30px -24px rgba(7, 26, 46, .55);
    padding: 2px 0;
}

.sgh-header.sticky_menu {
    background: linear-gradient(150deg, rgba(255, 255, 255, .97) 0%, rgba(233, 241, 248, .97) 100%) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(34, 179, 230, .30);
    box-shadow: 0 16px 38px -26px rgba(7, 26, 46, .65) !important;
    padding: 2px 0;
}

/* marine.css draws a gold hairline under the sticky bar — recolour it cyan */
.sgh-header.sticky_menu::after {
    background: linear-gradient(90deg, transparent, var(--sgh-cyan), transparent);
    opacity: .55;
}

/* css/style.css ends with a stray global `.container { padding: 20px }` that
   added 40px of dead height to the bar. Neutralise it inside the header only —
   the rule still applies everywhere else on the page. */
.sgh-header > .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* the brand's own margin provides the bar's breathing room */
.sgh-header .menubar {
    padding: 0;
}

/* One flex row in both states, so the logo and nav stay centred against each
   other instead of relying on floats. */
.sgh-header .navbar,
.sgh-header.sticky_menu .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sgh-header .navbar-collapse {
    flex: 1 1 auto;
}

/* style.css hides the logo the moment the bar goes sticky; the reference keeps
   it in place, and a bar that drops its own logo on scroll reads as a bug. */
.sgh-header.sticky_menu .navbar-brand {
    display: block;
}

/* images/logo.png is the full-colour mark: orange wheel over navy wordmark.
   It sits directly on the light bar as plain artwork. */
.sgh-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    height: auto;
    padding: 0;
    margin: 14px 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* The mark is nearly square (wheel over wordmark), so cap it by HEIGHT —
   capping width alone left a 99px-tall logo and a 164px-tall bar.
   70px is the largest size that stays under the file's own 110x99 pixels,
   so it scales down (sharp) rather than up (soft). */
/* Plain artwork: no plate, no halo, no filter. The light bar is the ground. */
.sgh-header .navbar-brand > img {
    max-width: none;
    max-height: 70px;
    width: auto;
    transition: max-height .45s var(--sgh-ease), transform .45s var(--sgh-ease);
}

.sgh-header .navbar-brand:hover > img,
.sgh-header .navbar-brand:focus-visible > img {
    transform: translateY(-2px);
}

/* Scrolled: the bar is pinned over the page, so shrink the mark back down
   instead of parking 110px of chrome on top of the content. */
.sgh-header.sticky_menu .navbar-brand {
    margin: 10px 0;
}

.sgh-header.sticky_menu .navbar-brand > img {
    max-height: 46px;
}

.sgh-header .menubar ul.nav,
.sgh-header.sticky_menu .menubar ul.nav {
    margin: 10px auto;
}

/* ==========================================================================
   2. Top-level items
   css/style.css sets `.nav > li > a { text-transform:uppercase; font-size:18px }`
   — outranked here by the extra .sgh-header class.
   ========================================================================== */

.sgh-header #main-menu > li {
    margin: 0 1px;
}

.sgh-header #main-menu > li > a {
    position: relative;
    padding: 10px 15px;
    font-family: var(--sgh-font);
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.4;
    text-transform: none;
    color: var(--sgh-ink);
    border-radius: 999px;
    transition: color .3s var(--sgh-ease), background .3s var(--sgh-ease);
}

/* hover / current page: cyan text plus a cyan underline that wipes in.
   Replaces marine.css' translucent pill + gold text. */
.sgh-header #main-menu > li:not(:last-child) > a:hover,
.sgh-header #main-menu > li:not(:last-child) > a:focus,
.sgh-header #main-menu > li:not(:last-child).mrn-nav-active > a {
    background: transparent;
    color: var(--sgh-cyan-ink);
}

.sgh-header #main-menu > li:not(:last-child) > a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--sgh-cyan-deep);
    opacity: 1;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s var(--sgh-ease);
}

.sgh-header #main-menu > li:not(:last-child) > a:hover::after,
.sgh-header #main-menu > li:not(:last-child) > a:focus::after,
.sgh-header #main-menu > li:not(:last-child).mrn-nav-active > a::after {
    left: 15px;
    right: 15px;
    opacity: 1;
    transform: scaleX(1);
}

/* Bootstrap's caret triangle */
.sgh-header #main-menu > li > a .caret {
    margin-left: 7px;
    border-top-width: 5px;
    border-right-width: 4px;
    border-left-width: 4px;
    border-top-color: rgba(7, 26, 46, .45);
    transition: border-top-color .3s var(--sgh-ease), transform .3s var(--sgh-ease);
}

.sgh-header #main-menu > li:hover > a .caret,
.sgh-header #main-menu > li.mrn-nav-active > a .caret {
    border-top-color: var(--sgh-cyan-ink);
}

.sgh-header #main-menu > li.dropdown:hover > a .caret {
    transform: rotate(180deg);
}

/* ==========================================================================
   3. Contact Us pill
   ========================================================================== */

.sgh-header #main-menu > li:last-child {
    margin-left: 14px;
}

.sgh-header #main-menu > li:last-child > a {
    padding: 11px 26px;
    background: linear-gradient(135deg, var(--sgh-cyan-bright) 0%, var(--sgh-cyan-deep) 100%);
    color: #04263f !important;
    font-weight: 600;
    box-shadow: 0 12px 26px -14px rgba(34, 179, 230, .95);
    transition: transform .35s var(--sgh-ease), box-shadow .35s var(--sgh-ease);
}

.sgh-header #main-menu > li:last-child > a:hover,
.sgh-header #main-menu > li:last-child > a:focus {
    background: linear-gradient(135deg, var(--sgh-cyan-deep) 0%, var(--sgh-cyan-bright) 100%);
    color: #04263f !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -14px rgba(34, 179, 230, 1);
}

/* ==========================================================================
   4. Dropdown panels
   ========================================================================== */

/* !important is needed only to answer style.css' own
   `@media (min-width:992px) { .navbar-right .dropdown-menu { border-radius:0 !important } }` */
.sgh-header .menubar .dropdown-menu {
    min-width: 236px;
    margin-top: 8px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(7, 26, 46, .10);
    border-radius: 12px !important;
    box-shadow: 0 26px 50px -26px rgba(7, 26, 46, .45);
}

.sgh-header .menubar .dropdown-menu > li > a {
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--sgh-font);
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: .1px;
    text-transform: none;
    color: #33506b;
    white-space: normal;
    /* style.css draws a heavy black hairline between items — soften it. */
    border-bottom: 1px solid rgba(7, 26, 46, .07);
}

.sgh-header .menubar .dropdown-menu > li:last-child > a {
    border-bottom: none;
}

/* style.css slides these 6px right on hover and paints them gold — hold the
   padding steady and use a cyan wash instead. */
.sgh-header .menubar .dropdown-menu > li > a:hover,
.sgh-header .menubar .dropdown-menu > li > a:focus,
.sgh-header #main-menu .dropdown-menu > li.mrn-nav-active > a {
    padding-left: 14px;
    background-color: rgba(34, 179, 230, .13);
    color: var(--sgh-ink);
}

/* ==========================================================================
   5. Keyboard focus — css/style.css kills `a:focus { outline: 0 }` site-wide
   ========================================================================== */

.sgh-header a:focus-visible {
    outline: 2px solid var(--sgh-cyan-deep);
    outline-offset: 3px;
}

.sgh-header #main-menu > li:last-child > a:focus-visible {
    outline-color: #ffffff;
}

/* ==========================================================================
   6. Mobile (slicknav takes over below 992px)
   ========================================================================== */

@media (max-width: 991px) {

    .sgh-header,
    .sgh-header.sticky_menu {
        padding: 0;
    }

    /* style.css paints this bar white, which fought the dark logo.
       Brand + burger share one flex row; the nav panel is forced onto a second
       row (it is a child of .slicknav_menu, so it would otherwise join them). */
    .sgh-header .slicknav_menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        background-color: transparent;
        padding: 8px 14px;
    }

    /* slicknav.min.css puts a `content:" "` clearfix on :before/:after. Inside
       a flex container those become real flex items and eat two of the
       space-between slots, which pushed the logo into the middle of the bar. */
    .sgh-header .slicknav_menu::before,
    .sgh-header .slicknav_menu::after {
        display: none;
    }

    /* same plate-free treatment as the desktop brand */
    .sgh-header .slicknav_brand {
        display: inline-flex;
        align-items: center;
        max-width: none;
        padding: 0;
        margin: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .sgh-header .slicknav_brand img {
        max-width: none;
        max-height: 58px;
        width: auto;
        transition: max-height .45s var(--sgh-ease);
    }

    .sgh-header.sticky_menu .slicknav_brand img {
        max-height: 42px;
    }

    .sgh-header .slicknav_btn {
        margin: 0;
        padding: 8px 10px;
        background-color: transparent;
    }

    .sgh-header .slicknav_menu .slicknav_icon-bar {
        background-color: var(--sgh-ink);
        box-shadow: none;
    }

    .sgh-header .slicknav_nav {
        flex: 0 0 100%;
        width: 100%;
        margin-top: 6px;
        padding: 6px;
        background: #ffffff;
        border: 1px solid rgba(7, 26, 46, .10);
        border-radius: 12px;
        box-shadow: 0 20px 40px -26px rgba(7, 26, 46, .5);
    }

    .sgh-header .slicknav_nav a {
        font-family: var(--sgh-font);
        font-size: 15px;
        text-transform: none;
        color: #33506b;
        border-radius: 8px;
    }

    .sgh-header .slicknav_nav .slicknav_row:hover,
    .sgh-header .slicknav_nav a:hover {
        background: rgba(34, 179, 230, .13);
        color: var(--sgh-ink);
        border-radius: 8px;
    }

    .sgh-header .slicknav_nav .slicknav_arrow {
        color: var(--sgh-cyan-ink);
    }
}

@media (prefers-reduced-motion: reduce) {

    .sgh-header #main-menu > li > a,
    .sgh-header #main-menu > li > a::after,
    .sgh-header #main-menu > li > a .caret {
        transition: none;
    }
}


/* ==========================================================================
   DROPDOWN HOVER BRIDGE
   ==========================================================================
   The submenu closed before anything in it could be clicked.

   Cause, measured in the browser: the panel carries margin-top:8px, so the
   parent <li> ends at y=71 and the panel starts at y=79. Moving the pointer
   from "About" down to "Group Profile" crosses an 8px strip that belongs to
   NEITHER element, css/style.css:890 `.menubar li.dropdown:hover >
   .dropdown-menu` goes false, and the menu is pulled before the pointer
   arrives.

   Fix: keep the 8px visual offset, but bridge the strip with a transparent
   pseudo-element on the panel itself, so the hover chain is never broken.
   It only exists while the panel is open (a hidden panel hides its own
   ::before), so it can never swallow a click on the page behind it.
   ========================================================================== */

/* The bridge lives on the <li> and only while it is hovered. Measured gap is
   28px (margin-top plus the panel's own offset), so 34px covers it with slack.
   Gating it on :hover matters — a permanent 34px strip under every dropdown
   link would sit over the hero and swallow clicks meant for the page. */
.sgh-header #main-menu > li.dropdown:hover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    /* as wide as the panel, not just the link: a pointer cutting diagonally
       toward the third item would otherwise leave the bridge sideways before
       it ever reached the menu */
    width: 240px;
    height: 34px;
    background: transparent;
}

.sgh-header #main-menu > li.dropdown {
    position: relative;
}

/* Forgiveness for a diagonal exit: leaving is delayed a fraction, arriving is
   instant. Anyone cutting the corner toward the third item keeps the menu. */
.sgh-header .menubar .dropdown-menu {
    transition-delay: .22s;
}

.sgh-header .menubar li.dropdown:hover > .dropdown-menu {
    transition-delay: 0s;
}

/* Keyboard parity: the panel must also stay while focus is inside it, or
   tabbing into the submenu closes it on the first item. */
.sgh-header .menubar li.dropdown:focus-within > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}