/* ============================================================
   FraserFinds.ca — Prince George Community Hub
   Warm, hand-crafted local guide — adapted for Fraser Finds brand
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&display=swap');

:root {
  /* ---- Palette: Fraser Finds brand (olive + warm paper) ---- */
  --paper:        #f8f3e1;
  --paper-2:      #f0e9d2;
  --paper-3:      #e3dbbb;
  --ink:          #2c2519;
  --ink-soft:     #5c5343;
  --ink-faint:    #8c7f68;

  --spruce:       #41431b;   /* Fraser Finds dark olive */
  --spruce-deep:  #2e3012;
  --spruce-soft:  #aeb784;   /* Fraser Finds mid */

  --river:        #2f6f7e;
  --river-soft:   #5d97a3;

  /* accent — rust orange */
  --accent:       #c4612e;
  --accent-deep:  #a44d22;
  --accent-soft:  #e2a273;

  --wheat:        #e3b659;
  --berry:        #9a3b4f;

  --line:         #d8cbae;
  --line-soft:    #e5dcc6;
  --shadow:       rgba(44, 37, 25, 0.14);
  --shadow-strong:rgba(44, 37, 25, 0.22);

  /* ---- Type ---- */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;
  --serif:   'Newsreader', Georgia, serif;

  /* ---- Shape ---- */
  --radius:    14px;
  --radius-lg: 22px;
  --radius-sm: 9px;
  --gap:       24px;
  --page-max:  1180px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Faded illustrated map background */
.ff-map-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ff-map-bg svg {
  width: 100%;
  height: 100%;
}

/* Paper grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---- Layout helpers ---- */
.page-wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 28px; }

/* ---- Eyebrow label ---- */
.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--accent);
  display: inline-block;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-weight: 600; font-size: 15px;
  padding: 11px 18px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: #fff8ee;
  box-shadow: 0 2px 0 var(--accent-deep);
}
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-faint); }
.btn-dark {
  background: var(--spruce); color: var(--paper);
  box-shadow: 0 2px 0 var(--spruce-deep);
}
.btn-dark:hover { background: var(--spruce-deep); }

/* ---- Cards ---- */
.card {
  background: #fffdf6;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px -12px var(--shadow);
}

/* ---- Chips / tags ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 100px;
  background: var(--paper-3); color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* ---- Topographic contour decorative band ---- */
.contour-bg {
  background-color: var(--spruce);
  background-image:
    repeating-radial-gradient(circle at 20% 110%,
      transparent 0, transparent 38px,
      rgba(246,239,224,0.05) 38px, rgba(246,239,224,0.05) 40px);
}

/* ---- Sponsor strip ---- */
.sponsor-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1.5px solid var(--line);
  background: var(--paper-2);
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sponsor-strip img {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity .3s;
}
.sponsor-strip a:hover img { opacity: 1; }

/* scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 3px solid var(--paper); }
*::-webkit-scrollbar-track { background: transparent; }

/* focus */
:focus-visible { outline: 2.5px solid var(--river); outline-offset: 2px; }

/* utility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@keyframes floatUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.rise { animation: floatUp .45s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

.cat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px var(--shadow-strong); }

/* ---- Leaflet inside React component ---- */
.ff-leaflet-map { width: 100%; height: 100%; }
.ff-leaflet-map .leaflet-container { width: 100%; height: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .home-split, .cal-split, .submit-grid { grid-template-columns: 1fr !important; }
  .explorer { grid-template-columns: 1fr !important; }
  .explorer-map { position: relative !important; top: 0 !important; height: 420px !important; }
  .submit-rail { position: relative !important; top: 0 !important; }
  .cat-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 820px) {
  .ff-nav { display: none !important; }
  .ff-burger { display: grid !important; }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr !important; }
  .ff-cta span:last-child { display: none; }
  .ff-mast-side { display: none; }
  .page-wrap { padding: 0 18px; }
}