/* =========================================================================
   KAAYA GLOW — TEXT-OVER-PHOTOGRAPHY LEGIBILITY LAYER
   Added per client feedback (item 7): "Small prints on the picture is hard
   to read, any other option?"

   WHY THIS IS A SEPARATE SHEET RATHER THAN EDITS IN PLACE
   kaaya-editorial.css is ~106KB and is the shared design system for the
   whole site. The legibility problem is narrow and specific — it only
   affects copy that sits ON TOP of a photo — so the fixes live here,
   isolated, where they can be reviewed as a set and reverted in one move
   if any of it goes too far. Loaded immediately after kaaya-editorial.css
   in includes/header.php.

   THE DIAGNOSIS
   The original rules stacked three legibility penalties on top of each
   other, on copy that already had a photograph fighting it:
     1. very small type          — 10px, 11px, 11.5px, 13px
     2. diluted colour           — opacity 0.55 / 0.68 / 0.85 on white
     3. a soft scrim             — gradients that faded to near-zero in
                                   the middle of the card
   Any one of those alone is survivable. All three together is not.

   THE APPROACH — three things, in order of how much they actually help:
     1. RAISE THE FLOOR ON SIZE. Nothing that sits over a photo drops
        below 12px, and body copy over photos starts at 13.5–14px.
     2. STOP DILUTING THE INK. Opacity on text is replaced with solid,
        deliberately-chosen colours. Faded white on a busy photo is the
        single worst offender; 0.55 opacity white over a mid-tone
        photograph lands around a 2:1 contrast ratio, which is below
        every accessibility threshold there is.
     3. GIVE THE TEXT ITS OWN BACKGROUND. Deeper, further-reaching
        gradient scrims plus a soft text-shadow, so legibility does not
        depend on which photo happens to be behind the text. This is the
        part that makes the result robust when the studio swaps in new
        photography later — a fix that only works against the current
        images is not really a fix.

   Everything here is a targeted override. No new markup is required, and
   no layout geometry changes — only type size, colour and scrim depth.
   ========================================================================= */

/* =========================================================================
   1. SHARED — a reusable shadow for any text over an image.
   Kept subtle: enough to lift type off a busy background, not so much
   that it reads as a drop-shadow effect on a plain one.
   ========================================================================= */

.kg-service-card-body,
.kg-offer-card-body,
.kg-acc-bottom,
.kg-acc-top,
.kg-deck-card-media-foot,
.hero-content,
.sv-hero-content,
.kg-final-cta-content,
.kg-why-feature-content {
    text-shadow: 0 1px 12px rgba(5, 31, 32, 0.55);
}

/* =========================================================================
   2. HOMEPAGE SERVICE CARDS
   Description was 13px at 0.9 opacity over a full-bleed photo.
   ========================================================================= */

.kg-service-card-body {
    /* Deeper, taller scrim. The original faded out too early, leaving the
       description sitting on bare photograph. */
    background: linear-gradient(
        180deg,
        rgba(5, 31, 32, 0) 0%,
        rgba(5, 31, 32, 0.35) 30%,
        rgba(5, 31, 32, 0.78) 64%,
        rgba(5, 31, 32, 0.94) 100%
    );
}

.kg-service-card-number {
    font-size: 13px;
    letter-spacing: 0.16em;
    /* Gold on photography is the weakest link in the original palette.
       Lightened towards cream so it holds against a bright image. */
    color: #f0d9a8;
}

.kg-service-card-title {
    font-size: clamp(22px, 1.7vw, 28px);
}

.kg-service-card-desc {
    font-size: 14px;
    line-height: 1.6;
    /* Was var(--kaaya-beige) at 0.9. Solid, near-white instead. */
    color: rgba(255, 255, 255, 0.94);
    opacity: 1;
}

/* =========================================================================
   3. SPECIAL OFFER CARDS
   The worst case on the site: a 10px uppercase category label and 13px
   description, both over a photo, both faded.
   ========================================================================= */

.kg-offer-card-body {
    background: linear-gradient(
        180deg,
        rgba(5, 31, 32, 0) 0%,
        rgba(5, 31, 32, 0.4) 26%,
        rgba(5, 31, 32, 0.82) 60%,
        rgba(5, 31, 32, 0.96) 100%
    );
}

.kg-offer-card-cat {
    /* 10px → 12px. Below about 11px, uppercase letter-spaced type stops
       being read and starts being decoration. */
    font-size: 12px;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: #f0d9a8;
}

.kg-offer-card-title {
    font-size: clamp(24px, 2.2vw, 28px);
}

.kg-offer-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.93);
    opacity: 1;
}

.kg-offer-card-price,
.kg-offer-card-duration {
    font-size: 14px;
    color: #ffffff;
}

/* =========================================================================
   4. REVIEW CARDS
   Handle at 0.55 opacity / 11px and teaser at 0.68 / 11.5px were the two
   lowest-contrast pieces of text anywhere on the site.
   ========================================================================= */

.kg-acc-scrim {
    background: linear-gradient(
        180deg,
        rgba(5, 31, 32, 0.62) 0%,
        rgba(5, 31, 32, 0.24) 30%,
        rgba(5, 31, 32, 0.52) 58%,
        rgba(5, 31, 32, 0.97) 100%
    );
}

.kg-acc-name {
    font-size: 14px;
    color: #ffffff;
}

.kg-acc-handle {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.82);
}

.kg-acc-teaser {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.kg-acc-quote {
    font-size: 15px;
    line-height: 1.7;
    color: #ffffff;
}

.kg-acc-stars {
    font-size: 13px;
    color: #f0d9a8;
}

.kg-acc-more {
    font-size: 13px;
    letter-spacing: 0.1em;
}

/* =========================================================================
   5. MEMBERSHIP DECK CARDS
   ========================================================================= */

.kg-deck-card-label {
    font-size: 12px;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.kg-deck-card-media-foot {
    background: none !important;
    text-shadow: none !important;
}

/* =========================================================================
   6. HEROES & FULL-BLEED CTA BANDS
   These already have an overlay element, but it is a flat tint that treats
   the top and bottom of the image the same. A vertical gradient puts the
   density where the text actually is.
   ========================================================================= */

.hero-overlay,
.sv-hero-overlay,
.kg-final-cta-overlay {
    background: linear-gradient(
        180deg,
        rgba(5, 31, 32, 0.58) 0%,
        rgba(5, 31, 32, 0.42) 42%,
        rgba(5, 31, 32, 0.68) 100%
    );
}

.hero-subtitle {
    font-size: clamp(16px, 1.7vw, 20px);
    color: rgba(255, 255, 255, 0.95);
}

/* Category/meta strip in page heroes — was small and letter-spaced. */
.sv-hero-meta {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.92);
}

/* =========================================================================
   7. "WHY CHOOSE US" FEATURE TILE
   Copy sits directly on a treatment-room photo.
   ========================================================================= */

.kg-why-feature-content {
    background: linear-gradient(
        180deg,
        rgba(5, 31, 32, 0) 0%,
        rgba(5, 31, 32, 0.55) 45%,
        rgba(5, 31, 32, 0.94) 100%
    );
}

.kg-why-feature-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.93);
}

/* =========================================================================
   8. GALLERY CAPTIONS (gallery.php + homepage collage)
   ========================================================================= */

.ge-tile-caption,
.ge-tile-caption span,
.collage-item figcaption {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.94);
}

/* =========================================================================
   9. HIGH-CONTRAST FALLBACK
   For anyone who has asked their OS for more contrast, drop the artful
   gradients entirely and use flat, heavy scrims.
   ========================================================================= */

@media (prefers-contrast: more) {

    .kg-service-card-body,
    .kg-offer-card-body,
    .kg-deck-card-media-foot,
    .kg-why-feature-content {
        background: rgba(5, 31, 32, 0.9);
    }

    .kg-acc-scrim {
        background: rgba(5, 31, 32, 0.82);
    }

    .hero-overlay,
    .sv-hero-overlay,
    .kg-final-cta-overlay {
        background: rgba(5, 31, 32, 0.72);
    }

    .kg-service-card-desc,
    .kg-offer-card-desc,
    .kg-acc-teaser,
    .kg-acc-handle,
    .hero-subtitle {
        color: #ffffff;
    }
}

/* =========================================================================
   10. THE JOURNEY INDEX (client feedback items 3 & 4)
   The numbered marker that now runs down the homepage. Lives here rather
   than in kaaya-editorial.css for the same reason as everything above:
   it is a discrete, reviewable change tied to one piece of feedback.
   ========================================================================= */

.kg-journey-index {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.kg-journey-index .kg-number {
    font-family: var(--kg-heading-font);
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 600;
    line-height: 1;
    color: var(--kaaya-gold);
}

.kg-journey-index .kg-divider-v {
    width: 1px;
    height: 30px;
    background: currentColor;
    opacity: 0.28;
    flex-shrink: 0;
}

.kg-journey-index .kg-eyebrow {
    margin-bottom: 0;
}

/* On the dark bands (offers / reviews) the gold needs lifting. */
.kg-on-dark .kg-journey-index .kg-number {
    color: #f0d9a8;
}

/* Sub-steps (Packages under 02, Membership under 04) — same family,
   deliberately quieter, so they read as part of the parent step rather
   than as competing steps of their own. */
.kg-journey-substep {
    opacity: 0.9;
}

/* DE-CONFLICTING NESTED COUNTERS
   The "Why Choose Us" cards and the service-category cards carry their own
   01/02/03 counters. With the journey markers now on the page, two
   unrelated numbering systems were rendering at similar weight in the same
   band, which made neither of them mean anything. The card-level counters
   drop back to a small muted tally so the large gold numeral is
   unambiguously the journey step. */
.kg-why-card .kg-number,
.kg-service-card-number {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    opacity: 0.75;
}

.kg-why-card .kg-number {
    font-family: var(--kg-body-font);
    color: var(--kaaya-moss);
}

@media (max-width: 640px) {
    .kg-journey-index {
        gap: 12px;
    }
    .kg-journey-index .kg-number {
        font-size: 28px;
    }
}