/*
Theme Name: Mamma Mia 2027
Theme URI: https://www.sc-ball.at
Author: Ballkomitee Sacré Coeur Wien Rennweg
Description: Eigenes Block-Theme für den Maturaball 2027 „Mamma Mia!“ des Gymnasium Sacré Coeur Wien Rennweg. Farben, Schriften und Blockstile aus dem Mamma-Mia-Designsystem.
Version: 1.0.1
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mamma-mia-2027
*/

:root {
  --surface-100: #f6f0e6;
  --surface-200: #ede3d3;
  --surface-raised: #fbf8f2;
  --ink: #1d2756;
  --ink-muted: #4b4f68;
  --on-ink: #f6f0e6;
  --gold: #b8924c;
  --gold-deep: #977433;
  --gold-text: #7a5c25;
  --gold-tint: #e9d3a4;
  --bougainvillea: #d6407f;
  --bougainvillea-deep: #b3245f;
  --bougainvillea-tint: #f2c9d9;
  --aegean: #8fa3c9;
  --aegean-tint: #e3e8f1;
  --hairline: rgba(184, 146, 76, 0.45);
  --focus-ring: var(--bougainvillea-deep);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-arch: 240px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 32px rgba(29, 39, 86, 0.12);
  --font-serif: var(--wp--preset--font-family--serif);
  --font-script: var(--wp--preset--font-family--script);
}

/* Mamma Mia! – WordPress-Stylesheet (Zusätzliches CSS / Child-Theme).
   Alle Werte kommen aus tokens.json (tokens.css). Selektoren = Gutenberg-Blockklassen. */

body, .mm-page {
  background: var(--surface-100);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
.mm-page { padding: var(--space-4); }

h1, h2, h3, .wp-block-heading { font-family: var(--font-serif); color: var(--ink); font-weight: 500; margin: 0 0 var(--space-3); }
h1 { font-size: 56px; line-height: 1.05; letter-spacing: 0.02em; }
h2 { font-size: 40px; line-height: 1.15; }
h3 { font-size: 26px; line-height: 1.25; font-weight: 600; }
p { margin: 0 0 var(--space-3); }
p em, .is-style-lead { font-size: 22px; line-height: 1.5; font-style: italic; color: var(--ink-muted); }
a { color: var(--bougainvillea-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Versalien & Schreibschrift */
.mm-eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--space-2); }
.mm-display { font-size: 96px; line-height: 0.95; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; margin: 0; }
.mm-script { font-family: var(--font-script); font-size: 44px; line-height: 1.1; font-weight: 400; color: var(--gold-deep); margin: 0; }
.mm-script.is-small { font-size: 30px; line-height: 1.2; }
.mm-date { font-size: 44px; line-height: 1.1; letter-spacing: 0.12em; font-weight: 500; margin: 0; }
.mm-caps { font-size: 15px; line-height: 1.7; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.mm-heart { color: var(--bougainvillea); font-size: 0.4em; vertical-align: 0.1em; margin-left: 0.05em; }

/* Ornament-Trenner: Linie – Raute – Linie */
.wp-block-separator.is-style-ornament,
.mm-ornament { border: 0; height: 12px; width: 160px; max-width: 100%; margin: var(--space-4) auto; background:
  linear-gradient(var(--gold), var(--gold)) left center / calc(50% - 10px) 1px no-repeat,
  linear-gradient(var(--gold), var(--gold)) right center / calc(50% - 10px) 1px no-repeat; position: relative; opacity: 1; }
.wp-block-separator.is-style-ornament::after,
.mm-ornament::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.wp-block-separator.is-style-ornament.is-wide { width: 100%; }

/* Buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wp-block-button__link, .wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  box-sizing: border-box; width: 100%;
  font-family: var(--font-serif); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wp-block-button__link:hover { background: var(--bougainvillea-deep); border-color: var(--bougainvillea-deep); color: var(--on-ink); }
.wp-block-button { flex: 0 1 auto; }
.wp-block-button__width-50 { flex-basis: calc(50% - var(--space-3) / 2); }
.wp-block-button__width-100 { flex-basis: 100%; }
.is-style-outline > .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--ink); }
.is-style-outline > .wp-block-button__link:hover { background: var(--gold-tint); color: var(--ink); border-color: var(--ink); }
.wp-block-button__link svg { width: 1em; height: 1em; }

/* Hero (Cover-Block) */
.wp-block-cover.mm-hero, .wp-block-cover.mm-hero .wp-block-cover__inner-container { color: var(--ink); }
.mm-hero { position: relative; text-align: center; padding: var(--space-6) var(--space-4); background: var(--surface-100); overflow: hidden; }
.mm-hero .wp-block-cover__inner-container { position: relative; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.mm-hero .mm-script { margin-top: var(--space-2); }
.mm-hero .wp-block-buttons { justify-content: center; margin-top: var(--space-4); width: 100%; }

/* Intro-Bar */
.mm-introbar { background: var(--bougainvillea-deep); color: var(--on-ink); text-align: center; font-style: italic; font-size: 19px; padding: var(--space-2) var(--space-4); margin: 0; }

.mm-introbar em, .mm-tickets p em { color: inherit; font-size: inherit; }

/* Highlights (Details-Block) */
.wp-block-details { border-top: 1px solid var(--hairline); padding: var(--space-3) 0; }
.wp-block-details summary { cursor: pointer; list-style: none; color: var(--bougainvillea-deep); font-size: 22px; font-style: italic; font-weight: 600; display: flex; justify-content: space-between; gap: var(--space-2); }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-style: normal; color: var(--gold-text); }
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details p { color: var(--ink-muted); margin: var(--space-2) 0 0; }

/* Listen mit Gold-Raute */
.wp-block-list:not(ol) { list-style: none; padding-left: 0; }
.wp-block-list:not(ol) > li { position: relative; padding-left: 1.4em; margin-bottom: var(--space-1); }
.wp-block-list:not(ol) > li::before { content: ""; position: absolute; left: 0.2em; top: 0.68em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

/* Programm-Tabelle */
.wp-block-table table { width: 100%; border-collapse: collapse; border: 0; }
.wp-block-table td, .wp-block-table th { border: 0; }
.wp-block-table td { border: 0; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
.wp-block-table td:first-child { width: 7em; color: var(--gold-text); font-weight: 600; letter-spacing: 0.08em; }
.wp-block-table tr:last-child td { border-bottom: 0; }

/* Infos auf einen Blick */
.mm-infogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); text-align: center; }
.mm-infogrid .mm-icon { width: 36px; height: 36px; color: var(--gold-text); margin: 0 auto var(--space-2); display: block; }
.mm-infogrid p { margin: 0; }

/* Tickets */
.mm-tickets { background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); padding: var(--space-5); text-align: center; }
.mm-tickets .mm-prices { display: flex; justify-content: center; gap: var(--space-5); margin: var(--space-4) 0; }
.mm-tickets .mm-price { font-size: 44px; line-height: 1; }
.mm-tickets .mm-price small { display: block; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-2); }

/* Bänder */
.has-surface-200-background-color { background: var(--surface-200); }
.has-aegean-tint-background-color { background: var(--aegean-tint); }

/* Bilder im Bogenfenster */
.is-style-arch img, .mm-arch { border-radius: var(--radius-arch) var(--radius-arch) 0 0; object-fit: cover; display: block; width: 100%; }
.wp-block-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: 0; }
.wp-block-gallery figure { margin: 0; }
.wp-block-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--radius-sm); }

/* Ladebalken der Wartungsseite (Trennzeichen-Block mit Klasse mm-loadbar) */
.wp-block-separator.mm-loadbar { border: 0; height: 2px; width: 280px; max-width: 100%; margin: var(--space-4) auto; background: var(--aegean-tint); position: relative; overflow: hidden; opacity: 1; }
.wp-block-separator.mm-loadbar::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 35%; background: var(--bougainvillea-deep); animation: mm-load 2.6s ease-in-out infinite; }
@keyframes mm-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .wp-block-separator.mm-loadbar::after { animation: none; width: 100%; opacity: .5; } }

/* Rechtliche Links (Impressum, AGBs, Datenschutz) */
.mm-legal { font-size: 16px; letter-spacing: .08em; color: var(--ink-muted); }
.mm-legal a { color: var(--ink-muted); text-decoration: none; margin: 0 .5em; }
.mm-legal a:hover { color: var(--bougainvillea-deep); text-decoration: underline; }

/* Responsive Helfer der bestehenden Seite */
@media (max-width: 781px) {
  .hide-on-mobile { display: none !important; }
  .mm-display { font-size: 56px; }
  h1 { font-size: 40px; } h2 { font-size: 32px; }
  .mm-date { font-size: 32px; }
  .mm-script { font-size: 34px; }
  .wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 782px) { .hide-on-desktop { display: none !important; } }

/* Lucide-Icons aus dem SVG-Block (boldblocks) */
.icon-svg { width: 36px; height: 36px; color: var(--gold-text); stroke-width: 1.5; display: block; margin: 0 auto var(--space-2); }
.wp-block-boldblocks-svg-block { color: var(--gold-text); }

/* Plakat neben dem Motto */
.mm-poster img { box-shadow: var(--shadow-soft); border-radius: var(--radius-sm); }

/* Versalien-Kontexte: Normalziffern statt Mediävalziffern */
.mm-eyebrow, .mm-date, .mm-caps, .mm-price, .wp-block-table td, .wp-block-button__link { font-variant-numeric: lining-nums; }

/* Kopf- und Fußzeile */
.mm-header { border-bottom: 1px solid var(--hairline); }
.mm-header .wp-block-site-title { font-size: 15px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin: 0; }
.mm-header .wp-block-site-title a { color: var(--ink); text-decoration: none; }
.mm-header .wp-block-navigation { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.mm-header .wp-block-navigation a { color: var(--ink); text-decoration: none; }
.mm-header .wp-block-navigation a:hover { color: var(--bougainvillea-deep); }
.mm-footer { text-align: center; color: var(--ink-muted); font-size: 16px; }