/* patch.css — runtime fixes for WordPress/Elementor static export */

/* === BODY FLEX RESET ===
   The F&F page embeds Elementor Custom CSS "body, .people-wrap { display:flex; align-items:center }"
   (intended only for .people-wrap accordion items) which makes body a flex row container.
   This collapses #outer-wrap to its intrinsic content width (~1200px) instead of the full
   viewport, breaking every section's full-width background.  Reset body to block. */
body {
    display: block !important;
}

/* === FULL-WIDTH SECTIONS ===
   OceanWP's boxed layout sets #wrap { width:1280px } which constrains all page content.
   Pages using the Elementor header/footer template have no #content-wrap wrapper —
   Elementor sections sit directly inside #main inside #wrap.
   Make both wrappers full-viewport-width so stretched sections reach the edge. */
#wrap {
    width: 100% !important;
    max-width: 100% !important;
}
#content-wrap.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#main #content-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* === DESKTOP DROPDOWN NAV (no Elementor JS) ===
   At >=1025px Elementor hides .elementor-nav-menu--dropdown via its dropdown-tablet
   media rule.  Re-show on hover and apply the correct brand colors (#000033 bg,
   #FFFFFF text, #28AAF3 hover) from widget 097d909 in header template elementor-4820.

   Two passes:
   1. Unconditional background/color on all sub-menus inside the desktop nav — ensures
      the correct colors are set regardless of how the dropdown becomes visible.
   2. Hover-triggered display:block so the dropdown appears at all (Elementor JS absent). */

/* Pass 1 — always-on colors (beats widget-nav-menu.min.css specificity 0,1,0) */
.elementor-nav-menu--main .sub-menu,
.elementor-nav-menu--main ul.elementor-nav-menu--dropdown {
    background-color: #000033 !important;
}
.elementor-nav-menu--main .sub-menu li {
    background-color: #000033 !important;
    list-style: none !important;
}
.elementor-nav-menu--main .sub-menu li a,
.elementor-nav-menu--main .sub-menu li .elementor-sub-item {
    background-color: #000033 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.elementor-nav-menu--main .sub-menu li a:hover,
.elementor-nav-menu--main .sub-menu li .elementor-sub-item:hover {
    color: #28AAF3 !important;
    background-color: #000033 !important;
}

/* Pass 2 — hover-trigger display at desktop breakpoint */
@media (min-width: 1025px) {
    .elementor-nav-menu--main li.menu-item-has-children {
        position: relative;
    }
    .elementor-nav-menu--main li.menu-item-has-children:hover > ul.sub-menu {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 9999;
        min-width: 220px;
        border-radius: 0 !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        padding: 0 !important;
        margin: 0 !important;
    }
    .elementor-nav-menu--main li.menu-item-has-children:hover > ul.sub-menu li a {
        display: block !important;
        padding: 10px 20px !important;
    }
}

/* === MOBILE NAV SUB-MENUS (JS accordion via patch.js) === */
@media (max-width: 1024px) {
    .elementor-nav-menu--dropdown li > ul.sub-menu {
        display: none;
    }
    .elementor-nav-menu--dropdown li.e-open > ul.sub-menu {
        display: block !important;
    }
}

/* === HIDE COOKIE LAW "MANAGE CONSENT" OVERLAY ===
   #cookie-law-info-again overlaps the nav without JS to reposition it. */
#cookie-law-info-again {
    display: none !important;
}

/* === F&F PAGE SECTION MARGIN FIX ===
   The hero (470d87e6) has margin-top/bottom:-120px designed for Elementor's sticky
   header height.  Without Elementor JS the header is not fixed, so the -120px pulls
   the hero partially behind the nav.  The isometric section (8580e8a) has a matching
   +120px top margin.  Zero both so sections stack naturally. */
.elementor-8333 .elementor-element.elementor-element-470d87e6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.elementor-8333 .elementor-element.elementor-element-8580e8a {
    margin-top: 0 !important;
}

/* === FOOTER SPACING FIX ===
   Elementor footer (elementor-60) has a 100px spacer widget at the top creating a
   large gap above the footer links. Zero it out.
   Also: footer-widgets-inner uses .container (max-width:90%) — expand to full width. */
.elementor-element.elementor-element-f43643c .elementor-spacer-inner {
    height: 0 !important;
}
.footer-widgets-inner.container {
    max-width: 100% !important;
    width: 100% !important;
}

/* === BLOG POST THUMBNAIL ASPECT-RATIO FIX ===
   Inline style sets padding-bottom:55% on .elementor-post__thumbnail for aspect ratio,
   but the img has no absolute positioning to fill it — leaves grey space. */
.elementor-posts-container .elementor-post__thumbnail {
    position: relative !important;
}
.elementor-posts-container .elementor-post__thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}