/*
Theme Name: Eva Maria Bieda
Theme URI: https://bieda.me
Author: Eva Maria Bieda
Description: A bilingual full-site editing theme for conflict resolution and mediation.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: eva-maria-bieda
*/

:root {
  --emb-ink: #173a35;
  --emb-forest: #173f38;
  --emb-sage: #9caf8e;
  --emb-rust: #bd5b3a;
  --emb-cream: #f5f0e7;
  --emb-paper: #fbf9f4;
  --emb-line: rgba(23, 58, 53, .17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--emb-paper); color: var(--emb-ink); }
a { color: inherit; text-decoration: none; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
.lang-de { display: none; }
html[data-language="de"] .lang-en { display: none !important; }
html[data-language="de"] .lang-de { display: block; }
html[data-language="de"] .lang-de.is-layout-flex { display: flex; }
html[data-language="de"] .lang-de.is-layout-grid { display: grid; }

.emb-header {
  min-height: 90px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 18px 5vw;
  border-bottom: 1px solid var(--emb-line);
  background: rgba(251, 249, 244, .96);
  position: sticky;
  top: 0;
  z-index: 20;
}
.emb-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 600; letter-spacing: -.035em; }
.emb-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50% 50% 50% 8px; background: var(--emb-rust); color: white; font-family: Georgia, serif; font-size: 21px; font-style: italic; }
.emb-nav { display: flex; justify-content: center; gap: 30px; font-size: 13px; }
.emb-nav a { border-bottom: 1px solid transparent; padding-bottom: 5px; }
.emb-nav a:hover, .emb-nav a:focus-visible { border-color: var(--emb-rust); }
.emb-header-tools { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.emb-language { display: flex; align-items: center; gap: 6px; }
.emb-language button { border: 0; border-bottom: 1px solid transparent; padding: 6px 2px; background: transparent; color: #82938f; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.emb-language button.is-active { border-color: var(--emb-rust); color: var(--emb-ink); }
.emb-header-cta { border-bottom: 1px solid var(--emb-ink); padding-bottom: 5px; font-size: 13px; }

.emb-hero { min-height: calc(100vh - 90px); display: grid; grid-template-columns: 58% 42%; position: relative; overflow: hidden; }
.emb-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 10vh 7vw; }
.emb-eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 30px; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.emb-eyebrow:before { content: ""; width: 27px; height: 1px; background: var(--emb-rust); }
.emb-hero h1, .emb-section-title, .emb-quote { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.emb-hero h1 { max-width: 800px; margin: 0; font-size: clamp(68px, 8.5vw, 138px); letter-spacing: -.07em; line-height: .8; }
.emb-hero h1 em, .emb-section-title em { color: var(--emb-rust); font-weight: 400; }
.emb-hero-intro { max-width: 610px; margin: 42px 0 0 15%; color: #49635f; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.7; }
.emb-actions { display: flex; align-items: center; gap: 28px; margin: 36px 0 0 15%; }
.emb-button .wp-block-button__link, .emb-button-link { display: inline-flex; justify-content: space-between; min-width: 250px; padding: 17px 20px; border-radius: 0; background: var(--emb-forest); color: white; font-size: 12px; font-weight: 700; }
.emb-text-link { border-bottom: 1px solid var(--emb-line); padding: 8px 0; font-size: 12px; }
.emb-hero-art { min-height: 620px; position: relative; overflow: hidden; background: #dce2d5; }
.emb-shape { position: absolute; }
.emb-shape-one { width: 76%; aspect-ratio: 1; left: 11%; top: 7%; border-radius: 50%; background: var(--emb-sage); }
.emb-shape-two { width: 55%; height: 76%; left: -6%; bottom: -23%; border-radius: 50% 50% 0 0; background: var(--emb-rust); transform: rotate(-15deg); }
.emb-shape-three { width: 53%; height: 58%; right: -5%; bottom: 0; border-radius: 60% 0 0 0; background: var(--emb-cream); }
.emb-art-note { position: absolute; z-index: 2; right: 9%; bottom: 8%; margin: 0; font-family: Georgia, serif; font-size: clamp(22px, 2.3vw, 37px); font-style: italic; line-height: 1.05; }

.emb-trust { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 30px 7vw; border-bottom: 1px solid var(--emb-line); background: var(--emb-cream); }
.emb-trust > p { margin: 0; font-family: Georgia, serif; font-size: 24px; font-style: italic; }
.emb-trust-points { display: flex; gap: 30px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.emb-trust-points span:before { content: "✦"; margin-right: 9px; color: var(--emb-rust); }

.emb-section { padding: 120px 7vw; }
.emb-section-head { display: grid; grid-template-columns: .65fr 1.15fr .8fr; align-items: end; gap: 48px; margin-bottom: 72px; }
.emb-section-title { margin: 0; font-size: clamp(56px, 6vw, 96px); letter-spacing: -.055em; line-height: .9; }
.emb-section-intro { margin: 0; color: #60726f; font-size: 14px; line-height: 1.75; }
.emb-services { border-top: 1px solid var(--emb-line); }
.emb-service { display: grid; grid-template-columns: 70px 1.2fr 1.8fr; gap: 25px; align-items: center; min-height: 140px; border-bottom: 1px solid var(--emb-line); }
.emb-number { color: var(--emb-rust); font-family: Georgia, serif; font-style: italic; }
.emb-service h3, .emb-step h3 { margin: 0; font-family: Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1.05; }
.emb-service p { margin: 0; color: #60726f; font-size: 13px; line-height: 1.7; }

.emb-how { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; background: var(--emb-forest); color: white; }
.emb-how-intro { align-self: start; position: sticky; top: 125px; }
.emb-how .emb-section-title em { color: #d9a28f; }
.emb-how .emb-section-intro { max-width: 430px; margin: 36px 0 0 15%; color: #bed0cb; }
.emb-steps { border-top: 1px solid rgba(255,255,255,.18); }
.emb-step { display: grid; grid-template-columns: 65px 1fr; gap: 20px; padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.emb-step p { margin: 12px 0 0; color: #bed0cb; font-size: 13px; line-height: 1.75; }

.emb-about { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; align-items: center; background: var(--emb-cream); }
.emb-about-mark { aspect-ratio: 1; display: grid; place-items: center; position: relative; border: 1px solid var(--emb-line); border-radius: 50% 50% 50% 14%; }
.emb-about-mark:before, .emb-about-mark:after { content: ""; position: absolute; inset: 8%; border: 1px solid var(--emb-rust); border-radius: inherit; transform: rotate(10deg); }
.emb-about-mark:after { inset: 17%; border-color: var(--emb-sage); transform: rotate(-12deg); }
.emb-about-mark strong { z-index: 1; color: var(--emb-rust); font-family: Georgia, serif; font-size: 140px; font-style: italic; }
.emb-quote { margin: 0 0 32px; font-size: clamp(40px, 4.2vw, 66px); letter-spacing: -.045em; line-height: 1.02; }
.emb-about-copy > p { color: #536965; line-height: 1.8; }
.emb-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.emb-pills span { padding: 9px 15px; border: 1px solid var(--emb-line); border-radius: 30px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.emb-insights { background: var(--emb-paper); }
.emb-insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--emb-line); }
.emb-insight-card { padding: 32px 30px 34px 0; border-bottom: 1px solid var(--emb-line); }
.emb-insight-card + .emb-insight-card { padding-left: 30px; border-left: 1px solid var(--emb-line); }
.emb-insight-card h3 { min-height: 78px; margin: 18px 0; font-family: Georgia, serif; font-size: 30px; line-height: 1.05; }
.emb-insight-card p { color: #60726f; font-size: 13px; line-height: 1.7; }
.emb-video { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; margin-top: 70px; padding: 50px; background: var(--emb-cream); }
.emb-video-placeholder { aspect-ratio: 16/9; display: grid; place-items: center; background: var(--emb-forest); color: white; font-size: 44px; }
.emb-video h3 { margin: 0 0 18px; font-family: Georgia, serif; font-size: 42px; font-weight: 500; }
.emb-video p { color: #60726f; line-height: 1.75; }

.emb-cta { padding: 110px 7vw; background: var(--emb-rust); color: white; text-align: center; }
.emb-cta .emb-section-title { font-size: clamp(65px, 7.5vw, 118px); }
.emb-cta p { max-width: 610px; margin: 30px auto; color: #f8e4dc; line-height: 1.75; }
.emb-cta .wp-block-button__link { background: var(--emb-paper); color: var(--emb-forest); }

.emb-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; align-items: center; padding: 50px 7vw 28px; background: #0d2d28; color: white; }
.emb-footer p { margin: 0; color: #abc0ba; font-size: 12px; text-align: center; }
.emb-footer-links { display: flex; justify-content: flex-end; gap: 24px; font-size: 11px; }
.emb-copyright { grid-column: 1/-1; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); color: #78938c; font-size: 9px; letter-spacing: .08em; }

.emb-content { max-width: 920px; margin: 0 auto; padding: 100px 24px; }
.emb-content h1 { font-family: Georgia, serif; font-size: clamp(54px, 7vw, 92px); line-height: .92; }
.emb-content .wp-block-post-content { font-size: 17px; line-height: 1.8; }
.emb-post-list { max-width: 1100px; margin: 0 auto; padding: 90px 24px; }
.emb-post-list .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.emb-post-list .wp-block-post { padding: 28px; border: 1px solid var(--emb-line); background: var(--emb-paper); }

@media (max-width: 980px) {
  .emb-header { grid-template-columns: 1fr auto; }
  .emb-nav { display: none; }
  .emb-hero { min-height: auto; grid-template-columns: 1fr; }
  .emb-hero-art { min-height: 500px; }
  .emb-section-head, .emb-how, .emb-about { grid-template-columns: 1fr; }
  .emb-how-intro { position: static; }
  .emb-how .emb-section-intro { margin-left: 0; }
  .emb-insights-grid { grid-template-columns: 1fr; }
  .emb-insight-card + .emb-insight-card { padding-left: 0; border-left: 0; }
  .emb-video { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .emb-header { min-height: 74px; padding: 14px 22px; }
  .emb-brand { font-size: 17px; }
  .emb-header-cta { display: none; }
  .emb-hero-copy, .emb-section, .emb-cta { padding: 78px 22px; }
  .emb-hero h1 { font-size: 65px; }
  .emb-hero-intro, .emb-actions { margin-left: 0; }
  .emb-actions { align-items: stretch; flex-direction: column; }
  .emb-hero-art { min-height: 380px; }
  .emb-trust { align-items: flex-start; flex-direction: column; padding: 28px 22px; }
  .emb-trust-points { flex-wrap: wrap; gap: 16px 24px; }
  .emb-section-title { font-size: 53px; }
  .emb-service { grid-template-columns: 38px 1fr; padding: 28px 0; }
  .emb-service p { grid-column: 2; }
  .emb-step { grid-template-columns: 40px 1fr; }
  .emb-about-mark strong { font-size: 105px; }
  .emb-video { margin-top: 50px; padding: 28px 22px; }
  .emb-footer { grid-template-columns: 1fr; padding: 42px 22px 24px; }
  .emb-footer p { text-align: left; }
  .emb-footer-links { justify-content: flex-start; }
  .emb-post-list .wp-block-post-template { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}