/* ============================================================
   KAYAYURVED 3 — Typography Design System
   ============================================================
   A unified typography system for the Kayayurved website.
   Uses Poppins as the primary font family, loaded from local files.
   
   Hierarchy (existing class names preserved):
     .fnt              → Hero / Display heading  (H1)
     .subhead_info     → Section heading         (H2)
     .subsubhead_info  → Sub-section heading     (H3)
     .data_head        → Card / data heading     (H4)
     .data_desc        → Data descriptions       (small body)
     .para_desc        → Paragraph / body copy
     .desc_date        → Dates & meta info
     .marb             → Heading underline bar

   Active additions:
     .ky-h1            → Explicit heading scale used by current pages
   ============================================================ */

@import url('helvetica/Helvetica/helvetica.css');

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §1  FONT-FACE DECLARATIONS
   Headings: Inter Tight (loaded via Google Fonts in header_3p_clean.php)
   Body: Helvetica (loaded via @import above, from css/helvetica/)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §2  CSS CUSTOM PROPERTIES  (Typography Tokens)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
    /* ── Brand Colors ─────────────────────────────────── */
    --ky-clr-primary: #c89b2d;
    /* Gold Accent */
    --ky-clr-secondary: #0a0d31;
    /* Deep Navy */
    --ky-clr-dark: #242627;
    /* Charcoal */
    --ky-clr-white: #ffffff;
    --ky-clr-bg-light: #f9f9f9;
    --ky-clr-border: #00000026;

    /* ── Layout ───────────────────────────────────────── */
    --ky-max-width: 1280px;
    --ky-section-padding: 80px 0;

    /* ── Buttons ──────────────────────────────────────── */
    --ky-btn-padding: 14px 24px;
    --ky-btn-radius: 4px;
    --ky-btn-fs: 14px;
    --ky-btn-fw: 600;
    --ky-btn-lh: 1.2em;

    /* ── Font Families ────────────────────────────────── */
    --ky-font-heading: 'Inter Tight', sans-serif;
    --ky-font-body: Helvetica, Arial, sans-serif;

    /* ── Font Sizes  (fluid-friendly base) ────────────── */
    /* --ky-fs-h1/h2/h3/h4/body/body-sm/body-lg/badge/subtitle are still
       used by 1-28 other files site-wide — migrate to .site-h1/.site-h2/etc
       as we touch each page, then remove the token once unused. */
    --ky-fs-h1: clamp(3rem, 2.2vw + 1.5rem, 3.5rem);
    /* 48–56px */
    --ky-fs-h2: clamp(1.75rem, 3vw + 0.25rem, 2.25rem);
    /* 28–36px */
    --ky-fs-h3: clamp(1.375rem, 2vw + 0.25rem, 1.75rem);
    /* 22–28px */
    --ky-fs-h4: clamp(1.125rem, 1.5vw + 0.25rem, 1.375rem);
    /* 18–22px */
    --ky-fs-subtitle: clamp(1rem, 0.8vw + 0.8rem, 1.3rem);
    /* 16–20.8px */
    --ky-fs-body-lg: 1.125rem;
    /* 18px */
    --ky-fs-body: 18px;
    /* 18px */
    --ky-fs-body-sm: 0.875rem;
    /* 14px */
    --ky-fs-badge: 0.6875rem;
    /* 11px */

    /* ── Line Heights ─────────────────────────────────── */
    --ky-lh-tight: 1;
    /* Adjusted for premium look */
    --ky-lh-snug: 1.35;
    --ky-lh-normal: 1.5;
    --ky-lh-relaxed: 1.75;

    /* ── Letter Spacing ───────────────────────────────── */
    --ky-ls-tight: -1px;
    /* Matches Branch 1 h1 look */
    --ky-ls-normal: 0em;
    --ky-ls-wide: 0.04em;
    --ky-ls-wider: 0.08em;
    --ky-ls-widest: 0.12em;

    /* ── Font Weights ─────────────────────────────────── */
    --ky-fw-light: 300;
    --ky-fw-regular: 400;
    --ky-fw-medium: 500;
    --ky-fw-semibold: 600;
    --ky-fw-bold: 700;
}

/* ── Container Utility ─────────────────────────────────── */
/* Always zero padding at every width — Bootstrap's `.container` base rule
   (css/bootstrap4/bootstrap.min.css, loaded after this file) sets
   `padding-left/right: 15px` with no !important and no media-query guard,
   so without this it silently applies at every width, including >1280px
   where nothing previously overrode it (shrinking every plain `.container`
   by 30px on desktop). Gutters are each component's own responsibility —
   add `.site-standard-mob-padding` (16px, ≤1280px) to a component's own
   wrapper when it needs one. Don't rely on `.container` itself for spacing. */
.container {
    max-width: var(--ky-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Full-bleed container (explicit alias) ─────────────── */
/* `.container` is already zero-padding at every width (see above). This
   class is now a no-op kept for self-documentation — apply it to a
   `.container` to signal "intentionally full-bleed" and to avoid
   reintroducing an inline `padding: 0 !important` (which beats every class
   regardless of !important, including `.site-standard-mob-padding`'s gutter). */
.site-full-bleed {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Standard Side Padding (reusable) ──────────────────── */
/* Apply to a component's own wrapper/section for the site-wide
   side gutter on every sub-desktop width (tablet/iPad + mobile).
   Desktop (>1280, full container width) keeps no side padding.
   Each component handles its own padding — do not rely on a
   parent wrapper for this. */
@media (max-width: 1280px) {
    .site-standard-mob-padding {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ── Standard Heading Sizes (reusable, responsive) ─────── */
/* Apply to any heading so desktop+mobile sizing is handled in one
   place. Components only need to set color/margin locally.
   !important needed to beat the global h1{...!important} rule above. */
.site-h1 {
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 56px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    letter-spacing: -1px !important;
}

@media (max-width: 767px) {
    .site-h1 {
        font-size: 30px !important;
        font-weight: 600 !important;
        line-height: 30px !important;
    }
}

.site-h2 {
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 36px !important;
    letter-spacing: normal !important;
}

.site-h3 {
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

@media (max-width: 767px) {
    .site-h3 {
        font-size: 20px !important;
    }
}

/* Small uppercase label above a heading ("OUR RECORDS", "OUR COMPANIES") — color is local to each component. */
.site-overline {
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: block;
}

/* ── Standard Paragraph (.site-p) ──────────────────────── */
/* Heading utilities (.site-h1/h2/h3/overline) use Inter Tight; body
   copy uses Helvetica. Color is local to each component. */
.site-p {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
}

/* ── Shared Button Component (.ky-btn) ─────────────────── */
/* Markup comes from render_ky_button() in
   front_page_pattern/3p_sections/core_ui/button.php — shape/spacing
   below come from the --ky-btn-* tokens, color is a modifier class. */
.ky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--ky-btn-padding);
    border-radius: var(--ky-btn-radius);
    font-family: var(--ky-font-body);
    font-size: var(--ky-btn-fs);
    font-weight: var(--ky-btn-fw);
    line-height: var(--ky-btn-lh);
    text-decoration: none !important;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.ky-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.ky-btn__icon {
    font-size: 0.9em;
    line-height: 1;
}

/* Color modifiers */
.ky-btn--gold {
    background-color: var(--ky-clr-primary);
    color: var(--ky-clr-white) !important;
}

.ky-btn--navy {
    background-color: var(--ky-clr-secondary);
    color: var(--ky-clr-white) !important;
}

.ky-btn--white {
    background-color: var(--ky-clr-white);
    color: var(--ky-clr-secondary) !important;
    border-color: var(--ky-clr-border);
}

.ky-btn--outline {
    background-color: transparent;
    color: var(--ky-clr-secondary) !important;
    border-color: var(--ky-clr-secondary);
}

/* Size modifiers */
.ky-btn--sm {
    padding: 8px 16px;
    font-size: 13px;
}

.ky-btn--lg {
    padding: 18px 32px;
    font-size: 16px;
}

/* ── Shared Tag/Pill Label (.ky-tag) ───────────────────── */
/* Markup comes from render_ky_tag() in
   front_page_pattern/3p_sections/core_ui/tag.php */
.ky-tag {
    display: inline-block;
    background: var(--ky-clr-primary);
    color: var(--ky-clr-white);
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.ky-tag--navy {
    background: var(--ky-clr-secondary);
}

/* ── .site-card  — standard card surface ─────────────── */
/* White surface, 4px radius, no border, soft always-on shadow.
   No hover transform/shadow change. Use for any card-style tile. */
.site-card {
    background: var(--ky-clr-white);
    border: none;
    border-radius: 4px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-sizing: border-box;
}

/* ── .marb  — decorative heading underline bar ───────── */
.marb {
    height: 8px;
    border: none;
    margin-bottom: 20px;
    margin-top: 0px;
    width: 40px;
}

/* ── .fnt  — Hero / main heading (H1 equivalent) ─────── */
.fnt {
    font-family: var(--ky-font-heading);
    text-transform: capitalize;
    font-size: var(--ky-fs-h2);
    font-weight: var(--ky-fw-light) !important;
    line-height: var(--ky-lh-tight) !important;
    letter-spacing: var(--ky-ls-tight);
    text-transform: capitalize !important;
}

/* ── .subhead_info  — Section heading (H2 equivalent) ── */
.subhead_info {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h3);
    letter-spacing: var(--ky-ls-normal);
    line-height: var(--ky-lh-snug);
    font-weight: var(--ky-fw-light);
}

/* ── .subsubhead_info  — Sub-section heading (H3) ────── */
.subsubhead_info {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h4);
    letter-spacing: var(--ky-ls-normal);
    line-height: var(--ky-lh-snug);
    font-weight: var(--ky-fw-light);
}

/* ── .data_head  — Card / data title (H4) ────────────── */
.data_head {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h4) !important;
    font-weight: var(--ky-fw-bold) !important;
    margin-top: 0px;
    line-height: var(--ky-lh-snug);
}

/* ── .data_desc  — Short data descriptions ───────────── */
.data_desc {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm) !important;
    font-weight: var(--ky-fw-regular) !important;
    line-height: var(--ky-lh-normal);
}

/* ── .para_desc  — Paragraph / body copy ─────────────── */
.para_desc {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-lg) !important;
    font-weight: var(--ky-fw-regular) !important;
    line-height: var(--ky-lh-relaxed);
}

/* ── .desc_date  — Date / meta information ───────────── */
.desc_date {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm) !important;
    font-weight: var(--ky-fw-regular) !important;
    margin-top: 0px;
    padding-bottom: 10px;
    font-style: italic;
    color: #8e8e8e;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ky-font-body);
}

h1 {
    font-size: var(--ky-fs-h1) !important;
    font-weight: 600;
    letter-spacing: normal;
}

/* ── Responsive overrides (existing breakpoints) ─────── */
@media screen and (max-width: 768px) {
    .fnt {
        font-size: 28px !important;
        line-height: 32px !important;
    }

    .marb {
        margin-bottom: 5px !important;
    }

    .subhead_info {
        font-size: 23px !important;
    }

    .subsubhead_info {
        font-size: 20px !important;
    }
}

/* ── Button text ─────────────────────────────────────── */
.btn,
.btn-3,
.btn-more,
.button,
.button--shikoba {
    font-family: var(--ky-font-body) !important;
}

/* ── Navigation ──────────────────────────────────────── */
.nav-item {
    font-family: var(--ky-font-body) !important;
}

.dropdown-item {
    font-family: var(--ky-font-body) !important;
}

/* ── Global link reset ───────────────────────────────── */
a {
    font-family: var(--ky-font-body);
    color: #000;
    text-decoration: none;
    background-color: transparent;
}

/* ── Paragraph base ──────────────────────────────────── */
p {
    font-family: var(--ky-font-body);
    font-size: 16px !important;
    line-height: var(--ky-lh-normal) !important;
}

/* ── Inline elements ─────────────────────────────────── */
span {
    font-family: var(--ky-font-body);
}

ul,
ol {
    font-family: var(--ky-font-body) !important;
}

li {
    font-family: var(--ky-font-body) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §4  ACTIVE TYPOGRAPHY CLASSES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ky-h1 {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h1);
    font-weight: var(--ky-fw-bold);
    line-height: var(--ky-lh-tight);
    letter-spacing: var(--ky-ls-tight);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §15  RESPONSIVE — Tablet (max-width: 1024px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 1024px) {
    .ky-h1 {
        font-size: clamp(2rem, 3.5vw + 0.25rem, 2.5rem);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §16  RESPONSIVE — Mobile (max-width: 768px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 768px) {
    .ky-h1 {
        font-size: 1.75rem;
        line-height: var(--ky-lh-tight);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §17  RESPONSIVE — Small Mobile (max-width: 480px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 480px) {
    .ky-h1 {
        font-size: 1.5rem;
    }
}