/* =============================================================
   Header & footer navigation fixes (global)
   -------------------------------------------------------------
   Header: Enfold's main menu link padding is 1vw, so the menu grows
   with the viewport and overlaps the (absolutely positioned) logo on
   wide screens; on smaller desktops the long 7-item menu doesn't fit
   beside the logo either.
   Fix: cap the link padding (stable width, no vw growth -> no overlap
   on large screens). The narrow-desktop range (<= ~1300px) is handled
   by header-nav.js, which switches Enfold to its native burger menu
   (Enfold's own option only reaches 990px).

   Footer: the footer is a flex row (space-between) with the menu
   (logo ::before + items, nowrap, ~1040px) in col 1 and a text widget
   in col 2. On smaller screens the menu can't fit and gets clipped.
   Fix: let the menu wrap and stack the footer columns + center them.
   ============================================================= */

/* ---- Header main menu ---- */
#top #header .av-main-nav > li > a {
    padding-left: 11px !important;
    padding-right: 11px !important;
    letter-spacing: 0.01em !important;
}

/* ---- Footer menu: never overflow/clip ----
   Above 1340px the row (logo + menu | copyright) fits on one line, so it is
   left untouched. At/below 1340px the wide menu would collide/clip, so we
   stack the columns, center them, and let the menu wrap. */
@media only screen and (max-width: 1340px) {
    #top #footer > .container {
        flex-direction: column;
        align-items: center;
        row-gap: 16px;
    }

    #top #footer .flex_column {
        width: 100% !important;
    }

    #top #footer .textwidget {
        text-align: center !important;
    }

    #top #footer #menu-footer-menu,
    #top #footer #menu-footer-menu-en {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Put the footer logo (::before) on its own line, menu items below. */
    #top #footer #menu-footer-menu::before,
    #top #footer #menu-footer-menu-en::before {
        flex-basis: 100%;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }
}

/* =============================================================
   Mobile: horizontal-overflow hardening (defensive, global)
   -------------------------------------------------------------
   The layout tests clean in current Safari/Chrome at every iPhone
   width, but this is a customer-edited site: pasted images, embeds,
   iframes, tables or long unbroken words (URLs / e-mail addresses)
   are the usual causes of "elements stick out past the viewport" on
   real phones. These rules stop that at the source. They are scoped
   to #wrap_all and mobile breakpoints, and deliberately do NOT touch
   the html/body root, so position:sticky/fixed stay unaffected and
   the desktop layout is untouched.
   ============================================================= */

/* 1) Reinforce the page wrapper as the horizontal clip boundary.
   Enfold clips full-bleed sections (margin:calc(50% - 50vw)) via
   .all_colors{overflow:clip}, which is unsupported on iOS < 16;
   overflow:hidden on #wrap_all (a normal element, not the root) is
   honoured by every browser incl. old iOS. */
#top #wrap_all {
    overflow-x: hidden;
}

/* 2) Media & embeds must never exceed their column. */
@media only screen and (max-width: 989px) {
    #top #wrap_all img,
    #top #wrap_all svg,
    #top #wrap_all video,
    #top #wrap_all iframe,
    #top #wrap_all embed,
    #top #wrap_all object,
    #top #wrap_all table {
        max-width: 100% !important;
    }
}

/* 3) Long unbreakable strings (URLs, e-mail addresses) must wrap
   instead of forcing the text column wider than the screen. */
@media only screen and (max-width: 767px) {
    #top #wrap_all p,
    #top #wrap_all li,
    #top #wrap_all h1,
    #top #wrap_all h2,
    #top #wrap_all h3,
    #top #wrap_all h4,
    #top #wrap_all td,
    #top #wrap_all a {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}