/* ==========================================================================
   NaughtyKodi global font system
   Heading      -> Salsa
   Sub-heading  -> Alegreya Sans
   Body text    -> Khula
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;500;700;800&family=Khula:wght@300;400;600;700&family=Salsa&display=swap');

:root {
    --nk-heading: 'Salsa', cursive;
    --nk-subheading: 'Alegreya Sans', sans-serif;
    --nk-body: 'Khula', sans-serif;

    /* ---- Brand palette pulled from the logo ---- */
    --nk-purple: #3C2454;   /* primary text / wordmark */
    --nk-orange: #E45424;   /* energetic accent (comb) */
    --nk-gold:   #FCA818;   /* highlight (beak) */
    --nk-cream:  #F0F0D8;   /* soft background */
    --nk-ink:    #181824;   /* near-black outlines */
}

/* ---------- Brand colour system ---------- */
/* primary headings carry the logo purple (except on dark/overlay sections) */
h1, h2, h3, .sec-title h2, .footer-title {
    color: var(--nk-purple);
}
/* the highlight accent -> logo orange */
.theme_color { color: var(--nk-orange) !important; }

/* buttons: purple base, orange on hover */
.theme-btn.btn-style-one,
.theme-btn.btn-style-two {
    background-color: var(--nk-purple) !important;
    color: #fff !important;
}
.theme-btn.btn-style-one:hover,
.theme-btn.btn-style-two:hover {
    background-color: var(--nk-orange) !important;
    color: #fff !important;
}

/* ---------- Animated dropdown navigation (ported from DropdownNavigation) ---------- */
.main-menu .navigation { position: relative; }

/* sliding hover pill that follows the active top-level item */
.main-menu .navigation .nk-nav-pill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 38px;
    width: 0;
    transform: translateY(-50%);
    background: rgba(228, 84, 36, .12);   /* logo orange tint */
    border-radius: 99px;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: left .35s cubic-bezier(.4, 0, .2, 1),
                width .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease;
}
.main-menu .navigation > li { z-index: 1; }
.main-menu .navigation > li > a { position: relative; z-index: 2; }

/* chevron on items that have a submenu */
.main-menu .navigation > li.dropdown > a::after {
    content: "\25BE" !important;            /* ▾ unicode caret (no icon-font needed) */
    font-family: 'Khula', sans-serif !important;
    font-size: 13px;
    line-height: 1;
    margin-left: 6px;
    display: inline-block;
    transition: transform .3s ease;
    speak: none;
}
.main-menu .navigation > li.dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* smoother, snappier dropdown reveal */
.main-menu .navigation > li > ul,
.main-menu .navigation > li.nk-menu-dd > ul {
    transition: opacity .28s ease, transform .28s ease, visibility .28s ease !important;
    transform: translateY(12px);
    border-radius: 14px !important;
    border: 1px solid rgba(60, 36, 84, .10);
    box-shadow: 0 18px 40px rgba(24, 24, 36, .14) !important;
}
.main-menu .navigation > li:hover > ul {
    transform: translateY(0);
}

/* keep light headings light on dark / image-overlay sections */
.sec-title.light h1, .sec-title.light h2,
.deal-section h2,
.hero-text__title, .zp-caption h2 {
    color: #fff;
}

/* ---- Body / base text -> Khula ---- */
body,
p,
li,
a,
span,
input,
textarea,
button,
select,
.text,
.menu-text,
table,
blockquote {
    font-family: var(--nk-body);
}

/* ---- Headings -> Salsa ---- */
h1, h2,
.h1, .h2,
.hero-text__title,
.sec-title h1,
.sec-title h2,
.section-title,
.section-headline,
.banner-section h1 {
    font-family: var(--nk-heading) !important;
}

/* ---- Sub-headings -> Alegreya Sans ---- */
h3, h4, h5, h6,
.h3, .h4, .h5, .h6,
.sec-title .title,
.title,
.subtitle,
.hero-text__eyebrow,
.navigation > li > a,
.footer-title,
.blockName,
blockquote cite {
    font-family: var(--nk-subheading) !important;
}

/* ---- Mobile: centre all section buttons ---- */
@media (max-width: 767px) {
    .juice-section .button-box,
    .juice-section .content-column .inner-column,
    .fluid-section-one .content-column .inner-column,
    .recipe-section .section-btn,
    .deal-section .button-box,
    .beverage-section .button-box,
    .ambience-btn-box,
    .reels-viewall,
    .button-box,
    .btns-box {
        text-align: center !important;
    }
    .button-box, .btns-box, .ambience-btn-box, .reels-viewall {
        display: flex; justify-content: center;
    }
}

/* ==========================================================================
   Content alignment — match the header bar (1280 / 24px gutter) so every
   section's content starts at the logo's left edge and ends at the last nav link.
   ========================================================================== */
.auto-container{ max-width: 1280px; padding-left: 24px; padding-right: 24px; }

/* ==========================================================================
   Visually-hidden but crawler/screen-reader accessible — for keyword-rich H1s
   that shouldn't disturb a page's decorative tagline art.
   ========================================================================== */
.nk-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
   overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }