/*
Theme Name: AMA Biovital Child
Theme URI:      https://amaregenmedskincare.com
Description:    AMA Regenerative Medicine & Skincare child theme. Inherits Biovital, overrides design tokens to match the AMA brand, and provides single-treatment.php for the merged regen + skincare site.
Author:         AMA
Author URI:     https://amaregenmedskincare.com
Template:       biovital
Version:        1.1.0
Requires PHP:   7.4
Requires at least: 6.0
License:        GPL-2.0-or-later
Text Domain:    ama-biovital-child
Tags:           medical, custom-post-types
*/

/* ============================================================================
 * Strategy
 * ----------------------------------------------------------------------------
 * Biovital ships a complete design system via CSS custom properties under the
 * --cmsmasters-* prefix. We do NOT recreate that system here. We:
 *
 *   1. Override only what differs for AMA (color repaint placeholders, font
 *      stack confirmation, section spacing for the treatment template).
 *   2. Add layout CSS specific to the single-treatment.php template that lives
 *      in this child theme (the parent's templates don't know about ACF).
 *
 * When the AMA logo's hex codes land, swap the placeholders in the AMA token
 * block below. Everything cascades from there.
 * ========================================================================= */

:root {
    /* --- AMA brand tokens (placeholders until logo hex codes land) --- */
    --ama-primary:        #3a7d6e;            /* TODO:logo */
    --ama-primary-50:     #eaf3f0;
    --ama-primary-100:    #cfe3dc;
    --ama-primary-600:    #2f6a5d;
    --ama-primary-700:    #25564b;
    --ama-primary-900:    #133329;

    --ama-accent:         #c98a4b;            /* TODO:logo */
    --ama-accent-600:     #b3753b;
    --ama-accent-100:     #f5e9d8;

    --ama-bg-tint:        #eef3f1;
    --ama-divider:        #ecebe6;

    --ama-reading-w:      760px;
    --ama-narrow-w:       640px;
    --ama-wide-w:         1200px;

    --ama-radius:         8px;
    --ama-radius-lg:      14px;
    --ama-radius-pill:    999px;

    --ama-shadow-focus:   0 0 0 3px rgba(58, 125, 110, 0.35);

    /* --- Biovital parent overrides — uncomment once logo colors are in --- */
    /*
    --cmsmasters-colors-link:     var(--ama-acent);
    --cmsmasters-colors-hover:    var(--ama-primary-700);
    --cmsmasters-colors-heading:  var(--ama-primary-900);
    */
}

/* =============================================================================
 * Single Treatment Template — bound to the markup in single-treatment.php.
 * Class prefix .ama-t__ for namespace clarity.
 * ========================================================================== */

.ama-t {
    /* Use Biovital's body color so it picks up parent palette */
    color: var(--cmsmasters-colors-text, #2a2a2a);
    /* Override Elementor's heading color for all treatment headings */
    --cmsmasters-colors-heading: #932F77;
}

.ama-t__container {
    max-width: var(--ama-wide-w);
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}
.ama-t__reading { max-width: var(--ama-reading-w); margin-inline: auto; }
.ama-t__narrow  { max-width: var(--ama-narrow-w);  margin-inline: auto; }

/* ---- Section rhythm ------------------------------------------------------ */
.ama-t__section {
    padding-block: clamp(3rem, 7vw, 6rem);
}
.ama-t__section--alt {
    background: var(--cmsmasters-colors-alternate, var(--ama-bg-tint));
}
.ama-t__section + .ama-t__section:not(.ama-t__section--alt):not(:has(+ .ama-t__section--alt)) {
    border-top: 1px solid var(--cmsmasters-colors-bd, var(--ama-divider));
}

/* ---- Eyebrow / kicker ---------------------------------------------------- */
.ama-t__eyebrow {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ama-primary-700);
    font-weight: 600;
    margin: 0 0 0.75rem;
}

/* ---- Hero (split-screen + credibility strip) ----------------------------- */
.ama-t__hero {
    padding-block-start: clamp(7rem, 10vh, 20rem);
    padding-block-end:   clamp(2rem, 5vw, 4rem);
    background: linear-gradient(
        to bottom,
        var(--cmsmasters-colors-alternate, var(--ama-bg-tint)) 0%,
        var(--cmsmasters-colors-bg,        #ffffff) 100%
    );
}
.ama-t__hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}
@media (min-width: 900px) {
    .ama-t__hero-grid { grid-template-columns: 1.05fr 1fr; }
}
.ama-t__h1 {
    font-family: var(--cmsmasters-font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 4rem 0 0.6em;
    color: #932F77 !important;
    font-weight: 500;
}
.ama-t__lede {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.55;
    color: var(--cmsmasters-colors-text, #555);
    margin: 0 0 1.75rem;
    max-width: 38em;
}
.ama-t__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
}
.ama-t__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.875rem;
    border-radius: var(--ama-radius-pill);
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background 220ms ease, color 220ms ease, transform 220ms ease;
    background: var(--cmsmasters-colors-link, var(--ama-primary));
    color: #fff;
    border: 1.5px solid transparent;
}
.ama-t__btn:hover { background: var(--cmsmasters-colors-hover, var(--ama-primary-700)); color: #fff; }
.ama-t__btn--ghost {
    background: transparent;
    color: var(--cmsmasters-colors-link, var(--ama-primary));
    border-color: currentColor;
}
.ama-t__btn--ghost:hover {
    background: var(--cmsmasters-colors-link, var(--ama-primary));
    color: #fff;
}
.ama-t__btn:focus-visible { outline: none; box-shadow: var(--ama-shadow-focus); }
.ama-t__hero-video-link {
    color: var(--cmsmasters-colors-link, var(--ama-primary));
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.ama-t__hero-video-link::before { content: "▶"; font-size: 0.85em; }
.ama-t__hero-img {
    width: 100%;
    height: auto;
    border-radius: var(--ama-radius-lg);
    display: block;
    box-shadow: 0 12px 32px rgba(20, 30, 28, 0.10);
	margin-top: 2rem;
}
.ama-t__credibility {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    list-style: none;
    margin: 2rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--cmsmasters-colors-bd, var(--ama-divider));
    color: var(--cmsmasters-colors-text, #5a5a5a);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.ama-t__credibility li::before {
    content: "✦";
    color: var(--ama-primary);
    margin-right: 0.5rem;
}
.ama-t__hero-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.ama-t__hero-thumbs img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ama-radius);
    cursor: zoom-in;
}

/* ---- Prose blocks -------------------------------------------------------- */
.ama-t__prose-h2 {
    font-family: var(--cmsmasters-font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 0.75em;
    color: var(--cmsmasters-colors-heading, #1c1c1c);
    font-weight: 500;
}
.ama-t__prose-body { line-height: 1.7; font-size: 1.0625rem; }
.ama-t__prose-body > * + * { margin-top: 1em; }
.ama-t__prose-body h3 {
    font-family: var(--cmsmasters-font-heading, serif);
    font-size: 1.375rem;
    margin: 1.5em 0 0.5em;
    color: var(--cmsmasters-colors-heading, #1c1c1c);
}

.ama-t__prose-with-image {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .ama-t__prose-with-image { grid-template-columns: 1.2fr 1fr; }
    .ama-t__prose-with-image--left { direction: rtl; }
    .ama-t__prose-with-image--left > * { direction: ltr; }
}
.ama-t__prose-image img {
    width: 100%;
    height: auto;
    border-radius: var(--ama-radius-lg);
    display: block;
    box-shadow: 0 8px 24px rgba(20, 30, 28, 0.08);
}

/* ---- Two-column ---------------------------------------------------------- */
.ama-t__two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 900px) { .ama-t__two-col { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* ---- Gallery ------------------------------------------------------------- */
.ama-t__gallery {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.ama-t__gallery li img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ama-radius);
    transition: transform 280ms ease;
}
.ama-t__gallery li:hover img { transform: scale(1.02); }

/* ---- Before / After ------------------------------------------------------ */
.ama-t__ba { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 2rem; }
.ama-t__ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ama-t__ba figure { margin: 0; }
.ama-t__ba img {
    width: 100%; aspect-ratio: 4/5; object-fit: cover;
    border-radius: var(--ama-radius);
}
.ama-t__ba figcaption {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cmsmasters-colors-text, #5a5a5a);
}

/* ---- Conditions list / "What it targets" -------------------------------- */
.ama-t__cond {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
}
@media (min-width: 900px) {
    .ama-t__cond { grid-template-columns: repeat(2, 1fr); }
}
.ama-t__cond-col h3 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ama-primary-700);
    margin: 0 0 0.75rem;
}
.ama-t__cond-col ul {
    margin: 0; padding: 0; list-style: none;
}
.ama-t__cond-col li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    border-bottom: 1px solid var(--cmsmasters-colors-bd, var(--ama-divider));
    position: relative;
}
.ama-t__cond-col li::before {
    content: "→";
    position: absolute; left: 0; top: 0.5rem;
    color: var(--ama-primary);
}

/* ---- CTA banners --------------------------------------------------------- */
.ama-t__cta {
    border-radius: var(--ama-radius-lg);
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
    background: var(--cmsmasters-colors-alternate, var(--ama-bg-tint));
}
.ama-t__cta--dark {
    background: var(--ama-primary-900);
    color: #fff;
}
.ama-t__cta--image {
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
}
.ama-t__cta--image::before {
    content: "";
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.45);
    border-radius: inherit;
}
.ama-t__cta--image > * { position: relative; }
.ama-t__cta-h {
    font-family: var(--cmsmasters-font-heading, serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0.25em 0 0.5em;
    line-height: 1.2;
}
.ama-t__cta p { max-width: 38em; margin: 0 auto 1.5rem; }

/* ---- Steps --------------------------------------------------------------- */
.ama-t__steps {
    counter-reset: step;
    list-style: none;
    padding: 0; margin: 1.5rem 0 0;
    display: grid;
    gap: 1.25rem;
}
.ama-t__steps li {
    counter-increment: step;
    padding-left: 3.25rem;
    position: relative;
}
.ama-t__steps li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 0;
    width: 2.4rem; height: 2.4rem;
    border-radius: 999px;
    background: var(--cmsmasters-colors-link, var(--ama-primary));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-family: var(--cmsmasters-font-heading, serif);
    font-size: 1.125rem;
}

/* ---- Pricing ------------------------------------------------------------- */
.ama-t__pricing {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ama-t__pricing li {
    padding: 1.75rem;
    border: 1px solid var(--cmsmasters-colors-bd, var(--ama-divider));
    border-radius: var(--ama-radius-lg);
    background: var(--cmsmasters-colors-bg, #fff);
}
.ama-t__pricing-name { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ama-primary-700); margin: 0 0 0.5em; }
.ama-t__pricing-price { font-family: var(--cmsmasters-font-heading, serif); font-size: 1.875rem; font-weight: 500; color: var(--cmsmasters-colors-heading, #1c1c1c); margin: 0 0 0.5em; }

/* ---- Related grid -------------------------------------------------------- */
.ama-t__related {
    list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.ama-t__related a {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--ama-radius);
    overflow: hidden;
    border: 1px solid var(--cmsmasters-colors-bd, var(--ama-divider));
    background: var(--cmsmasters-colors-bg, #fff);
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.ama-t__related a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(20,30,28,0.08); }
.ama-t__related img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 16/10; object-fit: cover;
}
.ama-t__related-title {
    display: block;
    padding: 0.875rem 1.125rem;
    font-weight: 500;
    color: var(--cmsmasters-colors-heading, #1c1c1c);
}

/* ---- Testimonials -------------------------------------------------------- */
.ama-t__testi {
    list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ama-t__testi li {
    padding: 1.75rem;
    background: var(--cmsmasters-colors-alternate, var(--ama-bg-tint));
    border-radius: var(--ama-radius-lg);
    position: relative;
}
.ama-t__testi li::before {
    content: "“";
    position: absolute; top: -0.25em; left: 0.25em;
    font-family: var(--cmsmasters-font-heading, serif);
    font-size: 4rem;
    color: var(--ama-primary);
    opacity: 0.2;
    line-height: 1;
}
.ama-t__testi blockquote {
    margin: 0 0 0.75rem;
    line-height: 1.6;
    position: relative;
}
.ama-t__testi cite {
    font-style: normal;
    font-weight: 600;
    color: var(--cmsmasters-colors-heading, #1c1c1c);
    font-size: 0.875rem;
}

/* ---- FAQs ---------------------------------------------------------------- */
.ama-t__faqs {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--cmsmasters-colors-bd, var(--ama-divider));
}
.ama-t__faqs li {
    border-bottom: 1px solid var(--cmsmasters-colors-bd, var(--ama-divider));
}
.ama-t__faqs details { padding: 1.25rem 0; }
.ama-t__faqs summary {
    cursor: pointer;
    font-weight: 600;
    font-family: var(--cmsmasters-font-heading, serif);
    font-size: clamp(1.125rem, 1.6vw, 1.25rem);
    color: var(--cmsmasters-colors-heading, #1c1c1c);
    list-style: none;
    padding-right: 2rem;
    position: relative;
    line-height: 1.4;
}
.ama-t__faqs summary::-webkit-details-marker { display: none; }
.ama-t__faqs summary::after {
    content: "+";
    position: absolute; right: 0; top: -0.1em;
    font-weight: 300;
    font-size: 1.75rem;
    color: var(--ama-primary);
    transition: transform 220ms ease;
}
.ama-t__faqs details[open] summary::after { content: "−"; transform: rotate(0); }
.ama-t__faqs details > div {
    padding-top: 0.75rem;
    line-height: 1.7;
    color: var(--cmsmasters-colors-text, #444);
}
.ama-t__faqs details > div > * + * { margin-top: 0.75em; }

/* ---- References (collapsible) ------------------------------------------- */
.ama-t__refs-wrapper details > summary {
    cursor: pointer;
    font-family: var(--cmsmasters-font-heading, serif);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--cmsmasters-colors-heading, #1c1c1c);
    list-style: none;
    position: relative;
    padding-right: 2rem;
    margin: 0;
    display: inline-block;
}
.ama-t__refs-wrapper summary::-webkit-details-marker { display: none; }
.ama-t__refs-wrapper summary::after {
    content: "▸";
    position: absolute; right: -1rem; top: 50%;
    transform: translateY(-50%);
    color: var(--ama-primary);
    transition: transform 220ms ease;
    font-size: 0.85em;
}
.ama-t__refs-wrapper details[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.ama-t__refs {
    padding-left: 1.5rem;
    line-height: 1.6;
    margin-top: 1.25rem;
    color: var(--cmsmasters-colors-text, #444);
}
.ama-t__refs li { margin-block: 0.65em; }
.ama-t__refs a { color: var(--cmsmasters-colors-link, var(--ama-secondary)); }

/* ---- Disclaimers / captions --------------------------------------------- */
.ama-t__disclaimer {
    font-size: 0.875rem;
    color: var(--cmsmasters-colors-text, #777);
    font-style: italic;
    margin-top: 1rem;
}
.ama-t__caption {
    color: var(--cmsmasters-colors-text, #5a5a5a);
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

/* =============================================================================
 * Condition-specific extensions
 *   .ama-c__symptoms        — symptoms surfaced right under hero (alt-tinted)
 *   .ama-c__sym-grid        — primary / secondary 2-column list
 *   .ama-c__warning         — "When to seek care" callout box
 *   .ama-c__treatments      — "How we treat this" treatments_offered grid (the lever)
 * ========================================================================== */

.ama-c__symptoms {
    /* Inherits .ama-t__section padding. */
}
.ama-c__sym-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 3rem;
    margin-top: 1.25rem;
}
@media (min-width: 800px) {
    .ama-c__sym-grid { grid-template-columns: 1fr 1fr; }
}
.ama-c__sym-col h3 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ama-primary-700);
    margin: 0 0 0.75rem;
}
.ama-c__sym-col ul { margin: 0; padding: 0; list-style: none; }
.ama-c__sym-col li {
    padding: 0.5rem 0 0.5rem 1.25rem;
    border-bottom: 1px solid var(--cmsmasters-colors-bd, var(--ama-divider));
    position: relative;
}
.ama-c__sym-col li::before {
    content: "•";
    position: absolute; left: 0; top: 0.5rem;
    color: var(--ama-primary);
    font-weight: 700;
}

.ama-c__warning {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--ama-accent, #c98a4b);
    background: var(--cmsmasters-colors-bg, #fff);
    border-radius: 0 var(--ama-radius) var(--ama-radius) 0;
}
.ama-c__warning h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ama-accent-600, #b3753b);
}
.ama-c__warning p { margin: 0; line-height: 1.55; }

/* "How we treat this" — patient-journey conversion lever */
.ama-c__treatments-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ama-c__treatment-lede {
    display: block;
    padding: 0 1.125rem 1.125rem;
    color: var(--cmsmasters-colors-text, #5a5a5a);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.ama-c__treatments .ama-t__related a {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ama-c__treatments .ama-t__related-title {
    font-family: var(--cmsmasters-font-heading, serif);
    font-size: 1.125rem;
    padding-block: 1rem;
}

/* =============================================================================
 * Reduced motion + forced colors safety
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ama-t * { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
    .ama-t__btn,
    .ama-t__faqs summary::after,
    .ama-t__refs-wrapper summary::after { color: CanvasText; }
}