/*
Theme Name:   Fawn & Flora (Kadence Child)
Theme URI:    https://www.fawnandflora.com
Description:  Custom child theme for Fawn & Flora — a home, garden, and slow living resource. Built on Kadence.
Author:       Dana
Template:     kadence
Version:      1.0.0
Text Domain:  fawn-and-flora
*/

/* =========================================================
   1. DESIGN TOKENS
   Edit these values to shift the whole site's look.
   These also back up (not replace) Kadence's own Customizer
   Global Palette / Typography — see functions.php.
   ========================================================= */
:root {
  /* Color */
  --ff-bg:         #FAF7F1; /* warm white — main background */
  --ff-cream:      #F1ECE3; /* deeper warm white — section/card bg */
  --ff-sage:       #7C8B6F; /* muted green — primary accent */
  --ff-sage-dark:  #4F5A45; /* deep sage — headings, footer bg */
  --ff-taupe:      #B7A695; /* taupe / mushroom — secondary accent, borders */
  --ff-taupe-dark: #8C7862; /* deeper mushroom — hover states */
  --ff-ink:        #3A352C; /* warm near-black — body text */
  --ff-white:      #FFFFFF;
  --ff-pink:       #D9A9A0; /* dusty rose — third accent, used sparingly */
  --ff-pink-dark:  #B67C72; /* deeper rose — hover/text on pink */
  --ff-header-bg:  #F1DED6; /* header band background */

  /* Type */
  --ff-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --ff-radius-soft: 28px;
  --ff-section-space: clamp(64px, 8vw, 128px);
  --ff-content-max: 1180px;
}

/* =========================================================
   2. BASE
   ========================================================= */
body {
  background-color: var(--ff-bg);
  color: var(--ff-ink);
  font-family: var(--ff-font-body);
  font-size: 18px;
  line-height: 1.65;
}

h1, h2, h3, h4,
.entry-title,
.kt-blocks-heading-text {
  font-family: var(--ff-font-head);
  color: var(--ff-sage-dark);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1, .entry-title { font-weight: 500; }

p { max-width: 68ch; }

/* Serif body copy (e.g. article intros) gets a touch more line-height */
.entry-content p {
  line-height: 1.75;
}

a {
  color: var(--ff-sage-dark);
  text-decoration-color: var(--ff-taupe);
  text-underline-offset: 3px;
}
a:hover { color: var(--ff-sage); }

::selection {
  background: var(--ff-sage);
  color: var(--ff-white);
}

/* =========================================================
   3. BUTTONS
   Overrides Kadence's default button classes so Customizer
   button-color changes still cascade, but shape/feel match brand.
   ========================================================= */
.kb-button,
.wp-block-button__link,
button,
input[type="submit"] {
  font-family: var(--ff-font-body);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.85em 1.9em;
  background-color: var(--ff-sage);
  border: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.kb-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--ff-sage-dark);
  transform: translateY(-1px);
}

/* Secondary / outline button variant — in the block editor, select a
   Button block, open the Styles panel, and choose "Outline" (registered
   in functions.php so it's a one-click option, not a class to remember). */
.is-style-ff-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--ff-sage-dark);
  border: 1.5px solid var(--ff-taupe);
}
.is-style-ff-outline .wp-block-button__link:hover {
  background-color: var(--ff-cream);
}

/* =========================================================
   4. SIGNATURE DEVICE — organic blob image mask
   Apply the class "ff-blob-frame" to a Kadence Advanced Image
   block (via Advanced tab > Additional CSS Class) to get the
   soft asymmetric mask used behind hero / feature images.
   Use sparingly — one per page, not on every image.
   ========================================================= */
.ff-blob-frame img {
  border-radius: 42% 58% 63% 37% / 46% 40% 60% 54%;
}

/* Alternate blob for the second time it appears on a page, so
   repeated instances don't look identically stamped-out */
.ff-blob-frame--alt img {
  border-radius: 58% 42% 40% 60% / 55% 48% 52% 45%;
}

/* =========================================================
   5. SECTION RHYTHM
   Apply "ff-section" to a Kadence Row/Section for consistent
   generous vertical whitespace; "ff-section--tint" for the
   soft sage-tinted background band used to break up the page.
   ========================================================= */
.ff-section {
  padding-top: var(--ff-section-space);
  padding-bottom: var(--ff-section-space);
}
.ff-section--tint {
  background-color: var(--ff-cream);
}
.ff-section--deep {
  background-color: var(--ff-sage-dark);
  color: var(--ff-bg);
}
.ff-section--deep h1,
.ff-section--deep h2,
.ff-section--deep h3 {
  color: var(--ff-bg);
}

/* =========================================================
   6. POST / ARTICLE CARDS
   Used on category archives, "latest posts," and related-post grids.
   ========================================================= */
.ff-card {
  background-color: var(--ff-white);
  border-radius: var(--ff-radius-soft);
  overflow: hidden;
  border: 1px solid rgba(183, 166, 149, 0.35); /* taupe, low opacity */
}
.ff-card img {
  border-radius: 0; /* the card itself carries the softness, not every image */
}
.ff-card .ff-card-body {
  padding: 1.75rem;
}
.ff-card .ff-card-category {
  font-family: var(--ff-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ff-sage);
}

/* =========================================================
   7. NEWSLETTER / SIGNUP BLOCK
   ========================================================= */
.ff-newsletter {
  background-color: var(--ff-sage-dark);
  border-radius: var(--ff-radius-soft);
  padding: clamp(32px, 5vw, 64px);
  color: var(--ff-bg);
  text-align: center;
}
.ff-newsletter h2 { color: var(--ff-bg); }
.ff-newsletter input[type="email"] {
  border-radius: 999px;
  border: none;
  padding: 0.85em 1.4em;
  font-family: var(--ff-font-body);
}

/* =========================================================
   8. PINTEREST GRAPHIC EMBED WRAPPER
   Keeps 2:3 vertical Pinterest graphics from stretching full-width
   inside article body copy.
   ========================================================= */
.ff-pin-graphic {
  max-width: 380px;
  margin: 2.5rem auto;
}
.ff-pin-graphic img {
  border-radius: 18px;
  box-shadow: 0 12px 30px -12px rgba(58, 53, 44, 0.25);
}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  body { font-size: 17px; }
  .ff-section { padding-top: 48px; padding-bottom: 48px; }
  .ff-blob-frame img,
  .ff-blob-frame--alt img { border-radius: 24px; } /* simplify blob on small screens */
}

/* =========================================================
   11. SITE HEADER — pink band + scalloped bottom edge
   Targets Kadence's #masthead wrapper. If your header still
   shows white/unstyled after uploading, also set the background
   color manually in Appearance > Customize > Header (Kadence
   free includes basic header background controls) — the same
   "belt and suspenders" situation as the Global Palette fix.
   ========================================================= */
#masthead {
  background-color: var(--ff-header-bg);
  position: relative;
  padding-bottom: 22px;
}
#masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 26px;
  background: radial-gradient(circle at 13px 0, var(--ff-header-bg) 13px, transparent 14px);
  background-size: 26px 26px;
  background-repeat: repeat-x;
  pointer-events: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ff-sage-dark);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}