/* =========================================================================
 * TDW — Header/nav breakpoint shift fra 850px → 1100px
 *
 * Flatsome's standard breakpoint mellem tablet og desktop er 849/850px,
 * styret af klasserne .show-for-medium, .hide-for-medium og .medium-*
 * der toggles via @media queries i flatsome.css.
 *
 * Vi forlænger "mobile mode" op til 1099px ved at gentage Flatsome's
 * mobile-rules i intervallet 850–1099px. Det betyder:
 *   - Burger-menu (.show-for-medium elementer) fortsat synlige op til 1099
 *   - Desktop-nav (.hide-for-medium elementer) fortsat skjult op til 1099
 *   - Logo-center, flex-wrap osv layout fortsat aktivt op til 1099
 *
 * Dette ÆNDRER IKKE Flatsome's CSS — vi tilføjer kun override-regler i
 * intervallet 850-1099px med højere specificitet. Over 1099px overtager
 * Flatsome's standard min-width:850px desktop-regler stadig.
 *
 * NOTE: Vi targeter kun header-relaterede elementer. Generel grid (.col,
 * .large-*, .medium-*) bevarer Flatsome's standardbreakpoints så
 * sidens content-layout ikke påvirkes.
 * ========================================================================= */

@media (min-width: 850px) and (max-width: 1099px) {

    /* ---- Toggle desktop vs mobile header --------------------------------
     * Disse er de KRITISKE switches: hvilke header-rows er synlige.
     * Flatsome's regel ved 850px+ siger ".show-for-medium { display: none }",
     * vi annullerer den i intervallet og tvinger mobile layout. */

    /* Vis mobile burger header */
    #header .show-for-medium,
    #header [data-show="show-for-medium"] {
        display: block !important;
    }
    /* Wrappers der er flex-col skal være flex igen, ikke block */
    #header .flex-col.show-for-medium {
        display: flex !important;
    }

    /* Skjul desktop nav-row */
    #header .hide-for-medium,
    #header [data-show="hide-for-medium"] {
        display: none !important;
    }

    /* ---- Logo position ---------------------------------------------------
     * Standard Flatsome regler: .medium-logo-center kicks in <850px.
     * Vi gentager reglerne så logo bliver i centrum op til 1099px. */
    #header .medium-logo-center .flex-left {
        flex: 1 1 0;
        order: 1;
    }
    #header .medium-logo-center .logo {
        margin: 0 15px;
        order: 2;
        text-align: center;
    }
    #header .medium-logo-center .logo img {
        margin: 0 auto;
    }
    #header .medium-logo-center .flex-right {
        flex: 1 1 0;
        order: 3;
    }

    #header .medium-logo-left .logo {
        margin-left: 0;
        margin-right: 15px;
        order: 1;
    }
    #header .medium-logo-left .flex-left {
        flex: 1 1 0;
        order: 2;
    }
    #header .medium-logo-left .flex-right {
        flex: 1 1 0;
        order: 3;
    }

    /* ---- Header-inner layout --------------------------------------------
     * Mobile mode bruger nowrap så elementer ikke wrappes til ny linje. */
    #header .header-inner .nav {
        flex-wrap: nowrap;
    }

    /* ---- Flex-wrap & row-reverse ---------------------------------------- */
    .medium-flex-wrap {
        flex-flow: column wrap;
    }
    .medium-flex-wrap .flex-col {
        flex-grow: 0;
        padding-bottom: 5px;
        padding-top: 5px;
        width: 100%;
    }
    .medium-text-center .flex-row {
        justify-content: center;
    }
    .medium-nav-center {
        justify-content: center;
    }
    .medium-row-reverse {
        flex-direction: row-reverse;
    }
    .medium-text-center .pull-left,
    .medium-text-center .pull-right {
        float: none;
    }

    /* ---- Cookie banner stacker (også et header-area element) ------------ */
    .flatsome-cookies__inner {
        align-items: stretch;
        flex-direction: column;
        font-size: 0.9em;
        text-align: center;
    }
    .flatsome-cookies__buttons {
        margin-top: 15px;
    }

}