/* 3DML Members theme: the frame for my.3dmusclelab.com. Base, buttons, header, menu and footer are taken from the
   main site's main.css (so both sites look like one), plus the member menu's extras and plain pages.
   Every colour, size and space comes from tokens.css. */

/* 1. Base ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
}

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

a {
  color: var(--color-link);
  text-decoration-color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-white); padding: var(--space-12) var(--space-18); z-index: 100;
}
.skip-link:focus { left: var(--space-12); top: var(--space-12); }

.kicker {
  margin: 0 0 var(--space-12);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-kicker);
}

.dek {
  margin: var(--space-12) 0 0;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-text-muted);
}


/* 2. Layout -------------------------------------------------------------- */

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


/* 3. Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;               /* white on Hazard needs >= 19px bold (3.45:1) */
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.btn--primary { background: var(--color-action); color: var(--color-white); }
.btn--primary:hover { background: var(--color-action-hover); color: var(--color-white); }
.btn--secondary { border: 2px solid var(--color-graphite); color: var(--color-graphite); padding: 0 24px; }
.btn--secondary:hover { background: var(--color-graphite); color: var(--color-white); }
.btn--ghost { border: 2px solid rgba(255,255,255,.7); color: var(--color-white); padding: 0 24px; }
.btn--ghost:hover { background: var(--color-white); color: var(--color-midnight); }
.btn--nav { min-height: var(--tap-min); padding: 0 20px; margin-left: var(--space-12); }
.btn--block { display: flex; width: 100%; margin-top: 10px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-12); }


.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-white);
  border-bottom: var(--border-hair);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter);
  min-height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
}
.site-logo { display: flex; }
.site-logo img { display: block; width: 150px; height: auto; }

.nav--desktop { display: flex; align-items: center; gap: var(--space-6); }
.nav--desktop > a:not(.btn) {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: 10px 12px;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  color: var(--color-text); text-decoration: none;
  white-space: nowrap;
}
.nav--desktop .btn { white-space: nowrap; }
.nav--desktop > a:not(.btn):hover,
.nav--desktop > a[aria-current="page"] { color: var(--color-hazard-deep); }

/* Mobile menu — a native <details>, so it works without JavaScript. White panel, one shadow. */
.nav--mobile { display: none; position: relative; }
.nav--mobile summary {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap-min); padding: 0 6px;
  font-family: var(--font-heading); font-weight: 700; font-size: 16px;
  cursor: pointer; user-select: none; list-style: none;
}
.nav--mobile summary::-webkit-details-marker { display: none; }
.burger { display: inline-flex; flex-direction: column; gap: 5px; width: 22px; }
.burger span { height: 2px; background: var(--color-graphite); }
.nav-mobile__panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(320px, 88vw);
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-12);
  background: var(--color-white);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.nav-mobile__panel > a:not(.btn) {
  display: flex; align-items: center; min-height: var(--tap-min);
  padding: var(--space-12); border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-weight: 600; font-size: 18px;
  color: var(--color-text); text-decoration: none;
}
.nav-mobile__panel > a:not(.btn):hover { background: var(--color-offwhite); }
.nav-mobile__panel > a[aria-current="page"] { color: var(--color-hazard-deep); }

@media (max-width: 960px) {
  .nav--desktop { display: none; }
  .nav--mobile { display: block; }
}
/* 10. Footer ------------------------------------------------------------- */
/* Claude Design's column footer: logo, then link columns, then a thin credit row. */

.site-footer {
  padding: var(--space-48) var(--gutter) var(--space-36);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  font-size: 16px;
}
.site-footer__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-36);
}
.site-footer__brand img { display: block; width: 140px; height: auto; filter: brightness(0) invert(1); }
.site-footer__heading {
  margin: 0 0 var(--space-12);
  font-family: var(--font-heading); font-weight: 700;
  font-size: var(--text-kicker); letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  color: var(--color-kicker-on-dark);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer a { color: var(--color-text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-golden); text-decoration: underline; }
.site-footer__legal {
  max-width: var(--container);
  margin: var(--space-36) auto 0;
  padding-top: var(--space-18);
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: 16px;
  color: var(--color-text-on-dark-muted);
}
.heart { color: var(--color-hazard); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Members additions ---------------------------------------------------------------------------------- */
.site-header__middle { flex: 1; display: flex; justify-content: center; min-width: 0; }
.site-header__middle:empty { display: none; }
.nav-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--color-golden); color: var(--color-midnight); font: 700 12px/1 var(--font-heading); }
.btn--quiet { border: 2px solid var(--color-border-strong); color: var(--color-text); padding: 0 24px; }
.btn--quiet:hover { border-color: var(--color-midnight); color: var(--color-midnight); }
/* The course and member pages bring their own <main> and styles; plain pages use this column. */
main.page { padding: var(--space-48) var(--gutter) var(--space-96, 96px); }   /* main only: WordPress also puts "page" on <body> for real pages (the home page) */
.page__body { max-width: var(--container-narrow); margin: 0 auto; }
.page__body h1 { margin: 0 0 var(--space-24); font-size: var(--text-h2, 36px); }
.page__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); }
.site-footer { margin-top: auto; }
body { min-height: 100vh; display: flex; flex-direction: column; }

/* The header and footer look exactly like the main site's on every page, whatever the page's own styles do
   (the course's stylesheet colours all links orange; these win over it). */
body .site-footer a { color: var(--color-text-on-dark-muted); text-decoration: none; }
body .site-footer a:hover { color: var(--color-golden); text-decoration: underline; }
body .site-footer { font-family: var(--font-body); font-size: 16px; line-height: var(--leading-body); }
body .site-footer .site-footer__heading { color: var(--color-kicker-on-dark); }
body .site-header .nav--desktop > a:not(.btn) { color: var(--color-text); text-decoration: none; }
body .site-header .nav--desktop > a:not(.btn):hover, body .site-header .nav--desktop > a[aria-current="page"] { color: var(--color-hazard-deep); }
body .site-header .btn--primary { color: var(--color-white); }
/* Pages fill the frame (the body is a column so the footer sits at the bottom; without this a centred page
   would shrink to its content). */
body > main, body > .lc-lesson, body > .page { width: 100%; }

/* Cookie consent bar (Europe/UK visitors; inc/analytics.php), same as the main site */
.consent {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--space-18); z-index: 100;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24);
  padding: var(--space-18) var(--space-24);
  background: var(--color-white); border: var(--border-hair); border-top: 4px solid var(--color-golden);
  border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow);
  font-size: var(--text-sm);
}
.consent[hidden] { display: none; }
.consent__text { flex: 1 1 300px; margin: 0; color: var(--color-text); }
.consent__text a { margin-left: 4px; font-weight: 700; }
.consent__buttons { display: flex; gap: var(--space-12); }
.consent .btn { min-height: 40px; padding: 0 18px; font-size: 16px; }