/* ════════════════════════════════════════════════════════════════════════════
   JUNGLE HUGGER · 07-plugin-skins/consent.css
   ────────────────────────────────────────────────────────────────────────────
   Migrated at Job 5 (12 Jun 2026) from WPCode snippet 9618 (JH · CookieYes Consent Banner Skin) —
   payload verbatim, zero CSS changes. Snippet 9618 deactivates when the
   theme v1.1.0 upload is confirmed. Unlayered by design (plugin selectors).
   F21: mirror edits to 02-data/theme-source/assets/07-plugin-skins/.
   ════════════════════════════════════════════════════════════════════════════ */

/* ============================================================
       BANNER — .cky-consent-container
       Forest-deep background, full-width bottom banner layout
       ============================================================ */

    .cky-consent-container {
        background: #15291F !important; /* --forest-deep */
        border-top: 1px solid rgba(247, 245, 238, 0.14) !important; /* --border-on-dark */
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 20px 24px !important;
    }

    /* ============================================================
       PLUGIN DEFAULT BORDER RESET
       CookieYes paints a coloured border on the inner bar and modal
       panels using its configured accent. We kill those so only the
       skin's intentional border-top on .cky-consent-container shows.
       ============================================================ */

    .cky-consent-bar,
    .cky-modal,
    .cky-modal-inner {
        border: none !important;
        outline: none !important;
    }

    /* Inner layout: stack on mobile, row from 768px */
    .cky-consent-container .cky-consent-bar,
    .cky-consent-bar {
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 1280px;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    @media (min-width: 768px) {
        .cky-consent-bar {
            flex-direction: row !important;
            align-items: center !important;
            gap: 40px !important;
        }
    }

    /* ============================================================
       BANNER TEXT
       ============================================================ */

    .cky-notice-des,
    .cky-consent-bar .cky-notice-des {
        font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
        font-size: 0.875rem !important; /* --fs-sm */
        font-weight: 300 !important;
        color: #CFC9BC !important; /* --muted-on-dark */
        line-height: 1.6 !important;
        flex: 1 !important;
        margin: 0 !important;
    }

    .cky-title {
        font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        color: #F7F5EE !important; /* --text-on-dark */
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        margin-block-end: 6px !important;
    }

    /* Inline links within banner text */
    .cky-notice-des a,
    .cky-consent-bar a {
        color: #D6A275 !important; /* --gold-lt: copper fails AA at small size on forest-deep */
        border-bottom: 1px solid rgba(214, 162, 117, 0.4) !important;
        text-decoration: none !important;
        transition: color 0.15s ease, border-color 0.15s ease !important;
    }

    .cky-notice-des a:hover,
    .cky-consent-bar a:hover {
        color: #F7F5EE !important; /* --text-on-dark */
        border-bottom-color: #F7F5EE !important;
    }

    /* ============================================================
       BUTTON ROW
       Full-width on mobile, auto on 480px+
       ============================================================ */

    .cky-btn-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
    }

    @media (min-width: 480px) {
        .cky-btn-container {
            width: auto !important;
        }
    }

    /* ============================================================
       ALL BUTTONS — shared reset
       ============================================================ */

    .cky-btn {
        font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
        font-size: 0.6875rem !important; /* --fs-xs */
        font-weight: 500 !important;
        letter-spacing: 0.1em !important; /* --ls-wide */
        text-transform: uppercase !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        min-height: 44px !important;
        padding: 10px 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
        text-decoration: none !important;
    }

    @media (min-width: 480px) {
        .cky-btn {
            flex: initial !important;
        }
    }

    /* ============================================================
       ACCEPT BUTTON — copper fill
       ============================================================ */

    .cky-btn-accept {
        background: #B5714A !important; /* --copper */
        color: #F7F5EE !important; /* --text-on-dark */
        border: 1px solid transparent !important;
    }

    .cky-btn-accept:hover {
        background: #C8834E !important; /* --copper-lt */
    }

    /* ============================================================
       REJECT + CUSTOMIZE BUTTONS — transparent, muted border
       ============================================================ */

    .cky-btn-reject,
    .cky-btn-customize {
        background: transparent !important;
        color: #CFC9BC !important; /* --muted-on-dark */
        border: 1px solid rgba(247, 245, 238, 0.14) !important; /* --border-on-dark */
    }

    .cky-btn-reject:hover,
    .cky-btn-customize:hover {
        color: #F7F5EE !important; /* --text-on-dark */
        border-color: rgba(247, 245, 238, 0.5) !important;
    }

    /* ============================================================
       FOCUS RINGS — gold-lt outline on dark
       ============================================================ */

    .cky-btn:focus-visible {
        outline: 2px solid #D6A275 !important; /* --gold-lt */
        outline-offset: 2px !important;
    }

    /* ============================================================
       PREFERENCES MODAL
       bg background, Fraunces title, copper accent toggles
       ============================================================ */

    .cky-modal {
        background: #FAFAF8 !important; /* --bg */
        border-radius: 0 !important;
        box-shadow: 0 8px 48px rgba(16, 28, 22, 0.28) !important;
        max-width: 560px !important;
        width: calc(100% - 32px) !important;
    }

    .cky-modal-inner {
        padding: 32px !important;
    }

    /* Modal title */
    .cky-modal .cky-title {
        font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
        font-size: 1.25rem !important;
        font-weight: 300 !important;
        color: #1E3A2F !important; /* --forest */
        letter-spacing: -0.01em !important;
        text-transform: none !important;
    }

    /* Privacy overview text */
    .cky-preference-content-desc {
        font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
        font-size: 0.875rem !important;
        color: #5A5A52 !important; /* --muted */
        line-height: 1.6 !important;
    }

    /* ============================================================
       ACCORDION ROWS — cookie categories
       ============================================================ */

    .cky-accordion-item {
        border-bottom: 1px solid #EDEAE3 !important; /* --border-soft */
    }

    .cky-accordion-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 56px !important;
        padding-block: 14px !important;
        cursor: pointer !important;
    }

    .cky-accordion-header .cky-accordion-btn-wrapper {
        font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
        font-size: 0.875rem !important;
        font-weight: 400 !important;
        color: #1E3A2F !important; /* --forest */
    }

    .cky-accordion-body {
        font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
        font-size: 0.8125rem !important;
        color: #5A5A52 !important; /* --muted */
        line-height: 1.6 !important;
        padding-bottom: 14px !important;
    }

    /* ============================================================
       TOGGLE SWITCHES — copper accent via accent-color
       No custom track CSS needed if accent-color is set on body,
       but we set it here as a scoped fallback for safety.
       ============================================================ */

    .cky-switch input[type="checkbox"] {
        accent-color: #8B4F2C !important; /* --copper-deep */
        width: 44px !important;
        height: 24px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    /* ============================================================
       MODAL FOOTER BUTTONS
       Save preferences = forest primary, Accept all = secondary
       ============================================================ */

    .cky-footer-shadow .cky-btn {
        min-height: 44px !important;
    }

    /* "Save my preferences" / detail accept */
    button[data-cky-tag="detail-accept-button"],
    button[data-cky-tag="save-button"] {
        background: #1E3A2F !important; /* --forest */
        color: #F7F5EE !important;
        border: 1px solid transparent !important;
    }

    button[data-cky-tag="detail-accept-button"]:hover,
    button[data-cky-tag="save-button"]:hover {
        background: #8B4F2C !important; /* --copper-deep */
    }

    /* "Reject all" inside modal */
    button[data-cky-tag="detail-reject-button"] {
        background: transparent !important;
        color: #5A5A52 !important; /* --muted */
        border: 1px solid #E0DDD6 !important; /* --border */
    }

    button[data-cky-tag="detail-reject-button"]:hover {
        color: #1E3A2F !important;
        border-color: #1E3A2F !important;
    }

    /* ============================================================
       REVISIT CONSENT FLOATING BUTTON
       Forest background, copper on hover
       ============================================================ */

    .cky-revisit-btn-wrapper button,
    .cky-revisit-btn {
        background: #1E3A2F !important; /* --forest */
        color: #F7F5EE !important;
        border-radius: 0 !important;
        border: 1px solid rgba(247, 245, 238, 0.14) !important;
        font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
        font-size: 0.6875rem !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        transition: background 0.15s ease !important;
    }

    .cky-revisit-btn-wrapper button:hover,
    .cky-revisit-btn:hover {
        background: #B5714A !important; /* --copper */
    }

    /* ============================================================
       HIDE "POWERED BY COOKIEYES" — free plan branding
       ============================================================ */

    div[data-cky-tag="powered-by"],
    div[data-cky-tag="detail-powered-by"] {
        display: none !important;
    }

    /* ============================================================
       ENTRANCE ANIMATION
       Matches jh-fade-up system: opacity 0→1, lift 12px→0
       0.3s delay gives page paint a moment to settle first
       ============================================================ */

    @keyframes cky-fade-in {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .cky-consent-container {
        animation: cky-fade-in 0.6s ease 0.3s both !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .cky-consent-container {
            animation: none !important;
        }
    }