/* =============================================================
   nav.css — CalCoastal Navigation Styles
   Extracted from style.css for maintainability.
   Covers: header shell, desktop nav, mobile nav/hamburger,
           transparent-header overrides, centered-logo layout,
           and all CalCoastal custom nav overrides.
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. Header Container & #header shell
   ───────────────────────────────────────────────────────────── */

#header-container {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
}

#header {
	position: relative;
	z-index: 999;
	padding: 18px 0 8px 0;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
	font-size: 16px;
	background: #fff;
}

/* Full Width Header */
header.fullwidth .container {
	width: 100%;
	margin: 0;
	padding: 0 40px;
}

/* Legacy float layout (kept for non-homepage pages) */
.left-side {
	float: left;
	width: 65%;
	display: inline-block;
}

.right-side {
	float: right;
	width: 35%;
	display: inline-block;
}

@media (min-width: 1025px) and (max-width: 1239px) {
	.right-side {
		width: auto;
		display: inline-block;
		margin-top: -126px;
		position: relative;
	}
	.left-side {
		width: 100%;
		display: inline-block;
	}
}

#logo,
.nav-col-left { float: left; }

#logo { margin-right: 50px; }

.header-widget { text-align: right; }


/* ─────────────────────────────────────────────────────────────
   2. Sticky header
   ───────────────────────────────────────────────────────────── */

#header.cloned {
	display: none !important;
}

.sticky-logo { display: none; }

#header.sticky .st0 {
	fill: #000000;
}

/* Dark logo on non-transparent pages */
body:not(.transparent-header) #header .st0 {
	fill: #333333;
}


/* ─────────────────────────────────────────────────────────────
   3. Header Widget (CTA buttons)
   ───────────────────────────────────────────────────────────── */

.header-widget {
	position: relative;
	top: -1px;
	height: 54px;
}

.header-widget .button,
.header-widget .button.border {
	margin-right: 0;
	min-width: auto;
	text-align: center;
	position: relative;
	line-height: 26px;
	font-weight: 500;
	padding: 10px 20px;
	border-radius: 4px;
	transition: all 0.2s;
}

.header-widget .button.border i {
	font-size: 14px;
	padding: 0px 0 0 6px;
	top: 1px;
	display: inline-block;
	position: relative;
}

.header-widget .sign-in {
	position: relative;
	color: #333;
	margin-right: 25px;
	top: 10px;
	display: inline-block;
	vertical-align: top;
}

.header-widget .sign-in i { padding-right: 4px; font-size: 15px; }
.header-widget .sign-in:hover { color: #66676b; }

/* Mobile call button — hidden on desktop */
.desktop_hide { display: none; }

.header-widget .button.border.desktop_hide {
	display: none;
	background: transparent;
	border: 1px solid #ddd;
	color: #333;
	margin-left: 10px;
}

.header-widget .button.border.desktop_hide i {
	margin: 0;
	padding: 0;
}


/* ─────────────────────────────────────────────────────────────
   4. Desktop navigation (.nav-col-left)
   ───────────────────────────────────────────────────────────── */

.nav-col-left {
	position: relative;
	display: block;
}

.nav-col-left ul {
	list-style: none;
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}

.nav-col-left ul a {
	display: block;
	text-decoration: none;
}

.nav-col-left ul li {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}

.nav-col-left ul li ul {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	padding: 0;
	z-index: 99999;
}

.nav-col-left ul ul li { float: none; }

.nav-col-left ul ul ul {
	top: 0;
	left: 100%;
	margin: 0;
}

.nav-col-left ul ul {
	margin: 10px 0 0 15px;
}

.nav-col-left ul ul:before {
	content: "";
	position: absolute;
	left: 0;
	top: -10px;
	background: rgba(255,255,255,0);
	width: 100%;
	height: 10px;
}

.nav-col-left ul ul ul:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 100%;
	left: -10px;
	top: 0;
	opacity: 0;
}

.nav-col-left ul li:hover > ul {
	opacity: 1;
	visibility: visible;
}

/* Indicator arrows — shared between left and right nav */
.nav-col-left ul li a:after,
.nav-right ul li a:after,
.nav-col-left ul ul li a:after,
.nav-right ul ul li a:after {
	font-family: "FontAwesome";
	opacity: 0.5;
}

.nav-col-left ul li a:after,
.nav-right ul li a:after { content: '\f107'; padding-left: 7px; }

.nav-col-left ul ul li a:after,
.nav-right ul ul li a:after {
	content: '\f105';
	position: absolute;
	right: 15px;
	top: 7px;
}

.nav-col-left ul li a:only-child:after,
.nav-right ul li a:only-child:after { content: ''; padding: 0; }
.nav-col-left ul ul li a:only-child:after,
.nav-right ul ul li a:only-child:after { content: ''; }


/* Dropdown */
.nav-col-left ul ul {
	background-color: #fff;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
	border-radius: 4px;
	font-size: 15px;
}

.nav-col-left ul ul li { border-radius: 4px; }
.nav-col-left ul ul li:last-child { border-bottom: none; }

.nav-col-left ul li:hover ul a,
.nav-col-left ul ul a {
	line-height: 27px !important;
	padding: 4px 40px 4px 15px !important;
	line-height: 24px !important;
}

body .nav-col-left ul ul {
	padding: 12px 10px;
	box-sizing: border-box;
}

.nav-col-left ul ul li { width: 180px; }

.nav-col-left ul ul li:hover {
	border-radius: 0;
}

.nav-col-left ul ul li:first-child { border-radius: 4px 4px 0 0; }
.nav-col-left ul ul li:last-child { border-radius: 0 0 4px 4px; }

.nav-col-left ul ul {
	opacity: 0;
	visibility: hidden;
	transition: all 0.25s;
	transform: translate3d(0,15px,0);
}

.nav-col-left ul li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0,0,0);
}

/* Indicator arrow transitions */
.nav-col-left ul ul li a:after {
	opacity: 0.5;
	transition: all 0.25s;
	transform: translateX(-5px);
}

.nav-col-left ul ul li:hover a:after {
	opacity: 1;
	transform: translateX(0);
}

/* style-1 variant */
.nav-col-left.style-1 .current {
	background-color: transparent;
	color: #66676b;
}

.nav-col-left.style-1 { margin-top: 1px; }

.nav-col-left.style-1 .current:after { opacity: 1; }

.nav-col-left.style-1 ul li {
	transition: all 0.25s;
}

body .user-menu ul li a:hover { color: #66676b; }

.nav-col-left.style-1 ul li { margin: 0 3px; }
.nav-col-left.style-1 ul ul li { margin: 0; border-radius: 0; }
.nav-col-left ul ul { margin: 10px 0 0 0; }

body .nav-col-left ul .mega-menu:not(.mm-panel) ul a,
body .nav-col-left.style-1 ul ul li { opacity: 1; }

body .nav-col-left.style-1 ul ul li a:after,
body .nav-col-left.style-1 ul li:hover ul li a,
body .nav-col-left.style-1 ul li:hover ul li:hover li a,
body .nav-col-left.style-1 ul li:hover ul li:hover li:hover li a,
body .nav-col-left.style-1 ul ul li:hover ul li a { color: #666; }

body .nav-col-left.style-1 ul ul li:hover a:after,
body .nav-col-left.style-1 ul li:hover ul li:hover a,
body .nav-col-left.style-1 ul li:hover ul li:hover li:hover a,
body .nav-col-left.style-1 ul li:hover ul li:hover li:hover li:hover a,
body .nav-col-left.style-1 ul ul li:hover ul li a:hover { color: #66676b; }


/* ─────────────────────────────────────────────────────────────
   5. Hamburger / mmenu trigger
   ───────────────────────────────────────────────────────────── */

.mmenu-trigger {
    height: 50px;
    width: 50px;
    display: none;
    position: relative;
    margin: 0 0 20px 0;
    background-color: #eee;
    border-radius: 4px;
    cursor: pointer;
}

.hamburger {
    padding: 0;
    top: 12px;
    left: 13px;
    transform: scale(0.67);
    -moz-transform: scale(0.70) translateY(4px);
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

.hamburger-box {
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 34px;
    height: 4px;
    background-color: #555;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }

.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mmenu-trigger { display: none; }


/* ─────────────────────────────────────────────────────────────
   6. Mobile nav dropdown
   ───────────────────────────────────────────────────────────── */

.mobile-nav-dropdown {
    display: none;
    position: fixed;
    top: 56px !important;    /* beats any inline style set by JS; sits directly below the 56px mobile header */
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    z-index: 998;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.mobile-nav-dropdown.active {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    transition: max-height 0.4s ease-in;
}

.mobile-nav-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-dropdown > ul > li {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-nav-dropdown > ul > li:last-child {
    border-bottom: none;
}

.mobile-nav-dropdown > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 25px;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease;
}

.mobile-nav-dropdown .has-submenu > a {
    justify-content: space-between;
}

.mobile-nav-dropdown > ul > li > a i {
    margin-right: 10px;
}

.mobile-nav-dropdown > ul > li > a:hover {
    background: rgba(255,255,255,0.05);
}

.mobile-nav-dropdown .has-submenu > a::after {
    content: '\f107';
    font-family: 'FontAwesome';
    font-size: 14px;
    transition: transform 0.25s ease;
    opacity: 0.6;
}

.mobile-nav-dropdown .has-submenu.open > a::after {
    transform: rotate(180deg);
}

.mobile-nav-dropdown .submenu {
    max-height: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    padding: 0;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.mobile-nav-dropdown .has-submenu.open .submenu {
    max-height: 300px;
    padding: 5px 0;
    transition: max-height 0.35s ease-in, padding 0.35s ease-in;
}

.mobile-nav-dropdown .submenu li {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-nav-dropdown .submenu li:last-child {
    border-bottom: none;
}

.mobile-nav-dropdown .submenu li a {
    display: block;
    padding: 14px 25px 14px 40px;
    color: rgba(255,255,255,0.8);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    text-transform: capitalize;
    transition: all 0.2s ease;
}

.mobile-nav-dropdown .submenu li a:hover,
.mobile-nav-dropdown .submenu li a:active {
    color: #FFC21F;
    background: rgba(255,255,255,0.05);
}

.mobile-nav-cta {
    padding: 20px 25px 25px;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.mobile-nav-cta .button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFC21F;
    color: #1a1a2e;
    padding: 16px 25px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 194, 31, 0.3);
}

.mobile-nav-cta .button:active {
    transform: scale(0.98);
}

.mobile-nav-cta .button i {
    margin-right: 10px;
    font-size: 16px;
}

/* Transparent header mobile nav */
.transparent-header .mobile-nav-dropdown {
    background: linear-gradient(135deg, rgba(26,26,46,0.98) 0%, rgba(22,33,62,0.98) 100%);
}

body.mobile-nav-open {
    overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────
   7a. Condensed desktop nav — 1025px to 1279px
   ───────────────────────────────────────────────────────────── */

@media (min-width: 1025px) and (max-width: 1279px) {

    /* Smaller logo column — less space taken from each flex:1 side */
    #logo-col {
        flex: 0 0 160px !important;
    }

    /* Smaller nav font */
    .nav-col-left.style-1 ul > li > a,
    .nav-right.style-1 ul > li > a {
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
    }

    /* Hide phone number text, keep icon */
    .cta-phone.mobile_hide {
        font-size: 0 !important;
        letter-spacing: 0 !important;
    }
    .cta-phone.mobile_hide i {
        font-size: 15px !important;
    }

    /* Tighter CTA gap and smaller button */
    .header-cta-inline {
        gap: 8px !important;
    }
    a.cta-list-btn {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   7. Responsive — header at ≤1024px
   ───────────────────────────────────────────────────────────── */

@media only screen and (max-width: 1024px) {

    .mmenu-trigger { display: inline-block !important; }
    .mobile-nav-dropdown { display: block; }

    #logo img {
        width: 200px;
        max-height: 45px;
    }

    .header-widget {
        padding: 20px 0;
        border-top: 1px solid #eee;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .header-widget a.button.border {
        padding: 7px 16px;
        background-color: transparent;
        font-size: 16px;
        min-width: auto;
        float: right;
    }

    .sign-in,
    .user-menu { flex: 1; }

    .header-widget .sign-in { top: 9px; }

    #header-container.header-style-2 .left-side,
    #header-container.header-style-2 .right-side,
    .right-side,
    .left-side { width: 100%; }

    #top-bar .right-side .social-icons { float: left; position: relative; z-index: 9; }

    #header-container.header-style-2 .header-widget { float: left; margin-top: 35px; margin-bottom: -5px; }

    .header-widget { text-align: left; }
    #header { padding-bottom: 0; }

    ul.top-bar-menu { z-index: 99; position: relative; }

    #header-container.header-style-2 .header-widget { width: calc(100%); border-top: 1px solid #e0e0e0; padding-top: 30px; }

    /* Reset for menu */
    .nav-col-left.style-1 { margin: 0; padding-top: 0; }
    .nav-col-left.style-1:before { display: none; }
    .header-widget { height: auto; }

    .mmenu-trigger { float: right; }
    body #dashboard #logo,
    body #logo {
        position: relative;
        margin: 0 !important;
        margin-top: 5px !important;
        width: auto;
        text-align: left;
    }
}

@media (max-width: 1024px) {
    .transparent-header .header-widget {
        padding: 15px 0;
        border-top: 1px solid rgba(255,255,255,0.15);
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
        gap: 10px;
    }

    .transparent-header .mmenu-trigger { background-color: rgba(255,255,255,0.15); }
    .transparent-header .hamburger-inner,
    .transparent-header .hamburger-inner::before,
    .transparent-header .hamburger-inner::after { background: #fff; }

    .transparent-header #header:not(.cloned) { border: none; }
}


/* ─────────────────────────────────────────────────────────────
   8. Transparent header — nav overrides
   ───────────────────────────────────────────────────────────── */

.transparent-header .highlighted-categories-headline,
.transparent-header .main-search-container h2 { color: #fff; }

.transparent-header #header:not(.cloned) .nav-col-left.style-1 > ul > li > a { color: #fff; }
.transparent-header #header:not(.cloned) .nav-col-left.style-1 > ul > li > a.current,
.transparent-header #header:not(.cloned) .nav-col-left.style-1 > ul > li:hover > a {
    text-shadow: 0px 0px 3px #fff, 0px 0px 3px #CCC;
}


@media (max-width: 1240px) {
    .transparent-header .nav-col-left.style-1:before {
        background: rgba(255,255,255,0.15);
    }
    .transparent-header #header:not(.cloned) { border: none; }
}


/* ─────────────────────────────────────────────────────────────
   9. CalCoastal — centered-logo nav layout
   ───────────────────────────────────────────────────────────── */

/* Single-row header — grid ensures nav is mathematically centered */
#header {
    padding: 0 !important;
}

/*
  Three-column flex row: [left flex:1] [logo flex:0 0 220px] [right flex:1]
  Because left and right both get flex:1, they always share the remaining
  space equally — the logo is mathematically centered with no padding hacks.
*/
#header .container {
    display: flex !important;
    align-items: center;
    position: relative;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 72px;
}

#header .left-side,
#header .right-side {
    display: none !important;
}

.cta-phone {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cta-phone:hover { color: #1a1a2e; }

.cta-divider {
    width: 1px;
    height: 14px;
    background: #ddd;
    display: inline-block;
}

.cta-list-btn {
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #FFC21F;
    text-decoration: none;
    border: 1px solid #FFC21F;
    padding: 5px 14px;
    border-radius: 2px;
    transition: all 0.22s ease;
}

.cta-list-btn:hover {
    background: #FFC21F;
    color: #1a1a2e;
}

.cta-list-btn i {
    font-size: 10px;
    margin-left: 4px;
}

/* Transparent header — inline CTAs over hero */
.transparent-header .cta-phone {
    color: rgba(255,255,255,0.75);
}

.transparent-header .cta-phone:hover { color: #fff; }

.transparent-header .cta-divider {
    background: rgba(255,255,255,0.25);
}

.transparent-header .cta-list-btn {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.35);
}

.transparent-header .cta-list-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}

/* Left column — mirrors .nav-col-right as a flex:1 wrapper */
.nav-col-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 24px;
}

.nav-col-left.style-1 {
    float: none !important;
    margin: 0 !important;
}

.nav-col-left.style-1 > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Logo — fixed-width center column; stays in flex flow so centering is automatic */
#logo-col {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

#logo-col #logo {
    float: none;
    margin: 0;
    position: static;
    width: auto;
    text-align: center;
}

#logo-col .mmenu-trigger {
    display: none;
}

/* Right nav — flex:1 mirrors the left column; space-between pushes CTAs to far right */
.nav-col-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 24px;    /* breathing room from logo edge */
}

/* CTAs — normal flex child at the end of the right column, no absolute positioning */
.header-cta-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Right nav — mirrors .nav-col-left.style-1 */
.nav-right.style-1 {
    display: flex;
    align-items: center;
    position: relative;
}

.nav-right.style-1 > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-right.style-1 ul li {
    position: relative;
    margin: 0 3px;
}

/* Unified top-level link style — both nav sides identical */
.nav-col-left.style-1 > ul > li > a,
.nav-right.style-1 ul > li > a {
    display: flex !important;
    align-items: center;
    color: #444;
    cursor: pointer;
    padding: 0 12px !important;
    height: 64px !important;
    line-height: normal !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    transition: color 0.2s ease, background 0.2s ease, text-shadow 0.2s ease !important;
}

.nav-col-left.style-1 > ul > li:hover > a,
.nav-right.style-1 ul li:hover > a {
    text-shadow: 0px 0px 3px #fff, 0px 0px 3px #CCC;
}

/* Right nav dropdown — positioning only; visual styles in section 14 */
.nav-right.style-1 ul ul {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    list-style: none;
    margin: 0;
    z-index: 9999;
    display: none;
}

.nav-right.style-1 ul li:hover > ul {
    display: block;
}


/* ─────────────────────────────────────────────────────────────
   10. CalCoastal — transparent & scrolled nav states
   ───────────────────────────────────────────────────────────── */

/* Restore hero height when transparent-header is active */
.transparent-header .main-search-container {
    height: 680px !important;
}

@media (max-width: 768px) {
    .transparent-header .main-search-container {
        height: 480px !important;
    }
}

/* Transparent nav — hero bleeds to top */
.transparent-header #header-container {
    position: fixed;
    width: 100%;
    top: 0;
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease;
    z-index: 999;
}

.transparent-header #header-container #header {
    background: transparent;
    box-shadow: none;
    transition: background 0.4s ease;
}

/* Logo white on transparent */
.transparent-header #header-container .st0 {
    fill: #fff !important;
}

/* Scrolled state — dark navy (target both container and inner #header) */
#header-container.nav-scrolled,
#header-container.nav-scrolled #header {
    background: #1a1a2e !important;
    box-shadow: none !important;
}

#header-container.nav-scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.22) !important;
}

/* Dropdowns always opaque */
.transparent-header #header .nav-col-left ul ul {
    background: #fff;
}

.transparent-header #header .nav-col-left ul ul li a {
    color: #444 !important;
}

/* Transparent header — right nav links white */
.transparent-header #header:not(.cloned) .nav-right.style-1 > ul > li > a {
    color: #fff;
}

.transparent-header #header:not(.cloned) .nav-right.style-1 > ul > li:hover > a {
    text-shadow: 0px 0px 3px #fff, 0px 0px 3px #CCC;
}

/* Scrolled nav — light text on dark */
#header-container.nav-scrolled .nav-right.style-1 ul > li > a,
#header-container.nav-scrolled .nav-col-left.style-1 ul > li > a {
    color: rgba(255,255,255,0.88);
}

#header-container.nav-scrolled .nav-right.style-1 ul li:hover > a,
#header-container.nav-scrolled .nav-col-left.style-1 ul li:hover > a {
    text-shadow: 0px 0px 3px #fff, 0px 0px 3px #CCC;
}


/* ─────────────────────────────────────────────────────────────
   11. CalCoastal — nav typography (Raleway)
   ───────────────────────────────────────────────────────────── */

.nav-col-left.style-1 ul li a,
.nav-col-left ul li a,
.nav-right.style-1 ul > li > a {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

#mobile-nav ul li a,
#mobile-nav ul li li a {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300;
}


/* ─────────────────────────────────────────────────────────────
   12. Scrolled nav — CTA bar adapts to dark background
   ───────────────────────────────────────────────────────────── */

#header-container.nav-scrolled .cta-phone {
    color: rgba(255,255,255,0.7);
}

#header-container.nav-scrolled .cta-phone:hover {
    color: #fff;
}

#header-container.nav-scrolled .cta-divider {
    background: rgba(255,255,255,0.2);
}

#header-container.nav-scrolled .cta-list-btn {
    color: rgba(255,255,255,0.8);
    border-color: rgba(255,255,255,0.3);
}

#header-container.nav-scrolled .cta-list-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}


/* ─────────────────────────────────────────────────────────────
   13. Responsive — centered nav at ≤1024px
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* Switch to flex on mobile — logo-col is the only visible child */
    #header .container {
        display: flex !important;
        height: 56px;
        position: relative;
        align-items: center;
    }

    .nav-col-left,
    .nav-col-right {
        display: none !important;
    }

    /* Logo-col fills the row; hamburger on left, logo centered absolutely */
    #logo-col {
        flex: 1 !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        padding: 0;
    }

    #logo-col .mmenu-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin: 0;                    /* reset the 20px bottom margin */
        background: transparent;      /* no gray box on transparent header */
    }

    /* Hamburger lines white on transparent/dark header */
    .transparent-header #logo-col .hamburger-inner,
    .transparent-header #logo-col .hamburger-inner::before,
    .transparent-header #logo-col .hamburger-inner::after {
        background-color: #fff;
    }

    /* Logo centered within the full-width logo-col */
    #logo-col #logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 160px;
        pointer-events: auto;
    }
}


/* ─────────────────────────────────────────────────────────────
   14. Unified dropdown appearance — both nav sides
   Overrides the separate left/right dropdown rules above so
   both menus share identical width, spacing, dividers, and type.
   ───────────────────────────────────────────────────────────── */

/* Shared dropdown shell */
.nav-col-left ul ul,
.nav-right.style-1 ul ul {
    background: #fff !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06) !important;
    border-radius: 6px !important;
    padding: 4px 0 !important;
    min-width: 220px !important;
}

/* Each item: fixed width + divider */
.nav-col-left ul ul li,
.nav-right.style-1 ul ul li {
    width: 220px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.nav-col-left ul ul li:first-child,
.nav-right.style-1 ul ul li:first-child {
    border-radius: 4px 4px 0 0 !important;
}

.nav-col-left ul ul li:last-child,
.nav-right.style-1 ul ul li:last-child {
    border-bottom: none !important;
    border-radius: 0 0 4px 4px !important;
}

/* Shared link typography — refined, editorial */
.nav-col-left.style-1 ul ul li a,
.nav-col-left ul ul li a,
.nav-right.style-1 ul ul li a {
    font-family: 'Lato', sans-serif !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: none !important;
    color: #666 !important;
    padding: 9px 20px !important;
    line-height: 1.5 !important;
    height: auto !important;
    white-space: nowrap;
    background: transparent !important;
    display: block;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}

/* Remove the FontAwesome chevron arrows from left nav dropdown items */
.nav-col-left ul ul li a:after {
    content: '' !important;
    padding: 0 !important;
    position: static !important;
}

/* Shared hover — deepen color, subtle indent */
.nav-col-left.style-1 ul ul li:hover > a,
.nav-col-left ul ul li:hover > a,
.nav-right.style-1 ul ul li:hover > a {
    color: #1a1a2e !important;
    background: #fafafa !important;
    padding-left: 26px !important;
}