/*
Theme Name:   Parallax Child
Description:  Child-Theme für Twenty Twenty-Five mit Hero-Header-Bild und clean Page-Template
Author:       Custom
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  parallax-child
*/

/* ─── Reset / Base ─────────────────────────────────────────────── */
:root {
  --color-black:   #111111;
  --color-white:   #ffffff;
  --color-border:  #d4d4d4;
  --color-text:    #222222;
  --color-muted:   #555555;
  --nav-height:    56px;
  --content-max:   680px;
  --hero-height:   650px;
}

/* ─── Navigation Override ───────────────────────────────────────── */
.wp-block-template-part[data-slug="header"],
header.wp-block-template-part {
  background: var(--color-black) !important;
}

/* Force dark nav for child theme */
body .site-header,
body #masthead {
  background: var(--color-black);
}

/* ─── Hero Header Image ─────────────────────────────────────────── */
/* Bricht aus dem eingeschränkten Container (max-width: 680px) aus   */
.parallax-hero {
  /* Volle Viewport-Breite, auch wenn der Parent-Container schmaler ist */
  width:        100vw;
  max-width:    100vw;
  height:       var(--hero-height);
  overflow:     hidden;
  display:      block;
  line-height:  0;

  /* Negativer Margin-Trick: verschiebt das Element nach links bis zum Viewport-Rand */
  position:     relative;
  left:         50%;
  right:        50%;
  margin-left:  -50vw !important;
  margin-right: -50vw !important;
}

.parallax-hero img,
.parallax-hero .parallax-hero-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 60%;
  display:         block;
  max-width:       100%;
}

/* ─── Page Content Area ─────────────────────────────────────────── */
.parallax-page-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 64px 24px 80px;
}

/* Hide the WP page title (h1.wp-block-post-title) on our template */
.page-template-parallax-page .wp-block-post-title,
.page-template-parallax-page .entry-title,
.page-template-parallax-page h1.entry-title {
  display: none !important;
}

/* ─── Gutenberg content typography ──────────────────────────────── */
.parallax-page-content .entry-content,
.parallax-page-content .wp-block-post-content {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text);
}

/* Heading rendered inside Gutenberg (e.g. a Heading block used as visible title) */
.parallax-page-content h1,
.parallax-page-content .wp-block-heading.is-style-page-title {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--color-black);
  margin: 0 0 0.5em;
}

/* Decorative divider under the visible title */
.parallax-page-content .wp-block-separator.is-style-page-divider,
.wp-block-separator.has-alpha-channel-opacity {
  border: none;
  border-top: 1px solid var(--color-border);
  max-width: 120px;
  margin: 0 auto 2.5em;
}

/* ─── Remove TT5 default content padding that clashes ───────────── */
.page-template-parallax-page .wp-site-blocks > main,
.page-template-parallax-page .site-content,
.page-template-parallax-page .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}