/* =========================
   Arkhip
   Files: Arkhip Regular.ttf
   ========================= */
@font-face {
  font-family: "focus--subheading";
  src: url("/wp-content/uploads/fonts/Arkhip%20Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "focus--subheading";
  src: url("/wp-content/uploads/fonts/Arkhip%20Regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Dream Avenue
   Files: Dream Avenue Regular.otf
   ========================= */
@font-face {
  font-family: "focus--accent";
  src: url("/wp-content/uploads/fonts/Dream%20Avenue%20Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "focus--accent";
  src: url("/wp-content/uploads/fonts/Dream%20Avenue%20Regular.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Montserrat
   Files: Montserrat Regular.ttf
   ========================= */
@font-face {
  font-family: "focus--heading";
  src: url("/wp-content/uploads/fonts/Montserrat%20Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "focus--heading";
  src: url("/wp-content/uploads/fonts/Montserrat%20Regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Open Sans
   Files: Open Sans Regular.ttf
   ========================= */
@font-face {
  font-family: "focus--body";
  src: url("/wp-content/uploads/fonts/OpenSans-Variable.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "focus--body";
  src: url("/wp-content/uploads/fonts/OpenSans-Variable.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Astra Header
   ========================= */

/* 100% width for header */
.ast-primary-header-bar .site-primary-header-wrap {
  max-width: 90%;
}

/* =========================
   Mega Menu (Burger Icon)
   ========================= */

/* Hide default mobile menu SVG icon */
.uc-mega_menu-burger .uc-mega_menu-burger-icon i {
  display: none !important;
}

/* SVG icon as a background image */
.uc-mega_menu-burger .uc-mega_menu-burger-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("https://stage.focusfairways.com/wp-content/uploads/ff-mobile-menu3.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* =========================
   Variables & Reset
   ========================= */

:root {
  /* BRAND PALETTE */
  --charcoal: #1d1e1f;
  --navy: #1c313e;
  --yale: #2d6183;
  --sky: #a1c8d5;
  --seafoam: #6f978e;
  --copper: #b87333;

  /* SEMANTIC MAPPING */
  --primary: var(--navy);      /* Headings, strong lines */
  --secondary: var(--yale);    /* Dark section backgrounds */
  --accent: var(--copper);     /* Buttons, kickers, highlights */
  --highlight: var(--seafoam); /* Bullets, soft accents */
  --bg-light: #f7f9fa;         /* Very subtle sky tint */

  /* UTILS */
  --glass: rgba(255, 255, 255, 0.96);
  --shadow: 0 15px 40px rgba(29, 30, 31, 0.1); /* Shadow using charcoal opacity */
  --radius: 4px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "focus--body", system-ui, sans-serif;
  color: var(--charcoal);
  background-color: var(--bg-light);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: "focus--heading", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--navy);
}

p {
  margin-bottom: 1.5rem;
  color: #4a4a4a;
}

a {
  text-decoration: none;
  transition: 0.3s ease;
}

ul {
  list-style: none;
}

/* =========================
   Utilities
   ========================= */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.kicker {
  font-family: "focus--subheading", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent); /* Copper */
  margin-bottom: 0.5rem;
  display: block;
}



.h2 {
  font-size: 2.5rem;
  color: var(--navy);
}

.lead {
  font-family: "focus--subheading", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.5) !important;
  max-width: 700px;
}

.lead-light {
  font-family: "focus--subheading", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8) !important;
  max-width: 700px;
}

/* =========================
   Buttons
   ========================= */

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border: 1px solid currentColor;
  color: var(--navy);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--accent); /* Copper */
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.btn:not(.btn-primary):hover {
  background-color: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* =========================
   Hero
   ========================= */

.page-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  /* Overlay uses charcoal/navy blend */
  background-image: linear-gradient(rgba(28, 49, 62, 0.4), rgba(28, 49, 62, 0.6)),
    url("https://stage.focusfairways.com/wp-content/uploads/0014_RoyalManchesterHole01a.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
  padding: 6rem 0;
}

.page-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

.page-hero__copy h1 {
  font-size: 3.5rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.page-hero__copy .lead {
  color: rgba(255, 255, 255, 0.8) !important;
}

.page-hero__copy .kicker {
  color: var(--sky);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-actions {
  margin: 2rem 0;
  display: flex;
  gap: 1rem;
}

.hero-actions .btn:not(.btn-primary) {
  color: #fff;
  border-color: #fff;
}

.hero-actions .btn:not(.btn-primary):hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.trustbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.trust-pill {
  /* Using seafoam with low opacity for the pills */
  background: rgba(111, 151, 142, 0.2);
  backdrop-filter: blur(5px);
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  border-radius: 50px;
  border: 1px solid rgba(161, 200, 213, 0.4); /* Sky border */
  color: #fff;
}

/* Glassmorphism Card in Hero */
.page-hero__card {
  background: var(--glass);
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--charcoal);
  border-left: 4px solid var(--accent); /* Copper accent */
}

.page-hero__card h3 {
  color: var(--navy);
}

.page-hero__card ul li {
  margin-bottom: 0.8rem;
  padding-left: 1.5rem;
  position: relative;
  font-weight: 500;
}

.page-hero__card ul li::before {
  content: "✓";
  color: var(--seafoam); /* Seafoam checkmarks */
  position: absolute;
  left: 0;
  font-weight: bold;
}

.page-hero__cardnote {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ddd;
  font-size: 0.9rem;
  color: var(--navy);
}

/* =========================
   Standard Sections
   ========================= */

.section {
  padding: 6rem 0;
}

.section-head {
  margin-bottom: 4rem;
  display: flex;
}

/* =========================
   Cards & Grids
   ========================= */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.card {
  background: #fff;
  padding: 2.5rem;
  border: 1px solid rgba(161, 200, 213, 0.3); /* Subtle sky border */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 10px;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

.card h3 {
  color: var(--yale);
  font-size: 1.5rem;
}

/* =========================
   Dark / Image Sections (Alt)
   ========================= */

.section--alt {
  background-color: var(--navy);
  color: #fff;
  position: relative;
  /* Gradient uses navy -> yale */
  background-image: linear-gradient(to right, rgba(28, 49, 62, 0.95), rgba(45, 97, 131, 0.85)),
    url("https://stage.focusfairways.com/wp-content/uploads/0004_RoyalManchesterHole13.jpg");
  background-size: cover;
  background-attachment: fixed;
}

.section--alt .h2,
.section--alt h3 {
  color: #fff;
}

.section--alt .kicker {
  color: var(--sky);
}

.section--alt p,
.section--alt .lead {
  color: rgba(255, 255, 255, 0.8);
}

.section--alt .card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* Bullets */
ul.bullets {
  margin-left: 0;
}

.bullets li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bullets li::before {
  content: "•";
  color: var(--seafoam);
  font-size: 1.2rem;
  line-height: 1;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* =========================
   Alt 2 (Solid)
   ========================= */

.section--alt2 {
  background-color: var(--navy);
  color: #fff;
  position: relative;
  background-size: cover;
  background-attachment: fixed;
}

/* NOTE: Kept the original selector intent, but corrected ".section--alt h3" to ".section--alt2 h3" */
.section--alt2 .h2,
.section--alt2 h3 {
  color: #fff;
}

.section--alt2 .kicker {
  color: var(--sky);
}

/* NOTE: Kept the original selector intent, but corrected ".section--alt .lead" to ".section--alt2 .lead" */
.section--alt2 p,
.section--alt2 .lead {
  color: rgba(255, 255, 255, 0.8);
}

.section--alt2 .card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* =========================
   Data Section
   ========================= */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(161, 200, 213, 0.3);
}

.proof-card {
  padding: 3rem;
  border-right: 1px solid rgba(161, 200, 213, 0.3);
}

.proof-card:last-child {
  border-right: none;
}

.proof-foot {
  margin-top: 1rem;
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--sky); /* Light blue accent text */
}

/* =========================
   Pricing
   ========================= */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: flex-start;
}

.price-box {
  background: rgba(255, 255, 255, 0.8);
  padding: 3rem 2rem;
  margin: 15px;
  border: 1px solid #eee;
  text-align: center;
  position: relative;
}

.price-box.popular {
  border: 1px solid #eee;
  box-shadow: var(--shadow);
  background-color: #fff;
  transform: scale(1.05);
  z-index: 2;
}

.mini-bullets {
  text-align: left;
  margin: 2rem 0;
  padding-left: 1rem;
}

.mini-bullets li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  list-style: circle;
  color: var(--charcoal);
}

.mini-bullets li::marker {
  color: var(--seafoam);
}

/* =========================
   Process
   ========================= */

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  text-align: center;
}

.step strong {
  display: block;
  color: var(--sky);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-family: "Playfair Display", serif;
}

/* =========================
   FAQ
   ========================= */

.faq {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

summary {
  font-size: 1.2rem;
  font-family: "Playfair Display", serif;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

summary::after {
  content: "+";
  color: var(--seafoam);
  font-size: 1.5rem;
}

details[open] summary::after {
  content: "-";
}

details p {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

/* =========================
   CTA
   ========================= */

.cta {
  /* Dark navy overlay */
  background-image: linear-gradient(rgba(28, 49, 62, 0.7), rgba(28, 49, 62, 0.8)),
    url("https://stage.focusfairways.com/wp-content/uploads/0021_JulingtonCreekPracticeArea.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  color: #fff;
  padding: 8rem 0;
}

.cta-box {
  max-width: 700px;
  margin: 0 auto;
  background: rgba(28, 49, 62, 0.5); /* Navy tint */
  backdrop-filter: blur(10px);
  padding: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta h2 {
  color: #fff;
  font-size: 2.5rem;
}

.cta p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
}

.cta-actions {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.cta .btn {
  border-color: #fff;
  color: #fff;
}

.cta .btn-primary {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

.cta .btn-primary:hover {
  background: var(--accent); /* Copper hover */
  color: #fff;
  border-color: var(--accent);
}

/* =========================
   Portfolio (Specific)
   ========================= */

.portfolio-card {
  padding: 0; /* Remove default padding to let image bleed */
  overflow: hidden; /* Contain the image */
  display: flex;
  flex-direction: column;
}

.browser-mockup {
  background: #f1f1f1;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.browser-dots {
  padding: 10px 15px;
  display: flex;
  gap: 6px;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ddd;
  display: block;
}

/* Simulate Mac window colors */
.browser-dots span:nth-child(1) {
  background: #ff5f56;
}

.browser-dots span:nth-child(2) {
  background: #ffbd2e;
}

.browser-dots span:nth-child(3) {
  background: #27c93f;
}

.browser-mockup img {
  width: 100%;
  height: 250px; /* Fixed height for consistency */
  object-fit: cover;
  object-position: top center; /* Focus on the header */
  display: block;
  border-top: 1px solid #ddd;
}

.portfolio-content {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.portfolio-content h3 {
  margin-bottom: 0.2rem;
  font-size: 1.4rem;
}

.tagline {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 1rem;
}

.portfolio-content .desc {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  color: #666;
  flex-grow: 1;
}

.text-link {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.9rem;
  border-bottom: 2px solid var(--seafoam);
  align-self: flex-start;
  padding-bottom: 2px;
}

.text-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* =========================
   Responsive
   ========================= */

@media screen and (max-width: 1400px) {
  /* Reduce global padding */
  .section {
    padding: 3.5rem 0;
  }

  /* Compact typography */
  .page-hero__copy h1 {
    font-size: 2.75rem;
  }

  .h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.35rem;
  }

  .lead {
    font-size: 1.1rem;
  }

  /* Compact hero */
  .page-hero {
    min-height: auto;
    padding: 4rem 0;
  }

  .page-hero__grid {
    gap: 3rem;
  }

  .page-hero__card {
    padding: 2rem;
  }

  /* Compact cards */
  .card,
  .proof-card,
  .price-card {
    padding: 1.75rem;
  }

  /* Adjust pricing cards */
  .pkg-price {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .pkg-desc {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .mini-bullets {
    margin: 1.5rem 0;
  }

  /* Compact CTA */
  .cta {
    padding: 5rem 0;
  }

  .cta-box {
    padding: 2.5rem;
  }

  .cta h2 {
    font-size: 2rem;
  }
}

@media (max-width: 900px) {
  h1,
  h2,
  h3,
  h4 {
    line-height: 1.1 !important;
  }

  .page-hero__grid,
  .two-col,
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .page-hero__copy h1 {
    font-size: 2.5rem;
  }

  .page-hero {
    padding: 4rem 0;
    min-height: auto;
  }

  .price-card.popular {
    transform: scale(1);
  }

  .steps {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .proof-card {
    border-right: none;
    border-bottom: 1px solid rgba(161, 200, 213, 0.3);
    padding: 2rem;
  }

  .section-head {
    margin-bottom: 0;
  }

  .section-head h2 {
    font-size: 40px;
  }

  .card {
    padding: 0.5rem;
  }

  /* Stop Scroll Snap on Mobile
  html,
  body {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }

  .elementor,
  .elementor-site,
  .elementor-page {
    scroll-snap-type: none !important;
  }

  .elementor-section,
  .elementor-container,
  .elementor-widget {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
  */
}