/* She Rises UX polish — loaded after Next CSS */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --ux-tap: 44px;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  /* Dual gold: deeper brass on cream; soft gold on dark green/hero */
  --gold: #b07d3a;
  --gold-soft: #e7bd88;
}

/* Override Next hardcoded #c89a5d eyebrows on cream/paper */
.eyebrow {
  color: var(--gold) !important;
}

.eyebrow.light,
.hero .eyebrow,
.homeHeader .eyebrow {
  color: var(--gold-soft) !important;
}

/* Warmer hero shade (desktop) — olive, not cool #082d20 mulch */
.heroShade {
  background: linear-gradient(
    90deg,
    #0a3326e8 0%,
    #123c2cac 42%,
    #1a2e241f 100%
  ) !important;
}

/* Typography (replace Arial / Georgia sitewide) */
body {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
.themeCopy h3,
.brand strong,
.partnerTile strong,
.saltWideCaption h3,
.quoteBlock,
blockquote {
  font-family: var(--font-display) !important;
  font-optical-sizing: auto;
}

.eyebrow,
.brand small,
.siteHeader nav a,
.button,
.langPill button,
.themeCopy span {
  font-family: var(--font-body) !important;
}

/* Desktop: tighter section intros (less empty cream space) */
@media (min-width: 901px) {
  .sectionIntro,
  .partnersIntro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 36px;
  }

  .sectionIntro > div,
  .partnersIntro > div {
    max-width: 34rem;
  }

  .sectionIntro h2,
  .partnersIntro h2 {
    max-width: 16ch;
    font-size: clamp(2.35rem, 3.5vw, 3.45rem);
    line-height: 1.08;
  }

  .sectionIntro > p {
    max-width: 38ch;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--ink, #173129) 78%, transparent);
  }

  .partnersIntro > a {
    margin-top: 2px;
  }

  .themes {
    padding: 72px 0 90px;
  }

  .hero h1 {
    font-size: clamp(2.7rem, 4.6vw, 4.35rem);
    max-width: 16ch;
  }

  h1 {
    font-size: clamp(2.9rem, 4.8vw, 4.6rem);
  }
}

/* Desktop / tablet: balanced theme card grid (no uneven wide cards) */
@media (min-width: 641px) {
  .themeGrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
  }

  .themeCard,
  .themeCard.wide {
    grid-column: span 2;
    min-height: 340px;
  }

  /* Last two cards share the row evenly */
  .themeGrid > .themeCard:nth-child(4),
  .themeGrid > .themeCard:nth-child(5) {
    grid-column: span 3;
    min-height: 360px;
  }

  .themeCopy h3 {
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  }

  .themeCopy {
    padding: 26px 28px;
  }

  .themeCopy p {
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 34ch;
  }
}

@media (min-width: 1100px) {
  .themeCard,
  .themeCard.wide {
    min-height: 360px;
  }

  .themeGrid > .themeCard:nth-child(4),
  .themeGrid > .themeCard:nth-child(5) {
    min-height: 380px;
  }
}

/* Clear focus for keyboard users */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold, #b07d3a);
  outline-offset: 3px;
}

/* Active navigation */
.siteHeader nav a.is-active {
  color: var(--gold, #b07d3a);
  box-shadow: inset 0 -2px 0 var(--gold, #b07d3a);
}

.siteHeader.homeHeader nav a.is-active {
  color: var(--gold-soft, #e7bd88);
  box-shadow: inset 0 -2px 0 var(--gold-soft, #e7bd88);
}

/* Stronger tap targets on mobile nav */
@media (max-width: 900px) {
  .siteHeader .nav nav a {
    min-height: var(--ux-tap);
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .langPill button {
    min-height: var(--ux-tap);
    min-width: 44px;
  }

  .uxCtaBand .button,
  .uxContactActions .button,
  .uxContactForm .button {
    width: 100%;
    min-height: 52px;
  }

  /* Hero CTAs: keep tap size, but do not stretch into a full-bleed CTA band */
  .hero .heroActions .button {
    min-height: 48px;
  }
}

/* Soft-settle hero video: keep shade covering until first frame paints */
.hero video {
  opacity: 0;
  transition: opacity 0.55s ease;
}

.hero video.is-ready {
  opacity: 1;
}

.hero.heroVideoReady video {
  opacity: 1;
}

/* Mobile homepage hero: video/photo first, then copy — not a green CTA panel */
@media (max-width: 640px) {
  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    align-items: flex-end;
  }

  .heroContent {
    padding: 108px 0 28px;
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(1.85rem, 7vw, 2.25rem);
    line-height: 1.12;
    max-width: 15ch;
    overflow-wrap: break-word;
  }

  .heroLead {
    margin-top: 14px;
    font-size: 0.98rem;
    line-height: 1.45;
    max-width: 34ch;
  }

  .hero .heroActions {
    margin-top: 18px;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }

  .hero .heroActions .button {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  /* Warmer mobile shade — readable text, no cool black-green puddle */
  .heroShade {
    background: linear-gradient(
      180deg,
      #0a3326a6 0%,
      #0a332655 36%,
      #0d2f24d4 100%
    ) !important;
  }

  .hero video {
    display: block !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partnerTrack {
    animation: none !important;
    transform: none !important;
  }

  .themeCard img {
    transition: none !important;
  }

  .hero video {
    opacity: 1;
    transition: none;
  }
}

/* CTA band before footer */
.uxCtaBand {
  background: linear-gradient(135deg, var(--green, #0f4a36), var(--green2, #1f654c));
  color: #fff;
  padding: 72px 0;
}

.uxCtaBand h2 {
  max-width: 760px;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  color: #fff;
}

.uxCtaBand p {
  max-width: 620px;
  margin: 16px 0 0;
  color: #ffffffd9;
  font-size: 1.1rem;
}

.uxCtaBand .heroActions {
  margin-top: 28px;
}

.uxCtaBand .lightButton {
  color: var(--green, #0f4a36);
  background: #fff;
}

.uxCtaBand .outlineButton {
  border: 1px solid #fff;
  color: #fff;
}

/* Homepage closing band — slightly tighter than inner pages */
.uxCtaBand.uxCtaBand--home {
  padding: 56px 0;
}

/* Kontakt actions */
.uxContactLead {
  max-width: 520px;
  margin: 0 0 28px;
  color: #ffffffe6;
  font-size: 1.08rem;
}

.uxContactActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.contactBox .uxContactActions .lightButton {
  color: var(--green, #0f4a36);
  background: #fff;
}

.contactBox .uxContactActions .outlineButton {
  border: 1px solid #fff;
  color: #fff;
}

.uxContactEmail {
  opacity: 0.85;
  font-size: 0.98rem;
}

/* Contact form */
.uxContactForm {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid #ffffff33;
  display: grid;
  gap: 14px;
  max-width: 520px;
}

.uxContactForm label {
  display: grid;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}

.uxContactForm input,
.uxContactForm textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #f7f2e8;
  color: #173129;
  padding: 12px 14px;
  font: inherit;
}

.uxContactForm input::placeholder,
.uxContactForm textarea::placeholder {
  color: #17312999;
}

.uxContactForm input:focus-visible,
.uxContactForm textarea:focus-visible {
  outline: 2px solid var(--gold-soft, #e7bd88);
  outline-offset: 2px;
}

.uxContactForm textarea {
  min-height: 130px;
  resize: vertical;
}

.uxContactForm .button {
  justify-self: start;
  cursor: pointer;
  border: 0;
  margin-top: 4px;
}

.uxContactForm .lightButton {
  color: var(--green, #0f4a36);
  background: #fff;
}

.uxHoney {
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.uxFormNote {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #ffffffb8;
  line-height: 1.45;
}

.uxFormStatus {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff22;
  font-size: 0.95rem;
}

.uxFormStatus.is-ok {
  border: 1px solid #9adbb5;
}

.uxFormStatus.is-err {
  border: 1px solid #f0a8a8;
}

footer a[href*="facebook.com"],
footer a[href*="linktr.ee"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Upcoming events band (homepage) */
.uxEvents {
  padding: 72px 0 80px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream, #f7f1e6) 88%, #fff) 0%, var(--cream, #f7f1e6) 100%);
  border-top: 1px solid color-mix(in srgb, var(--gold, #b07d3a) 28%, transparent);
}

.uxEvents .sectionIntro {
  margin-bottom: 28px;
}

.uxEventGrid {
  display: grid;
  gap: 16px;
}

.uxEventCard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--green, #0f4a36) 16%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, #fff 72%, var(--cream, #f7f1e6));
}

.uxEventDate {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold, #b07d3a);
}

.uxEventCard h3 {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.25;
  color: var(--ink, #173129);
  text-transform: none;
}

.uxEventCard .button {
  flex-shrink: 0;
  background: var(--green, #0f4a36);
  border: 1px solid var(--green, #0f4a36);
  color: #fff;
}

.uxEventCard .button:hover {
  background: var(--green2, #1f654c);
  border-color: var(--green2, #1f654c);
  color: #fff;
}

.uxEventsMore {
  margin: 22px 0 0;
  font-size: 0.98rem;
  font-weight: 600;
}

.uxEventsMore a {
  color: var(--green, #0f4a36);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 901px) {
  .uxEventGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .uxEventCard {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 210px;
    padding: 26px 28px;
  }

  .uxEventCard h3 {
    max-width: 18ch;
  }
}

@media (max-width: 640px) {
  .uxEvents {
    padding: 56px 0 64px;
  }

  .uxEventCard .button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .uxCtaBand {
    padding: 56px 0;
  }

  .pageHero {
    padding-top: 150px;
  }

  .uxContactForm .button {
    width: 100%;
    justify-self: stretch;
  }
}

/* audit: hero photo */
.hero > img.heroPhoto {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
@media (max-width: 640px) {
  .hero > img.heroPhoto { display: block !important; }
}

/* audit: theme page visual density */
.uxThemeVisual {
  margin: 0;
  position: relative;
  min-height: min(48vh, 420px);
  overflow: hidden;
  background: #0f4a36;
}
.uxThemeVisual img {
  width: 100%;
  height: 100%;
  min-height: min(48vh, 420px);
  object-fit: cover;
  display: block;
}
.uxThemeVisual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a332633 0%, transparent 45%);
  pointer-events: none;
}

/* pageHero: warmer cream band + gold underline (less empty washed cream) */
.pageHero {
  background: linear-gradient(135deg, #efe5d6 0%, #f7f2e8 55%, #e8dcc8 100%) !important;
}

.pageHero .eyebrow {
  color: var(--gold, #b07d3a) !important;
}

.pageHero .eyebrow::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-top: 10px;
  background: var(--gold, #b07d3a);
  border-radius: 1px;
}

.pageHero.uxThemeHeroBand {
  background: linear-gradient(135deg, #efe5d6 0%, #e7d8bf 55%, #ddd0b6 100%) !important;
  padding-bottom: 56px;
}
.uxThemeExtra { margin-top: 8px; }
@media (max-width: 900px) {
  .uxThemeVisual, .uxThemeVisual img { min-height: min(38vh, 280px); }
}