/*
 * Huellitas en el Cielo brand system: design tokens and reusable `hc-` components.
 * Loaded on every page after the extracted Bricks CSS and before theme.css.
 *
 * Every value below was measured on the original site (extracted CSS and computed styles),
 * so new screens look like the pages that already exist. Guide: docs/brand/README.md.
 *
 * Root font size is 10px (bricks-base.css sets html { font-size: 62.5% }): 1rem = 10px.
 *
 * Breakpoints (custom properties cannot be used inside media queries, so they live here).
 * The original site is desktop-first with Bricks' max-width steps; this file is mobile-first
 * and uses the next pixel up so both sides switch at the same width:
 *   phone         <= 478px    (min-width: 479px)  starts tablet
 *   tablet        <= 767px    (min-width: 768px)
 *   tablet wide   <= 991px    (min-width: 992px)  main menu appears
 *   laptop        <= 1279px   (min-width: 1280px)
 *   laptop wide   <= 1366px   (min-width: 1367px) desktop type scale
 */

:root {
    /* Brand palette. Same colors as the Bricks global palette in the extracted CSS. */
    --hc-teal: #02acc5;          /* --bricks-color-iwfues: buttons, kickers, outlines, dashed lines */
    --hc-teal-dark: #128a9d;     /* footer icon discs */
    --hc-orange: #ff9646;        /* --bricks-color-ynenpz: display titles, hearts, halos */
    --hc-grey-700: #595959;      /* --bricks-color-msewvd: all body text */
    --hc-grey-300: #d9d9d9;      /* footer input */
    --hc-grey-200: #ebebeb;      /* --bricks-color-oknhuk: soft cards, chips, fields */
    --hc-grey-100: #f5f5f5;      /* --bricks-color-eff044: page tint behind the pattern */
    --hc-white: #fff;

    /*
     * Text-safe inks and tints (added for accessibility, not in the original). Brand teal and
     * orange are under 3:1 on white, so small text on light backgrounds uses the inks
     * (>= 4.5:1 on white, on their tint and on #ebebeb).
     */
    --hc-teal-ink: #0b7385;
    --hc-teal-tint: #e6f6f9;
    --hc-orange-ink: #9c4a06;
    --hc-orange-tint: #fff1e6;
    --hc-red-ink: #b3261e;
    --hc-red-tint: #fdecec;

    /* Semantic aliases: components use these, never the raw palette. */
    --hc-color-primary: var(--hc-teal);
    --hc-color-primary-strong: var(--hc-teal-dark);
    --hc-color-accent: var(--hc-orange);
    --hc-color-text: var(--hc-grey-700);
    --hc-color-on-primary: var(--hc-white);
    --hc-color-surface: var(--hc-white);
    --hc-color-surface-soft: var(--hc-grey-200);
    --hc-color-page: var(--hc-grey-100);
    --hc-color-border: var(--hc-grey-200);
    --hc-color-link: var(--hc-teal-ink);
    --hc-color-focus: var(--hc-teal-ink);
    --hc-color-success: var(--hc-teal);
    --hc-color-success-ink: var(--hc-teal-ink);
    --hc-color-success-tint: var(--hc-teal-tint);
    --hc-color-alert: var(--hc-orange);
    --hc-color-alert-ink: var(--hc-orange-ink);
    --hc-color-alert-tint: var(--hc-orange-tint);
    --hc-color-error: var(--hc-red-ink);
    --hc-color-error-ink: var(--hc-red-ink);
    --hc-color-error-tint: var(--hc-red-tint);

    /* Fonts (fonts.css). Chennai has a single 700 face: always ask for 700. */
    --hc-font-display: "Chennai W00 Black", "Product Sans", sans-serif;
    --hc-font-body: "Product Sans", sans-serif;
    --hc-weight-regular: 400;
    --hc-weight-bold: 700;

    /*
     * Type scale, phone values; the tablet and desktop steps follow below. Each step is the
     * size an existing element has at that width (measured on /, /afiliacion/, /cementerio/).
     */
    --hc-text-sm: 1.5rem;      /* notes, legal: "RECUERDA..." box, "* Los pagos..." */
    --hc-text-md: 1.6rem;      /* body text: home "Así funciona", benefits, coverage list */
    --hc-text-lg: 1.8rem;      /* lead and bold subheads: "Después de 3 meses de Afiliación" */
    --hc-text-xl: 2rem;        /* card titles in Product Sans: review names */
    --hc-text-button: 2rem;    /* pill buttons: "Consultar mi afiliación" */
    --hc-text-input: 2rem;     /* text inputs: cemetery search (2.5rem from tablet) */
    --hc-text-badge: 1.4rem;   /* Chennai chips: "(PAGO ÚNICO)", "¡RECOMENDADO!" */
    --hc-title-kicker: clamp(2.5rem, 2vw, 3.2rem);   /* .size-subtitle-1: "Cementerio" */
    --hc-title-display: 4rem;  /* page h1 main word: "VIRTUAL" (5rem tablet, 6rem desktop) */
    --hc-title-section: clamp(4rem, 3vw, 5rem);      /* .size-title-2: "TIEMPOS DE CARENCIA" */
    --hc-title-card: 2.8rem;   /* Chennai card titles: tombstone names (3.5rem from tablet) */
    --hc-leading-tight: 1.1;
    --hc-leading-snug: 1.3;
    --hc-leading-body: 1.6;

    /* Spacing: the steps the extracted CSS actually uses. */
    --hc-space-1: 0.5rem;
    --hc-space-2: 1rem;
    --hc-space-3: 1.5rem;
    --hc-space-4: 2rem;
    --hc-space-5: 3rem;
    --hc-space-6: 5rem;
    --hc-space-7: 7rem;

    /* Radii. */
    --hc-radius-sm: 10px;      /* small chips, mobile menu box */
    --hc-radius-md: 15px;      /* fields, notices */
    --hc-radius-lg: 20px;      /* footer form, soft cards */
    --hc-radius-xl: 25px;      /* outlined cards: lookup banner */
    --hc-radius-2xl: 30px;     /* hero boxes */
    --hc-radius-pill: 50px;    /* buttons, badges */
    --hc-radius-round: 50%;    /* icon discs */

    /* Shadows: the brand has one, the soft teal glow under pill buttons. */
    --hc-glow-primary: 0 0 10px 0 var(--hc-color-primary);
    --hc-glow-accent: 0 0 10px 0 var(--hc-color-accent);

    /* Layout: content spans 1210px at 1440px with 8vw side gutters (header, footer, banner). */
    --hc-container-max: 121rem;
    --hc-container-narrow: 80rem;
    --hc-gutter: 8vw;
    --hc-border-width: 3px;

    /* Motion. */
    --hc-duration: 0.2s;
    --hc-ease: ease;
}

/* Tablet and laptop (Bricks' "<= 1366px" step). */
@media (min-width: 479px) {
    :root {
        --hc-text-sm: 1.6rem;
        --hc-text-md: 1.9rem;
        --hc-text-xl: 2.7rem;
        --hc-text-input: 2.5rem;
        --hc-text-badge: 1.6rem;
        --hc-title-display: 5rem;
        --hc-title-card: 3.5rem;
    }
}

/* Desktop (Bricks' base step, above 1366px). */
@media (min-width: 1367px) {
    :root {
        --hc-text-sm: 2.2rem;
        --hc-text-md: 2.5rem;
        --hc-text-lg: 2.6rem;
        --hc-text-badge: 1.8rem;
        --hc-title-display: 6rem;
    }
}

/* ------------------------------------------------------------------ Layout */

/* Page content column, aligned with the header and footer. */
.hc-container {
    box-sizing: border-box;
    width: min(100% - 2 * var(--hc-gutter), var(--hc-container-max));
    margin-inline: auto;
}

.hc-container--narrow {
    width: min(100% - 2 * var(--hc-gutter), var(--hc-container-narrow));
}

/* A brand page body: Product Sans in grey, generous room above the footer. */
.hc-page {
    padding-block: var(--hc-space-5) var(--hc-space-7);
    color: var(--hc-color-text);
    font-family: var(--hc-font-body);
    font-size: var(--hc-text-md);
    line-height: var(--hc-leading-body);
}

.hc-page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hc-space-3);
    margin-bottom: var(--hc-space-5);
    text-align: center;
}

/* Vertical rhythm without margins leaking between siblings. */
.hc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--hc-stack-gap, var(--hc-space-5));
}

.hc-stack > * {
    margin: 0;
}

/*
 * Dog and cat pattern behind the whole page, as on the cemetery and /afiliacion/. Add the
 * `hc-bg-pattern` body class (body_class filter in functions.php); the background goes on
 * <html> like the original so it scrolls with the page and sits under the header too.
 */
html:has(> body.hc-bg-pattern) {
    background-color: transparent;
    background-image: url("../img/fondo.png");
    background-position: top center;
    background-size: 60%;
    background-blend-mode: normal;
}

@media (max-width: 1366px) {
    html:has(> body.hc-bg-pattern) {
        background-color: var(--hc-color-page);
        background-blend-mode: luminosity;
    }
}

@media (max-width: 478px) {
    html:has(> body.hc-bg-pattern) {
        background-size: 600px;
    }
}

/* ------------------------------------------------------------------ Type */

/*
 * Title pairing: a small Product Sans word over a big uppercase Chennai word
 * ("Cementerio / VIRTUAL", "Nuestros / TIEMPOS DE CARENCIA"). Use one per section; the
 * page's first one is the <h1>.
 */
.hc-title {
    margin: 0;
    font-weight: var(--hc-weight-regular);
    line-height: var(--hc-leading-tight);
    text-align: center;
    overflow-wrap: break-word;
}

.hc-title__kicker {
    display: block;
    color: var(--hc-color-primary);
    font-family: var(--hc-font-body);
    font-size: var(--hc-title-kicker);
    font-weight: var(--hc-weight-regular);
    line-height: var(--hc-leading-snug);
}

.hc-title__main {
    display: block;
    color: var(--hc-color-accent);
    font-family: var(--hc-font-display);
    font-size: var(--hc-title-display);
    font-weight: var(--hc-weight-bold);
    line-height: var(--hc-leading-tight);
    text-transform: uppercase;
}

/* Section titles inside a page: smaller main word, grey uppercase kicker (/afiliacion/). */
.hc-title--section .hc-title__main {
    font-size: var(--hc-title-section);
}

.hc-title--neutral .hc-title__kicker {
    color: var(--hc-color-text);
    text-transform: uppercase;
}

.hc-title--start {
    text-align: start;
}

/* Chennai title for cards ("Ficha 9001", tombstone names). */
.hc-card-title {
    margin: 0;
    color: var(--hc-color-accent);
    font-family: var(--hc-font-display);
    font-size: var(--hc-title-card);
    font-weight: var(--hc-weight-bold);
    line-height: var(--hc-leading-tight);
    text-transform: uppercase;
}

.hc-lead {
    max-width: 60ch;
    margin: 0 auto;
    color: var(--hc-color-text);
    font-family: var(--hc-font-body);
    font-size: var(--hc-text-lg);
    line-height: var(--hc-leading-body);
    text-align: center;
}

.hc-small {
    font-size: var(--hc-text-sm);
    line-height: var(--hc-leading-body);
}

/* :where() keeps plain links in a brand page at the weight of `.hc-link`, so components win. */
.hc-link,
:where(.hc-page) a:not([class]) {
    color: var(--hc-color-link);
    font-weight: var(--hc-weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Dashed teal line, the motif of the waiting periods and the hero. */
.hc-divider {
    width: 100%;
    margin: var(--hc-space-4) 0;
    border: 0;
    border-top: 4px dashed var(--hc-color-primary);
}

/* ------------------------------------------------------------------ Buttons */

/* Pill button. Primary is the site's main call to action (teal, soft glow, orange on hover). */
.hc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hc-space-2);
    box-sizing: border-box;
    min-height: 44px;
    padding: 1.6rem 3rem;
    border: 0;
    border-radius: var(--hc-radius-pill);
    background-color: var(--hc-color-primary);
    box-shadow: var(--hc-glow-primary);
    color: var(--hc-color-on-primary);
    font-family: var(--hc-font-body);
    font-size: var(--hc-text-button);
    font-weight: var(--hc-weight-bold);
    line-height: 1.7;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--hc-duration) var(--hc-ease), color var(--hc-duration) var(--hc-ease), box-shadow var(--hc-duration) var(--hc-ease);
}

.hc-button:hover,
.hc-button:focus-visible {
    background-color: var(--hc-color-accent);
    color: var(--hc-color-on-primary);
}

.hc-button--secondary {
    background-color: var(--hc-color-accent);
    box-shadow: var(--hc-glow-accent);
}

.hc-button--secondary:hover,
.hc-button--secondary:focus-visible {
    background-color: var(--hc-color-primary);
}

/* Outline: secondary actions next to a primary one. Inset ring, so it keeps the same size. */
.hc-button--outline {
    background-color: var(--hc-color-surface);
    box-shadow: inset 0 0 0 var(--hc-border-width) var(--hc-color-primary);
    color: var(--hc-color-success-ink);
}

.hc-button--outline:hover,
.hc-button--outline:focus-visible {
    background-color: var(--hc-color-primary);
    box-shadow: inset 0 0 0 var(--hc-border-width) var(--hc-color-primary), var(--hc-glow-primary);
    color: var(--hc-color-on-primary);
}

.hc-button--block {
    width: 100%;
}

/* ------------------------------------------------------------------ Cards */

.hc-card {
    box-sizing: border-box;
    padding: clamp(2rem, 1rem + 2.5vw, 4rem);
    border-radius: var(--hc-radius-xl);
    background-color: var(--hc-color-surface);
    color: var(--hc-color-text);
}

/* Teal outline, as the lookup banner on /afiliacion/. */
.hc-card--outline {
    border: var(--hc-border-width) solid var(--hc-color-primary);
}

/* Grey box, as the benefits list and the "RECUERDA" note on /afiliacion/. */
.hc-card--soft {
    border-radius: var(--hc-radius-lg);
    background-color: var(--hc-color-surface-soft);
}

/* ------------------------------------------------------------------ Forms */

.hc-field {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-1);
    margin: 0;
}

.hc-label {
    color: var(--hc-color-text);
    font-family: var(--hc-font-body);
    font-size: var(--hc-text-md);
    font-weight: var(--hc-weight-bold);
    line-height: var(--hc-leading-snug);
}

.hc-help {
    color: var(--hc-color-text);
    font-size: var(--hc-text-sm);
    line-height: var(--hc-leading-snug);
}

/* Filled grey field, as the cemetery search and the footer subscription. */
.hc-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 1.2rem 2rem;
    border: 2px solid transparent;
    border-radius: var(--hc-radius-md);
    background-color: var(--hc-color-surface-soft);
    color: var(--hc-color-text);
    font-family: var(--hc-font-body);
    font-size: var(--hc-text-input);
    line-height: var(--hc-leading-snug);
    transition: border-color var(--hc-duration) var(--hc-ease), background-color var(--hc-duration) var(--hc-ease);
}

.hc-input::placeholder {
    color: #767676;
    opacity: 1;
}

.hc-input:hover {
    border-color: var(--hc-grey-300);
}

.hc-input:focus {
    border-color: var(--hc-color-primary);
    background-color: var(--hc-color-surface);
}

.hc-input[aria-invalid="true"] {
    border-color: var(--hc-color-error);
}

/* ------------------------------------------------------------------ Badges and notices */

/* Chennai chip, as "(PAGO ÚNICO)" and "¡RECOMENDADO!" under the prices. */
.hc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-space-1);
    padding: 0.4rem 1.4rem;
    border-radius: var(--hc-radius-pill);
    background-color: var(--hc-color-surface-soft);
    color: var(--hc-color-success-ink);
    font-family: var(--hc-font-display);
    font-size: var(--hc-text-badge);
    font-weight: var(--hc-weight-bold);
    line-height: var(--hc-leading-snug);
    text-transform: uppercase;
}

.hc-badge--success {
    background-color: var(--hc-color-success-tint);
    color: var(--hc-color-success-ink);
}

.hc-badge--alert {
    background-color: var(--hc-color-alert-tint);
    color: var(--hc-color-alert-ink);
}

.hc-badge--error {
    background-color: var(--hc-color-error-tint);
    color: var(--hc-color-error-ink);
}

/* Message box: success (teal), warn (orange) or error (red). */
.hc-notice {
    margin: 0;
    padding: var(--hc-space-3) var(--hc-space-4);
    border-left: 6px solid var(--hc-color-success);
    border-radius: var(--hc-radius-md);
    background-color: var(--hc-color-success-tint);
    color: var(--hc-color-success-ink);
    font-family: var(--hc-font-body);
    font-size: var(--hc-text-md);
    line-height: var(--hc-leading-body);
}

.hc-notice--warn {
    border-left-color: var(--hc-color-alert);
    background-color: var(--hc-color-alert-tint);
    color: var(--hc-color-alert-ink);
}

.hc-notice--error {
    border-left-color: var(--hc-color-error);
    background-color: var(--hc-color-error-tint);
    color: var(--hc-color-error-ink);
}

.hc-notice a {
    color: inherit;
    font-weight: var(--hc-weight-bold);
    text-decoration: underline;
}

/* ------------------------------------------------------------------ Accessibility */

/* One visible focus ring for every brand control. */
.hc-button:focus-visible,
.hc-input:focus-visible,
.hc-link:focus-visible,
:where(.hc-page) a:focus-visible,
.hc-notice a:focus-visible {
    outline: 3px solid var(--hc-color-focus);
    outline-offset: 3px;
}

.hc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .hc-button,
    .hc-input {
        transition: none;
    }
}