/* ------------------------------------------------------------------------------------------------------
   KundliLive — site theme layer
   Loaded last on every page. Decides colour, type weight and button style once, so the header, the content
   and the sidebar stop looking like three different products.

   RULE FOR ANYONE EDITING THIS FILE: colour, border, border-radius, box-shadow, font-size, font-weight and
   line-height only. No display, position, width, height, margin, padding, float or grid. Those belong to the
   page's own stylesheet, where the person changing them can see what they affect.
   ------------------------------------------------------------------------------------------------------ */

:root,
html body.public-site {
    --kl-saffron: #e2690d;        /* the one orange */
    --kl-saffron-dark: #c2560a;
    --kl-saffron-deep: #a4470a;
    --kl-gold: #ecaf16;
    --kl-maroon: #6a2313;         /* headings */
    --kl-ink: #33302b;            /* body text, warm */
    --kl-ink-soft: #6b6359;
    --kl-rule: #ecd9b0;           /* gold hairline */
    --kl-cream: #fffdf7;
}

/* ---- one button, everywhere --------------------------------------------------------------------------
   Every class below is something the site already calls a button. They are given one look: a solid saffron
   face with white type, the way the large astrology sites do it, because a visitor should never have to work
   out which orange means "press me". */

:is(html#kl-fresh-root, html) body#page-top.public-site :is(
    .tools-button, .pb-home-hero-button, .kl-landing-cta, .vivah-primary-cta,
    .premium-buy-button, .kl-compact-report-preview__cta, .ka-btn, .tools-cta
):not(:disabled):not([aria-disabled="true"]) {
    border: 1px solid var(--kl-saffron-dark) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ef7b1c, var(--kl-saffron)) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    box-shadow: 0 2px 5px rgba(164, 71, 10, .22) !important;
    text-shadow: none !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site :is(.tools-button, .pb-home-hero-button, .kl-landing-cta, .vivah-primary-cta, .premium-buy-button, .ka-btn):not(:disabled):hover {
    border-color: var(--kl-saffron-deep) !important;
    background: linear-gradient(180deg, var(--kl-saffron), var(--kl-saffron-dark)) !important;
    box-shadow: 0 4px 10px rgba(164, 71, 10, .3) !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site :is(.tools-button, .pb-home-hero-button, .kl-landing-cta, .premium-buy-button, .ka-btn):focus-visible {
    outline: 3px solid rgba(226, 105, 13, .35) !important;
    outline-offset: 2px !important;
}

/* The quieter second button: the same shape, drawn rather than filled. */
:is(html#kl-fresh-root, html) body#page-top.public-site :is(
    .tools-button--secondary, .pb-home-hero-button-secondary, .premium-secondary-cta,
    .ka-btn.alt, .tools-button.alt
):not(:disabled) {
    border: 1px solid var(--kl-rule) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--kl-saffron-dark) !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site :is(.tools-button--secondary, .pb-home-hero-button-secondary, .premium-secondary-cta, .ka-btn.alt):not(:disabled):hover {
    border-color: var(--kl-saffron) !important;
    background: #fff7ee !important;
    color: var(--kl-saffron-deep) !important;
}

/* A button that is genuinely unavailable should look it, not just refuse to work. */
:is(html#kl-fresh-root, html) body#page-top.public-site :is(.tools-button, .premium-buy-button, .ka-btn):is(:disabled, [aria-disabled="true"]) {
    border: 1px solid #e3ddd2 !important;
    background: #f4f1ea !important;
    color: #9d968a !important;
    box-shadow: none !important;
}

/* ---- the right-hand column ----------------------------------------------------------------------------
   Its panel headings were deep navy on every page while the content beside them had gone warm, which is the
   single thing that made the sidebar look bolted on. Class names taken from the rendered page, not guessed. */

:is(html#kl-fresh-root, html) body#page-top.public-site .public-tools-sidebar .public-tools-sidebar__section > :is(h2, h3) {
    border-color: var(--kl-saffron-deep) !important;
    background: linear-gradient(135deg, var(--kl-saffron), var(--kl-saffron-deep)) !important;
    color: #fff8ec !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    text-shadow: none !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site .public-tools-sidebar .public-tools-sidebar__links > a {
    color: var(--kl-ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site .public-tools-sidebar .public-tools-sidebar__links > a:hover {
    background: #fff7ee !important;
    color: var(--kl-saffron-deep) !important;
}

/* ---- the strip above the logo -------------------------------------------------------------------------
   Deep navy over a warm site: the first thing a visitor sees, and the first thing that told them this was
   two designs stitched together. It becomes the dark end of the same warm range. */

/* The 2026 theme paints this bar through `… .pb-site-header .pb-utility-bar`, one class heavier than the
   obvious selector, so the header class is carried here too — measured against that rule, not assumed. */
:is(html#kl-fresh-root, html) body#page-top.public-site.kl-fresh-theme .pb-site-header .pb-utility-bar {
    border: 0 !important;
    border-bottom: 1px solid #3a140b !important;
    background: linear-gradient(90deg, #4a1a0e, #6a2313 55%, #7d2c15) !important;
    color: #ffe9cf !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site.kl-fresh-theme .pb-site-header .pb-utility-bar :is(a, span, strong, small, button, b) {
    color: #ffe9cf !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site.kl-fresh-theme .pb-site-header .pb-utility-bar :is(a, button):hover { color: #fff !important; }

/* The notice ribbon sits directly under the header and was the last cold blue band left up there. */
:is(html#kl-fresh-root, html) body#page-top.public-site.kl-fresh-theme .kl-notice {
    border-color: var(--kl-rule) !important;
    background: linear-gradient(90deg, #fff8ec, #fffdf7) !important;
    color: var(--kl-ink) !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site.kl-fresh-theme .kl-notice :is(a, span, strong, p, li) { color: var(--kl-ink) !important; }
:is(html#kl-fresh-root, html) body#page-top.public-site.kl-fresh-theme .kl-notice .kl-notice__label { color: var(--kl-saffron-deep) !important; }

/* ---- page headers -------------------------------------------------------------------------------------
   The title block on the inner pages was a cold blue-grey wash sitting directly above warm cream content. */

/* Every page names its first block something different — tools-page-title here, daily-page-head there,
   kf-hero, rk-intro, info-hero, mp-hero, vivah-hero. They were built at different times in different colours,
   and a visitor moving between two pages saw two different sites. One warm ground for all of them. The list
   was read off the rendered pages, not guessed. */
:is(html#kl-fresh-root, html) body#page-top.public-site :is(
    .tools-page-title, .daily-page-head, .kf-hero, .rk-intro, .vivah-hero,
    .mp-hero, .info-hero, .why-hero, .kl-landing-title-row
) {
    border-color: var(--kl-rule) !important;
    background: linear-gradient(165deg, #fffdf7, #fff3de) !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site :is(.tools-page-title, .daily-page-head, .kf-hero, .rk-intro, .vivah-hero, .mp-hero, .info-hero, .why-hero) :is(p, li) {
    color: var(--kl-ink) !important;
}
/* A link in one of those intros was set so pale against the new cream that it read as broken text rather than
   something to click — the Hindu calendar's "आज का पंचांग हिंदी में" line. */
:is(html#kl-fresh-root, html) body#page-top.public-site :is(.tools-page-title, .daily-page-head, .kf-hero, .rk-intro, .vivah-hero, .mp-hero, .info-hero, .why-hero) a {
    color: var(--kl-saffron-deep) !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* The Rahu Kaal window is the answer that page exists to give, and it was the last large piece of navy left
   on a warm page. */
:is(html#kl-fresh-root, html) body#page-top.public-site .rk-time > strong { color: var(--kl-maroon) !important; }
:is(html#kl-fresh-root, html) body#page-top.public-site .rk-time > i { color: var(--kl-saffron) !important; }

/* The last two pieces of navy found by looking at the rendered pages: a blue rule along the top of the
   Choghadiya summary strip, and the tick disc on the Vivah answer card. */
:is(html#kl-fresh-root, html) body#page-top.public-site .choghadiya-summary {
    border-color: var(--kl-rule) !important;
    border-top-color: var(--kl-saffron) !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site .choghadiya-summary :is(strong, b) { color: var(--kl-maroon) !important; }
:is(html#kl-fresh-root, html) body#page-top.public-site .vivah-direct-answer {
    border-color: var(--kl-gold) !important;
    background: #fffdf3 !important;
}
:is(html#kl-fresh-root, html) body#page-top.public-site .vivah-direct-answer > span {
    border-color: var(--kl-saffron-deep) !important;
    background: linear-gradient(140deg, var(--kl-saffron), var(--kl-saffron-deep)) !important;
    color: #fff !important;
}

/* ---- type ---------------------------------------------------------------------------------------------
   Nothing on a page a customer reads should be smaller than twelve pixels, and body copy should not be set
   in grey so light that it disappears against cream. */

:is(html#kl-fresh-root, html) body#page-top.public-site main :is(p, li, dd, td) { color: var(--kl-ink) !important; }
:is(html#kl-fresh-root, html) body#page-top.public-site main :is(small, .tools-note, .sale-sub, figcaption) { font-size: 12px !important; color: var(--kl-ink-soft) !important; }
:is(html#kl-fresh-root, html) body#page-top.public-site main :is(h1, h2, h3, h4) { color: var(--kl-maroon) !important; letter-spacing: normal !important; }
:is(html#kl-fresh-root, html) body#page-top.public-site main :is(h1, h2, h3, h4, p, li, td, th, small, a, span, strong, em, label, button, summary) {
    /* No Latin tracking on Devanagari: it pulls the matras away from their letters. */
    letter-spacing: normal !important;
}