/*
 * Modern Heirloom Design System — Palette A
 * AmazingReunion UI Redesign
 *
 * Fonts: Plus Jakarta Sans (headlines) + Be Vietnam Pro (body/labels)
 * Philosophy: No borders, warm surfaces, tonal layering, editorial spacing
 */

/* ============================================================
   1. FONTS (self-hosted)
   ============================================================ */

/* Plus Jakarta Sans — variable font, weights 400-800 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Jo02SuCgQ.woff2) format('woff2');
}

/* Be Vietnam Pro — 300 */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HScJ183T7orcg.woff2) format('woff2');
}
/* Be Vietnam Pro — 400 */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/be-vietnam-pro/QdVPSTAyLFyeg_IDWvOJmVES_Ew1D306ZQ.woff2) format('woff2');
}
/* Be Vietnam Pro — 500 */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HTEJl83T7orcg.woff2) format('woff2');
}
/* Be Vietnam Pro — 600 */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HToIV83T7orcg.woff2) format('woff2');
}
/* Be Vietnam Pro — 700 */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HSMIF83T7orcg.woff2) format('woff2');
}

/* Material Symbols Outlined — variable, weights 100-700 */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fonts/material-symbols/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1USv9ls.woff2) format('woff2');
}

/* ============================================================
   2. CSS CUSTOM PROPERTIES — Palette A
   ============================================================ */
:root {
  /* Primary */
  --heirloom-primary: #805700;
  --heirloom-primary-dim: #704c00;
  --heirloom-primary-container: #febe51;
  --heirloom-primary-fixed: #febe51;
  --heirloom-primary-fixed-dim: #eeb145;
  --heirloom-on-primary: #fff8f2;
  --heirloom-on-primary-container: #5a3c00;
  --heirloom-inverse-primary: #febe51;

  /* Secondary (soft blue) */
  --heirloom-secondary: #466370;
  --heirloom-secondary-dim: #3a5764;
  --heirloom-secondary-container: #ceedfd;
  --heirloom-on-secondary: #f3faff;
  --heirloom-on-secondary-container: #3c5966;

  /* Tertiary (soft earth) */
  --heirloom-tertiary: #75584e;
  --heirloom-tertiary-dim: #684d43;
  --heirloom-tertiary-container: #f6cfc2;
  --heirloom-on-tertiary: #fff7f5;

  /* Error */
  --heirloom-error: #aa371c;
  --heirloom-error-dim: #821a01;
  --heirloom-error-container: #fa7150;
  --heirloom-on-error: #fff7f6;

  /* Surfaces */
  --heirloom-surface: #faf9f6;
  --heirloom-surface-dim: #d8dbd6;
  --heirloom-surface-bright: #faf9f6;
  --heirloom-surface-container-lowest: #ffffff;
  --heirloom-surface-container-low: #f4f4f0;
  --heirloom-surface-container: #eeeeea;
  --heirloom-surface-container-high: #e8e8e5;
  --heirloom-surface-container-highest: #e1e3df;
  --heirloom-surface-variant: #e1e3df;
  --heirloom-surface-tint: #805700;

  /* On-surface */
  --heirloom-on-surface: #303330;
  --heirloom-on-surface-variant: #5d605c;
  --heirloom-on-background: #303330;
  --heirloom-background: #faf9f6;

  /* Outline */
  --heirloom-outline: #797b78;
  --heirloom-outline-variant: #b0b2af;

  /* Inverse */
  --heirloom-inverse-surface: #0d0f0d;
  --heirloom-inverse-on-surface: #9d9d9b;

  /* Functional hardcoded values used across mockups */
  --heirloom-input-bg: #f4f4f0;
  --heirloom-tag-bg: #e8e8e4;
  --heirloom-ghost-border: rgba(176, 178, 175, 0.15);
  --heirloom-shadow-color: rgba(48, 51, 48, 0.04);
  --heirloom-shadow-color-lg: rgba(48, 51, 48, 0.06);
  --heirloom-focus-ring: rgba(128, 87, 0, 0.2);
}

/* ============================================================
   3. BASE RESET
   ============================================================ */
.heirloom-body {
  background-color: var(--heirloom-surface);
  color: var(--heirloom-on-surface);
  font-family: 'Be Vietnam Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Metronic bundle body background when heirloom CSS is loaded */
body#kt_body {
  background-color: var(--heirloom-surface) !important;
  font-size: 16px !important;
  -webkit-font-smoothing: antialiased;
}

/* Override Metronic link/button hover colors (kills the blue #009ef7 bleed) */
.card-elevated a:not(.btn):hover,
.card-recessed a:not(.btn):hover,
.btn-heirloom-tertiary:hover {
  color: var(--heirloom-primary) !important;
}
.btn-heirloom-primary:hover,
.btn-heirloom-secondary:hover,
.btn-heirloom-danger:hover {
  color: inherit;
}

/* Sidebar — warm active/hover states */
#kt_aside {
  box-shadow: none !important;
}
@media (min-width: 992px) {
  #kt_aside {
    position: sticky !important;
    top: 110px !important;
    bottom: auto !important;
    left: auto !important;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    flex-shrink: 0;
    align-self: flex-start;
  }
  /* Remove the fixed-sidebar offset since sidebar is now in flow */
  .wrapper {
    padding-left: 0 !important;
  }
  /* Fix width blowout: flex-column-fluid adds flex:1 0 auto which
     overflows when sidebar is sticky (in-flow) instead of fixed */
  .d-flex.flex-column.flex-column-fluid.container-fluid {
    flex: 1 1 0% !important;
    min-width: 0;
  }
}
#kt_aside .menu-link.active {
  background-color: var(--heirloom-surface-container-lowest) !important;
  color: var(--heirloom-primary) !important;
  box-shadow: 0 0 24px var(--heirloom-shadow-color);
}
#kt_aside .menu-link.active .menu-title {
  color: var(--heirloom-primary) !important;
}
#kt_aside .menu-link.active .menu-icon .material-symbols-outlined {
  color: var(--heirloom-primary) !important;
}
#kt_aside .menu-link.active .menu-bullet .bullet {
  background-color: var(--heirloom-primary) !important;
}
#kt_aside .menu-link:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.6) !important;
}
#kt_aside .menu-link:hover:not(.active) .menu-title {
  color: var(--heirloom-on-surface) !important;
}
#kt_aside .menu-section {
  color: var(--heirloom-on-surface-variant) !important;
}
#kt_aside .menu-title {
  color: var(--heirloom-on-surface-variant) !important;
}
#kt_aside .menu-icon .material-symbols-outlined {
  color: var(--heirloom-on-surface-variant);
}

/* Footer v2 — warm link hover */
#kt_footer a:hover {
  color: var(--heirloom-primary) !important;
}

/* About page quick links */
.card-recessed a[style*="tertiary"]:hover {
  text-decoration: underline !important;
  color: var(--heirloom-primary) !important;
}

/* Header v2 — warm overrides */
#kt_header .menu-link:hover {
  background-color: var(--heirloom-surface-container-low) !important;
  color: var(--heirloom-on-surface) !important;
}
#kt_header .btn:hover {
  background-color: var(--heirloom-surface-container) !important;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

::selection {
  background-color: var(--heirloom-primary-fixed);
  color: var(--heirloom-on-primary-container);
}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

/* Display — magazine masthead feel */
.text-display-lg {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--heirloom-on-surface);
}
.text-display-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--heirloom-on-surface);
}

/* Headlines — section titles */
.text-headline-lg {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heirloom-on-surface);
}
.text-headline-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heirloom-on-surface);
}

/* Body — workhorse text */
.text-body-lg {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--heirloom-on-surface-variant);
}
.text-body-md {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--heirloom-on-surface-variant);
}
.text-body-sm {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--heirloom-on-surface-variant);
}

/* Labels — metadata, all-caps */
.text-label-lg {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--heirloom-on-surface-variant);
}
.text-label-md {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--heirloom-on-surface-variant);
}
.text-label-sm {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--heirloom-on-surface-variant);
}

/* Font family helpers */
.font-headline { font-family: 'Plus Jakarta Sans', sans-serif !important; }
.font-body { font-family: 'Be Vietnam Pro', sans-serif !important; }

/* ============================================================
   5. SURFACES & ELEVATION
   ============================================================ */

/* Gradient */
.heirloom-gradient {
  background: linear-gradient(135deg, #805700 0%, #febe51 100%);
}

/* Shadows */
.whisper-shadow {
  box-shadow: 0 0 24px var(--heirloom-shadow-color);
}
.whisper-shadow-lg {
  box-shadow: 0 24px 48px -12px var(--heirloom-shadow-color-lg);
}

/* Glassmorphism */
.glass-nav {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.glass-overlay {
  background: rgba(13, 15, 13, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Ghost border — accessibility fallback only */
.ghost-border {
  outline: 1px solid var(--heirloom-ghost-border);
}
.ghost-border-dashed {
  outline: 1px dashed rgba(176, 178, 175, 0.35);
}

/* ============================================================
   6. CARDS
   ============================================================ */
.card-elevated {
  background-color: var(--heirloom-surface-container-lowest);
  border-radius: 2rem;
  box-shadow: 0 24px 24px var(--heirloom-shadow-color);
  border: none;
  padding: 2rem;
}
.card-elevated:hover {
  background-color: var(--heirloom-surface-container-low);
  box-shadow: 0 24px 48px -12px var(--heirloom-shadow-color-lg);
}

.card-recessed {
  background-color: var(--heirloom-surface-container-low);
  border-radius: 2rem;
  border: none;
  padding: 2rem;
}

/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn-heirloom-primary {
  background: linear-gradient(135deg, #805700 0%, #febe51 100%);
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
}
.btn-heirloom-primary:hover {
  filter: brightness(1.05);
}
.btn-heirloom-primary:active {
  transform: scale(0.98);
}

.btn-heirloom-secondary {
  background-color: var(--heirloom-tag-bg);
  color: var(--heirloom-on-surface);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
}
.btn-heirloom-secondary:hover {
  background-color: #d8d8d4;
}
.btn-heirloom-secondary:active {
  transform: scale(0.98);
}

.btn-heirloom-tertiary {
  background: none;
  color: var(--heirloom-primary);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms ease;
}
.btn-heirloom-tertiary:hover {
  text-decoration: underline;
}

.btn-heirloom-danger {
  background-color: #c4453c;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
}
.btn-heirloom-danger:hover {
  background-color: #a83832;
}
.btn-heirloom-danger:active {
  transform: scale(0.98);
}

/* ============================================================
   8. FORM INPUTS
   ============================================================ */
.input-heirloom {
  background-color: var(--heirloom-input-bg);
  color: var(--heirloom-on-surface);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  border: none;
  outline: none;
  width: 100%;
  transition: all 200ms ease;
}
.input-heirloom::placeholder {
  color: var(--heirloom-on-surface-variant);
  opacity: 0.6;
}
.input-heirloom:focus {
  box-shadow: 0 0 0 2px var(--heirloom-focus-ring);
  background-color: var(--heirloom-surface-container-lowest);
}
.input-heirloom.is-error {
  background-color: rgba(170, 55, 28, 0.08);
}
select.input-heirloom {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%235d605c' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
  cursor: pointer;
}
textarea.input-heirloom {
  resize: vertical;
  min-height: 3rem;
}

.input-heirloom-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--heirloom-on-surface-variant);
  margin-bottom: 0.375rem;
  display: block;
}

.input-heirloom-error {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.8125rem;
  color: var(--heirloom-error);
  margin-top: 0.25rem;
}

/* ============================================================
   9. BADGES & PILLS
   ============================================================ */
.badge-heirloom {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  display: inline-block;
}
.badge-confirmed {
  background-color: #e1f5e6;
  color: #1b5e20;
}
.badge-pending {
  background-color: rgba(254, 190, 81, 0.2);
  color: var(--heirloom-primary);
}
.badge-inactive {
  background-color: var(--heirloom-tag-bg);
  color: var(--heirloom-on-surface-variant);
}
.badge-error {
  background-color: rgba(170, 55, 28, 0.15);
  color: var(--heirloom-error);
}
.badge-info {
  background-color: var(--heirloom-secondary-container);
  color: var(--heirloom-on-secondary-container);
}

/* ============================================================
   10. ALERTS
   ============================================================ */
.alert-heirloom {
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.875rem;
  border: none;
}
.alert-heirloom-error {
  background-color: rgba(170, 55, 28, 0.08);
  color: var(--heirloom-on-surface);
}
.alert-heirloom-success {
  background-color: #e1f5e6;
  color: var(--heirloom-on-surface);
}
.alert-heirloom-info {
  background-color: rgba(206, 237, 253, 0.3);
  color: var(--heirloom-on-surface);
}
.alert-heirloom-warning {
  background-color: rgba(254, 190, 81, 0.1);
  color: var(--heirloom-on-surface);
}

/* ============================================================
   11. UTILITIES
   ============================================================ */

/* Scrollbar hiding */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom scrollbar (for content areas that need visible scroll) */
.heirloom-scrollbar::-webkit-scrollbar { width: 6px; }
.heirloom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.heirloom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--heirloom-surface-container-high);
  border-radius: 10px;
}

/* Shimmer skeleton loading */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--heirloom-surface-container-low) 25%, var(--heirloom-tag-bg) 50%, var(--heirloom-surface-container-low) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Drop zone */
.drop-zone {
  background-color: var(--heirloom-surface-container-low);
  border: 1px dashed rgba(176, 178, 175, 0.35);
  border-radius: 1.5rem;
  transition: all 200ms ease;
}
.drop-zone.drag-over {
  background-color: rgba(254, 190, 81, 0.08);
  border-color: rgba(254, 190, 81, 0.3);
}

/* Danger zone card */
.danger-zone {
  background-color: rgba(170, 55, 28, 0.06);
  border-radius: 1.5rem;
}

/* Image & Card Hover Effects */
.card-hover-lift {
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.card-hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px var(--heirloom-shadow-color-lg);
}

.img-hover-zoom {
  overflow: hidden;
}
.img-hover-zoom img,
.img-hover-zoom .img-zoom-target {
  transition: transform 500ms ease;
}
.img-hover-zoom:hover img,
.img-hover-zoom:hover .img-zoom-target {
  transform: scale(1.1);
}

.overlay-hover-darken .overlay-bg {
  transition: opacity 300ms ease;
  opacity: 0.5;
}
.overlay-hover-darken:hover .overlay-bg {
  opacity: 0.75;
}

.overlay-hover-reveal .overlay-text {
  transform: translateY(1rem);
  opacity: 0;
  transition: transform 300ms ease, opacity 300ms ease;
}
.overlay-hover-reveal:hover .overlay-text {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   12. METRONIC CLASS OVERRIDES (blog post compatibility)
   When modern-heirloom.css is loaded, restyle existing Metronic
   classes so blog posts look warm without HTML changes.
   ============================================================ */

/* Attraction cards */
body#kt_body .card.mb-8 {
  background-color: var(--heirloom-surface-container-lowest);
  border: none !important;
  border-radius: 1.5rem;
  box-shadow: 0 0 24px var(--heirloom-shadow-color);
}
body#kt_body .card.mb-8:hover {
  background-color: var(--heirloom-surface-container-low);
  box-shadow: 0 24px 48px -12px var(--heirloom-shadow-color-lg);
}
body#kt_body .card.mb-8 .card-title.fw-bolder {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800 !important;
  color: var(--heirloom-on-surface);
}
body#kt_body .card.mb-8 .card-text {
  font-family: 'Be Vietnam Pro', sans-serif;
  color: var(--heirloom-on-surface-variant);
  line-height: 1.6;
}

/* Badges */
body#kt_body .badge-light-primary {
  background-color: var(--heirloom-secondary-container) !important;
  color: var(--heirloom-on-secondary-container) !important;
}
body#kt_body .badge-light-success {
  background-color: #e1f5e6 !important;
  color: #1b5e20 !important;
}
body#kt_body .badge-light-info {
  background-color: rgba(254, 190, 81, 0.15) !important;
  color: var(--heirloom-primary) !important;
}
body#kt_body .badge-light-warning {
  background-color: rgba(117, 88, 78, 0.1) !important;
  color: var(--heirloom-tertiary) !important;
}
body#kt_body .badge-light-danger {
  background-color: rgba(170, 55, 28, 0.1) !important;
  color: var(--heirloom-error) !important;
}

/* Page title */
body#kt_body .fs-1.text-dark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800 !important;
  color: var(--heirloom-on-surface) !important;
}

/* Body text */
body#kt_body .fs-5.fw-normal.text-gray-800 {
  font-family: 'Be Vietnam Pro', sans-serif;
  color: var(--heirloom-on-surface-variant) !important;
}

/* Header image */
body#kt_body .card-rounded.min-h-350px {
  border-radius: 1rem !important;
  transition: transform 500ms ease;
}
body#kt_body .overlay:hover .card-rounded.min-h-350px {
  transform: scale(1.02);
}
body#kt_body .overlay {
  overflow: hidden;
  border-radius: 1rem;
}

/* Muted text */
body#kt_body .text-muted {
  color: var(--heirloom-on-surface-variant) !important;
}

/* Links in blog content */
body#kt_body .text-hover-primary:hover {
  color: var(--heirloom-primary) !important;
}

/* Sidebar search input */
body#kt_body .form-control-solid {
  background-color: var(--heirloom-input-bg) !important;
  border: none !important;
}
/* Search input inside state sidebar — white to contrast recessed bg */
body#kt_body .flex-column.flex-lg-row-auto.w-100.w-xl-300px .form-control-solid {
  background-color: var(--heirloom-surface-container-lowest) !important;
  box-shadow: 0 0 24px var(--heirloom-shadow-color);
}

/* State blog sidebar (right-side content sidebar) */
body#kt_body .flex-column.flex-lg-row-auto.w-100.w-xl-300px {
  background-color: var(--heirloom-surface-container-low) !important;
  border-radius: 1.5rem !important;
}
body#kt_body .flex-column.flex-lg-row-auto.w-100.w-xl-300px h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--heirloom-on-surface) !important;
}
body#kt_body .flex-column.flex-lg-row-auto.w-100.w-xl-300px #searchDropdown {
  background-color: var(--heirloom-surface-container-lowest) !important;
  border: none !important;
  border-radius: 1rem !important;
  box-shadow: 0 24px 48px -12px var(--heirloom-shadow-color-lg) !important;
}
body#kt_body .flex-column.flex-lg-row-auto.w-100.w-xl-300px .text-gray-800 {
  color: var(--heirloom-on-surface) !important;
}
body#kt_body .flex-column.flex-lg-row-auto.w-100.w-xl-300px .text-gray-600 {
  color: var(--heirloom-on-surface-variant) !important;
}

/* Contact info in cards */
body#kt_body .card.mb-8 a[target="_blank"] {
  color: var(--heirloom-primary);
}
body#kt_body .card.mb-8 a[target="_blank"]:hover {
  color: var(--heirloom-primary) !important;
  text-decoration: underline;
}

/* Old blog design: .card > .card-body wrapper inside #kt_content
   Removes the white box and kills the 5rem padding */
body#kt_body #kt_content > .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body#kt_body #kt_content > .card > .card-body {
  padding: 0 !important;
}
.strength-segment {
  height: 4px;
  border-radius: 0.25rem;
  background-color: var(--heirloom-tag-bg);
  flex: 1;
}
.strength-weak { background-color: rgba(196, 69, 60, 0.6); }
.strength-fair { background-color: rgba(254, 190, 81, 0.6); }
.strength-good { background-color: var(--heirloom-secondary-container); }
.strength-strong { background-color: #4caf50; }

/* ============================================================
   13. ABOUT PAGE
   ============================================================ */
.about-hero {
  border-radius: 1.5rem;
  padding: 4rem 2rem;
}
.about-hero-watermark {
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: rgba(128, 87, 0, 0.07);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  user-select: none;
}
.about-hero-quote {
  font-size: 2.25rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--heirloom-on-surface);
}
.about-hero-label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--heirloom-primary);
}
.about-stat-card {
  padding: 2rem;
}
@media (min-width: 768px) {
  .about-stat-stagger:nth-child(1) { transform: translateY(-1rem); }
  .about-stat-stagger:nth-child(2) { transform: translateY(1rem); }
  .about-stat-stagger:nth-child(3) { transform: translateY(-2rem); }
}
.about-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-stat-icon-blue {
  background-color: var(--heirloom-secondary-container);
  color: var(--heirloom-secondary);
}
.about-stat-number {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--heirloom-primary);
}
.about-stat-label {
  letter-spacing: 0.1em;
}
.about-story-card {
  background-color: var(--heirloom-surface-container-lowest);
  padding: 2.5rem 3.5rem;
  border-radius: 1.5rem;
  box-shadow: 0 24px 24px rgba(48, 51, 48, 0.04);
}
.about-story-heading {
  font-size: 2.0rem;
  font-weight: 800;
  color: var(--heirloom-primary);
}
.about-story-body {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--heirloom-on-surface-variant);
}
.about-story-image {
  border-radius: 2rem;
  transform: rotate(2deg);
  overflow: hidden;
}
.about-links {
  padding: 3rem;
  border-radius: 1.5rem;
}
.about-links-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--heirloom-primary);
}
.about-links a {
  font-weight: 500;
  color: var(--heirloom-tertiary);
  text-decoration: none;
  transition: all 200ms;
}
.about-links a:hover {
  text-decoration: underline !important;
  color: var(--heirloom-primary) !important;
}

/* ============================================================
   14. LEGAL PAGES (Privacy, Terms)
   ============================================================ */
.legal-card {
  background-color: var(--heirloom-surface-container-lowest);
  border-radius: 2rem;
  box-shadow: 0 24px 24px rgba(48, 51, 48, 0.04);
  padding: 2rem;
}
@media (min-width: 768px) {
  .legal-card { padding: 4rem; }
}
.legal-header {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(176, 178, 175, 0.15);
}
.legal-header h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--heirloom-on-surface);
  margin-bottom: 0.5rem;
}
.legal-header p {
  color: var(--heirloom-on-surface-variant);
  line-height: 1.7;
}
.legal-updated-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--heirloom-outline-variant);
}
.legal-updated-value {
  font-weight: 600;
  color: var(--heirloom-primary);
}
.legal-badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  background-color: var(--heirloom-surface-container-low);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--heirloom-on-surface-variant);
}
.legal-sections {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.legal-sections h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--heirloom-on-surface);
  margin-bottom: 0.75rem;
}
.legal-sections p,
.legal-sections li {
  color: var(--heirloom-on-surface-variant);
  line-height: 1.7;
}
.legal-sections a {
  color: var(--heirloom-primary);
  font-weight: 500;
}
.legal-sections a:hover {
  text-decoration: underline !important;
}

/* Profile banner strip */
.hub-profile-banner { background:var(--st-surface-container-low, #f4f3f1); border-radius:0.75rem; padding:1rem 1.5rem }
.hub-profile-avatar { width:3rem; height:3rem; border-radius:50%; object-fit:cover; flex-shrink:0 }
.hub-verified-icon { font-size:1.125rem; font-variation-settings:'FILL' 1 }
.hub-profile-divider { width:1px; height:1.5rem; background:rgba(176,178,175,0.3) }
.hub-profile-action { width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--st-surface-container-highest, #e1e3df); color:var(--st-on-surface-variant, #5d605c); text-decoration:none; transition:background 0.2s }
.hub-profile-action:hover { background:#fff; color:var(--st-on-surface-variant) }
.hub-profile-action .material-symbols-outlined { font-size:1.25rem }

/* ===== Profile Hub ===== */
.hub-card { background:#fff; border-radius:1.5rem; box-shadow:0 0 24px rgba(48,51,48,0.04); overflow:visible; transition:all 0.3s }
.hub-card .hub-reunion-img { border-radius:1.5rem 1.5rem 0 0; overflow:hidden }
.hub-card:hover { background:var(--st-surface-container-low, #f4f3f1) }
.hub-card--static:hover { background:#fff }
.hub-section-bg { background:var(--st-surface-container-low, #f4f3f1); border-radius:1.5rem; padding:1.5rem }
.hub-gradient-btn { background:linear-gradient(135deg, #805700, #704c00); color:#fff8f2; border:none; border-radius:0.75rem; font-weight:600 }
.hub-gradient-btn:hover { opacity:0.9; color:#fff8f2 }
.hub-tree-card { background:#fff; border-radius:1.5rem; box-shadow:0 4px 12px rgba(0,0,0,0.02); text-align:center; padding:1.5rem; transition:all 0.2s }
.hub-tree-card:hover { background:var(--st-surface-container-low, #f4f3f1) }
.hub-tree-icon { width:4rem; height:4rem; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; transition:transform 0.2s }
.hub-tree-card:hover .hub-tree-icon { transform:scale(1.1) }
.hub-tree-name { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--st-on-surface, #303330); margin-bottom:0 }
.hub-bg-primary-container { background:rgba(254,190,81,0.2) }
.hub-text-primary-icon { color:var(--st-primary, #805700) }
.hub-bg-tertiary-container-icon { background:var(--st-tertiary-container, #f6cfc2) }
.hub-text-tertiary-icon { color:var(--st-tertiary, #75584e) }
.hub-chat-item { background:#fff; padding:1rem; border-radius:0.5rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:background 0.2s }
.hub-chat-item:hover { background:#fff }
.hub-chat-icon { width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center; justify-content:center }
.hub-chat-title { font-weight:700; color:var(--st-on-surface, #303330); font-size:0.875rem; margin-bottom:0 }
.hub-chat-sub { color:var(--st-on-surface-variant, #5d605c); font-size:0.8125rem; margin-bottom:0 }
.hub-chat-time { font-size:0.625rem; font-weight:700; color:var(--st-on-surface-variant, #5d605c); opacity:0.6 }
.hub-chat-badge { width:1.25rem; height:1.25rem; border-radius:50%; background:var(--st-primary, #805700); color:#fff; font-size:0.625rem; font-weight:700; display:flex; align-items:center; justify-content:center }
.hub-milestone-card { background:#fff; padding:1.5rem; border-radius:0.75rem }
.hub-milestone-icon { width:3rem; height:3rem; border-radius:0.5rem; display:flex; align-items:center; justify-content:center }
.hub-badge { font-size:0.625rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:0.5rem 1rem; border-radius:9999px; background:rgba(254,190,81,0.9); color:#5a3c00 }
.hub-reunion-img { width:100%; height:16rem; background-size:cover; background-position:center; background-repeat:no-repeat }
@media (min-width:768px) { .hub-reunion-img { height:20rem } }
.hub-reunion-img--fallback { background:linear-gradient(135deg, #805700 0%, #febe51 100%); display:flex; align-items:center; justify-content:center }
.hub-reunion-img--fallback .material-symbols-outlined { font-size:4rem; color:#fff }
.hub-headline { font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-0.02em }
.hub-text-muted { color:var(--st-on-surface-variant, #5d605c) }
.hub-text-primary { color:var(--st-primary, #805700) }
.hub-text-secondary { color:var(--st-secondary, #466370) }
.hub-text-tertiary { color:var(--st-tertiary, #75584e) }
.hub-bg-secondary-container { background:var(--st-secondary-container, #c8e7f7) }
.hub-bg-tertiary-container { background:var(--st-tertiary-container, #f6cfc2) }
.hub-bg-tree { background:rgba(200,231,247,0.4) }
.hub-text-on-tertiary-container { color:var(--st-on-tertiary-container, #5f453b) }
.hub-label { letter-spacing:0.1em; text-transform:uppercase }
.hub-divider { border-top:1px solid rgba(176,178,175,0.2) }
.hub-chat-icon .material-symbols-outlined { font-variation-settings:'FILL' 1 }
.hub-icon-lg { font-size:3rem }
.hub-field-error { border-radius:0.75rem; background:rgba(255,218,214,0.3); border:none; border-left:4px solid var(--st-error) }
.hub-field-error-icon { color:var(--st-error); font-size:1.125rem }
.hub-field-error p { color:var(--st-on-error-container) }
.hub-input-file { max-width:20rem }

/* Avatar upload */
.hub-avatar-upload { display:flex; align-items:center; gap:1.25rem }
.hub-avatar-preview { position:relative; width:5rem; height:5rem; border-radius:50%; overflow:hidden; cursor:pointer; flex-shrink:0 }
.hub-avatar-preview img { width:100%; height:100%; object-fit:cover }
.hub-avatar-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s }
.hub-avatar-overlay .material-symbols-outlined { color:#fff; font-size:1.5rem }
.hub-avatar-preview:hover .hub-avatar-overlay { opacity:1 }
.hub-avatar-info { display:flex; flex-direction:column }
.hub-avatar-btn { display:inline-flex; align-items:center; gap:0.375rem; padding:0.5rem 1rem; border-radius:0.5rem; border:none; background:var(--st-surface-container-highest, #e1e3df); color:var(--st-on-surface, #303330); font-size:0.8125rem; font-weight:600; cursor:pointer; transition:background 0.2s }
.hub-avatar-btn:hover { background:#fff }
.hub-avatar-btn .material-symbols-outlined { font-size:1rem }
.hub-avatar-btn--remove { background:rgba(255,218,214,0.4); color:var(--st-error, #ba1a1a); margin-top:0.5rem }
.hub-avatar-btn--remove:hover { background:rgba(255,218,214,0.6) }
.space-y-1 > * + * { margin-top: 0.25rem; }
.hub-dim { opacity:0.6 }
.hub-section-bg, .hub-card { margin-bottom:1.5rem }
.hub-section-bg:last-child, .hub-card:last-child { margin-bottom:0 }
.hub-chat-text { max-width:200px }
@media (min-width:768px) { .hub-chat-text { max-width:16rem } }

/* Hub tables — component kit "Recent Contributions" style */
.hub-table { font-size:0.875rem }
.hub-table-header { display:flex; justify-content:space-between; align-items:center; padding:1.5rem; background:rgba(233,232,229,0.3) }
.hub-table-header h3 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; margin:0 }
.hub-table-header-actions { display:flex; gap:0.5rem; align-items:center }
.hub-table-header-actions .material-symbols-outlined { color:var(--st-tertiary, #75584e); cursor:pointer; font-size:1.25rem }
.hub-table-header-actions .material-symbols-outlined:hover { color:var(--st-on-surface) }
.hub-table-search { display:none; padding:0 1.5rem 1rem; background:rgba(233,232,229,0.3) }
.hub-table-search.active { display:block }
.hub-table-search input { width:100%; border:none; background:var(--st-surface-container-lowest, #fff); border-radius:0.5rem; padding:0.5rem 1rem; font-size:0.8125rem; outline:none }
.hub-table-search input:focus { box-shadow:0 0 0 2px rgba(128,87,0,0.2) }
.hub-table-filter-wrap { position:relative; display:inline-block }
.hub-table-filter { display:none; position:absolute; right:0; top:2rem; background:#fff; border-radius:0.75rem; box-shadow:0 24px 24px rgba(48,51,48,0.08); padding:0.5rem; z-index:10; min-width:10rem }
.hub-table-filter.active { display:block }
.hub-table-filter-item { display:block; width:100%; text-align:left; padding:0.5rem 0.75rem; font-size:0.8125rem; color:var(--st-on-surface-variant); background:none; border:none; border-radius:0.5rem; cursor:pointer }
.hub-table-filter-item:hover { background:var(--st-surface-container-low) }
.hub-table-filter-item.active { color:var(--st-primary); font-weight:700 }
.hub-table thead { background:rgb(233 232 229 / 0.2) !important;}
.hub-table-th { font-family:'Be Vietnam Pro',sans-serif; font-size:0.625rem; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; color:rgb(69 72 69 / 0.75) !important; padding:1rem 1.5rem !important; border:none !important; background:none }
.hub-table-td { padding:1.25rem 1.5rem !important; color:var(--st-on-surface-variant, #5d605c) !important; border:none !important }
.hub-table tbody { border-collapse:separate }
.hub-table tbody tr+tr td { border-top:1px solid var(--st-surface-container-high, #e9e8e5) !important }
.hub-table-row { transition:background 0.15s }
.hub-table-row:hover { background:rgba(244,243,240,0.3) }
.hub-table-footer { background:rgba(244,243,240,0.3); border-top:1px solid var(--st-surface-container, #efeeeb) }
.hub-table-page-btn { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.625rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--st-on-surface-variant); background:none; border:none; cursor:pointer; transition:color 0.2s }
.hub-table-page-btn:hover:not(:disabled) { color:var(--st-on-surface) }
.hub-table-page-btn:disabled { opacity:0.3; cursor:default }
.hub-table-page-num { width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.625rem; font-weight:700; color:var(--st-on-surface-variant); background:none; border:none; cursor:pointer; transition:background 0.2s }
.hub-table-page-num:hover { background:var(--st-surface-container-low) }
.hub-table-page-num--active { background:var(--st-primary-container, #febe51); color:#fff }
.hub-status-badge { display:inline-block; padding:0.25rem 0.5rem; border-radius:0.375rem; font-size:0.5625rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase }
.hub-status-badge--paid { background:rgba(128,87,0,0.1); color:var(--st-primary, #805700) }
.hub-status-badge--pending { background:var(--st-surface-container-highest, #e1e3df); color:var(--st-tertiary, #75584e) }
.hub-status-badge--active { background:rgba(128,87,0,0.1); color:var(--st-primary, #805700) }
/* Reunion list expand */
.hub-reunion-list { border-radius:1rem; overflow:hidden }
.hub-reunion-list-item { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; transition:background 0.15s }
.hub-reunion-list-item:hover { background:var(--st-surface-container-low, #f4f3f1) }
.hub-reunion-list-item+.hub-reunion-list-item { border-top:1px solid var(--st-surface-container-high, #e9e8e5) }
.hub-reunion-role { display:inline-block; padding:0.125rem 0.5rem; border-radius:9999px; font-size:0.5625rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase }
.hub-reunion-role--host { background:rgba(128,87,0,0.1); color:var(--st-primary) }
.hub-reunion-role--guest { background:var(--st-surface-container-highest); color:var(--st-tertiary) }
/* Popover panel (anchored to button) */
.hub-popover { position:absolute; z-index:100; background:rgba(255,255,255,0.9); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-radius:0.75rem; box-shadow:0 32px 64px -16px rgba(48,51,48,0.12); padding:0.5rem; min-width:12rem; display:none }
.hub-popover.active { display:block }
.hub-popover-item { display:flex; align-items:center; gap:0.75rem; padding:0.625rem 0.75rem; font-size:0.8125rem; color:var(--st-on-surface-variant); text-decoration:none; border-radius:0.5rem; transition:background 0.15s; border:none; background:none; width:100%; text-align:left; cursor:pointer }
.hub-popover-item:hover { background:var(--st-surface-container-low); color:var(--st-on-surface) }
.hub-popover-item .material-symbols-outlined { font-size:1.125rem }

/* Hub icon rail */
.hub-sidebar-link { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; font-size:0.875rem; color:#57534e; text-decoration:none; text-transform:uppercase; letter-spacing:0.025em; border-radius:0.75rem; transition:all 0.2s }
.hub-sidebar-link:hover { background:#fff; color:#57534e }
.hub-sidebar-link--active { background:#fff; color:#78350f; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,0.04) }
.hub-sidebar-link .material-symbols-outlined { font-size:1.25rem; flex-shrink:0 }
.hub-sidebar-divider { height:1px; background:rgba(176,178,175,0.2); margin:0.5rem 0.75rem }
/* Desktop: collapse to icon-only, fixed position */
@media (min-width:992px) {
    .hub-sidebar { width:5rem !important; padding:1rem 0.5rem !important; align-items:center; position:fixed !important; top:4rem !important; left:0; height:calc(100vh - 4rem); z-index:40; overflow:hidden; transition:height 0.15s }
    .hub-sidebar .hub-sidebar-text { display:none }
    .hub-sidebar .hub-sidebar-label { display:none }
    .hub-sidebar .hub-sidebar-divider { margin:0.5rem auto; width:2rem }
    .hub-sidebar .hub-sidebar-link { justify-content:center; padding:0.75rem; width:3rem; height:3rem; border-radius:0.75rem }
    .hub-sidebar .offcanvas-body { align-items:center }
}
/* Hub page main offset */
.hub-main { margin-left:0 }
@media (min-width:992px) { .hub-main { margin-left:5rem } }

/* Hub sidebar v3 — collapsible icon rail / expanded */
.hub-sidebar-v3 { background-color:#f4f3f1 }
.hub-sidebar-v3-nav { display:flex; flex-direction:column; gap:0.5rem; height:100% }

/* Header: toggle */
.hub-sidebar-v3-header { display:flex; align-items:center; justify-content:center; margin-bottom:0.5rem }
.hub-sidebar-toggle { align-items:center; justify-content:center; width:3rem; height:3rem; border:none; background:none; color:#57534e; border-radius:0.75rem; cursor:pointer; transition:background 0.2s; flex-shrink:0 }
.hub-sidebar-toggle:hover { background:rgba(0,0,0,0.04) }
.hub-sidebar-toggle-collapse { display:none }

/* Section labels */
.hub-sidebar-label { padding:1rem 0 0.25rem 1rem; font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#a8a29e }

/* Links */
.hub-sidebar-link { display:flex; align-items:center; gap:1rem; padding:0.75rem; font-size:0.875rem; color:#57534e; text-decoration:none; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; border-radius:0.75rem; transition:all 0.2s }
.hub-sidebar-link:hover { background:#fff; color:#57534e }
.hub-sidebar-link--active { background:#fff; color:#78350f; box-shadow:0 0 24px rgba(48,51,48,0.04) }

/* Sub-items: text-only with left border */
.hub-sidebar-sub { display:flex; flex-direction:column; gap:0.75rem; padding:0.5rem 0 0.5rem 0; margin-left:2.5rem; border-left:2px solid rgba(211,196,178,0.3) }
.hub-sidebar-sublink { display:block; padding-left:1.25rem; font-size:0.8125rem; color:#57534e; text-decoration:none; transition:color 0.2s }
.hub-sidebar-sublink:hover { color:#614100 }
.hub-sidebar-sublink--active { color:#78350f; font-weight:600 }

/* Desktop collapsed (default) */
@media (min-width:992px) {
    #stitchSidebar.hub-sidebar-v3 { width:5rem; padding:1.5rem 0.5rem; align-items:center; position:fixed; top:4rem; left:0; height:calc(100vh - 4rem); z-index:40; overflow-y:auto; overflow-x:hidden; transition:width 0.3s ease; border-radius:0 1.5rem 1.5rem 0 }
    #stitchSidebar.hub-sidebar-v3 .hub-sidebar-text { display:none }
    #stitchSidebar.hub-sidebar-v3 .hub-sidebar-label { display:none }
    #stitchSidebar.hub-sidebar-v3 .hub-sidebar-sub { display:none !important }
    #stitchSidebar.hub-sidebar-v3 .hub-sidebar-link { justify-content:center; padding:0.75rem; width:3rem; height:3rem }
    #stitchSidebar.hub-sidebar-v3 .offcanvas-body { align-items:center }
    #stitchSidebar.hub-sidebar-v3 .hub-sidebar-v3-header { justify-content:center }
    #stitchSidebar.hub-sidebar-v3 .hub-sidebar-toggle-expand { display:inline }
    #stitchSidebar.hub-sidebar-v3 .hub-sidebar-toggle-collapse { display:none }
}

/* Desktop expanded */
@media (min-width:992px) {
    #stitchSidebar.hub-sidebar-v3.hub-sidebar-v3--expanded { width:16rem; padding:1.5rem 1rem; align-items:stretch; border-radius:0 1.5rem 1.5rem 0; box-shadow:0 0 24px rgba(48,51,48,0.04) }
    #stitchSidebar.hub-sidebar-v3.hub-sidebar-v3--expanded .hub-sidebar-text { display:inline }
    #stitchSidebar.hub-sidebar-v3.hub-sidebar-v3--expanded .hub-sidebar-label { display:block }
    #stitchSidebar.hub-sidebar-v3.hub-sidebar-v3--expanded .hub-sidebar-sub { display:flex !important }
    #stitchSidebar.hub-sidebar-v3.hub-sidebar-v3--expanded .hub-sidebar-link { justify-content:flex-start; width:auto; height:auto; padding:0.75rem }
    #stitchSidebar.hub-sidebar-v3.hub-sidebar-v3--expanded .offcanvas-body { align-items:stretch }
    #stitchSidebar.hub-sidebar-v3.hub-sidebar-v3--expanded .hub-sidebar-v3-header { justify-content:space-between; padding:0 0.5rem }
    #stitchSidebar.hub-sidebar-v3.hub-sidebar-v3--expanded .hub-sidebar-toggle-expand { display:none }
    #stitchSidebar.hub-sidebar-v3.hub-sidebar-v3--expanded .hub-sidebar-toggle-collapse { display:inline }
}

/* Main content offset for v3 */
.hub-main-v3 { margin-left:0 }
@media (min-width:992px) {
    .hub-main-v3 { margin-left:5rem; transition:margin-left 0.3s ease }
    body.hub-sidebar-open .hub-main-v3 { margin-left:16rem }
}

/* AI insight grids — stack on mobile */
@media (max-width:575px) {
    .ai-insight-grid--3 { grid-template-columns:1fr !important }
    .ai-insight-grid--2 { grid-template-columns:1fr !important }
}

/* Kickstart stepper pills */
.stepper-pill{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;border-radius:9999px;color:var(--st-on-surface-variant);opacity:.6;transition:all .3s}
.stepper-pill.active{background:linear-gradient(135deg,#805700,#febe51);color:#fff;opacity:1;box-shadow:0 8px 24px rgba(128,87,0,.2)}
.stepper-pill.completed{background:var(--st-surface-container-high,#e9e8e5);color:var(--st-on-surface);opacity:1}
.stepper-pill-number{width:1.5rem;height:1.5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:700}
.stepper-pill.active .stepper-pill-number{background:rgba(255,255,255,.2)}
.stepper-pill:not(.active) .stepper-pill-number{background:var(--st-surface-container-high,#e9e8e5)}
.stepper-pill.completed .stepper-pill-number{background:var(--st-primary-fixed,#ffdeae);color:#604100}

/* ============================================================
   10. REUSABLE COMPONENT CLASSES (Host Dashboard)
   ============================================================ */

/* --- Badges / Pills --- */
.badge-attending { padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; background:var(--st-secondary-container); color:var(--st-on-secondary-container); }
.badge-declined { padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; background:var(--st-error-container); color:var(--st-error); }
.badge-maybe { padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; background:var(--st-primary-fixed); color:var(--st-primary); }
.badge-count { padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.6875rem; font-weight:700; background:var(--st-surface-container-high); color:var(--st-on-surface-variant); }
.badge-info { padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; background:var(--st-tertiary-fixed); color:var(--st-tertiary); }

/* --- Cards --- */
.card-surface { background:var(--st-surface-container-lowest); border-radius:1.5rem; padding:2rem; box-shadow:0 0 24px rgba(48,51,48,0.04); }
.card-recessed-mh { background:var(--st-surface-container-low); border-radius:0.75rem; padding:2rem; transition:background 0.2s; }
.card-recessed-mh:hover { background:var(--st-surface-container); }

/* --- Form Inputs (matching create.html) --- */
.input-mh { width:100%; background:var(--st-surface-container-low); border:0; border-radius:0.75rem; padding:1rem 1.5rem; font-size:0.9375rem; color:var(--st-on-surface); outline:none; }
.input-mh:focus { box-shadow:0 0 0 2px rgba(97,65,0,0.12); }
.select-mh { width:100%; }

/* --- Labels --- */
.label-mh { display:block; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--st-on-surface-variant); margin-bottom:0.5rem; margin-left:0.5rem; }
.label-tiny { font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--st-outline); margin-bottom:0.25rem; }

/* --- Section Headers --- */
.section-icon-header { display:flex; align-items:center; gap:0.75rem; margin-bottom:1.5rem; }
.section-icon-header .material-symbols-outlined { font-size:1.5rem; color:var(--st-primary-container); }
.section-icon-header h2 { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--st-primary-container); margin:0; }

/* --- Buttons --- */
.btn-gradient { display:inline-flex; align-items:center; gap:0.5rem; background:linear-gradient(135deg,#805700 0%,#febe51 100%); color:#fff; border:none; padding:0.875rem 2rem; border-radius:0.75rem; font-weight:700; font-size:0.9375rem; cursor:pointer; box-shadow:0 4px 12px rgba(128,87,0,0.2); text-decoration:none; }
.btn-gradient:hover { opacity:0.9; }
.btn-gradient-pill { display:inline-flex; align-items:center; gap:0.5rem; background:linear-gradient(135deg,#805700 0%,#febe51 100%); color:#fff; border:none; padding:1rem 2.5rem; border-radius:9999px; font-weight:700; font-size:1rem; cursor:pointer; box-shadow:0 4px 12px rgba(128,87,0,0.2); text-decoration:none; }
.btn-secondary-mh { display:inline-flex; align-items:center; gap:0.5rem; background:var(--st-surface-container-high); color:var(--st-on-surface); border:none; padding:0.875rem 1.5rem; border-radius:0.75rem; font-weight:700; font-size:0.875rem; cursor:pointer; text-decoration:none; }
.btn-secondary-mh:hover { background:var(--st-surface-container-highest); }

/* --- Page Layout --- */
.page-main { max-width:74rem; margin:0 auto; padding:2rem 1.5rem 4rem; }
.page-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:2.5rem; color:var(--st-primary); letter-spacing:-0.02em; margin:0 0 0.5rem; }
.page-subtitle { font-size:1rem; color:var(--st-on-surface-variant); margin:0; }

/* --- Info Value Boxes (guest view pattern) --- */
.info-box { background:var(--st-surface-container-lowest); padding:1.25rem; border-radius:0.125rem; }
.info-box-label { font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--st-outline); margin:0 0 0.25rem; }
.info-box-value { font-size:0.9375rem; font-weight:600; color:var(--st-on-surface); margin:0; }

/* --- Mode Toggle (Single/Bulk) --- */
.mode-toggle { display:flex; border-radius:9999px; overflow:hidden; background:var(--st-surface-container-low); padding:0.25rem; margin-bottom:2.5rem; }
.mode-toggle input { display:none; }
.mode-toggle label { flex:1; text-align:center; padding:0.875rem 1.5rem; font-weight:700; font-size:0.875rem; cursor:pointer; border-radius:9999px; transition:all 0.2s; color:var(--st-on-surface-variant); }
.mode-toggle input:checked + label { background:var(--st-primary-container); color:#fff; }

/* --- Bulk File Info --- */
.bulk-file-info { background:var(--st-surface-container); border-radius:0.75rem; padding:1rem; display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; border:1px solid rgba(211,196,178,0.3); }

/* --- Form Errors --- */
.form-error { display:flex; align-items:start; gap:0.5rem; padding:0.75rem 1rem; background:rgba(255,218,214,0.3); border:none; border-left:3px solid var(--st-error); border-radius:0.5rem; font-size:0.8125rem; font-weight:500; color:var(--st-error); margin-top:0.5rem; }
.form-error::before { content:'error'; font-family:'Material Symbols Outlined'; font-size:1rem; color:var(--st-error); flex-shrink:0; }
.form-error-banner { display:flex; align-items:start; gap:0.75rem; padding:1rem 1.5rem; background:rgba(255,218,214,0.3); border:none; border-left:4px solid var(--st-error); border-radius:0.75rem; margin-top:1.5rem; }
.form-error-banner strong { color:var(--st-error); }

/* --- Spinner Animation --- */
@keyframes spin { to { transform:rotate(360deg); } }
.required::after { content:" *"; color:var(--st-error, #ba1a1a); }

/* RSVP Mobile Responsiveness */
@media (max-width: 767px) {
    /* #14 — RSVP guest card padding */
    .rsvp-guest-card {
        padding: 1.4rem !important;
    }
    /* #14 — RSVP steps 2/3: stack form columns */
    .rsvp-attendance-option {
        padding: 1.25rem !important;
    }

    /* Profile — nested popover: open below instead of left on mobile */
    .hub-popover-nested {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        margin: 0.5rem 0 0 !important;
        box-shadow: none !important;
        border-radius: 0.5rem !important;
        background: var(--st-surface-container-low) !important;
        min-width: unset !important;
        width: 100% !important;
    }
}