/* ==========================================================================
   Full Throttle Boxing — modern boxing-gym theme
   ========================================================================== */

/* ---- tokens ---- */
:root {
  --color-bg: #0a0a0b;
  --color-bg-alt: #141416;
  --color-bg-card: #1a1a1d;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text: #f2f1ee;
  --color-text-muted: #b7b6b3;
  --color-text-dim: #85847f;

  --color-red: #e21b2c;
  --color-red-dark: #a3111e;
  --color-red-glow: rgba(226, 27, 44, 0.35);
  --color-gold: #e8b33d;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-h: 84px;
  --header-h-mobile: 64px;

  --container-max: 1200px;
  --radius: 6px;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- font awesome (subset actually used by this site) ---- */
@font-face {
  font-family: "FontAwesome";
  src: url("/assets/fonts/fontawesome-webfont.woff2") format("woff2"),
    url("/assets/fonts/fontawesome-webfont.woff") format("woff"),
    url("/assets/fonts/fontawesome-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.fa {
  display: inline-block;
  font: normal normal normal 1em/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-heartbeat::before {
  content: "\f21e";
}
.fa-group::before {
  content: "\f0c0";
}
.fa-flash::before {
  content: "\f0e7";
}
.fa-wrench::before {
  content: "\f0ad";
}
.fa-phone::before {
  content: "\f095";
}
.fa-mobile::before {
  content: "\f10b";
  font-size: 1.3em;
}
.fa-envelope::before {
  content: "\f0e0";
}
.fa-facebook::before {
  content: "\f09a";
}
.fa-instagram::before {
  content: "\f16d";
}
.fa-map-marker::before {
  content: "\f041";
}

/* ---- reset / base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--color-red);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: var(--color-gold);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: 0.03em;
}

p {
  margin: 0 0 1.1em;
  color: var(--color-text-muted);
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
  color: var(--color-text-muted);
}

li {
  margin-bottom: 0.4em;
}

strong {
  color: var(--color-text);
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* ---- grid ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.container-fluid {
  width: 100%;
  padding-inline: 1.5rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -0.75rem;
}

[class^="col-"],
[class*=" col-"] {
  width: 100%;
  padding-inline: 0.75rem;
}

.col-12 {
  width: 100%;
}

@media (min-width: 768px) {
  .col-md-6 {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .col-lg-2 {
    width: 16.6667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.3333%;
  }
  .col-lg-5 {
    width: 41.6667%;
  }
  .col-lg-10 {
    width: 83.3333%;
  }
  .order-lg-first {
    order: -1;
  }
  .order-lg-last {
    order: 1;
  }
}

/* .content.row in the base layout is a structural wrapper (single child:
   .main), not a 12-col grid row — it must fill the viewport, not shrink
   to fit like a flex item does by default. */
.main {
  width: 100%;
  min-width: 0;
}

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

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

/* ---- header / nav ----
   Fixed overlay that floats transparently over each page's hero photo.
   A soft top scrim keeps the nav legible against bright photos even
   before scrolling; theme.js adds .scrolled once past the hero so the
   bar becomes solid over plain content. The logo is intentionally
   larger than the nav row and absolutely positioned so it can bleed
   down past the bar into the hero image instead of being boxed in. */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h-mobile);
  display: flex;
  align-items: center;
  /* Horizontal, not vertical: a top-to-bottom scrim here would also darken
     the logo, which sits in this same fixed strip on the left. Keep the
     left clear for the logo's true colors and only darken behind the nav
     links/hamburger on the right where the legibility scrim is needed. */
  background: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0.65) 100%);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.main-header.scrolled {
  background: rgba(10, 10, 11, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--color-border);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

@media (min-width: 992px) {
  .main-header {
    height: var(--header-h);
  }
}

.main-header .container {
  width: 100%;
}

.nav-primary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.menu-primary-navigation-container {
  order: 3;
}

#menu-primary-navigation.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item a {
  display: block;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5em 0;
  position: relative;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.menu-item a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--color-red);
  transition: right 0.25s var(--ease);
}

.menu-item a:hover,
.menu-item a:hover::after {
  color: var(--color-text);
}

.menu-item a:hover::after {
  right: 0;
}

.menu-item.current-menu-item a {
  color: var(--color-red);
}

.menu-item.current-menu-item a::after {
  right: 0;
}

.hamburger {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 8px;
  z-index: 2;
}

.hamburger-box {
  width: 26px;
  height: 18px;
  position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), top 0.25s var(--ease);
}

.hamburger-inner {
  top: 8px;
}

.hamburger-inner::before {
  content: "";
  top: -8px;
}

.hamburger-inner::after {
  content: "";
  top: 8px;
}

.hamburger.is-active .hamburger-inner {
  transform: rotate(45deg);
}

.hamburger.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.hamburger.is-active .hamburger-inner::after {
  top: 0;
  transform: rotate(-90deg);
}

@media (min-width: 992px) {
  .hamburger {
    display: none;
  }

  .menu-primary-navigation-container {
    order: 2;
  }

  #menu-primary-navigation.nav {
    flex-direction: row;
    gap: 2.25rem;
  }
}

@media (max-width: 991.98px) {
  #menu-primary-navigation.nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 85vw);
    height: 100vh;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--color-bg-alt);
    border-left: 1px solid var(--color-border);
    padding: calc(var(--header-h-mobile) + 2rem) 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    box-shadow: -20px 0 40px rgba(0, 0, 0, 0.5);
  }

  #menu-primary-navigation.nav.opened {
    transform: translateX(0);
  }

  .menu-item a {
    font-size: 1.4rem;
    padding: 0.55em 0;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ---- sections ---- */
.section {
  position: relative;
}

.content-area,
.services,
.staff-members,
.gallery,
.contact-form,
.icons {
  padding-block: 3.5rem;
}

@media (min-width: 992px) {
  .content-area,
  .services,
  .staff-members,
  .gallery,
  .contact-form,
  .icons {
    padding-block: 5.5rem;
  }
}

.content-area h2,
.services h2,
.icons h2,
.contact-form h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5em;
  margin-bottom: 0.9em;
}

.content-area h2::after,
.services h2::after,
.icons h2::after,
.contact-form h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--color-red);
  transform: translateX(-50%);
}

.text-left h2::after {
  left: 0;
  transform: none;
}

.content-area .container > .row > .col-12 > p,
.content-area p {
  max-width: 760px;
  margin-inline: auto;
}

.text-left p,
.text-left ul {
  max-width: none;
  margin-inline: 0;
}

/* alternate section background for rhythm */
.content-area:nth-of-type(even) {
  background: var(--color-bg-alt);
}

/* ---- hero / banner ---- */
.large-banner,
.banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.large-banner {
  min-height: 78vh;
}

.banner {
  min-height: 38vh;
}

@media (min-width: 768px) {
  .banner {
    min-height: 48vh;
  }
}

.large-banner .bg,
.banner .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.large-banner::before,
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 11, 0.35) 0%,
    rgba(10, 10, 11, 0.55) 55%,
    rgba(10, 10, 11, 0.95) 100%
  );
}

.large-banner::after,
.banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-red) 0 28px,
    transparent 28px 40px
  );
  opacity: 0.9;
}

/* Layer order inside the hero, bottom to top: photo (.bg, z0) < dark
   scrim (::before, z1) < hero-logo (z1, painted after the scrim so it
   reads on top of it) < heading text (z2) < the fixed nav bar (z100,
   a separate element entirely, always on top). Sits flush to the true
   left edge of the hero — not the centered .container — and scrolls
   away with the hero since it isn't part of the persistent nav chrome. */
.hero-logo {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1;
  width: 92px;
  height: 103px;
}

@media (min-width: 992px) {
  .hero-logo {
    top: 1.75rem;
    left: 1.75rem;
    width: 140px;
    height: 156px;
  }
}

.hero-logo .bg {
  width: 100%;
  height: 100%;
  /* The source mark is already white with dark line detail, made for a dark
     background — no color filter needed, just a drop-shadow for lift. */
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
  background-size: contain !important;
  opacity: 1;
}

.large-banner h1,
.banner h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 2rem 0 3.25rem;
  text-align: center;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.large-banner .eyebrow {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: var(--color-gold);
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  margin: 0;
  padding-bottom: 0.75rem;
}

/* ---- services ---- */
.services .row.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-inline: 0;
}

@media (min-width: 768px) {
  .services .row.services {
    grid-template-columns: repeat(2, 1fr);
  }
}

.services .service {
  width: auto;
  padding-inline: 0;
}

.service {
  display: flex;
  gap: 1.25rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  height: 100%;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.service:hover {
  transform: translateY(-4px);
  border-color: var(--color-red);
  box-shadow: var(--shadow-card);
}

.service .icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(226, 27, 44, 0.12);
  color: var(--color-red);
  font-size: 1.4rem;
}

.service .content h3 {
  margin-bottom: 0.4em;
}

.service .content p {
  margin: 0;
  max-width: none;
}

/* ---- staff / about ---- */
.staff-members .container-fluid {
  border-top: 1px solid var(--color-border);
  padding-block: 3rem;
}

.staff-members .container-fluid:first-child {
  border-top: 0;
  padding-top: 0;
}

.profile-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background-color: var(--color-bg-alt);
  background-position: center;
  background-size: cover;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border);
}

@media (min-width: 992px) {
  .profile-photo {
    margin-bottom: 0;
  }
}

.staff-members h3 {
  color: var(--color-red);
  margin-bottom: 0.6em;
}

.staff-members .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.staff-members .nav-link {
  display: inline-block;
  padding: 0.45em 1.1em;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
}

.staff-members .nav-link:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.staff-members .nav-link.active {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.facts,
.tips {
  padding-left: 1.1em;
}

.facts li,
.tips li {
  color: var(--color-text-muted);
}

.facts li::marker,
.tips li::marker {
  color: var(--color-red);
}

/* ---- timetable ---- */
.print-table {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  padding: 0.55em 1.4em;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 2rem;
  transition: all 0.2s var(--ease);
}

.print-table:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  margin: 0 0 1.5rem;
}

table.timetable.table-responsive {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.timetable td {
  padding: 0.85em 1em;
  font-size: 0.9rem;
  white-space: nowrap;
}

table.timetable td.heading {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  background: transparent;
  font-size: 0.75rem;
}

table.timetable tr:first-child td.heading {
  color: var(--color-text);
  border-bottom: 2px solid var(--color-red);
  padding-bottom: 0.6em;
}

td.standard {
  border-radius: var(--radius);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  min-width: 130px;
  color: var(--color-text-muted);
}

td.standard:empty {
  background: transparent;
  border-color: transparent;
  border-left-color: transparent;
}

td.greenBox {
  border-left-color: #35c98f;
  background: rgba(53, 201, 143, 0.08);
}

td.lightBlueBox {
  border-left-color: #3ea9e0;
  background: rgba(62, 169, 224, 0.08);
}

td.yellowBox {
  border-left-color: var(--color-gold);
  background: rgba(232, 179, 61, 0.08);
}

td.redBox {
  border-left-color: var(--color-red);
  background: rgba(226, 27, 44, 0.1);
}

td.purpleBox {
  border-left-color: #a677e8;
  background: rgba(166, 119, 232, 0.08);
}

td.greyBox {
  border-left-color: #9a9a9e;
  background: rgba(154, 154, 158, 0.08);
}

.descriptionsRow {
  padding: 1.5rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.descriptionsRow strong {
  color: var(--color-red);
}

.singleBorder {
  line-height: 1.9;
}

/* ---- gallery ---- */
#gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) {
  #gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 992px) {
  #gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.photo-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.photo-wrapper .bg {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform 0.4s var(--ease);
}

.photo-wrapper:hover .bg {
  transform: scale(1.06);
}

.gallery .container:has(button) {
  margin-top: 2rem;
}

.gallery button {
  background: var(--color-red);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.7em 2em;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: background 0.2s var(--ease);
}

.gallery button:hover {
  background: var(--color-red-dark);
}

/* ---- icons / contact tiles ---- */
.icons .row {
  gap: 1.5rem 0;
  justify-content: center;
}

.icons .col-12.col-md-6.col-lg-4 > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.75rem 1rem;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  color: var(--color-text);
  transition: all 0.2s var(--ease);
}

.icons .col-12.col-md-6.col-lg-4 > a:hover {
  border-color: var(--color-red);
  color: var(--color-red);
  transform: translateY(-3px);
}

.icons .fa {
  font-size: 1.6rem;
  color: var(--color-red);
}

.icons p {
  margin: 0;
  color: inherit;
  font-size: 0.95rem;
}

/* ---- google map ---- */
.google-map {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.map-embed {
  display: block;
  filter: grayscale(65%) invert(92%) contrast(90%);
}

/* ---- contact form ---- */
.contact-form form {
  max-width: 640px;
  margin-inline: auto;
  text-align: left;
}

.contact-form label {
  display: block;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-text-dim);
  margin-bottom: 1.25rem;
}

.wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.5rem;
}

.wpcf7-form-control {
  width: 100%;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 1em;
  transition: border-color 0.2s var(--ease);
}

.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--color-red);
}

textarea.wpcf7-form-control {
  resize: vertical;
  min-height: 140px;
}

.wpcf7-submit {
  width: auto;
  background: var(--color-red);
  border: 0;
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75em 2.5em;
  border-radius: 999px;
  transition: background 0.2s var(--ease);
}

.wpcf7-submit:hover {
  background: var(--color-red-dark);
}

.form-response {
  min-height: 1.5em;
  color: var(--color-gold);
  font-weight: 600;
}

/* ---- give-back year headings ---- */
.year-heading {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.4rem;
  color: var(--color-red);
  margin-top: 1.75rem;
}

/* ---- footer ---- */
.content-info {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-block: 3.5rem 1.5rem;
  margin-top: 2rem;
}

.content-info h3 {
  font-size: 1.1rem;
  color: var(--color-text);
}

.content-info a h3 {
  color: var(--color-red);
}

.content-info p {
  color: var(--color-text-muted);
  max-width: none;
}

.content-info img {
  max-width: 160px;
}

.copyrights {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.copyrights p {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  margin: 0;
}

/* ---- lazyload / animation helpers ---- */
.bg {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.bg.fadeIn,
.bg.loaded,
.bg[style*="background"] {
  opacity: 1;
}