/* ==========================================================================
   Freedom Centre Church — Child Theme CSS
   --------------------------------------------------------------------------
   theme.json handles color, font, spacing, and shadow tokens globally.
   This file carries component-level styling and micro-interactions that
   cannot be expressed through theme.json alone.
   ========================================================================== */


/* ---------- Root fine-tuning ---------- */
:root {
  --fcc-font-smooth: antialiased;
  --fcc-radius-pill: 999px;
  --fcc-radius-card: 18px;
  --fcc-radius-media: 10px;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: var(--fcc-font-smooth);
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
}


/* ---------- Section surface helpers ----------
   Blocksy sections are plain groups; we give editors a simple way to get
   our signature "dark canvas" or "cream breather" sections by adding a
   .is-surface-* class via the Advanced > Additional CSS Class field.
   -------------------------------------------- */
.is-surface-ink {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
}
.is-surface-ink-2 {
  background: var(--wp--preset--color--ink-2);
  color: var(--wp--preset--color--cream);
  border-top: 1px solid rgba(247, 241, 229, 0.1);
}
.is-surface-cream {
  background: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--ink);
}
.is-surface-paper {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}
.is-surface-teal {
  background: linear-gradient(180deg,
    var(--wp--preset--color--teal-deep) 0%,
    var(--wp--preset--color--teal) 100%);
  color: var(--wp--preset--color--cream);
}

.is-surface-ink h1,
.is-surface-ink h2,
.is-surface-ink h3,
.is-surface-ink h4,
.is-surface-ink-2 h1,
.is-surface-ink-2 h2,
.is-surface-ink-2 h3,
.is-surface-ink-2 h4,
.is-surface-teal h1,
.is-surface-teal h2,
.is-surface-teal h3,
.is-surface-teal h4 {
  color: var(--wp--preset--color--cream);
}


/* ---------- Eyebrow label ----------
   Add class "fcc-eyebrow" to any paragraph to get the brand eyebrow style.
   ------------------------------------ */
.fcc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wp--preset--font-family--inter-tight);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--orange);
  font-weight: 600;
  margin: 0 0 1.25em;
}
.fcc-eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
}

.is-surface-cream .fcc-eyebrow,
.is-surface-paper .fcc-eyebrow {
  color: var(--wp--preset--color--orange-deep);
}
.is-surface-teal .fcc-eyebrow {
  color: var(--wp--preset--color--gold);
}


/* ---------- Display italic accent ----------
   Wrap words in <em> inside any heading to get the warm italic brand accent.
   ------------------------------------ */
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  font-weight: 400;
  color: var(--wp--preset--color--orange);
}
.is-surface-ink h1 em,
.is-surface-ink h2 em,
.is-surface-ink-2 h1 em,
.is-surface-ink-2 h2 em {
  color: var(--wp--preset--color--gold);
}
.is-surface-teal h1 em,
.is-surface-teal h2 em {
  color: var(--wp--preset--color--gold);
}


/* ---------- Button variants via class ----------
   Core button block + Advanced > Additional CSS Class.
   ----------------------------------------------- */
.wp-block-button.is-btn-orange   .wp-block-button__link { background: var(--wp--preset--color--orange);   color: var(--wp--preset--color--ink); }
.wp-block-button.is-btn-orange   .wp-block-button__link:hover { background: var(--wp--preset--color--gold); }
.wp-block-button.is-btn-teal     .wp-block-button__link { background: var(--wp--preset--color--teal);     color: var(--wp--preset--color--cream); }
.wp-block-button.is-btn-teal     .wp-block-button__link:hover { background: var(--wp--preset--color--teal-deep); }
.wp-block-button.is-btn-ink      .wp-block-button__link { background: var(--wp--preset--color--ink);      color: var(--wp--preset--color--cream); }
.wp-block-button.is-btn-ink      .wp-block-button__link:hover { background: var(--wp--preset--color--charcoal); }
.wp-block-button.is-btn-cream    .wp-block-button__link { background: var(--wp--preset--color--cream);    color: var(--wp--preset--color--ink); }
.wp-block-button.is-btn-cream    .wp-block-button__link:hover { background: var(--wp--preset--color--paper); }

.wp-block-button.is-btn-ghost-dark .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--cream);
  border: 1px solid rgba(247, 241, 229, 0.28);
}
.wp-block-button.is-btn-ghost-dark .wp-block-button__link:hover {
  background: rgba(247, 241, 229, 0.06);
  border-color: var(--wp--preset--color--cream);
}
.wp-block-button.is-btn-ghost-light .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border: 1px solid rgba(14, 14, 16, 0.18);
}
.wp-block-button.is-btn-ghost-light .wp-block-button__link:hover {
  background: var(--wp--preset--color--cream-2);
  border-color: var(--wp--preset--color--ink);
}


/* ---------- Announcement bar ----------
   Use a group with class "fcc-announce" at the very top of the header.
   --------------------------------------- */
.fcc-announce {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 11px 24px;
  text-align: center;
  border-bottom: 1px solid rgba(247, 241, 229, 0.1);
}
.fcc-announce strong {
  color: var(--wp--preset--color--orange);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 10px;
}
.fcc-announce a {
  color: var(--wp--preset--color--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(247, 241, 229, 0.35);
  transition: text-decoration-color 0.2s;
}
.fcc-announce a:hover {
  text-decoration-color: var(--wp--preset--color--gold);
}


/* ---------- Cards, grids, and the rest ----------
   Phase 2 — added as each homepage pattern is built.
   ------------------------------------------------- */