/*
Theme Name: Madam Amsterdam
Theme URI: https://madamamsterdam.nl
Author: Madam Amsterdam
Description: Custom theme voor Madam Amsterdam — cinematic, dark, high-end. Built with ACF blocks.
Version: 1.31.0
Text Domain: madamamsterdam
*/

/* === FONTS === */
@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/helveticaneuebold.woff2') format('woff2'),
       url('fonts/helveticaneuebold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === DESIGN TOKENS === */
:root {
  --ma-bg:        #000;
  --ma-bg-2:      #0a0a0a;
  --ma-surface:   #121212;
  --ma-text:      #f3ede2;
  --ma-text-2:    rgba(243, 237, 226, 0.65);
  --ma-text-3:    rgba(243, 237, 226, 0.32);
  --ma-border:    rgba(243, 237, 226, 0.10);
  /* Accent — instelbaar in WP admin → Madam Site-info → Huisstijl
     (wp_head overschrijft deze fallbacks met de gekozen kleur) */
  --ma-accent:        #c026d3;
  --ma-accent-deep:   #9d1fad;
  --ma-accent-darker: #7d1989;

  /* Global frame width — used by fixed decor (cross, strip, vert) site-wide */
  --frame-w-h: clamp(50px, 6.5vw, 90px);

  --ma-font-display: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ma-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --ma-font-mono:    'Space Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  --ma-ease:    cubic-bezier(.7, 0, .2, 1);
  --ma-ease-2:  cubic-bezier(.16, 1, .3, 1);
  --ma-dur:     .9s;
  --ma-dur-2:   1.4s;

  --ma-pad:     clamp(1.25rem, 4vw, 3rem);

  /* Uppercase microlabel tracking — one voice across all pages */
  --ma-ls-label:      .22em;   /* eyebrows, fact labels, section labels */
  --ma-ls-label-wide: .26em;   /* decorative strips + vertical accents only */
}

/* === SELECTION — accent highlight === */
::selection      { background: var(--ma-accent); color: #fff; }
::-moz-selection { background: var(--ma-accent); color: #fff; }

/* === PRELOADER === */
.ma-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ma-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  pointer-events: none;
}
.ma-loader__logo {
  width: clamp(90px, 14vw, 160px);
  height: auto;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  animation: ma-loader-logo 700ms cubic-bezier(.16, 1, .3, 1) 100ms forwards;
}
.ma-loader__progress {
  width: clamp(140px, 20vw, 240px);
  height: 1px;
  background: rgba(243, 237, 226, .14);
  overflow: hidden;
  opacity: 0;
  animation: ma-loader-fade 400ms ease-out 500ms forwards;
}
.ma-loader__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ma-accent);
  animation: ma-loader-bar 1300ms cubic-bezier(.7, 0, .2, 1) 600ms forwards;
}
.ma-loader__label {
  font-family: var(--ma-font-body);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(243, 237, 226, .55);
  margin: 0;
  padding-left: .42em;             /* compensate trailing letter-spacing */
  opacity: 0;
  transform: translateY(6px);
  animation: ma-loader-fade 500ms cubic-bezier(.16, 1, .3, 1) 800ms forwards;
}
.ma-loader.is-leaving {
  animation: ma-loader-out 700ms cubic-bezier(.7, 0, .2, 1) forwards;
}
.ma-loader.is-done { display: none; }

@keyframes ma-loader-logo {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ma-loader-fade {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ma-loader-bar {
  to { width: 100%; }
}
@keyframes ma-loader-out {
  0%   { opacity: 1; transform: translateY(0); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ma-loader { display: none; }
}

/* "Pre-selected" highlight — graphic accent for chosen words/phrases (use sparingly) */
.ma-highlight {
  background: var(--ma-accent);
  color: #fff;
  padding: 0 .14em;
  margin: 0 -.06em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  /* Reserve scrollbar space on every page so .ma-topbar lines up identically on home + detail.
     Without this, scrolling pages push the right edge inward by ~15px relative to scroll-locked pages. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--ma-font-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ma-text);
  background: var(--ma-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* === FOCUS — visible keyboard focus everywhere (hover has no keyboard equivalent) === */
:focus-visible {
  outline: 2px solid var(--ma-accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* Components that clip outlines (overflow:hidden / clip-path) get an inside ring */
.ma-menu__list a:focus-visible,
.ma-menu__cta:focus-visible,
.ma-choice:focus-visible {
  outline-offset: -2px;
}
.ma-cta:focus-visible,
.ma-panel__enter:focus-visible,
.ma-corner__cta:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ma-accent);
}

/* === TOUCH — feedback within the tap (90% of visitors are on phones) === */
a, button { -webkit-tap-highlight-color: transparent; }
.ma-cta:active,
.ma-ed__cta:active,
.ma-menu__cta:active,
.ma-chat-btn:active,
.ma-choice:active,
.ma-panel__enter:active {
  transform: scale(.97);
  transition-duration: .15s;
}
@media (prefers-reduced-motion: reduce) {
  .ma-cta:active, .ma-ed__cta:active, .ma-menu__cta:active,
  .ma-chat-btn:active, .ma-choice:active, .ma-panel__enter:active { transform: none; }
}