/* ============================================================
   SOI — Canonical Component Library
   Source of truth for WHICH: audit §5 (7 cross-section reusables).
   Source of truth for VALUES: tokens.css (step 2).
   Rule: sections (step 4) REFERENCE these classes — never redefine.

   Requires tokens.css to be loaded first (provides all var(--*)).
   ============================================================ */

/* ------------------------------------------------------------
   1. c-site-header  (site-header-nav) — all 8 pages
   ------------------------------------------------------------ */
.c-site-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  height: var(--space-nav-height);          /* 121px */
  padding-inline: var(--space-lg);
  background: var(--color-surface);
}

/* Brand wordmark — text stand-in until a real logo asset arrives.
   TODO(asset): replace .c-site-header__brand text with <img> logo slot. */
.c-site-header__brand {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);        /* 30px */
  line-height: var(--line-height-solid);
  color: var(--color-text-dark-navy);
  text-decoration: none;
  margin-right: auto;                        /* pushes nav to the right */
}

.c-site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.c-site-header__link {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-nav);          /* 18px */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

/* Active page */
.c-site-header__link--current {
  font-weight: var(--font-weight-bold);     /* Bold 18 */
}

/* NEWS leaf badge — smaller per override */
.c-site-header__link--news {
  font-size: var(--font-size-caption);      /* 16px */
}

/* States — links have no bg, so the approval "bg −10%/−5%" maps to
   the text color (color-mix toward black). focus ring is navy. */
.c-site-header__link:hover {
  color: color-mix(in srgb, var(--color-text) 90%, black);
}
.c-site-header__link:active {
  color: color-mix(in srgb, var(--color-text) 95%, black);
}
.c-site-header__link:focus-visible {
  outline: 2px solid var(--color-text-dark-navy);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   2. c-site-footer — all 8 pages
   ------------------------------------------------------------ */
.c-site-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--space-footer-height);   /* 343px */
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-footer-bg);        /* #00A0E9 */
}

.c-site-footer__tagline {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);        /* 30px */
  line-height: var(--line-height-solid);
  color: var(--color-text-inverse);
}

.c-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-site-footer__link {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-caption);      /* 16px */
  line-height: var(--line-height-solid);
  color: var(--color-text-inverse);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.c-site-footer__link:hover {
  color: color-mix(in srgb, var(--color-text-inverse) 90%, black);
}
.c-site-footer__link:active {
  color: color-mix(in srgb, var(--color-text-inverse) 95%, black);
}
.c-site-footer__link:focus-visible {
  outline: 2px solid var(--color-surface);   /* light ring on blue bg */
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   3. c-cta-pill — all 8 pages — 4 variants
   Works on both <button> and <a>. Per-variant sets --pill-bg
   so the shared state rules derive hover/active automatically.
   ------------------------------------------------------------ */
.c-cta-pill {
  --pill-bg: var(--color-primary);           /* default fallback */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--pill-height-primary);        /* 92px */
  padding-inline: var(--space-md);
  border: none;
  border-radius: var(--pill-radius);         /* 80px */
  background: var(--pill-bg);
  color: var(--color-text-dark-navy);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);         /* 30px */
  line-height: var(--line-height-solid);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;                 /* labels render uppercase; DOM keeps verbatim casing */
  white-space: nowrap;                       /* prevents label wrap on content-width pills */
  cursor: pointer;
  transition: background-color 0.15s ease, filter 0.15s ease;
}

/* Variants — color + width only; everything else inherited */
.c-cta-pill--blue-md   { --pill-bg: var(--color-accent-blue); width: var(--pill-width-primary-md); }
.c-cta-pill--yellow-md { --pill-bg: var(--color-primary);     width: var(--pill-width-primary-md); }
.c-cta-pill--yellow-lg { --pill-bg: var(--color-primary);     width: var(--pill-width-primary-lg); }
.c-cta-pill--cyan-md   { --pill-bg: var(--color-stat-blue);   width: var(--pill-width-primary-md); }

/* States (approval defaults) */
.c-cta-pill:hover  { background: color-mix(in srgb, var(--pill-bg) 90%, black); }
.c-cta-pill:active { background: color-mix(in srgb, var(--pill-bg) 95%, black); }
.c-cta-pill:focus-visible {
  outline: 2px solid var(--color-text-dark-navy);
  outline-offset: 2px;
}
.c-cta-pill[disabled],
.c-cta-pill--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Section-level modifier (allowed): full-width within its column */
.c-cta-pill--block { width: 100%; }

/* ------------------------------------------------------------
   4. c-tag-pill — SUBMISSION + PUBLICATION OPPORTUNITES
   width variants × tone variants
   ------------------------------------------------------------ */
.c-tag-pill {
  --pill-bg: var(--color-neutral-100);
  --pill-fg: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--pill-height-secondary);      /* 74px */
  padding-inline: var(--space-md);
  border: none;
  border-radius: var(--pill-radius);         /* 80px */
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-sm);       /* 20px */
  line-height: var(--line-height-solid);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;                 /* labels render uppercase; DOM keeps verbatim casing (parity with c-cta-pill) */
  white-space: nowrap;                       /* prevents label wrap on content-width pills */
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Width variants */
.c-tag-pill--w-sm { width: var(--pill-width-tag-sm); }   /* 318 */
.c-tag-pill--w-md { width: var(--pill-width-tag-md); }   /* 358 */
.c-tag-pill--w-lg { width: var(--pill-width-tag-lg); }   /* 474 */

/* Tone variants */
.c-tag-pill--neutral { --pill-bg: var(--color-neutral-100);  --pill-fg: var(--color-text); }
.c-tag-pill--cyan    { --pill-bg: var(--color-stat-blue);    --pill-fg: var(--color-text); }
.c-tag-pill--yellow  { --pill-bg: var(--color-primary);      --pill-fg: var(--color-text); }
.c-tag-pill--green   { --pill-bg: var(--color-section-green); --pill-fg: var(--color-text-inverse); }

/* States */
.c-tag-pill:hover  { background: color-mix(in srgb, var(--pill-bg) 90%, black); }
.c-tag-pill:active { background: color-mix(in srgb, var(--pill-bg) 95%, black); }
.c-tag-pill:focus-visible {
  outline: 2px solid var(--color-text-dark-navy);
  outline-offset: 2px;
}
.c-tag-pill[disabled],
.c-tag-pill--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------
   5. c-hero  (hero-photo-with-overlay)
   Photo variants: HOMA, SUBMISSION, registration & fees, Hotel & travel
   Solid variants: ABOUT MINE, KEY DATES, Program, PUBLICATION OPPORTUNITES
   Height passed via --hero-height (variants set literal px —
   the only hardcoded px besides border-width, per SOI override).
   Photo bg is set per-instance via inline style; solid bg via --hero-bg-color.
   ------------------------------------------------------------ */
.c-hero {
  --hero-height: 611px;                       /* md default */
  --hero-bg-color: transparent;               /* used only by --solid variant */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;                         /* CL.9 — all 7 hero usages center; promoted to base */
  gap: var(--space-md);
  width: 100%;
  min-height: var(--hero-height);
  padding: var(--space-2xl) var(--space-lg);
  background-color: var(--color-text-dark-navy); /* fallback under image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;                          /* CL.9 — centered text alignment for hero content */
  overflow: hidden;
}

.c-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);            /* rgba(4,30,65,0.7) */
  z-index: 0;
}

/* keep content above the overlay */
.c-hero > * { position: relative; z-index: 1; }

/* --- Photo height variants (inline background-image per instance) --- */
.c-hero--xl { --hero-height: 1082px; }        /* HOMA */
.c-hero--md { --hero-height: 611px; }         /* SUBMISSION, registration & fees */
.c-hero--sm { --hero-height: 654px; }         /* Hotel & travel */

/* --- Solid-color variant (ABOUT MINE, KEY DATES, Program, PUBLICATION OPPORTUNITES) ---
   Paints a flat bg and disables the photo-dimmer overlay. Pair with a
   color modifier (--green) and a solid height variant. */
.c-hero--solid { background-color: var(--hero-bg-color); }
.c-hero--solid::before { display: none; }     /* overlay is useless on solid bg */

/* Color modifiers (room reserved for --blue / --yellow when step 4 needs them) */
.c-hero--green { --hero-bg-color: var(--color-section-green); }

/* Solid height variants */
.c-hero--solid-tall { --hero-height: 884px; } /* ABOUT MINE */
.c-hero--solid-md   { --hero-height: 649px; } /* Program */
.c-hero--solid-sm   { --hero-height: 634px; } /* PUBLICATION OPPORTUNITES */
/* KEY DATES hero height = section override in step 4 (nested in green block) */

.c-hero__title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);        /* CL.7 — user-confirmed: all hero titles render Bold (file omits fontWeight, Figma family default is Bold) */
  font-size: var(--font-size-hero);           /* 70px */
  line-height: var(--line-height-tight);
  color: var(--color-primary);                /* yellow default */
  margin: 0;
}
/* Title color modifier (HOMA uses blue) */
.c-hero__title--blue { color: var(--color-accent-blue); }

.c-hero__subtitle {
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);           /* 24px */
  line-height: var(--line-height-relaxed);
  color: var(--color-text-inverse);
  max-width: 1080px;
  margin: 0;
  text-align: center;                          /* CL.9 — multi-line subtitle text centers within centered subtitle */
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;                     /* CL.9 — center action buttons horizontally */
  gap: var(--space-md);
}

/* Underlined "CALL FOR PAPER" text link slot */
.c-hero__link {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);          /* 30px */
  line-height: var(--line-height-solid);
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;                         /* prevents underlined link wrapping in narrow flex containers */
  cursor: pointer;
  transition: color 0.15s ease;
}
.c-hero__link:hover  { color: color-mix(in srgb, var(--color-text-inverse) 90%, black); }
.c-hero__link:active { color: color-mix(in srgb, var(--color-text-inverse) 95%, black); }
.c-hero__link:focus-visible {
  outline: 2px solid var(--color-surface);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   6. c-stat-tile — ABOUT MINE + Hotel & travel (decorative)
   ------------------------------------------------------------ */
.c-stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);                       /* ~33px between number/label */
  box-sizing: border-box;
  width: var(--stat-tile-width);              /* 244px */
  height: var(--stat-tile-height);            /* 248px */
  padding: var(--space-lg) var(--space-sm);   /* ~49px top */
  border-radius: var(--radius-card-stat);     /* 30px */
  background: var(--color-stat-tile-bg);      /* rgba(56,182,255,0.2) */
  margin: 0;
  text-align: center;
}

.c-stat-tile__number {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-stat-number-100);/* 100px */
  line-height: var(--line-height-solid);
  color: var(--color-stat-blue);
  margin: 0;
}

.c-stat-tile__label {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);           /* 24px */
  line-height: var(--line-height-solid);
  color: var(--color-stat-blue);
  text-transform: uppercase;                   /* CL.8 — confirmed 2/2 venue usages (ABOUT MINE §08 + Hotel §23); DOM keeps verbatim lowercase */
  margin: 0;
}

/* ------------------------------------------------------------
   7. c-person-card — Program (speakers ×8) + ABOUT MINE (committee ×2)
   CONSOLIDATED. Decorative (no interactive state).
   ------------------------------------------------------------ */
.c-person-card {
  --photo-size: var(--person-card-speaker-size); /* 363 default */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);                        /* 16px */
  margin: 0;
  text-align: center;
}

.c-person-card__photo {
  width: var(--photo-size);
  height: var(--photo-size);
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-decorative-yellow);  /* #FFED00 fallback fill */
  display: block;
}

.c-person-card__name {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);           /* 30px */
  line-height: var(--line-height-name);        /* 1.167 */
  color: var(--color-text);
  text-transform: uppercase;                    /* CL.6 — confirmed in committees + speakers (2/2 person-card usages); DOM keeps verbatim casing */
  margin: 0;
}

.c-person-card__role {
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-sm);         /* 20px */
  line-height: var(--line-height-base);
  color: var(--color-text);
  margin: 0;
}

/* Size variants */
.c-person-card--speaker   { --photo-size: var(--person-card-speaker-size); }   /* 363 */
.c-person-card--committee { --photo-size: var(--person-card-committee-size); } /* 382 */