/* ═══════════════════════════════════════════════════════════════════════════
   chibalance.css — ChiBalance shared design system
   ═══════════════════════════════════════════════════════════════════════════

   HOW TO USE — standard page <head> block:

     <!-- Fonts: self-hosted, never Google Fonts (BUG-65; see css/fonts.css) -->
     <link href="css/fonts.css" rel="stylesheet">
     <!-- Tailwind CDN then config -->
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="js/tailwind-config.js"></script>
     <!-- Design system -->
     <link rel="stylesheet" href="css/chibalance.css">

   Standard <body> classes:
     <body class="font-body bg-warmcream text-warmbrown linen overflow-x-hidden">

   This file replaces custom.css for pages that have been migrated to the
   new design. Pages not yet migrated may continue to use custom.css.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Base ─────────────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* Nothing may make the page wider than the screen: a phone then lets the whole
   page drag sideways (Martin, 2026-09-30, home page). `clip`, not `hidden`:
   hidden would make these scroll containers and break position: sticky (the
   services page's "In practice" box). */
html, body {
  overflow-x: clip;
}

body {
  /* 18px minimum body text per UI design rules */
  font-size: 1.125rem;
  line-height: 1.7;
}


/* ── Linen texture overlay ────────────────────────────────────────────────── */

.linen {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(74,55,40,0.012) 4px, rgba(74,55,40,0.012) 5px),
    repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(74,55,40,0.008) 4px, rgba(74,55,40,0.008) 5px);
}


/* ── Navigation ───────────────────────────────────────────────────────────── */

.top-nav {
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
}

/* Over the home hero photo the transparent header sat on a pale sky, and the
   menu and language button were hard to see. A cream band that fades into the
   photo. (:has() needs a 2023+ browser; older ones keep the transparent header.) */
body:has(.home-hero-bg) .top-nav:not(.scrolled) {
  background: linear-gradient(to bottom, rgba(253,246,236,0.92) 0%, rgba(253,246,236,0.8) 70%, rgba(253,246,236,0) 100%);
}

.top-nav.scrolled {
  background: rgba(253,246,236,0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(74,55,40,0.08);
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Desktop nav links */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
  text-decoration: none;
}
.nav-link:hover {
  color: #C0734C;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: #C0734C;
  transition: width 0.3s ease, left 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  left: 0;
}
.nav-link.active {
  color: #C0734C;
}

/* Mobile bottom nav bar — warm palette */
#mobile-bottom-nav {
  background: rgba(253,246,236,0.97);
  border-top: 1px solid #DED2BD;
}


/* ── Scroll reveal animations ─────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Phones: sideways slides start 40px outside the screen, which widened the home
   page until they had played. On a phone everything rises into place instead. */
@media (max-width: 767px) {
  .reveal-left,
  .reveal-right { transform: translateY(30px); }
}

.stagger-1 { transition-delay: 0.15s; }
.stagger-2 { transition-delay: 0.30s; }
.stagger-3 { transition-delay: 0.50s; }


/* ── Image zoom on scroll ─────────────────────────────────────────────────── */

.img-zoom {
  transition: transform 8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.img-zoom.visible {
  transform: scale(1.08);
}


/* ── Yin-Yang animations ──────────────────────────────────────────────────── */

@keyframes yin-yang-spin {
  to { transform: rotate(360deg); }
}
.yinyang-rotate {
  animation: yin-yang-spin 30s linear infinite;
}

@keyframes rotate-slow {
  to { transform: rotate(360deg); }
}
.rotating-text {
  animation: rotate-slow 20s linear infinite;
}

/* Visitors who ask their device for less motion get still symbols. */
@media (prefers-reduced-motion: reduce) {
  .yinyang-rotate,
  .rotating-text { animation: none; }
}


/* ── Home hero photo ──────────────────────────────────────────────────────── */
/* The photo is drawn MIRRORED, so she stands on the left and the text sits in
   the open sky on the right (the Frankenstein design). Mirrored in CSS rather
   than with Landscape_Image(15)_copy.jpg, which is the same picture at 2.4 MB
   against 0.4 MB. This rule used to live only in custom.css, which the home page
   stopped loading in May: see __tests__/spec/home-hero.test.js. */

.home-hero-bg {
  background-color: #7A6655;
}
.home-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/Landscape_Image(15).jpg');
  background-size: cover;
  background-position: 54% 0%;   /* phones: her face centred above the text */
  transform: scaleX(-1);
}
@media (min-width: 768px) {
  .home-hero-bg::before { background-position: 70% 30%; }
}

/* The heading above her raised hand (js/hero-hand.js, 2026-10-10). The script adds .hero-hand only when the hand
   is in view and both parts fit; it sets left/top. Centred text, so the title sits over the hand. */
.home-hero-bg.hero-hand .hero-wrap,
.home-hero-bg.hero-hand #hero-text { position: static; }
.home-hero-bg.hero-hand #hero-head,
.home-hero-bg.hero-hand #hero-rest { position: absolute; z-index: 10; text-align: center; }
.home-hero-bg.hero-hand #hero-head { width: max-content; }
.home-hero-bg.hero-hand #hero-rest { width: min(32rem, calc(100% - 3rem)); }
.home-hero-bg.hero-hand .hero-eyebrow,
.home-hero-bg.hero-hand .hero-buttons { justify-content: center; }
.home-hero-bg.hero-hand .hero-title,
.home-hero-bg.hero-hand #hero-rest > p { margin-left: auto; margin-right: auto; }
.home-hero-bg.hero-hand #hero-rest > p { margin-bottom: 1.25rem; }  /* fits under the hand on a 1366 x 768 laptop */


/* ── Pull quote ───────────────────────────────────────────────────────────── */

.pull-quote {
  position: relative;
  padding-left: 24px;
  border-left: 3px solid #C0734C;
}
.pull-quote::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: -5px;
  font-size: 60px;
  font-family: 'Playfair Display', serif;
  color: #C0734C;
  opacity: 0.3;
  line-height: 1;
}


/* ── Vine divider ─────────────────────────────────────────────────────────── */

.vine-border {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(192,115,76,0.2) 10%,
    rgba(107,127,78,0.25) 30%,
    rgba(192,115,76,0.2) 50%,
    rgba(107,127,78,0.25) 70%,
    rgba(192,115,76,0.2) 90%,
    transparent 100%
  );
}


/* ── Section divider with optional label ─────────────────────────────────── */

.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0;
  color: #7A6655;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(192,115,76,0.2), transparent);
}


/* ── Services page: one section per service ──────────────────────────────── */
/* Every other service section gets a sand background, so adding or removing
   a service keeps the rhythm without touching any class. */
.service-section:nth-of-type(even) {
  background: rgba(240,230,211,0.35);
}
/* The "In practice" box stays in view beside a long description (desktop). */
@media (min-width: 768px) {
  .service-section aside { position: sticky; top: 7rem; }
}


/* ── Contact card (top of every footer, #contact) ─────────────────────────── */
/* Every "Get in Touch" button jumps here, so arriving is marked by one soft
   glow around the card: "this is where you were sent". */
@keyframes contact-arrive {
  0%   { box-shadow: 0 0 0 0 rgba(212,145,110,0.75), 0 20px 25px -5px rgba(0,0,0,0.25); }
  100% { box-shadow: 0 0 0 22px rgba(212,145,110,0), 0 20px 25px -5px rgba(0,0,0,0.25); }
}
#contact:target .contact-card {
  animation: contact-arrive 1.4s ease-out 2;
}
@media (prefers-reduced-motion: reduce) {
  #contact:target .contact-card { animation: none; outline: 3px solid #D4916E; outline-offset: 4px; }
}


/* ── Page header (interior pages) ────────────────────────────────────────── */

.page-header {
  padding: 100px 0 48px;
  background: linear-gradient(to bottom, rgba(74,55,40,0.04), transparent);
  border-bottom: 1px solid rgba(192,115,76,0.1);
  text-align: center;
}
.page-header-eyebrow {
  font-size: 1rem;              /* 16px minimum (UI rules); was 12px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6B7F4E;
  margin-bottom: 12px;
}
.page-header-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: #4A3728;
  line-height: 1.05;
  margin-bottom: 12px;
}
.page-header-subtitle {
  font-size: 1.0625rem;
  color: #7A6655;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}


/* ── Service cards ────────────────────────────────────────────────────────── */

.service-card {
  transition: transform 0.5s ease;
}
.service-card:hover {
  transform: translateY(-6px);
}
.service-card .card-overlay {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.service-card:hover .card-overlay {
  opacity: 1;
}
.service-card .card-img {
  transition: transform 0.6s ease;
}
.service-card:hover .card-img {
  transform: scale(1.06);
}


/* ── Five Elements strip ──────────────────────────────────────────────────── */

.five-elem {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 40px 0;
}
.five-elem .elem {
  text-align: center;
  transition: transform 0.3s ease;
}
.five-elem .elem:hover {
  transform: translateY(-4px);
}
.five-elem .elem-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 20px;
  border: 1.5px solid;
}


/* ── Content card ─────────────────────────────────────────────────────────── */

.cb-card {
  background: #FFFDF8;
  border: 1px solid #F0E6D3;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(74,55,40,0.06);
  transition: box-shadow 0.3s ease;
}
.cb-card:hover {
  box-shadow: 0 4px 20px rgba(74,55,40,0.1);
}
.cb-card-body {
  padding: 24px;
}


/* ── Buttons ──────────────────────────────────────────────────────────────── */

/* Button colour #8F5233, a deeper terracotta: cream text on it, and it as text
   on cream or sand, is at least 5.3:1. The palette's #C0734C was 3.4:1, under
   the 4.5:1 minimum (spec/home-hero.test.js checks this). */

/* Primary — terracotta fill. Use for booking, confirming, submitting. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 32px;
  background: #8F5233;
  color: #FDF6EC;
  border: none;
  border-radius: 8px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn-primary:hover {
  background: #7A4529;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(192,115,76,0.35);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn-primary:disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Secondary — terracotta outline. Use for secondary CTAs. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 32px;
  background: transparent;
  color: #8F5233;
  border: 1.5px solid #8F5233;
  border-radius: 8px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: #8F5233;
  color: #FDF6EC;
}
.btn-secondary:disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Ghost — no border. Use for low-emphasis actions, cancel links. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  color: #4A3728;
  border: none;
  border-radius: 8px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
}
.btn-ghost:hover {
  background: rgba(74,55,40,0.07);
}

/* Danger — red fill. ONLY use on final destructive confirmation step. */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 32px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease;
  white-space: nowrap;
}
.btn-danger:hover {
  background: #b91c1c;
}
.btn-danger:disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Small modifier — use sparingly, only for dense UI */
.btn-sm {
  min-height: 40px;
  padding: 0 20px;
  font-size: 0.875rem;
}


/* ── Form elements ────────────────────────────────────────────────────────── */

.cb-label {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #4A3728;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.cb-label-hint {
  font-weight: 400;
  color: #7A6655;
  margin-left: 6px;
}

.cb-input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  background: #FFFDF8;
  border: 1.5px solid #DED2BD;
  border-radius: 8px;
  color: #4A3728;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  line-height: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}
.cb-input:focus {
  outline: none;
  border-color: #C0734C;
  box-shadow: 0 0 0 3px rgba(192,115,76,0.15);
}
.cb-input::placeholder {
  color: #7A6655;
  opacity: 0.55;
}
.cb-input:disabled {
  background: #F5EEDF;
  color: #7A6655;
  cursor: not-allowed;
}

/* textarea variant */
.cb-textarea {
  min-height: 120px;
  padding: 14px 16px;
  line-height: 1.65;
  resize: vertical;
}

/* select variant — custom arrow */
.cb-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A3728' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
  cursor: pointer;
}

.cb-field {
  margin-bottom: 20px;
}

/* Error state */
.cb-input.error,
.cb-input[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}
.cb-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.875rem;
  color: #991b1b;
}


/* ── Status badges ────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-active    { background: rgba(107,127,78,0.12); color: #556840; }
.badge-inactive  { background: rgba(74,55,40,0.07);   color: #7A6655; }
.badge-pending   { background: rgba(184,150,90,0.15); color: #7a5a1e; }
.badge-cancelled { background: rgba(220,38,38,0.08);  color: #991b1b; }
.badge-full      { background: rgba(74,55,40,0.07);   color: #7A6655; }
.badge-waitlist  { background: rgba(192,115,76,0.12); color: #A5603D; }
.badge-info      { background: rgba(74,107,138,0.1);  color: #2a5475; }


/* ── Tables ───────────────────────────────────────────────────────────────── */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid #F0E6D3;
}

.cb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Source Sans 3', sans-serif;
}
.cb-table th {
  padding: 12px 16px;
  background: #F0E6D3;
  color: #4A3728;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.cb-table th:first-child { border-radius: 0; }
.cb-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #F5EEDF;
  color: #4A3728;
  font-size: 0.9375rem;
  vertical-align: middle;
}
.cb-table tr:last-child td {
  border-bottom: none;
}
.cb-table tbody tr {
  transition: background 0.15s ease;
}
.cb-table tbody tr:hover {
  background: rgba(253,246,236,0.7);
}


/* ── Dialog / modal ───────────────────────────────────────────────────────── */

.cb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(58,42,30,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cb-modal {
  background: #FFFDF8;
  border: 1px solid #F0E6D3;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(74,55,40,0.2);
  padding: 32px;
  max-width: 480px;
  width: 100%;
}
.cb-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #4A3728;
  margin-bottom: 12px;
}
.cb-modal-body {
  font-size: 1rem;
  line-height: 1.65;
  color: #7A6655;
  margin-bottom: 28px;
}
/* Safe action is always the primary button — placed first */
.cb-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 400px) {
  .cb-modal-actions {
    flex-direction: row-reverse; /* safe action on the right */
    justify-content: flex-start;
  }
}


/* ── Her admin's shared pieces (js/admin-ui.js, spec 18 §6) ───────────────── */

/* The dialog: names, choices, fields, the error line. */
.cb-dialog .cb-modal { max-height: calc(100vh - 32px); overflow-y: auto; }
.cb-dialog .cb-modal-body { color: #4A3728; font-size: 1.0625rem; }
.cb-dialog .cb-modal-body > * + * { margin-top: 14px; }
.cb-dialog-names { list-style: disc; padding-left: 1.4em; font-weight: 600; }
.cb-dialog-choices { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cb-dialog-choice {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px;
  border: 1px solid #DED2BD; border-radius: 10px; cursor: pointer; background: #fff;
}
.cb-dialog-choice input { width: 22px; height: 22px; accent-color: #8B5E3C; flex: none; }
.cb-dialog-choice:has(input:checked) { border-color: #8B5E3C; background: #FDF6EC; }
.cb-dialog-field .cb-label { display: block; margin-bottom: 6px; }
.cb-dialog-hint { font-size: 0.9375rem; color: #6B5444; margin-top: 6px; }
.cb-dialog-error { color: #991b1b; font-weight: 600; }

/* The notice: a sentence at the top of the page, with a large close button. */
.cb-notice { align-items: center; margin-bottom: 20px; font-size: 1.0625rem; }
.cb-notice-text { flex: 1; margin: 0; }
.cb-notice-close {
  flex: none; width: 44px; height: 44px; border: 0; background: transparent;
  font-size: 1.75rem; line-height: 1; color: inherit; cursor: pointer; border-radius: 8px;
}
.cb-notice-close:hover { background: rgba(0,0,0,0.06); }

/* The "?" help: a 44px tap target drawn as a small circle; the text opens in place. */
.cb-help {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 44px; height: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0;
}
.cb-help::before {
  content: '?'; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9999px; border: 2px solid #8B5E3C;
  color: #8B5E3C; font-weight: 700; font-size: 1rem; font-family: 'Source Sans 3', sans-serif;
}
.cb-help[aria-expanded="true"]::before { background: #8B5E3C; color: #fff; }
.cb-help-text {
  margin: 6px 0 12px; padding: 12px 14px; border-radius: 10px; background: #FDF6EC;
  border: 1px solid #DED2BD; color: #4A3728; font-size: 1rem; line-height: 1.6;
}

/* Counts: what waits for her. */
.cb-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
  padding: 0 7px; margin-left: 6px; border-radius: 9999px; background: #B4442A; color: #fff;
  font-size: 0.875rem; font-weight: 700; line-height: 1; vertical-align: middle;
}

/* On the phone bar the count sits on the icon, not under the label. */
#mobile-bottom-nav a { position: relative; }
#mobile-bottom-nav .cb-badge { position: absolute; top: 2px; left: calc(50% + 6px); margin-left: 0; }

/* Zone Martin: the banner on every page inside it. Calm, not alarming. */
.cb-zone-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-bottom: 20px; padding: 12px 16px; border-radius: 10px;
  background: #EEF1F4; border: 1px solid #C9D1DA; color: #2F3A45; font-weight: 600;
}
.cb-zone-banner-text { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.cb-zone-banner-leave {
  display: inline-flex; align-items: center; min-height: 44px; color: #2F3A45; text-decoration: underline;
}


/* ── Toast notifications ──────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  padding: 14px 20px;
  border-radius: 10px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: 0 4px 20px rgba(74,55,40,0.15);
  animation: toast-in 0.25s ease;
  max-width: 380px;
}
.toast.toast-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.toast.toast-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.toast.toast-info    { background: #FDF6EC; border: 1px solid #DED2BD; color: #4A3728; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Loading spinner ──────────────────────────────────────────────────────── */

.loading-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid #F0E6D3;
  border-top-color: #C0734C;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Full-page loading state */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(253,246,236,0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}


/* ── Inline alert banners ─────────────────────────────────────────────────── */

.alert {
  padding: 14px 16px;
  border-radius: 8px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.alert-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.alert-info    { background: #FDF6EC; border: 1px solid #DED2BD; color: #4A3728; }
.alert-warn    { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }


/* ── Skip-to-content (accessibility) ─────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  background: #C0734C;
  color: #FDF6EC;
  padding: 10px 20px;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}


/* ── Scroll-to-top button ─────────────────────────────────────────────────── */

#scroll-top {
  position: fixed;
  bottom: 80px; /* above mobile nav bar */
  right: 20px;
  z-index: 50;
  width: 44px;
  height: 44px;
  background: rgba(253,246,236,0.95);
  border: 1px solid #DED2BD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 10px rgba(74,55,40,0.1);
  color: #4A3728;
}
#scroll-top.hidden {
  opacity: 0;
  pointer-events: none;
}
#scroll-top:hover {
  transform: translateY(-2px);
}


/* ── Minimum tap target (UI rules: 44px absolute minimum) ────────────────── */

button,
a[role="button"],
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  min-height: 44px;
}


/* ── Mobile overrides ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body {
    /* Account for fixed mobile bottom nav */
    padding-bottom: 4.5rem;
  }

  .top-nav {
    flex-direction: column;
    padding: 10px 16px !important;
    gap: 6px;
  }
  .top-nav img.logo {
    height: 32px !important;
  }
  .top-nav .brand-name {
    font-size: 1.25rem !important;
  }

  .five-elem {
    flex-wrap: wrap;
    gap: 24px !important;
  }

  /* Full-width buttons on mobile */
  .btn-primary,
  .btn-secondary {
    width: 100%;
    min-height: 56px; /* larger touch target on mobile */
  }

  .cb-modal {
    padding: 24px 20px;
  }

  /* Modal actions stack on narrow screens */
  .cb-modal-actions {
    flex-direction: column;
  }

  .toast {
    bottom: 80px; /* above mobile nav bar */
    right: 12px;
    left: 12px;
    max-width: none;
  }

  #scroll-top {
    bottom: 72px;
    right: 12px;
  }
}