/*
Theme Name: Power Connection Events Mobile
Author: The Power Connection
Description: Fast, mobile-first reusable event site template, originally built for the 2026 Frac Sand Conference and matching its labs app mockups (Barlow Condensed / Barlow, steel-blue-and-orange, soft-rounded hairline-bordered cards). Zero required plugins — every content type (speakers, schedule, sponsors, attendees) is a native custom post type with its own lightweight admin fields. Reused as-is (Event Settings, no code edits) across every Power Connection event site.
Version: 1.30.0
Last Updated: 2026-09-08
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fracsand
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --color-bg: #f5f4f1;
  --color-surface: #fdfdfb;
  --color-surface-2: #eceae5;
  --color-text: #1d1f20;
  --color-text-muted: #5d5d60;
  --color-text-faint: #8a8a8d;

  --color-primary: #0266af;
  --color-primary-dark: #024e87;
  --color-accent: #fb9c1c;
  --color-accent-dark: #d9850f;
  --color-accent-tint: #fdf3ea;
  --color-accent-tint-border: #e3b98a;
  --color-on-primary: #fb9c1c; /* text/kicker color for Accent-styled text sitting directly on a Primary background (header title, hero Welcome, page-banner kicker, splash error) -- Event Settings overrides this per-site with a contrast-checked value, see inc/theme-options.php's fracsand_readable_text_color(); this default matches the default Accent since the stock Primary/Accent pair already contrasts fine. */
  --color-on-accent: #2b2b2d; /* button text color for anything sitting on an Accent background (.btn and everything that inherits it) -- Event Settings overrides this per-site the same way as --color-on-primary above; this default matches .btn's old hardcoded text color since the stock Accent already contrasts fine against it. */
  --color-on-primary-neutral: #ffffff; /* plain white text/labels on a Primary background that were never meant to be Accent-colored (splash logo text, sponsor label/name) -- falls back to black only if white itself stops contrasting against Primary; see inc/theme-options.php's $on_primary_neutral. */

  --color-line: #e4e2dd;
  --color-line-strong: #cfccc5;

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e9e9ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --font-heading: "Barlow Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Rounded, soft-cornered throughout — matches the app mockups. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(29, 31, 32, 0.08);
  --shadow-md: 0 3px 10px rgba(29, 31, 32, 0.10);
  --shadow-lg: 0 12px 28px rgba(29, 31, 32, 0.16);

  --header-h: 56px;
  --tabbar-h: 62px;
  --content-max: 880px;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
h1 { font-size: 32px; letter-spacing: 0.2px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
h4 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
p { margin: 0 0 var(--space-3); }
button { font-family: inherit; }

.wrap { max-width: var(--content-max); margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-4); z-index: 1000; }
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ==========================================================================
   3. HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--space-5);
  max-width: var(--content-max);
  margin: 0 auto;
}
.site-header__title {
  margin: 0; /* override the global p{margin} reset — a flex item with an
    asymmetric margin doesn't visually center even with align-items:center,
    since centering applies to the margin box, not just the text */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  color: var(--color-on-primary); /* was --color-accent; see --color-on-primary's definition above */
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header__title a { color: inherit; }

.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--space-5); }
.site-nav a {
  color: rgba(255,255,255,0.88);
  font-size: 14px; font-weight: 500;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: #fff; border-bottom-color: var(--color-accent);
}

.menu-toggle {
  background: none; border: none; color: #fff; padding: var(--space-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.menu-toggle svg { width: 24px; height: 24px; flex: none; stroke: #fff; }
.mobile-menu__close svg { width: 22px; height: 22px; flex: none; stroke: #fff; }

@media (min-width: 780px) {
  .site-nav { display: block; }
  .menu-toggle { display: none; }
  body { padding-bottom: 0; }
  .tab-bar { display: none; }
}

/* ==========================================================================
   4. BOTTOM TAB BAR (mobile)
   ========================================================================== */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 10px rgba(29,31,32,0.08);
}
.tab-bar__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  height: var(--tabbar-h);
  color: var(--color-text-faint);
  font-size: 10.5px; font-weight: 500;
  min-width: 0;
}
.tab-bar__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab-bar__item svg { width: 25px; height: 25px; flex: none; }
.tab-bar__item[aria-current="page"] { color: var(--color-primary); }
.tab-bar__item[aria-current="page"] svg { stroke: var(--color-accent); }

/* ==========================================================================
   5. MOBILE MENU (off-canvas, no-JS-required fallback via details)
   ========================================================================== */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20,24,28,0.5);
  display: none;
}
.mobile-menu.is-open { display: block; }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(78vw, 320px);
  background: var(--color-primary-dark);
  padding: var(--space-6) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.mobile-menu__close {
  align-self: flex-end; background: none; border: none; color: #fff; padding: var(--space-2); cursor: pointer;
}
.mobile-menu a {
  display: flex; align-items: center; gap: var(--space-3);
  color: rgba(255,255,255,0.92); font-size: 16px; font-weight: 500;
  padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-menu a svg { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   6. HERO / SECTIONS
   ========================================================================== */
.hero {
  background: linear-gradient(165deg, var(--color-primary-dark) 0%, var(--color-primary) 70%);
  color: #fff;
  padding: var(--space-8) var(--space-5) var(--space-6);
  text-align: center;
}
.hero__kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: var(--space-2); }
.hero h1 { color: #fff; font-size: 34px; }
.hero p { color: rgba(255,255,255,0.82); max-width: 46ch; margin-left: auto; margin-right: auto; }
.hero .hero__welcome {
  color: var(--color-on-primary); /* was --color-accent; see --color-on-primary's definition above */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  text-align: center;
  margin: var(--space-2) auto 0;
}

/* Blue page-title banner (Schedule, Speakers, etc.) — an expanded
   continuation of the site header, matching the app mockup's title block. */
.page-banner {
  background: var(--color-primary);
  padding: var(--space-4) 0 var(--space-6);
}
.page-banner__kicker {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-on-primary); font-weight: 700; margin: 0 0 4px; /* was --color-accent; see --color-on-primary's definition above */
}
.page-banner__title {
  font-family: var(--font-heading); font-weight: 700; font-size: 30px;
  color: #fff; text-transform: uppercase; letter-spacing: 1px; margin: 0;
}
@media (min-width: 780px) {
  .page-banner__title { font-size: 36px; }
}

.section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.section--tight { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section__head h2 {
  margin: 0;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.07em;
  color: var(--color-primary);
  font-weight: 700;
}
.section__head .link-more { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   7. CARD (soft rounded, hairline border — matches the app mockups)
   ========================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.card--tile { border-radius: var(--radius-xl); }

/* ==========================================================================
   8. BUTTONS & TAGS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-accent); color: var(--color-on-accent); /* was a hardcoded #2b2b2d; see --color-on-accent's definition above */
  font-weight: 700; font-size: 14px;
  padding: 12px 20px; border: none; border-radius: var(--radius-lg);
  cursor: pointer;
}
.btn:hover { background: var(--color-accent-dark); color: var(--color-on-accent); }
.btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
.btn--block { width: 100%; }
.btn[hidden] { display: none; }

.tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: var(--radius-pill);
  text-transform: uppercase;
}

/* ==========================================================================
   9. GRIDS
   ========================================================================== */
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 780px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.explore-tile {
  padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
  color: var(--color-text);
  border-radius: var(--radius-xl);
}
.explore-tile__icon svg { width: 22px; height: 22px; color: var(--color-primary); }
.explore-tile__icon {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: #eeeeee; color: var(--color-primary);
}
.explore-tile__title { font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--color-accent); } /* was --color-primary */
.explore-tile__desc { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }

.info-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  margin-top: var(--space-4);
  color: var(--color-text);
  border-radius: var(--radius-xl);
}
.info-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-row__title { font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--color-primary); }
.info-row__desc { font-size: 12.5px; color: var(--color-text-muted); }

/* ==========================================================================
   10. AVATAR (initials, replaces headshot until a Featured Image is set)
   ========================================================================== */
.avatar {
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-neutral-200); color: var(--color-primary-dark);
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  overflow: hidden; position: relative;
  border-radius: 50%;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 84px; height: 84px; font-size: 26px; }

/* duotone wash for uploaded photography, per the Industry system */
.duotone { position: relative; overflow: hidden; }
.duotone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--color-primary); mix-blend-mode: color;
}

/* ==========================================================================
   11. PERSON CARD (speakers & attendees — same rounded-row treatment)
   ========================================================================== */
.person-card {
  padding: var(--space-3);
  display: flex; gap: var(--space-3); align-items: center;
  margin-bottom: var(--space-2);
}
.person-card--align-top { align-items: flex-start; }
.person-card__name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; margin-bottom: 1px; }
.person-card__role { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.person-card__tags { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.speaker-bio-wrap { margin: var(--space-4) 0; }
.speaker-bio { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text); }
.speaker-bio-clip { position: relative; overflow: hidden; }
.speaker-bio-wrap.is-truncated .speaker-bio-clip { max-height: 4.8em; }
.speaker-bio-wrap.is-truncated .speaker-bio-clip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
  background: linear-gradient(to bottom, rgba(253, 253, 251, 0), var(--color-surface));
  pointer-events: none;
}
/* Sits flush under the clipped/faded bio text so the fade visually leads
   into it; the button itself gets a generous vertical tap target (well
   past the 44px minimum) since it's the easiest way on a phone to miss a
   plain text link. The chevron rotates to signal expand vs. collapse,
   reinforcing what the text already says rather than relying on wording
   alone. */
.speaker-bio__toggle {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px 0 0; background: none; border: none; padding: var(--space-2) 0;
  min-height: 44px;
  color: var(--color-primary); font-weight: 700; font-size: 13px; cursor: pointer;
}
.speaker-bio__toggle svg { width: 15px; height: 15px; flex: none; transition: transform 0.15s ease; }
.speaker-bio__toggle[aria-expanded="false"] svg { transform: rotate(90deg); }
.speaker-bio__toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
.speaker-bio__toggle[hidden] { display: none; }

/* Speakers list — compact clickable row, opens the detail sheet below */
.speaker-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); width: 100%;
  background: var(--color-surface); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.speaker-row[hidden] {display: none;}
.speaker-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.speaker-row:hover { border-color: var(--color-line-strong); }
.speaker-row--static { cursor: default; }
.speaker-row--static:hover { border-color: var(--color-line); }
.speaker-row__text { min-width: 0; flex: 1; }
.speaker-row__name { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-text); }
.speaker-row__company { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speaker-row__chevron { flex: none; display: flex; color: var(--color-text-faint); }
.speaker-row__chevron svg { width: 18px; height: 18px; }

.search-bar { margin-bottom: var(--space-4); }
.search-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--color-line); background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 10px 14px; font-size: 14px; font-family: inherit; color: var(--color-text);
}
.search-input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.search-empty { color: var(--color-text-muted); font-size: 14px; padding: var(--space-2) 0 var(--space-4); }

/* Attendees list — A–Z groups, no photo/avatar, no detail popup */
.az-group { margin-top: var(--space-5); }
.az-group h4 { margin: 0 0 var(--space-2); }
.attendee-row { padding: var(--space-3); }
.attendee-row__name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-primary); }
.attendee-row__title { font-size: 11px; font-style: italic; color: var(--color-text-muted); margin-top: 2px; }
.attendee-row__company { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }

/* ==========================================================================
   12. SCHEDULE
   ========================================================================== */
.day-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); overflow-x: auto; }
.day-tab {
  flex: 1; background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 10px 16px; font-weight: 700; font-family: var(--font-heading); font-size: 16px;
  cursor: pointer; color: var(--color-text-muted); text-align: center;
}
.day-tab small { display: block; font-size: 12px; font-weight: 500; font-family: var(--font-body); margin-top: 2px; color: inherit; }
.day-tab[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } /* was --color-primary background with hardcoded #fff text; --color-on-accent keeps the text readable even if a future Accent color turns out to be dark -- see inc/theme-options.php */
.day-tab[aria-selected="true"] small { color: inherit; opacity: 0.75; }
.day-panel[hidden] { display: none; }
.day-panel { padding-top: var(--space-1); }

/* Timeline: time column, dot + connecting line, session card */
.timeline-item {
  display: grid; grid-template-columns: 62px 20px 1fr; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.timeline-item.is-past-only { opacity: 0.5; }

.timeline-time { text-align: right; padding-top: 13px; }
.timeline-time__start { font-size: 13px; font-weight: 700; color: var(--color-primary); }
.timeline-time__duration { font-size: 11px; color: var(--color-text-faint); margin-top: 1px; }

.timeline-dot-col { display: flex; flex-direction: column; align-items: center; padding-top: 15px; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-neutral-400); flex: none; }
.timeline-line { width: 2px; flex: 1; background: var(--color-line); margin-top: 2px; }
.timeline-item:last-child .timeline-line { display: none; }
.timeline-item.is-live .timeline-dot { background: var(--color-accent); box-shadow: 0 0 0 4px rgba(251, 156, 28, 0.22); }

.timeline-card { padding: 11px 14px; }
.timeline-item.is-live .timeline-card { background: var(--color-accent-tint); border-color: var(--color-accent-tint-border); }
.timeline-card__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
.timeline-card__title { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--color-text); }
.timeline-card__location { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }

.tag-live { background: var(--color-accent); color: #fff; }

button.timeline-item {
  background: none; border: none; padding: 0; margin: 0 0 var(--space-3);
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none; appearance: none;
  color: var(--color-text);
}
button.timeline-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-lg); }
button.timeline-item:hover .timeline-card { border-color: var(--color-line-strong); }

/* Session detail sheet — bottom sheet on mobile, centered modal on wider screens */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 15, 20, 0.45);
  display: none;
}
.sheet-backdrop.is-open { display: block; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  max-height: 85vh; overflow-y: auto;
  background: var(--color-surface);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
  display: none;
}
.sheet.is-open { display: block; }

.sheet__handle { display: flex; justify-content: center; padding: 10px 0 4px; }
.sheet__handle span { width: 36px; height: 4px; border-radius: 3px; background: var(--color-line-strong); display: block; }

.sheet__body { padding: 8px var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom)); max-width: var(--content-max); margin: 0 auto; } /* bottom padding was --space-2 (8px); --space-8 (32px) gives both the session and speaker detail sheets (page-schedule.php, page-speakers.php both use this shared class) more breathing room below their last element */
.sheet__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.sheet__title { margin: 0 0 var(--space-3); font-size: 22px; }
.sheet__meta { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-family: var(--font-body); color: var(--color-text-muted); margin: 0 0 4px; }
.sheet__meta svg { width: 14px; height: 14px; flex: none; }
.sheet__desc { margin-top: var(--space-4); font-size: 14px; line-height: 1.6; color: var(--color-text); }

.sheet__speakers { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.sheet__speaker {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
  text-decoration: none; color: inherit;
}
.sheet__speaker:hover { background: var(--color-neutral-200); }
.sheet__speaker-name { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--color-text); }
.sheet__speaker-role { display: block; font-size: 12.5px; color: var(--color-text-muted); margin-top: 1px; }

.tag-moderator { background: var(--color-primary); color: #fff; margin-left: 4px; vertical-align: middle; }

.session-sponsor { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.session-sponsor__label {
  font-size: 12.5px; font-style: italic; font-weight: 400;
  color: var(--color-text-muted);
}
.session-sponsor__logo { width: 100px; height: auto; display: block; }
.session-sponsor__name { font-size: 11px; font-weight: 600; color: var(--color-primary); }
.session-sponsor--compact { margin-top: var(--space-2); padding-top: var(--space-2); border-top: none; }

.sheet__footer { padding: var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-line); max-width: var(--content-max); margin: 0 auto; }

/* Live Q&A -- site-wide session/speaker sheet close icon (Stage 4). Sits in
   a zero-height, position:sticky wrapper so it stays pinned to the top-right
   of the popup as long content scrolls underneath it, without pushing the
   rest of the sheet down or needing any JS beyond the existing .sheet__close
   click binding it shares (assets/js/main.js). */
.sheet__close-x-wrap {
  height: 0; overflow: visible; position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: flex-end; pointer-events: none;
}
.sheet__close-x {
  pointer-events: auto;
  margin: 10px 14px 0 0;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  cursor: pointer;
}
.sheet__close-x svg { width: 16px; height: 16px; stroke-width: 2.5; }
.sheet__close-x:hover { background: var(--color-neutral-200); }

/* Live Q&A -- question-submission box in a session sheet's footer slot,
   shown once fracsand_question_box_is_visible() says yes for that session
   (the sheet has no other footer content otherwise -- the close-X is the
   only dismissal control on every other session). */
.qa-form__label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.qa-form__label[hidden] { display: none; }
.qa-form__textarea {
  width: 100%; resize: vertical; min-height: 56px; box-sizing: border-box;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: 10px 12px; font-family: var(--font-body); font-size: 14px;
  color: var(--color-text); margin-bottom: var(--space-3);
}
.qa-form__status { margin: var(--space-2) 0 0; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.qa-form__another {
  display: block; width: 100%; margin-top: var(--space-3); background: none; border: none;
  padding: 0; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--color-accent-dark); text-decoration: underline; cursor: pointer; text-align: center;
}
.qa-form__another[hidden] { display: none; }

/* Speaker detail sheet — profile header (large photo + name/title/company) and session list */
.sheet__profile { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.sheet__avatar {
  flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  background: var(--color-neutral-200);
}
.sheet__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet__avatar--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2px dashed var(--color-accent-tint-border);
  background: var(--color-accent-tint);
  color: var(--color-text-muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.sheet__avatar--empty svg { width: 26px; height: 26px; color: var(--color-neutral-500); }
.sheet__profile-text { min-width: 0; }
.sheet__profile-name { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--color-text); line-height: 1.25; }
.sheet__profile-title { font-size: 13px; color: var(--color-text-muted); margin-top: 3px; }
.sheet__profile-company { font-size: 13px; color: var(--color-text-muted); }

.sheet__sessions { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.sheet__session { padding: 11px 13px; border-radius: var(--radius-lg); background: var(--color-neutral-100); border: 1px solid var(--color-line); }
.sheet__session-tags { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sheet__session-title { font-weight: 600; font-size: 14px; color: var(--color-text); line-height: 1.3; }
.sheet__session-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }

@media (min-width: 780px) {
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%);
    width: min(560px, 92vw); max-height: 80vh; border-radius: var(--radius-xl);
  }
  .sheet__handle { display: none; }
}

/* ==========================================================================
   13. A–Z JUMP (attendees use .person-card above for each row)
   ========================================================================== */
.az-jump { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); font-size: 12px; }
.az-jump a { padding: 3px 8px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-text-muted); }

/* ==========================================================================
   14. SPONSORS
   ========================================================================== */
.tier-block { margin-bottom: var(--space-6); }
.tier-label {
  display: inline-block; padding: 4px 12px; margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.03em;
}
.sponsor-tile {
  padding: var(--space-3); display: flex; align-items: center; justify-content: center;
  min-height: 76px; text-align: center; font-weight: 600; font-size: 13.5px; color: var(--color-text-muted);
}
.sponsor-tile img { max-width: 100%; max-height: 100px; width: auto; height: auto; object-fit: contain; }
.sponsor-tile--empty {
  flex-direction: column; gap: 4px;
  border: 2px dashed var(--color-accent-tint-border);
  background: var(--color-accent-tint);
}
.sponsor-tile--empty svg { width: 22px; height: 22px; color: var(--color-neutral-500); }
.sponsor-tile--empty span { font-size: 11px; font-weight: 600; color: var(--color-text-muted); line-height: 1.3; }

/* ==========================================================================
   15. INFO / FAQ / DEFINITION BLOCKS
   ========================================================================== */
.info-block { padding: var(--space-4); margin-bottom: var(--space-4); }
.info-block h3 { margin-bottom: var(--space-3); }

.info-label {
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.07em;
  color: var(--color-primary);
  font-weight: 700;
}
.info-label:not(:first-child) { margin-top: var(--space-6); }

.kv-list { display: flex; flex-direction: column; }
.kv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; font-size: 14px; }
.kv-row__label { color: var(--color-text-muted); }
.kv-row__value { margin: 0; font-weight: 700; color: var(--color-primary); }

.exhibit-card { padding: var(--space-4); margin-bottom: var(--space-4); }
.exhibit-card:last-child { margin-bottom: 0; }
.exhibit-card__title { margin-bottom: var(--space-3); }
.exhibit-card__hours { margin: var(--space-3) 0 0; font-size: 13px; color: var(--color-text-muted); }

.exhibit-map {
  display: block; width: 100%; padding: 0; margin: 0; border: none; background: var(--color-neutral-200);
  font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 9;
  -webkit-tap-highlight-color: transparent;
}
.exhibit-map__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: var(--radius-lg); }
.exhibit-map--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  aspect-ratio: 16 / 9; min-height: 160px; padding: var(--space-5);
  border: 2px dashed var(--color-accent-tint-border);
  background: var(--color-accent-tint);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: 13px; font-weight: 600; text-align: center; cursor: default;
}
.exhibit-map--empty svg { width: 26px; height: 26px; color: var(--color-neutral-500); }

.wifi-sponsor { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.wifi-sponsor__label {
  display: inline-block; flex: none;
  background: var(--color-neutral-300); color: var(--color-neutral-800);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: var(--radius-pill);
}
.wifi-sponsor__logo {
  width: auto;
  height: 28px;
  max-width: 160px;
  aspect-ratio: auto;
  display: block;
}
.wifi-sponsor__name { font-size: 11px; font-weight: 600; color: var(--color-primary); }
.wifi-sponsor__placeholder { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-muted); }
.wifi-sponsor__placeholder svg { width: 16px; height: 16px; color: var(--color-neutral-500); }

.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  padding: var(--space-3) 0; cursor: pointer; font-weight: 600; font-size: 14.5px;
  display: flex; align-items: center; justify-content: space-between; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; color: var(--color-text-muted); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding-bottom: var(--space-3); color: var(--color-text-muted); font-size: 13.5px; }

/* ==========================================================================
   16. VENUE MAP VIEWER (Additional Info, exhibit hall / expo maps)
   ========================================================================== */
.map-viewer {
  position: fixed; inset: 0; z-index: 90;
  background: #101012;
  display: none; flex-direction: column;
}
.map-viewer.is-open { display: flex; }

.map-viewer__header {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3);
  background: rgba(0, 0, 0, 0.35);
}
.map-viewer__title { color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.map-viewer__controls { display: flex; align-items: center; gap: var(--space-2); }
.map-viewer__zoom-btn, .map-viewer__close {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.map-viewer__zoom-btn:hover, .map-viewer__close:hover { background: rgba(255, 255, 255, 0.22); }
.map-viewer__close svg { width: 18px; height: 18px; }

.map-viewer__stage {
  flex: 1; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab;
}
.map-viewer__stage.is-dragging { cursor: grabbing; }
.map-viewer__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  transform-origin: center center; will-change: transform;
}
.map-viewer__hint {
  flex: none; text-align: center; margin: 0;
  padding: var(--space-2) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.55); font-size: 12px;
}

/* ==========================================================================
   17. UP NEXT / TEASERS (Home)
   ========================================================================== */
.up-next {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-accent-tint);
  border-color: var(--color-accent-tint-border);
}
.up-next .tag { margin-bottom: var(--space-2); }
.up-next .session-row__meta { font-size: 12.5px; }

.sponsor-banner {
  margin-top: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-neutral-300);
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.sponsor-banner__label {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;

  display: inline-block;
  background: rgba(29, 31, 32, 0.7);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.sponsor-banner__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 84px;
  color: var(--color-neutral-600);
  font-size: 12.5px; text-align: center;
}
.sponsor-banner__placeholder svg { width: 26px; height: 26px; color: var(--color-neutral-500); }
.sponsor-banner__link {
  position: absolute;
  inset: 0;
  display: block;
}
.sponsor-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Two uploads, one banner: the 750×400 mobile crop shows by default, and the
   1680×400 desktop crop swaps in at the same breakpoint the rest of the
   theme switches to its desktop layout — same size/position/behavior either
   way, just a different image underneath. */
.sponsor-banner__img--desktop { display: none; }
@media (min-width: 780px) {
  .sponsor-banner__img--mobile { display: none; }
  .sponsor-banner__img--desktop { display: block; }
}

/* ==========================================================================
   18. UTILITIES
   ========================================================================== */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack-sm > * + * { margin-top: var(--space-2); }

/* ==========================================================================
   19. ACCESS SPLASH SCREEN (optional password gate, Settings > Splash Screen)
   ========================================================================== */
/* A fixed overlay on top of the normal page (not a standalone page of its
   own) — see fracsand_splash_print_overlay() in inc/splash.php for why:
   WP Engine's Edge Full Page Cache can't vary its cache by cookie, so the
   real page always renders and caches normally underneath this, and a tiny
   inline script decides whether to show or hide the overlay in each
   visitor's own browser. Visible by default (fail closed) — the script
   only ever hides it, never shows it, so a visitor never sees a flash of
   real content before the check runs. */
.fracsand-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, var(--color-primary-dark) 0%, var(--color-primary) 70%);
  padding: 0 var(--space-5) var(--space-6);
  overflow-y: auto;
}
html.fracsand-locked { overflow: hidden; }

/* Everything above the sponsor strip. This grows to fill the screen so the
   sponsor block stays pinned to the bottom (same trick as before, just one
   level up — see .fracsand-splash__logo below for why). */
.fracsand-splash__upper {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

/* Logo — flex:1 makes this fill all the leftover space above the password
   form (i.e. from the very top of the screen down to where the form
   starts), and centers the logo within that space — so the logo ends up
   vertically centered between the top of the screen and the password
   field, whatever that distance happens to be on a given screen. */
.fracsand-splash__logo {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6) 0;
  box-sizing: border-box;
}
.fracsand-splash__logo-img { max-width: 65%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.fracsand-splash__logo-text {
  font-family: var(--font-heading); font-weight: 700; font-size: 30px;
  color: var(--color-on-primary-neutral); text-transform: uppercase; letter-spacing: 1px; text-align: center; /* was a hardcoded #fff; see --color-on-primary-neutral's definition above */
}

/* Password form — natural height, sits directly below the logo (the logo's
   flex:1 above is what pushes this down rather than the form centering
   itself in its own space). */
.fracsand-splash__main {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  max-width: 360px; margin: 0 auto; width: 100%;
}
.fracsand-splash__form { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); }
.fracsand-splash__label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75); font-weight: 700; text-align: center;
}
.fracsand-splash__input {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px; border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 16px; text-align: center;
  letter-spacing: 0.08em;
}
.fracsand-splash__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.fracsand-splash__input:focus { outline: none; border-color: var(--color-accent); background: rgba(255, 255, 255, 0.16); }
.fracsand-splash__error { color: var(--color-on-primary); font-size: 13px; text-align: center; margin: 0; } /* was --color-accent; see --color-on-primary's definition above */
.fracsand-splash__submit { width: 100%; }

/* App sponsor — pinned to the bottom of the screen, same treatment as the
   Wi-Fi sponsor block on the Additional Info page. */
.fracsand-splash__sponsor {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding-top: var(--space-6);
}
.fracsand-splash__sponsor-label {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-on-primary-neutral); font-weight: 700; /* was a hardcoded #fff; see --color-on-primary-neutral's definition above */
}
.fracsand-splash__sponsor-logo { max-width: 140px; max-height: 40px; width: auto; height: auto; display: block; }
.fracsand-splash__sponsor-name { color: var(--color-on-primary-neutral); font-weight: 600; font-size: 14px; } /* was a hardcoded #fff; see --color-on-primary-neutral's definition above */