/* =====================================================
   LEGACY LAYER

   Do not add new components here.
   Existing rules should only change for regression fixes.
   New CSS belongs in Core, Layout, Components, Pages or WooCommerce.
   This layer is planned for step-by-step replacement.
   ===================================================== */

/* =====================================================
   FRANZ DESIGN SYSTEM
   ===================================================== */

:root {
  /* COLORS */
  --franz-dark: #1f1b16;
  --franz-text: #1f1b16;
  --franz-text-light: rgba(31, 27, 22, 0.72);
  --franz-gold: #a87f2b;
  --franz-soft: #f3f1ec;
  --franz-cream: #f7f2ea;
  --franz-white: #ffffff;

  /* TYPOGRAPHY */
  --font-heading: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-editorial: "Cormorant Garamond", serif;

  /* SPACING */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 140px;

  /* RADIUS */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 36px;
  --radius-xl: 48px;
  --radius-xs: 8px;

  /* SHADOWS */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 20px 48px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.12);
  --shadow-soft: var(--shadow-sm);
  --shadow-card: var(--shadow-md);
  --shadow-elevated: var(--shadow-lg);

  /* CONTAINER */
  --container: 1360px;
  --content-max-width: 1240px;
  --editorial-width: 1120px;

  /* MOTION */
  --motion-duration-fast: 160ms;
  --motion-duration: 200ms;
  --motion-ease: ease;
  --motion-lift: 4px;
  --motion-scale: 1.02;
}

/* =====================================================
   BASIS LAYOUT
   ===================================================== */

.site {
  background: var(--franz-cream);
  color: var(--franz-text);
}

.grid-container,
.franz-container {
  max-width: var(--container);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* =====================================================
   TYPOGRAPHIE
   ===================================================== */

/* Heading colour is owned by the section context, not by the element:
   light surfaces inherit `--franz-text` from `body`, dark surfaces inherit
   `--franz-white` from `.franz-section-dark` / `.franz-section-highlight`
   (assets/css/core/layout.css). Declaring `color` on a bare `h1..h6`
   selector breaks that inheritance on every dark section, so this rule
   must not set one. See tests/verify-heading-contrast-ownership.ps1. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

.franz-editorial h1,
.franz-editorial h2 {
  font-family: var(--font-editorial);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* =====================================================
   BUTTONS & LINKS
   ===================================================== */

.button,
.wp-block-button__link,
.franz-button {
  background: var(--franz-dark) !important;
  color: var(--franz-white) !important;
  padding: 12px 32px !important;
  border-radius: var(--radius-xs) !important;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all var(--motion-duration) var(--motion-ease);
}

.button:hover,
.wp-block-button__link:hover,
.franz-button:hover {
  background: var(--franz-gold) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

a {
  color: var(--franz-gold);
  text-decoration: none;
  transition: color var(--motion-duration) var(--motion-ease);
}

a:hover {
  color: var(--franz-dark);
}

/* =====================================================
   CARDS
   ===================================================== */

.card,
.franz-card {
  background: var(--franz-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  transition: all var(--motion-duration) var(--motion-ease);
}

.card:hover,
.franz-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

/* =====================================================
   HEADER & NAVIGATION
   ===================================================== */

.site-header {
  background: var(--franz-white);
  border-bottom: 1px solid rgba(31, 27, 22, 0.06);
}

.main-navigation .main-nav ul li a {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--franz-text);
  letter-spacing: 0.04em;
  transition: color var(--motion-duration) var(--motion-ease);
}

.main-navigation .main-nav ul li a:hover {
  color: var(--franz-gold);
}

.main-navigation .main-nav ul li.current-menu-item a {
  color: var(--franz-gold);
}

/* =====================================================
   SERVICES / LEISTUNGEN
   ===================================================== */

body.single-franz_service,
body.archive-franz_service {
  background: var(--franz-cream);
}

body.single-franz_service h1,
body.single-franz_service h2,
body.archive-franz_service h1 {
  font-family: var(--font-editorial);
  font-weight: 400;
  color: var(--franz-dark);
  letter-spacing: 0.04em;
}

.franz-service-content {
  background: var(--franz-white);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

.franz-service-content .button {
  background: var(--franz-gold) !important;
}

.franz-service-content .button:hover {
  background: var(--franz-dark) !important;
}

/* =====================================================
   COUNTDOWN
   ===================================================== */

.page-template-countdown .site-content {
  background: var(--franz-dark);
  color: var(--franz-cream);
}

.page-template-countdown h1,
.page-template-countdown h2 {
  color: var(--franz-cream);
  font-family: var(--font-editorial);
}

.page-template-countdown .countdown-timer {
  color: var(--franz-gold);
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 0.08em;
}

/* =====================================================
   WISSENSZENTRUM
   ===================================================== */

body.single-franz_knowledge,
body.archive-franz_knowledge {
  background: var(--franz-cream);
}

body.single-franz_knowledge .entry-title,
body.archive-franz_knowledge .entry-title {
  font-family: var(--font-editorial);
  color: var(--franz-dark);
}