/*
 * Tinkerbell v7 — tb-v7.css
 * ─────────────────────────────────────────────────────────────
 * Fixes:
 *   1. Footer background → deep purple (#3d1a6e) so white text
 *      is clearly readable on ALL devices.
 *   2. Footer pre-bar CTA background → mid-purple to match.
 *   3. Mobile CTA bar → absolute links handled by JS; no CSS change.
 *   4. All /order hrefs corrected via JS in functions.php.
 * ─────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════
   FOOTER BACKGROUND FIX
   Original: #0f0a2e (too dark — text appeared invisible on some
   monitors/phones because the text was rgba(255,255,255,.72)
   but the background rendered almost identical to rgba black).
   Fix: use a rich purple that clearly contrasts with white text.
   ═══════════════════════════════════════════════════════════ */

footer.tb-footer,
.tb-footer {
    background: #3d1a6e !important;  /* vivid deep purple */
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Pre-bar above footer — matching purple tone */
.tb-footer-cta-bar {
    background: #2e1256 !important; /* slightly darker for separation */
}

.tb-footer-cta-text {
    color: #ffffff !important;
}

.tb-footer-cta-text strong {
    color: #ffffff !important;
}

.tb-footer-cta-text span {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* Footer grid text — full brightness on purple bg */
.tb-footer-about {
    color: rgba(255, 255, 255, 0.85) !important;
}

.tb-footer-rating {
    color: rgba(255, 255, 255, 0.85) !important;
}

.tb-footer-heading {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

.tb-footer-list a {
    color: rgba(255, 255, 255, 0.80) !important;
    text-decoration: none;
}

.tb-footer-list a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

.tb-footer-contact-item {
    color: rgba(255, 255, 255, 0.80) !important;
}

.tb-footer-contact-item:hover {
    color: #ffffff !important;
}

/* Trust bar — slightly darker purple strip */
.tb-footer-trust-bar {
    background: rgba(0, 0, 0, 0.20) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.tb-footer-trust-badges span {
    color: rgba(255, 255, 255, 0.85) !important;
}

.tb-pay-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Bottom copyright bar */
.tb-footer-bottom {
    background: rgba(0, 0, 0, 0.28) !important;
}

.tb-footer-copy {
    color: rgba(255, 255, 255, 0.78) !important;
}

.tb-footer-copy span {
    color: rgba(255, 255, 255, 0.65) !important;
}

.tb-footer-legal-links a {
    color: rgba(255, 255, 255, 0.72) !important;
}

.tb-footer-legal-links a:hover {
    color: #ffffff !important;
}

/* Discount badge — amber pop on purple */
.tb-footer-disc {
    color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(245, 166, 35, 0.22) !important;
    border-color: rgba(245, 166, 35, 0.45) !important;
}

.tb-disc-code {
    color: #fbbf24 !important;
}

/* Social icon circles */
.tb-soc-link {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

.tb-soc-link:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

/* Brand name text link */
.tb-footer-brand-name {
    color: #ffffff !important;
}

/* Stars stay gold */
.tb-footer-stars {
    color: #f5a623 !important;
}

/* ═══════════════════════════════════════════════════════════
   TAG & CATEGORY SIDEBAR — POSITIONING FIX
   align-self:stretch ensures aside fills full grid row height
   so the JS sticky script has a valid container offsetHeight
   to calculate against. Without this the sidebar collapses
   to its own content height and the sticky maths breaks,
   causing overlap / out-of-position appearance on tag pages.
   ═══════════════════════════════════════════════════════════ */

.tb-archive-wrap .tb-sidebar {
    align-self: stretch;   /* override "start" — fill grid row */
    position: relative;    /* containing block for sticky JS */
}

/* Constrain the inner sticky wrapper so it doesn't overflow
   the aside when the sidebar content is taller than the main
   column on short pages */
@media (min-width: 1025px) {
    .tb-archive-wrap .tb-sidebar-sticky {
        position: sticky;
        top: 85px;
        max-height: calc(100vh - 97px);
        overflow-y: auto;
        /* Scrollbar styling — subtle, non-intrusive */
        scrollbar-width: thin;
        scrollbar-color: rgba(104,87,208,.25) transparent;
    }
    .tb-archive-wrap .tb-sidebar-sticky::-webkit-scrollbar {
        width: 4px;
    }
    .tb-archive-wrap .tb-sidebar-sticky::-webkit-scrollbar-thumb {
        background: rgba(104,87,208,.30);
        border-radius: 4px;
    }
}

/* Mobile — stack sidebar below main as full width */
@media (max-width: 1024px) {
    .tb-archive-wrap .tb-sidebar {
        align-self: auto;
    }
}



@media (max-width: 640px) {
    .tb-footer {
        background: #3d1a6e !important;
    }

    /* Ensure bottom bar stays dark on mobile */
    .tb-footer-bottom {
        background: rgba(0, 0, 0, 0.30) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE HEADER — prevent menu items overflow / ensure
   hamburger opens cleanly without content spilling
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Header: prevent overflow from long menu items */
    header,
    .header_wrapper,
    .header_inner {
        overflow: hidden;
        max-width: 100vw;
    }

    /* Mobile nav container — full-width slide-in panel */
    .menu_wrapper,
    #nav,
    .nav-menu {
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    /* Ensure header order button is not clipped on small screens */
    .order_button {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.75rem !important;
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE CTA BAR — use absolute dashboard URL so it
   never needs a redirect hop on mobile
   ═══════════════════════════════════════════════════════════ */

/* No CSS needed — href is fixed by JS injection redirect in functions.php */

/* ═══════════════════════════════════════════════════════════
   GLOBAL FONT & PADDING UNITY (desktop = mobile)
   Prevent font-size jumping between breakpoints
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Body text baseline — same as desktop */
    body {
        font-size: 1rem;
        line-height: 1.65;
    }

    /* Headings scale down gently, not abruptly */
    h1 { font-size: clamp(1.4rem, 5vw, 2.2rem) !important; }
    h2 { font-size: clamp(1.2rem, 4.5vw, 1.75rem) !important; }
    h3 { font-size: clamp(1rem, 4vw, 1.35rem) !important; }

    /* Prevent padded sections from double-padding on mobile */
    section,
    .tb-section {
        box-sizing: border-box;
    }
}

/* ═══════════════════════════════════════════════════════════
   CHAT WIDGET (Tawk.to) — keep above mobile CTA bar
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #tawkchat-minified-box,
    .tawk-min-container,
    .tawk-mobile,
    [id*="tawkchat"],
    [class*="tawk-"] {
        bottom: 72px !important;
        z-index: 8999 !important;
    }

    .tb-whatsapp-float {
        bottom: 76px !important;
        z-index: 8998 !important;
    }
}