/**
 * Site Header Block - Styles
 *
 * Matches Elementor "Header (Prod)" template (post ID 20957).
 * Four sections: pre-header bar, main header, mobile header, hero banner.
 *
 * Colors (from Elementor kit):
 *   VD Blue:    #016D89   (main header bg)
 *   VD Accent:  #3D91A7   (pre-header bg, mobile bg, search btn, nav focus/active)
 *   VD Orange:  #CD6C33   (hover underline, CTA button)
 *   CTA Orange: #CE7234   (CTA button bg — Elementor uses this variant)
 *   VD White:   #FFFFFF   (text, logo)
 *
 * Column widths at >=768px (from Elementor CSS):
 *   Logo: 20%  |  Nav: 53%  |  Actions: 27%
 */

/* ───── Reset & container ───── */

/*
 * Override Elementor kit global: .elementor-kit-9 a { color: #CD6C33 }
 * Override Hello Elementor theme: .page-content a { text-decoration: underline }
 * Both require higher specificity (0,2,1) minimum.
 */

.site-header-block {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Myriad Pro Regular", "Myriad Pro", sans-serif;
}

.site-header-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Force override theme globals on all links within the block.
 * !important needed because Hello Elementor theme.css loads after block styles
 * and its .page-content a { text-decoration: underline } wins by load order
 * even though our specificity is higher.
 */
.page-content .site-header-block a,
.site-header-block a {
    text-decoration: none !important;
    color: inherit;
}

.page-content .site-header-block a:hover,
.site-header-block a:hover {
    text-decoration: none !important;
}

/*
 * Remove whitespace from parent wrappers.
 * Hello Elementor theme.css sets:
 *   body { padding: 30px 0 }
 *   main { padding-inline: 10px; margin: auto; width: 100% }
 */
body:has(.site-header-block) {
    padding-top: 0;
}

.site-main:has(.site-header-block) {
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
}

.page-content:has(.site-header-block) {
    margin: 0;
    padding: 0;
    max-width: none;
}

/* ═══════════════════════════════════════════
   1. PRE-HEADER BAR (desktop only)
   ═══════════════════════════════════════════ */

.site-header-block .site-header-block__preheader {
    background: #3D91A7;
    display: block;
}

.site-header-block .site-header-block__preheader-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.site-header-block .site-header-block__preheader-nav {
    display: flex;
    align-items: center;
    padding: 10px;
}

.site-header-block .site-header-block__preheader-nav ul.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.site-header-block .site-header-block__preheader-nav li {
    display: flex;
}

/* Pill-shaped links (bg #016D89, border-radius 8px) */
.site-header-block .site-header-block__preheader-nav a {
    display: block;
    padding: 2px 8px;
    color: #FFFFFF;
    font-family: "Myriad Pro Regular", "Myriad Pro", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background: #016D89;
    border-radius: 8px;
    border: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-header-block .site-header-block__preheader-nav a:hover,
.site-header-block .site-header-block__preheader-nav a:focus {
    background: #FFFFFF;
    color: #016D89;
    text-decoration: none;
}

.site-header-block .site-header-block__preheader-nav .current-menu-item a {
    background: #FFFFFF;
    color: #016D89;
}

/* ═══════════════════════════════════════════
   2. MAIN HEADER (desktop only)
   ═══════════════════════════════════════════ */

.site-header-block .site-header-block__main {
    background: #016D89;
    display: block;
}

.site-header-block .site-header-block__main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}

/* Logo — 20% width (Elementor column padding explicitly 0) */
.site-header-block .site-header-block__logo {
    flex: 0 0 20%;
    display: flex;
    align-items: center;
    padding: 0;
}

.site-header-block .site-header-block__logo a {
    display: block;
}

.site-header-block .site-header-block__logo img {
    width: 190px;
    max-width: 190px;
    height: auto;
    display: block;
}

/* Nav wrapper — 53% width */
.site-header-block .site-header-block__nav-wrapper {
    flex: 0 0 53%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.site-header-block .site-header-block__nav-wrapper.search-active {
    opacity: 0;
    visibility: hidden;
}

.site-header-block .site-header-block__nav {
    display: flex;
    align-items: center;
}

.site-header-block .site-header-block__nav ul.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.site-header-block .site-header-block__nav li {
    display: flex;
    position: relative;
}

/* Main nav links — Open Sans, 15px, no padding, no border */
.site-header-block .site-header-block__nav > ul.menu > li > a {
    display: block;
    padding: 0;
    margin: 0 10px;
    color: #FFFFFF;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
    border: none;
    border-radius: 0;
    transition: color 0.2s ease;
}

.site-header-block .site-header-block__nav > ul.menu > li > a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.site-header-block .site-header-block__nav > ul.menu > li > a:focus {
    background: #3D91A7;
    outline: none;
}

/* Orange underline on hover (Elementor e--pointer-underline e--animation-fade) */
.site-header-block .site-header-block__nav > ul.menu > li > a::after {
    content: '';
    display: block;
    height: 3px;
    background: #CD6C33;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    margin-top: 2px;
}

.site-header-block .site-header-block__nav > ul.menu > li:hover > a::after,
.site-header-block .site-header-block__nav > ul.menu > li.current-menu-item > a::after {
    transform: scaleX(1);
}

/* Submenu dropdown indicator */
.site-header-block .site-header-block__nav li.menu-item-has-children {
    padding-inline-end: 0;
}

.site-header-block .site-header-block__nav > ul.menu > li.menu-item-has-children > a::before {
    display: none;
}

/* Submenus — dropdown */
.site-header-block .site-header-block__nav ul.menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #FFFFFF;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.site-header-block .site-header-block__nav ul.menu li:hover > ul,
.site-header-block .site-header-block__nav ul.menu li:focus-within > ul {
    display: block;
}

.site-header-block .site-header-block__nav ul.menu ul li {
    display: block;
    border-bottom: 1px solid #eee;
}

.site-header-block .site-header-block__nav ul.menu ul li:last-child {
    border-bottom: none;
}

.site-header-block .site-header-block__nav ul.menu ul a {
    display: block;
    padding: 10px 15px;
    color: #333;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-header-block .site-header-block__nav ul.menu ul a:hover,
.site-header-block .site-header-block__nav ul.menu ul a:focus {
    background: #3D91A7;
    color: #FFFFFF;
    text-decoration: none;
}

.site-header-block .site-header-block__nav ul.menu ul .current-menu-item > a {
    background: #3D91A7;
    color: #FFFFFF;
}

/* Nested sub-submenus */
.site-header-block .site-header-block__nav ul.menu ul ul {
    top: 0;
    left: 100%;
}

/* Actions column — 27% width (Elementor column padding explicitly 0) */
.site-header-block .site-header-block__actions {
    flex: 0 0 27%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
}

/* Search toggle button (Elementor HTML widget: width: fit-content, margin-bottom: 0) */
.site-header-block .site-header-block__search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: fit-content;
    margin-bottom: 0;
    z-index: 1001;
}

.site-header-block button.site-header-block__search-toggle {
    background: #3D91A7;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 8px 16px;
    color: #FFFFFF;
    font-size: 14px;
    font-family: "Myriad Pro Regular", "Myriad Pro", sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s ease;
}

.site-header-block button.site-header-block__search-toggle:hover {
    background: #CD6C33;
}

.site-header-block button.site-header-block__search-toggle.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* Expanding search container */
.site-header-block .site-header-block__search-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #FFFFFF;
    border-radius: 25px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.site-header-block .site-header-block__search-container.active {
    width: calc(63vw);
    opacity: 1;
    padding: 4px 20px;
}

.site-header-block .site-header-block__search-icon {
    flex-shrink: 0;
    margin-right: 10px;
    opacity: 0;
    transition: opacity 0.3s 0.2s;
}

.site-header-block .site-header-block__search-container.active .site-header-block__search-icon {
    opacity: 1;
}

.site-header-block input.site-header-block__search-input {
    border: none;
    outline: none;
    width: 100%;
    padding: 2px 0;
    font-size: 16px;
    background: transparent;
    color: #333;
    font-family: "Myriad Pro Regular", "Myriad Pro", sans-serif;
}

.site-header-block input.site-header-block__search-input::placeholder {
    color: #999;
}

.site-header-block input.site-header-block__search-input::-webkit-search-cancel-button,
.site-header-block input.site-header-block__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.site-header-block input.site-header-block__search-input::-ms-clear {
    display: none;
}

.site-header-block button.site-header-block__search-close {
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.3s 0.2s;
    margin-left: 10px;
}

.site-header-block .site-header-block__search-container.active .site-header-block__search-close {
    opacity: 1;
}

.site-header-block button.site-header-block__search-close:hover {
    color: #333;
    background: #f0f0f0;
    border-radius: 50%;
}

/* CTA button (Elementor: padding 12px on .elementor-button, widget has width: fit-content, margin-bottom: 0) */
.site-header-block a.site-header-block__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #CE7234;
    color: #FFFFFF !important;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #016D89;
    font-size: 14px;
    font-weight: 400;
    font-family: "Myriad Pro Regular", "Myriad Pro", sans-serif;
    white-space: nowrap;
    text-decoration: none;
    width: fit-content;
    margin-bottom: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.site-header-block a.site-header-block__cta:hover,
.site-header-block a.site-header-block__cta:focus {
    color: #FFFFFF;
    border-color: #016D89;
    text-decoration: none;
}

/* ═══════════════════════════════════════════
   3. MOBILE HEADER (hidden on desktop)
   ═══════════════════════════════════════════ */

.site-header-block .site-header-block__mobile {
    display: none;
    background: #3D91A7;
}

.site-header-block .site-header-block__mobile-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
}

.site-header-block .site-header-block__mobile-logo a {
    display: block;
}

.site-header-block .site-header-block__mobile-logo img {
    width: 217px;
    height: auto;
    display: block;
}

/* Hamburger toggle */
.site-header-block button.site-header-block__mobile-toggle {
    background: #3D91A7;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.site-header-block .site-header-block__mobile-toggle-icon {
    display: block;
    width: 1.25rem;
}

.site-header-block .site-header-block__mobile-toggle-icon::before,
.site-header-block .site-header-block__mobile-toggle-icon::after {
    content: '';
    display: block;
    height: 3px;
    background-color: currentColor;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
}

.site-header-block .site-header-block__mobile-toggle-icon::before {
    box-shadow: 0 0.35rem 0 currentColor;
    margin-bottom: 0.5rem;
}

/* Hamburger → X animation */
.site-header-block button.site-header-block__mobile-toggle[aria-expanded="true"] .site-header-block__mobile-toggle-icon::before {
    box-shadow: none;
    transform: translateY(0.35rem) rotate(45deg);
}

.site-header-block button.site-header-block__mobile-toggle[aria-expanded="true"] .site-header-block__mobile-toggle-icon::after {
    transform: translateY(-0.35rem) rotate(-45deg);
}

/* Mobile dropdown menu */
.site-header-block .site-header-block__mobile-nav {
    max-height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height 0.3s ease, transform 0.3s ease;
}

.site-header-block .site-header-block__mobile-nav.open {
    max-height: 100vh;
    overflow-y: auto;
    transform: scaleY(1);
}

.site-header-block .site-header-block__mobile-nav ul.menu {
    background: #FFFFFF;
    margin: 0;
    padding: 0;
}

.site-header-block .site-header-block__mobile-nav ul.menu li {
    display: block;
    position: relative;
    width: 100%;
}

.site-header-block .site-header-block__mobile-nav ul.menu li a {
    display: block;
    padding: 15px 20px;
    color: #016D89;
    background: #FFFFFF;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    font-size: 15px;
    transition: color 0.2s ease, background 0.2s ease;
}

.site-header-block .site-header-block__mobile-nav ul.menu li a:hover {
    color: #CD6C33;
    text-decoration: none;
}

.site-header-block .site-header-block__mobile-nav ul.menu li.current-menu-item > a {
    background: #016D89;
    color: #FFFFFF;
}

/* Mobile submenus */
.site-header-block .site-header-block__mobile-nav ul.menu > li > ul {
    display: none;
}

.site-header-block .site-header-block__mobile-nav ul.menu > li.submenu-open > ul {
    display: block;
}

.site-header-block .site-header-block__mobile-nav ul.menu ul a {
    padding-left: 35px;
    font-size: 14px;
}

.site-header-block .site-header-block__mobile-nav ul.menu ul ul a {
    padding-left: 50px;
    font-size: 13px;
}

.site-header-block .site-header-block__mobile-nav li.menu-item-has-children > a::after {
    content: '\25BE';
    float: right;
    transition: transform 0.2s ease;
}

.site-header-block .site-header-block__mobile-nav li.menu-item-has-children.submenu-open > a::after {
    transform: rotate(180deg);
}

/* ═══════════════════════════════════════════
   4. HERO BANNER
   Background image + arch overlay + page title
   ═══════════════════════════════════════════ */

.site-header-block .site-header-block__banner {
    position: relative;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Semi-transparent overlay on the section background */
.site-header-block .site-header-block__banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    z-index: 0;
}

/* Content layer with arch graphic overlay */
.site-header-block .site-header-block__banner-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: stretch;
}

/* Arch overlay using ::after pseudo-element */
.site-header-block .site-header-block__banner-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--arch-desktop);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

.site-header-block .site-header-block__banner-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 20px;
}

/* Page title — h1 */
.site-header-block h1.site-header-block__banner-title {
    font-family: "Myriad Pro Regular", "Myriad Pro", sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    text-align: right;
    max-width: 400px;
    margin: 20px 57px 0 0;
    line-height: 1.2;
}

/* Hero description (from ACF) */
.site-header-block .site-header-block__banner-description {
    font-family: "Barlow", sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════ */

/* Desktop: show pre-header + main, hide mobile */
@media (min-width: 768px) {
    .site-header-block .site-header-block__banner-content {
        height: 450px;
    }
}

@media (min-width: 1026px) {
    .site-header-block .site-header-block__preheader {
        display: block;
    }
    .site-header-block .site-header-block__main {
        display: block;
    }
    .site-header-block .site-header-block__mobile {
        display: none;
    }
}

/* Tablet and mobile: hide desktop headers, show mobile */
@media (max-width: 1025px) {
    .site-header-block .site-header-block__preheader {
        display: none;
    }
    .site-header-block .site-header-block__main {
        display: none;
    }
    .site-header-block .site-header-block__mobile {
        display: block;
    }

    .site-header-block .site-header-block__banner {
        background-position: 0px 0px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .site-header-block .site-header-block__mobile-logo img {
        width: 160px;
    }

    .site-header-block .site-header-block__mobile-nav ul.menu li a {
        padding: 12px 15px;
        font-size: 14px;
    }

    /* Banner adjustments */
    .site-header-block .site-header-block__banner-content::after {
        background-image: var(--arch-mobile);
        background-size: contain;
    }

    .site-header-block h1.site-header-block__banner-title {
        text-align: center;
        font-size: 28px;
        margin: 16px auto 0;
        align-self: center;
    }

    .site-header-block .site-header-block__banner-inner {
        align-items: center;
    }

    .site-header-block .site-header-block__banner-description {
        font-size: 20px;
    }
}