/*
Theme Name: Fantastic FourPlay
Theme URI: https://fantasticfourplay.co.uk
Author: Fantastic FourPlay
Description: A dark, welcoming, neon-accented custom theme for Fantastic FourPlay.
Version: 0.1.1
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: fantastic-fourplay
*/

:root {
  --ffp-bg: #07080c;
  --ffp-surface: rgba(18, 20, 30, .78);
  --ffp-surface-2: rgba(25, 27, 39, .82);
  --ffp-text: #f7f5f8;
  --ffp-muted: #bcb7c3;
  --ffp-pink: #f21883;
  --ffp-cyan: #36cfff;
  --ffp-coral: #ff876d;
  --ffp-border: rgba(255, 255, 255, 0.14);
  --ffp-radius: 1.1rem;
  --ffp-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.32);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 87% 18%, rgba(54, 207, 255, .12), transparent 28rem),
    radial-gradient(circle at 18% 46%, rgba(242, 24, 131, .10), transparent 32rem),
    linear-gradient(125deg, #05060a 0%, #0b0d15 52%, #070a10 100%);
  background-attachment: fixed;
  color: var(--ffp-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

a { color: inherit; }

.ffp-shell { min-height: 100vh; overflow: hidden; }

.ffp-container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }

.ffp-site-header {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--ffp-border);
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(16px);
}

.ffp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 86px;
}

.ffp-brand { display: inline-flex; align-items: center; text-decoration: none; }
.ffp-brand img { width: 142px; height: auto; display: block; }

.ffp-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ffp-nav a {
  color: var(--ffp-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}

.ffp-nav a:hover, .ffp-nav a:focus-visible { color: var(--ffp-text); }

.ffp-menu-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--ffp-border);
  border-radius: 999px;
  padding: .55rem .8rem;
  color: var(--ffp-text);
  background: rgba(10, 12, 20, .82);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ffp-menu-toggle:focus-visible { outline: 2px solid var(--ffp-cyan); outline-offset: 3px; }
.ffp-menu-icon { display: grid; gap: 3px; }
.ffp-menu-icon span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ffp-text); }

.ffp-hero {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  display: grid;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5, 6, 10, .18), rgba(5, 6, 10, 0) 62%),
    url('./assets/images/hero-wide-v2.png') center / cover no-repeat;
}

.ffp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .04), transparent 65%);
  pointer-events: none;
}

.ffp-hero-inner { position: relative; z-index: 1; padding: 5rem 0 3rem; }
.ffp-hero-copy { max-width: 620px; }

.ffp-eyebrow {
  color: var(--ffp-cyan);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ffp-hero h1 {
  max-width: 650px;
  margin: .8rem 0 1.2rem;
  font-size: clamp(3rem, 7vw, 6.2rem);
  letter-spacing: -.065em;
  line-height: .96;
}

.ffp-gradient-text {
  background: linear-gradient(100deg, var(--ffp-pink), var(--ffp-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ffp-lede { max-width: 520px; color: var(--ffp-muted); font-size: 1.12rem; }

.ffp-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.ffp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.ffp-button-primary { color: white; background: var(--ffp-pink); box-shadow: 0 .8rem 2.5rem rgba(242, 24, 131, .25); }
.ffp-button-secondary { border-color: var(--ffp-cyan); color: var(--ffp-text); }
.ffp-button:hover, .ffp-button:focus-visible { transform: translateY(-1px); filter: brightness(1.08); }

.ffp-hero-characters {
  display: none;
  position: absolute;
  right: -2rem;
  bottom: 0;
  width: min(52vw, 620px);
  height: 680px;
  pointer-events: none;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 42%, rgba(242, 24, 131, .20), transparent 42%),
    radial-gradient(circle at 78% 28%, rgba(54, 207, 255, .20), transparent 44%);
}

.ffp-hero-characters::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: url('./assets/images/couple-hero-v2.png') center / cover no-repeat;
  filter: blur(28px) saturate(1.15);
  opacity: .62;
  transform: scale(1.08);
}

.ffp-hero-characters img {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  z-index: 1;
  filter: drop-shadow(0 1.3rem 2rem rgba(0, 0, 0, .42));
  -webkit-mask-image: radial-gradient(ellipse 78% 86% at 50% 48%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 86% at 50% 48%, #000 58%, transparent 100%);
}

.ffp-section { padding: 4.5rem 0; }
.ffp-section-compact { padding-top: 1rem; }
.ffp-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.ffp-section h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.045em; line-height: 1; }
.ffp-section-intro { max-width: 580px; color: var(--ffp-muted); }
.ffp-story-banner { position: relative; display: flex; align-items: end; min-height: 390px; margin-bottom: 1.25rem; padding: clamp(1.5rem, 5vw, 3.25rem); overflow: hidden; border: 1px solid rgba(54,207,255,.35); border-radius: var(--ffp-radius); background: linear-gradient(90deg, rgba(4,5,10,.96) 0%, rgba(4,5,10,.78) 42%, rgba(4,5,10,.12) 100%), url('./assets/images/hero-wide-v2.png') center 18% / cover no-repeat; box-shadow: var(--ffp-shadow); }
.ffp-story-banner > div { position: relative; z-index: 1; max-width: 560px; }
.ffp-story-banner h2 { margin: .35rem 0 .55rem; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.04em; line-height: .98; }
.ffp-story-banner p:last-child { margin: 0; color: var(--ffp-muted); font-size: 1.05rem; }

.ffp-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ffp-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.ffp-card { min-height: 220px; padding: 1.5rem; border: 1px solid var(--ffp-border); border-radius: var(--ffp-radius); background: linear-gradient(145deg, rgba(27, 30, 43, .78), rgba(8, 10, 16, .72)); box-shadow: var(--ffp-shadow); }
.ffp-card:nth-child(2) { border-color: rgba(54, 207, 255, .4); }
.ffp-card:nth-child(3) { border-color: rgba(242, 24, 131, .4); }
.ffp-card-icon { color: var(--ffp-pink); font-size: 1.6rem; }
.ffp-card:nth-child(2) .ffp-card-icon { color: var(--ffp-cyan); }
.ffp-card h3 { margin: 1rem 0 .45rem; font-size: 1.25rem; }
.ffp-card p { margin: 0; color: var(--ffp-muted); }

.ffp-latest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ffp-latest-card { overflow: hidden; border: 1px solid var(--ffp-border); border-radius: var(--ffp-radius); background: var(--ffp-surface); }
.ffp-latest-media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(242,24,131,.65), rgba(54,207,255,.55)); }
.ffp-latest-body { padding: 1.2rem; }
.ffp-latest-body h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.ffp-latest-body p { margin: 0; color: var(--ffp-muted); }

.ffp-callout { border: 1px solid rgba(255,135,109,.45); border-radius: var(--ffp-radius); padding: 2rem; background: linear-gradient(105deg, rgba(255,135,109,.12), rgba(242,24,131,.08)); }
.ffp-page-our-story .ffp-callout { padding: clamp(1.25rem, 4vw, 3.5rem); }
.ffp-story-copy { max-width: 760px; margin: 2.25rem auto 0; }
.ffp-story-copy p { margin: 0 0 1.35rem; color: var(--ffp-text); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.85; }
.ffp-story-copy p:first-child { font-size: clamp(1.08rem, 1.5vw, 1.24rem); color: var(--ffp-text); }
.ffp-story-copy h2 { margin: 2.6rem 0 .8rem; color: var(--ffp-text); font-size: clamp(1.55rem, 2.8vw, 2.25rem); line-height: 1.08; letter-spacing: -.035em; }
.ffp-story-copy p:last-child { margin-bottom: 0; }
.ffp-page-our-story .ffp-page-grid { max-width: 980px; margin: 3.25rem auto 2rem; }
.ffp-callout h2 { margin-bottom: .6rem; }
.ffp-form-status { border: 1px solid rgba(54,207,255,.45); border-radius: .7rem; padding: .8rem 1rem; color: var(--ffp-text); background: rgba(54,207,255,.08); }
.ffp-contact-form { max-width: 680px; margin-top: 1.5rem; }
.ffp-contact-form p { margin: 0 0 1rem; }
.ffp-contact-form label { display: block; margin-bottom: .35rem; color: var(--ffp-text); font-weight: 800; }
.ffp-contact-form input, .ffp-contact-form textarea { width: 100%; border: 1px solid var(--ffp-border); border-radius: .65rem; padding: .8rem .9rem; color: var(--ffp-text); background: rgba(5,6,10,.55); font: inherit; }
.ffp-contact-form input:focus, .ffp-contact-form textarea:focus { outline: 2px solid var(--ffp-cyan); outline-offset: 2px; }
.ffp-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ultimate Membership forms: bring plugin-owned pages into the FFP visual system. */
.iump-register-form, .ihc-login-form-wrap, .ich_level_wrap {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ffp-text);
}
.iump-register-form, .ihc-login-form-wrap {
  padding: clamp(1.1rem, 4vw, 2.25rem);
  border: 1px solid rgba(54, 207, 255, .28);
  border-radius: var(--ffp-radius);
  background: linear-gradient(145deg, rgba(27, 30, 43, .9), rgba(8, 10, 16, .86));
  box-shadow: var(--ffp-shadow);
}
.iump-register-form .iump-form-line-register, .ihc-login-form-wrap .ihc-form-line {
  margin: 0 0 1rem;
}
.iump-register-form label, .ihc-login-form-wrap label, .iump-labels-register {
  display: block;
  margin: 0 0 .35rem;
  color: var(--ffp-text);
  font-weight: 800;
}
.iump-register-form input:not([type="checkbox"]):not([type="radio"]), .iump-register-form select, .ihc-login-form-wrap input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--ffp-border);
  border-radius: .65rem;
  padding: .72rem .85rem;
  color: var(--ffp-text);
  background: rgba(5, 6, 10, .72);
  font: inherit;
}
.iump-register-form input:focus, .iump-register-form select:focus, .ihc-login-form-wrap input:focus { outline: 2px solid var(--ffp-cyan); outline-offset: 2px; }
.iump-submit-form input[type="submit"], .ihc-login-form-wrap input[type="submit"] {
  display: inline-flex;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: .75rem 1.35rem;
  color: #fff;
  background: var(--ffp-pink);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.ihc-login-form-wrap a, .iump-register-form a { color: var(--ffp-cyan); }
.ich_level_wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 980px; }
.ihc-level-item { height: 100%; overflow: hidden; border: 1px solid rgba(54, 207, 255, .3); border-radius: var(--ffp-radius); background: linear-gradient(145deg, rgba(27, 30, 43, .9), rgba(8, 10, 16, .86)); box-shadow: var(--ffp-shadow); }
.ihc-level-item:nth-child(2n) { border-color: rgba(242, 24, 131, .38); }
.ihc-level-item-top, .ihc-level-item-content, .ihc-level-item-bottom { padding: 1.25rem; }
.ihc-level-item-title { color: var(--ffp-text); font-size: 1.35rem; font-weight: 900; }
.ihc-level-item-price { color: var(--ffp-cyan); font-size: 1.2rem; font-weight: 900; }
.ihc-level-item-link { display: inline-flex; margin: 0 1.25rem 1.25rem; border-radius: 999px; padding: .7rem 1rem; color: #fff; background: var(--ffp-pink); font-weight: 900; text-decoration: none; }

.ffp-site-footer { border-top: 1px solid var(--ffp-border); padding: 2rem 0; color: var(--ffp-muted); }
.ffp-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.ffp-footer-inner img { width: 118px; }
.ffp-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 900px) {
  .ffp-header-inner { align-items: flex-start; flex-direction: column; padding: 1rem 0; }
  .ffp-hero { min-height: 760px; background-position: 64% center; }
  .ffp-hero-characters { right: -4rem; width: 78vw; height: 500px; opacity: .78; }
  .ffp-hero-copy { position: relative; z-index: 2; }
  .ffp-card-grid, .ffp-latest-grid, .ffp-page-grid { grid-template-columns: 1fr; }
  .ffp-card { min-height: auto; }
}

@media (max-width: 560px) {
  .ffp-container { width: min(100% - 1.25rem, 1180px); }
  .ffp-header-inner { gap: .7rem; min-height: 0; padding: .75rem 0 1rem; }
  .ffp-brand img { width: 106px; }
  .ffp-menu-toggle { display: inline-flex; align-self: flex-end; }
  .ffp-nav { display: none; width: 100%; }
  .ffp-nav.is-open { display: block; }
  .ffp-nav ul { display: grid; grid-template-columns: 1fr; gap: .2rem; padding-top: .35rem; }
  .ffp-nav a { display: flex; justify-content: flex-start; padding: .72rem .8rem; border-radius: .65rem; white-space: nowrap; font-size: .66rem; letter-spacing: .1em; background: rgba(255,255,255,.035); }
  .ffp-hero {
    min-height: 720px;
    background-image:
      linear-gradient(90deg, rgba(5, 6, 10, .92) 0%, rgba(5, 6, 10, .72) 48%, rgba(5, 6, 10, .18) 100%),
      url('./assets/images/couple-hero-v2.png');
    background-position: center, 72% center;
    background-size: cover, auto 100%;
  }
  .ffp-hero-inner { padding-top: 3.5rem; }
  .ffp-hero-copy { max-width: 64%; }
  .ffp-hero h1 { font-size: clamp(2.45rem, 13vw, 4.2rem); }
  .ffp-lede { font-size: .98rem; }
  .ffp-hero-characters { right: -5rem; width: 105vw; height: 440px; }
  .ffp-footer-inner { align-items: flex-start; flex-direction: column; }
  .ffp-page-our-story .ffp-callout { padding: 1.15rem; }
  .ffp-story-banner { min-height: 330px; background-position: center 12%; }
  .ffp-story-copy { margin-top: 1.6rem; }
  .ffp-story-copy p { line-height: 1.72; }
  .ich_level_wrap { grid-template-columns: 1fr; }
  .iump-register-form, .ihc-login-form-wrap { padding: 1rem; }
}