/* ============================================================
   TrotsPellissier Header System — Public Styles
   CSS variables are injected via wp_head (class-tp-header-public.php)
   ============================================================ */

/* ── Variable defaults (overridden by PHP-generated :root block) ── */
:root {
    --tph-primary:        #1a3c5e;
    --tph-primary-dark:   #0f2640;
    --tph-primary-light:  #f0f6ff;
    --tph-primary-border: #c5d8f0;
    --tph-primary-text:   #ffffff;
    --tph-bg:             #ffffff;
    --tph-text:           #1a3c5e;
    --tph-hover:          #0f2640;
    --tph-border:         #e5e7eb;
    --tph-height:         80px;
    --tph-mobile-height:  60px;
    --tph-padding:        40px;
    --tph-font-size:      15px;
    --tph-font-weight:    600;
    --tph-letter-spacing: 0px;
    --tph-logo-w:         160px;
    --tph-logo-h:         auto;
    --tph-topbar-bg:      #1a3c5e;
    --tph-topbar-text:    #ffffff;
}

/* ── Base header shell ── */
.tp-header {
    position: relative;
    width: 100%;
    background: var(--tph-bg);
    z-index: 1000;
    box-sizing: border-box;
}

.tp-has-border { border-bottom: 1px solid var(--tph-border); }
.tp-has-shadow { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }

/* Inner container */
.tp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--tph-height);
    padding: 0 var(--tph-padding);
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    gap: 24px;
}

/* ── Layout modifiers ── */

/* Layout 2: Logo Left · Nav Center */
.tp-inner-flex { justify-content: flex-start; }
.tp-inner-flex .tp-nav-centered {
    flex: 1;
    display: flex;
    justify-content: center;
}
.tp-inner-flex .tp-header-extras { margin-left: auto; }

/* Layout 3: Logo Center · Nav Below */
.tp-layout-logo-center-nav-below .tp-header-inner {
    flex-direction: column;
    height: auto;
    padding-bottom: 0;
    gap: 0;
}
.tp-header-row {
    width: 100%;
}
.tp-row-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--tph-padding);
    height: calc(var(--tph-height) * 0.6);
    position: relative;
}
.tp-row-logo .tp-mobile-toggle {
    position: absolute;
    right: var(--tph-padding);
    top: 50%;
    transform: translateY(-50%);
}
.tp-row-nav {
    background: var(--tph-primary);
    width: 100%;
}
.tp-row-nav .tp-header-inner {
    justify-content: center;
    height: calc(var(--tph-height) * 0.5);
    padding: 0 var(--tph-padding);
}
.tp-row-nav .tp-nav .tp-menu > li > a {
    color: var(--tph-primary-text) !important;
}
.tp-row-nav .tp-nav .tp-menu > li > a:hover,
.tp-row-nav .tp-nav .tp-menu > li.current-menu-item > a {
    color: rgba(255,255,255,0.75) !important;
}
.tp-inner-center {
    justify-content: center;
}

/* Layout 4: Split Nav */
.tp-inner-split {
    justify-content: center;
    gap: 32px;
}
.tp-inner-split .tp-nav-left,
.tp-inner-split .tp-nav-right {
    flex: 1;
}
.tp-inner-split .tp-nav-left .tp-menu { justify-content: flex-end; }
.tp-inner-split .tp-nav-right .tp-menu { justify-content: flex-start; }
.tp-inner-split .tp-logo { flex-shrink: 0; }

/* Layout 5: Centered Stack */
.tp-inner-stack {
    flex-direction: column;
    height: auto;
    padding-top: 16px;
    padding-bottom: 12px;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.tp-inner-stack .tp-mobile-toggle {
    position: absolute;
    right: var(--tph-padding);
    top: 16px;
}

/* Layout 6: Nav Left · Logo Right */
.tp-inner-reverse {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0;
}
.tp-inner-reverse .tp-nav { margin-left: auto; margin-right: auto; }
.tp-inner-reverse .tp-logo { order: 3; }

/* Layout 8: Full-Width Nav Bar */
.tp-layout-fullwidth-bar {
    background: var(--tph-primary);
}
.tp-layout-fullwidth-bar .tp-header-inner { max-width: 100%; }
.tp-layout-fullwidth-bar .tp-logo { color: var(--tph-primary-text); }
.tp-layout-fullwidth-bar .tp-logo-name { color: var(--tph-primary-text); }
.tp-inner-fullwidth { max-width: 100% !important; }
.tp-nav-fullwidth .tp-menu > li > a {
    color: var(--tph-primary-text) !important;
}
.tp-nav-fullwidth .tp-menu > li > a:hover,
.tp-nav-fullwidth .tp-menu > li.current-menu-item > a {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}

/* ── Top Bar ── */
.tp-topbar {
    background: var(--tph-topbar-bg);
    color: var(--tph-topbar-text);
    font-size: 13px;
    padding: 6px 0;
}
.tp-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--tph-padding);
}
.tp-topbar a {
    color: var(--tph-topbar-text);
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.15s;
}
.tp-topbar a:hover { opacity: 1; }

/* ── Logo ── */
.tp-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    color: var(--tph-text);
    transition: opacity 0.2s;
}
.tp-logo:hover { opacity: 0.85; }

.tp-logo-img {
    max-width: var(--tph-logo-w);
    max-height: var(--tph-logo-h);
    width: auto;
    height: auto;
    display: block;
}

/* Sticky logo swap */
.tp-logo-sticky { display: none; }
.tp-header.tp-is-sticky .tp-logo-primary { display: none; }
.tp-header.tp-is-sticky .tp-logo-sticky  { display: block; }

.tp-logo-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tp-logo-name {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    color: var(--tph-primary);
    line-height: 1.1;
    letter-spacing: -0.3px;
    white-space: nowrap;
}
.tp-logo-tagline {
    font-size: 11px;
    color: var(--tph-text);
    opacity: 0.65;
    white-space: nowrap;
}

/* ── Desktop Navigation ── */
.tp-nav { display: flex; align-items: center; }

.tp-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.tp-menu > li {
    position: relative;
}

.tp-menu > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    height: var(--tph-height);
    font-size: var(--tph-font-size);
    font-weight: var(--tph-font-weight);
    letter-spacing: var(--tph-letter-spacing);
    color: var(--tph-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
    position: relative;
}

/* Current item */
.tp-menu > li.current-menu-item > a,
.tp-menu > li.current-menu-ancestor > a {
    color: var(--tph-primary);
}

/* Hover styles */
/* underline */
.tp-hover-underline .tp-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--tph-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.tp-hover-underline .tp-menu > li > a:hover::after,
.tp-hover-underline .tp-menu > li.current-menu-item > a::after,
.tp-hover-underline .tp-menu > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}
.tp-hover-underline .tp-menu > li > a:hover { color: var(--tph-hover); }

/* background fill */
.tp-hover-background .tp-menu > li > a:hover,
.tp-hover-background .tp-menu > li.current-menu-item > a {
    background: var(--tph-primary-light);
    color: var(--tph-primary);
}

/* border-top */
.tp-hover-border-top .tp-menu > li > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tph-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.tp-hover-border-top .tp-menu > li > a:hover::before,
.tp-hover-border-top .tp-menu > li.current-menu-item > a::before {
    transform: scaleX(1);
}
.tp-hover-border-top .tp-menu > li > a:hover { color: var(--tph-hover); }

/* none */
.tp-hover-none .tp-menu > li > a:hover,
.tp-hover-none .tp-menu > li.current-menu-item > a {
    color: var(--tph-hover);
}

/* Dropdown arrow */
.tp-dropdown-arrow {
    font-size: 8px;
    transition: transform 0.2s;
    opacity: 0.6;
    margin-left: 2px;
}
.tp-has-dropdown:hover > a .tp-dropdown-arrow,
.tp-has-dropdown.tp-open > a .tp-dropdown-arrow {
    transform: rotate(180deg);
}

/* ── Dropdown sub-menus ── */
.tp-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--tph-border);
    border-top: 3px solid var(--tph-primary);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    z-index: 200;

    /* Dropdown animation states */
    pointer-events: none;
}

/* Fade */
.tp-dropdown-fade .tp-menu .sub-menu {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.tp-dropdown-fade .tp-menu .tp-has-dropdown:hover > .sub-menu {
    opacity: 1;
    pointer-events: auto;
}

/* Slide */
.tp-dropdown-slide .tp-menu .sub-menu {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.tp-dropdown-slide .tp-menu .tp-has-dropdown:hover > .sub-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Shift */
.tp-dropdown-shift .tp-menu .sub-menu {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.tp-dropdown-shift .tp-menu .tp-has-dropdown:hover > .sub-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tp-menu .sub-menu li { position: relative; }
.tp-menu .sub-menu li a {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.tp-menu .sub-menu li a:hover {
    background: var(--tph-primary-light);
    color: var(--tph-primary);
}
/* Nested dropdown */
.tp-sub-dropdown {
    top: 0;
    left: 100%;
}
/* Mobile sub-toggle hidden on desktop */
.tp-sub-toggle { display: none; }

/* ── Extras (search, CTA) ── */
.tp-header-extras {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.tp-cta-btn {
    display: inline-block;
    padding: 9px 20px;
    background: var(--tph-primary);
    color: var(--tph-primary-text);
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.tp-cta-btn:hover { background: var(--tph-primary-dark); }

/* Search */
.tp-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tph-text);
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.tp-search-toggle:hover { color: var(--tph-primary); background: var(--tph-primary-light); }

.tp-search-bar {
    position: absolute;
    top: 100%;
    right: var(--tph-padding);
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid var(--tph-border);
    border-top: 3px solid var(--tph-primary);
    border-radius: 0 0 6px 6px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 300;
    /* hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s;
}
.tp-search-bar.tp-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.tp-search-bar form {
    display: flex;
    gap: 8px;
}
.tp-search-bar input[type="search"] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--tph-border);
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.tp-search-bar input[type="search"]:focus {
    border-color: var(--tph-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tph-primary) 15%, transparent);
}
.tp-search-bar button[type="submit"] {
    background: var(--tph-primary);
    color: var(--tph-primary-text);
    border: none;
    border-radius: 4px;
    padding: 9px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.tp-search-bar button[type="submit"]:hover { background: var(--tph-primary-dark); }

/* ── Sticky behaviours ── */
.tp-sticky-always,
.tp-sticky-scroll-up,
.tp-sticky-shrink {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Sticky — always: just fix it */
/* No extra rule needed beyond position:fixed */

/* Sticky — scroll-up: hidden until scroll-up */
.tp-sticky-scroll-up {
    transform: translateY(-100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tp-sticky-scroll-up.tp-is-visible {
    transform: translateY(0);
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}

/* Sticky — shrink on scroll */
.tp-sticky-shrink {
    transition: height 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.tp-sticky-shrink.tp-is-sticky {
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}
.tp-sticky-shrink.tp-is-sticky .tp-header-inner {
    height: calc(var(--tph-height) * 0.7);
    transition: height 0.3s ease;
}

/* Placeholder prevents content jump */
.tp-header-placeholder {
    pointer-events: none;
    visibility: hidden;
    height: var(--tph-height);
}

/* ── Mobile toggle button ── */
.tp-mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--tph-text);
    flex-shrink: 0;
}
.tp-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}
.tp-hamburger span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
    transform-origin: center;
}
/* Open state */
.tp-mobile-toggle[aria-expanded="true"] .tp-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.tp-mobile-toggle[aria-expanded="true"] .tp-hamburger span:nth-child(2) {
    opacity: 0;
}
.tp-mobile-toggle[aria-expanded="true"] .tp-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile panel base ── */
.tp-mobile-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: #fff;
    z-index: 1100;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
}

.tp-mobile-menu-inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.tp-mobile-close {
    background: none;
    border: none;
    cursor: pointer;
    align-self: flex-end;
    padding: 8px;
    color: #555;
    margin-bottom: 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.tp-mobile-close:hover { background: #f0f0f0; }

/* Overlay */
.tp-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.tp-mobile-overlay.tp-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Mobile panel — Slide from Right (default) ── */
.tp-mobile-style-slide-right .tp-mobile-menu {
    right: 0;
    left: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.tp-mobile-style-slide-right .tp-mobile-menu.tp-open {
    transform: translateX(0);
}

/* ── Mobile panel — Slide from Left ── */
.tp-mobile-style-slide-left .tp-mobile-menu {
    left: 0;
    right: auto;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.tp-mobile-style-slide-left .tp-mobile-menu.tp-open {
    transform: translateX(0);
}

/* ── Mobile panel — Fullscreen overlay ── */
.tp-mobile-style-fullscreen .tp-mobile-menu {
    width: 100%;
    max-width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.tp-mobile-style-fullscreen .tp-mobile-menu.tp-open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.tp-mobile-style-fullscreen .tp-mobile-menu-inner {
    width: 100%;
    align-items: center;
}
.tp-mobile-style-fullscreen .tp-mobile-overlay {
    display: none;
}
.tp-mobile-style-fullscreen .tp-mobile-menu-list > li > a {
    font-size: 22px !important;
    padding: 14px 20px !important;
    justify-content: center;
}
.tp-mobile-style-fullscreen .tp-mobile-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
}

/* ── Mobile panel — Dropdown (below header) ── */
.tp-mobile-style-dropdown .tp-mobile-menu {
    position: absolute;
    top: var(--tph-mobile-height);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-top: 1px solid var(--tph-border);
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.tp-mobile-style-dropdown .tp-mobile-menu.tp-open {
    max-height: 80vh;
    overflow-y: auto;
}
.tp-mobile-style-dropdown .tp-mobile-overlay { display: none; }
.tp-mobile-style-dropdown .tp-mobile-close   { display: none; }

/* ── Mobile navigation list ── */
.tp-mobile-nav { margin-top: 8px; }

.tp-mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-mobile-menu-list li { border-bottom: 1px solid #f0f0f0; }
.tp-mobile-menu-list li:last-child { border-bottom: none; }

.tp-mobile-menu-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tph-text);
    text-decoration: none;
    transition: color 0.15s;
}
.tp-mobile-menu-list li a:hover,
.tp-mobile-menu-list li.current-menu-item > a {
    color: var(--tph-primary);
}

/* Sub-menu toggle in mobile */
.tp-sub-toggle {
    background: none;
    border: 1px solid var(--tph-border);
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    color: var(--tph-text);
    position: relative;
}
.tp-sub-toggle span {
    position: absolute;
    width: 12px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s;
}
.tp-sub-toggle span::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 12px;
    background: currentColor;
    top: -5px;
    left: 5px;
    border-radius: 2px;
    transition: transform 0.2s;
}
.tp-sub-toggle[aria-expanded="true"] span::after {
    transform: rotate(90deg);
}
.tp-sub-toggle:hover {
    background: var(--tph-primary-light);
    border-color: var(--tph-primary);
    color: var(--tph-primary);
}

/* Mobile sub-menus */
.tp-mobile-menu-list .sub-menu {
    list-style: none;
    padding: 0 0 0 16px;
    margin: 0;
    border-top: 1px solid #f0f0f0;
    display: none;
}
.tp-mobile-menu-list .sub-menu.tp-open { display: block; }
.tp-mobile-menu-list .sub-menu li a {
    font-size: 13px;
    font-weight: 400;
    padding: 10px 8px;
}

/* CTA in mobile menu */
.tp-mobile-cta {
    margin-top: auto;
    padding-top: 20px;
}
.tp-mobile-cta .tp-cta-btn { width: 100%; text-align: center; }

/* ── Mobile layout variants ── */

/* Default: logo left, toggle right — handled by flex row-reverse on just the toggle */
/* toggle-left-logo-center */
.tp-mobile-toggle-left-logo-center .tp-header-inner {
    position: relative;
}
.tp-mobile-toggle-left-logo-center .tp-mobile-toggle {
    order: -1;
}
.tp-mobile-toggle-left-logo-center .tp-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* logo-center-toggle-right */
.tp-mobile-logo-center-toggle-right .tp-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* logo-left-toggle-left */
.tp-mobile-logo-left-toggle-left .tp-mobile-toggle {
    order: -1;
    margin-right: 8px;
}

/* ── Desktop hidden / Mobile only ── */
.tp-desktop-only { display: flex; }

/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile breakpoint
   (The exact value is also set via JS / CSS var)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hide desktop nav */
    .tp-header .tp-nav,
    .tp-header .tp-header-extras,
    .tp-desktop-only {
        display: none !important;
    }

    /* Show mobile toggle */
    .tp-mobile-toggle { display: flex; }

    /* Inner height for mobile */
    .tp-header-inner {
        height: var(--tph-mobile-height);
        padding: 0 16px;
    }

    /* Centered-stack: flatten to logo+toggle row on mobile */
    .tp-inner-stack { flex-direction: row; padding: 0 16px; }
    .tp-inner-stack .tp-mobile-toggle { position: static; order: 3; margin-left: auto; }

    /* Split: revert to logo + toggle */
    .tp-inner-split { gap: 0; }
    .tp-inner-split .tp-logo { order: 1; }

    /* Reverse: revert */
    .tp-inner-reverse { flex-direction: row; }

    /* Top bar: hide on mobile */
    .tp-topbar { display: none; }

    /* Placeholder */
    .tp-header-placeholder { height: var(--tph-mobile-height); }
}

/* Slightly wider override so admins can set custom breakpoints via JS-driven class */
.tp-mobile-visible .tp-header .tp-nav,
.tp-mobile-visible .tp-header .tp-header-extras { display: none !important; }
.tp-mobile-visible .tp-mobile-toggle { display: flex !important; }