/* ------------------------------------------------------------------ */
/*  Naturlust – globales Theme-CSS                                     */
/*                                                                     */
/*  Design-Token (Farben, Schriftgrößen, Spacing) liegen in            */
/*  theme.json. Diese Datei enthält ausschließlich Sonderfälle, die    */
/*  sich nicht sauber in theme.json abbilden lassen: das absolut       */
/*  positionierte Skizzen-Logo (Stempel auf der Karte), die runden     */
/*  Kategorie-Buttons und die Wald-Silhouette als Seitenfuß.           */
/* ------------------------------------------------------------------ */

:root {
  --naturlust-page-padding: clamp(1.25rem, 4vw, 3rem);
}

/* --- Hintergrund: skizzierte Landkarte, durchgehend bis zum Footer -- */

body {
  background-color: var(--wp--preset--color--paper);
  background-image:
    linear-gradient(rgba(247, 241, 227, 0.45), rgba(247, 241, 227, 0.7)),
    url(../images/brand/map-background.jpg);
  background-size: auto, cover;
  background-position: center top, center top;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}

@media (max-width: 800px) {
  body {
    background-attachment: scroll, scroll;
    background-size: auto, 200% auto;
  }
}

/* --- Header: Site-Title + Tagline zentriert, Hamburger als kleiner   */
/*     Anker oben links. Position absolut, damit der Titel optisch     */
/*     mittig auf der Seite steht (wie im Rendering).                  */

.naturlust-header {
  position: relative;
}

.naturlust-header__center {
  text-align: center;
  margin: 0 auto;
}

.naturlust-header__center .wp-block-site-title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.naturlust-header__center .wp-block-site-tagline {
  margin-top: 0.25rem;
  color: var(--wp--preset--color--ink-soft);
  opacity: 0.85;
}

/* Hamburger-Anker oben links: 40x40 Tap-Target, dezentes 3-Linien-    */
/* Icon im Schwarz/Tinte. Beim Aufklappen wird ein Vollbild-Overlay    */
/* in Pergament-Farbe angezeigt.                                       */

.naturlust-hamburger {
  position: absolute;
  top: clamp(0.9rem, 1.4vw, 1.4rem);
  left: var(--naturlust-page-padding);
  z-index: 20;
}

.naturlust-hamburger .wp-block-navigation__responsive-container-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--wp--preset--color--ink);
  transition: background-color 150ms ease;
}

.naturlust-hamburger .wp-block-navigation__responsive-container-open:hover,
.naturlust-hamburger .wp-block-navigation__responsive-container-open:focus-visible {
  background: rgba(31, 42, 35, 0.08);
}

.naturlust-hamburger .wp-block-navigation__responsive-container-open svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--paper);
  background-image:
    linear-gradient(rgba(247, 241, 227, 0.6), rgba(247, 241, 227, 0.6)),
    url(../images/brand/map-background.jpg);
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: scroll, scroll;
}

/* Overlay: flex column, center the nav items vertically */
.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Close button area: pull out of flow so it doesn't push nav down */
.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: auto !important;
  pointer-events: none;
}

.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  pointer-events: auto;
}

/* Close button: top-right corner */
.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: clamp(0.9rem, 1.4vw, 1.4rem) !important;
  right: var(--naturlust-page-padding) !important;
  left: auto !important;
  pointer-events: auto;
}

/* Nav items: centered column, the only flex child of the overlay */
.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: auto;
  text-align: center;
}

.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open a {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--ink);
  text-decoration: none !important;
  opacity: 0.9;
  transition: color 180ms ease, opacity 180ms ease;
  display: block;
  line-height: 1.2;
}

.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open a:hover,
.naturlust-hamburger .wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
  color: var(--wp--preset--color--forest);
  opacity: 1;
}

/* Close button: top-right, ink-colored */
.naturlust-hamburger .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: clamp(0.9rem, 1.4vw, 1.4rem);
  right: var(--naturlust-page-padding);
  color: var(--wp--preset--color--ink);
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 150ms ease;
}

.naturlust-hamburger .wp-block-navigation__responsive-container-close:hover,
.naturlust-hamburger .wp-block-navigation__responsive-container-close:focus-visible {
  background: rgba(31, 42, 35, 0.08);
}

.naturlust-hamburger .wp-block-navigation__responsive-container-close svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* --- Site-Stempel: rundes Logo links neben dem Hero, schwebend ------ */
/*                                                                     */
/*  position:relative auf dem post-content macht den Inhalt zur        */
/*  containing block für den absolut positionierten Stempel.           */
/*  Damit richtet sich top: spacing-20 exakt am Hero-margin-top aus.  */

.entry-content.wp-block-post-content {
  position: relative;
}

.naturlust-stamp {
  position: absolute;
  top: var(--wp--preset--spacing--20); /* gleicher Wert wie Hero margin-top */
  left: clamp(0.5rem, 2vw, 2.5rem);
  width: clamp(56px, 9vw, 130px);
  height: auto;
  z-index: 10;
  display: inline-block;
  line-height: 0;
}

.naturlust-stamp img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  .naturlust-stamp {
    position: static;
    margin: 0 auto 1rem;
    display: block;
    width: 90px;
  }
}

/* --- Hero-Bild auf der Startseite ----------------------------------- */
/*                                                                     */
/*  Maximal 70% der Viewport-Breite, zentriert. Abgerundete Ecken,     */
/*  dezent.                                                            */

.naturlust-hero {
  display: block;
  width: min(72%, 880px);
  margin: 0 auto;
}

.naturlust-hero img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

@media (max-width: 800px) {
  .naturlust-hero {
    width: min(92%, 600px);
  }
}

/* --- Kategorie-Kachel-Buttons --------------------------------------- */
/*                                                                     */
/*  Fünf-Spalten-Raster: je 2 Kacheln links/rechts, kleines Logo in   */
/*  der Mitte (Rendering zeigt einen kleinen Stempel-Kreis zentriert). */

.naturlust-category-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
  width: min(92%, 900px);
  max-width: 900px; /* hebt constrained-layout max-width:720px auf */
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.naturlust-category-tiles__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease;
}

.naturlust-category-tiles__item:hover,
.naturlust-category-tiles__item:focus-visible {
  transform: translateY(-4px);
}

.naturlust-category-tiles__image {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(31, 42, 35, 0.18);
  background-color: var(--wp--preset--color--paper-shadow);
}

.naturlust-category-tiles__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.naturlust-category-tiles__label {
  margin-top: 0.6rem;
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 500;
}

@media (max-width: 700px) {
  .naturlust-category-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* --- Footer: Wald-Silhouette über dem Map-Hintergrund --------------- */
/*                                                                     */
/*  Kein eigener Footer-Block. Die Map zieht durch bis zum Seitenfuß,  */
/*  die Wald-Silhouette liegt als transparente PNG-Auflage darüber.    */
/*  Das Menü und das Copyright stehen IN der schwarz gefüllten         */
/*  Wald-Fläche der Silhouette.                                        */

.naturlust-footer {
  position: relative;
  margin: 0;
  padding-top: clamp(140px, 18vw, 280px);
  padding-bottom: clamp(0.75rem, 1.8vw, 1.5rem);
  padding-left: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
  background-color: transparent;
  background-image: url(../images/brand/footer-silhouette.png);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 130% auto;
  color: var(--wp--preset--color--paper);
}

@media (max-width: 800px) {
  .naturlust-footer {
    background-size: 200% auto;
    padding-top: clamp(110px, 28vw, 220px);
  }
}

.naturlust-footer__grid {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  width: 100%;
}

.naturlust-footer__start {
  margin-left: clamp(3rem, 30vw, 30rem); /* schiebt Nav in die dunkle Waldfläche */
  flex-shrink: 0;
}

.naturlust-footer__end {
  margin-left: auto; /* Copyright an den rechten Rand */
  flex-shrink: 0;
  text-align: right;
}

/* Nav-Items im Footer immer einzeilig */
.naturlust-footer .wp-block-navigation .wp-block-navigation__container {
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.naturlust-footer .wp-block-navigation a {
  color: var(--wp--preset--color--paper);
  opacity: 0.9;
  text-decoration: none;
}

.naturlust-footer .wp-block-navigation a:hover,
.naturlust-footer .wp-block-navigation a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.naturlust-copy {
  margin: 0;
  opacity: 0.85;
}

@media (max-width: 700px) {
  .naturlust-footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.5rem;
  }
  .naturlust-footer__start {
    justify-self: center;
    padding-left: 0;
  }
  .naturlust-footer__end {
    justify-self: center;
  }
}