/* ============================================================
   Full Focus — 2026 Design Refresh
   ------------------------------------------------------------
   Self-contained override layer that brings the theme in line
   with the fullfocusstore.com design language:
     - Warm off-white ground, near-black ink, slate-blue accent
     - Europa (bold headings) + Garamond (editorial serif, opt-in)
     - Near-black pill buttons, regular weight, no all-caps
     - Airy, borderless sections; restrained heading scale

   Loaded LAST (after the compiled Bootstrap bundle) so it
   cascades over the base theme. Remove the 'ff-refresh' enqueue
   in functions.php to fully revert.

   Fonts (europa, garamond-premier-pro-display) already load via
   the theme's existing Adobe Typekit setup — unchanged here.
   ============================================================ */

:root {
  /* Neutrals */
  --ff-ink:        #1d1d1d;
  --ff-ink-soft:   rgba(29, 29, 29, 0.62);
  --ff-ground:     #f7f7f5;
  --ff-cream:      #e8e5e0;
  --ff-white:      #ffffff;
  --ff-hair:       rgba(29, 29, 29, 0.12);

  /* Accents */
  --ff-accent:      #7290ad;   /* slate blue — links, small highlights */
  --ff-accent-deep: #6885a1;   /* hover */
  --ff-sand:        #d4c0a9;   /* warm secondary */

  /* Type */
  --ff-font-body:  europa, "Helvetica Neue", Arial, sans-serif;
  --ff-font-serif: garamond-premier-pro-display, Georgia, serif;

  /* Shape */
  --ff-radius-card: 12px;
  --ff-radius-form: 5px;
  --ff-radius-pill: 30px;

  /* Rhythm */
  --ff-section-space: clamp(56px, 8vw, 100px);
}

/* ------------------------------------------------------------
   1. Base
   ------------------------------------------------------------ */
body {
  background-color: var(--ff-ground);
  color: var(--ff-ink);
  font-family: var(--ff-font-body);
}

a { color: var(--ff-accent); }
a:hover { color: var(--ff-accent-deep); }

/* ------------------------------------------------------------
   2. Typography — Europa, bold headings, sentence case
   Element-level so an explicit .serif class still wins.
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-font-body);
  font-weight: 700;
  color: var(--ff-ink);
  letter-spacing: -0.01em;
  line-height: 1.12;
}

/* Garamond stays an intentional opt-in for editorial moments */
.serif { font-family: var(--ff-font-serif); }

/* ------------------------------------------------------------
   3. Buttons — near-black pill, regular weight, no all-caps
   Covers the base + the theme's custom gold/black/white variants.
   ------------------------------------------------------------ */
.btn,
.btn-primary,
.btn-ltgold,
.btn-black,
.btn-white {
  font-family: var(--ff-font-body);
  font-weight: 400 !important;
  font-size: 0.95rem;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.25;
  border-radius: var(--ff-radius-pill) !important;
  padding: 0.85rem 2rem;
  border: 1.5px solid var(--ff-ink);
  background-color: var(--ff-ink) !important;
  color: var(--ff-white) !important;
  box-shadow: none !important;
  transition: background-color .15s linear, color .15s linear, border-color .15s linear;
}
.btn:hover,
.btn-primary:hover,
.btn-ltgold:hover,
.btn-black:hover,
.btn-white:hover {
  background-color: #000 !important;
  border-color: #000;
  color: var(--ff-white) !important;
}
.btn:focus-visible {
  outline: 3px solid var(--ff-accent);
  outline-offset: 3px;
}

/* Buttons on DARK sections (hero photo, featured-offer, photo tiles):
   flip to a white pill with ink text so they stay legible. */
#hero .btn,
.featured-offer .btn,
#services-upper .btn {
  background-color: var(--ff-white) !important;
  color: var(--ff-ink) !important;
  border-color: var(--ff-white);
}
#hero .btn:hover,
.featured-offer .btn:hover,
#services-upper .btn:hover {
  background-color: var(--ff-cream) !important;
  border-color: var(--ff-cream);
  color: var(--ff-ink) !important;
}

/* ------------------------------------------------------------
   4. Forms — softer radius, pill submit
   ------------------------------------------------------------ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  border-radius: var(--ff-radius-form);
}

body .gform_wrapper .gform_footer input[type="submit"] {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  border-radius: var(--ff-radius-pill) !important;
  padding: 0.85rem 2rem !important;
  background: var(--ff-ink) !important;
  border-color: var(--ff-ink) !important;
}

/* ------------------------------------------------------------
   5. Homepage — airy rhythm + store-matched type
   Scoped to the home template so other pages are untouched.
   ------------------------------------------------------------ */
.page-template-page-home_v2 section {
  padding-top: var(--ff-section-space);
  padding-bottom: var(--ff-section-space);
}
/* Sections that manage their own full-bleed spacing keep it */
.page-template-page-home_v2 #hero,
.page-template-page-home_v2 #home_rotator,
.page-template-page-home_v2 #clients {
  padding-top: 0;
  padding-bottom: 0;
}

/* Homepage headings → Europa bold, sentence case, restrained scale.
   #id specificity (1,1,0) intentionally overrides .serif (0,1,0). */
.page-template-page-home_v2 #hero h2,
.page-template-page-home_v2 .featured-offer h5,
.page-template-page-home_v2 .home-subscribe h2,
.page-template-page-home_v2 .home-coaching h2,
.page-template-page-home_v2 #rotator__head,
.page-template-page-home_v2 #services-upper h4 {
  font-family: var(--ff-font-body) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

.page-template-page-home_v2 #hero h2 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
}
.page-template-page-home_v2 .featured-offer h5 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
}
.page-template-page-home_v2 .home-subscribe h2,
.page-template-page-home_v2 .home-coaching h2 {
  font-size: clamp(2rem, 4.5vw, 2.9rem) !important;
}
.page-template-page-home_v2 #rotator__head {
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
}

/* Italic emphasis inside headings: keep it, but as Europa italic */
.page-template-page-home_v2 section h2 em,
.page-template-page-home_v2 section h4 em,
.page-template-page-home_v2 section h5 em {
  font-family: var(--ff-font-body);
  font-style: italic;
  font-weight: 700;
}

/* Kickers/eyebrows → store style: title case, muted, no gold caps */
.page-template-page-home_v2 #hero h6,
.page-template-page-home_v2 .featured-offer h6,
.page-template-page-home_v2 #rotator__subhead,
.page-template-page-home_v2 .clients-v2 h6,
.page-template-page-home_v2 .home-posts h5 {
  font-family: var(--ff-font-body) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 0.95rem !important;
  color: var(--ff-accent) !important;
}
/* On the dark featured-offer the kicker needs light-friendly accent */
.page-template-page-home_v2 .featured-offer h6 {
  color: var(--ff-sand) !important;
}

/* Blog post cards → 12px, hairline, no heavy shadow, slate readmore */
.page-template-page-home_v2 section.home-posts { background: var(--ff-white); }
.page-template-page-home_v2 .home-posts .post {
  background: var(--ff-white);
  border: 1px solid var(--ff-hair);
  border-radius: var(--ff-radius-card);
  overflow: hidden;
  height: 100%;
}
.page-template-page-home_v2 .home-posts .post-content { padding: 1.4rem 1.3rem 1.5rem; }
.page-template-page-home_v2 .home-posts .post h6 {
  font-family: var(--ff-font-body) !important;
  font-weight: 700;
  font-size: 1.15rem !important;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}
.page-template-page-home_v2 .home-posts .post p {
  color: var(--ff-ink-soft);
  font-size: 0.92rem;
}
.page-template-page-home_v2 .home-posts .readmore,
.page-template-page-home_v2 .home-posts .viewall {
  color: var(--ff-accent);
  font-weight: 700;
  text-decoration: none;
}
.page-template-page-home_v2 .home-posts .readmore:hover,
.page-template-page-home_v2 .home-posts .viewall:hover { color: var(--ff-accent-deep); }

/* Client logo band → sit on the store beige, calm spacing */
.page-template-page-home_v2 .clients-v2 { background: var(--ff-cream) !important; padding: 3.5rem 0; }
.page-template-page-home_v2 #services-upper { background: var(--ff-cream) !important; }

/* Subscribe + coaching: warm grounds already suit the brand; just
   ensure ink text + comfortable rhythm */
.page-template-page-home_v2 .home-coaching { background: var(--ff-cream) !important; }
.page-template-page-home_v2 .home-coaching h2,
.page-template-page-home_v2 .home-coaching p,
.page-template-page-home_v2 .home-coaching li { color: var(--ff-ink); }

/* ------------------------------------------------------------
   6. Header polish — clean white chrome (light touch)
   ------------------------------------------------------------ */
#top #announcement { background-color: var(--ff-ink); }
#top #announcement p a { color: var(--ff-white); border-bottom-color: var(--ff-white); }

/* ------------------------------------------------------------
   7. Motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn, a { transition: none !important; }
}