@import url('/assets/css/bomforge-brand.css?v=20261011t');

/* ============================================
   BOMAtlas Profile Pages - Shared CSS
   Light "atlas" design system. Mobile-first, accessible.

   Tokens are copied from atlas-shell.css?v=20261011t (the reference
   implementation) so these pages read as the same product as the
   redesigned map shells.

   The legacy token names (--bg, --bg-card, --text, --border ...) are
   kept and remapped onto the atlas palette rather than renamed: 1,137
   pages ship with this markup and no HTML is being touched.

   This file also supplies the LIGHT values for the header tokens that
   header-premium.css?v=20261011t reads (see the theming contract at the top of that
   file). That is what makes the header light on these pages and leaves
   it dark on the page families still using the old body stylesheets.
   ============================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ---- Canonical atlas tokens (atlas-shell.css?v=20261011t) ---- */
  --ink: #1a1713;
  --ink-2: #56544e;
  --ink-3: #6c6964; /* was #989690 — 2.96:1 on white, failed WCAG AA */
  --line: rgba(26, 23, 19, 0.08);
  --line-strong: rgba(26, 23, 19, 0.16);
  --paper: #fffff8;
  --paper-2: #fbf7f1;
  --accent: #0c0a06;
  --accent-2: #282621;

  /* Tertiary TEXT colour. Deliberately darker than --ink-3: --ink-3 is
     2.96:1 on white, which fails WCAG AA for the small uppercase labels
     this file uses it on. --ink-3 stays available for non-text use
     (rules, dots, dividers). See the report note on this deviation. */
  --ink-meta: #6c6964;
}

/* Legacy + header bridges. :root:root:root (0,3,0) outranks the
   bomforge-brand pinned-dark vocabulary (0,2,0) so these pages stay
   theme-aware: every name derives from ink/paper, which the brand
   layer already re-tints in both modes. */
:root:root:root {
  /* ---- Legacy names, remapped onto the atlas palette ---- */
  --bg: var(--paper-2);
  --bg-elevated: var(--paper-2);
  --bg-card: var(--paper);
  --bg-card-hover: var(--paper-2);
  --text: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-meta);
  --border: var(--line);
  --border-hover: var(--line-strong);
  --accent-hover: var(--accent-2);

  /* Semantic hues retuned for a light surface (all >= 4.5:1 on white) */
  --green: #6d6b65;
  --green-soft: rgba(109, 107, 101, 0.08);
  --green-border: rgba(109, 107, 101, 0.28);
  --orange: #75736d;
  --orange-soft: rgba(117, 115, 109, 0.09);
  --accent-soft: rgba(10, 10, 10, 0.05);
  --accent-border: rgba(10, 10, 10, 0.2);

  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 3px rgba(26, 23, 19, 0.05);
  --shadow-card-hover: 0 4px 16px rgba(26, 23, 19, 0.08);

  /* ---- Header bridge: light values for header-premium.css?v=20261011t ---- */
  --bg-surface: var(--paper);
  --bg-void: var(--paper);
  --text-primary: var(--ink);
  --border-subtle: var(--line);
  --color-info: var(--accent);
  --color-info-hover: var(--accent-2);
  --header-scrolled-bg: rgba(255, 255, 255, 0.92);
  --header-hover-bg: rgba(26, 23, 19, 0.05);
  --header-active-bg: rgba(26, 23, 19, 0.07);
  --header-hover-border: var(--line-strong);
  --header-accent-soft: var(--accent-soft);
  --header-accent-border: var(--accent-border);
  --header-accent-ink: var(--accent);
  --header-menu-shadow: 0 12px 32px rgba(26, 23, 19, 0.14);
  --header-drawer-bg: var(--paper);
  --header-drawer-shadow: -4px 0 28px rgba(26, 23, 19, 0.16);
  --header-scrim: rgba(26, 23, 19, 0.4);
  --header-submenu-bg: var(--paper-2);
  --header-danger-ink: #b91832;
  --header-danger-soft: rgba(185, 24, 50, 0.08);
  --header-radius: 7px;
  --header-radius-cta: 9px;
  --header-radius-menu: 12px;
  --header-radius-badge: 100px;
  --header-logo-weight: 800;
  --header-logo-tracking: -0.03em;
}

/* ── Dark mode: flip the canonical tokens; every legacy/bridge name
     derives from them via var() so the whole surface follows. ── */
@media (prefers-color-scheme: dark) {
  /* :root:root:root, matching the light block above. Equal specificity, later
     in the file, so the flip wins. On plain :root it never did. */
  :root:root:root {
    /* Only the tokens bomforge-brand.css?v=20261011t does NOT define. It owns --ink, --paper,
       --accent, --line and the legacy bridges on :root:root, and re-tints them in
       both modes; restating them here just forks the palette (profile pages on a
       blue-black #161410 while the rest of the site is #0c0a06). Everything below
       is genuinely this file's own. */
    --green: #c0bdb7;
    --green-soft: rgba(192, 189, 183, 0.1);
    --green-border: rgba(192, 189, 183, 0.3);
    --orange: #ccc9c3;
    --orange-soft: rgba(204, 201, 195, 0.1);
    --accent-soft: rgba(255, 255, 255, 0.1);
    --accent-border: rgba(255, 255, 255, 0.28);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
    --header-scrolled-bg: rgba(18, 15, 11, 0.92);
    --header-hover-bg: rgba(244, 241, 235, 0.06);
    --header-active-bg: rgba(244, 241, 235, 0.09);
    --header-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    --header-drawer-shadow: -4px 0 28px rgba(0, 0, 0, 0.6);
    --header-scrim: rgba(0, 0, 0, 0.6);
    --header-danger-ink: #f87174;
    --header-danger-soft: rgba(248, 113, 116, 0.12);
  }
}
/* Manual toggle overrides — [data-theme] beats the OS media query by specificity. */
/* One level above the media block so a forced theme still beats the OS. */
:root:root:root[data-theme='dark'] {
  /* Only the tokens bomforge-brand.css?v=20261011t does NOT define. It owns --ink, --paper,
     --accent, --line and the legacy bridges on :root:root, and re-tints them in
     both modes; restating them here just forks the palette (profile pages on a
     blue-black #161410 while the rest of the site is #0c0a06). Everything below
     is genuinely this file's own. */
  --green: #c0bdb7;
  --green-soft: rgba(192, 189, 183, 0.1);
  --green-border: rgba(192, 189, 183, 0.3);
  --orange: #ccc9c3;
  --orange-soft: rgba(204, 201, 195, 0.1);
  --accent-soft: rgba(255, 255, 255, 0.1);
  --accent-border: rgba(255, 255, 255, 0.28);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
  --header-scrolled-bg: rgba(18, 15, 11, 0.92);
  --header-hover-bg: rgba(244, 241, 235, 0.06);
  --header-active-bg: rgba(244, 241, 235, 0.09);
  --header-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  --header-drawer-shadow: -4px 0 28px rgba(0, 0, 0, 0.6);
  --header-scrim: rgba(0, 0, 0, 0.6);
  --header-danger-ink: #f87174;
  --header-danger-soft: rgba(248, 113, 116, 0.12);
}
:root:root:root[data-theme='light'] {
  /* Only the tokens bomforge-brand.css?v=20261011t does NOT define. It owns --ink, --paper,
     --accent, --line and the legacy bridges on :root:root, and re-tints them in
     both modes; restating them here just forks the palette (profile pages on a
     blue-black #161410 while the rest of the site is #0c0a06). Everything below
     is genuinely this file's own. */
  --green: #6d6b65;
  --green-soft: rgba(109, 107, 101, 0.08);
  --green-border: rgba(109, 107, 101, 0.28);
  --orange: #75736d;
  --orange-soft: rgba(117, 115, 109, 0.09);
  --accent-soft: rgba(10, 10, 10, 0.05);
  --accent-border: rgba(10, 10, 10, 0.2);
  --shadow-card: 0 1px 3px rgba(26, 23, 19, 0.05);
  --shadow-card-hover: 0 4px 16px rgba(26, 23, 19, 0.08);
  --header-scrolled-bg: rgba(255, 255, 255, 0.92);
  --header-hover-bg: rgba(26, 23, 19, 0.05);
  --header-active-bg: rgba(26, 23, 19, 0.07);
  --header-menu-shadow: 0 12px 32px rgba(26, 23, 19, 0.14);
  --header-drawer-shadow: -4px 0 28px rgba(26, 23, 19, 0.16);
  --header-scrim: rgba(26, 23, 19, 0.4);
  --header-danger-ink: #b91832;
  --header-danger-soft: rgba(185, 24, 50, 0.08);
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---- Skip Link (Accessibility) ---- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--accent);
  color: var(--paper);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  z-index: 10000;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 12px;
}

/* ---- Container & Layout ---- */
.profile-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 16px 100px; /* mobile-first: bottom padding for sticky CTA */
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  /* --ink-3 is only 2.78:1 on --paper-2; the "/" separators are text nodes
     and must clear AA like any other glyph. */
  color: var(--text-muted);
  flex-wrap: wrap;
  min-height: 44px; /* touch target */
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 4px; /* expand touch target */
  min-height: 44px;
  min-width: 32px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
}

@media (hover: hover) {
  .breadcrumb a:hover {
    color: var(--accent);
  }
}

.breadcrumb a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- School Type Badge ---- */
.school-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  background: var(--accent-soft);
  /* --accent on this tint over --paper-2 measures 4.42:1 — just under AA.
     --accent-2 takes the same pill to 5.74:1. */
  color: var(--accent-2);
  border: 1px solid var(--accent-border);
}

/* ---- Profile Header ---- */
.profile-header {
  margin-bottom: 32px;
}

.school-name {
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.school-location {
  font-size: 18px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.school-summary {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 700px;
}

/* ---- Early CTA (above the fold on mobile) ---- */
.early-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.early-cta .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  min-height: 44px;
  transition: background 0.2s;
}

@media (hover: hover) {
  .early-cta .cta-btn:hover {
    background: var(--accent-hover);
  }
}

.early-cta .cta-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.early-cta .cta-btn-secondary {
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
}

@media (hover: hover) {
  .early-cta .cta-btn-secondary:hover {
    border-color: var(--ink-3);
    background: var(--paper-2);
  }
}

/* ---- Quick Stats ---- */
.quick-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.stat-item {
  text-align: center;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  min-width: 80px;
  flex: 1;
  max-width: 140px;
}

/* The big callout number: weight and size carry it, not colour. */
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ---- Cards ---- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin-bottom: 20px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.about-section p {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 12px;
}

.about-section p:last-child {
  margin-bottom: 0;
}

/* ---- Key Facts Card ---- */
.key-facts-card {
  background: var(--paper);
  border-color: var(--accent-border);
}

.key-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.key-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.key-fact svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.key-fact-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.key-fact-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

.wage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.wage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 13px;
}

.wage-pill-cat {
  color: var(--text-secondary);
}

.wage-pill-val {
  font-weight: 600;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  font-size: 20px;
}

.section-title svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* ---- Programs (grid layout, matches hydration output) ---- */
.categories-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition:
    border-color 0.2s,
    background 0.2s;
}

@media (hover: hover) {
  .category-badge:hover {
    border-color: var(--accent-border);
    background: var(--accent-soft);
  }
}

.category-icon {
  font-size: 16px;
  line-height: 1;
}

.category-name {
  line-height: 1;
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.program-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.program-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  flex-shrink: 0;
}

.program-name {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  margin: 0;
}

.program-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Legacy programs list (generated by crawler script) */
.programs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.program-item {
  padding: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.program-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.program-title {
  flex: 1;
  min-width: 0;
}

.program-credential {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.program-duration {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.program-desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.5;
}

/* ---- Certifications, Equipment, Accreditations ---- */
.certs-grid,
.certs-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.cert-card {
  padding: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.cert-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.cert-check {
  color: var(--green);
  font-weight: 700;
  font-size: 16px;
}

.cert-name {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.cert-org {
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 4px;
}

.cert-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.cert-badge::before {
  content: '\2713';
  color: var(--green);
  font-weight: 700;
}

.equipment-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.equipment-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 14px;
  color: var(--text);
}

.equipment-item::before {
  content: '\2699\FE0F';
}

.accred-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.accred-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* ---- Contact Grid (matches hydration output) ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.2s;
}

.contact-icon {
  flex-shrink: 0;
  font-size: 20px;
  margin-top: 2px;
}

/* SVG icons in contact items */
.contact-icon svg,
svg.contact-icon {
  width: 20px;
  height: 20px;
  fill: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.contact-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
  display: inline-block;
  padding: 8px 0;
  margin: -4px 0;
}

@media (hover: hover) {
  .contact-link:hover {
    text-decoration: underline;
  }
}

.contact-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.contact-value {
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}

/* Legacy detail-item layout (from regeneration script) */
.detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  min-height: 44px; /* touch target */
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-icon {
  font-size: 18px;
  color: var(--text-muted);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.detail-content {
  flex: 1;
  min-width: 0;
}

.detail-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.detail-value {
  font-size: 14px;
  color: var(--text);
}

.detail-value a {
  color: var(--accent);
  text-decoration: none;
}

@media (hover: hover) {
  .detail-value a:hover {
    text-decoration: underline;
  }
}

.detail-value a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Location Map ---- */
#map,
.map-container {
  height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #efece6; /* matches atlas-shell #map resting colour */
  border: 1px solid var(--line);
}

/* Map controls on the light basemap */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
}

.leaflet-control-attribution a {
  color: var(--text-secondary) !important;
}

.leaflet-popup-content-wrapper {
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(26, 23, 19, 0.14);
}

.leaflet-popup-content {
  margin: 12px;
  font-family: inherit;
}

.leaflet-popup-tip {
  background: var(--paper);
}

/* ---- Nearby Schools ---- */
.nearby-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.nearby-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  min-height: 44px;
}

.nearby-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nearby-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}

.nearby-name {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  flex: 1;
}

.nearby-distance {
  font-size: 12px;
  color: var(--orange);
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 8px;
  background: var(--orange-soft);
  border-radius: 2px;
}

.nearby-location {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 6px;
}

.nearby-programs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nearby-program-tag {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text-muted);
}

/* ---- Actions Row ---- */
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  min-height: 44px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

@media (hover: hover) {
  .action-btn:hover {
    background: var(--accent-hover);
  }
}

.action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.action-btn.secondary {
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
}

@media (hover: hover) {
  .action-btn.secondary:hover {
    border-color: var(--ink-3);
    background: var(--paper-2);
  }
}

/* ---- CTA Section (bottom of page) ---- */
.cta-section {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.015) 100%);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  margin-top: 32px;
}

.cta-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.cta-text {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 15px;
}

.cta-btn-large {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  min-height: 48px;
  font-size: 15px;
  transition: background 0.2s;
}

@media (hover: hover) {
  .cta-btn-large:hover {
    background: var(--accent-hover);
  }
}

.cta-btn-large:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Sticky Mobile CTA ---- */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(26, 23, 19, 0.06);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.sticky-cta-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
}

.sticky-cta .cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  min-height: 48px;
  border: none;
  cursor: pointer;
}

.sticky-cta .cta-btn-primary {
  background: var(--accent);
  color: var(--paper);
}

.sticky-cta .cta-btn-secondary {
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line-strong);
  flex: 0 0 auto;
}

/* ---- Footer ---- */
.profile-footer {
  margin-top: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.profile-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}

@media (hover: hover) {
  .profile-footer a:hover {
    color: var(--accent);
  }
}

/* ============================================
   Responsive: Tablet (2-column grids)
   ============================================ */
@media (min-width: 640px) {
  .profile-container {
    padding: 80px 24px 100px;
  }

  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .certs-grid,
  .certs-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nearby-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #map,
  .map-container {
    height: 350px;
  }
}

/* ============================================
   Responsive: Desktop (wider layout)
   ============================================ */
@media (min-width: 1024px) {
  .profile-container {
    padding: 100px 24px 80px;
  }

  .card {
    padding: 28px;
  }

  .programs-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  #map,
  .map-container {
    height: 400px;
  }

  .cta-section {
    padding: 40px;
  }
}

/* ============================================
   Mobile-specific: show sticky CTA
   ============================================ */
@media (max-width: 639px) {
  .sticky-cta {
    display: block;
  }
}

/* ============================================
   Hover-only states (no touch jank)
   ============================================ */
@media (hover: hover) {
  .card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-card-hover);
  }

  .program-card:hover {
    border-color: var(--accent-border);
    background: var(--accent-soft);
  }

  .program-item:hover {
    border-color: var(--line-strong);
  }

  .contact-item:hover {
    border-color: var(--line-strong);
  }

  .nearby-card:hover {
    border-color: var(--line-strong);
    background: var(--paper);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    transition: all 0.2s;
  }

  .cert-card:hover {
    border-color: var(--green-border);
    background: var(--green-soft);
  }

  .cert-badge:hover {
    border-color: var(--green-border);
    background: var(--green-soft);
  }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .bomatlas-header,
  .sticky-cta,
  .actions,
  .cta-section,
  #map,
  .map-container {
    display: none !important;
  }

  body {
    background: #fffff8;
    color: #000;
  }

  .card {
    border: 1px solid #e0ddd7;
    box-shadow: none;
    break-inside: avoid;
  }

  .profile-container {
    padding: 0;
    max-width: 100%;
  }
}

/* ---- Partnership Badge ---- */
.partnership-badge {
  display: inline-block;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid var(--green-border);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 2px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---- Duration Note ---- */
.duration-note {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

/* ---- Quiz Link on Profiles ---- */
.quiz-link {
  display: inline-block;
  margin-top: 7px;
  padding: 5px 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
@media (hover: hover) {
  .quiz-link:hover {
    text-decoration: underline;
  }
}

/* In the bottom CTA the primary button is followed by two secondary
   links. As inline-blocks they flowed onto the button's line and against
   each other, reading as one broken line instead of a stack of choices.
   Existing classes only — no markup change. */
.cta-section .quiz-link {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
}