/*
Theme Name: The Family Wild
Theme URI: https://thefamilywild.com
Description: Child theme of Kadence for The Family Wild — family-friendly outdoor guiding, gear rental, trip planning, and skills classes in the DC area. Warm display serif headings, slate-blue/teal + forest-green palette, real-photo-forward layouts.
Author: The Family Wild (built with Claude)
Template: kadence
Version: 0.1.0
License: GNU General Public License v2 or later
Text Domain: the-family-wild
*/

/* =========================================================
   The Family Wild — design system
   Colors and type are also declared in theme.json so the
   block editor offers them. This file styles the front end.
   ========================================================= */

:root {
  --tfw-forest:    #2F5A34;  /* heading green on light sections   */
  --tfw-blue:      #3F6B82;  /* solid color panels                */
  --tfw-blue-dark: #345A6E;  /* deeper blue / hovers              */
  --tfw-cream:     #FBFAF7;  /* off-white page background         */
  --tfw-ink:       #2B2B2B;  /* body text                         */
  --tfw-white:     #FFFFFF;
  --tfw-overlay:   rgba(46, 90, 104, 0.55); /* teal wash over hero photos */
}

/* ---- Typography -------------------------------------------------------- */
body {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  color: var(--tfw-ink);
  background: var(--tfw-cream);
  font-size: 1.0625rem;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tfw-forest);
}

/* Headings sitting on a blue panel flip to white */
.tfw-panel--blue h1,
.tfw-panel--blue h2,
.tfw-panel--blue h3,
.has-tfw-blue-background-color h2,
.has-tfw-blue-background-color h3 { color: var(--tfw-white); }

/* ---- Buttons: rounded white "pill" ------------------------------------- */
.tfw-pill,
.wp-block-button.is-style-tfw-pill .wp-block-button__link {
  display: inline-block;
  background: var(--tfw-white);
  color: var(--tfw-blue-dark);
  font-family: "Fraunces", Georgia, serif;
  border-radius: 999px;
  padding: 0.7em 1.9em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.tfw-pill:hover { background: var(--tfw-cream); }
.tfw-panel--blue .tfw-pill { color: var(--tfw-blue-dark); }

/* ---- Hero with translucent teal wash over a photo ---------------------- */
.tfw-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--tfw-white);
}
.tfw-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--tfw-overlay);
}
.tfw-hero__inner { position: relative; padding: 3rem 2rem 4rem; max-width: 40rem; }
.tfw-hero h1 { color: var(--tfw-white); font-size: clamp(2.5rem, 6vw, 5rem); }

/* ---- Solid color panel (two-column photo + text) ----------------------- */
.tfw-panel--blue { background: var(--tfw-blue); color: var(--tfw-white); }
.tfw-panel--blue p { color: rgba(255,255,255,0.92); }

/* ---- Section rhythm ---------------------------------------------------- */
.tfw-section { padding: clamp(3rem, 7vw, 6rem) 0; }

/* Kadence's container handles width; these are light touch-ups only. */