/* ==========================================================================
   K2H THEME · BASE
   Typography, buttons, pattern backgrounds and small reusable components.
   Loaded after the original k2h-style.css. Written in plain (un-nested) CSS
   so every browser reads it.
   ========================================================================== */

html { scroll-padding-top: calc(var(--k2h-header-h) + 12px); }

body {
    font-family: var(--k2h-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--k2h-text);
    background: var(--k2h-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--k2h-font-display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0;
    color: var(--k2h-gold-light);
}

a { color: var(--k2h-gold); text-decoration: none; transition: color .2s ease; }
a:hover { color: #FFF3D6; }

:focus-visible { outline: 2px solid var(--k2h-gold); outline-offset: 3px; }
::selection { background: var(--k2h-gold); color: var(--k2h-ink); }

.k2h-skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: calc(var(--k2h-z-preloader) + 1);
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--k2h-gold);
    color: var(--k2h-ink);
    font-weight: 600;
}
.k2h-skip-link:focus { top: 12px; color: var(--k2h-ink); }

html:not(.k2h-festive) .k2h-festive-only { display: none !important; }

/* ---- Pattern backgrounds ------------------------------------------------ */
.k2h-bg-black   { background-color: var(--k2h-black);      background-image: var(--k2h-tile-black); }
.k2h-bg-emerald { background-color: var(--k2h-emerald);    background-image: var(--k2h-tile-emerald); }
.k2h-bg-gold    { background-color: var(--k2h-gold-panel); background-image: var(--k2h-tile-gold); }
.k2h-bg-maroon  { background-color: var(--k2h-maroon);     background-image: var(--k2h-tile-maroon); }
.k2h-bg-jaali   { background-color: var(--k2h-emerald);    background-image: var(--k2h-tile-jaali); }
.k2h-bg-jaali-black { background-color: var(--k2h-black);  background-image: var(--k2h-tile-jaali-black); }

/* decorative vector images (mandala, paisley, skyline…) never catch clicks */
.k2h-deco { position: absolute; pointer-events: none; user-select: none; }
.k2h-spin { animation: k2h-spin 140s linear infinite; }

/* ---- Section shell ------------------------------------------------------ */
.k2h-section { position: relative; overflow: hidden; padding-block: var(--k2h-section-y); }
.k2h-section--line { border-top: 1px solid var(--k2h-gold-line); }
.k2h-wrap { position: relative; max-width: 1240px; margin: 0 auto; padding-inline: var(--k2h-gutter); }

/* ---- Type helpers ------------------------------------------------------- */
.k2h-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-family: var(--k2h-font-body);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: var(--k2h-tracking);
    text-transform: uppercase;
    color: var(--k2h-gold);
}
.k2h-eyebrow--dark { color: var(--k2h-ink-soft); font-weight: 600; }

.k2h-hindi {
    font-family: var(--k2h-font-display);
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--k2h-gold);
}

/* Gold gradient headline (Rozha One) */
.k2h-title {
    margin: 0 0 18px;
    font-family: var(--k2h-font-display);
    font-size: var(--k2h-h2);
    line-height: 1.04;
    background: var(--k2h-gold-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
}
.k2h-title--plain { background: none; color: var(--k2h-gold-light); -webkit-background-clip: border-box; background-clip: border-box; }
.k2h-title--plain em, .k2h-title--plain .k2h-accent { font-style: normal; color: var(--k2h-gold); }
.k2h-title--ink { background: none; color: var(--k2h-ink); -webkit-background-clip: border-box; background-clip: border-box; }

.k2h-lead { font-size: 1.1rem; line-height: 1.75; color: var(--k2h-text); }
.k2h-muted { font-weight: 300; color: var(--k2h-text-soft); line-height: 1.85; }

.k2h-divider { display: block; width: min(300px, 80%); height: auto; margin: 4px 0 18px; }
.k2h-divider--center { margin-inline: auto; }

.k2h-center { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* ---- Buttons (pill) ----------------------------------------------------- */
.k2h-btn {
    --btn-fg: var(--k2h-gold-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--btn-fg);
    font-family: var(--k2h-font-body);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.k2h-btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.k2h-btn--gold { --btn-fg: var(--k2h-ink); background: var(--k2h-gold-gradient); font-weight: 600; }
.k2h-btn--gold:hover { box-shadow: var(--k2h-shadow-gold); }
.k2h-btn--ghost-light,
.k2h-btn--ghost { border-color: var(--k2h-gold-line-strong); }
.k2h-btn--ghost-light:hover,
.k2h-btn--ghost:hover { border-color: var(--k2h-gold); background: rgba(227, 184, 102, .1); }
.k2h-btn--dark { --btn-fg: var(--k2h-gold-light); background: var(--k2h-black); }
.k2h-btn--link {
    --btn-fg: var(--k2h-gold);
    min-height: 44px;
    padding: 0 4px;
    border-radius: 0;
    border-bottom: 1px solid rgba(227, 184, 102, .5);
}
.k2h-btn--link:hover { transform: none; border-bottom-color: var(--k2h-gold); }
.k2h-btn--sm { min-height: 46px; padding: 0 22px; font-size: .9rem; }
.k2h-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

@media (max-width: 575.98px) {
    .k2h-btn { white-space: normal; padding-inline: 18px; }
}

/* original buttons used on inner pages, restyled to match */
.btn-k2h-gold {
    --bs-btn-padding-y: .85rem;
    --bs-btn-padding-x: 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--k2h-gold-gradient);
    color: var(--k2h-ink);
    font-family: var(--k2h-font-body);
    font-weight: 600;
    font-size: .95rem !important;
    transition: transform .2s ease, box-shadow .25s ease;
}
.btn-k2h-gold:hover { color: var(--k2h-ink); transform: translateY(-2px); box-shadow: var(--k2h-shadow-gold); }

/* ---- Round plate (food photo on a plate rim) --------------------------- */
.k2h-plate {
    display: block;
    flex: none;
    aspect-ratio: 1;
    padding: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFFBF2, #E7DCC6 70%, #C9B896);
    box-shadow: 0 0 0 2px var(--k2h-gold-deep), 0 30px 50px -24px rgba(0, 0, 0, .85);
    box-sizing: border-box;
}
.k2h-plate img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ---- Gold line frame around a rectangular photo ------------------------- */
.k2h-frame { position: relative; padding: 14px; }
.k2h-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--k2h-gold-line-strong);
    pointer-events: none;
}
.k2h-frame img { position: relative; display: block; width: 100%; object-fit: cover; box-shadow: var(--k2h-shadow); }

/* ---- Medallion (round gold badge) -------------------------------------- */
.k2h-medallion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--k2h-gold);
    background: var(--k2h-black);
    box-shadow: inset 0 0 0 4px var(--k2h-black), inset 0 0 0 5px rgba(227, 184, 102, .5);
    color: var(--k2h-gold);
}

/* ---- Scroll reveal (only once ui.js is running) ------------------------ */
.k2h-reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--k2h-ease), transform .9s var(--k2h-ease);
    transition-delay: var(--reveal-delay, 0s);
}
.k2h-reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

@keyframes k2h-spin { to { transform: rotate(360deg); } }
@keyframes k2h-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .k2h-reveal-ready [data-reveal] { opacity: 1; transform: none; }
}