/* ===================================================================
   OSN — responsive header + WordPress-matched footer
   Loaded via header.tpl. Kept in its own file (and not appended to
   custom.css) so Cloudflare's cached copy of custom.css can never
   shadow it. Mirrors the Elementor header on offshoreservers.net
   (post-70.css): #333 bg, 4px #f44336 underline, white nav,
   #f44336 hover, #3688f4 active.
   =================================================================== */

/* ---------- Header: flex row replaces the float/66% layout ---------- */
section#header {
    display: block;
    padding-top: 14px;
    padding-bottom: 18px;
    border-bottom: 4px solid #f44336;
}
section#header > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}
section#header .header-brand         { order: 1; }
section#header .header-product-nav   { order: 2; margin-left: auto; }
section#header .header-utility       { order: 3; }
section#header .header-burger        { order: 4; margin-left: auto; }
section#header .header-mobile-nav    { order: 5; flex-basis: 100%; }

/* undo the inline-float layout we replaced in header.tpl */
section#header .header-brand,
section#header .header-utility,
section#header .header-product-nav,
section#header .header-burger { float: none; display: block; width: auto; }

/* Kill the base theme's nowrap that was clipping the product links */
section#header .header-product-nav ul,
section#header .header-utility ul {
    float: none;
    margin: 0;
    padding: 0;
    white-space: normal;
    list-style: none;
}
section#header .header-utility > ul > li { display: inline-block; }
section#header .header-utility > ul > li > a { color: #ffffff; }

section#header .logo img {
    max-height: none;
    width: auto;
    height: auto;
    vertical-align: middle;
}

/* ---------- Product nav (desktop) ---------- */
section#header .header-product-nav li { display: inline-block; }
section#header .header-product-nav li > a {
    display: block;
    padding: 8px 12px;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
section#header .header-product-nav li > a:hover,
section#header .header-product-nav li > a:focus {
    color: #ffffff;
    background: transparent;
    border-bottom-color: #f44336;
}

/* ---------- Burger (hidden on desktop) ---------- */
/* NB: the base six theme hides .navbar-toggle at its own breakpoint
   (<=991px). We drive the button ourselves so the burger and the
   product-nav breakpoint can never disagree and leave a dead gap. */
section#header .header-burger,
section#header .header-burger .navbar-toggle { display: none; }
section#header .header-burger .navbar-toggle {
    border: 0;
    background: transparent;
    padding: 8px 4px;
    margin: 0;
    float: none;
}
section#header .header-burger .icon-bar {
    display: block;
    width: 26px;
    height: 2px;
    background: #3688f4;
    border-radius: 1px;
}
section#header .header-burger .icon-bar + .icon-bar { margin-top: 5px; }

/* ---------- Mobile drawer: hidden on desktop ---------- */
section#header .header-mobile-nav { display: none; }

/* ---------- Tablet + mobile: burger nav, stacked drawer ---------- */
@media (max-width: 1024px) {
    section#header .header-product-nav { display: none; }
    section#header .header-burger,
    section#header .header-burger .navbar-toggle { display: block; }
    section#header .header-utility { order: 2; }

    section#header .header-mobile-nav {
        background: #ffffff;
        border: 1px solid #e2e2e2;
        border-radius: 3px;
    }
    section#header .header-mobile-nav.in,
    section#header .header-mobile-nav.collapsing { display: block; }
    section#header .header-mobile-nav ul { margin: 0; padding: 0; list-style: none; }
    section#header .header-mobile-nav li + li { border-top: 1px solid #e2e2e2; }
    section#header .header-mobile-nav a {
        display: block;
        padding: 12px 16px;
        color: #000000;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        text-decoration: none;
    }
    section#header .header-mobile-nav a:hover,
    section#header .header-mobile-nav a:focus {
        background: #f44336;
        color: #ffffff;
    }
    section#header .header-mobile-nav a.active,
    section#header .header-mobile-nav a.current {
        background: #3688f4;
        color: #ffffff;
    }
}

@media (max-width: 480px) {
    section#header .header-utility { order: 3; flex-basis: 100%; }
    section#header .header-utility > ul > li > a { padding: 6px 0; }
    section#header .logo img { max-width: 200px; }
}

/* =================== Footer =================== */
section#footer { padding: 36px 0 20px; }
section#footer .footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 28px;
}
section#footer .footer-column { flex: 1 1 0; min-width: 0; }
section#footer .footer-column h4 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
section#footer .footer-column ul { margin: 0; padding: 0; list-style: none; }
section#footer .footer-column li { margin-bottom: 8px; }
section#footer .footer-column a { color: #ffffff; text-decoration: none; }
section#footer .footer-column a:hover,
section#footer .footer-column a:focus { color: #f44336; }

section#footer .footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid #333333;
}
section#footer .footer-legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
section#footer .footer-legal ul a { color: #ffffff; text-decoration: none; }
section#footer .footer-legal ul a:hover { color: #f44336; }
section#footer .footer-social { order: 3; }
section#footer .footer-social a {
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
}
section#footer .footer-social a:hover { color: #f44336; }

section#footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #333333;
}
section#footer .footer-bottom p { margin: 0; color: #ffffff; }

/* Stack to a single column before 3-across gets too tight to read. */
@media (max-width: 900px) {
    section#footer .footer-column { flex-basis: 100%; }
}
@media (max-width: 767px) {
    section#footer .footer-bottom { flex-direction: column; align-items: flex-start; }
}