/*
Theme Name:     Bellevue - Child Theme
Theme URI:      https://bellevuetheme.com
Template:       bellevuex
Author:         Themovation
Author URI:     http://themovation.com
Version:        4.3
Text Domain:    bellevue
Domain Path:    /languages/
*/


/* = Theme customization starts here
-------------------------------------------------------------- */

/*
 * Heading font — Quiche Sans (Adobe Fonts).
 *
 * The stylesheet is enqueued by functions.php. The !important is needed
 * because the Elementor kit (#207) sets Trirong on every heading via a
 * body-scoped selector of higher specificity than plain h1–h6.
 *
 * Remove Georgia from the fallback chain if you'd rather fall back to a
 * sans-serif when the network load fails or the domain isn't whitelisted.
 */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.entry-title,
.page-header h1,
.page-header h2 {
    font-family: "quiche-sans", Georgia, serif !important;
}

/* ------------------------------------------------------------------
   Tablet & mobile header — Header Footer Elementor (HFE) overrides
   ------------------------------------------------------------------
   The HFE plugin renders one nav widget for desktop and another
   (with `.elementor-hidden-desktop`) for tablet/mobile. The mobile
   widget uses a slide-down drawer with default plain styling — these
   rules brand it with the site palette and improve touch targets.
   Scoped to .hfe-nav-menu__layout-* selectors so it never affects
   widgets outside HFE menus.
   ------------------------------------------------------------------ */

/* Hamburger toggle — colour + size that match the header's brand */
.hfe-nav-menu__toggle {
    color: #034052;
    cursor: pointer;
    padding: 10px;                 /* generous touch target */
    border-radius: 4px;
    transition: background .15s ease;
}
.hfe-nav-menu__toggle:hover,
.hfe-nav-menu__toggle:focus-visible { background: rgba(3, 64, 82, .08); }
.hfe-nav-menu__toggle .hfe-nav-menu-icon i,
.hfe-nav-menu__toggle .hfe-nav-menu-icon svg { color: inherit; font-size: 26px; }

/* Tablet/mobile drawer — when the menu is open */
@media (max-width: 1024px) {
    /* Drawer background and inset */
    .hfe-nav-menu__layout-vertical,
    .hfe-nav-menu__layout-dropdown,
    .hfe-nav-menu__layout-horizontal nav.hfe-dropdown-expandible,
    .hfe-dropdown-expandible {
        background: #ffffff !important;
        border-top: 3px solid #D9AE63;
        box-shadow: 0 18px 36px -18px rgba(3, 64, 82, .25);
    }

    /* Top-level items — bigger tappable rows + brand colour */
    .hfe-nav-menu .menu-item .hfe-menu-item,
    .hfe-nav-menu .menu-item .hfe-sub-menu-item {
        font-family: 'Trirong', Georgia, serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #034052 !important;
        letter-spacing: .02em;
        padding: 14px 22px !important;
        min-height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #efe9de;
        transition: background .15s ease, color .15s ease;
    }
    .hfe-nav-menu .menu-item .hfe-menu-item:hover,
    .hfe-nav-menu .menu-item .hfe-sub-menu-item:hover,
    .hfe-nav-menu .menu-item.current-menu-item > a {
        background: #f4efe7 !important;
        color: #022d3a !important;
    }
    /* Active / current item — gold accent rule */
    .hfe-nav-menu .menu-item.current-menu-item > a,
    .hfe-nav-menu .menu-item .hfe-sub-menu-item-active {
        box-shadow: inset 3px 0 0 0 #D9AE63;
    }

    /* Submenu items — slightly indented + softer */
    .hfe-nav-menu .sub-menu .hfe-sub-menu-item {
        font-size: 15px !important;
        color: #54565B !important;
        padding-left: 36px !important;
        background: #fbf9f5 !important;
    }
    .hfe-nav-menu .sub-menu .sub-menu .hfe-sub-menu-item {
        padding-left: 50px !important;
        background: #f4efe7 !important;
    }

    /* Submenu toggle arrow — gold */
    .hfe-nav-menu .hfe-menu-toggle,
    .hfe-nav-menu .sub-arrow {
        color: #D9AE63 !important;
        margin-left: 12px;
    }

    /* Container fills the row width and rounds the bottom corners gently */
    .hfe-nav-menu__layout-horizontal nav,
    .hfe-dropdown {
        border-radius: 0 0 6px 6px;
        overflow: hidden;
    }
}

/* Header row — make sure logo + hamburger sit on a single row even
   when Elementor's column gap is wide */
@media (max-width: 1024px) {
    #thhf-masthead-sticky .elementor-section .elementor-container,
    #thhf-masthead .elementor-section .elementor-container {
        flex-wrap: wrap !important;
    }
    #thhf-masthead-sticky .elementor-column,
    #thhf-masthead .elementor-column {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    /* Hide the desktop "Book Now" pill when it cramps the bar — show in drawer instead */
    @media (max-width: 600px) {
        #thhf-masthead-sticky .elementor-widget-button.elementor-hidden-mobile,
        #thhf-masthead .elementor-widget-button.elementor-hidden-mobile {
            display: none;
        }
    }
}

/* Stop the dropdown from reaching off the right edge on small phones */
@media (max-width: 480px) {
    .hfe-dropdown-expandible,
    .hfe-nav-menu__layout-horizontal nav {
        max-width: 100vw !important;
    }
}

/* ------------------------------------------------------------------
   Header polish — vertical alignment, contrast, sticky bar treatment
   ------------------------------------------------------------------
   Targets the four HFE header templates (#131 / #137 / #138 / #139).
   Catches every `[id*="masthead"]` so we don't have to add IDs by hand
   if a template is duplicated later.
   ------------------------------------------------------------------ */

/* Every header column should center its widgets vertically — without
   this rule the hamburger sits at the top of its column on tall rows
   and the row alignment looks broken. */
header[id*="masthead"] .elementor-section .elementor-container > .elementor-column > .elementor-widget-wrap {
    align-items: center !important;
    align-content: center !important;
}

/* Sticky header — kept as a near-opaque bar with subtle hairline + soft
   shadow. Any content that scrolls UNDER the bar disappears under a clean
   surface instead of bleeding through at 92 %. */
#thhf-masthead-sticky {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(3, 64, 82, 0.08);
    box-shadow: 0 1px 14px rgba(3, 64, 82, 0.06);
}
#thhf-masthead-sticky .elementor-section {
    background: transparent !important;  /* parent handles the bg now */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Transparent header — when there's no hero image immediately below, a
   featherweight gradient (top-only) keeps the logo + nav legible without
   the bar feeling boxed-in. Stays off entirely on truly dark hero images
   thanks to the gradient's mostly-transparent stops. */
header.transparent-header,
#thhf-masthead.transparent-header {
    background: linear-gradient(180deg, rgba(3, 64, 82, 0.10) 0%, rgba(3, 64, 82, 0) 100%) !important;
}

/* Tablet / mobile — slightly tighter section padding so the header
   doesn't feel chunky, plus a 28px hamburger icon (heavier hit area
   than the Elementor default 23 px) and 6px extra horizontal pad on
   the toggle so it sits comfortably away from the page edge. */
@media (max-width: 1024px) {
    header[id*="masthead"] .elementor-section {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .hfe-nav-menu__toggle {
        padding: 10px 14px;
    }
    .hfe-nav-menu__toggle .hfe-nav-menu-icon {
        font-size: 28px !important;
    }
    .hfe-nav-menu__toggle .hfe-nav-menu-icon i {
        font-weight: 700;            /* heavier "fas fa-bars" strokes */
    }
    /* Make sure the BOOK NOW pill on tablet is sized as a comfortable tap
       target — Elementor often shrinks it under 44 px without this. */
    header[id*="masthead"] .elementor-widget-button .elementor-button {
        padding: 10px 22px !important;
        min-height: 44px;
        font-size: 13px !important;
        letter-spacing: .12em;
        line-height: 1.1;
    }
}

/* Drawer transition — give the dropdown a 200 ms ease so it doesn't
   slam open / closed when tapping the hamburger. */
.hfe-dropdown-expandible {
    transition: opacity .2s ease, transform .25s ease !important;
}

/* When the drawer is open, fade out the rest of the header subtly so
   the focus is on the menu items themselves. */
.hfe-nav-menu__toggle[aria-expanded="true"] {
    background: rgba(3, 64, 82, .12);
}