/* ==========================================================================
   LUC site header
   --------------------------------------------------------------------------
   One fixed header, identical at the top of the page and when scrolled.
   Written as overrides on top of the purchased template (assets/css/main.css),
   which assumes a logo tucked inside a maroon banner shape — we show the logo
   plainly instead, so several of its rules have to be undone here.
   ========================================================================== */

:root {
    --luc-navy: #0b1f3a;
    --luc-red: #c8102e;
    --luc-line: #e7eaf1;
    --luc-header-h: 112px;      /* desktop: utility bar + main bar */
}

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */

header .rs-header-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 1px 0 var(--luc-line), 0 6px 24px rgba(11, 31, 58, .06);
    transition: box-shadow .25s ease;
}

/* Slightly deeper shadow once the page has scrolled. */
header .rs-header-area.is-stuck {
    box-shadow: 0 1px 0 var(--luc-line), 0 10px 30px rgba(11, 31, 58, .12);
}

/* The template's own hide-until-scroll bar is neutralised: our header is
   always visible, so this inner element must not float or fade. */
#rs-sticky-header.luc-mainnav {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent;
}

/* --------------------------------------------------------------------------
   2. Utility bar (welcome text + secondary links)
   -------------------------------------------------------------------------- */

/* main.css indents this bar by 415px (265px on laptops) to clear the maroon
   logo banner we removed, leaving the welcome text stranded in the middle of
   the row. Its selectors carry two classes, so ours have to match. */
header .rs-header-area .rs-header-top.rs-header-top-one {
    background: var(--luc-navy);
    padding-inline-start: clamp(16px, 4vw, 56px);
    padding-inline-end: clamp(16px, 4vw, 56px);
    padding-top: 7px;
    padding-bottom: 7px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

header .rs-header-area .rs-header-top .header-top-title {
    color: rgba(255, 255, 255, .82);
    font-size: 13.5px;
    letter-spacing: .2px;
}

header .rs-header-area .rs-header-top.rs-header-top-one .header-nav-menu-item a {
    display: block;
    color: rgba(255, 255, 255, .78);
    font-size: 13.5px;
    font-weight: 500;
    transition: color .18s ease;
}

header .rs-header-area .rs-header-top.rs-header-top-one .header-nav-menu-item a:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   3. Main bar
   -------------------------------------------------------------------------- */

header .header-wrapper {
    padding: 0 clamp(16px, 4vw, 56px) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
}

header .header-left {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 46px);
    flex: 1;
    min-width: 0;
}

/* --- Logo -----------------------------------------------------------------
   main.css puts the logo in a 237x205 maroon banner and constrains
   `.header-logo` to 90px wide. Combined with the template's global
   `img { max-width: 100% }` that squeezed a 171x58 logo into 90x56 — badly
   stretched. Width is released and only the height is fixed, so the logo
   always keeps its real proportions. */
header .header-logo-wrapper {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex;
    align-items: center;
}

header .header-logo-wrapper::before,
header .header-logo-wrapper::after {
    content: none !important;
    display: none !important;
}

header .header-logo {
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

header .header-logo a {
    display: block;
    line-height: 0;
}

header .header-logo img {
    height: 52px;
    width: auto !important;
    max-width: none !important;   /* beat `img { max-width: 100% }` */
    display: block;
}

/* --- Menu ---------------------------------------------------------------- */

header .header-menu {
    display: flex;
    align-items: center;
    min-width: 0;
}

header .main-menu > ul {
    display: flex;
    align-items: center;
    gap: clamp(2px, 1.1vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The template pads links by 33px top and bottom, which alone made the bar
   116px tall. Vertical rhythm is handled by the bar itself now. */
header .main-menu > ul > li > a {
    padding: 24px 4px !important;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.1px;
    color: var(--luc-navy);
    white-space: nowrap;
    position: relative;
    transition: color .18s ease;
}

header .main-menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 2px;
    background: var(--luc-red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}

header .main-menu > ul > li > a:hover,
header .main-menu > ul > li > a.active {
    color: var(--luc-red);
}

header .main-menu > ul > li > a:hover::after,
header .main-menu > ul > li > a.active::after {
    transform: scaleX(1);
}

/* --- Right-hand side ----------------------------------------------------- */

header .header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

header .header-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

header .header-icon-wrapper::before {
    content: none !important;   /* template divider we do not use */
}

header .header-inline-search {
    display: flex;
    align-items: center;
    background: #f2f4f8;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 4px 5px 4px 15px;
    transition: border-color .18s ease, background .18s ease;
}

header .header-inline-search:focus-within {
    background: #fff;
    border-color: #d7dce6;
}

header .header-inline-search input {
    border: 0;
    background: transparent;
    outline: none;
    width: 128px;
    font-size: 14px;
    color: var(--luc-navy);
}

header .header-inline-search button {
    border: 0;
    background: var(--luc-red);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: filter .18s ease;
}

header .header-inline-search button:hover {
    filter: brightness(.9);
}

/* main.css hides the Apply Now button between 1200px and 1366px, which is
   exactly the common laptop width — the most important button on the page
   would simply vanish. Keep it visible on every desktop size. */
@media only screen and (min-width: 992px) {
    header .header-btn {
        display: block !important;
    }
}

header .header-btn .rs-btn {
    padding: 12px 22px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */

/* Tablet / small laptop: drop the search box before the menu gets cramped. */
@media only screen and (max-width: 1199px) {
    header .header-inline-search {
        display: none !important;
    }
    header .header-logo img {
        height: 46px;
    }
}

@media only screen and (max-width: 991px) {
    header .rs-header-area .rs-header-top.rs-header-top-one {
        min-height: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-inline-start: clamp(12px, 4vw, 24px);
        padding-inline-end: clamp(12px, 4vw, 24px);
        justify-content: center;
    }
    header .rs-header-area .rs-header-top .header-top-left {
        display: none;   /* the welcome line would eat the whole row on phones */
    }
    header .rs-header-area .rs-header-top.rs-header-top-one .header-nav-menu-item a {
        font-size: 12.5px;
    }
    header .header-wrapper {
        min-height: 64px;
    }
    header .header-logo img {
        height: 42px;
    }
}

/* Phones: the utility links wrapped onto two rows and pushed the header to
   112px. They live in the off-canvas menu on small screens instead. */
@media only screen and (max-width: 767px) {
    header .rs-header-area .rs-header-top.rs-header-top-one {
        display: none;
    }
    /* Keep the burger in the far corner, where it is expected — the markup
       puts it before the Apply button. */
    header .header-btn { order: 1; }
    header .header-icon-wrapper { order: 2; }
}

@media only screen and (max-width: 575px) {
    header .header-logo img {
        height: 38px;
    }
    /* Apply Now is the primary call to action, so it stays on phones — just
       tighter. main.css hides it below 575px. */
    header .header-btn {
        display: block !important;
    }
    header .header-btn .rs-btn {
        padding: 9px 15px;
        font-size: 13.5px;
    }
    header .header-btn .rs-btn .icon-box {
        display: none;
    }
    header .header-right {
        gap: 10px;
    }
}

/* Below this the logo and burger alone fill the row; the off-canvas menu
   still carries an Apply Now link. */
@media only screen and (max-width: 359px) {
    header .header-btn {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   5. Mobile off-canvas menu
   Must sit above the fixed header, or the header covers the top of the menu
   and hides both the "Home" link and the close button.
   -------------------------------------------------------------------------- */

.offcanvas-area { z-index: 1100 !important; }
.offcanvas-overlay { z-index: 1099 !important; }
.offcanvas-content { padding-top: 10px; }
.offcanvas-area .mobile-menu { margin-top: 8px; }

/* Secondary links carried over from the hidden utility bar. */
.luc-offcanvas-secondary .luc-offcanvas-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--luc-red);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
}

.luc-offcanvas-secondary .luc-offcanvas-cta:hover {
    background: var(--luc-navy);
    color: #fff;
}

.luc-offcanvas-secondary ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 14px;
}

.luc-offcanvas-secondary ul a {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 500;
    color: #55617a;
}

.luc-offcanvas-secondary ul a:hover {
    color: var(--luc-red);
}

.luc-offcanvas-secondary .luc-offcanvas-search {
    display: flex;
    align-items: center;
    background: #f2f4f8;
    border-radius: 10px;
    padding: 4px 5px 4px 14px;
}

.luc-offcanvas-secondary .luc-offcanvas-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14px;
    padding: 8px 0;
    color: var(--luc-navy);
}

.luc-offcanvas-secondary .luc-offcanvas-search button {
    border: 0;
    background: var(--luc-red);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
}

/* On desktop the off-canvas panel is unused, and these links already sit in
   the utility bar. */
@media only screen and (min-width: 768px) {
    .luc-offcanvas-secondary {
        display: none;
    }
}