/* ==========================================================================
   Waymarker design system — single stylesheet for the Laravel app.
   Brand for waymarker.org: self-guided audio tours of churches & heritage sites.
   Palette from the mark: navy (primary), sage (secondary), gold (accent, sparing),
   on warm parchment. Type: Spectral (display serif) + Hanken Grotesk (UI sans).

   Sections:
     1. Webfonts
     2. Tokens (colors, type, spacing, effects)
     3. Public base + utilities
     4. Public components (.wm-*)
     5. Admin theme overrides (CoreUI 3 / Bootstrap 4)
     6. Portal theme overrides (Bootstrap 5)
   ========================================================================== */

/* 1. Webfonts ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* 2. Tokens --------------------------------------------------------------- */
:root {
  /* Navy (primary) */
  --navy-900: #102433;
  --navy-800: #163243;
  --navy-700: #1E4158;
  --navy-600: #2C5670;
  --navy-500: #3E6A85;
  --navy-300: #8AA7BA;
  --navy-100: #D7E2EA;
  --navy-050: #EDF2F6;

  /* Sage (secondary) */
  --sage-800: #3F4F3B;
  --sage-700: #54684F;
  --sage-600: #6E866C;
  --sage-500: #859C82;
  --sage-300: #B7C6B2;
  --sage-100: #E2E9DE;
  --sage-050: #F0F4ED;

  /* Gold (accent — sparing) */
  --gold-800: #846628;
  --gold-700: #9A7B36;
  --gold-600: #BF9D52;
  --gold-500: #D8B565;
  --gold-300: #E8D29A;
  --gold-200: #EFDFB4;
  --gold-100: #F4E9CC;
  --gold-050: #FBF4E1;

  /* Parchment surfaces */
  --parchment-50:  #FCFAF4;
  --parchment-100: #F7F2E8;
  --parchment-200: #EFE8D8;
  --parchment-300: #E4DAC5;
  --cream:         #FFFCE5;

  /* Ink / neutrals */
  --ink-900: #14222C;
  --ink-800: #25323B;
  --ink-700: #3A4750;
  --ink-600: #54626B;
  --ink-500: #6E7C84;
  --ink-400: #93A0A7;
  --ink-300: #BCC6CB;
  --ink-200: #DCE2E5;
  --ink-100: #EDF0F2;
  --white:   #FFFFFF;

  /* Status */
  --success: #4F7A4A; --success-soft: #E4EEDF;
  --warning: #C08A2E; --warning-soft: #F7EAD0;
  --danger:  #B0473C; --danger-soft: #F3DCD8;
  --info:    #2C5670; --info-soft: #E0EAF0;

  /* Semantic surfaces */
  --surface-page:    var(--parchment-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--parchment-100);
  --surface-inverse: var(--navy-800);
  --surface-accent:  var(--gold-050);
  --surface-sage:    var(--sage-050);

  /* Semantic text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-navy:  var(--parchment-50);
  --text-on-navy-muted: var(--navy-300);
  --text-link:     var(--navy-700);
  --text-accent:   var(--gold-700);

  /* Brand roles */
  --brand-primary: var(--navy-700);
  --brand-primary-hover: var(--navy-800);
  --brand-secondary: var(--sage-600);
  --brand-accent: var(--gold-600);

  /* Borders */
  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-400);
  --border-on-navy: rgba(255,255,255,0.16);
  --hairline:       var(--parchment-300);

  /* Type families */
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* Weights */
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  /* Display sizes */
  --fs-display-xl: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);
  --fs-display-lg: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --fs-display-md: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);

  /* Steps */
  --fs-h1: 2.25rem; --fs-h2: 1.75rem; --fs-h3: 1.375rem; --fs-h4: 1.125rem;
  --fs-lg: 1.1875rem; --fs-base: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem;

  /* Line heights */
  --lh-tight: 1.08; --lh-snug: 1.22; --lh-heading: 1.3; --lh-body: 1.62; --lh-relaxed: 1.75;

  /* Letter spacing */
  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0;
  --ls-wide: 0.04em; --ls-eyebrow: 0.14em;

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem;
  --space-9: 4rem; --space-10: 5rem; --space-12: 7rem;

  /* Radii */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  /* Containers */
  --container-prose: 44rem;
  --container-narrow: 60rem;
  --container-wide: 75rem;
  --app-max-width: 26.25rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* Elevation — soft, navy-tinted */
  --shadow-xs: 0 1px 2px rgba(16,36,51,0.06);
  --shadow-sm: 0 1px 2px rgba(16,36,51,0.06), 0 2px 6px rgba(16,36,51,0.05);
  --shadow-md: 0 2px 4px rgba(16,36,51,0.05), 0 8px 20px rgba(16,36,51,0.08);
  --shadow-lg: 0 6px 14px rgba(16,36,51,0.08), 0 20px 40px rgba(16,36,51,0.12);
  --shadow-xl: 0 12px 28px rgba(16,36,51,0.12), 0 36px 64px rgba(16,36,51,0.16);
  --ring-focus: 0 0 0 3px rgba(216,181,101,0.55);

  /* Motion — unhurried */
  --ease-standard: cubic-bezier(0.32,0.08,0.24,1);
  --ease-out: cubic-bezier(0.16,0.84,0.44,1);
  --ease-in: cubic-bezier(0.5,0,0.84,0.34);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms;
}

/* 3. Public base + utilities --------------------------------------------- */
.wm {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.wm *, .wm *::before, .wm *::after { box-sizing: border-box; }
.wm h1, .wm h2, .wm h3, .wm h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  margin: 0;
}
.wm a:not(.wm-btn) { color: var(--text-link); text-decoration: none; }
.wm a:not(.wm-btn):hover { text-decoration: underline; }
/* Anchors used as buttons must keep their variant text colour, not link colour. */
.wm a.wm-btn, .wm a.wm-btn:hover { text-decoration: none; }
.wm img { max-width: 100%; }

.wm-container { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wm-prose { max-width: var(--container-prose); }
.wm-narrow { max-width: var(--container-narrow); }
.wm-serif { font-family: var(--font-display); }
.wm-muted { color: var(--text-muted); }
.wm-center { text-align: center; }
.wm-section { padding-block: clamp(3rem, 7vw, 6rem); }

.wm-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* 4. Public components ---------------------------------------------------- */

/* Buttons */
.wm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; padding: 0 22px;
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 15px;
  line-height: 1; letter-spacing: 0.005em;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.wm-btn:hover { text-decoration: none; }
.wm-btn:active { transform: translateY(1px); }
.wm-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.wm-btn .wm-i, .wm-btn i, .wm-btn svg { width: 18px; height: 18px; }
.wm-btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.wm-btn-lg { height: 54px; padding: 0 30px; font-size: 17px; }
.wm-btn-block { width: 100%; }

.wm-btn-primary { background: var(--brand-primary); color: var(--text-on-navy); border-color: var(--brand-primary); }
.wm-btn-primary:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--text-on-navy); }
.wm-btn-accent { background: var(--gold-600); color: var(--navy-900); border-color: var(--gold-600); }
.wm-btn-accent:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.wm-btn-secondary { background: transparent; color: var(--navy-700); border-color: var(--border-default); }
.wm-btn-secondary:hover { background: var(--parchment-100); border-color: var(--border-strong); color: var(--navy-700); }
.wm-btn-ghost { background: transparent; color: var(--navy-700); }
.wm-btn-ghost:hover { background: var(--parchment-100); }
.wm-btn-light { background: var(--parchment-50); color: var(--navy-700); border-color: var(--parchment-50); }
.wm-btn-light:hover { background: var(--white); border-color: var(--white); color: var(--navy-700); }
/* Outline button for dark/navy grounds (e.g. the hero secondary CTA) */
.wm-btn-outline-light { background: transparent; color: var(--text-on-navy); border-color: var(--border-on-navy); }
.wm-btn-outline-light:hover { background: rgba(252,250,244,0.12); border-color: rgba(255,255,255,0.45); color: var(--text-on-navy); }
.wm-btn-link { background: transparent; color: var(--text-link); border: 0; height: auto; padding: 0; border-radius: 0; }
.wm-btn-link:hover { text-decoration: underline; }
.wm-btn[disabled], .wm-btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Icon button — round, soft */
.wm-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: var(--radius-pill); border: 0; cursor: pointer;
  background: var(--parchment-100); color: var(--navy-700);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.wm-iconbtn:hover { background: var(--parchment-200); }
.wm-iconbtn:active { transform: scale(0.94); }
.wm-iconbtn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.wm-iconbtn-glass { background: rgba(252,250,244,0.92); backdrop-filter: blur(4px); }
.wm-iconbtn i, .wm-iconbtn svg { width: 20px; height: 20px; }

/* Eyebrow + section header */
.wm-section-header { margin-bottom: var(--space-5); }
.wm-section-header h2 { font-size: var(--fs-h2); margin-top: 6px; }
.wm-section-header .wm-lede { color: var(--text-muted); margin-top: 8px; font-size: var(--fs-lg); }

/* Card */
.wm-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.wm-card-pad { padding: var(--space-5); }
.wm-card-interactive { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); cursor: pointer; }
.wm-card-interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* Badge */
.wm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 12px;
  line-height: 1.5; letter-spacing: 0.01em;
}
.wm-badge i, .wm-badge svg { width: 13px; height: 13px; }
.wm-badge-sage { background: var(--sage-100); color: var(--sage-800); }
.wm-badge-navy { background: var(--navy-050); color: var(--navy-700); }
.wm-badge-gold { background: var(--gold-600); color: var(--navy-900); }
.wm-badge-gold-soft { background: var(--gold-100); color: var(--gold-800); }
.wm-badge-outline { background: transparent; border: 1px solid var(--border-default); color: var(--text-muted); }

/* Tag / filter chip */
.wm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 14px;
  background: var(--surface-card); color: var(--text-body);
  border: 1.5px solid var(--border-default); cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-standard);
}
.wm-tag:hover { border-color: var(--border-strong); }
.wm-tag.is-selected { background: var(--navy-700); color: var(--text-on-navy); border-color: var(--navy-700); }

/* Avatar (initials) */
.wm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--radius-pill);
  background: var(--sage-100); color: var(--sage-800);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 16px;
  overflow: hidden; background-size: cover; background-position: center;
}

/* Sticky translucent site header */
.wm-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252,250,244,0.97); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.wm-header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 16px; }
.wm-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: 20px; color: var(--navy-700); text-decoration: none; }
.wm-brand:hover { text-decoration: none; }
.wm-brand img { height: 55px; width: auto; }
.wm-wordmark { font-family: var(--font-sans); font-weight: var(--fw-bold); color: var(--navy-700); letter-spacing: -0.01em; }
.wm-wordmark .dot { color: var(--gold-600); }
.wm-wordmark .tld { color: var(--text-muted); font-weight: var(--fw-semibold); }
.wm-nav { display: flex; align-items: center; gap: 28px; }
.wm-nav a:not(.wm-btn) { color: var(--text-body); font-weight: var(--fw-medium); font-size: 15px; }
.wm-nav a:not(.wm-btn):hover { color: var(--navy-700); text-decoration: none; }

/* Hero (navy ground over dimmed photo) */
.wm-hero { position: relative; background: var(--navy-900); color: var(--text-on-navy); overflow: hidden; }
.wm-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.42; }
.wm-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(16,36,51,0.92) 0%, rgba(16,36,51,0.58) 58%, rgba(16,36,51,0.42) 100%); }
.wm-hero-inner { position: relative; z-index: 2; }
.wm-hero h1 { color: var(--text-on-navy); font-size: var(--fs-display-lg); line-height: var(--lh-tight); }
.wm-hero h1 em { font-style: italic; color: var(--gold-500); }
.wm-hero p { color: var(--navy-100); font-size: var(--fs-lg); max-width: 40rem; }

/* Navy protection gradient over any image */
.wm-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,36,51,0.72), rgba(16,36,51,0.05) 55%); }
.wm-scrim-soft { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,36,51,0.55), rgba(16,36,51,0) 55%); }

/* Venue card */
.wm-venue-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.wm-venue-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; }
.wm-venue-card-banner { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--navy-600); background-image: linear-gradient(135deg, var(--sage-500), var(--navy-600)); }
.wm-venue-card-meta { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 10px; color: #fff; font-weight: var(--fw-semibold); font-size: 13px; }
.wm-venue-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.wm-venue-card-meta i, .wm-venue-card-meta svg { width: 14px; height: 14px; }
.wm-venue-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.wm-venue-card-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 19px; line-height: 1.2; color: var(--text-strong); }
.wm-venue-card-loc { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--text-muted); font-size: 13.5px; }
.wm-venue-card-loc i, .wm-venue-card-loc svg { width: 14px; height: 14px; }

/* Point-of-interest list item */
.wm-poi { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-md); border: 1px solid transparent; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard); }
.wm-poi:hover { background: var(--parchment-100); text-decoration: none; }
.wm-poi-num { position: relative; width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--navy-700); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 16px; }
.wm-poi-thumb { width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--radius-sm); overflow: hidden; background: var(--sage-100); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--sage-500); }
.wm-poi-body { flex: 1; min-width: 0; }
.wm-poi-name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 16.5px; line-height: 1.25; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-poi-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; color: var(--text-muted); font-size: 12.5px; }
.wm-poi-meta span { display: inline-flex; align-items: center; gap: 4px; }
.wm-poi-meta i, .wm-poi-meta svg { width: 13px; height: 13px; }
.wm-poi-chev { color: var(--ink-300); flex: 0 0 auto; }

/* Audio player */
.wm-audio { --wm-audio-accent: var(--gold-500); --wm-audio-accent-strong: var(--gold-600); --wm-audio-play-ink: var(--navy-900); display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }
.wm-audio-head { display: flex; align-items: center; gap: 14px; }
.wm-audio-cover { width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius-md); overflow: hidden; background: var(--sage-100); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--sage-600); }
.wm-audio-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 17px; line-height: 1.25; color: var(--text-strong); }
.wm-audio-sub { font-size: 13px; margin-top: 2px; color: var(--text-muted); }
.wm-audio-scrub { display: flex; align-items: center; gap: 10px; }
.wm-audio-time { font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-muted); min-width: 34px; }
.wm-audio-track { flex: 1; height: 6px; border-radius: 999px; background: var(--parchment-200); position: relative; cursor: pointer; }
.wm-audio-fill { position: absolute; inset: 0; width: 0%; background: var(--wm-audio-accent); border-radius: 999px; }
.wm-audio-knob { position: absolute; top: 50%; left: 0%; width: 14px; height: 14px; border-radius: 999px; background: var(--wm-audio-accent); box-shadow: 0 1px 3px rgba(16,36,51,0.3); transform: translate(-50%,-50%); }
.wm-audio-transport { display: flex; align-items: center; justify-content: center; gap: 18px; }
.wm-audio-play { width: 54px; height: 54px; background: var(--wm-audio-accent-strong); color: var(--wm-audio-play-ink); }
.wm-audio-play:hover { background: var(--wm-audio-accent); }

/* Donate prompt */
.wm-donate { border-radius: var(--radius-lg); padding: 22px; background: var(--gold-050); border: 1px solid var(--gold-200); }
.wm-donate-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wm-donate-ic { width: 36px; height: 36px; border-radius: 999px; flex: 0 0 auto; background: var(--gold-600); color: var(--navy-900); display: inline-flex; align-items: center; justify-content: center; }
.wm-donate-ic i, .wm-donate-ic svg { width: 19px; height: 19px; }
.wm-donate h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 20px; color: var(--text-strong); }
.wm-donate p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.wm-donate-amounts { display: flex; gap: 8px; margin-bottom: 16px; }
.wm-amount { flex: 1; height: 48px; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 18px; background: var(--surface-card); color: var(--ink-700); border: 1.5px solid var(--gold-200); transition: background var(--dur-fast) var(--ease-standard); }
.wm-amount.is-on, .wm-amount:hover { background: var(--gold-600); color: var(--navy-900); border-color: var(--gold-600); }

/* Forms */
.wm-field { display: block; margin-bottom: var(--space-4); }
.wm-label { display: block; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 14px; color: var(--text-strong); margin-bottom: 6px; }
.wm-input, .wm-textarea, .wm-select {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--text-strong);
  background: var(--surface-card); border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md); padding: 12px 14px; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.wm-input:focus, .wm-textarea:focus, .wm-select:focus { outline: none; border-color: var(--gold-500); box-shadow: var(--ring-focus); }
.wm-textarea { min-height: 120px; resize: vertical; }
.wm-hint { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* Quick-facts strip */
.wm-facts { display: flex; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.wm-fact { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-body); }
.wm-fact i, .wm-fact svg { width: 19px; height: 19px; color: var(--sage-600); }
.wm-fact span { font-size: 13px; font-weight: var(--fw-semibold); }

/* Footer (dark) */
.wm-footer { background: var(--navy-900); color: var(--navy-100); }
.wm-footer a:not(.wm-btn) { color: var(--navy-100); }
.wm-footer a:not(.wm-btn):hover { color: #fff; }
.wm-footer .wm-footer-bar { border-top: 1px solid var(--border-on-navy); }

/* Phone frame for app-style pages */
.wm-app { max-width: var(--app-max-width); margin-inline: auto; }

/* Tablets and landscape: let guide pages breathe beyond the phone frame */
@media (min-width: 700px) {
  .wm-app.wm-readpage, .wm-app.wm-endpage, .wm-app.wm-transition { max-width: 44rem; }
}

/* Rich content blocks produced by the portal editors (points, transitions, pages) */
.wm-story img, .wm-transition-text img, .wm-readpage-text img, .wm-endpage-text img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.wm-story .wm-figure, .wm-transition-text .wm-figure, .wm-readpage-text .wm-figure, .wm-endpage-text .wm-figure { margin: 1.25rem 0; }
.wm-story .wm-figure img, .wm-transition-text .wm-figure img, .wm-readpage-text .wm-figure img, .wm-endpage-text .wm-figure img { display: block; width: 100%; }
.wm-figure figcaption { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 8px; }
.wm-quote { margin: 1.25rem 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold-500); font-style: italic; }
.wm-quote p { margin: 0; }
.wm-quote cite { display: block; font-family: var(--font-sans); font-style: normal; font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.wm-delimiter { border: none; border-top: 1px solid var(--border-subtle); margin: 1.75rem auto; width: 60%; }
.wm-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.5; }
.wm-table th, .wm-table td { border: 1px solid var(--border-subtle); padding: 8px 10px; text-align: left; vertical-align: top; }
.wm-table th { background: var(--parchment-100); font-weight: var(--fw-semibold); color: var(--text-strong); }

/* Lucide icons inherit currentColor, default size */
.wm i[data-lucide], .wm svg.lucide { width: 20px; height: 20px; stroke-width: 2; vertical-align: middle; }

/* ========================================================================
   5. Admin theme overrides — CoreUI 3 / Bootstrap 4
   Loaded after the CDN sheets, so equal-specificity rules win.
   ======================================================================== */
body.c-app {
  font-family: var(--font-sans);
  background: var(--parchment-100);
  color: var(--text-body);
}
body.c-app h1, body.c-app h2, body.c-app h3, body.c-app h4, body.c-app h5,
body.c-app .h1, body.c-app .h2, body.c-app .h3 { font-family: var(--font-display); color: var(--text-strong); }

/* Sidebar */
.c-sidebar { background: var(--navy-900); }
.c-sidebar .c-sidebar-brand { background: var(--navy-800); color: var(--parchment-50); font-family: var(--font-sans); font-weight: var(--fw-bold); }
.c-sidebar .c-sidebar-nav-link { color: var(--navy-100); }
.c-sidebar .c-sidebar-nav-link:hover { background: var(--navy-700); color: #fff; }
.c-sidebar .c-sidebar-nav-link.c-active { background: var(--navy-700); color: #fff; }
.c-sidebar .c-sidebar-nav-link.c-active .c-sidebar-nav-icon,
.c-sidebar .c-sidebar-nav-link:hover .c-sidebar-nav-icon { color: var(--gold-500); }
.c-sidebar .c-sidebar-nav-title { color: var(--navy-300); letter-spacing: var(--ls-eyebrow); }
.c-sidebar .c-sidebar-minimizer { background: var(--navy-800); }

/* Header */
.c-header { background: rgba(252,250,244,0.92); border-bottom: 1px solid var(--hairline); backdrop-filter: blur(8px); }
.c-header .c-header-brand { font-family: var(--font-sans); font-weight: var(--fw-bold); color: var(--navy-700); }
.c-header-nav .c-header-nav-link { color: var(--text-body); }
.c-header-nav .c-header-nav-link:hover { color: var(--navy-700); }

/* Cards */
.c-app .card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.c-app .card-header { background: var(--surface-card); border-bottom: 1px solid var(--hairline); font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--text-strong); }

/* Buttons (BS4) */
.c-app .btn { border-radius: var(--radius-pill); font-weight: var(--fw-semibold); }
.c-app .btn-primary { background-color: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.c-app .btn-primary:hover, .c-app .btn-primary:focus { background-color: var(--navy-800); border-color: var(--navy-800); }
.c-app .btn-success { background-color: var(--success); border-color: var(--success); }
.c-app .btn-danger { background-color: var(--danger); border-color: var(--danger); }
.c-app .btn-warning { background-color: var(--gold-600); border-color: var(--gold-600); color: var(--navy-900); }
.c-app .btn-info { background-color: var(--navy-600); border-color: var(--navy-600); color: #fff; }
.c-app .btn-secondary, .c-app .btn-default { background-color: var(--parchment-100); border-color: var(--border-default); color: var(--navy-700); }
.c-app .btn-outline-primary { color: var(--navy-700); border-color: var(--navy-700); }
.c-app .btn-outline-primary:hover { background: var(--navy-700); color: #fff; }
.c-app a { color: var(--text-link); }

/* Links / text accents */
.c-app .text-primary { color: var(--navy-700) !important; }
.c-app .bg-primary { background-color: var(--navy-700) !important; color: #fff !important; }

/* Badges */
.c-app .badge-primary { background-color: var(--navy-700); }
.c-app .badge-success { background-color: var(--success); }
.c-app .badge-warning { background-color: var(--gold-600); color: var(--navy-900); }
.c-app .badge-danger { background-color: var(--danger); }

/* Tables / datatables */
.c-app table.dataTable thead th, .c-app .table thead th { font-family: var(--font-sans); color: var(--text-strong); border-bottom: 2px solid var(--hairline); background: var(--parchment-50); }
.c-app .table td, .c-app .table th { border-top: 1px solid var(--hairline); }
.c-app .page-item.active .page-link { background-color: var(--navy-700); border-color: var(--navy-700); }
.c-app .page-link { color: var(--navy-700); }
.c-app .alert-success { background: var(--success-soft); color: var(--sage-800); border-color: var(--sage-300); }
.c-app .alert-danger { background: var(--danger-soft); color: #7a2b23; border-color: #e3b6b0; }

/* Forms */
.c-app .form-control { border-radius: var(--radius-sm); border-color: var(--border-default); }
.c-app .form-control:focus { border-color: var(--gold-500); box-shadow: var(--ring-focus); }

/* ========================================================================
   6. Portal theme overrides — Bootstrap 5
   The portal layout's inline :root vars are also swapped to Waymarker, but
   these rules cover component classes directly.
   ======================================================================== */
body .portal-navbar { background: rgba(252,250,244,0.9) !important; border-bottom: 1px solid var(--hairline); backdrop-filter: blur(10px); }
body .portal-navbar .navbar-brand { color: var(--navy-700) !important; font-family: var(--font-sans); font-weight: var(--fw-bold); }
body .portal-navbar .nav-link { color: var(--text-body) !important; }
body .portal-navbar .nav-link:hover, body .portal-navbar .nav-link.active { color: var(--navy-700) !important; background: var(--navy-050); }

body .portal-card .card-header,
body .table-portal th,
body .modal-portal .modal-header { background: var(--navy-700) !important; color: #fff !important; }
body .portal-card .card-header :where(h1,h2,h3,h4,h5,h6,p,small,span,a,i):not(.status-badge):not(.badge),
body .modal-portal .modal-header :where(h1,h2,h3,h4,h5,h6,p,small,span,a,i):not(.status-badge):not(.badge) { color: #fff !important; }
/* Keep semantically-coloured headers (e.g. "Danger Zone") from the navy default above. */
body .portal-card .card-header.bg-danger  { background: var(--danger) !important; }
body .portal-card .card-header.bg-success { background: var(--success) !important; }
/* A dropdown opened from a (navy) card header floats on a light panel — its items
   must NOT inherit the white header text, or they'd be invisible. */
body .portal-card .card-header .dropdown-menu .dropdown-item,
body .portal-card .card-header .dropdown-menu .dropdown-item i { color: var(--text-body) !important; }
body .portal-card .card-header .dropdown-menu .dropdown-item.text-danger,
body .portal-card .card-header .dropdown-menu .dropdown-item.text-danger i { color: var(--danger) !important; }
body .btn-portal-primary { background: var(--navy-700) !important; color: #fff; }
body .btn-portal-primary:hover { background: var(--navy-800) !important; }
body .btn-portal-secondary { background: var(--gold-600) !important; color: var(--navy-900); }
body .btn-portal-secondary:hover { background: var(--gold-500) !important; color: var(--navy-900); }
body .btn-portal-success { background: var(--sage-600) !important; color: #fff; }
body .btn-portal-outline { border: 2px solid var(--navy-700); color: var(--navy-700); }
body .btn-portal-outline:hover { background: var(--navy-700); color: #fff; }
body .venue-selector { border: 2px solid var(--navy-700); color: var(--navy-700); }
body .status-publish { background: var(--success-soft); color: var(--sage-800); }
body .status-draft { background: var(--gold-100); color: var(--gold-800); }
body.portal-body { background: var(--parchment-100); }

/* Portal content: map Bootstrap utility colours to the brand so nothing reads
   as default blue. All portal content lives inside .portal-container. */
.portal-container h1, .portal-container h2, .portal-container h3,
.portal-container h4, .portal-container h5, .portal-container h6 { color: var(--text-strong); }
.portal-container .text-primary { color: var(--navy-700) !important; }
.portal-container .text-success { color: var(--sage-700) !important; }
.portal-container .text-warning { color: var(--gold-700) !important; }
.portal-container .text-info    { color: var(--navy-600) !important; }
.portal-container .text-danger  { color: var(--danger) !important; }
.portal-container a:not(.btn)   { color: var(--text-link); }
.portal-container .badge.bg-primary   { background-color: var(--navy-700) !important; color: #fff !important; }
.portal-container .badge.bg-secondary { background-color: var(--sage-600) !important; }
.portal-container .badge.bg-success   { background-color: var(--sage-700) !important; }
.portal-container .badge.bg-warning   { background-color: var(--gold-600) !important; color: var(--navy-900) !important; }
.portal-container .btn-outline-primary { color: var(--navy-700); border-color: var(--navy-700); }
.portal-container .btn-outline-primary:hover { background: var(--navy-700); color: #fff; }
.portal-container .btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.portal-container .btn-outline-danger:hover { background: var(--danger); color: #fff; }
.portal-container .input-group-text { background: var(--parchment-100); border-color: var(--border-default); color: var(--navy-700); }
.portal-container .form-check-input:checked { background-color: var(--navy-700); border-color: var(--navy-700); }
.portal-container .form-control:focus, .portal-container .form-control-portal:focus { border-color: var(--gold-500); box-shadow: var(--ring-focus); }
.portal-container .list-group-item { border-color: var(--hairline); }

/* ------------------------------------------------------------------------
   Accessibility / legibility for older users (many venue managers are 60++):
   larger base text, higher-contrast "muted" text (default fails WCAG AA on
   parchment), no tiny secondary text, and respect for reduced-motion.
   ------------------------------------------------------------------------ */
.portal-container { font-size: 1.0625rem; }                 /* ~17px base */
.portal-container .text-muted { color: var(--ink-600) !important; }  /* lift muted to pass AA */
.portal-container small, .portal-container .small { font-size: 0.95rem; }  /* avoid tiny text */
.portal-container .lead { color: var(--text-body); }

@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Soft brand "wells" for dashboard icons */
.portal-icon-well {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  background: var(--sage-100); color: var(--sage-700); margin-bottom: 12px;
}
.portal-icon-well.is-navy { background: var(--navy-050); color: var(--navy-700); }
.portal-icon-well.is-gold { background: var(--gold-100); color: var(--gold-800); }
.portal-icon-well i, .portal-icon-well svg { font-size: 1.7rem; }

/* ========================================================================
   7. Auth pages — layouts/app.blade.php (body.login-page, inner div.c-app)
   The admin overrides key off body.c-app, which auth pages lack, so style
   them via .wm-* components in the views plus this parchment ground.
   ======================================================================== */
/* Auth shell: header / centered main / footer column on a parchment ground. */
body.wm-auth { min-height: 100vh; display: flex; flex-direction: column; background: var(--parchment-100); }
.wm-auth-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--gutter); border-bottom: 1px solid var(--hairline); background: rgba(252,250,244,0.92); }
.wm-auth-bar .wm-brand img { height: 30px; width: auto; }
.wm-auth-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-body); }
.wm-auth-back:hover { color: var(--navy-700); text-decoration: none; }
.wm-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-7) var(--gutter); }
.wm-auth-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; align-items: center; padding: 20px var(--gutter); border-top: 1px solid var(--hairline); color: var(--text-muted); font-size: 13px; text-align: center; }
.wm-auth-foot a { color: var(--text-muted); }

.wm-input.is-invalid, .wm .form-control.is-invalid { border-color: var(--danger); box-shadow: none; }
.wm-input-error { color: var(--danger); font-size: 13px; margin-top: 6px; }

/* ========================================================================
   8. Floorplan map — fullscreen overlay with zoom (used on point & guide pages)
   ======================================================================== */
.wm-map-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--navy-900); display: none; flex-direction: column; }
.wm-map-overlay.is-open { display: flex; }
.wm-map-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--navy-800); }
.wm-map-bar .t { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 16px; color: var(--parchment-50); }
.wm-map-bar .t i { width: 18px; height: 18px; color: var(--gold-500); }
.wm-map-actions { display: flex; gap: 8px; }
.wm-map-overlay .wm-iconbtn { background: rgba(255,255,255,0.12); color: var(--parchment-50); }
.wm-map-overlay .wm-iconbtn:hover { background: rgba(255,255,255,0.22); }
.wm-map-viewport { flex: 1; overflow: auto; display: flex; padding: 16px; -webkit-overflow-scrolling: touch; cursor: grab; touch-action: none; }
.wm-map-viewport.is-dragging { cursor: grabbing; }
.wm-map-stage { position: relative; flex: 0 0 auto; margin: auto; transform-origin: center center; transition: transform var(--dur-base) var(--ease-standard); }
.wm-map-stage img { display: block; max-width: 90vw; max-height: 76vh; width: auto; height: auto; border-radius: var(--radius-md); box-shadow: 0 8px 30px rgba(0,0,0,0.4); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.wm-map-pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--navy-700); color: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 5px rgba(16,36,51,0.5); font-family: var(--font-display); font-weight: 600; font-size: 11px; text-decoration: none; }
.wm-map-pin:hover { background: var(--navy-600); }
.wm-map-pin.is-current { z-index: 6; min-width: 32px; height: 32px; font-size: 14px; border-width: 2px; background: var(--gold-600); color: var(--navy-900); }
.wm-map-pin.is-current .wm-map-label { opacity: 1; }
.wm-map-pin.is-current::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--gold-500); animation: wmpulse 1.8s ease-out infinite; }
/* Directional pointer (which way to face) — rotated by the point's plan_dir bearing (0 = north). */
.wm-map-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 1; }
.wm-map-dir::before { content: ''; position: absolute; left: -7px; top: -25px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid var(--navy-700); filter: drop-shadow(0 0 1px #fff); }
.wm-map-pin.is-current .wm-map-dir::before { border-bottom-color: var(--gold-600); }
@keyframes wmpulse { 0% { transform: scale(0.7); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }
.wm-map-label { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #000; color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 12px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.wm-map-pin:hover .wm-map-label, .wm-map-pin:focus .wm-map-label { opacity: 1; }
.wm-map-legend { flex: 0 0 auto; padding: 10px 16px; background: var(--navy-800); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 12px; color: var(--navy-100); }
.wm-map-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.wm-map-legend .dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; }
/* List view inside the map overlay */
.wm-map-list { display: none; flex: 1; overflow-y: auto; padding: 12px 16px; }
.wm-map-overlay.is-list .wm-map-viewport, .wm-map-overlay.is-list .wm-map-legend { display: none; }
.wm-map-overlay.is-list .wm-map-list { display: block; }
.wm-map-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius-md); color: var(--parchment-50); text-decoration: none; font-family: var(--font-display); font-size: 16px; }
/* Outranks the global .wm a:not(.wm-btn) link colour — the list sits on navy */
.wm a.wm-map-item, .wm a.wm-map-item:hover { color: var(--parchment-50); text-decoration: none; }
.wm-map-item:hover { background: var(--navy-800); }
.wm-map-item .n { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 999px; background: var(--navy-700); border: 1.5px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.wm-map-item.is-current { background: var(--navy-800); }
.wm-map-item.is-current .n { background: var(--gold-600); color: var(--navy-900); border-color: var(--gold-500); }
.wm-map-item .here { margin-left: auto; flex: 0 0 auto; font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--gold-500); text-transform: uppercase; letter-spacing: 0.04em; }

/* ========================================================================
   9. Shared site footer (marketing/content pages) + responsive nav
   Used by partials/site-header + partials/site-footer on the homepage and
   every standard site page.
   ======================================================================== */
.footer-top { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-10) 0; }
@media (min-width: 768px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer-mark { display: inline-flex; align-items: center; gap: 10px; }
.footer-mark img { height: 34px; width: auto; }
.footer-mission { color: var(--navy-300); margin-top: var(--space-4); max-width: 26rem; }
.footer-col-title { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-500); margin-bottom: var(--space-4); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer-links a { font-size: var(--fs-base); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-5) 0; color: var(--navy-300); font-size: var(--fs-sm); }
.footer-bottom .wm-wordmark { color: var(--parchment-50); }
.footer-bottom .wm-wordmark .tld { color: var(--navy-300); }

/* Hide text nav links on small screens (keep the action buttons) */
@media (max-width: 860px) { .wm-nav a:not(.wm-btn) { display: none; } }