/* =============================================================================
   PalHoller — "Cozy Holler" design system, layered on Bootstrap 5.3.
   Warm Appalachian palette · Fraunces display + Nunito Sans body · soft, rounded,
   grainy. Theming is driven by overriding Bootstrap's CSS custom properties per
   [data-bs-theme], so components adopt the palette automatically.
   ============================================================================= */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/vendor/fonts/fraunces-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/vendor/fonts/nunitosans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/vendor/fonts/nunitosans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/vendor/fonts/nunitosans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/assets/vendor/fonts/nunitosans-800.woff2') format('woff2');
}

/* ---------- Palette + Bootstrap variable mapping ---------- */
:root,
[data-bs-theme="light"] {
  --ph-page:      #f6efdf;   /* warm cream */
  --ph-surface:   #fffcf4;   /* card / near-white warm */
  --ph-surface-2: #efe5cf;   /* sunk panels */
  --ph-ink:       #2c2318;
  --ph-muted:     #786a56;
  --ph-moss:      #3f7d4e;
  --ph-moss-ink:  #2f5d3a;
  --ph-honey:     #d5942a;
  --ph-clay:      #bb6242;
  --ph-line:      #e6dabf;
  --ph-primary-rgb: 63, 125, 78;
  --ph-shadow:    0 1px 2px rgba(60, 45, 20, .06), 0 8px 24px rgba(60, 45, 20, .07);
  --ph-shadow-lg: 0 2px 6px rgba(60, 45, 20, .08), 0 18px 42px rgba(60, 45, 20, .12);
  --ph-grain-opacity: .5;

  --bs-body-bg: var(--ph-page);
  --bs-body-color: var(--ph-ink);
  --bs-emphasis-color: #1c150c;
  --bs-secondary-color: var(--ph-muted);
  --bs-secondary-bg: #efe6d2;
  --bs-tertiary-bg: #f1e9d6;
  --bs-tertiary-color: var(--ph-muted);
  --bs-border-color: var(--ph-line);
  --bs-heading-color: var(--ph-moss-ink);
  --bs-link-color: var(--ph-moss);
  --bs-link-color-rgb: var(--ph-primary-rgb);
  --bs-link-hover-color: var(--ph-moss-ink);
}

[data-bs-theme="dark"] {
  --ph-page:      #1e1810;   /* warm espresso */
  --ph-surface:   #29211524;
  --ph-surface:   #292115;
  --ph-surface-2: #342a1a;
  --ph-ink:       #f0e7d4;
  --ph-muted:     #ab9c84;
  --ph-moss:      #74c489;
  --ph-moss-ink:  #8ed3a0;
  --ph-honey:     #e8b34f;
  --ph-clay:      #d98a63;
  --ph-line:      #3b3122;
  --ph-primary-rgb: 116, 196, 137;
  --ph-shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .35);
  --ph-shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 48px rgba(0, 0, 0, .5);
  --ph-grain-opacity: .35;

  --bs-body-bg: var(--ph-page);
  --bs-body-color: var(--ph-ink);
  --bs-emphasis-color: #fff8ea;
  --bs-secondary-color: var(--ph-muted);
  --bs-secondary-bg: #2f2618;
  --bs-tertiary-bg: #271f13;
  --bs-tertiary-color: var(--ph-muted);
  --bs-border-color: var(--ph-line);
  --bs-heading-color: var(--ph-moss-ink);
  --bs-link-color: var(--ph-moss);
  --bs-link-color-rgb: var(--ph-primary-rgb);
  --bs-link-hover-color: #a6e0b4;
}

/* Semantic colors shared by both themes (rgb split so Bootstrap's alpha utilities work). */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: var(--ph-moss);
  --bs-primary-rgb: var(--ph-primary-rgb);
  --bs-success: var(--ph-moss);
  --bs-success-rgb: var(--ph-primary-rgb);
  --bs-warning: var(--ph-honey);
  --bs-warning-rgb: 213, 148, 42;
  --bs-danger: #c14a2f;
  --bs-danger-rgb: 193, 74, 47;

  --bs-body-font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-size: 1.02rem;
  --bs-body-line-height: 1.65;
  --bs-border-radius: .7rem;
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.35rem;
  --bs-border-radius-pill: 50rem;
}

/* ---------- Base ---------- */
body {
  background-color: var(--bs-body-bg);
  /* subtle paper grain — a tiny fractal-noise SVG, tiled and faint */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-attachment: fixed;
}
body { position: relative; }

h1, .h1, h2, .h2, h3, .h3, .ph-display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--bs-body-font-family);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ph-display { font-size: clamp(2.1rem, 5vw, 3.4rem); }

a { text-underline-offset: .15em; }
::selection { background: rgba(var(--ph-primary-rgb), .25); }

/* ---------- Navbar ---------- */
.navbar {
  --bs-navbar-color: var(--ph-muted);
  --bs-navbar-hover-color: var(--ph-moss-ink);
  --bs-navbar-active-color: var(--ph-moss-ink);
  background-color: color-mix(in srgb, var(--ph-page) 80%, transparent) !important;
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--bs-border-color) !important;
}
.navbar-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.ph-brand-accent { color: var(--ph-honey); }
.navbar .nav-link {
  font-weight: 700;
  border-radius: 50rem;
  padding: .35rem .8rem !important;
  transition: background-color .12s ease, color .12s ease;
}
.navbar .nav-link:hover { background: color-mix(in srgb, var(--ph-moss) 12%, transparent); }
.navbar .nav-link.active {
  background: color-mix(in srgb, var(--ph-moss) 16%, transparent);
  color: var(--ph-moss-ink) !important;
}
.ph-icon-btn {
  width: 2.2rem; height: 2.2rem; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50rem; font-size: 1.1rem;
}

/* ---------- Cards ---------- */
.card {
  --bs-card-bg: var(--ph-surface);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  border-width: 1px;
  box-shadow: var(--ph-shadow);
}
a.card, .ph-pal-link {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.card:hover, .ph-pal-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--ph-shadow-lg);
  border-color: color-mix(in srgb, var(--ph-moss) 45%, var(--bs-border-color));
}

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 700; border-radius: 50rem; }
.btn-primary, .btn-success {
  --bs-btn-color: #fff8ea;
  --bs-btn-bg: var(--ph-moss);
  --bs-btn-border-color: var(--ph-moss);
  --bs-btn-hover-bg: var(--ph-moss-ink);
  --bs-btn-hover-border-color: var(--ph-moss-ink);
  --bs-btn-active-bg: var(--ph-moss-ink);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ph-moss-ink) 60%, transparent);
}
[data-bs-theme="dark"] .btn-primary, [data-bs-theme="dark"] .btn-success { --bs-btn-color: #16240f; }
.btn-outline-secondary {
  --bs-btn-color: var(--ph-ink);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--ph-muted);
  --bs-btn-hover-color: var(--ph-ink);
}
.btn-warning { --bs-btn-color: #3a2708; }

/* ---------- Badges / pills ---------- */
.badge { font-weight: 700; border-radius: 50rem; padding: .38em .7em; }
.text-bg-secondary { background: var(--bs-secondary-bg) !important; color: var(--ph-muted) !important; }
.text-bg-primary { color: #fff8ea !important; }
[data-bs-theme="dark"] .text-bg-primary { color: #16240f !important; }

/* ---------- Element chips ---------- */
.ph-el {
  display: inline-block; padding: .16em .6em; border-radius: 50rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; line-height: 1.5;
  color: #fff; white-space: nowrap; text-transform: capitalize;
}
.ph-el-neutral  { background: #8a8172; }
.ph-el-fire     { background: #e8590c; }
.ph-el-water    { background: #1c7ed6; }
.ph-el-electric { background: #eab000; color: #241a00; }
.ph-el-grass    { background: #37962f; }
.ph-el-ground   { background: #a9762f; }
.ph-el-ice      { background: #3bc0db; color: #062a33; }
.ph-el-dark     { background: #6746c4; }
.ph-el-dragon   { background: #4361cf; }

/* ---------- Thumbnails ("stickers") ---------- */
.ph-thumb {
  display: inline-block; background-size: contain; background-repeat: no-repeat;
  background-position: center; vertical-align: middle;
}
.ph-thumb-tile {
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ph-honey) 16%, var(--ph-surface)), var(--ph-surface));
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
}

/* ---------- Section headers ---------- */
.ph-section-title {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
}
.ph-section-title::before {
  content: ""; flex: 0 0 auto; width: .7rem; height: 1.5rem; border-radius: 50rem;
  background: linear-gradient(var(--ph-honey), var(--ph-clay));
}
.ph-kicker {
  font-family: var(--bs-body-font-family); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: .78rem; color: var(--ph-clay);
}

/* ---------- Hero ---------- */
.ph-hero {
  position: relative; overflow: hidden; border-radius: var(--bs-border-radius-xl);
  border: 1px solid var(--bs-border-color);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--ph-honey) 22%, transparent), transparent 55%),
    radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, var(--ph-moss) 22%, transparent), transparent 55%),
    var(--ph-surface);
  box-shadow: var(--ph-shadow-lg);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  --bs-border-radius: .6rem;
  background-color: var(--ph-surface);
  border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ph-moss);
  box-shadow: 0 0 0 .2rem rgba(var(--ph-primary-rgb), .2);
}

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--bs-border-color); }
.table > thead th {
  font-family: var(--bs-body-font-family); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: .76rem; color: var(--ph-muted);
  border-bottom: 2px solid var(--bs-border-color);
}

/* ---------- Progress ---------- */
.progress { background: var(--bs-secondary-bg); border-radius: 50rem; }
.progress-bar { background: linear-gradient(90deg, var(--ph-moss), color-mix(in srgb, var(--ph-honey) 70%, var(--ph-moss))); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { --bs-breadcrumb-divider-color: var(--ph-muted); font-weight: 600; font-size: .9rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "·"; }

/* ---------- Article prose ---------- */
.ph-prose { font-size: 1.06rem; line-height: 1.75; }
.ph-prose > :first-child { margin-top: 0; }
.ph-prose h2, .ph-prose h3 { margin-top: 1.8rem; margin-bottom: .6rem; }
.ph-prose p, .ph-prose ul, .ph-prose ol, .ph-prose blockquote { margin-bottom: 1.1rem; }
.ph-prose a { color: var(--ph-moss); text-decoration: underline; }
.ph-prose code { color: var(--ph-clay); background: var(--bs-secondary-bg); padding: .1em .35em; border-radius: .35rem; }
.ph-prose blockquote { font-style: italic; color: var(--ph-muted); }

/* ---------- Footer ---------- */
footer { background: var(--ph-surface) !important; }
footer .ph-brand-accent { color: var(--ph-honey); }
.ph-footer-link { color: var(--ph-muted); text-decoration: none; }
.ph-footer-link:hover { color: var(--ph-moss); }

/* ---------- Utilities ---------- */
.ph-lead { font-size: 1.18rem; color: var(--ph-muted); line-height: 1.6; }
.ph-divider { height: 1px; background: var(--bs-border-color); border: 0; }
.ph-stat-num { font-family: 'Fraunces', Georgia, serif; font-weight: 700; }

/* ---------- Interactive map ---------- */
.ph-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.leaflet-container { background: var(--ph-surface-2); font: inherit; border-radius: inherit; }
.leaflet-popup-content { font-size: .9rem; line-height: 1.4; }
.leaflet-popup-content a { color: var(--ph-moss); }
.ph-boss-marker {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; line-height: 1;
  background: radial-gradient(circle at 50% 38%, var(--ph-honey), var(--ph-clay));
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.ph-boss-need {
  background: radial-gradient(circle at 50% 38%, #ff9166, #c14a2f);
  box-shadow: 0 0 0 3px rgba(193, 74, 47, .35), 0 1px 4px rgba(0, 0, 0, .45);
}
.ph-base-marker {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; font-weight: 700; line-height: 1;
  background: radial-gradient(circle at 50% 38%, #6fb98f, #2f9e6f);
  border: 2px solid #fff; border-radius: 6px; box-shadow: 0 0 0 3px rgba(47, 158, 111, .3), 0 1px 4px rgba(0, 0, 0, .45);
}