/* ============================================================
   Murrlichtspiele — SHARED DESIGN TOKENS
   The single source of truth both the THEME and the PLUGIN read.
   In the block theme these are mirrored in theme.json (for the
   editor UI); this :root block guarantees the same values are
   available as CSS variables everywhere, incl. the plugin block.
   ============================================================ */
:root{
  --ml-ink:#06070d;      /* footer bg, strong text */
  --ml-navy:#194561;     /* PRIMARY — headlines, rules, dark ribbons, primary buttons */
  --ml-blue:#96c2e2;     /* core/hero field, secondary accents */
  --ml-mist:#ecebf0;     /* page / paper background */
  --ml-grey:#87868b;     /* muted labels, meta */
  --ml-orange:#d4512e;   /* accent — CTAs, Film der Woche, active nav */
  --ml-white:#ffffff;    /* cards, poster mounts */
  --ml-desk:#d9dbe0;     /* canvas behind the container */

  --ml-font-display:"Libre Caslon Display",Georgia,serif;
  --ml-font-body:"Newsreader",Georgia,serif;
  --ml-font-ui:"Archivo",system-ui,sans-serif;

  --ml-pad-x:56px;
  --ml-radius:2px;
  --ml-hairline:1px solid rgba(25,69,97,.18);
}

/* ============================================================
   SITE CHROME  (belongs to the THEME — header/footer parts)
   Masthead · nav · announcement · divider · events ribbon · footer
   ============================================================ */

.ml-chrome{font-family:var(--ml-font-body);color:var(--ml-ink);}
.ml-chrome *{box-sizing:border-box;}

/* buttons (shared UI primitive; theme owns them) */
.ml-btn{font-family:var(--ml-font-ui);font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--ml-radius);text-decoration:none;display:inline-block;transition:background .15s,color .15s;}
.ml-btn--accent{background:var(--ml-orange);color:#fff;font-size:12px;letter-spacing:.14em;padding:13px 22px;}
.ml-btn--accent:hover{background:#b8401f;}
.ml-btn--primary{background:var(--ml-navy);color:#fff;font-size:13px;padding:15px 28px;}
.ml-btn--primary:hover{background:#123449;}
.ml-btn--ghost{border:1.5px solid var(--ml-navy);color:var(--ml-navy);font-weight:600;font-size:13px;padding:14px 26px;background:transparent;}
.ml-btn--ghost:hover{background:var(--ml-navy);color:var(--ml-mist);}

/* masthead */
.ml-masthead{padding:30px var(--ml-pad-x) 0;background:var(--ml-mist);}
.ml-masthead__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;}
.ml-eyebrow{font-family:var(--ml-font-ui);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ml-navy);line-height:1.7;}
.ml-logo{display:flex;justify-content:center;}
.ml-logo img{height:70px;display:block;}
.ml-masthead__row .ml-btn{justify-self:end;}
.ml-rule{margin-top:22px;border-top:2px solid var(--ml-navy);border-bottom:1px solid rgba(25,69,97,.4);height:5px;}

/* nav */
.ml-nav{display:flex;justify-content:center;gap:34px;padding:14px var(--ml-pad-x) 20px;flex-wrap:wrap;background:var(--ml-mist);}
.ml-nav a{font-family:var(--ml-font-ui);font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ml-navy);text-decoration:none;}
.ml-nav a:hover{color:var(--ml-orange);}
.ml-nav a.is-active,.ml-nav .current-menu-item a{font-weight:600;color:var(--ml-orange);border-bottom:2px solid var(--ml-orange);padding-bottom:3px;}

/* announcement bar */
.ml-announce{background:var(--ml-orange);color:#fff;padding:15px var(--ml-pad-x);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.ml-announce__left{display:flex;align-items:center;gap:16px;}
.ml-announce__tag{font-family:var(--ml-font-ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:5px 11px;border-radius:var(--ml-radius);}
.ml-announce__text{font-family:var(--ml-font-ui);font-size:15px;font-weight:500;}
.ml-announce__link{font-family:var(--ml-font-ui);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.6);padding-bottom:2px;}

/* events ribbon */
.ml-events{background:var(--ml-navy);color:var(--ml-mist);padding:26px var(--ml-pad-x);display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.ml-events__item + .ml-events__item{border-left:1px solid rgba(150,194,226,.28);padding-left:36px;}
.ml-events__label{font-family:var(--ml-font-ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ml-blue);margin-bottom:5px;}
.ml-events__text{font-size:15px;color:#dfe6ec;line-height:1.5;}

/* footer */
.ml-footer{background:var(--ml-ink);color:#9ea3ad;padding:20px var(--ml-pad-x);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-family:var(--ml-font-ui);font-size:13px;}
.ml-footer a{color:var(--ml-blue);text-decoration:none;}
.ml-footer__links{display:flex;gap:20px;}

/* responsive */
@media (max-width:900px){
  /* One knob: every band pads with var(--ml-pad-x), so shrinking it here
     narrows the whole chrome at once (masthead, nav, content, footer …). */
  :root{ --ml-pad-x:24px; }
  .ml-events{grid-template-columns:1fr;}
  .ml-events__item + .ml-events__item{border-left:0;padding-left:0;}
}

/* Phones: the masthead's 1fr/auto/1fr grid squeezes the ~294px logo to a
   thumbnail and stacks the CTA into a letter-tower, so stack it and cap the
   logo width (68vw keeps it clear of the edges down to ~320px screens). */
@media (max-width:600px){
  .ml-masthead__row{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px;}
  .ml-masthead__row .ml-masthead__cta{justify-self:center;}
  .ml-masthead .ml-logo img{height:auto;width:min(260px,68vw);}
}

/* ============================================================
   WORDPRESS BLOCK INTEGRATION
   The reference chrome above is class-based; this layer maps it
   onto the markup that core blocks (group, image, buttons,
   navigation, post-content) actually emit, and builds the
   centered "paper card on desk" shell from the prototype.
   ============================================================ */

/* Desk canvas behind the centered container. */
html, body { background: var(--ml-desk); }

/* The 1360px paper card. Header, content and footer bands are all
   full width of THIS shell (not the viewport) — that is why the theme
   avoids alignfull and lets normal flow give each band 100% width. */
.ml-shell {
  max-width: 1360px;
  margin-inline: auto;
  background: var(--ml-mist);
  border: 1px solid rgba(25,69,97,.2);
  box-shadow: 0 34px 80px -40px rgba(6,7,13,.55);
  overflow: hidden;
}
.ml-shell > * { margin-block: 0; }          /* kill flow block-gap between bands */

/* Generic content band + a readable prose column for pages/posts. */
.ml-band { padding: 44px var(--ml-pad-x) 48px; background: var(--ml-mist); }
.ml-band > * { margin-block: 0; }
.ml-prose { max-width: 760px; font-family: var(--ml-font-body); color: var(--ml-ink); font-size: 1.05rem; line-height: 1.6; }
.ml-prose > * + * { margin-top: 1.1em; }

/* --- Editorial styling for page/post content (uses the shared tokens) --- */
/* Page title (core/post-title) with a navy underrule. */
.ml-prose > h1 { margin-bottom: .3em; padding-bottom: .35em; border-bottom: 2px solid var(--ml-navy); }
.ml-prose .wp-block-post-content > :first-child { margin-top: 0; }
/* Section headings get room to breathe + a small orange eyebrow rule. */
.ml-prose h2 { font-size: 1.7rem; margin-top: 2em; }
.ml-prose h2::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: .55rem; background: var(--ml-orange); }
.ml-prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
/* Lead paragraph. */
.ml-prose .ml-lead { font-family: var(--ml-font-body); font-size: 1.3rem; line-height: 1.5; color: var(--ml-navy); }
/* Links, lists, quotes, rules. */
.ml-prose a { color: var(--ml-orange); text-decoration: underline; text-underline-offset: 2px; }
.ml-prose a:hover { color: var(--ml-navy); }
.ml-prose ul, .ml-prose ol { padding-left: 1.3em; }
.ml-prose li + li { margin-top: .4em; }
.ml-prose ul li::marker { color: var(--ml-orange); }
.ml-prose blockquote { margin: 0; padding-left: 18px; border-left: 3px solid var(--ml-orange); font-size: 1.15rem; font-style: italic; color: #2a3942; }
.ml-prose hr { border: 0; border-top: 1px solid rgba(25,69,97,.2); margin: 2em 0; }
.ml-prose img { border-radius: var(--ml-radius); }
/* Tables — reads as a clean data/price table. */
.ml-prose table { width: 100%; border-collapse: collapse; font-family: var(--ml-font-ui); font-size: .95rem; }
.ml-prose thead th { background: var(--ml-navy); color: #fff; text-align: left; }
.ml-prose th, .ml-prose td { padding: 12px 16px; border-bottom: 1px solid rgba(25,69,97,.18); vertical-align: top; }
.ml-prose tbody tr:nth-child(odd) { background: rgba(255,255,255,.55); }
/* Price table: amount column right-aligned and emphasised. */
.ml-price-table td:first-child { width: 68%; }
.ml-price-table td:last-child { text-align: right; font-weight: 700; color: var(--ml-navy); white-space: nowrap; }

/* --- Masthead: core Image + core Buttons dropped into the grid --- */
.ml-masthead__row { margin: 0; }
.ml-masthead__row > * { margin-block: 0; }
.ml-masthead__row .ml-logo { justify-self: center; margin: 0; }
.ml-masthead__row .ml-logo img { height: 70px; width: auto; display: block; }
.ml-masthead__row .ml-masthead__cta { justify-self: end; margin: 0; }

/* --- Buttons: style the core button link when its wrapper carries an
       ml-btn--* class (works alongside the raw-anchor .ml-btn rules). --- */
.wp-block-button.ml-btn .wp-block-button__link,
.wp-block-button[class*="ml-btn--"] .wp-block-button__link {
  font-family: var(--ml-font-ui); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; border-radius: var(--ml-radius);
  transition: background .15s, color .15s;
}
.wp-block-button.ml-btn--accent .wp-block-button__link {
  background: var(--ml-orange); color: #fff; font-size: 12px; letter-spacing: .14em; padding: 13px 22px;
}
.wp-block-button.ml-btn--accent .wp-block-button__link:hover { background: #b8401f; }
.wp-block-button.ml-btn--primary .wp-block-button__link {
  background: var(--ml-navy); color: #fff; font-size: 13px; padding: 15px 28px;
}
.wp-block-button.ml-btn--primary .wp-block-button__link:hover { background: #123449; }
.wp-block-button.ml-btn--ghost .wp-block-button__link {
  background: transparent; border: 1.5px solid var(--ml-navy); color: var(--ml-navy);
  font-weight: 600; font-size: 13px; padding: 14px 26px;
}
.wp-block-button.ml-btn--ghost .wp-block-button__link:hover { background: var(--ml-navy); color: var(--ml-mist); }

/* --- Navigation: the reference `.ml-nav a` rules already reach the
       core nav <a>; these lay out the container and active state. --- */
.ml-nav .wp-block-navigation { justify-content: center; }
.ml-nav .wp-block-navigation__container { gap: 34px; flex-wrap: wrap; justify-content: center; }
.ml-nav .wp-block-navigation-item__content { font-size: 12.5px; } /* core resets font-size */
.ml-nav .current-menu-item > .wp-block-navigation-item__content,
.ml-nav .current_page_item > .wp-block-navigation-item__content,
.ml-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content {
  font-weight: 600; color: var(--ml-orange);
  border-bottom: 2px solid var(--ml-orange); padding-bottom: 3px;
}

/* --- Mobile nav: the hamburger overlay's navy field + mist links come from
       the Navigation block's overlayBackgroundColor/overlayTextColor
       attributes (parts/header pattern) — the update-safe path. These few
       rules only add what those attributes can't: bigger tap targets and the
       orange hover/active accent. Scoped to .is-menu-open, so the desktop
       inline nav is untouched. --- */
.ml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 4px; align-items: flex-start; justify-content: flex-start;
}
.ml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 17px; letter-spacing: .1em; padding: 12px 0; border-bottom: 0;
}
.ml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.ml-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
  color: var(--ml-orange);
}

/* --- Query loop programme grid (used by the archive / spielplan) --- */
.ml-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.ml-card__title { font-family: var(--ml-font-display); font-size: 20px; color: var(--ml-navy); margin: 12px 0 2px; }
.ml-card__meta  { font-family: var(--ml-font-ui); font-size: 11px; letter-spacing: .06em; color: var(--ml-grey); text-transform: uppercase; }
.ml-card__date  { font-family: var(--ml-font-ui); font-size: 12px; font-weight: 600; color: var(--ml-orange); margin-top: 8px; }
@media (max-width: 900px){ .ml-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ml-grid { grid-template-columns: 1fr; } }

/* --- Section heading row (title + "see all" link) --- */
.ml-sectionhead { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(25,69,97,.18); padding-top: 28px; margin-bottom: 24px; gap: 24px; flex-wrap: wrap; }
.ml-sectionhead h2, .ml-sectionhead h3 { margin: 0; }
.ml-sectionhead__link { font-family: var(--ml-font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ml-orange); text-decoration: none; }

/* --- Placeholder where the programme plugin block renders --- */
.ml-plugin-slot { background: var(--ml-blue); color: var(--ml-navy); text-align: center;
  padding: 64px var(--ml-pad-x); font-family: var(--ml-font-ui); }
.ml-plugin-slot code { background: rgba(6,7,13,.08); padding: 3px 8px; border-radius: 2px; font-size: .95em; }

/* Neutralise WordPress' injected block-gap margins inside the chrome so the
   reference component margins/padding above win. The :where() wrapper keeps
   this at zero specificity, so any explicit .ml-* margin still overrides it. */
:where(.ml-chrome .wp-block-group) > * { margin-block: 0; }

/* ============================================================
   FEATURE PAGES — full-width bands built from core blocks
   (Info, Gutscheine, Mitglied werden, Kontakt …). Everything
   is token-driven so it matches the homepage band language.
   ============================================================ */

/* Hero: page title over a photo (core/cover). */
.ml-hero-page { align-items: flex-end; }
.ml-hero-page .wp-block-cover__inner-container {
  width: 100%; max-width: 1360px; margin-inline: auto;
  padding: 0 var(--ml-pad-x) 42px;
}
.ml-hero-page h1 { margin: 0; color: #fff; line-height: .98; }
.ml-hero-page__eyebrow {
  margin: 0 0 .5rem; font-family: var(--ml-font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #fff; opacity: .85;
}
.ml-hero-page__sub { margin: .7rem 0 0; max-width: 48ch; color: #fff; font-size: 1.15rem; line-height: 1.45; }

/* Content bands. */
.ml-page-band > * { margin-block: 0; }
.ml-page-band > * + * { margin-top: 1.15em; }
.ml-page-band h2 {
  color: var(--ml-navy); font-family: var(--ml-font-display); font-weight: 400; font-size: 1.9rem;
}
.ml-page-band h2::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: .6rem; background: var(--ml-orange); }
.ml-page-band.has-blue-background-color h2::before { background: var(--ml-navy); }
.ml-page-band p { line-height: 1.6; }
.ml-page-band a { color: var(--ml-orange); text-decoration: underline; text-underline-offset: 2px; }
.ml-page-band.has-blue-background-color a { color: var(--ml-navy); }
.ml-note { font-style: italic; color: var(--ml-grey); }

/* Price table (usable in any band) — clean hairline rows, no cell borders. */
.ml-price-table, .ml-price-table figure { margin: 0; border: 0; }
.ml-price-table table { width: 100%; border-collapse: collapse; border: 0; font-family: var(--ml-font-ui); }
.ml-price-table td { padding: 15px 2px; border: 0; border-bottom: 1px solid rgba(25,69,97,.2); vertical-align: baseline; }
.ml-price-table tr:last-child td { border-bottom: 0; }
.ml-price-table td:first-child { color: var(--ml-navy); font-size: 1.05rem; }
.ml-price-table td:first-child br + * , .ml-price-table td:first-child { line-height: 1.4; }
.ml-price-table td:last-child { width: 1%; text-align: right; font-weight: 700; font-size: 1.25rem; color: var(--ml-orange); white-space: nowrap; padding-left: 24px; }

/* Image + text rows (core/media-text). */
.ml-mt { gap: 44px; align-items: center; }
.ml-mt .wp-block-media-text__media img { display: block; border-radius: var(--ml-radius); }
.ml-mt + .ml-mt { margin-top: 44px; }

/* Timeline (Geschichte). */
.ml-timeline { margin: 0; padding-left: 8px; border-left: 2px solid rgba(25,69,97,.22); }
.ml-timeline__item { position: relative; padding: 0 0 34px 30px; }
.ml-timeline__item:last-child { padding-bottom: 0; }
.ml-timeline__item::before {
  content: ""; position: absolute; left: -9px; top: 8px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--ml-orange); box-shadow: 0 0 0 4px var(--ml-mist);
}
.ml-timeline__year { margin: 0; font-family: var(--ml-font-display); font-weight: 400; font-size: 1.6rem; color: var(--ml-navy); line-height: 1; }
.ml-timeline__item p { margin: .45rem 0 0; line-height: 1.6; }

/* Board roles — a role label followed by the name(s). */
.ml-role-line { margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(25,69,97,.18); color: var(--ml-navy); font-size: 1.08rem; }
.ml-role-line:last-child { border-bottom: 0; }
.ml-role-line__role { display: inline-block; min-width: 190px; font-family: var(--ml-font-ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-grey); vertical-align: baseline; }
@media (max-width: 560px) { .ml-role-line__role { display: block; min-width: 0; margin-bottom: 2px; } }

/* Cards (contact details, tiers) — sit inside core/columns. */
.ml-card { height: 100%; background: #fff; border: 1px solid rgba(25,69,97,.15); border-radius: var(--ml-radius); padding: 26px 24px; }
.ml-card__label { margin: 0 0 8px; font-family: var(--ml-font-ui); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ml-orange); }
.ml-card__value { margin: 0; font-size: 1.08rem; color: var(--ml-navy); line-height: 1.5; }
.ml-card__value a { color: var(--ml-navy); }
.ml-card__note { margin: .5rem 0 0; font-size: .85rem; color: var(--ml-grey); }

.ml-tier { height: 100%; background: #fff; border: 1px solid rgba(25,69,97,.15); border-radius: var(--ml-radius); padding: 30px 24px; text-align: center; }
.ml-tier__price { margin: 0; font-family: var(--ml-font-display); font-weight: 400; font-size: 2.6rem; color: var(--ml-orange); line-height: 1; }
.ml-tier__label { margin: .6rem 0 0; font-family: var(--ml-font-ui); font-size: .92rem; color: var(--ml-navy); line-height: 1.4; }

/* Centered CTA bands. */
.ml-page-band h2.has-text-align-center::before { margin-left: auto; margin-right: auto; }
.ml-band-center .wp-block-buttons { margin-top: 1.6em; }
.ml-page-band .wp-block-columns { margin-top: 1.5em; gap: 24px; }