/*
Theme Name: Forging Stronger People (Divi Child)
Theme URI: https://forgingstrongerpeople.com
Description: Divi child theme for Forging Stronger People. Carries the brand (Forge Yellow on black, Inter, demanding but never demeaning) plus the Forged Fuel recipe explorer. Apply the fsp-* classes below in any Divi module's CSS Class field.
Author: Forging Stronger People
Author URI: https://forgingstrongerpeople.com
Template: Divi
Version: 1.5.0
License: GNU General Public License v2 or later
Text Domain: fsp-child
*/

/* ============================================================
   1. BRAND TOKENS
   ============================================================ */
:root {
  --fsp-yellow: #D9FF00;
  --fsp-yellow-dim: #b8d800;
  --fsp-black: #000000;
  --fsp-near-black: #0a0a0a;
  --fsp-panel: #111111;
  --fsp-line: #232323;
  --fsp-grey: #8a8a8a;
  --fsp-grey-light: #c9c9c9;
  --fsp-white: #ffffff;
  --fsp-font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fsp-radius: 6px;
}

/* ============================================================
   2. DARK-FIRST BASE
   Divi ships light by default, so we flip the canvas.
   ============================================================ */
body,
#page-container,
#et-main-area {
  background-color: var(--fsp-black);
  color: var(--fsp-white);
}

body,
body p,
body li {
  font-family: var(--fsp-font);
  color: var(--fsp-grey-light);
  line-height: 1.6;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--fsp-font);
  color: var(--fsp-white);
  line-height: 1.05;
}

/* Headline house style: heavy italic uppercase */
body h1, body h2 {
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

body h3, body h4 {
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

a { color: var(--fsp-yellow); }
a:hover { color: var(--fsp-yellow-dim); }

/* Highlight one word in a headline: wrap it in <span class="accent"> */
.accent { color: var(--fsp-yellow); }

/* Utility text colours */
.fsp-muted { color: var(--fsp-grey); }
.fsp-light { color: var(--fsp-grey-light); }

/* ============================================================
   3. SECTION HELPERS
   Apply to Divi Sections via the CSS Class field.
   ============================================================ */
.fsp-dark { background-color: var(--fsp-black) !important; }
.fsp-panel-bg {
  background-color: var(--fsp-near-black) !important;
  border-top: 1px solid var(--fsp-line);
  border-bottom: 1px solid var(--fsp-line);
}

/* Eyebrow label above a heading (apply to a Text module) */
.fsp-eyebrow,
.fsp-eyebrow p {
  text-transform: uppercase;
  letter-spacing: 0.36em;
  font-size: 0.72rem !important;
  font-weight: 700;
  color: var(--fsp-yellow) !important;
  margin: 0 0 10px;
}

/* Lead paragraph */
.fsp-lead,
.fsp-lead p {
  font-size: 1.15rem !important;
  color: var(--fsp-grey-light) !important;
  max-width: 60ch;
}

/* ============================================================
   4. BUTTONS
   Apply .fsp-btn to a Divi Button module.
   ============================================================ */
.fsp-btn.et_pb_button,
a.fsp-btn {
  background: var(--fsp-yellow) !important;
  color: var(--fsp-black) !important;
  font-family: var(--fsp-font) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem !important;
  padding: 16px 34px !important;
  border: 2px solid var(--fsp-yellow) !important;
  border-radius: var(--fsp-radius) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.fsp-btn.et_pb_button:hover,
a.fsp-btn:hover {
  background: #e6ff33 !important;
  color: var(--fsp-black) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(217,255,0,0.30);
  padding: 16px 34px !important;
}
/* Divi adds an arrow pseudo-element on hover; keep it tidy */
.fsp-btn.et_pb_button:after { color: var(--fsp-black) !important; }

/* Ghost variant */
.fsp-btn-ghost.et_pb_button,
a.fsp-btn-ghost {
  background: transparent !important;
  color: var(--fsp-white) !important;
  border: 2px solid var(--fsp-line) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 16px 34px !important;
  border-radius: var(--fsp-radius) !important;
}
.fsp-btn-ghost.et_pb_button:hover,
a.fsp-btn-ghost:hover {
  border-color: var(--fsp-yellow) !important;
  color: var(--fsp-yellow) !important;
  background: transparent !important;
}

/* ============================================================
   5. OPENING SOON PILL
   Put <span class="fsp-pill"><span class="fsp-pill__dot"></span>Opening soon</span>
   inside a Text module.
   ============================================================ */
.fsp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fsp-yellow);
  border: 1px solid rgba(217,255,0,0.35);
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(217,255,0,0.05);
  line-height: 1;
}
.fsp-pill__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fsp-yellow);
  animation: fsp-pulse 2.2s infinite;
}
@keyframes fsp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(217,255,0,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(217,255,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,255,0,0); }
}

/* ============================================================
   6. HERO
   Apply .fsp-hero to a Divi Section.
   ============================================================ */
.fsp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(217,255,0,0.10), rgba(0,0,0,0) 55%),
    var(--fsp-black) !important;
}
/* Diagonal motion lines echoing the logo slant */
.fsp-hero:before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: repeating-linear-gradient(115deg,
    rgba(217,255,0,0.035) 0px, rgba(217,255,0,0.035) 2px,
    transparent 2px, transparent 46px);
  pointer-events: none;
  z-index: 0;
}
.fsp-hero .et_pb_row { position: relative; z-index: 2; }

.fsp-hero h1 {
  font-size: clamp(2.6rem, 8vw, 5rem) !important;
  line-height: 0.96 !important;
}

/* Tagline under the hero */
.fsp-tagline,
.fsp-tagline p {
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--fsp-grey) !important;
  font-size: 0.85rem !important;
}

/* ============================================================
   7. PILLAR CARDS
   Apply .fsp-pillar to a Divi Blurb module (or any module).
   ============================================================ */
.fsp-pillar {
  background: var(--fsp-panel);
  border: 1px solid var(--fsp-line);
  border-radius: var(--fsp-radius);
  padding: 32px 28px !important;
  height: 100%;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.fsp-pillar:hover {
  border-color: rgba(217,255,0,0.4);
  transform: translateY(-3px);
}
.fsp-pillar h3, .fsp-pillar h4 { font-size: 1.35rem !important; margin-bottom: 12px; }
.fsp-pillar p { color: var(--fsp-grey-light) !important; font-size: 0.98rem !important; }

/* Small yellow number/label at the top of a pillar */
.fsp-num,
.fsp-num p {
  font-weight: 800;
  font-style: italic;
  font-size: 0.85rem !important;
  color: var(--fsp-yellow) !important;
  letter-spacing: 0.08em;
  margin-bottom: 10px !important;
  text-transform: uppercase;
}

/* Value card, lighter than a pillar */
.fsp-value {
  border: 1px solid var(--fsp-line);
  border-radius: var(--fsp-radius);
  padding: 24px !important;
  background: var(--fsp-panel);
  height: 100%;
}
.fsp-value h3, .fsp-value h4 { font-size: 1.05rem !important; margin-bottom: 8px; }

/* ============================================================
   8. TICKED LIST
   Apply .fsp-list to a Text module containing a <ul>.
   ============================================================ */
.fsp-list ul { list-style: none; padding: 0; margin: 0; }
.fsp-list li {
  padding: 12px 0 12px 30px;
  border-top: 1px solid var(--fsp-line);
  color: var(--fsp-grey-light);
  position: relative;
}
.fsp-list li:before {
  content: "";
  position: absolute;
  left: 4px; top: 22px;
  width: 12px; height: 2px;
  background: var(--fsp-yellow);
}

/* ============================================================
   9. NOTE / CALLOUT
   ============================================================ */
.fsp-note {
  border-left: 3px solid var(--fsp-yellow);
  background: rgba(217,255,0,0.04);
  padding: 20px 24px !important;
  border-radius: 0 var(--fsp-radius) var(--fsp-radius) 0;
}
.fsp-note p { margin: 0; color: var(--fsp-grey-light) !important; }
.fsp-note strong { color: var(--fsp-white); }

/* ============================================================
   10. THE FORGE MEDIA PANEL
   Decorative dark panel, no photography needed yet.
   ============================================================ */
.fsp-forge-panel {
  position: relative;
  min-height: 340px;
  border-radius: var(--fsp-radius);
  border: 1px solid var(--fsp-line);
  background:
    radial-gradient(circle at 70% 25%, rgba(217,255,0,0.14), rgba(0,0,0,0) 60%),
    linear-gradient(160deg, #141414, #050505) !important;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 28px !important;
}
.fsp-forge-panel:after {
  content: "THE FORGE";
  position: absolute;
  top: 22px; left: 24px;
  font-weight: 800; font-style: italic;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: rgba(255,255,255,0.06);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   11. CTA BAND
   ============================================================ */
.fsp-cta {
  text-align: center;
  background:
    radial-gradient(circle at 50% 120%, rgba(217,255,0,0.12), rgba(0,0,0,0) 60%),
    var(--fsp-near-black) !important;
  border-top: 1px solid var(--fsp-line);
}

/* ============================================================
   12. FORMS (Divi Contact Form module)
   ============================================================ */
.fsp-form .et_pb_contact_field .et_pb_contact_field_options_title,
.fsp-form .et_pb_contact_field label {
  color: var(--fsp-grey-light) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem !important;
  font-weight: 700;
}
.fsp-form input[type="text"],
.fsp-form input[type="email"],
.fsp-form textarea,
.fsp-form select,
.fsp-form .et_pb_contact_field input,
.fsp-form .et_pb_contact_field textarea {
  background: var(--fsp-panel) !important;
  border: 1px solid var(--fsp-line) !important;
  border-radius: var(--fsp-radius) !important;
  color: var(--fsp-white) !important;
  font-family: var(--fsp-font) !important;
  font-size: 1rem !important;
  padding: 14px 16px !important;
}
.fsp-form input:focus,
.fsp-form textarea:focus,
.fsp-form select:focus {
  outline: none !important;
  border-color: var(--fsp-yellow) !important;
  box-shadow: 0 0 0 3px rgba(217,255,0,0.15) !important;
}
.fsp-form ::placeholder { color: var(--fsp-grey) !important; }
.fsp-form .et_pb_contact_submit {
  background: var(--fsp-yellow) !important;
  color: var(--fsp-black) !important;
  border: 2px solid var(--fsp-yellow) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--fsp-radius) !important;
  padding: 16px 34px !important;
}

/* Contact details aside */
.fsp-aside {
  border: 1px solid var(--fsp-line);
  border-radius: var(--fsp-radius);
  padding: 28px !important;
  background: var(--fsp-panel);
}

/* ============================================================
   13. RECIPE EXPLORER
   Output by the [fsp_recipes] shortcode. Do not hand-edit.
   ============================================================ */
.fsp-explorer-group { margin: 0; }

.fsp-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.fsp-card {
  position: relative;
  text-align: left;
  background: var(--fsp-panel);
  border: 1px solid var(--fsp-line);
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  color: inherit;
  font-family: var(--fsp-font);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.fsp-card:hover { border-color: rgba(217,255,0,0.45); transform: translateY(-3px); }
.fsp-card:focus-visible {
  outline: none;
  border-color: var(--fsp-yellow);
  box-shadow: 0 0 0 3px rgba(217,255,0,0.2);
}
.fsp-card.is-active {
  border-color: var(--fsp-yellow);
  box-shadow: inset 0 0 0 1px var(--fsp-yellow);
}
.fsp-card__name {
  font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.12;
  color: var(--fsp-white);
  padding-right: 84px;
}

/* Overnight vs baked badge */
.fsp-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--fsp-line);
  color: var(--fsp-grey-light);
  background: var(--fsp-black);
  line-height: 1;
}
.fsp-card__badge.is-baked {
  color: var(--fsp-yellow);
  border-color: rgba(217,255,0,0.45);
  background: rgba(217,255,0,0.07);
}
/* Badge sitting next to the open recipe title */
.fsp-detail__name .fsp-card__badge {
  position: static;
  margin-left: 12px;
  vertical-align: middle;
  display: inline-block;
}
.fsp-card__meta {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fsp-grey); font-weight: 600;
}
.fsp-card__meta strong { color: var(--fsp-yellow); }
.fsp-macrobar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.fsp-macrobar span { display: block; height: 100%; }
.fsp-card__legend {
  display: flex; gap: 14px; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fsp-grey);
}
.fsp-card__legend b { color: var(--fsp-white); font-weight: 700; }
.fsp-card__open {
  margin-top: auto; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fsp-yellow);
}

.fsp-detail {
  margin-top: 24px;
  border: 1px solid var(--fsp-line);
  border-radius: 10px;
  background: var(--fsp-near-black);
  overflow: hidden;
  scroll-margin-top: 100px;
}
.fsp-detail__bar {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--fsp-line);
  background: var(--fsp-panel);
}
.fsp-detail__label {
  display: block; font-size: 0.64rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fsp-grey); font-weight: 700;
}
.fsp-detail__name {
  font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: 1.15rem; color: var(--fsp-white);
}

/* Batch size toggle */
.fsp-batch {
  display: inline-flex;
  background: var(--fsp-black);
  border: 1px solid var(--fsp-line);
  border-radius: var(--fsp-radius);
  padding: 4px; gap: 4px;
}
.fsp-batch button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--fsp-grey-light);
  font-family: var(--fsp-font); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 4px; transition: 0.16s;
  display: flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.fsp-batch button small {
  font-size: 0.62rem; color: var(--fsp-grey);
  font-weight: 600; letter-spacing: 0.1em;
}
.fsp-batch button.is-active { background: var(--fsp-yellow); color: var(--fsp-black); }
.fsp-batch button.is-active small { color: rgba(0,0,0,0.6); }

.fsp-recipe { display: grid; grid-template-columns: 1.25fr 0.75fr; }
.fsp-recipe__main { padding: 30px; }
.fsp-recipe__side {
  padding: 30px;
  border-left: 1px solid var(--fsp-line);
  background: var(--fsp-panel);
}
.fsp-recipe__meta {
  display: flex; flex-wrap: wrap; gap: 18px;
  color: var(--fsp-grey); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; margin-bottom: 24px;
}
.fsp-recipe__meta strong { color: var(--fsp-yellow); }
.fsp-recipe h4 {
  font-size: 0.72rem !important; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fsp-grey) !important;
  font-weight: 700; margin: 26px 0 12px;
  font-style: normal;
}
.fsp-recipe h4:first-child { margin-top: 0; }

.fsp-ingredients { list-style: none; padding: 0; margin: 0; }
.fsp-ingredients li {
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--fsp-line);
  position: relative; color: var(--fsp-grey-light);
}
.fsp-ingredients li:before {
  content: ""; position: absolute; left: 2px; top: 20px;
  width: 11px; height: 2px; background: var(--fsp-yellow);
}

.fsp-method { padding-left: 0; margin: 0; list-style: none; counter-reset: step; }
.fsp-method li {
  position: relative; padding: 4px 0 18px 44px;
  color: var(--fsp-grey-light); counter-increment: step;
}
.fsp-method li:before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fsp-black); border: 1px solid var(--fsp-yellow);
  color: var(--fsp-yellow); font-weight: 800; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}
.fsp-method li:not(:last-child):after {
  content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 4px;
  width: 1px; background: var(--fsp-line);
}

.fsp-storage { font-size: 0.9rem; color: var(--fsp-grey-light); }
.fsp-storage .dot { color: var(--fsp-yellow); padding: 0 6px; }

/* Macro pie */
.fsp-macros__pie {
  width: 168px; height: 168px; border-radius: 50%;
  margin: 6px auto 22px; position: relative;
}
.fsp-macros__pie:after {
  content: ""; position: absolute; inset: 26px;
  border-radius: 50%; background: var(--fsp-panel);
}
.fsp-macros__kcal {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.fsp-macros__kcal b {
  font-size: 1.5rem; font-weight: 800; font-style: italic;
  line-height: 1; color: var(--fsp-white);
}
.fsp-macros__kcal span {
  font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fsp-grey); margin-top: 3px;
}

.fsp-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fsp-legend li { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; }
.fsp-legend .swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.fsp-legend .label { color: var(--fsp-grey-light); flex: 1; }
.fsp-legend .val { font-weight: 700; color: var(--fsp-white); }
.fsp-legend .pct { color: var(--fsp-grey); font-size: 0.82rem; width: 42px; text-align: right; }
.fsp-macros__note { font-size: 0.74rem; color: var(--fsp-grey); margin-top: 18px; }

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .fsp-recipe { grid-template-columns: 1fr; }
  .fsp-recipe__side { border-left: 0; border-top: 1px solid var(--fsp-line); }
}
@media (max-width: 640px) {
  .fsp-recipe-grid { grid-template-columns: 1fr 1fr; }
  .fsp-detail__bar { flex-direction: column; align-items: flex-start; }
  .fsp-batch { width: 100%; justify-content: space-between; }
}
@media (max-width: 420px) {
  .fsp-recipe-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fsp-pill__dot { animation: none; }
  .fsp-card, .fsp-pillar, .fsp-btn { transition: none; }
}

/* ============================================================
   15. DIVI'S OWN HEADER AND FOOTER
   Divi ships a light header with a placeholder logo. This makes
   the stock header and footer look on brand straight away, so
   the site never looks like default Divi even before you build
   a Theme Builder header.
   ============================================================ */
#main-header {
  background-color: var(--fsp-black) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--fsp-line);
}
.et-fixed-header#main-header {
  background-color: rgba(0,0,0,0.92) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--fsp-line);
}

/* Primary nav links */
#top-menu li a,
.et-fixed-header #top-menu li a {
  color: var(--fsp-grey-light) !important;
  font-weight: 600;
  opacity: 1;
}
#top-menu li a:hover,
.et-fixed-header #top-menu li a:hover,
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
  color: var(--fsp-yellow) !important;
  opacity: 1;
}

/* Dropdowns */
#top-menu li ul.sub-menu {
  background-color: var(--fsp-near-black) !important;
  border-top: 3px solid var(--fsp-yellow) !important;
}
#top-menu li ul.sub-menu a { color: var(--fsp-grey-light) !important; }

/* Mobile menu */
.mobile_menu_bar:before,
.et_toggle_slide_menu:after { color: var(--fsp-white) !important; }
.et_mobile_menu {
  background-color: var(--fsp-near-black) !important;
  border-top: 3px solid var(--fsp-yellow) !important;
}
.et_mobile_menu li a {
  color: var(--fsp-grey-light) !important;
  border-bottom: 1px solid var(--fsp-line);
}
.et_mobile_menu li a:hover { color: var(--fsp-yellow) !important; background: transparent; }

/* Footer */
#main-footer,
#footer-widgets,
#footer-bottom {
  background-color: var(--fsp-black) !important;
}
#footer-bottom { border-top: 1px solid var(--fsp-line); }
#footer-info,
#footer-info a,
#footer-bottom .et-social-icons a {
  color: var(--fsp-grey) !important;
}
#footer-info a:hover,
#footer-bottom .et-social-icons a:hover { color: var(--fsp-yellow) !important; }
#footer-widgets .footer-widget h4 { color: var(--fsp-white) !important; }

/* ============================================================
   16. BUTTON CONTRAST SAFETY NET
   A yellow button must always have black text, wherever it sits.
   Without this, a button inside a nav inherits the yellow link
   colour and becomes yellow on yellow.
   ============================================================ */
nav a.fsp-btn,
.fsp-nav a.fsp-btn,
.et-l--header .fsp-btn,
.et-l--header .et_pb_button,
.et-l--footer .fsp-btn,
#top-menu a.fsp-btn {
  color: var(--fsp-black) !important;
  background: var(--fsp-yellow) !important;
  border-color: var(--fsp-yellow) !important;
}
.et-l--header .et_pb_button:hover,
nav a.fsp-btn:hover {
  color: var(--fsp-black) !important;
  background: #e6ff33 !important;
}
/* Ghost buttons in a header stay outlined, not filled */
.et-l--header .fsp-btn-ghost,
nav a.fsp-btn-ghost {
  background: transparent !important;
  color: var(--fsp-white) !important;
  border-color: var(--fsp-line) !important;
}

/* ============================================================
   17. THEME BUILDER HEADER AND FOOTER
   Styles the importable header and footer layouts. The wordmark
   is live Inter text next to the mark, so it stays sharp at any
   size and you can edit the words in the builder.
   ============================================================ */
.fsp-tb-header {
  background-color: rgba(0,0,0,0.88) !important;
  border-bottom: 1px solid var(--fsp-line);
  backdrop-filter: blur(10px);
}

/* Brand lockup: mark plus wordmark */
.fsp-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.fsp-brand img {
  width: 42px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(217,255,0,0.25));
}
.fsp-brand__name {
  font-family: var(--fsp-font);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1rem;
  color: var(--fsp-white);
  line-height: 1;
  white-space: nowrap;
}
.fsp-brand__name .accent { color: var(--fsp-yellow); }

/* Nav inside the Theme Builder header */
.fsp-tb-header .et_pb_menu,
.fsp-tb-header .et_pb_menu__wrap { background: transparent !important; }
.fsp-tb-header .et_pb_menu__menu > nav > ul > li { margin-left: 26px; }
.fsp-tb-header .et_pb_menu__menu > nav > ul > li > a {
  color: var(--fsp-grey-light) !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: none;
}
.fsp-tb-header .et_pb_menu__menu > nav > ul > li > a:hover,
.fsp-tb-header .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
  color: var(--fsp-yellow) !important;
}

/* The last nav item becomes the yellow call to action.
   Put Contact last in your menu and it styles itself. */
.fsp-tb-header .et_pb_menu__menu > nav > ul > li:last-child > a {
  background: var(--fsp-yellow) !important;
  color: var(--fsp-black) !important;
  padding: 11px 22px !important;
  border-radius: var(--fsp-radius);
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem !important;
}
.fsp-tb-header .et_pb_menu__menu > nav > ul > li:last-child > a:hover {
  background: #e6ff33 !important;
  color: var(--fsp-black) !important;
}

/* Mobile menu inside the Theme Builder header */
.fsp-tb-header .et_mobile_menu {
  background-color: var(--fsp-near-black) !important;
  border-top: 3px solid var(--fsp-yellow) !important;
}
.fsp-tb-header .et_mobile_menu li a { color: var(--fsp-grey-light) !important; }
.fsp-tb-header .mobile_menu_bar:before { color: var(--fsp-white) !important; }

/* Footer */
.fsp-tb-footer {
  background-color: var(--fsp-black) !important;
  border-top: 1px solid var(--fsp-line);
}
.fsp-foot-head,
.fsp-foot-head p {
  font-size: 0.72rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fsp-grey) !important;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 12px !important;
}
.fsp-foot-links ul { list-style: none; padding: 0; margin: 0; }
.fsp-foot-links li { margin-bottom: 10px; }
.fsp-foot-links a { color: var(--fsp-grey-light); font-size: 0.92rem; }
.fsp-foot-links a:hover { color: var(--fsp-yellow); }
.fsp-foot-bar { border-top: 1px solid var(--fsp-line); }
.fsp-foot-bar p {
  color: var(--fsp-grey) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
  margin: 0;
}

@media (max-width: 980px) {
  .fsp-brand__name { font-size: 0.86rem; }
  .fsp-tb-header .et_pb_menu__menu > nav > ul > li:last-child > a { padding: 9px 16px !important; }
}

/* ============================================================
   18. HEADER ALIGNMENT
   Divi columns sit their contents at the top, which left the
   brand and the nav on two different lines. This puts them on
   one centred line.
   ============================================================ */
.fsp-tb-header .et_pb_row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap;
  padding: 14px 0 !important;
}
.fsp-tb-header .et_pb_column {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}
.fsp-tb-header .et_pb_column:last-child { justify-content: flex-end; }
.fsp-tb-header .et_pb_module,
.fsp-tb-header .et_pb_menu { margin-bottom: 0 !important; }

/* The brand is an inline-flex, so it would otherwise sit on the text
   baseline and ride a few pixels high. Making it a block-level flex
   box takes it off the baseline. */
.fsp-tb-header .fsp-brand { display: flex !important; }
.fsp-tb-header .et_pb_text,
.fsp-tb-header .et_pb_text_inner,
.fsp-tb-header .et_pb_text p {
  line-height: 0 !important;
  margin: 0 !important;
}

/* Divi's menu carries its own margins which pushed the links low.
   Reset them and centre the list against the brand. */
.fsp-tb-header .et_pb_menu__wrap { align-items: center !important; }
.fsp-tb-header .et_pb_menu__menu,
.fsp-tb-header .et_pb_menu__menu > nav,
.fsp-tb-header .et_pb_menu__menu > nav > ul {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.fsp-tb-header .et_pb_menu__menu > nav > ul > li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Nav spacing and a better balanced call to action */
.fsp-tb-header .et_pb_menu__menu > nav > ul > li { margin-left: 22px; }
.fsp-tb-header .et_pb_menu__menu > nav > ul > li:last-child { margin-left: 14px; }
.fsp-tb-header .et_pb_menu__menu > nav > ul > li:last-child > a {
  padding: 9px 18px !important;
  font-size: 0.8rem !important;
  line-height: 1.2;
}

/* ============================================================
   19. HERO PRESENCE AND BUTTON ROW
   Restores the full-height hero, and pulls the two buttons back
   together instead of leaving them stranded in half-width columns.
   ============================================================ */
.fsp-hero {
  min-height: 84vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fsp-hero .et_pb_row:has(.et_pb_button) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.fsp-hero .et_pb_row:has(.et_pb_button) .et_pb_column {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
.fsp-hero .et_pb_row:has(.et_pb_button) .et_pb_button_module_wrapper { margin-bottom: 0 !important; }

@media (max-width: 640px) {
  .fsp-hero { min-height: 0; }
  .fsp-hero .et_pb_row:has(.et_pb_button) .et_pb_column { width: 100% !important; }
  .fsp-hero .et_pb_button { width: 100%; text-align: center; }
}