/*
Theme Name: TEJ – The Emotional Journey
Theme URI: https://wptej.datanauten.de/
Author: Datanauten
Author URI: https://datanauten.de/
Description: Block theme for The Emotional Journey (Petra Dambeck-Winter, Berlin). Cream/salmon/petrol palette with custom Leafy Extended display font. All sections are locked block patterns – text & images stay editable in Gutenberg, layout is fixed.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tej
Tags: full-site-editing, block-theme, one-column, custom-colors, custom-logo, custom-menu, editor-style, threaded-comments, translation-ready
*/

/* Smooth scroll for in-page anchor nav */
html { scroll-behavior: smooth; }

/* ── Divi-style outline button (slides in arrow on hover) ───────── */
.wp-block-button.is-style-tej-outline > .wp-block-button__link {
  display: inline-block;
  position: relative;
  padding: .4em 1em;
  font-size: 15.5px;
  font-weight: 600;
  font-family: var(--wp--preset--font-family--open-sans), Arial, sans-serif;
  color: var(--wp--preset--color--salmon);
  border: 2px solid var(--wp--preset--color--salmon);
  background: transparent;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: padding .25s ease, background .2s ease;
  overflow: hidden;
}
.wp-block-button.is-style-tej-outline > .wp-block-button__link::after {
  content: '→';
  display: inline-block;
  opacity: 0;
  position: absolute;
  right: .6em;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .2s;
}
.wp-block-button.is-style-tej-outline > .wp-block-button__link:hover {
  padding: .4em 2em .4em 1em;
  background: rgba(254, 159, 129, .08);
  text-decoration: none;
}
.wp-block-button.is-style-tej-outline > .wp-block-button__link:hover::after {
  opacity: 1;
}

/* Filled variant */
.wp-block-button.is-style-tej-filled > .wp-block-button__link {
  display: inline-block;
  position: relative;
  padding: .4em 1em;
  font-size: 15.5px;
  font-weight: 600;
  background: var(--wp--preset--color--salmon);
  color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--salmon);
  border-radius: 3px;
  text-decoration: none;
  transition: padding .25s ease, background .2s ease;
}
.wp-block-button.is-style-tej-filled > .wp-block-button__link::after {
  content: '→';
  display: inline-block;
  opacity: 0;
  position: absolute;
  right: .6em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wp--preset--color--white);
  transition: opacity .2s;
}
.wp-block-button.is-style-tej-filled > .wp-block-button__link:hover {
  padding: .4em 2em .4em 1em;
  background: #f08060;
  border-color: #f08060;
}
.wp-block-button.is-style-tej-filled > .wp-block-button__link:hover::after { opacity: 1; }

/* On-dark outline variant (used in CTA banner) */
.wp-block-button.is-style-tej-on-dark > .wp-block-button__link {
  display: inline-block;
  position: relative;
  padding: .4em 1em;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--white);
  background: transparent;
  border-radius: 3px;
  text-decoration: none;
  transition: padding .25s ease, background .2s ease;
}
.wp-block-button.is-style-tej-on-dark > .wp-block-button__link::after {
  content: '→';
  display: inline-block;
  opacity: 0;
  position: absolute;
  right: .6em;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .2s;
}
.wp-block-button.is-style-tej-on-dark > .wp-block-button__link:hover {
  padding: .4em 2em .4em 1em;
  background: rgba(255, 255, 255, .12);
}
.wp-block-button.is-style-tej-on-dark > .wp-block-button__link:hover::after { opacity: 1; }

/* ── Tiny utility tags used inside patterns ─────────────────────── */
.tej-eyebrow {
  font-family: var(--wp--preset--font-family--open-sans), Arial, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--salmon);
  margin-bottom: 10px;
  display: block;
}
.has-petrol-background-color .tej-eyebrow { color: rgba(255,255,255,.55); }

.tej-emotion-pill {
  display: inline-block;
  padding: 4px 12px;
  background: var(--wp--preset--color--salmon);
  color: var(--wp--preset--color--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 14px;
}

.tej-space-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  padding: 32px 26px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.tej-space-card .tej-space-meta {
  font-size: 13px;
  color: var(--wp--preset--color--text);
  margin-top: auto;
}
.tej-space-card .tej-space-price {
  font-family: var(--wp--preset--font-family--leafy-extended), Georgia, serif;
  font-size: 1.6rem;
  color: var(--wp--preset--color--salmon);
  margin-top: 8px;
}

.tej-quote-tile {
  padding: 22px 24px;
  background: var(--wp--preset--color--white);
  border-left: 3px solid var(--wp--preset--color--salmon);
  font-style: italic;
  color: var(--wp--preset--color--text);
}

.tej-team-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}

.tej-preis-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.tej-preis-row:last-child { border-bottom: none; }
.tej-preis-row .tej-preis-name { color: var(--wp--preset--color--text); }
.tej-preis-row .tej-preis-price {
  font-family: var(--wp--preset--font-family--leafy-extended), Georgia, serif;
  font-size: 1.25rem;
  color: var(--wp--preset--color--salmon);
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.tej-topbar {
  background: var(--wp--preset--color--white);
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: 12px;
}
.tej-topbar a {
  color: #aaa;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tej-topbar a:hover { color: var(--wp--preset--color--ink); }

/* ── Petra fade/clip toggle (SSR-rendered patterns use details/summary instead of JS) ─ */
.tej-petra-toggle[open] summary::after { content: '× Weniger'; }
.tej-petra-toggle summary { cursor: pointer; list-style: none; }
.tej-petra-toggle summary::-webkit-details-marker { display: none; }
.tej-petra-toggle summary::after {
  content: '+ Mehr lesen';
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--open-sans), Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--salmon);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 14px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .tej-space-card { padding: 24px 20px; }
}