/*
Theme Name:   YGMF Child
Theme URI:    https://www.ygmf.org
Description:  Child theme of Spectra One for the Yukta Garg Memorial Foundation. Brand tokens are
              derived from the Foundation's logo: the ribbon magenta, the teal of the
              recoloured figure, and the indigo her name is set in.
Author:       Yukta Garg Memorial Foundation
Template:     spectra-one
Version:      1.0.3
Text Domain:  ygmf-child
*/

/* ==========================================================================
   Brand tokens — every value traceable to the logo or measured for contrast.
   Contrast ratios noted against --ygmf-page unless stated.
   ========================================================================== */
:root {
  /* Identity — sampled from the logo ribbon */
  --ygmf-magenta:        #C01878;  /* 5.59:1 — links, eyebrows, sponsor ask   */
  --ygmf-magenta-deep:   #9E1462;  /* label text on light washes              */
  --ygmf-magenta-light:  #F06CB4;  /* 5.95:1 on indigo — labels on dark       */
  --ygmf-magenta-wash:   #FBE8F1;

  /* Action — the recoloured figure */
  --ygmf-teal:           #12626E;  /* 6.79:1 — Donate, the built work         */
  --ygmf-teal-deep:      #0E4E58;  /* label text on light                     */
  --ygmf-teal-light:     #5FB8C4;  /* 7.24:1 on indigo                        */
  --ygmf-teal-wash:      #E4F0F2;
  --ygmf-teal-rule:      #CBE2E6;

  /* Accent — warmth. NEVER text on a light ground (2.15:1 would fail). */
  --ygmf-gold:           #E8A020;  /* fills and rules only                    */
  --ygmf-gold-deep:      #8A5A0F;  /* 5.74:1 — small uppercase labels         */
  --ygmf-gold-light:     #F2B23C;  /* 7.51:1 on indigo — figures on dark      */
  --ygmf-gold-wash:      #FCF0DA;

  /* Ink — the indigo "Yukta Garg" is set in */
  --ygmf-ink:            #241838;  /* 16.13:1 — all body text, dark bands     */
  --ygmf-ink-2:          #372E42;
  --ygmf-ink-3:          #463C52;
  --ygmf-muted:          #5E5670;
  --ygmf-muted-2:        #736C82;
  --ygmf-faint:          #9A93A6;

  /* Surfaces */
  --ygmf-page:           #FFFBF5;
  --ygmf-surface:        #FFFFFF;
  --ygmf-warm-band:      #FAF2E6;
  --ygmf-rule:           #EDE6DA;

  /* On the dark band */
  --ygmf-on-dark:        #FFFBF5;
  --ygmf-on-dark-2:      #BDB5CC;
  --ygmf-on-dark-3:      #948CA6;

  /* Type */
  --ygmf-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --ygmf-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
body,
.ast-container {
  font-family: var(--ygmf-body);
  color: var(--ygmf-ink);
  background-color: var(--ygmf-page);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--ygmf-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { line-height: 1.06; }
h2 { line-height: 1.10; }
h3 { line-height: 1.20; }

p, li { text-wrap: pretty; }

a { color: var(--ygmf-magenta-deep); text-decoration: none; }
a:hover, a:focus { color: var(--ygmf-magenta); }
a:focus-visible { outline: 2px solid var(--ygmf-teal); outline-offset: 3px; }

/* Small uppercase eyebrow label used above section headings */
.ygmf-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ygmf-gold-deep);
}

/* ==========================================================================
   Buttons — teal is the primary ask, magenta the secondary.
   Minimum 48px tall so they are comfortable on a phone.
   ========================================================================== */
.wp-block-button__link,
.ast-button,
button, input[type="submit"] {
  font-family: var(--ygmf-body);
  font-weight: 600;
  border-radius: 0;
  min-height: 48px;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}

.ygmf-btn-donate  { background: var(--ygmf-teal);    color: #fff !important; }
.ygmf-btn-donate:hover  { background: var(--ygmf-teal-deep); }
.ygmf-btn-sponsor { background: var(--ygmf-magenta); color: #fff !important; }
.ygmf-btn-sponsor:hover { background: var(--ygmf-magenta-deep); }
.ygmf-btn-quiet   { background: transparent; color: var(--ygmf-ink) !important;
                    box-shadow: inset 0 0 0 1.5px var(--ygmf-ink); }

/* ==========================================================================
   Bands
   ========================================================================== */
.ygmf-band-dark { background: var(--ygmf-ink);       color: var(--ygmf-on-dark); }
.ygmf-band-dark h1, .ygmf-band-dark h2, .ygmf-band-dark h3 { color: var(--ygmf-on-dark); }
.ygmf-band-dark p { color: var(--ygmf-on-dark-2); }
.ygmf-band-dark .ygmf-eyebrow { color: var(--ygmf-magenta-light); }
.ygmf-band-dark .ygmf-figure  { color: var(--ygmf-gold-light); }

.ygmf-band-warm  { background: var(--ygmf-warm-band); }
.ygmf-band-teal  { background: var(--ygmf-teal-wash); }
.ygmf-band-rose  { background: var(--ygmf-magenta-wash); }
.ygmf-band-gold  { background: var(--ygmf-gold-wash); }

/* Big impact figures */
.ygmf-figure {
  font-family: var(--ygmf-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Accessibility and motion
   ========================================================================== */
.ygmf-skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 9999;
  background: var(--ygmf-ink); color: #fff; padding: 12px 18px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Wide content must never make the page scroll sideways */
table, pre, .wp-block-table { display: block; max-width: 100%; overflow-x: auto; }
img { max-width: 100%; height: auto; }

/* ==========================================================================
   Headings: never break a word mid-way, however narrow the column
   ========================================================================== */
h1, h2, h3, h4,
.has-display-font-size, .has-h-1-font-size, .has-h-2-font-size, .has-h-3-font-size {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}

/* Stat figures: tabular, tight, and clearly a number rather than a heading */
.ygmf-stat h3, .has-h-1-font-size {
  font-variant-numeric: tabular-nums;
}

/* Images sit flush inside their column rather than floating at intrinsic size */
.wp-block-column > .wp-block-image,
.wp-block-column > .wp-block-image > img { width: 100%; }
.wp-block-column > .wp-block-image > img { object-fit: cover; }

/* ==========================================================================
   Header
   ========================================================================== */
.ygmf-header { border-bottom: 1px solid var(--ygmf-rule); }
.ygmf-header .wp-block-site-logo img { display: block; }

.ygmf-nav a,
.ygmf-nav .wp-block-navigation-item__content {
  color: var(--ygmf-ink);
  text-decoration: none;
  font-weight: 500;
}
.ygmf-nav a:hover,
.ygmf-nav a:focus-visible {
  color: var(--ygmf-magenta-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.ygmf-nav .current-menu-item > a {
  color: var(--ygmf-magenta-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ==========================================================================
   Footer — links must stay legible on the ink band
   ========================================================================== */
.ygmf-footer { color: var(--ygmf-page); }
.ygmf-footer a { color: var(--ygmf-page); text-decoration: none; }
.ygmf-footer a:hover,
.ygmf-footer a:focus-visible {
  color: var(--ygmf-gold-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ygmf-footer .wp-block-navigation { gap: .35rem 1.25rem; }
.ygmf-footer li { list-style: none; }

/* ==========================================================================
   Breathing room. Columns were butting text straight up against photographs.
   ========================================================================== */
.wp-block-columns { gap: var(--wp--preset--spacing--50); }

/* A photograph followed by copy needs air; a photograph followed by its own
   caption needs much less, or the caption stops reading as a caption. */
.wp-block-column > .wp-block-image:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--40);
}
.wp-block-column > .wp-block-image:has(+ p.has-small-font-size) {
  margin-bottom: var(--wp--preset--spacing--20);
}