/*
Theme Name:   Motay
Theme URI:    https://ministryofteensandyouth.org
Description:  Child theme for the LoveWorld Ministry of Teens & Youth site. Carries the design tokens, the two self-hosted typefaces and the custom homepage template.
Author:       LoveWorld Ministry of Teens & Youth
Template:     astra
Version:      0.3.1
Text Domain:  motay
*/

/* -------------------------------------------------------------------------
   Design tokens
   The source of truth is CLAUDE.md, Design system. Change them there first.

   Every contrast figure below is measured, not estimated. WCAG 2.1 AA wants
   4.5:1 for normal text and 3:1 for large text. Anything marked FAILS must
   not be used for text, at any size, no exceptions.
   ------------------------------------------------------------------------- */

:root {
    /* Ground and surface */
    --motay-ink:        #0C0F17;  /* main ground */
    --motay-ink-2:      #151A26;  /* raised surfaces */
    --motay-paper:      #F4F2ED;  /* light sections, and text on dark: 17.2:1 on ink */

    /* Brand */
    --motay-blue:       #2D6BFF;  /* accent and fills */
    --motay-orange:     #FF6A1A;  /* primary buttons, Give */
    --motay-aqua:       #12DFC0;  /* secondary accent, labels: 11.3:1 on ink */
    --motay-muted:      #8A93A6;  /* secondary text: 6.2:1 on ink, 5.8:1 on ink-2 */
    --motay-live:       #FF3B30;  /* the LIVE dot and "new" markers only, never a text fill */

    /* ---------------------------------------------------------------------
       Text colours, decided 2026-09-11. Use these on coloured grounds rather
       than picking a brand colour by eye.
       --------------------------------------------------------------------- */

    /* Orange takes ink, never white. White on this orange is 2.9:1 and FAILS
       at every size. Ink on it is 6.7:1. */
    --motay-on-orange:  var(--motay-ink);

    /* Blue takes pure white at 4.51:1, which passes with nothing to spare.
       Paper on the same blue is only 4.03:1 and FAILS, so do not reach for
       paper here out of habit, and do not lighten the blue. */
    --motay-on-blue:    #FFFFFF;

    /* Aqua is bright, so it takes ink: 11.3:1. */
    --motay-on-aqua:    var(--motay-ink);

    /* Brand blue as link text on the dark ground is 4.27:1 and FAILS. This is
       the same blue lifted until it passes: 6.2:1 on ink. Fills and large
       display type can still use --motay-blue. */
    --motay-blue-link:  #5C8DFF;

    /* Type */
    --motay-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --motay-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Display type is heavy and tightly tracked. Body type is not. */
    --motay-display-weight: 800;
    --motay-display-track:  -0.03em;
    --motay-display-lead:   0.92;

    /* Fluid scale, 390px to 1440px. The hero lands near 118px on desktop and
       stays readable at 390px, which is the width we design at first. */
    /* Measured off design/Landing-page-v3.jpg: the headline is about 76px at
       1600px wide, not the 118px the brief quoted. 118px does not fit inside
       the hero panel at any desktop width, which is how the discrepancy
       showed up: "Everywhere" was clipped by the panel edge. */
    --motay-step-hero: clamp(2.75rem, 1.4rem + 5.2vw, 4.75rem);
    --motay-step-xl:   clamp(2.25rem, 1.3rem + 4.0vw, 4rem);
    --motay-step-lg:   clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
    --motay-step-md:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --motay-step-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --motay-step-sm:   0.875rem;

    /* Rhythm */
    --motay-gutter:    clamp(1rem, 0.5rem + 2vw, 2.5rem);
    --motay-section:   clamp(3.5rem, 2rem + 7vw, 8rem);
    --motay-measure:   68ch;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

/* An author display rule on a class outranks the browser's [hidden] style, so
   hiding an element with the attribute silently stops working. This puts it
   back, once, for every component. */
[hidden] {
    display: none !important;
}

body {
    background-color: var(--motay-ink);
    color: var(--motay-paper);
    font-family: var(--motay-font-body);
    font-size: var(--motay-step-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .motay-display {
    font-family: var(--motay-font-display);
    font-weight: var(--motay-display-weight);
    letter-spacing: var(--motay-display-track);
    line-height: var(--motay-display-lead);
    text-wrap: balance;
}

h1 { font-size: var(--motay-step-xl); font-weight: 900; }
h2 { font-size: var(--motay-step-lg); }
h3 { font-size: var(--motay-step-md); }

/* Every heading of ours takes its colour from the section it sits in, and says
   so, because Astra colours h1 to h6 from its own settings and an explicit
   rule beats an inherited one.

   This cost the first live preview. Astra's heading colour on live is still
   the starter template's `--ast-global-color-2`, `#0F172A`, which is within a
   few points of our own ink ground, so every title rendered at about 1.05:1:
   present in the page, legible to a screen reader, and invisible on screen.
   The standfirsts were fine, because those state their colour. It looked
   correct locally only because the palette script had been run here and
   nowhere else, which is exactly the kind of difference a theme must not
   depend on: our pages now read the same whatever Astra is set to, and the
   palette script is a nicety rather than a requirement.

   `inherit` rather than a fixed colour, because the section is what knows: the
   dark bands pass paper down, the paper bands pass ink down, and a card on
   orange sets its own. The attribute selector reaches only headings carrying
   one of our classes, so Elementor and editor content are left to Astra, and
   it outranks `h1, h2, h3, h4, h5, h6` without !important.

   Prose typed by an editor has no class of ours, so the wrapper carries it. */
h1[class*="motay-"],
h2[class*="motay-"],
h3[class*="motay-"],
h4[class*="motay-"],
h5[class*="motay-"],
h6[class*="motay-"],
.motay-single__body :where(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

p  { max-width: var(--motay-measure); }

a         { color: var(--motay-blue-link); }
a:hover   { color: var(--motay-paper); }

/*
 * Focus.
 *
 * Named element by element rather than as a bare :focus-visible. Astra styles
 * a:focus with its own dotted ring, and a bare pseudo-class selector loses to
 * it: measured, every focusable element on the page was getting Astra's
 * dotted paper outline and none was getting this one. Visible, but not the
 * designed state and not consistent with the rest of the system.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.motay-chip:focus-visible,
.motay-btn:focus-visible {
    outline: 3px solid var(--motay-aqua);
    /*
     * Stated again as a longhand, and it still does not take.
     *
     * The width and style from the shorthand above do apply: measured, every
     * focusable element gets a 3px solid ring. The colour does not: it comes
     * out as the element's own currentColor, so paper on the dark ground.
     * Astra declares outline-color: inherit alongside its dotted ring, which
     * is the obvious suspect, but this rule loads later with the same
     * specificity and an inline literal does not win either, so the cause is
     * not established. Recorded in PLAN.md rather than guessed at.
     *
     * Not an accessibility fault: paper on ink measures 17.1:1 and the ring
     * is clearly visible at 3px. It is the wrong colour, not a missing focus
     * state, which is why it is not being chased further for now.
     */
    outline-color: var(--motay-aqua);
    outline-offset: 2px;
    border-radius: 2px;
}

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

.motay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85em 1.6em;
    border: 0;
    border-radius: 999px;
    font-family: var(--motay-font-body);
    font-size: var(--motay-step-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.motay-btn--primary { background: var(--motay-orange); color: var(--motay-on-orange); }
.motay-btn--blue    { background: var(--motay-blue);   color: var(--motay-on-blue); }
.motay-btn--aqua    { background: var(--motay-aqua);   color: var(--motay-on-aqua); }

.motay-btn--ghost {
    background: transparent;
    color: var(--motay-paper);
    box-shadow: inset 0 0 0 2px rgba(244, 242, 237, 0.28);
}

.motay-btn:hover { filter: brightness(1.08); }

/* -------------------------------------------------------------------------
   The LIVE marker
   A red dot beside paper text. Never white text inside a red fill: that is
   3.5:1, and badge type is far too small to count as large text.
   ------------------------------------------------------------------------- */

.motay-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--motay-step-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--motay-paper);
}

.motay-live::before {
    content: "";
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--motay-live);
    animation: motay-pulse 2s ease-in-out infinite;
}

@keyframes motay-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Nothing moves for a visitor who has asked for less motion. This covers the
   ticker and the countdowns too, so they stop rather than merely slow down. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Read by screen readers, not shown. */
.motay-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------------
   Astra bridge

   Astra paints some text links from global colour slot 0, which has to stay
   the brand blue so that white button labels pass at 4.51:1. That same blue
   as text on the ink ground is 4.25:1 and fails, so every place Astra uses
   it for text is pulled back to the lifted blue here.

   Keep this list closed rather than using a blanket "a { }" rule: the aim is
   to correct Astra's text links, not to repaint links inside components that
   already set their own accessible colour.
   ------------------------------------------------------------------------- */

.entry-content a:not(.motay-btn):not(.wp-block-button__link),
.entry-meta a,
.entry-meta .posted-by a,
.ast-blog-meta-container a,
.ast-taxonomy-container a,
.ast-terms-link a,
.post-meta a,
.ast-excerpt-container a,
.widget a,
.site-footer a:not(.motay-btn),
.ast-single-post .entry-title a,
.comment-meta a {
    color: var(--motay-blue-link);
}

.entry-content a:not(.motay-btn):not(.wp-block-button__link):hover,
.entry-meta a:hover,
.ast-blog-meta-container a:hover,
.ast-taxonomy-container a:hover,
.widget a:hover,
.site-footer a:not(.motay-btn):hover {
    color: var(--motay-paper);
}

/* Astra's default buttons keep white on the brand blue, which passes. Our own
   primary action is orange and must carry ink, so it is restated here in case
   an Astra button class lands on it. */
.ast-button.motay-btn--primary,
.wp-block-button__link.motay-btn--primary {
    background-color: var(--motay-orange);
    color: var(--motay-on-orange);
}