/* SPEC-001 (Homepage 2026) — additive styles.
   Kept as a standalone stylesheet because the repo has no reproducible SCSS build
   (see specs/1-homepage/research.md, decision D1). Fold into _custom.scss once a
   pinned SCSS build is restored. */

/* --- Brand colour tokens ---------------------------------------------------
   RULE: Tiffany Blue is reserved for CLICKABLE elements only (links, CTAs).
   Tuscany rust is the ACCENT colour for non-clickable emphasis (icons, rules,
   highlights). Never use Tiffany Blue as a decorative accent, and never use
   Tuscany on something the user can click. See docs/design-system/colors.md. */
:root {
  --wp-tiffany-blue: #00ada9; /* clickable: links, link-style CTAs */
  --wp-tuscany: #c25b18;      /* accent: non-clickable emphasis */
  /* Solid teal CTA buttons need a darker shade so white text meets WCAG AA
     (white on #00ada9 is only 2.78:1 and fails). These are darkened Tiffany
     Blue, still clearly teal: ~4.9:1 base, ~6.5:1 hover. */
  --wp-teal-button: #007e7b;
  --wp-teal-button-hover: #006a67;
}

/* --- Key-facts bar --------------------------------------------------------- */
.keyfacts-bar {
  margin: 0 0 1.5rem;
}
.keyfacts-bar .keyfacts-item {
  white-space: nowrap;
  font-weight: 600;
}
.keyfacts-bar .keyfacts-icon {
  margin-right: 0.4rem;
  color: var(--wp-tuscany); /* decorative accent (aria-hidden) — not clickable, so Tuscany not Tiffany Blue */
}

/* Solid teal CTA buttons: white text on a darkened Tiffany Blue that meets
   WCAG AA (>= 4.5:1). Pure #00ada9 would fail (2.78:1), so use the button shade. */
.keyfacts-cta,
.sticky-cta .uk-button-primary {
  background-color: var(--wp-teal-button);
  border-color: var(--wp-teal-button);
  color: #fff;
}
.keyfacts-cta:hover,
.keyfacts-cta:focus,
.sticky-cta .uk-button-primary:hover,
.sticky-cta .uk-button-primary:focus {
  background-color: var(--wp-teal-button-hover);
  border-color: var(--wp-teal-button-hover);
  color: #fff;
}
/* Distinct keyboard focus ring; the 2px offset places it on the white page
   (>= 3:1 against white), so it stays visible over the teal button too. */
.keyfacts-cta:focus-visible,
.sticky-cta .uk-button:focus-visible {
  outline: 3px solid #00474a;
  outline-offset: 2px;
}

/* Stack the bar vertically below the UIkit @s breakpoint (640px). */
@media (max-width: 639px) {
  .keyfacts-bar [uk-grid] > * {
    width: 100%;
  }
  .keyfacts-bar .keyfacts-cta-wrap {
    margin-left: 0 !important;
  }
  .keyfacts-bar .keyfacts-cta {
    width: 100%;
  }
}

/* --- Sticky Tickets CTA ----------------------------------------------------- */
.sticky-cta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 980; /* above content, below UIkit modals (1010) */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  visibility: hidden; /* keep out of tab order until shown */
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
    transform: none;
  }
}
.sticky-cta .uk-button {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* --- SPEC-002 sticky day switcher (program page) --------------------------- */
/* Sticks below the show-on-up navbar; keep below the navbar's sticky z-index
   (UIkit default 980) and below modals (1010). The snippet's uk-sticky uses
   `offset: 80` = the navbar's fixed 80px height (UIkit .uk-navbar-item/-toggle
   min-height, constant across breakpoints), so the navbar can't overlap the
   switcher on scroll-up (RACE-1). Update both if that 80px changes. */
.day-switcher {
  background: #fff;
  z-index: 970;
}
.day-switcher.day-switcher-stuck {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.day-switcher .uk-subnav {
  margin: 0;
  padding: 0.5rem 0;
}
/* Smooth momentum scrolling for the horizontally-scrolling day pills on iOS,
   and reserve the row height so pinning the sticky bar doesn't shift layout. */
.day-switcher {
  min-height: 3rem;
}
.day-switcher .uk-overflow-auto {
  -webkit-overflow-scrolling: touch;
}
/* Active pill is a clickable selected-state, so it uses the teal button shade
   (darkened Tiffany Blue) — white-on-#007e7b meets WCAG AA (~4.9:1). */
.day-switcher .uk-subnav-pill > .uk-active > a {
  background-color: var(--wp-teal-button);
  color: #fff;
}
.day-switcher .uk-subnav-pill > * > a:focus-visible {
  outline: 3px solid #00474a;
  outline-offset: 2px;
}
/* Day headings are anchor targets — offset the scroll so the sticky navbar +
   switcher don't cover the heading on jump: navbar 80px + switcher ~48px
   (3rem min-height) + small buffer = 132px (RACE-2). */
[id^="day-"] {
  scroll-margin-top: 132px;
}

/* --- SPEC-005 — Square speaker images --------------------------------------
   Speaker photos are square Airtable originals (thumbnails->large). Render them
   1:1 everywhere via an aspect-ratio container + object-fit:cover, replacing the
   old tall min-height:400px / uk-cover boxes that cropped the square sources.
   Four container hooks: detail-page hero, listing cards, compact-table thumbs,
   and the event-page card photo wrapper.
   The event hook MUST stay a DIRECT child (.speaker > .uk-inline) so it squares
   ONLY the photo wrapper (event.php) and NOT the nested .uk-inline hover overlay
   inside it — a descendant selector would square-crop and clip the overlay. */
.speaker-page-image,
.speakercard .uk-cover-container,
.speaker-thumbnail,
.speaker > .uk-inline {
  aspect-ratio: 1 / 1;
  display: block;
  position: relative; /* containing block for the event overlay's absolute pos */
  overflow: hidden;   /* crop the square + clip the overlay's slide-in start */
}
/* Full-bleed square in their column for hero/listing/event; fixed square in the
   narrow compact-table cell. */
.speaker-page-image,
.speakercard .uk-cover-container,
.speaker > .uk-inline {
  width: 100%;
}
.speaker-thumbnail {
  width: 100px; /* replaces the inline min-width:100px on the table <img> */
}
/* The image fills and crops to the square; neutralize leftover uk-cover
   absolute-positioning/transform so object-fit controls the crop. */
.speaker-page-image > img,
.speakercard .uk-cover-container > img,
.speaker-thumbnail > img,
.speaker > .uk-inline > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: static;
  transform: none;
  max-width: none;
}