/* ==========================================================================
   Prespa Child — customizations.css
   Loaded AFTER the parent's prespa-style (build/css/main.css).

   Purpose: replicate the breakpoint shift the previous developer made
   directly to the parent's compiled CSS. The parent's mobile-menu and
   site-layout rules originally fire at 54rem (~864px). The previous dev
   moved them to 1109px / 1110px so the burger menu stays visible on
   tablets / small laptops. This file re-creates that behavior in a
   child theme so future parent updates don't blow it away.

   Strategy:
   1. Extend the parent's @media (max-width: 54rem) mobile-menu rules
      so they keep firing up to 1109.98px (overriding the parent's
      conflicting @media (min-width: 54rem) desktop rules in that range
      via source-order cascade — child loads after parent).
   2. Re-issue the parent's @media (min-width: 54rem) desktop layout
      rules at @media (min-width: 1110px) so the desktop layout still
      kicks in, just at the wider breakpoint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mobile menu UI extended up to 1109.98px
   Source: parent's @media (max-width: 54rem) block (mobile menu)
   -------------------------------------------------------------------------- */
@media (max-width: 1109.98px) {
    .social-icons { padding: 0; }
    .top-menu,
    .top-menu .nav-menu.hide .social-icon { display: none; }
    .menu-toggle {
        background-color: transparent;
        border: none;
        position: relative;
        z-index: 1001;
        display: inline-block; /* counters parent's (min-width:54rem){.menu-toggle{display:none}} */
    }
    .main-navigation:is(.toggled, :has(#burger-check:checked)) > .menu-toggle {
        position: absolute;
        right: 1.5rem;
        top: 1.5rem;
    }
    .toggled .menu-toggle:focus {
        outline: 1px solid #f7f7f7;
        outline-offset: -2px;
    }
    .slide-menu {
        bottom: 0;
        color: #fff;
        height: 100vh;
        height: 100dvh;
        left: 100%;
        line-height: 2.25rem;
        opacity: 0;
        overflow: auto;
        position: fixed;
        right: 0;
        top: 0;
        transition: all .4s ease-out;
        z-index: 1;
    }
    .toggled .slide-menu {
        bottom: 0;
        display: flex;
        left: 0;
        opacity: 1;
        pointer-events: auto;
        z-index: 2;
    }
    .slide-menu ul { list-style: none; padding-left: 20px; }
    .slide-menu > ul > li { padding-bottom: .5rem; }
    .slide-menu .feather { vertical-align: middle; }
    #primary-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem;
        position: absolute;
        top: 15%;
        width: 100%;
    }
    .slide-menu .moved-items { padding-left: 0; }
    .moved-items {
        border-top: 1px solid #fff;
        line-height: normal;
        padding-top: 1rem;
        display: block;
    }
    .moved-items:first-of-type { margin-top: 1.5rem; }
    .slide-menu ul li a {
        color: #fff;
        display: inline-block;
        text-decoration: none;
    }
    .slide-menu ul li:not(.call-to-action) a { width: 100%; }
    .slide-menu .dark-mode-widget { color: #fff; }
    .main-navigation .sub-menu { display: none; }
    li.toggled > .sub-menu { display: block; }
    .sticky-header { opacity: 0; transition: .15s; visibility: hidden; }
    .sticky-header.show { opacity: 1; visibility: visible; }
    .moved-items li { float: left; padding: .5rem; }

    /* Neutralize parent's @media (min-width: 54rem) desktop layout rules
       so the mobile layout keeps applying up to 1109.98px. */
    .main-navigation {
        display: block;
        margin-top: 0;
        flex: none;
    }
    .main-navigation a { padding: inherit; }
    .main-navigation li:last-child a:not(.wp-element-button) { padding-right: inherit; }
    .site-branding { flex: none; }
    .header-content-wrapper { gap: 0; }
    .main-navigation-container { display: block; }
    .site-wrapper { display: block; }
    .has-sidebar main,
    .has-sidebar aside { width: 100%; }
}

/* --------------------------------------------------------------------------
   2. Desktop layout re-applied at 1110px+
   Source: parent's six @media (min-width: 54rem) blocks, verbatim.
   -------------------------------------------------------------------------- */

/* Block 1: top + main navigation desktop layout */
@media (min-width: 1110px) {
    .menu-toggle { display: none; }
    .top-menu ul ul a { color: #000; }
    .top-menu li { padding-right: .5rem; }
    #top-menu > li:first-child a { padding-left: 0; }
    .social-icon + .site-header-account { padding-left: 1rem; }
    .site-menu:after { clear: both; content: ""; display: table; }
    .site-menu ul {
        display: none;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .site-menu ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
        float: left;
        left: -999em;
        position: absolute;
        top: 100%;
        z-index: 99999;
    }
    .site-menu ul ul ul { left: -999em; top: 0; }
    .site-menu ul ul li.focus > ul,
    .site-menu ul ul li:hover > ul { display: block; left: auto; }
    .site-menu ul ul a { outline-offset: -3px; }
    .site-menu ul li.focus > ul,
    .site-menu ul li:hover > ul { left: auto; }
    .site-menu a { text-decoration: none; }
    .site-menu a, .site-menu ul { display: block; }
    .site-menu li { float: left; position: relative; width: auto; }
    .site-menu li li { padding: 0; }
    .site-menu li li, .site-menu li li li { text-indent: 0; }
    .site-menu li li:focus { display: block; }
    .main-navigation { display: flex; margin-top: .5rem; }
    .main-navigation a { padding: .75rem 1rem; }
    .main-navigation li:last-child a:not(.wp-element-button) { padding-right: .5rem; }
    .main-navigation ul ul a { padding: .875rem 1rem; }
    .site-menu ul ul a {
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        border-right: 1px solid hsla(0, 0%, 100%, .25);
        border-top: 1px solid hsla(0, 0%, 100%, .25);
        text-align: left;
        width: 200px;
    }
    .site-menu ul ul li.focus > ul,
    .site-menu ul ul li:hover > ul { left: 100%; }
    .site-menu li.menu-item-has-children > a:after,
    .site-menu li.page_item_has_children > a:after {
        content: "▼";
        font-size: 7px;
        opacity: .75;
        padding-left: 5px;
        vertical-align: 1px;
    }
    .site-menu li li.menu-item-has-children > a:after,
    .site-menu li li.page_item_has_children > a:after { content: "▶"; }
    .site-menu ul li.search-icon a { outline-offset: -4px; }
    .header-social-icons { display: flex; margin-left: auto; }
    .header-social-icons .social-icon:last-child { padding-right: 0; }
    .call-to-action a {
        font-weight: 700;
        margin-top: .25rem !important;
        padding: .5rem 1rem;
    }
}

/* Block 2: fixed-header + mega-menu */
@media (min-width: 1110px) {
    .fixed-header {
        border-bottom: 1px solid var(--p-line-light);
        box-shadow: 0 15px 30px var(--p-line-light);
        top: auto;
    }
    .site-menu .mega-menu.focus > ul,
    .site-menu .mega-menu:hover > ul {
        display: flex;
        float: none;
        left: auto;
    }
    .site-menu .mega-menu.focus ul ul,
    .site-menu .mega-menu:hover ul ul { left: auto; top: 100%; }
    .site-menu .mega-menu li.menu-item-has-children > a:after,
    .site-menu .mega-menu li.page_item_has_children > a:after { content: none; }
    .site-menu .mega-menu ul { box-shadow: none; }
    .site-menu .mega-menu ul a {
        box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
        display: table;
        height: 100%;
    }
    .site-menu .mega-menu ul a span {
        display: table-cell;
        vertical-align: middle;
    }
}

/* Block 3: header-content-wrapper layout */
@media (min-width: 1110px) {
    .header-content-wrapper { gap: .5rem; }
    .site-branding { flex: 0 1 30%; }
    .main-navigation { flex: 0 1 70%; }
    .social-icons svg { font-size: 1rem; }
}

/* Block 4: main-navigation-container as table */
@media (min-width: 1110px) {
    .main-navigation-container { display: table; }
}

/* Block 5: site-wrapper flex */
@media (min-width: 1110px) {
    .site-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Block 6: sidebar layout + latest-posts widget hover */
@media (min-width: 1110px) {
    .has-sidebar main { width: 69%; }
    .has-sidebar aside { width: 27%; }
    .widget-area .wp-block-latest-posts > li { position: relative; }
    .widget-area .wp-block-latest-posts img:hover {
        opacity: .75;
        transform: translate(0) scale3d(1.1, 1.1, 1.1);
    }
    .widget-area .wp-block-latest-posts > li > .wp-block-latest-posts__featured-image {
        display: inline-block;
        line-height: 0;
        overflow: hidden;
    }
    .widget-area .wp-block-latest-posts > li > figure {
        display: inline-block;
        overflow: hidden;
    }
    .widget-area .wp-block-latest-posts img { transition: all .8s ease-in-out; }
    .widget-area .wp-block-latest-posts .wp-block-latest-posts__post-date { padding-top: .35rem; }
}

/* ==========================================================================
   Pluginless contact form ([prespa_contact_form] shortcode)
   Rendered by inc/contact-lead.php. Bare-minimum baseline so the form
   doesn't look like the 1995 default-browser form. Refine when there's
   time for a real design pass.
   ========================================================================== */

.td-contact-form {
    max-width: 560px;
    margin: 5rem auto;
    padding: 2rem;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1a1a1a;
}

.td-contact-form__field {
    margin: 0 0 1.25rem;
}

.td-contact-form__field label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.td-contact-form input[type="text"],
.td-contact-form input[type="email"],
.td-contact-form textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.td-contact-form input[type="text"]:focus,
.td-contact-form input[type="email"]:focus,
.td-contact-form textarea:focus {
    outline: none;
    border-color: #0069ff;
    box-shadow: 0 0 0 3px rgba(0, 105, 255, 0.15);
}

.td-contact-form textarea {
    resize: vertical;
    min-height: 7rem;
}

.td-contact-form__turnstile {
    margin: 1rem 0 1.25rem;
}

.td-contact-form__submit {
    margin: 0 0 0.5rem;
}

.td-contact-form button[type="submit"] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #0069ff;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease;
}

.td-contact-form button[type="submit"]:hover:not(:disabled) {
    background: #0052cc;
}

.td-contact-form button[type="submit"]:disabled {
    background: #95a5b8;
    cursor: not-allowed;
}

.td-contact-form__consent {
    margin: 0;
    color: #888;
    font-size: 0.8rem;
}

.td-contact-form__status {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.td-contact-form__status--info {
    background: #eef4ff;
    color: #1a4ea0;
}

.td-contact-form__status--success {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #c5e1a5;
}

.td-contact-form__status--error {
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c2bd;
}

/* ==========================================================================
   Mobile menu bug fixes (post-reboot, 2026-05-24)

   Three bugs identified before the Local WP reboot:
     1. Hamburger collapsed to single line (::before/::after transform fix)
     2. "Contact Us" header button unclickable (z-index overlay fix)
     3. Slide-menu white-curtain with dark text (background / stack fix)

   All scoped inside @media (max-width: 1109.98px) so desktop styles are
   completely untouched.
   ========================================================================== */

@media (max-width: 1109.98px) {

    /* ------------------------------------------------------------------
       Fix 1: Hamburger — restore three-line geometry
       Problem: stripping height/padding caused ::before and ::after to
       collapse onto the parent baseline, rendering a single flat bar.
       Fix: give .burger a defined height and relative position so the
       pseudo-elements have a real coordinate origin, then use
       translateY to push the top bar up and the bottom bar down.
       ------------------------------------------------------------------ */
    .burger {
        position: relative;
        display: block;
        width: 20px;
        height: 14px;          /* spans the three bars: 2px + 5px gap + 2px + 5px gap + 2px */
        border-bottom: 2px solid #fff;  /* bottom bar */
        border-top: none;
        padding: 0;
    }

    .burger::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;                /* top bar sits at the very top of the 14px container */
        left: 0;
        width: 100%;
        border-bottom: 2px solid #fff;
        transform: translateY(0);
        transition: transform 0.25s, border-color 0.25s;
    }

    .burger::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;              /* middle bar sits at vertical center */
        left: 0;
        width: 100%;
        border-bottom: 2px solid #fff;
        transform: translateY(-50%);   /* center it precisely */
        transition: transform 0.25s, border-color 0.25s;
    }

    /* When checked — animate into an ✕ (keep existing parent behaviour,
       override transform values so they look right with the new geometry) */
    .burger-check:checked ~ .burger {
        border-bottom: 4px solid transparent !important; /* hide bottom bar */
    }
    .burger-check:checked ~ .burger::before {
        transform: rotate(-45deg) translateY(6px) translateX(-3px);
    }
    .burger-check:checked ~ .burger::after {
        transform: rotate(45deg) translateY(-50%) translateX(1px);
    }

    /* Isolate the circle background to the top-level .menu-toggle only —
       not the sub-menu-toggle chevrons that also sit inside .slide-menu */
    .main-navigation > .menu-toggle {
        position: relative;
        z-index: 1002;
        pointer-events: auto;
    }


    /* ------------------------------------------------------------------
       Fix 2: "Contact Us" button — click-through z-index stacking
       Problem: an invisible parent element (.site-branding or the
       main-navigation-container border strip) stretches across the
       header and catches mouse events before they reach the CTA link.
       Fix: force the CTA list item and its anchor above that ghost
       layer and guarantee pointer-events pass through.
       ------------------------------------------------------------------ */
    .slide-menu li.call-to-action {
        position: relative !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
    }

    .slide-menu li.call-to-action a,
    .slide-menu li.call-to-action .wp-block-button__link {
        position: relative !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Also guard the moved-items container that wraps the CTA in mobile */
    .slide-menu .moved-items {
        position: relative;
        z-index: 10001;
        pointer-events: auto;
    }


    /* ------------------------------------------------------------------
       Fix 3: Slide-menu white curtain
       Problem: the open .slide-menu wasn't rendering with a solid
       background, so the page content showed through, and internal
       text was unreadable.
       Fix: when .main-navigation is .toggled, force the slide-menu
       to be a full-viewport white canvas with dark charcoal text so
       links are legible at any scroll position.
       ------------------------------------------------------------------ */
    .main-navigation:is(.toggled, :has(#burger-check:checked)) .slide-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        background-color: #ffffff !important;
        z-index: 99999 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow-y: auto;
        color: #282728 !important;
    }

    /* Flip link and icon colours to dark charcoal so they read on white */
    .main-navigation:is(.toggled, :has(#burger-check:checked)) .slide-menu ul li a,
    .main-navigation:is(.toggled, :has(#burger-check:checked)) .slide-menu .moved-items li a {
        color: #282728 !important;
    }

    .main-navigation:is(.toggled, :has(#burger-check:checked)) .slide-menu .moved-items {
        border-top-color: #282728 !important;
    }

    /* CTA "Contact Us" button keeps its distinct button style on the white
       canvas — retain the border, just swap to dark palette */
    .main-navigation:is(.toggled, :has(#burger-check:checked)) .slide-menu li.call-to-action a {
        color: #282728 !important;
        border-color: #282728 !important;
    }

    /* Sub-menu chevron icons */
    .main-navigation:is(.toggled, :has(#burger-check:checked)) .slide-menu .sub-menu-toggle i::after {
        color: #282728 !important;
    }

    /* Dark-mode widget label */
    .main-navigation:is(.toggled, :has(#burger-check:checked)) .slide-menu .dark-mode-widget {
        color: #282728 !important;
    }
}