/* ========================================================
   IM Pilates — Global Styles
   --------------------------------------------------------
   - Variables & Reset
   - Utilities & Helpers
   - Header (brand, desktop WP menu, CTA)
   - Mobile menu (drawer)
   - Buttons
   - Page header + tagline & page content
   - Sections (Hero, About, Pricing, Classes, Schedule, Contact)
   - Pre-footer & Footer
   - Responsive tweaks
======================================================== */


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

:root{
  --container: 1100px;
  --header-h: 80px;
  --progress-h: 4px;
  --scroll-pad: calc(var(--header-h) + var(--progress-h));

  /* Brand palette */
  --brand: #0284c7;
  --brand-dark: #0369a1;
  --ink: #111;
  --text: #333;
  --muted: #6b7a90;
  --line: #e5e7eb;
  --card-line: #e9eef5;
  --bg-soft: #f8fafc;

  /* Prefooter */
  --pf-navy:   #0b1630;
  --pf-text:   #e9eef9;
  --pf-accent: #9fc2ff;
  --pf-accent-2:#cbe0ff;
}

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

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--scroll-pad);
}

body{
  font-family:'Helvetica Neue', Arial, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:#fff;
}

img,
video{
  max-width:100%;
  height:auto;
  display:block;
}


/* ========== Utilities & Helpers ========== */

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.text-center{ text-align:center; }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  border:0;
  padding:0;
  clip:rect(0 0 0 0);
  overflow:hidden;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:8px;
  top:-100px;
  z-index:3000;
  background:var(--brand);
  color:#fff;
  padding:.6rem .9rem;
  border-radius:.6rem;
  text-decoration:none;
  font-weight:600;
}
.skip-link:focus{
  top:8px;
  box-shadow:0 0 0 3px rgba(2,132,199,.25);
}

/* Scroll progress bar */
.progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--progress-h);
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand),#22c55e);
  z-index:2000;
  pointer-events:none;
}

/* Fullscreen section helper */
.fullscreen{
  min-height:calc(100vh - var(--header-h) - var(--progress-h));
  display:flex;
  align-items:center;
}
@supports (height:100svh){
  .fullscreen{
    min-height:calc(100svh - var(--header-h) - var(--progress-h));
  }
}

/* Fade-in on scroll */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s,transform .5s;
}
.reveal.active{
  opacity:1;
  transform:none;
}


/* ========================================================
   Header (brand, desktop WP menu, CTA)
======================================================== */

.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  background:#fff;
  z-index:1000;
  box-shadow:0 3px 7px rgba(0,0,0,.09);
}

.site-header.scrolled{ background:#fff; }

.nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:14px 30px;
}

/* Brand */
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  text-decoration:none;
}
.brand-name{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:1.4rem;
  color:var(--ink);
  letter-spacing:.5px;
  white-space:nowrap;
}
.brand-tagline{
  font-family:'Poppins',sans-serif;
  font-weight:500;
  font-size:.90rem;
  color:var(--brand);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:2px;
}

/* Right side wrapper (menu + CTA) */
.header-right{
  display:flex;
  align-items:center;
  gap:20px;
}

.logo{
  font-size:1.25rem;
  font-weight:bold;
  color:var(--brand);
}

/* -------- WordPress primary menu (desktop) -------- */

/* Reset ULs WP outputs */
.site-nav ul,
.header-menu,
.header-menu ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* Horizontal layout with spacing controlled by LI (not gap) */
.header-menu{
  display:flex;
  align-items:center;
  gap:0;
}
.header-menu>li+li{
  margin-left:20px; /* match original spacing */
}

/* Shared link look (keep original underline-on-hover) */
.main-nav a,
.header-menu a{
  position:relative;
  padding:6px 0;
  text-decoration:none;
  font-family:'Poppins',sans-serif;
  font-weight:500;
  font-size:1.05rem;
  color:var(--text);
  transition:color .3s ease;
}

.main-nav a{ margin-left:0; }

.header-menu a:hover,
.main-nav a:hover{
  color:var(--brand);
}

.header-menu a::after,
.main-nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:var(--brand);
  transition:width .3s ease;
}

.header-menu a:hover::after,
.main-nav a:hover::after,
.header-menu .current-menu-item > a::after{
  width:100%;
}

.header-menu .current-menu-item > a{
  color:var(--brand);
}

/* Don’t falsely highlight homepage hash-links as current */
.header-menu li.current-menu-item > a[href*="#"],
.header-menu li.current-menu-ancestor > a[href*="#"]{
  color:var(--text);
}
.header-menu li.current-menu-item > a[href*="#"]::after,
.header-menu li.current-menu-ancestor > a[href*="#"]::after{
  width:0;
}

/* CTA pill — assign CSS class "menu-cta" to the item in Menus */
.header-menu .menu-cta > a{
  padding:10px 18px;
  border-radius:50px;
  background:var(--brand);
  color:#fff;
  border:0;
  box-shadow:0 6px 14px rgba(2,132,199,.18);
}
.header-menu .menu-cta > a:hover{
  background:var(--brand-dark);
  transform:translateY(-2px);
}


/* ========================================================
   Mobile / Drawer Menu
======================================================== */

.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  cursor:pointer;
}
.menu-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(2,132,199,.25);
}

.menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1200;
  backdrop-filter:saturate(120%) blur(2px);
}

.mobile-menu{
  position:fixed;
  left:0;
  right:0;
  top:calc(var(--header-h) + var(--progress-h));
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  z-index:1300;
  transform:translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition:transform .2s ease,opacity .2s ease;
  padding:14px 18px 18px;
}

.mobile-menu.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

/* Use same UL class so it inherits link look; just stack it */
.mobile-menu .header-menu{
  display:grid;
  gap:8px;
}
.mobile-menu .header-menu a{
  display:block;
  padding:10px 8px;
  border-radius:10px;
}
.mobile-menu .header-menu a:hover{
  background:#f3f4f6;
  color:var(--brand);
}
.mobile-menu .header-menu .menu-cta > a{
  text-align:center;
}
.mobile-menu .btn.btn-primary{
  text-align:center;
  margin-top:8px;
}

body.no-scroll{ overflow:hidden; }


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

.btn{
  display:inline-block;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:background .3s,transform .2s;
}

.btn-primary{
  background:var(--brand);
  color:#fff;
  padding:10px 20px;
  border-radius:50px;
  font-weight:500;
}
.btn-primary:hover{
  background:var(--brand-dark);
  transform:translateY(-2px);
}


/* ========================================================
   Page header + tagline & page content
======================================================== */

/* Simple page header (generic pages) */
.page-header{
  margin:calc(var(--header-h) + 20px) 0 12px;
}
.page-title{
  margin:0 0 6px;
  font-family:'Poppins',sans-serif;
  font-weight:700;
}
.page-tagline{
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
  margin:0 0 18px;
}

/* If shortcode prints tagline as first p in content, tuck it up */
.page .page-content > p.page-tagline:first-child{ margin-top:0; }
.page .page-header + .page-content{ border-top:0; }

/* Page hero (About template, etc.) */
.page-hero{
  padding:calc(var(--header-h) + 30px) 0 36px;
  background:#f8fafc;
  border-bottom:1px solid #e5e7eb;
}
.page-hero h1{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:2.2rem;
  margin-bottom:6px;
}
.page-hero-sub{ color:#556; }

/* Reduce the page-hero top padding when the WP admin bar is visible */
body.admin-bar .page-hero{
  /* original: calc(var(--header-h) + 30px) — subtract admin-bar height */
  padding-top:calc((var(--header-h) + 30px) - 32px);
}

/* Default page content rhythm (About page text, etc.) */
.page-content h2{
  font-size:1.3rem;
  font-weight:700;
  color:#111;
}

/* Base paragraphs (shared with About intro) */
.about-intro-copy p,
.page-content p{
  margin:0 0 1rem;
}

/* Lists: indentation + vertical spacing */
.about-intro-copy ul,
.about-intro-copy ol,
.page-content ul,
.page-content ol{
  margin:.25rem 0 1.25rem 1.25rem;
  padding-left:1.1rem;
}

.about-intro-copy li + li,
.page-content li + li{
  margin-top:.35rem;
}

/* Treat paragraphs that are just <strong>…</strong> as mini headings */
.about-intro-copy p > strong:only-child,
.page-content p > strong:only-child{
  display:block;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  color:#0f172a;
  margin-top:32px;
  margin-bottom:8px;
  font-size:1.05rem;
}

/* Headings & block spacing inside/below the About intro card */
.about-intro-copy .wp-block-heading,
.about-intro-copy h2,
.about-intro-copy h3,
.about-intro-copy h4{
  margin-top:34px;
  margin-bottom:10px;
}
.about-intro-copy .wp-block-heading:first-child,
.about-intro-copy h2:first-child,
.about-intro-copy h3:first-child,
.about-intro-copy h4:first-child{
  margin-top:0;
}

/* Body content headings below the card */
.page-content .wp-block-heading,
.page-content h2,
.page-content h3,
.page-content h4{
  margin-top:34px;
  margin-bottom:10px;
}
.page-content > * + *{
  margin-top:20px;
}

/* ========================================================
   About Page hero (split title + logo)
======================================================== */

.about-hero {
  padding: calc(var(--header-h) + 40px) 0 72px;
  background: #f8fafc;             /* fallback / solid mode */
  border-bottom: 1px solid #e5e7eb;
  position: relative;
  overflow: hidden;
}

/* Hero content must sit above the moving background */
.about-hero .container {
  position: relative;
  z-index: 1;
}

/* ========================================================
   About hero – animated diagonal gradient
======================================================== */

/* Base hero layout */
.about-hero,
.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 30px) 0 36px;
  background: #0b1630; /* fallback if gradient is off, overridden by Customizer */
  border-bottom: 1px solid #e5e7eb;
}

.about-hero .container,
.page-hero .container {
  position: relative;
  z-index: 2; /* sit above gradient / image */
}

/* Optional featured image behind the hero title */
.page-hero-bg-image,
.about-hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero--split .container {
  position: relative;
  z-index: 2;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: center;
}

.page-hero-copy { z-index: 2; }

.page-hero-media {
  text-align: right;
}

.page-hero-image {
  max-width: 320px;
  width: 100%;
  height: auto;
  margin-inline: auto;
  display: block;
  filter: drop-shadow(0 12px 30px rgba(15, 23, 42, 0.18));
}

@media (max-width: 900px) {
  .page-hero-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .page-hero-media {
    text-align: center;
    order: -1; /* optional – put image above title on mobile */
  }
}


.page-hero-bg-image img,
.about-hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

/* Sliding diagonal gradient – About + Classes */
.about-hero--gradient .about-hero-bg,
.page-hero--gradient .page-hero-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  z-index: 1;
  opacity: 0.6;
  background-image: linear-gradient(
    -60deg,
    var(--im-about-hero-grad1, #0b1630) 50%,
    var(--im-about-hero-grad2, #0284c7) 50%
  );
  animation: im-about-hero-slide 9s ease-in-out infinite alternate;
}

.about-hero--gradient .about-hero-bg2,
.page-hero--gradient .page-hero-bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 11s;
  background-image: linear-gradient(
    -60deg,
    var(--im-about-hero-grad2, #0284c7) 50%,
    var(--im-about-hero-grad3, #38bdf8) 50%
  );
}

.about-hero--gradient .about-hero-bg3,
.page-hero--gradient .page-hero-bg3 {
  animation-duration: 12s;
  background-image: linear-gradient(
    -60deg,
    var(--im-about-hero-grad3, #38bdf8) 50%,
    var(--im-about-hero-grad1, #0b1630) 50%
  );
}

@keyframes im-about-hero-slide {
  0%   { transform: translateX(-25%); }
  100% { transform: translateX(25%); }
}

.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.about-hero-text {
  max-width: 560px;
}

.about-hero-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #111;
  text-transform: uppercase;   /* gives that Bodyfirm vibe */
  letter-spacing: 0.06em;
  position: relative;
}

.about-hero-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--brand);
  border-radius: 2px;
  margin-top: 12px;
}

.about-hero-sub {
  color: #64748b;
  font-size: 1.05rem;
  max-width: 480px;
}

/* ========================================================
   Classes page hero – match About hero typography
======================================================== */

/* Title: same style as .about-hero-title */
.page-template-page-classes .page-hero .page-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.15;
  margin: 0 0 16px;
  /* colour comes from Customizer */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
}

/* Blue underline under the title */
.page-template-page-classes .page-hero .page-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--brand);
  border-radius: 2px;
  margin-top: 12px;
}

/* Tagline: match .about-hero-sub */
.page-template-page-classes .page-hero-sub.page-tagline {
  color: #64748b;
  font-size: 1.05rem;
  max-width: 480px;
}

/* Logo / featured image column */
.about-hero-media {
  text-align: right;
}

.about-hero-logo {
  max-width: 320px;
  width: 100%;
  height: auto;
  margin-inline: auto;
  display: block;
  filter: drop-shadow(0 12px 30px rgba(15, 23, 42, 0.18));
}

/* Content section spacing under the hero */
.content-section {
  padding: 60px 0 80px;
}

/* Stack hero nicely on smaller screens */
@media (max-width: 900px) {
  .about-hero {
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: 56px;
  }

  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .about-hero-text,
  .about-hero-media {
    text-align: center;
    justify-self: center;
  }

  .about-hero-title::after {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hide hero logo / featured image on smaller screens */
@media (max-width: 906px) {
  .about-hero-media,
  .page-hero-media {
    display: none;
  }

  /* Make sure text column stretches nicely when image is hidden */
  .about-hero-grid,
  .page-hero-grid {
    grid-template-columns: 1fr;
  }
}


/* ========================================================
   About page – body text spacing + typography
   (match the nice spacious style)
======================================================== */

.page-template-page-about .page-content p,
.page-template-page-about-php .page-content p{
  font-size: 1.05rem;      /* slightly larger than default */
  line-height: 1.9;        /* more breathing room between lines */
  color: #475569;          /* same soft grey as other body copy */
  margin: 0 0 16px;        /* extra space between paragraphs */
}

/* Slightly increase vertical rhythm between blocks */
.page-template-page-about .page-content > * + *,
.page-template-page-about-php .page-content > * + *{
  margin-top: 24px;
}

/* Optional: limit line length for nicer reading */
.page-template-page-about .page-content,
.page-template-page-about-php .page-content{
  max-width: 720px;
}

/* Logged-in (admin bar) adjustment */
body.admin-bar .about-hero {
  padding-top: calc((var(--header-h) + 40px) - 32px);
}

@media (max-width: 782px) {
  body.admin-bar .about-hero {
    padding-top: calc((var(--header-h) + 40px) - 46px);
  }
}


/* ========================================================
   Booking page
======================================================== */
/* Remove default padding on this page */
.booking-embed-page {
  margin: 0;
  padding: 0;
}

/* Make the iframe wrapper full viewport width, breaking out of any content container */
.booking-embed-wrapper {
  width: 100vw;              /* full browser width */
  margin-left: 50%;          
  transform: translateX(-50%);  /* centre the 100vw block */
}

/* Make the iframe fill that wrapper */
.booking-embed-iframe {
  width: 100%;
  min-height: 100vh;         /* at least full screen height */
  border: 0;
  display: block;
}


/* ========================================================
   Sections (Hero, About, Pricing, Classes, Schedule, Contact)
======================================================== */

/* Shared section helpers */
.hero,
.about,
.classes,
.contact,
.schedule{
  min-height:100vh;
  display:flex;
  align-items:center;
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  height:100vh;
  background:url('splash.png') no-repeat center center/cover;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}
.hero-logo{
  max-width:420px;
  margin:0 auto;
  display:block;
}
.hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.6));
}
.hero-content{
  opacity:0;
  transform:translateY(15px);
  animation:fadeUp .6s ease forwards .4s;
}
.hero-content img,
.hero-content h2,
.hero-content p,
.hero-content a{
  opacity:0;
  transform:translateY(15px);
  animation:fadeUp .6s ease forwards;
}
.hero-content img{ animation-delay:.5s; }
.hero-content h2{ animation-delay:.7s; }
.hero-content p{ animation-delay:.9s; }
.hero-content a{ animation-delay:1.1s; }

@keyframes fadeUp{
  to{
    opacity:1;
    transform:none;
  }
}

.hero-content h2{
  font-size:3rem;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:20px;
}
.hero-content p{
  font-size:1.3rem;
  max-width:700px;
  margin:0 auto 30px;
  color:#e6e6e6;
  line-height:1.6;
}

/* ---------- About (home) ---------- */

.about{
  padding:120px 20px;
  background:var(--bg-soft);
}
.about-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:40px;
  align-items:center;
}
.about-content h3{
  font-family:'Poppins',sans-serif;
  font-size:2.6rem;
  font-weight:700;
  margin-bottom:20px;
  color:var(--ink);
  position:relative;
}
.about-content h3::after{
  content:'';
  display:block;
  width:60px;
  height:3px;
  background:var(--brand);
  margin-top:10px;
}
.about-content p{
  font-size:1.2rem;
  color:#555;
  line-height:1.8;
  margin-bottom:20px;
}
.about-image img{
  width:100%;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* ---------- About intro card (About template) ---------- */

.about-intro{
  background:#f8fafc;
  border-radius:20px;
  padding:48px 40px;
  margin:28px 0 60px;
  box-shadow:0 6px 20px rgba(16,24,40,.06);
}

/* Shared section title (same as Home “What We Do”) */
.section-title{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:2.4rem;
  line-height:1.15;
  margin:0 0 16px;
  color:#111;
  position:relative;
}
.section-title::after{
  content:'';
  display:block;
  width:60px;
  height:4px;
  background:#0284c7;
  border-radius:2px;
  margin-top:12px;
}

/* Copy & image inside intro card */
.about-intro-copy p{
  font-size:1.05rem;
  color:#475569;
  line-height:1.9;
  margin:0 0 16px;
}
.about-intro-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(16,24,40,.12);
}

/* Responsive grid for intro */
.about-intro-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr; /* text : image */
  gap:56px;
  align-items:center;
}
.about-intro.no-image .about-intro-grid{
  grid-template-columns:1fr;
}

/* Bigger gaps between blocks inside the About intro card */
.about-intro-copy > *{ margin:0; }            /* reset */
.about-intro-copy > * + *{ margin-top:22px; } /* base gap */


/* ---------- Pricing ---------- */

.pricing{
  padding:100px 20px;
  background:linear-gradient(to bottom right,#d8e9f1,#dbf1e3) no-repeat;
  background-size:cover;
}
.pricing h3{
  text-align:center;
  font-size:2.4rem;
  margin-bottom:15px;
}
.pricing-intro{
  text-align:center;
  color:#555;
  margin-bottom:50px;
  font-size:1.1rem;
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:40px;
}
.pricing-card{
  background:#fff;
  border-radius:20px;
  padding:40px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:transform .3s,box-shadow .3s;
}
.pricing-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.pricing-card h4{
  font-size:1.8rem;
  font-weight:700;
  color:var(--brand);
  margin-bottom:10px;
  border-bottom:2px solid var(--brand);
  display:inline-block;
  padding-bottom:6px;
}
.pricing-section h5{
  font-size:1.2rem;
  color:#111;
  margin:15px 0 10px;
}
.price-item{
  display:grid;
  grid-template-columns:2fr minmax(60px,auto) minmax(80px,auto);
  gap:40px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px dashed rgba(2,132,199,.35);
  margin-bottom:0;
}
.price-item:last-child{ border-bottom:0; }
.price-item span{
  font-size:1rem;
  color:#444;
}
.price-item strong{
  font-size:1.2rem;
  color:var(--brand);
  text-align:right;
}
.price-item small{
  font-size:.85rem;
  color:#888;
  text-align:right;
}
.pricing-section + .pricing-section{
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid rgba(2,132,199,.12);
}
.pricing-card .btn-primary{
  margin-top:auto;
  align-self:center;
  padding:12px 30px;
}


/* ---------- Classes (CPT grid + legacy) ---------- */

/* Grid container */
.class-grid,
.im-classes-grid{
  display:grid;
  gap:24px;
}

.class-grid{
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

/* cols-N helper classes for WP CPT */
.im-classes-grid.cols-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.im-classes-grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.im-classes-grid.cols-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.im-classes-grid{ margin-bottom:48px; }

/* Cards */
.class-card,
.im-class-card{
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  border:1px solid #e9eef5;
}
.class-card.highlight{
  border:2px solid rgba(2,132,199,.25);
}

.im-class-title,
.class-card h2{
  font-size:1.3rem;
  margin-bottom:8px;
  color:#0284c7;
}

.im-class-subtitle{
  margin-left:6px;
  font-weight:600;
  font-size:14px;
  color:#1f5dbe;
}
.im-class-content p{
  margin:0 0 10px;
}
.im-class-cta .btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:10px;
  border:1px solid #dbe5f3;
  text-decoration:none;
}


/* ---------- Schedule ---------- */

.schedule{
  padding:100px 20px;
  background:#f9fafb;
}
.schedule h3{
  text-align:center;
  font-size:2.2rem;
  margin-bottom:14px;
}
.schedule-intro{
  text-align:center;
  color:#555;
  margin-bottom:28px;
}


/* ---------- Contact ---------- */

.contact{
  padding:80px 20px;
  background:#f9fafb;
  text-align:center;
}
.contact h3{
  font-size:2rem;
  margin-bottom:20px;
}
.contact p{
  color:#555;
  margin-bottom:40px;
}
.contact-form{
  display:grid;
  gap:20px;
  max-width:700px;
  margin:0 auto;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:15px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:1rem;
}
.contact-form textarea{
  resize:vertical;
  min-height:120px;
}


/* ========================================================
   Pre-Footer & Footer
======================================================== */

.prefooter{
  background:var(--pf-navy);
  color:var(--pf-text);
  padding:48px 0;
  border-top:none;
  border-bottom:none;
}
.prefooter-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:28px;
  align-items:start;
}
.prefooter .pf-col{ grid-column:span 4; }

.prefooter .pf-heading{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--pf-accent);
  margin-bottom:10px;
}
.prefooter .pf-address{
  font-style:normal;
  line-height:1.7;
  color:var(--pf-text);
}

/* Extra space between Find us and Contact */
.pf-col-left .pf-heading-contact{
  margin-top:3em;
}

/* Social / connect */
.prefooter .pf-social{
  display:flex;
  gap:14px;
  align-items:center;
}
.prefooter .pf-ig{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:var(--pf-accent);
  text-decoration:none;
}
.prefooter .pf-ig:hover,
.prefooter .pf-ig:focus-visible{
  color:var(--pf-accent-2);
  outline:none;
}

/* App button & badges */
.prefooter .pf-app-btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  border:2px solid var(--pf-accent);
  color:var(--pf-accent);
  transition:transform .08s,background-color .2s,color .2s,box-shadow .2s;
}
.prefooter .pf-app-btn:hover,
.prefooter .pf-app-btn:focus-visible{
  background:var(--pf-accent);
  color:var(--pf-navy);
  transform:translateY(-1px);
  outline:none;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.prefooter .pf-app-badge img{
  height:44px;
  width:auto;
  display:block;
}

/* Extra space between Connect block and the App block */
.pf-app-block{
  margin-top:3rem;
}

/* Contact email link: stay white + dotted hover */
.prefooter .pf-contact-link,
.prefooter .pf-contact-link:visited{
  color: #ffffff;             /* default: white */
  text-decoration: none;
  transition: color 0.2s ease; /* fade into accent colour */
}
.prefooter .pf-contact-link:hover,
.prefooter .pf-contact-link:focus{
  color: #9fc2ff;             /* same as h4 titles */
  text-decoration: underline; 
  text-decoration-style: solid; /* optional, solid is default */
  text-underline-offset: 0.15em;
}

/* Footer links list: base */
.prefooter .pf-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prefooter .pf-links-list li + li {
  margin-top: 0.4rem;
}

.prefooter .pf-links-list a,
.prefooter .pf-links-list a:visited {
  color: #ffffff;             /* default: white */
  text-decoration: none;
  transition: color 0.2s ease; /* fade into accent colour */
}

/* Hover / focus: fade to h4 colour + single solid underline */
.prefooter .pf-links-list a:hover,
.prefooter .pf-links-list a:focus {
  color: #9fc2ff;             /* same as h4 titles */
  text-decoration: underline; 
  text-decoration-style: solid; /* optional, solid is default */
  text-underline-offset: 0.15em;
}

/* Site footer */
.site-footer{
  background:#0b1630;
  color:#9ca3af;
  padding:30px 20px;
  text-align:center;
}
.site-footer p{ font-size:.9rem; }


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

/* Header & nav breakpoints */
@media (max-width:1024px){
  .main-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
}

@media (min-width:1025px){
  .menu-toggle{ display:none; }
  #mobileMenu,
  #menuBackdrop{ display:none !important; }
}

/* About (home) layout */
@media (max-width:900px){
  .about-container{
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
  }
  .about-content{ order:1; }
  .about-image{ order:2; }
  .about-image img{
    width:100%;
    height:auto;
    object-fit:cover;
  }
}

/* Classes grid on smaller viewports */
@media (max-width:1024px){
  .im-classes-grid.cols-3,
  .im-classes-grid.cols-4{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:640px){
  .im-classes-grid[class*="cols-"]{
    grid-template-columns:1fr;
  }
}

/* Hero typography / layout */
@media (min-width:1024px){
  .hero-content h2{ font-size:4rem; }
}

@media (max-width:1024px){
  .site-header{ padding:8px 16px; }
  .nav-container{
    justify-content:space-between;
    gap:12px;
  }
  .brand-name{
    font-size:1.35rem;
    white-space:nowrap;
  }
  .brand-tagline{
    font-size:.85rem;
    letter-spacing:.8px;
  }

  .hero{
    padding-top:72px;
    background-position:top center;
    background-size:cover;
  }
  .hero-content p{ font-size:1.05rem; }
  .hero-content .btn-primary{
    padding:9px 22px;
    font-size:.95rem;
  }

  .header-right .btn-primary{ display:none; }

  .pricing-grid{ grid-template-columns:1fr; }
  .pricing-card{
    box-sizing:border-box;
    width:calc(100% - 32px);
    margin:0 auto 24px;
    padding:24px;
  }
  .price-item{
    grid-template-columns:1fr auto;
    column-gap:12px;
    row-gap:6px;
    align-items:center;
    overflow-wrap:anywhere;
    padding:10px 0;
    border-bottom:1px dashed var(--line);
  }
  .price-item:last-child{ border-bottom:0; }
  .price-item span{ font-size:.95rem; }
  .price-item strong{
    font-size:1.05rem;
    white-space:nowrap;
  }
  .price-item small{
    grid-column:1 / -1;
    text-align:left;
    font-size:.8rem;
    color:#777;
    margin-top:-2px;
  }

  .im-class-card,
  .class-card{
    width:calc(100% - 32px);
    margin:0 auto 24px;
  }
}

@media (max-width:768px){
  .main-nav{ display:none; }
  .nav-container{ justify-content:center; }
  .brand-text{
    align-items:center;
    text-align:center;
    width:100%;
  }
  .brand-name{ font-size:1.2rem; }
  .brand-tagline{
    font-size:.8rem;
    letter-spacing:.8px;
  }
  .header-right{ display:none; }

  .hero-logo{
    max-width:260px;
    margin:10px auto 20px;
  }
  .hero-content h2{
    font-size:2.2rem;
    line-height:1.25;
  }
}

/* Desktop: keep hero below fixed header */
@media (min-width:1025px){
  .hero{
    height:auto;
    min-height:100vh;
    padding-top:var(--header-h);
  }
}

/* Shorter displays: reduce crowding & adjust focal point */
@media (min-width:1025px) and (max-height:820px){
  .hero-content h2{ font-size:2.4rem; }
  .hero-content p{ font-size:1.05rem; }
  .header-right .btn-primary{ display:none; }
}
@media (max-height:820px){
  .hero{ background-position:center 35%; }
}

/* Prefooter grid on small screens */
@media (max-width:900px){
  .prefooter .pf-col{ grid-column:span 6; }
}
@media (max-width:640px){
  .prefooter .pf-col{ grid-column:1 / -1; }
}

/* About intro grid stack on tablet/phone */
@media (max-width:1024px){
  .about-intro-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}

/* Page hero adjustments for admin bar on small screens */
@media (max-width:782px){
  body.admin-bar .page-hero{
    padding-top:calc((var(--header-h) + 30px) - 46px);
  }
}

/* Slightly larger gaps on wide screens for body copy */
@media (min-width:1024px){
  .about-intro-copy > * + *{ margin-top:24px; }
  .page-content > * + *{ margin-top:22px; }
}