/*
Theme Name: Renate Praxis
Theme URI: https://psychotherapie-stuenkel.de/
Author: Praxis Renate Stünkel
Description: Ruhiges, datensparsames Block-Theme für die psychotherapeutische Privatpraxis.
Version: 1.2.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: renate-praxis
*/

:root {
  --renate-ink: #26342f;
  --renate-muted: #65726c;
  --renate-forest: #315f55;
  --renate-forest-dark: #23483f;
  --renate-sage: #dfe9e4;
  --renate-sand: #f3eee5;
  --renate-cream: #fbf9f5;
  --renate-white: #fff;
  --renate-line: #d9dfdb;
  --renate-radius: 22px;
  --renate-shadow: 0 18px 55px rgba(38, 52, 47, .08);
}

html { scroll-behavior: smooth; }

body {
  background: var(--renate-cream);
  color: var(--renate-ink);
  -webkit-font-smoothing: antialiased;
}

a { text-underline-offset: .18em; }

.wp-site-blocks { overflow: clip; }

.renate-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(49, 95, 85, .13);
  background: rgba(251, 249, 245, .96);
}

.renate-header__inner,
.renate-footer__inner {
  padding-left: clamp(20px, 4vw, 58px);
  padding-right: clamp(20px, 4vw, 58px);
}

.renate-brand a { text-decoration: none; }

.renate-header .wp-block-navigation-item__content {
  padding: .45rem .15rem;
  text-decoration: none;
}

.renate-header .wp-block-navigation-item__content:hover,
.renate-header .current-menu-item > .wp-block-navigation-item__content {
  color: var(--renate-forest);
}

.renate-main { min-height: 65vh; }

.renate-hero {
  padding: clamp(56px, 9vw, 126px) clamp(20px, 4vw, 58px) clamp(64px, 10vw, 138px);
}

.renate-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
}

.renate-eyebrow {
  margin-bottom: 1rem;
  color: var(--renate-forest);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.renate-hero h1,
.renate-page-head h1 {
  max-width: 19ch;
  margin-top: 0;
  margin-bottom: 1.35rem;
  font-size: clamp(2.55rem, 6vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.renate-hero .renate-lead,
.renate-page-head .renate-lead {
  max-width: 66ch;
  color: var(--renate-muted);
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  line-height: 1.65;
}

.renate-portrait {
  position: relative;
  max-width: 390px;
  margin-inline: auto;
}

.renate-portrait::before {
  position: absolute;
  inset: -16px 20px 24px -16px;
  z-index: -1;
  border-radius: 48% 52% 44% 56% / 56% 45% 55% 44%;
  background: var(--renate-sage);
  content: "";
}

.renate-portrait img {
  aspect-ratio: 4 / 5;
  border-radius: 48% 52% 44% 56% / 56% 45% 55% 44%;
  box-shadow: var(--renate-shadow);
  object-fit: cover;
}

.renate-section { padding: clamp(62px, 9vw, 118px) clamp(20px, 4vw, 58px); }
.renate-section--sage { background: var(--renate-sage); }
.renate-section--sand { background: var(--renate-sand); }
.renate-section--white { background: var(--renate-white); }

.renate-section h2 {
  max-width: 25ch;
  margin-top: 0;
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.renate-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.renate-card,
.renate-step,
.renate-note,
.renate-contact-card {
  border: 1px solid rgba(49, 95, 85, .12);
  border-radius: var(--renate-radius);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 36px rgba(38,52,47,.04);
}

.renate-card { padding: clamp(24px, 3vw, 38px); }
.renate-card h3 { margin-top: 0; }
.renate-card p:last-child { margin-bottom: 0; }

.renate-split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(38px, 7vw, 100px);
  align-items: start;
}

.renate-steps { counter-reset: renate-step; display: grid; gap: 16px; }
.renate-step { position: relative; padding: 28px 28px 28px 84px; }
.renate-step::before {
  counter-increment: renate-step;
  position: absolute;
  top: 24px;
  left: 24px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--renate-forest);
  color: #fff;
  content: counter(renate-step, decimal-leading-zero);
  font-size: .8rem;
  font-weight: 700;
}
.renate-step h3 { margin: 0 0 .45rem; }
.renate-step p { margin: 0; color: var(--renate-muted); }

.renate-page-head {
  padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 58px) clamp(44px, 6vw, 78px);
  background: var(--renate-sand);
}

.renate-page-content {
  padding: clamp(50px, 8vw, 100px) clamp(20px, 4vw, 58px);
}

.renate-page-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.renate-page-content > .alignwide { max-width: 1120px; }
.renate-page-content h2 { margin-top: 2.4em; }
.renate-page-content h2:first-child { margin-top: 0; }

.renate-note { padding: 24px 28px; background: var(--renate-sand); }
.renate-note strong { color: var(--renate-forest-dark); }
.renate-note > :first-child { margin-top: 0; }
.renate-note > :last-child { margin-bottom: 0; }

.renate-contact-card {
  padding: clamp(28px, 5vw, 56px);
  background: var(--renate-forest);
  color: #fff;
}
.renate-contact-card a { color: #fff; }
.renate-contact-card h2 { color: #fff; }

.renate-button .wp-block-button__link,
.wp-block-button.renate-button .wp-block-button__link {
  border: 1px solid var(--renate-forest);
  border-radius: 999px;
  background: var(--renate-forest);
  color: #fff;
  font-weight: 650;
  transition: transform .18s ease, background .18s ease;
}
.renate-button .wp-block-button__link:hover,
.wp-block-button.renate-button .wp-block-button__link:hover {
  background: var(--renate-forest-dark);
  transform: translateY(-2px);
}

.renate-button--ghost .wp-block-button__link {
  background: transparent;
  color: var(--renate-forest-dark);
}

.renate-footer { background: var(--renate-ink); color: #e9efec; }
.renate-footer a { color: #fff; }
.renate-footer .wp-block-site-title a { color: #fff; }

.renate-timeline { border-left: 1px solid var(--renate-line); padding-left: 30px; }
.renate-timeline h3 { margin-bottom: .3rem; }
.renate-timeline p { margin-top: 0; color: var(--renate-muted); }

@media (max-width: 900px) {
  .renate-hero__grid,
  .renate-split { grid-template-columns: 1fr; }
  .renate-cards { grid-template-columns: 1fr; }
  .renate-hero__grid { gap: 54px; }
  .renate-portrait { max-width: 300px; }

  .wp-block-navigation__responsive-container.is-menu-open {
    padding: 24px;
    background: var(--renate-cream) !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    width: 100%;
    padding: 58px 18px 0 !important;
    align-items: flex-start;
    box-sizing: border-box;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
    width: 100%;
    align-items: flex-start !important;
    gap: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
    width: 100%;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 13px 0 !important;
    border-bottom: 1px solid var(--renate-line);
    box-sizing: border-box;
    font-size: 1.1rem;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .renate-header__inner { padding-top: 18px !important; padding-bottom: 18px !important; }
  .renate-hero h1,
  .renate-page-head h1 { font-size: clamp(2.45rem, 14vw, 4rem); }
  .renate-step { padding-left: 26px; padding-top: 76px; }
  .renate-step::before { top: 24px; left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}