/*
Theme Name: Achieve Fitness
Theme URI: https://achieve.bz
Author: Achieve Fitness
Description: Custom WordPress theme for Achieve Fitness in Spanish Lookout, Belize.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: achieve-fitness
*/

:root {
  --af-ink: #090b10;
  --af-paper: #f5f7fa;
  --af-white: #ffffff;
  --af-muted: #5b6472;
  --af-line: #d8dee8;
  --af-blue: #2f5bd3;
  --af-blue-dark: #17318c;
  --af-bright-blue: #2ca6ff;
  --af-soft-blue: #eaf1ff;
  --af-whatsapp: #22c55e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--af-paper);
  color: var(--af-ink);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}
body.admin-bar .site-header { top: 32px; }
a { color: inherit; text-decoration: none; }
img { display: block; height: auto; max-width: 100%; }
button, input, textarea { font: inherit; }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.page-container { margin: 0 auto; max-width: 1180px; width: 100%; }

.site-header {
  background: rgba(9, 11, 16, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header-inner {
  align-items: center;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1240px;
  padding: 12px 30px;
}
.brand { display: inline-flex; width: 190px; }
.brand img, .site-footer img { background: #000; width: 100%; }
.site-nav { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.site-nav a {
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  font-weight: 700;
  padding: 10px 12px;
}
.site-nav a:hover, .site-nav a:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; outline: none; }
.site-nav .header-whatsapp { background: var(--af-bright-blue); color: #04101d; margin-left: 8px; }
.site-nav .header-whatsapp:hover, .site-nav .header-whatsapp:focus-visible { background: #fff; color: var(--af-ink); }

.home-hero {
  align-items: center;
  background-color: #11151e;
  background-position: center;
  background-size: cover;
  color: var(--af-white);
  display: flex;
  min-height: 720px;
  position: relative;
}
.home-hero::before { background: rgba(5, 8, 14, 0.63); content: ""; inset: 0; position: absolute; }
.home-hero-content { padding: 120px 30px 90px; position: relative; }
.eyebrow {
  color: var(--af-blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.eyebrow.light { color: #b9e7ff; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: 0; }
h1 { font-size: 5rem; line-height: 0.98; margin-bottom: 24px; max-width: 800px; }
h2 { font-size: 2.8rem; line-height: 1.08; margin-bottom: 18px; }
h3 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 10px; }
.hero-lead { color: rgba(255, 255, 255, 0.88); font-size: 1.2rem; line-height: 1.6; margin-bottom: 30px; max-width: 620px; }
.action-stack { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(180px, 1fr)); max-width: 900px; }
.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.button.primary { background: var(--af-blue); color: var(--af-white); }
.button.primary:hover, .button.primary:focus-visible { background: var(--af-blue-dark); outline: none; }
.button.secondary { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.36); color: var(--af-white); }
.button.secondary:hover, .button.secondary:focus-visible { background: rgba(255, 255, 255, 0.22); outline: none; }
.button.outline { background: transparent; border-color: var(--af-blue); color: var(--af-blue-dark); }
.button.outline:hover, .button.outline:focus-visible { background: var(--af-soft-blue); outline: none; }
.action-link { align-items: flex-start; flex-direction: column; gap: 5px; justify-content: center; min-height: 82px; padding: 14px 16px; }
.action-link span { font-size: 0.98rem; }
.action-link small { color: rgba(255, 255, 255, 0.72); font-size: 0.78rem; font-weight: 600; }
.hero-location { border-left: 3px solid var(--af-bright-blue); display: grid; gap: 5px; margin-top: 30px; padding-left: 14px; }
.hero-location span { color: rgba(255, 255, 255, 0.78); }

.content-section { padding: 92px 30px; }
.two-column { align-items: center; display: grid; gap: 70px; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr); }
.supporting-image img { aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; width: 100%; }
.section-copy > p:not(.eyebrow), .page-heading > p:not(.eyebrow), .muted-copy, .blue-band p, .form-heading p {
  color: var(--af-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
.quick-facts { border-top: 1px solid var(--af-line); display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; padding-top: 20px; }
.quick-facts div { display: grid; gap: 6px; }
.quick-facts span { color: var(--af-muted); line-height: 1.45; }
.inline-links, .follow-links { display: flex; flex-wrap: wrap; gap: 18px; }
.text-link { color: var(--af-blue-dark); font-weight: 800; }
.text-link:hover, .text-link:focus-visible { color: var(--af-blue); outline: none; }

.blue-band { background: #0b2d78; color: var(--af-white); }
.blue-band-inner { align-items: center; display: grid; gap: 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); padding: 62px 30px; }
.blue-band h2 { margin-bottom: 0; }
.blue-band p:not(.eyebrow) { color: rgba(255, 255, 255, 0.82); margin-bottom: 22px; }
.light-button { background: var(--af-white); color: var(--af-blue-dark); }
.light-button:hover, .light-button:focus-visible { background: #dff3ff; outline: none; }
.follow-section { align-items: center; display: flex; gap: 32px; justify-content: space-between; }
.follow-section h2 { margin-bottom: 0; }

.rules-section { background: #e9eef8; border-bottom: 1px solid var(--af-line); border-top: 1px solid var(--af-line); }
.rules-inner { padding: 56px 30px; }
.rules-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rule-item { background: #fff; border-left: 4px solid var(--af-blue); border-radius: 6px; padding: 18px; }
.rule-item strong { display: block; margin-bottom: 7px; }
.rule-item p { color: var(--af-muted); font-size: 0.93rem; line-height: 1.5; margin-bottom: 0; }

.page-main { min-height: calc(100vh - 160px); }
.page-heading { background: #0c1018; color: var(--af-white); max-width: none; padding: 92px max(30px, calc((100vw - 1120px) / 2)); }
.page-heading h1 { font-size: 4.2rem; margin-bottom: 18px; }
.page-heading > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.78); margin-bottom: 0; max-width: 700px; }
.gallery-layout { align-items: center; display: grid; gap: 60px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.gallery-buttons { margin-top: 26px; }
.gallery-feature { margin: 0; }
.carousel-frame { background: #10141c; border-radius: 8px; overflow: hidden; position: relative; }
.carousel-slide { display: none; }
.carousel-slide.active { display: block; }
.carousel-slide img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.carousel-control {
  align-items: center;
  background: rgba(9, 11, 16, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: var(--af-white);
  cursor: pointer;
  display: flex;
  font-size: 1.3rem;
  height: 42px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
}
.carousel-control:hover, .carousel-control:focus-visible { background: var(--af-blue); outline: none; }
.carousel-control.previous { left: 14px; }
.carousel-control.next { right: 14px; }
.carousel-caption { align-items: center; color: var(--af-muted); display: flex; font-size: 0.9rem; gap: 16px; justify-content: space-between; margin-top: 10px; }
.carousel-dots { display: flex; gap: 7px; }
.carousel-dots button { background: #c5ccd8; border: 0; border-radius: 50%; cursor: pointer; height: 9px; padding: 0; width: 9px; }
.carousel-dots button.active, .carousel-dots button:hover, .carousel-dots button:focus-visible { background: var(--af-blue); outline: none; }

.contact-layout { align-items: start; display: grid; gap: 62px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.contact-methods { display: grid; gap: 12px; }
.contact-method { background: var(--af-white); border: 1px solid var(--af-line); border-radius: 8px; display: grid; gap: 6px; padding: 18px; }
.contact-method:hover, .contact-method:focus-visible { border-color: var(--af-blue); outline: none; }
.contact-method span { color: var(--af-blue); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.contact-method strong { font-size: 1.3rem; overflow-wrap: anywhere; }
.contact-method small { color: var(--af-muted); }
.whatsapp-method { border-color: #88d8b8; }
.location-block { border-top: 1px solid var(--af-line); margin-top: 30px; padding-top: 28px; }
.location-block p:not(.eyebrow) { color: var(--af-muted); line-height: 1.5; margin-bottom: 6px; }
.location-block .text-link { display: inline-block; margin-top: 14px; }
.contact-form { background: var(--af-white); border: 1px solid var(--af-line); border-radius: 8px; display: grid; gap: 16px; padding: 24px; }
.form-heading { border-bottom: 1px solid var(--af-line); margin-bottom: 4px; padding-bottom: 16px; }
.form-heading h2 { font-size: 2rem; margin-bottom: 10px; }
.form-heading p { margin-bottom: 0; }
.contact-form label { color: var(--af-ink); display: grid; font-size: 0.9rem; font-weight: 800; gap: 8px; }
.contact-form input, .contact-form textarea { background: #fbfcff; border: 1px solid #cbd3df; border-radius: 6px; color: var(--af-ink); min-height: 46px; padding: 10px 12px; width: 100%; }
.contact-form textarea { min-height: 126px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--af-blue); box-shadow: 0 0 0 3px rgba(47, 91, 211, 0.16); outline: none; }
.optional { color: var(--af-muted); font-weight: 600; }
.form-submit { border: 0; margin-top: 4px; width: 100%; }
.form-message { border-radius: 7px; line-height: 1.5; margin: 0 0 22px; padding: 14px 16px; }
.form-message.success { background: #edf8f4; border: 1px solid #b8e5d4; color: #155e42; }
.form-message.error { background: #fff1f1; border: 1px solid #f2bbbb; color: #8b1f1f; }
.website-field { left: -9999px; position: absolute; }

.site-footer { background: #000; color: var(--af-white); }
.site-footer-inner { align-items: center; display: flex; gap: 22px; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 28px 30px; }
.site-footer img { max-width: 190px; }
.site-footer p, .site-footer a { color: rgba(255, 255, 255, 0.78); margin: 0; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--af-white); outline: none; }

.default-page { min-height: 60vh; padding: 72px 30px; }
.default-page .entry-content { line-height: 1.7; max-width: 780px; }

@media (max-width: 980px) {
  body.admin-bar .site-header { top: 46px; }
  .site-header-inner { align-items: flex-start; flex-direction: column; gap: 12px; padding: 12px 20px; }
  .site-nav { justify-content: flex-start; }
  .home-hero { min-height: 700px; }
  .home-hero-content { padding: 120px 20px 80px; }
  h1 { font-size: 3.6rem; }
  h2 { font-size: 2.3rem; }
  .action-stack, .two-column, .blue-band-inner, .gallery-layout, .contact-layout { grid-template-columns: 1fr; }
  .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-section { padding: 72px 20px; }
  .page-heading { padding: 72px 20px; }
  .page-heading h1 { font-size: 3.3rem; }
  .blue-band-inner { gap: 12px; padding: 52px 20px; }
  .follow-section { align-items: flex-start; flex-direction: column; }
  .contact-layout { gap: 34px; }
}

@media (max-width: 620px) {
  .brand { width: 165px; }
  .site-nav a { font-size: 0.86rem; padding: 8px 9px; }
  .site-nav .header-whatsapp { margin-left: 0; }
  h1, .page-heading h1 { font-size: 2.6rem; }
  h2 { font-size: 2rem; }
  .home-hero { min-height: 760px; }
  .home-hero-content { padding: 100px 20px 70px; }
  .hero-lead { font-size: 1.05rem; }
  .action-stack, .quick-facts, .rules-grid { grid-template-columns: 1fr; }
  .action-link { min-height: 72px; }
  .inline-links, .follow-links { align-items: flex-start; flex-direction: column; }
  .follow-links .button, .gallery-buttons .button { width: 100%; }
  .site-footer-inner { align-items: flex-start; flex-direction: column; padding: 26px 20px; }
}