@layer reset, tokens, base, components;

@import url("./reset.css") layer(reset);
@import url("./tokens.css") layer(tokens);
@import url("./base.css") layer(base);
@import url("./components/button.css") layer(components);
@import url("./components/header.css") layer(components);
@import url("./components/footer.css") layer(components);
@import url("./components/stats.css") layer(components);
@import url("./components/why-eagle-fitness.css") layer(components);
@import url("./components/amenities.css") layer(components);
@import url("./components/heatmap.css") layer(components);
@import url("./components/24-7.css") layer(components);
@import url("./components/modal.css") layer(components);


/* ===== Global Styles ===== */
html, body {
  height: 100%;
}

body {
  margin: 0;
  /*padding-top: var(--header-height); /* Account for fixed header */
}

/* Full-page background layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../img/bg-rubber.jpg");
  background-size: auto;
  background-position: top left;
  background-repeat: repeat;
  z-index: -1;
}

/* ===== Section Headers ===== */
.section-header {
  padding: 30px 20px 20px;
  max-width: var(--container-max);
}

.gold-line {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--c-accent-line),
    transparent
  );
  opacity: 0.9;
  flex-grow: 1;
}

.silver-line {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--c-border),
    transparent
  );
  opacity: 0.9;
  flex-grow: 1;
}

.gold-text {
  color: var(--c-accent);
}

/* ===== Layout Utilities ===== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.content-wrapper {
  width: 100%;
  max-width: var(--container-max);
  margin: auto;
}

.standard-page {
  padding-top: 130px;
}

.standard-page h2 {
  padding-bottom: 15px;
}

.standard-page p {
  padding: 0 0 var(--space-md);
}

.section-padding {
  padding: var(--space-xl) 0;
}

.section-padding-top {
  padding: var(--space-xl) 0 0;
}

.section-padding-bottom {
  padding: 0 0 var(--space-xl);
}

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

p.small {
  font-size: small;
}

ul,ol {
  list-style-position: outside; 
}

ul.gold-check li {
  display: flex;
  list-style: none;
  list-style-position: inside; 
}

ul.gold-check li::before {
  display: block;
  content: '\2714'; 
  color: var(--c-accent);
  margin-right: 0.5em; 
  vertical-align: middle;
}

@media (max-width: 640px) {
  ul.gold-check {
    padding-left: 10px;
  }
}