/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */


/* =============================================================
   LOGO PADDING
   Apply left padding at all screen sizes so the logo always
   has breathing room from the edge — matching the sticky state.
   ============================================================= */

#site-header-inner {
    padding-left: 30px !important;
    padding-right: 15px !important;
}

/* =============================================================
   DESKTOP HEADER LAYOUT  (961px and wider only)

   Below 961px, OceanWP + Max Mega Menu handle the hamburger
   entirely on their own — we stay out of the way.

   Above 961px we enforce:  Logo | Nav (flex:1) | Language
   using flex order so the correct visual sequence is maintained
   regardless of DOM order (language comes before nav in the HTML).
   ============================================================= */

@media only screen and (min-width: 961px) {

    #site-header-inner {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    /* 1 — Logo: always left, never shrink */
    #site-logo {
        order: 1;
        flex-shrink: 0;
        float: none !important;
    }

    /* 2 — Nav (mega menu): pushed to the right via auto left-margin,
            takes only its natural width so language stays visible */
    #site-navigation-wrap {
        order: 2;
        flex: 0 0 auto;
        float: none !important;
        position: relative !important;
        right: 0 !important;
        margin-left: auto !important;
    }

    /* 3 — Language switcher: sits right next to the nav, never shrink */
    .after-header-content {
        order: 3;
        flex: 0 0 auto;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        overflow: visible !important;
    }

    .after-header-content .after-header-content-inner {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* 4 — Hamburger (hidden at desktop anyway, but keep it last) */
    .oceanwp-mobile-menu-icon {
        order: 4;
    }

}

/* =============================================================
   RESPONSIVE NAV: Fluid compression before hamburger

   Nav items shrink proportionally as the window narrows.
   Hamburger takes over at 960px (Max Mega Menu breakpoint).

   TWO OPTIONS — Option A is active.
   To switch: comment out Option A and uncomment Option B.
   ============================================================= */

/* --- OPTION A: Conservative shrink ~85-90% --- */

@media only screen and (min-width: 961px) and (max-width: 1150px) {
    #mega-menu-wrap-main_menu #mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link {
        padding: 0px 7px !important;
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }
    .after-header-content .wpml-ls-item a,
    .after-header-content .wpml-ls-statics-shortcode a {
        font-size: 11px !important;
        padding: 0 5px !important;
    }
}

@media only screen and (min-width: 1151px) and (max-width: 1350px) {
    #mega-menu-wrap-main_menu #mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link {
        padding: 0px 10px !important;
        font-size: 13px !important;
        letter-spacing: 0 !important;
    }
    .after-header-content .wpml-ls-item a,
    .after-header-content .wpml-ls-statics-shortcode a {
        font-size: 12px !important;
        padding: 0 8px !important;
    }
}

@media only screen and (min-width: 1351px) and (max-width: 1550px) {
    #mega-menu-wrap-main_menu #mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link {
        padding: 0px 14px !important;
        font-size: 14px !important;
    }
}

/* --- OPTION B: Aggressive shrink ~70-75% ---
   Uncomment this block and comment out Option A to try it: */

/*
@media only screen and (min-width: 961px) and (max-width: 1100px) {
    #mega-menu-wrap-main_menu #mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link {
        padding: 0px 4px !important;
        font-size: 9px !important;
        letter-spacing: 0 !important;
    }
}

@media only screen and (min-width: 1101px) and (max-width: 1300px) {
    #mega-menu-wrap-main_menu #mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link {
        padding: 0px 7px !important;
        font-size: 11px !important;
        letter-spacing: 0 !important;
    }
}

@media only screen and (min-width: 1301px) and (max-width: 1550px) {
    #mega-menu-wrap-main_menu #mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link {
        padding: 0px 10px !important;
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }
}
*/

/* =============================================================
   FOOTER — FooterOneRow Template (Gutenberg, id=5636)

   Single-row layout:
     [PRIVACY POLICY…]  [MAXITROL logo]  [LinkedIn Instagram Facebook]
                                [© 2026 Maxitrol. All rights reserved]

   Block structure:
     #footer-widgets .footer-widgets-inner
       > .wp-block-columns            ← the one main row
           > .wp-block-column:1st     ← nav links (Navigation block)
           > .wp-block-column:2nd     ← MAXITROL logo (Image block)
           > .wp-block-column:3rd     ← social icons (nested Columns)
       > [OGB Row]                    ← copyright paragraph
   ============================================================= */

/* ── Container: full viewport width, 30px side breathing room ── */
/* flex-direction: column stacks children vertically so the main
   nav/logo/social row comes first, copyright row sits below it.  */
#footer-widgets .footer-widgets-inner {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ── Cancel any alignfull / alignwide edge-breakout margins ──── */
#footer-widgets .wp-block-columns {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* ── Hide Vimeo social icon ──────────────────────────────────── */
#footer-widgets .wp-block-social-link-vimeo,
#footer-widgets a[href*="vimeo.com"] {
    display: none !important;
}

/* ── Main row: three columns, logo exactly centred ───────────── */
/* flex:1 on both the nav (left) and social (right) columns
   forces them to consume equal amounts of leftover space, so
   the logo column — which is flex:0 auto — always lands dead
   centre regardless of how wide or narrow the two sides are.  */
#footer-widgets .footer-widgets-inner > .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
}

/* Col 1 — nav links: grows to fill the left half */
#footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* Nav links: no line-breaks, spaced out */
#footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:first-child a {
    white-space: nowrap !important;
    margin-right: 16px !important;
}

/* Col 2 — logo: fixed to its natural size, centred */
#footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:nth-child(2) {
    flex: 0 0 auto !important;
    text-align: center !important;
    padding: 0 20px !important;
}

#footer-widgets .wp-block-image {
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
}

/* Col 3 — social icons + copyright: stacked column, both right-aligned.
   flex-direction:column puts social icons row on top, copyright below.
   align-items:flex-end pushes both to the right edge.                */
#footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:last-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
}

/* Copyright paragraph inside the social column */
#footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:last-child p {
    text-align: right !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
}

/* Nested social Columns block: force a horizontal row, hug the right edge.
   Without display+flex-direction here, Gutenberg's stacking rules can
   override flex-wrap and stack each icon into its own row.           */
#footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:last-child .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0 8px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Each individual social icon column: auto-width, not percentage-based */
#footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:last-child .wp-block-column {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: fit-content !important;
}

/* ── Copyright: right-aligned below the social icons ─────────── */
/* The FooterOneRow template wraps the copyright in an OGB "Row"
   block. That wrapper may default to a narrow / vertical layout.
   Target it three ways to be safe.                              */

/* 1. Force the OGB Row wrapper to full-width block display */
#footer-widgets .footer-widgets-inner > *:not(.wp-block-columns) {
    display: block !important;
    width: 100% !important;
    writing-mode: horizontal-tb !important;
}

/* 2. Force the paragraph itself horizontal, full-width, right-aligned */
#footer-widgets .footer-widgets-inner > *:not(.wp-block-columns) p,
#footer-widgets p.has-text-align-right {
    display: block !important;
    width: 100% !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    text-align: right !important;
    margin-top: 6px !important;
}

/* ── Tablet (600px–959px): shrink font & logo, keep 1 row ───── */
@media only screen and (min-width: 600px) and (max-width: 959px) {
    #footer-widgets .footer-widgets-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
        gap: 8px !important;
    }

    #footer-widgets .footer-widgets-inner > .wp-block-columns {
        gap: 8px !important;
    }

    /* Smaller nav link text so all 4 items fit */
    #footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:first-child a {
        font-size: 11px !important;
        margin-right: 10px !important;
    }

    /* Scale logo down to keep it proportional */
    #footer-widgets .wp-block-image img {
        max-width: 140px !important;
        height: auto !important;
    }

    /* Col 2 padding tighter on tablet */
    #footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:nth-child(2) {
        padding: 0 10px !important;
    }
}

/* ── Mobile (≤599px): hamburger + logo row, social + © below ─── */
@media only screen and (max-width: 599px) {
    #footer-widgets .footer-widgets-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Let columns wrap: nav+logo stay on row 1, social drops to row 2 */
    #footer-widgets .footer-widgets-inner > .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 8px 0 !important;
    }

    /* Col 1 (nav → hamburger icon): shrinks to its natural width */
    #footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:first-child {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    /* Col 2 (logo): takes the remaining space on row 1 */
    #footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:nth-child(2) {
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 0 !important;
    }

    /* Col 3 (social): new full-width row, centred */
    #footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:last-child {
        flex: 0 0 100% !important;
        justify-content: center !important;
    }

    #footer-widgets .footer-widgets-inner > .wp-block-columns > .wp-block-column:last-child .wp-block-columns {
        justify-content: center !important;
    }

    /* Copyright: centre on mobile */
    #footer-widgets p.has-text-align-right {
        text-align: center !important;
    }
}