/* ==========================================================================
   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;
}

/* The blur that used to live here has been removed.

   .sgh-header.sticky_menu is position:fixed and full-width, so a
   backdrop-filter makes the compositor re-sample and re-blur everything
   passing underneath the bar on every scrolled frame — the most expensive
   thing on the page, running on all thirteen pages, for the entire length of
   every scroll. It was also switched on at exactly the wrong moment: the
   unscrolled state above sets `backdrop-filter: none`, so the cost appeared
   the instant scrolling began.

   And it bought almost nothing. The gradient below it is 97% opaque, so at
   most 3% of the backdrop was ever visible through it — a blur nobody can
   see, priced at a full-width repaint per frame. The 3% is now folded into
   the gradient instead. */
.sgh-header.sticky_menu {
    background: linear-gradient(150deg, rgba(255, 255, 255, .985) 0%, rgba(233, 241, 248, .985) 100%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    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;
    }

    /* The burger was a 48x20 hit box drawing a 20px-tall glyph that started
       8px BELOW the box: slicknav.min.css floats .slicknav_icon and hard-codes
       it to height:4px, so the three bars overflow and contribute no height to
       the button. Measured at 390px: button y=27..47, bars painted y=35..55.
       The bottom bar sat outside its own target, and 20px is under the 24px
       WCAG 2.5.8 minimum for the site's primary navigation control.

       Fix: un-float the icon and let it be a real flex column, then centre it
       in a 44x44 button. The glyph is unchanged -- still three 28x4 bars with
       4px gaps -- only the box around it is now the size it draws. */
    .sgh-header .slicknav_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 8px 10px;
        background-color: transparent;
    }

    .sgh-header .slicknav_menu .slicknav_icon {
        float: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 28px;
        height: auto;
        margin: 0;
    }

    .sgh-header .slicknav_menu .slicknav_icon-bar {
        background-color: var(--sgh-ink);
        box-shadow: none;
        margin: 0;             /* gap owns the spacing now */
    }

    .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);

        /* style.css:4776 caps the panel at a flat 350px. That fitted while
           rows were 31px tall; at 43px the seven items total 458px and the
           last one drops into an internal scroll on a phone with 400px of
           unused screen below it. Cap it against the viewport instead.
           dvh follows the browser chrome as it collapses; the vh line above
           is the fallback for engines that do not know dvh. overflow:auto is
           inherited from style.css, so a short landscape phone still scrolls
           instead of running the panel off-screen. */
        max-height: calc(100vh - 96px);
        max-height: calc(100dvh - 96px);
        overscroll-behavior: contain;
    }

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

    /* slicknav ships padding:5px 10px, which at 15px/1.4 makes every menu row
       31px tall -- fine for a mouse, tight for a thumb. 11px top and bottom
       takes the row to 43px without touching display, so the chevron still
       sits inline after the label exactly as before. */
    .sgh-header .slicknav_nav a,
    .sgh-header .slicknav_nav .slicknav_row {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    /* A parent row holds its own <a> (go to the section) inside the row that
       toggles the submenu. Zero it out so the two do not stack into a 65px
       row, then give it inline padding -- on an inline box that grows the hit
       area without adding to the line box, so the layout is untouched. */
    .sgh-header .slicknav_nav .slicknav_item a,
    .sgh-header .slicknav_nav .slicknav_parent-link a {
        padding-top: 0;
        padding-bottom: 0;
    }

    .sgh-header .slicknav_nav .slicknav_parent-link a {
        padding-block: 11px;
    }

    .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;
}


/* ==========================================================================
   ANIMATE.CSS, THE 0.6 KB OF IT THIS SITE ACTUALLY USES
   ==========================================================================
   css/animate.min.css was 73 KB — around 613 rules and 78 keyframe sets —
   loaded as a render-blocking stylesheet on all thirteen pages.

   Exactly two of its classes are ever applied anywhere on this site, both by
   js/main.js on the sticky header, and both on the same line:

       navbarEl.classList.add("sticky_menu", "animated", "fadeInDown");

   No page applies an animate.css class in its markup. Nothing else in js/
   references one. (js/scroll-fx.js buildHeader() then *removes* both again on
   the inner pages, the first time the bar has to hide, because the fill-mode
   below would otherwise pin the transform.)

   So the two rules and the one keyframe set are reproduced here verbatim, and
   the file is no longer requested. Copied exactly, prefixes included, so the
   header entrance is frame-for-frame what it was.

   If a second animate.css effect is ever wanted, copy that one in too rather
   than restoring the file.
   ========================================================================== */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}