/* =========================================================
   Bohemian Fitness — Bootstrap-Native Theme
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");

:root {
  /* Brand palette */
  --brand-teal: #1E3B4D;
  --brand-teal-700: #162b39;
  --brand-amber: #EFA71A;
  --brand-amber-200: #f2c36a;

  /* Text & surfaces */
  --page-bg: #162b39;
  --text-dark: #0f1418;
  --text-light: #f4f6f8;
  --border: #d8e0e7;

  --heading-font: "Andale Mono", "Space Mono", ui-monospace, SFMono-Regular,
                  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ------------------ Base ------------------ */
body {
  background: var(--page-bg);
  color: var(--text-dark);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Headings inherit colour so they switch on dark/image sections */
h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
  font-family: var(--heading-font);
  letter-spacing: .02em;
  line-height: 1.15;
  color: inherit; /* was var(--text-dark) */
}

a { color: var(--brand-amber); text-decoration: none; }
a:hover { color: var(--brand-amber-200); }

/* ------------------ Header ------------------ */
.site-header {
  background: var(--brand-teal);
  color: var(--text-light);
  padding-block: .75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.brand-logo { height: 48px; }
.site-header .nav-link {
  color: var(--text-light);
  font-weight: 500;
}
.site-header .nav-link:hover { color: var(--brand-amber-200); }

/* Emphasised CTA */
.nav-link.nav-cta {
  background: var(--brand-amber);
  color: #1a2430 !important;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(239,167,26,.25);
}
.nav-link.nav-cta:hover { background: #cc8f16; }

/* Nav Re-Styled */
.navbar { background: var(--brand-teal); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.navbar .nav-link { padding: .5rem .75rem; font-weight: 600; }
.navbar .dropdown-menu-dark { --bs-dropdown-link-active-bg: var(--brand-teal-700); }

/* Keep nav above hero overlays and content */
.navbar { position: relative; z-index: 1100; }
/* Ensure gradient overlays never catch clicks */
.section--image::before { pointer-events: none; }
/* Dropdowns above everything else */
.dropdown-menu { z-index: 1200; }


/* ------------------ Sections ------------------ */
.section {
  padding-block: clamp(2rem,4vw,5rem);
}

/* DARK section: flip text + links + muted for contrast */
.section--dark {
  background: var(--brand-teal-700);
  color: var(--text-light);
}
.section--dark a { color: var(--brand-amber-200); }
.section--dark a:hover { color: var(--brand-amber); }
.section--dark .lead { color: rgba(255,255,255,.78); }
.section--dark .text-muted {
  color: var(--brand-amber-200);
}


/* IMAGE / GRADIENT section: same contrast behaviour */
.section--image {
  background-size: cover;
  background-position: center;
  color: var(--text-light);
  position: relative;
}
.section--image::before {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55));
}
.section--image > * { position:relative; z-index:1; }
.section--image a { color: var(--brand-amber-200); }
.section--image a:hover { color: var(--brand-amber); }
.section--image .text-muted,
.section--image .lead { color: rgba(255,255,255,.8); }

/* LIGHT section (explicit reset if needed) */
.section--light {
  background: #ffffff;
  color: var(--text-dark);
}
.section--light .text-muted,
.section--light .lead { color: var(--brand-amber-200) }
.section--light a { color: var(--brand-amber); }
.section--light a:hover { color: var(--brand-amber-200); }

.container--wide {
  max-width: 1100px;
}

.container--narrow {
  max-width: 860px;
}

/* Quick utilities for edge cases */
.on-dark  { color: var(--text-light) !important; }
.on-dark .text-muted { color: rgba(255,255,255,.75) !important; }
.on-dark a { color: var(--brand-amber-200) !important; }
.on-dark a:hover { color: var(--brand-amber) !important; }

.on-light { color: var(--text-dark) !important; }
.on-light .text-muted { color: #5a6a76 !important; }
.on-light a { color: var(--brand-amber) !important; }
.on-light a:hover { color: var(--brand-amber-200) !important; }

/* ------------------ Buttons ------------------ */
.btn-primary {
  background: var(--brand-amber);
  border-color: var(--brand-amber);
  color: #1a2430;
}
.btn-primary:hover { background: #cc8f16; border-color:#cc8f16; }

.btn-outline-secondary {
  color: var(--brand-teal);
  border-color: var(--brand-teal);
}
.btn-outline-secondary:hover {
  color: #fff;
  background: var(--brand-teal);
  border-color: var(--brand-teal);
}

/* ------------------ Footer ------------------ */
.site-footer {
  background: var(--brand-teal);
  color: var(--text-light);
  padding-block: 2rem;
  padding: 0;
}
.site-footer a { color: var(--brand-amber); }
.site-footer a:hover { color: var(--brand-amber-200); }

.footer-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}