/*
Theme Name: Heike
Text Domain: heike
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
*/

/* Grid System — Single Source of Truth */
:root {
  --heike-grid: auto auto auto minmax(0, 100px) minmax(0, 300px) minmax(0, 200px)
    minmax(0, 200px) minmax(0, 300px) minmax(0, 100px) auto auto auto;
  --heike-grid-span: span 12;
  --heike-content-span: 4 / 10;
}

/* Base Styles — ergaenzt theme.json Global Styles */
html {
  scroll-behavior: smooth;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  text-decoration: none;
}

body {
  position: relative;
  font-family: "Raleway", sans-serif;
  background-color: #ffffff;
  color: #1a1a2e;
  line-height: 1.6;
  display: grid;
  grid-template-columns: var(--heike-grid);
}

/* Subgrid-Container: volle Breite + Grid-Durchreichung */
.wp-site-blocks,
.grid-cols-subgrid,
.entry-content,
.wp-block-post-content,
footer {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: var(--heike-grid-span);
}

/* Group-Block als Container für normale WP-Blöcke */
.wp-block-group {
  grid-column: var(--heike-content-span);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Afacad", sans-serif;
  letter-spacing: -0.02em;
}

/* WordPress Block-Theme: entferne Default-Paddings die theme.json setzt */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}
.wp-site-blocks {
  padding-top: 0 !important;
}

/* Header — fixed, eigenes Grid (kein subgrid, da fixed aus dem Flow ist) */
header {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  width: 100%;
  z-index: 10;
  display: grid;
  grid-template-columns: var(--heike-grid);
  padding: 1.5rem 0;
  pointer-events: none;
}
header > * {
  pointer-events: auto;
  grid-column: 9;
  justify-self: end;
}

/* Footer — strukturelles Positioning (Template-Part Wrapper) */
footer {
  position: relative;
}

/* Smooth sections — entferne WP default block spacing */
.entry-content > *,
.wp-block-post-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ─── Mobile Responsive Override (<768px) ─────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --heike-content-span: 1 / -1;
  }

  /* Alle Content-Kinder auf volle Breite (Spacer, Core-Blöcke etc.) */
  .wp-block-post-content > *,
  .entry-content > * {
    grid-column: 1 / -1;
  }

  /* Override inline grid-column: volle Breite + side-padding */
  .grid-cols-subgrid > [style*="grid-column"] {
    grid-column: 1 / -1 !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Override inline grid-area: nur Spalte auf volle Breite
     (grid-row bleibt erhalten fuer Overlay-Elemente wie hello__bg) */
  .grid-cols-subgrid > [style*="grid-area"] {
    grid-column-start: 1 !important;
    grid-column-end: -1 !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Full-width Backgrounds/Banners — kein Padding */
  .grid-cols-subgrid > [class*="__bg"],
  .grid-cols-subgrid > [class*="__banner"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── Hello Block: BG-Overlay auf mobile flach machen ── */
  .heike-hello > .heike-hello__bg {
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .heike-hello > .heike-hello__content {
    position: relative;
    z-index: 1;
  }

  /* ── Quote Banner: Content über Gradient ── */
  .heike-quote-banner > .heike-quote-banner__content {
    position: relative;
    z-index: 1;
  }

  /* Header nav: kompakt auf mobile */
  header {
    padding: 1rem 0;
  }
  header > * {
    grid-column: 1 / -1;
    padding-right: 1.25rem;
  }

  /* Footer: Block-Layout statt Grid auf mobile
     !important nötig weil .grid-cols-subgrid (0,1,0) > footer (0,0,1) */
  footer {
    display: block !important;
    padding: 0 1.25rem;
  }
}