/* ============================================================
   KALP — Sitewide chrome (header + footer logo, etc.)
   Loaded on every page so header/footer look consistent.
   ============================================================ */

/* Brand text-selection highlight — replaces the browser-default BLUE
   sitewide (user disliked the blue tint when dragging/selecting any
   text). Gold background + deep-brown text stays readable on both the
   light cream sections AND the dark chocolate header/footer/flavour
   sections, so one rule covers the whole site. */
::selection {
    background: var(--gold, #C9A84C);
    color: var(--deep-brown, #1A0A03);
}
::-moz-selection {
    background: var(--gold, #C9A84C);
    color: var(--deep-brown, #1A0A03);
}

/* Header logo — sized down from native, wrapped in a div (not <a>)
   when custom logo is active, to avoid nested-anchor invalidity. */
.kalp-header__logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.kalp-header__logo--image .custom-logo-link {
    display: inline-block;
    line-height: 0;
}
.kalp-header__logo--image .custom-logo,
.kalp-header__logo .custom-logo,
.kalp-header__logo img {
    max-height: 50px;
    width: auto;
    height: auto;
    display: block;
    /* KALP logo PNG (attachment 135) is now pre-rendered white, so no
       runtime filter is needed — works on both the dark header and the
       dark footer. The earlier `filter: brightness(0) invert(1)` approach
       had Chrome compositor edge cases on a mostly-transparent PNG at
       small render sizes. (Original brown logo at attachment 69 preserved
       in Media Library for any future light-background use.) */
}

/* ============================================
   Brand lockup: KALP + Pranada parent-company mark
   Sits in the header left slot. KALP primary (50px),
   thin gold divider, Pranada endorsement smaller (36px).
   ============================================ */
.kalp-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.kalp-header__brand-divider {
    display: inline-block;
    width: 1px;
    height: 40px;
    background: rgba(201, 168, 76, 0.35); /* --border-color-ish but more visible */
    flex-shrink: 0;
}

.kalp-header__pranada {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}

.kalp-header__pranada-img {
    max-height: 40px;
    width: auto;
    height: auto;
    display: block;
}

/* Tighten on smaller screens so the brand lockup doesn't crowd the nav */
@media (max-width: 768px) {
    .kalp-header__brand { gap: 10px; }
    .kalp-header__brand-divider { height: 28px; }
    .kalp-header__pranada-img { max-height: 28px; }
}

@media (max-width: 480px) {
    .kalp-header__brand { gap: 8px; }
    .kalp-header__brand-divider { height: 24px; }
    .kalp-header__pranada-img { max-height: 24px; }
}

/* ============================================
   Footer brand lockup: same KALP + Pranada pattern.
   Footer logo is 60px (per existing rule), so Pranada sits at 48px
   to maintain the same 5:4 primary/endorsement ratio as the header.
   ============================================ */
.kalp-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 1rem;
}

.kalp-footer__brand-divider {
    display: inline-block;
    width: 1px;
    height: 44px;
    background: rgba(201, 168, 76, 0.35);
    flex-shrink: 0;
}

.kalp-footer__pranada {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}

.kalp-footer__pranada-img {
    max-height: 48px;
    width: auto;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .kalp-footer__brand { gap: 12px; }
    .kalp-footer__brand-divider { height: 36px; }
    .kalp-footer__pranada-img { max-height: 40px; }
}

/* ============================================
   Header → hides when the footer scrolls into view, so the sticky
   nav doesn't overlap the footer brand block. JS adds `.is-footer-near`
   to the header when an IntersectionObserver fires on the footer.
   ============================================ */
.kalp-header {
    transition: transform 0.4s var(--ease-default, cubic-bezier(0.4,0,0.2,1)),
                opacity 0.35s var(--ease-default, cubic-bezier(0.4,0,0.2,1)),
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.kalp-header.is-footer-near {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   Item K — lighten the header + footer brown.
   Repoint ONLY the chrome (header / its scrolled state / footer / mobile
   drawer) at --header-brown (#4D260F, Option C). The body --deep-brown used
   everywhere else (dark sections, hero, PDP, overlays, borders, buttons) is
   untouched. !important because the header/footer background is set in
   several scattered rules (header.css, homepage.css, homepage-bright.css,
   about.css) — this guarantees the new shade wins on every page. The header
   keeps its 0.95/0.98 translucency so the backdrop-filter frost still reads.
   ============================================ */
.kalp-header { background: rgba(var(--header-brown-rgb), 0.95) !important; }
.kalp-header.is-scrolled { background: rgba(var(--header-brown-rgb), 0.98) !important; }
.kalp-footer,
.kalp-header__mobile-drawer { background: var(--header-brown, #4D260F) !important; }

/* ============================================
   Item H follow-up — TRIM the footer height (user: footer too big).
   Content pages carry a migrated inline <style> that re-sets .kalp-footer
   padding to clamp(3rem,6vw,5rem) (~80px), overriding the theme — so the
   earlier homepage.css trim had no effect. Override it here (site-chrome.css
   loads sitewide) with !important, and tighten the inter-section spacing.
   ============================================ */
.kalp-footer { padding-top: 1.75rem !important; padding-bottom: 0.9rem !important; }
.kalp-footer__inner { padding-bottom: 0.4rem !important; margin-bottom: 0 !important; align-items: start !important; gap: 36px !important; }
/* tighten the link columns hard (the Company+Legal column drives the height) */
.kalp-footer__col li { margin-bottom: 2px !important; }
.kalp-footer__col .menu-link,
.kalp-footer__col a.menu-link { line-height: 1.45 !important; }
.kalp-footer__col-title { margin-bottom: 0.4rem !important; }
.kalp-footer__col-title:not(:first-child) { margin-top: 0.85rem !important; }
.kalp-footer__col p { line-height: 1.4 !important; margin-bottom: 0.4rem !important; }
.kalp-footer__brand { margin-bottom: 0.75rem !important; }
/* tighten the lower sections */
.kalp-footer__newsletter { margin: 0.4rem auto 0 !important; padding-top: 0.9rem !important; }
.kalp-footer__newsletter-lede { margin: 0.2rem auto 0.8rem !important; }
.kalp-footer__payment { margin: 0.8rem auto !important; }
.kalp-footer__bottom { padding-top: 0.7rem !important; margin-top: 0.25rem !important; }

/* Kill the content wrapper's margin-bottom (Astra default ~60px on .site-main
   pages, ~64px on Shop's #primary.kalp-3d-main). It left a gap between the page
   content and the footer where the BODY background showed as a colored strip —
   a DIFFERENT colour per page (Shop dark, About/Contact white, Privacy cream,
   etc.). All these templates use <main id="primary">, so #primary covers them
   all. The footer's own top padding gives the breathing room. Homepage uses
   <main id="main-content"> (not #primary), so it never had the strip. */
/* Astra's inline dynamic CSS sets margin-TOP:60px AND margin-bottom:60px on
   `.ast-plain-container.ast-no-sidebar #primary`. Both showed the cream body
   background as a strip: bottom = a colour band above the footer; top = a white
   gap between the sticky header and the page's first section (glaring above the
   dark About/Shop heros, invisible on cream pages but still dead space above
   the Contact/FAQ/legal breadcrumbs). Zero BOTH, sitewide.
   Audited templates: About/Contact/FAQ/Privacy/Returns/Shipping/Terms + 404 +
   Shop all use <main id="primary"> → covered. Homepage (#main-content) and PDP
   (#main-content) don't use #primary → untouched (already correct). */
#primary,
.site-main { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Hide the VISIBLE breadcrumb bars on the inner pages (Contact/FAQ/legal). They
   render as a cream band between the header and the colourful hero — About has
   no breadcrumb, so it sits flush; user wants these to match. The Yoast
   structured-data (JSON-LD) breadcrumb is separate and unaffected, so rich
   results are preserved. */
.contact-breadcrumb,
.faq-breadcrumb,
.legal-breadcrumb { display: none !important; }

/* Breadcrumbs render ~9px on phones (each migrated page's inline mobile CSS
   shrinks them). Bump every breadcrumb variant — legal / FAQ / About / PDP /
   Contact (caught via the [class*="breadcrumb"] fallbacks) — to a readable size
   on small screens. Desktop is unaffected. */
@media (max-width: 600px) {
    .breadcrumbs__list,
    .legal-breadcrumb__list,
    .faq-breadcrumb__list,
    .pdp-breadcrumb__list,
    [class*="breadcrumb__list"],
    nav[class*="breadcrumb"] {
        font-size: 0.85rem !important;
    }
}

/* ============================================
   Flavour bar — slow floating animation.
   Each of the 4 spotlight images on the homepage rises and falls a few
   pixels in a long, gentle loop. Staggered delays per nth-of-type so
   they don't all bob in lockstep. Disabled for reduced-motion users.
   ============================================ */
@keyframes kalpFloatBar {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

.flavour__bar-image {
    will-change: transform;
    animation: kalpFloatBar 6.5s ease-in-out infinite;
}

/* Per-bar phase offsets so the four bars don't all peak at the same moment. */
#flavour-gulaab  .flavour__bar-image { animation-delay: 0s; }
#flavour-thandai .flavour__bar-image { animation-delay: -1.6s; }
#flavour-rajbhog .flavour__bar-image { animation-delay: -3.2s; }
#flavour-paan    .flavour__bar-image { animation-delay: -4.8s; }

@media (prefers-reduced-motion: reduce) {
    .flavour__bar-image {
        animation: none;
    }
}

/* ============================================
   Sitewide default link hover: brand gold, NOT Astra's default blue.
   Loads after the Astra parent, same specificity as Astra's `a:hover`, so it
   wins for any generic/content link (e.g. migrated-page body links). Components
   that set their own link-hover (nav, buttons, footer, social, breadcrumbs)
   have higher specificity and keep their own colour.
   ============================================ */
a:hover { color: var(--gold-dark, #A68A3A); }

/* Contact page "Follow Us" icons — hover = each platform's own brand colour
   (Instagram = its gradient). Overrides the inline gold-tint hover AND defeats
   Astra's default a:hover blue. Mirrors the footer social-icon treatment. */
.contact-social__link:hover { color: #fff !important; border-color: transparent !important; }
.contact-social__link[aria-label="Instagram"]:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; }
.contact-social__link[aria-label="Facebook"]:hover  { background: #1877F2 !important; }
.contact-social__link[aria-label="WhatsApp"]:hover   { background: #25D366 !important; }
.contact-social__link[aria-label="LinkedIn"]:hover   { background: #0A66C2 !important; }

/* Footer logo — sits on dark footer. Logo PNG (attachment 135) is now
   pre-rendered white, so the previous `filter: brightness(0) invert(1)`
   would re-invert it to black. Removed. The inline <img class="footer__brand-logo">
   in the homepage footer still points at the original (brown) asset, so
   it still needs the filter — applied only on that specific class. */
.kalp-footer__logo {
    display: inline-block;
    line-height: 0;
    margin: 0 !important; /* kill stray 16px bottom margin that pushed the logo ~8px off-centre vs Pranada */
}
.kalp-footer__logo .custom-logo,
.kalp-footer__logo img,
.kalp-footer__brand-logo {
    max-height: 60px;
    width: auto;
    height: auto;
    display: block;
}

.footer__brand-logo {
    max-height: 60px;
    width: auto;
    height: auto;
    display: block;
    filter: brightness(0) invert(1); /* inline asset is still the brown PNG */
}

/* ============================================
   Back-to-top button (sitewide)
   Lifted VERBATIM from updated-with-skills/assets/css/homepage-bright.css
   ============================================ */
button.back-to-top,
.back-to-top {
    position: fixed !important;
    bottom: 100px;
    right: 24px;
    z-index: 900;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--radius-full) !important;
    border: var(--border-thin) solid var(--border-color);
    background: var(--deep-brown);
    color: var(--gold);
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease;
    line-height: 1 !important;
    box-sizing: border-box !important;
}
.back-to-top svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    display: block !important;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--gold);
    color: var(--deep-brown);
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 80px;
        right: 16px;
    }
}