/*
Theme Name: Rhythmarkable Theme
Author: Moust Camara
Description: Block-based boilerplate theme for the Rhythmarkable website. Pages/posts are built from full-width ACF blocks; see inc/block-helpers.php and functions.php for conventions.
Version: 1.0
*/

/*
 * Scope of this file: theme header, resets, and global/base layout
 * (site header, mobile nav drawer, footer, generic page shell).
 * Design tokens live in assets/css/tokens.css.
 * Block styles live in assets/css/blocks.css.
 * Do not add block-specific styles here.
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* No scroll-padding-top offset: the fixed header auto-hides on scroll
     (see .rm-header--hidden / header.js), so it's no longer reliably
     occupying this space when a visitor lands on an anchor — reserving
     room for it would just leave an inconsistent gap above the target. */
  /* Mobile Safari (and other browsers with rubber-band/elastic overscroll)
     paint the <html> element's background — not the body's — in the
     bounce area above the top and below the bottom of the document. Without
     this, that bounce area flashes the browser's default white regardless of
     body's own background, which is what shows up as a white fade at the
     top/bottom edges on iPhone. */
  background: var(--rm-page-background);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--rm-font-family);
  color: var(--rm-text-primary);
  background: var(--rm-page-background) fixed;
  line-height: var(--rm-line-height-body);
  min-height: 100vh;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: var(--rm-line-height-heading);
  /* Explicit (rather than purely inherited) so headings correctly re-resolve
     --rm-text-primary within a .rm-bg--on-light scope (light backgrounds
     flip it to midnight) instead of just inheriting body's already-computed
     colour, which would leave headings invisible on light backgrounds. */
  color: var(--rm-text-primary);
}

/* ---------- Skip link ---------- */
.rm-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--rm-bg-secondary);
  color: var(--rm-text-primary);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--rm-radius) 0;
}
.rm-skip-link:focus {
  left: 0;
}

/* ---------- Page / post shell ---------- */
.rm-page-content,
.rm-single-content {
  min-height: var(--rm-content-min-height, 500px);
}

.rm-flow > * + * {
  margin-top: 0;
}

/* Generic container used by blocks for their inner (non-full-bleed) content.
   Width is controlled by --rm-container, set from Theme Settings. */
.rm-container {
  width: 100%;
  max-width: var(--rm-container);
  margin-inline: auto;
  padding-inline: var(--rm-container-gutter);
}

/* ---------- Site header ---------- */
.rm-header {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--rm-z-header);
  background: var(--rm-bg-secondary);
  transition: background-color var(--rm-duration) var(--rm-ease),
    transform var(--rm-duration) var(--rm-ease);
}

.rm-header--fixed {
  position: fixed;
}

/* Fixed header, non-front-page: the header is out of flow (position:fixed),
   so unlike the front page — which reserves headroom itself via the hero's
   own padding-top — every other page needs that space reserved on the page
   shell instead, or its content/.rm-page-heading renders underneath the
   fixed header. */
.rm-header-fixed-offset .rm-page-content {
  padding-top: var(--rm-header-height);
}

/* Sitewide auto-hide: slide the fixed header out of view when scrolling
   down, slide it back in on scroll-up (or near the top). Transform-only so
   it stays compositor-friendly. */
.rm-header--hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .rm-header {
    transition: background-color var(--rm-duration) var(--rm-ease);
  }
}

/* Transparent overlay header: used only on the front page when enabled in
   Theme Settings, so it can float over the hero's full-height media. Once
   the visitor scrolls past the threshold, .rm-header--scrolled takes over
   and forces the solid background regardless of this setting. */
.rm-header--transparent {
  background: transparent;
  border-bottom-color: transparent;
}

.rm-header--transparent.rm-header--scrolled {
  background: var(--rm-bg-secondary);
  border-bottom-color: transparent;
}

.rm-header__inner {
  max-width: var(--rm-container);
  margin-inline: auto;
  padding-inline: var(--rm-container-gutter);
  height: var(--rm-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-md);
}

.rm-header__logo {
  display: flex;
  align-items: center;
}

.rm-header__logo img {
  height: auto;
  width: auto;
  max-height: 2.75rem;
  max-width: none;
  object-fit: contain;
}

.rm-header__logo--dark {
  display: none;
}

.rm-header__nav {
  display: none;
}

.rm-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--rm-space-2xl);
  font-size: var(--rm-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Nav links: CTA-style (no underline at rest), with a subtle left-to-right
   line reveal on hover. Current page keeps the line visible. */
.rm-header__nav-list a {
  position: relative;
  display: inline-block;
  padding-bottom: var(--rm-button-padding-bottom);
  color: var(--rm-text-primary);
}

.rm-header__nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--rm-button-underline-width);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--rm-duration-fast) var(--rm-ease);
}

.rm-header__nav-list a:hover::after {
  transform: scaleX(1);
}

.rm-header__nav-list .current-menu-item > a::after,
.rm-header__nav-list .current-menu-ancestor > a::after,
.rm-header__nav-list .current_page_item > a::after,
.rm-header__nav-list .current_page_ancestor > a::after,
.rm-header__nav-list a[aria-current='page']::after {
  transform: scaleX(1);
}

/* "End button" treatment (same idea as Bootstrap/MUI icon buttons): the
   tap target stays a comfortable 2.5rem box, but a negative inline margin
   pulls the icon flush with the container edge so it reads as visually
   aligned with the logo on the opposite side. */
.rm-nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-inline-end: -0.5rem;
  background: transparent;
  border: none;
  color: var(--rm-text-primary);
  /* Stays above the full-screen sleeve (see .rm-mobile-nav) so it remains
     visible/clickable while open — inherited z-index context comes from
     .rm-header, bumped above --rm-z-nav-drawer in tokens.css. */
  z-index: 1;
}

/* Custom hamburger \u2192 X: three hand-drawn <line> elements (rather than an
   icon font/preset) so each one can be independently transformed. Thinner
   stroke (1.5 vs. the usual 2) for a slightly more refined mark. Keyed off
   the button's own aria-expanded state, which the open/close JS already
   keeps in sync \u2014 no extra class needed. Transform-origin is the visual
   centre of each line (12, its y-position) so the rotate reads as a clean
   pivot rather than swinging from a corner. */
.rm-nav-toggle__icon {
  overflow: visible;
}

.rm-nav-toggle__line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--rm-duration) var(--rm-ease),
    opacity var(--rm-duration) var(--rm-ease);
}

.rm-nav-toggle[aria-expanded='true'] .rm-nav-toggle__line--top {
  transform: translateY(5px) rotate(45deg);
}

.rm-nav-toggle[aria-expanded='true'] .rm-nav-toggle__line--middle {
  opacity: 0;
  transform: scaleX(0);
}

.rm-nav-toggle[aria-expanded='true'] .rm-nav-toggle__line--bottom {
  transform: translateY(-5px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .rm-nav-toggle__line {
    transition: none;
  }
}

@media (min-width: 64rem) {
  .rm-header__nav {
    display: block;
  }
  .rm-nav-toggle {
    display: none;
  }
}

/* ---------- Mobile nav sleeve ----------
   A full-screen overlay that slides in from the right like a sleeve
   covering the viewport (rather than a narrow docked drawer), fading the
   nav links in slightly after the slide begins so the reveal feels like
   one graceful gesture rather than two separate motions. The header
   (logo + toggle) sits above it via z-index so both stay usable while
   it's open. */
.rm-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--rm-bg-secondary);
  z-index: var(--rm-z-nav-drawer);
  padding: var(--rm-space-lg) var(--rm-space-md);
  padding-top: calc(var(--rm-header-height) + var(--rm-space-md));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateX(0%);
  /* The opacity fade uses the sitewide ease-out (--rm-ease), but the slide
     gets its own slightly longer duration and a true ease-in-out curve
     (slow start AND finish) — --rm-ease front-loads movement, which on a
     short distance like this reads as a quick snap that finishes well
     before the fade does. Ease-in-out spreads the motion evenly across the
     whole duration so it reads as one unhurried, graceful glide instead. */
  transition: opacity var(--rm-duration-slow) var(--rm-ease),
    transform calc(var(--rm-duration-slow) * 1.3) cubic-bezier(0.45, 0, 0.2, 1);
  /* Keeps the sleeve out of the way (and un-clickable) at rest, since
     opacity/transform alone don't remove it from hit-testing or a11y. */
  pointer-events: none;
}

.rm-mobile-nav.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.rm-mobile-nav__list {
  margin-top: var(--rm-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-lg);
  font-size: var(--rm-font-size-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Same CTA-style link treatment as the desktop nav (see
   .rm-header__nav-list a) for visual parity between breakpoints. */
.rm-mobile-nav__list a {
  position: relative;
  display: inline-block;
  padding-bottom: var(--rm-button-padding-bottom);
  color: var(--rm-text-primary);
}

.rm-mobile-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--rm-button-underline-width);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--rm-duration-fast) var(--rm-ease);
}

.rm-mobile-nav__list a:hover::after,
.rm-mobile-nav__list .current-menu-item > a::after,
.rm-mobile-nav__list .current-menu-ancestor > a::after,
.rm-mobile-nav__list .current_page_item > a::after,
.rm-mobile-nav__list .current_page_ancestor > a::after,
.rm-mobile-nav__list a[aria-current='page']::after {
  transform: scaleX(1);
}

/* Links fade + drift in just after the sleeve starts sliding, each one
   staggered slightly later than the last, so the list reads as settling
   into place rather than appearing all at once. Reverses instantly on
   close (no transition-delay) so the menu never feels sluggish to
   dismiss. */
.rm-mobile-nav__list li {
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity var(--rm-duration) var(--rm-ease),
    transform var(--rm-duration) var(--rm-ease);
}

.rm-mobile-nav.is-open .rm-mobile-nav__list li {
  opacity: 1;
  transform: translateX(0);
}

.rm-mobile-nav.is-open .rm-mobile-nav__list li:nth-child(1) { transition-delay: 0.1s; }
.rm-mobile-nav.is-open .rm-mobile-nav__list li:nth-child(2) { transition-delay: 0.15s; }
.rm-mobile-nav.is-open .rm-mobile-nav__list li:nth-child(3) { transition-delay: 0.2s; }
.rm-mobile-nav.is-open .rm-mobile-nav__list li:nth-child(4) { transition-delay: 0.25s; }
.rm-mobile-nav.is-open .rm-mobile-nav__list li:nth-child(5) { transition-delay: 0.3s; }
.rm-mobile-nav.is-open .rm-mobile-nav__list li:nth-child(6) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .rm-mobile-nav,
  .rm-mobile-nav__list li {
    transition: opacity var(--rm-duration-fast) linear;
    transform: none;
  }
  .rm-mobile-nav {
    transform: none;
  }
}

/* While the sleeve is open, fade the page's own content out slightly so
   the overlay's fade-in reads as a single combined gesture rather than an
   opaque panel just appearing on top. Scoped to #main-content/.rm-footer
   only — not .rm-header — so the logo and the X icon stay fully visible
   and usable above the sleeve. */
body.rm-menu-open #main-content,
body.rm-menu-open .rm-single-content,
body.rm-menu-open .rm-footer {
  opacity: 0.25;
  transition: opacity var(--rm-duration-slow) var(--rm-ease);
}

@media (prefers-reduced-motion: reduce) {
  body.rm-menu-open #main-content,
  body.rm-menu-open .rm-single-content,
  body.rm-menu-open .rm-footer {
    transition: opacity var(--rm-duration-fast) linear;
  }
}

/* ---------- Footer ---------- */
.rm-footer {
  background: var(--rm-bg-secondary);
  padding-block: var(--rm-space-xl);
}

.rm-footer__inner {
  max-width: var(--rm-container);
  margin-inline: auto;
  padding-inline: var(--rm-container-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-md);
}

.rm-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--rm-space-sm);
}

.rm-footer__logo img {
  height: auto;
  width: auto;
  max-height: 2rem;
  max-width: none;
  object-fit: contain;
}

.rm-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-md);
  font-size: var(--rm-font-size-sm);
}

.rm-footer__social {
  display: flex;
  gap: var(--rm-space-sm);
}

.rm-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--rm-surface-subtle);
}

.rm-footer__bottom {
  margin-top: var(--rm-space-lg);
  padding-top: var(--rm-space-md);
  border-top: 1px solid var(--rm-border);
  text-align: center;
  font-size: var(--rm-font-size-sm);
  color: var(--rm-text-tertiary);
}