/* ============================================================
   Vaterwelten Theme – Main CSS v1.3.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --vw-orange:       #ee8f50;
  --vw-dunkelblau:   #1e2d3c;
  --vw-pfirsich:     #eebe8e;
  --vw-pastellblau:  #9ebfb5;
  --vw-lichtgelb:    #f2e498;
  --vw-graublau:     #2c4759;
  --vw-mittelgrau:   #969696;
  --vw-weiss:        #ffffff;
  --vw-font:         'Outfit', system-ui, sans-serif;
  --vw-radius:       8px;
  --vw-radius-lg:    16px;
  --vw-radius-xl:    20px;
  --vw-shadow-sm:    0 2px 8px rgba(30,45,60,0.08);
  --vw-shadow-md:    0 4px 24px rgba(30,45,60,0.12);
  --vw-shadow-lg:    0 8px 48px rgba(30,45,60,0.18);
  --vw-transition:   0.22s ease;
  --vw-max-width:    1200px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--vw-font);
  color: var(--vw-dunkelblau);
  background: var(--vw-weiss);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--vw-orange); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--vw-dunkelblau); }

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--vw-font);
  font-weight: 600;
  color: var(--vw-dunkelblau);
  line-height: 1.12;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

/* ── Accessibility ── */
.screen-reader-text {
  position: absolute; clip: rect(1px,1px,1px,1px); width:1px; height:1px;
  overflow:hidden; white-space:nowrap;
}
.skip-link { 
  position:fixed; top:6px; left:6px; z-index:99999;
  background:var(--vw-orange); color:#fff !important;
  padding:10px 20px; border-radius:var(--vw-radius);
  font-weight:700; text-decoration:none;
  transform:translateY(-120%); transition:transform 0.2s;
}
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid var(--vw-orange); outline-offset:3px; }

/* ================================================================
   HEADER
   ================================================================ */
header.vw-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(30,45,60,0.07);
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 1px 4px rgba(30,45,60,0.06);
}
.admin-bar header.vw-header { top: 32px; }
@media (max-width: 782px) { .admin-bar header.vw-header { top: 46px; } }

.vw-header-inner {
  max-width: var(--vw-max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 70px;
}

/* Logo */
.vw-header-inner .wp-block-site-logo { flex-shrink: 0; }
.vw-header-inner .wp-block-site-logo img { height: 42px; width: auto; }
.vw-header-inner .wp-block-site-logo a { display:block; text-decoration:none; }

/* Navigation links */
.vw-header-inner .wp-block-navigation {
  font-family: var(--vw-font);
}
.vw-header-inner .wp-block-navigation .wp-block-navigation-item__content {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--vw-dunkelblau) !important;
  text-decoration: none;
  padding: 0.3rem 0.5rem;
  transition: color var(--vw-transition);
  border-radius: var(--vw-radius);
}
.vw-header-inner .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--vw-orange) !important;
}

/* CTA "Community →" – last nav item */
.vw-header-inner .wp-block-navigation .vw-nav-cta .wp-block-navigation-item__content {
  background: var(--vw-orange) !important;
  color: #ffffff !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: var(--vw-radius) !important;
  margin-left: 0.5rem;
}
.vw-header-inner .wp-block-navigation .vw-nav-cta .wp-block-navigation-item__content:hover {
  background: var(--vw-dunkelblau) !important;
}

/* Mobile overlay nav */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--vw-dunkelblau) !important;
  z-index: 99999 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #ffffff !important;
  font-size: 1.15rem;
}
.wp-block-navigation__responsive-container-open {
  background: transparent;
  border: 2px solid var(--vw-dunkelblau);
  border-radius: var(--vw-radius);
  padding: 4px 8px;
  cursor: pointer;
}

/* ================================================================
   HERO / COVER BLOCK
   ================================================================ */
.wp-block-cover {
  position: relative;
  min-height: 82vh !important;
  background-color: var(--vw-dunkelblau) !important;
}
.wp-block-cover__background {
  background-color: var(--vw-dunkelblau) !important;
  opacity: 0.88 !important;
}
.wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  max-width: var(--vw-max-width);
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}
.wp-block-cover h1,
.wp-block-cover .wp-block-heading {
  color: #ffffff !important;
}
.wp-block-cover h1 em {
  color: var(--vw-orange) !important;
  font-style: italic;
}

/* Hero curved bottom – matches preview */
.wp-block-cover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 80px;
  background: #ffffff;
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 3;
}

/* If hero is followed by yellow section, curve into that color */
.wp-block-cover + .has-background::before {
  display: none;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.wp-block-button__link,
.wp-element-button {
  font-family: var(--vw-font) !important;
  font-weight: 600 !important;
  font-size: 0.92rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--vw-radius) !important;
  text-decoration: none !important;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all var(--vw-transition) !important;
  letter-spacing: 0.01em;
}

/* Primary orange */
.wp-block-button:not([class*="is-style"]) .wp-block-button__link,
.wp-block-button.is-style-vw-primary .wp-block-button__link {
  background: var(--vw-orange) !important;
  color: #ffffff !important;
  border-color: var(--vw-orange) !important;
}
.wp-block-button.is-style-vw-primary .wp-block-button__link:hover {
  background: #d97640 !important;
  border-color: #d97640 !important;
}

/* Secondary dunkelblau */
.wp-block-button.is-style-vw-secondary .wp-block-button__link {
  background: var(--vw-dunkelblau) !important;
  color: #ffffff !important;
  border-color: var(--vw-dunkelblau) !important;
}
.wp-block-button.is-style-vw-secondary .wp-block-button__link:hover {
  background: var(--vw-graublau) !important;
}

/* Outline orange */
.wp-block-button.is-style-vw-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--vw-orange) !important;
  border-color: var(--vw-orange) !important;
}
.wp-block-button.is-style-vw-outline .wp-block-button__link:hover {
  background: var(--vw-orange) !important;
  color: #ffffff !important;
}

/* Ghost (for dark backgrounds) */
.wp-block-button.is-style-vw-ghost .wp-block-button__link {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.45) !important;
}
.wp-block-button.is-style-vw-ghost .wp-block-button__link:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.75) !important;
}

/* ================================================================
   CARDS & BLOCK STYLES
   ================================================================ */
.wp-block-group.is-style-vw-card {
  background: #ffffff;
  border-radius: var(--vw-radius-lg);
  box-shadow: var(--vw-shadow-md);
  transition: all var(--vw-transition);
}
.wp-block-group.is-style-vw-card:hover {
  box-shadow: var(--vw-shadow-lg);
  transform: translateY(-3px);
}
.wp-block-group.is-style-vw-card-orange { background: var(--vw-orange); border-radius: var(--vw-radius-lg); }
.wp-block-group.is-style-vw-card-dark   { background: var(--vw-dunkelblau); border-radius: var(--vw-radius-lg); }

/* ================================================================
   FOOTER
   ================================================================ */
footer.vw-footer,
footer.wp-block-template-part {
  background-color: var(--vw-dunkelblau) !important;
  color: rgba(255,255,255,0.75);
}

/* Make logo white in footer */
footer .wp-block-site-logo img {
  filter: brightness(0) invert(1);
  height: 34px;
  width: auto;
}

/* All text inside footer */
footer p,
footer .wp-block-paragraph,
footer li,
footer a {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.9rem;
}
footer h3,
footer .wp-block-heading {
  color: var(--vw-orange) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem !important;
}
footer a {
  text-decoration: none !important;
  transition: color var(--vw-transition);
}
footer a:hover { color: var(--vw-orange) !important; }

/* Footer lists */
footer ul, footer .wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
footer ul li::before,
footer .wp-block-list li::before { display: none !important; }
footer ul li, footer .wp-block-list li { padding: 0 !important; }

/* ================================================================
   SECTION-LEVEL SPACING – match preview
   ================================================================ */
/* Ensure every top-level group section has good vertical rhythm */
.wp-block-group[style*="background-color"] {
  width: 100%;
}

/* Plattform cards equal height */
.wp-block-columns .wp-block-column .wp-block-group {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wp-block-columns .wp-block-column .wp-block-group .wp-block-buttons {
  margin-top: auto;
}

/* Image styles */
.wp-block-image.is-style-vw-rounded img { border-radius: var(--vw-radius-lg); }
.wp-block-image.is-style-vw-circle img  { border-radius: 50%; aspect-ratio:1; object-fit:cover; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .vw-header-inner { padding: 0 1rem; min-height: 60px; }
  .wp-block-cover::after { height: 50px; }
  .wp-block-cover { min-height: 70vh !important; }
}
@media (max-width: 480px) {
  .wp-block-cover { min-height: 60vh !important; }
  h1 { font-size: 2rem; }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  header, footer { display: none; }
}