/*
 * UI Sync Layer v4.3.14 — Phase 5.12.2 Header Responsive Layout + Mobile Fixes
 */

:root {
    --tgl-ref-navy: var(--tgl-navy, #001B44);
    --tgl-ref-navy-light: #082B63;
    --tgl-ref-gold: var(--tgl-gold, #F2A900);
    --tgl-ref-white: var(--tgl-footer-bg, #FFFFFF);
    --tgl-ref-border: rgba(0, 0, 0, 0.08);
}

/* Global Zero Padding Rule (Maintained from v4.3.7) */
.tgl-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* Helper Classes */
.tgl-desktop-only { display: block; }
.tgl-mobile-only { display: none; }

@media (max-width: 768px) {
    .tgl-desktop-only { display: none !important; }
    .tgl-mobile-only { display: block !important; }
}

/* HEADER STRUCTURE */
.tgl-header--premium {
    background: var(--tgl-ref-white);
    border: none;
    box-shadow: none;
}

/* LEVEL A: UTILITY BAR */
.tgl-topbar {
    background: var(--tgc-topbar-bg, #001B44) !important;
    color: var(--tgc-topbar-text, #FFFFFF) !important;
    padding: 6px 0;
    font-size: 0.7rem;
    font-weight: 500;
}
.tgl-topbar__row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 15px !important;
}
.tgl-topbar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}
.tgl-topbar-menu a {
    color: var(--tgc-topbar-text, #FFFFFF) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
    transition: opacity 0.2s;
}
.tgl-topbar-menu a:hover { opacity: 1; }

/* LEVEL B: BRANDING ROW (WHITE) */
.tgl-branding-row {
    background: var(--tgl-header-row-bg, #FFFFFF) !important;
    padding: 15px 0;
    border-bottom: 0;
}
.tgl-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px !important;
    gap: 30px;
}

/* Desktop Branding: Left Aligned */
.tgl-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}
.tgl-brand-logo img {
    height: 60px;
    width: auto;
}
.tgl-brand-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.tgl-brand-name {
    color: var(--tgl-header-row-text, var(--tgl-navy)) !important;
    font-family: serif;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
}
.tgl-brand-subtitle {
    color: var(--tgl-ref-gold);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Desktop Search: Long Horizontal Field */
.tgl-header-search-desktop {
    flex: 1;
    max-width: 600px;
}
.tgl-searchform-desktop {
    display: flex;
    width: 100%;
}
.tgl-searchform-desktop input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--tgl-ref-border);
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 0.9rem;
    outline: none;
}
.tgl-searchform-desktop button {
    background: var(--tgl-navy, #001B44) !important;
    color: var(--tgl-ref-white, #FFFFFF) !important;
    border: none;
    padding: 10px 20px;
    border-radius: 0 4px 4px 0;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.tgl-searchform-desktop button:hover,
.tgl-searchform-desktop button:focus {
    background: var(--tgl-gold, #F2A900) !important;
}
.tgl-searchform-desktop input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--tgl-ref-border);
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 0.9rem;
    outline: none;
}
.tgl-searchform-desktop button {
    background: var(--tgl-navy, #001B44) !important;
    color: var(--tgl-ref-white, #FFFFFF) !important;
    border: none;
    padding: 10px 20px;
    border-radius: 0 4px 4px 0;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.tgl-searchform-desktop button:hover {
    background: var(--tgl-ref-navy-light);
}

/* LEVEL C: PRIMARY NAVIGATION (DARK NAVY) */
.tgl-navbar {
    background-color: transparent !important;
    padding: 0;
    width: 100%;
    display: block;
    position: relative;
    z-index: 10;
}
/* Navigation container-width background architecture */
header.tgl-header--premium nav#tgl-primary-nav {
    background: transparent !important;
}
.tgl-navbar .tgl-container, .tgl-navbar .tgl-container-inner {
    background: var(--tgl-nav-bg, #001B44) !important;
}
.tgl-navbar-list {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--tgl-nav-bg, #001B44) !important;
    border: none !important;
}
.tgl-navbar-list li {
    margin: 0;
    padding: 0;
    background: transparent !important;
}
.tgl-navbar-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    color: var(--tgl-nav-text, #FFFFFF) !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s;
    background: transparent !important;
    border: none !important;
}
.tgl-navbar-list li a:hover,
.tgl-navbar-list li a:focus,
.tgl-navbar-list li a:active {
    color: var(--tgl-gold, #F2A900) !important;
    background: rgba(255,255,255,0.1) !important;
}
.tgl-nav-icon {
    color: var(--tgl-nav-text, #FFFFFF) !important;
}
.tgl-navbar-list li a:hover .tgl-nav-icon,
.tgl-navbar-list li a:focus .tgl-nav-icon {
    color: var(--tgl-gold, #F2A900) !important;
}

/* ACTIVE HOME STATE */
.tgl-navbar-list li.current-menu-item > a,
.tgl-navbar-list li.current_page_item > a {
    color: var(--tgl-gold, #F2A900) !important;
    position: relative;
    background: transparent !important;
}
.tgl-navbar-list li.current-menu-item > a::after,
.tgl-navbar-list li.current_page_item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 3px;
    background: var(--tgl-gold, #F2A900) !important;
}
.tgl-navbar-list li.current-menu-item > a .tgl-nav-icon,
.tgl-navbar-list li.current_page_item > a .tgl-nav-icon {
    color: var(--tgl-gold, #F2A900) !important;
}


/* MOBILE HEADER OVERRIDES */
@media (max-width: 768px) {
    .tgl-branding-row {
        padding: 10px 0;
    }
    .tgl-header-row {
        justify-content: space-between;
        gap: 10px;
    }
    
    .tgl-brand {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2px;
        flex: 1;
    }
    .tgl-brand-logo img {
        height: 40px;
    }
    .tgl-brand-text {
        text-align: center;
    }
    .tgl-brand-name {
        font-size: 1.3rem;
    }
    .tgl-brand-subtitle {
        font-size: 0.65rem;
    }

    /* Mobile Controls Visibility Fixes */
    .tgl-menu-toggle, .tgl-search-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent !important;
        border: none !important;
        color: var(--tgl-navy, #001B44) !important;
        cursor: pointer;
        padding: 0;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .tgl-search-toggle {
        font-size: 1rem !important;
    }
    .tgl-menu-toggle {
        font-size: 1rem !important;
    }

    /* Ensure mobile drawer/panel colors respect Customizer */
    .tgl-navbar, .tgl-navbar.tgl-mobile-nav-active {
        background-color: var(--tgl-nav-bg, #001B44) !important;
    }
    .tgl-navbar a {
        color: var(--tgl-nav-text, #FFFFFF) !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    .tgl-navbar a:hover, .tgl-navbar a:focus, .tgl-navbar a:active {
        color: var(--tgl-gold, #F2A900) !important;
        background: rgba(255,255,255,0.1) !important;
    }

    .tgl-header-mobile-toggle { order: 1; }
    .tgl-brand { order: 2; }
    .tgl-header-search-toggle { order: 3; }
}

/* IMAGE SUPPRESSION (From v4.3.7) */
body:not(.admin-bar) .tgl-card-thumb,
body:not(.admin-bar) .tgl-post-thumbnail,
body:not(.admin-bar) .attachment-post-thumbnail,
body:not(.admin-bar) .wp-post-image,
body:not(.admin-bar) img.wp-post-image,
body:not(.admin-bar) .tgl-post-image-wrap,
body:not(.admin-bar) .tgl-discovery-item__thumb,
body:not(.admin-bar) .tgl-discovery-item__image {
    display: none !important;
}

/* SECTION HEADINGS (From v4.3.7) */
.tgl-section-heading h2 {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: var(--tgl-ref-navy);
    font-weight: 800;
}
.tgl-section-heading h2::before,
.tgl-section-heading h2::after {
    content: "";
    flex: 1;
    border-bottom: 2px solid var(--tgl-gold, #F2A900); display: inline-block;
    margin: 0 20px;
}

/* FOOTER VISUAL RECONCILIATION v4.3.15 — PHASE 5.13.12 */
.tgl-footer--premium {
    background: var(--tgl-footer-bg, #FFFFFF) !important;
    color: var(--tgl-footer-text, #444444) !important;
    padding: 60px 0 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
}

.tgl-footer--premium .tgl-footer-main-content.tgl-container {
    background: var(--tgl-footer-sub-bg, #FFFFFF) !important;
}

.tgl-footer--premium .tgl-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.tgl-footer__top-ad {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--tgl-footer-border, #E5E7EB);
    background: var(--tgl-footer-bg, #FFFFFF) !important;
}
.tgl-footer-ad-inner {
    padding-left: 15px;
    padding-right: 15px;
}

.tgl-footer__grid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    padding-bottom: 40px;
}

@media (max-width: 1024px) {
    .tgl-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .tgl-footer__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .tgl-footer-col--brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tgl-footer__about {
        margin-left: auto;
        margin-right: auto;
    }
}

.tgl-footer--premium h4 {
    color: var(--tgl-footer-heading, #001B44) !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin: 0 0 20px !important;
    border-bottom: 2px solid var(--tgl-gold, #F2A900) !important;
    padding-bottom: 10px !important;
    display: inline-block;
}

.tgl-footer--premium ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tgl-footer--premium a {
    color: var(--tgl-footer-link, #0A3A8A) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    transition: color 0.2s !important;
}

.tgl-footer--premium a:hover,
.tgl-footer--premium a:focus,
.tgl-footer--premium a:active {
    color: var(--tgl-footer-link-hover, #F2A900) !important;
}

.tgl-footer__brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.tgl-footer-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--tgl-footer-title, #001B44) !important;
}

.tgl-footer__about {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--tgl-footer-text, #444444);
    margin-bottom: 25px;
    max-width: 400px;
}

.tgl-social-follow-section {
    margin-top: 20px;
}

.tgl-social-follow-section h4 {
    margin-bottom: 15px !important;
}

.tgl-socials {
    display: flex;
    gap: 12px;
}

.tgl-socials a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tgl-social-bg, transparent);
    border: 1px solid var(--tgl-social-border, transparent);
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Original brand colours — DEFAULT ONLY.
   These are the shipped defaults. When a Social Icon colour is configured in the
   Customizer, functions.php emits `.tgl-socials a[data-net]` rules AFTER this
   stylesheet (wp_head priority 99) with equal !important weight, so the
   configured colour wins on source order. */
.tgl-socials a[data-net="facebook"] { color: #1877F2 !important; }
.tgl-socials a[data-net="instagram"] { color: #E4405F !important; }
.tgl-socials a[data-net="telegram"] { color: #229ED9 !important; }
.tgl-socials a[data-net="whatsapp"] { color: #25D366 !important; }
.tgl-socials a[data-net="pinterest"] { color: #E60023 !important; }
.tgl-socials a[data-net="youtube"] { color: #FF0000 !important; }

.tgl-socials a svg,
.tgl-socials a svg path { fill: currentColor; }

.tgl-socials a:hover,
.tgl-socials a:focus,
.tgl-socials a:active {
    transform: translateY(-4px);
}

.tgl-socials svg {
    width: 26px;
    height: 26px;
}

/* ==========================================================================
   AUTO ADS — guaranteed vertical breathing room
   Google Auto Ads inject markup directly into the content flow and can visually
   collide with the paragraph above/below. These rules reserve spacing so an
   injected unit can never sit flush against text.
   ========================================================================== */
.google-auto-placed,
ins.adsbygoogle,
ins.adsbygoogle[data-anchor-status],
div[id^="google_ads_iframe"],
.tgl-content .google-auto-placed,
.tgl-content ins.adsbygoogle {
    display: block !important;
    clear: both !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    float: none !important;
}

@media (max-width: 767px) {
    .google-auto-placed,
    ins.adsbygoogle,
    .tgl-content .google-auto-placed,
    .tgl-content ins.adsbygoogle {
        margin-top: 18px !important;
        margin-bottom: 18px !important;
    }
}

/* Anchor / overlay formats must not receive flow margins */
ins.adsbygoogle[data-anchor-shown],
ins.adsbygoogle[data-vignette-loaded],
.tgl-anchor-ad ins.adsbygoogle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.tgl-footer-bottom {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    border-top: none !important;
}

.tgl-footer-bottom .tgl-container {
    background: var(--tgl-footer-copy-bg, #001B44) !important;
    padding: 20px 15px !important;
    text-align: center;
}

.tgl-footer-bottom p,
.tgl-footer-bottom span {
    color: var(--tgl-footer-copy-text, #FFFFFF) !important;
    font-size: 0.85rem;
    margin: 0;
}

.tgl-footer-bottom a {
    color: var(--tgl-footer-copy-link, #FFFFFF) !important;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s;
}

.tgl-footer-bottom a:hover,
.tgl-footer-bottom a:focus,
.tgl-footer-bottom a:active {
    color: var(--tgl-footer-copy-hover, #F2A900) !important;
}

/* Explicit specificity for copyright links to prevent leakage */
footer.tgl-footer--premium .tgl-footer-bottom a.tgl-copy-link,
footer.tgl-footer--premium .tgl-footer-bottom .tgl-container a {
    color: var(--tgl-footer-copy-link, #FFFFFF) !important;
}

footer.tgl-footer--premium .tgl-footer-bottom .tgl-container a:hover,
footer.tgl-footer--premium .tgl-footer-bottom .tgl-container a:focus,
footer.tgl-footer--premium .tgl-footer-bottom .tgl-container a:active {
    color: var(--tgl-footer-copy-link-hover, var(--tgl-footer-copy-hover, #F2A900)) !important;
}

.tgl-footer-bottom .tgl-container {
    background: var(--tgl-footer-copy-bg, #001B44) !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.tgl-footer-bottom p {
    color: var(--tgl-footer-copy-text, #FFFFFF) !important;
    margin: 0 !important;
}

.tgl-footer-bottom a {
    color: var(--tgl-footer-copy-link, #FFFFFF) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.tgl-footer-bottom a:hover,
.tgl-footer-bottom a:focus {
    color: var(--tgl-footer-copy-hover, #F2A900) !important;
}

.tgl-footer-discovery,
.tgl-footer-links {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--tgl-footer-border, #E5E7EB);
}

.tgl-footer-discovery h4,
.tgl-footer-links h4 {
    color: var(--tgl-footer-heading, #001B44) !important;
    border-bottom: none !important;
}

.tgl-footer-chips a {
    border: 1px solid var(--tgl-footer-border, #E5E7EB) !important;
    color: var(--tgl-footer-chip-text, #001B44) !important;
    background: var(--tgl-footer-chip-bg, #F4F6FB) !important;
}

.tgl-footer-chips a:hover,
.tgl-footer-chips a:focus {
    background: var(--tgl-footer-chip-hbg, #001B44) !important;
    border-color: var(--tgl-footer-chip-hbg, #001B44) !important;
    color: var(--tgl-footer-chip-htext, #FFFFFF) !important;
}

/* PHASE — FOOTER CUSTOMIZER OWNERSHIP.
   The former blanket `background-color: var(--tgl-navy) !important` override on
   .tgl-footer-main-content / .tgl-footer-bottom .tgl-container was the root cause of
   Customizer footer colours being ignored. Removed. Inner wrappers stay transparent so
   the configured background layers show through; the two container surfaces are owned
   by --tgl-footer-sub-bg and --tgl-footer-copy-bg respectively (declared above). */
.tgl-footer--premium .tgl-footer__grid,
.tgl-footer--premium .tgl-footer-col,
.tgl-footer--premium .tgl-footer-discovery,
.tgl-footer--premium .tgl-footer-links {
    background-color: transparent;
}