/* ============================================================
   Zanzibar Life — Portal-Unterseiten v3.2 "Editorial Travel Magazine"
   Scope: body.zlp (gesetzt in functions.php — NICHT auf Front-Page,
   NICHT in Shop-Isolation /store/..., NICHT auf Dokan-Store-Seiten).
   Spiegel der Homepage-Tokens aus zl-home.css.
   ============================================================ */
body.zlp {
  --zlh-sand: #F5EFE6;
  --zlh-teal: #0E7490;
  --zlh-amber: #D97706;
  --zlh-amber-deep: #B45309;
  --zlh-amber-text: #92400E;
  --zlh-amber-light: #fcd9a8;
  --zlh-navy: #0F172A;
  --zlh-white: #ffffff;
  --zlh-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --zlh-sans: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}
html[lang^="ar"] body.zlp { --zlh-serif: "Noto Naskh Arabic", Georgia, serif; }
/* Leicht getönter Grund statt nacktem Weiß — Inhalte liegen wie auf Papier */
body.zlp { background: #FBF8F3; }

/* ---------- Editorialer Seitenkopf (Cover mit Featured Image) ---------- */
body.zlp .zlp-pagehead.wp-block-cover {
  min-height: clamp(300px, 42vh, 460px);
  display: flex; align-items: flex-end;
  padding: 120px clamp(20px, 4vw, 48px) clamp(28px, 4vw, 44px);
  margin-top: 0;
  background: var(--zlh-navy); /* Seiten ohne Featured Image: ruhige Navy-Bühne */
}
body.zlp .zlp-pagehead .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.22) 45%, rgba(15,23,42,.66) 100%) !important;
  opacity: 1 !important;
}
body.zlp .zlp-pagehead .wp-block-cover__inner-container {
  width: 100%; max-width: 1200px; margin: 0 auto;
}
body.zlp .zlp-pagehead h1 {
  font-family: var(--zlh-serif); font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08;
  letter-spacing: -0.01em; color: var(--zlh-white); margin: 0;
  text-wrap: balance;
  background: none; -webkit-text-fill-color: currentColor;
}

/* ---------- Transparenter Header über dem Seitenkopf ---------- */
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30; background: transparent;
}
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header a,
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header .wp-block-site-title a,
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header button {
  color: var(--zlh-white);
}
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header .wp-block-navigation__responsive-container:not(.is-menu-open),
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content,
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item a {
  color: var(--zlh-white);
}
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header a { text-shadow: 0 1px 10px rgba(15,23,42,.45); }
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header svg { fill: var(--zlh-white); }
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header .wp-block-navigation__responsive-container-open {
  background: rgba(15,23,42,.45); border-radius: 10px; padding: 10px; color: var(--zlh-white);
}
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header .wp-block-navigation__responsive-container-open::before {
  background: var(--zlh-white);
  box-shadow: 0 7px 0 var(--zlh-white), 0 14px 0 var(--zlh-white);
}
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header svg.wc-block-customer-account__account-icon,
body.zlp:has(.zlp-pagehead) .wp-site-blocks > header svg.wc-block-customer-account__account-icon * { color: var(--zlh-white) !important; stroke: var(--zlh-white); }
body.zlp .wp-block-navigation__responsive-container.is-menu-open a { color: inherit; text-shadow: none; }
body.zlp .wp-site-blocks > header .wp-block-site-title,
body.zlp .wp-site-blocks > header .wp-block-site-title a {
  font-family: var(--zlh-serif); font-weight: 600; letter-spacing: -0.01em;
}

/* ---------- Typografie & Alt-Gradient-Neutralisierung ---------- */
body.zlp main h2,
body.zlp main h2.wp-block-heading,
body.zlp main .wp-block-group > h2.wp-block-heading,
body.zlp main .entry-content > h2:first-of-type,
body.zlp main .wp-block-post-content > h2:first-of-type,
body.zlp main .wp-block-group > .has-text-align-center.wp-block-heading {
  font-family: var(--zlh-serif); font-weight: 600; color: var(--zlh-navy);
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.18; letter-spacing: -0.01em;
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor;
  margin-top: 2.4em; margin-bottom: .6em; text-wrap: balance;
}
/* Amber-Akzentlinie über Sektions-Überschriften */
body.zlp main .wp-block-post-content h2::before {
  content: ""; display: block; width: 36px; height: 3px;
  background: var(--zlh-amber); border-radius: 2px; margin-bottom: 14px;
}
body.zlp main h3 { font-family: var(--zlh-serif); font-weight: 600; color: var(--zlh-navy); }
body.zlp main .wp-block-post-content p { line-height: 1.75; color: #334155; max-width: 75ch; }
body.zlp main .zlp-lead {
  font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.7; color: #475569;
  margin-top: 0;
}
body.zlp main .wp-block-post-content { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(64px, 9vw, 110px); }

/* ---------- Buttons (Shimmer/Gradient-Altstil -> ruhige Amber-Pille) ---------- */
body.zlp .wp-block-button__link,
body.zlp .wc-block-components-product-button__button,
body.zlp .wc-block-components-button {
  background: var(--zlh-amber-deep); background-image: none; color: #fff;
  border: none; border-radius: 999px; padding: 13px 28px;
  font-family: var(--zlh-sans); font-weight: 700;
  box-shadow: 0 4px 16px rgba(180,83,9,.28); animation: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.zlp .wp-block-button__link:hover,
body.zlp .wc-block-components-product-button__button:hover,
body.zlp .wc-block-components-button:hover {
  background: var(--zlh-amber-text); background-image: none; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(180,83,9,.36); color: #fff;
}
body.zlp a:focus-visible, body.zlp button:focus-visible {
  outline: 3px solid var(--zlh-teal); outline-offset: 3px; border-radius: 4px;
}

/* ---------- Footer-Altlasten (wie Homepage) ---------- */
body.zlp footer h2.wp-block-heading,
body.zlp footer .wp-block-group > h2.wp-block-heading {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #fff; color: #fff;
  font-family: var(--zlh-sans); font-size: 1rem; margin-top: 0;
}
body.zlp footer::before { background: var(--zlh-amber) !important; }

/* ---------- TranslatePress ---------- */
body.zlp .trp-language-switcher { --text: #0F172A !important; --border-color: rgba(15,23,42,.14) !important; }
/* Floating-Switcher doppelt den Header-Switcher auf allen Portalseiten */
body.zlp .trp-floating-switcher { display: none !important; }

/* ---------- Tours-Widget ([zl_tours]): moderne Foto-Buchungskarten ---------- */
body.zlp #zl-tours { font-family: var(--zlh-sans); max-width: 1200px; }
body.zlp #zl-tours .zlt-loc {
  font-family: var(--zlh-sans); font-weight: 700; font-size: .8rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--zlh-amber-text);
  text-align: left; margin: 34px 0 14px;
}
body.zlp #zl-tours .zlt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; justify-content: stretch;
}
body.zlp #zl-tours .zlt-tile {
  max-width: none; flex: none;
  padding: 0; gap: 0; text-align: left; align-items: stretch;
  background: #fff; border: 1px solid #F0EAE0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(15,23,42,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
body.zlp #zl-tours .zlt-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(15,23,42,.13); }
/* Foto-Kopf der Karte */
body.zlp #zl-tours .zlt-photo { aspect-ratio: 16/10; overflow: hidden; }
body.zlp #zl-tours .zlt-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
body.zlp #zl-tours .zlt-tile:hover .zlt-photo img { transform: scale(1.05); }
/* Emoji-Fallback bekommt dieselbe Kopf-Fläche, wirkt nicht mehr verloren */
body.zlp #zl-tours .zlt-tile .zlt-emoji {
  font-size: 52px; height: auto; line-height: 1; width: 100%;
  aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ECFEFF 0%, var(--zlh-sand) 100%);
}
body.zlp #zl-tours .zlt-tile .zlt-logo { margin: 18px auto 0; }
/* Karten-Inhalt */
body.zlp #zl-tours .zlt-tile-name {
  font-family: var(--zlh-serif); font-weight: 600; color: var(--zlh-navy);
  font-size: 1.18rem; line-height: 1.2; padding: 16px 18px 0; margin: 0;
}
body.zlp #zl-tours .zlt-tile-cap { padding: 4px 18px 0; color: #64748b; }
body.zlp #zl-tours .zlt-tile-price { color: var(--zlh-teal); font-weight: 800; font-size: 1.05rem; padding: 8px 18px 0; }
body.zlp #zl-tours .zlt-tile .zlt-btn { width: auto; margin: 12px 18px 0; }
body.zlp #zl-tours .zlt-tile .zlt-btn + .zlt-btn,
body.zlp #zl-tours .zlt-tile .zlt-btn--ghost { margin-top: 8px; }
body.zlp #zl-tours .zlt-tile > :last-child { margin-bottom: 16px; }
/* Provider-Karten (Logo) bleiben zentriert */
body.zlp #zl-tours .zlt-provider-card { text-align: center; align-items: center; padding: 22px 18px; }
body.zlp #zl-tours .zlt-provider-card .zlt-tile-name { padding: 12px 0 0; }
body.zlp #zl-tours .zlt-provider-card .zlt-tile-cap { padding: 4px 0 0; }
/* Buttons: Buchen = Amber (Conversion), WhatsApp = Teal-Outline */
body.zlp #zl-tours .zlt-btn {
  background: var(--zlh-amber-deep); border-radius: 999px; font-weight: 700;
  padding: 11px 18px; transition: background .2s ease;
}
body.zlp #zl-tours .zlt-btn:hover:not(:disabled) { background: var(--zlh-amber-text); }
body.zlp #zl-tours .zlt-btn--ghost { background: #fff; color: var(--zlh-teal); border: 1.5px solid var(--zlh-teal); }
body.zlp #zl-tours .zlt-btn--ghost:hover:not(:disabled) { background: #ecfeff; }
body.zlp #zl-tours .zlt-card { border-radius: 18px; border-color: #F0EAE0; box-shadow: 0 2px 12px rgba(15,23,42,.05); background: #fff; }
body.zlp #zl-tours .zlt-wa { color: var(--zlh-teal); }

/* ---------- Info-Card-Grid für Inhaltsseiten ---------- */
body.zlp .zlp-infogrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; margin-top: 28px;
}
body.zlp .zlp-infocard {
  background: #fff; border: 1px solid #F0EAE0; border-radius: 18px;
  padding: 26px 28px; box-shadow: 0 2px 12px rgba(15,23,42,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
body.zlp .zlp-infocard:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15,23,42,.11); }
body.zlp .zlp-infocard h3 { margin: 0 0 8px; font-size: 1.3rem; }
body.zlp .zlp-infocard p { margin: 0; max-width: none; }

/* ---------- WooCommerce-Archiv (/shop/) ---------- */
body.zlp .zlp-pagehead-shop h1 { margin: 0; }
body.zlp .wp-block-woocommerce-product-image,
body.zlp .wc-block-components-product-image { border-radius: 14px; overflow: hidden; }
body.zlp .wp-block-woocommerce-product-image img { border-radius: 14px; transition: transform .35s cubic-bezier(.2,.6,.2,1); }
body.zlp .wc-block-product:hover .wp-block-woocommerce-product-image img { transform: scale(1.04); }
body.zlp .wc-block-product .wp-block-post-title a,
body.zlp .wc-block-product .wp-block-post-title {
  font-family: var(--zlh-sans); font-weight: 600; color: var(--zlh-navy); text-decoration: none;
  background: none; -webkit-text-fill-color: currentColor;
}
body.zlp .wc-block-components-product-price { color: var(--zlh-teal); font-weight: 700; }
body.zlp .wc-block-grid__product-onsale, body.zlp .wc-block-components-sale-badge { background: var(--zlh-amber-deep); color: #fff; border: none; border-radius: 999px; }

/* ---------- Dokan-Store-Liste (nur Kosmetik, Layout unangetastet) ---------- */
body.zlp .dokan-btn.dokan-btn-theme {
  background: var(--zlh-teal) !important; border-color: var(--zlh-teal) !important; color: #fff !important;
  border-radius: 999px !important;
}
body.zlp .dokan-btn.dokan-btn-theme:hover { background: #155e75 !important; border-color: #155e75 !important; }
body.zlp .dokan-seller-listing .featured-favourite span,
body.zlp .dokan-seller-listing .featured-label { background: var(--zlh-amber-deep) !important; color: #fff; }
body.zlp .dokan-seller-listing .dokan-single-seller .dokan-store-wrap {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(15,23,42,.07);
  transition: transform .22s ease, box-shadow .22s ease;
}
body.zlp .dokan-seller-listing .dokan-single-seller:hover .dokan-store-wrap { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15,23,42,.13); }

/* ---------- WooCommerce Coming-Soon-Platzhalter im Markenlook ---------- */
body.zlp h1.has-cardo-font-family { font-family: var(--zlh-serif); font-weight: 600; color: var(--zlh-navy); }
body.zlp p.has-inter-font-family { font-family: var(--zlh-sans); color: #475569; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.zlp #zl-tours .zlt-tile, body.zlp .wp-block-button__link,
  body.zlp .wp-block-woocommerce-product-image img,
  body.zlp #zl-tours .zlt-photo img, body.zlp .zlp-infocard,
  body.zlp .dokan-seller-listing .dokan-single-seller .dokan-store-wrap { transition: none; }
  body.zlp #zl-tours .zlt-tile:hover, body.zlp .zlp-infocard:hover,
  body.zlp .wp-block-button__link:hover,
  body.zlp .dokan-seller-listing .dokan-single-seller:hover .dokan-store-wrap { transform: none; }
  body.zlp .wc-block-product:hover .wp-block-woocommerce-product-image img,
  body.zlp #zl-tours .zlt-tile:hover .zlt-photo img { transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  /* v3.5: Header ist mobil nur noch eine Zeile (~64px) — Cover kompakter,
     Titel bekommt mehr Buehne */
  body.zlp .zlp-pagehead.wp-block-cover { min-height: 216px; padding: 84px 20px 24px; }
  body.zlp .zlp-pagehead h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); }
  body.zlp main .wp-block-post-content { padding-top: 32px; }
}