/*
Theme Name:  InnenRaum
Theme URI:   https://innen-raum.org
Description: Child-Theme für InnenRaum – Institut für Sinnorientierung, Nervensystem & Naturerfahrung
Author:      InnenRaum
Template:    kadence
Version:     1.0.0
Text Domain: innenraum
*/

/* ============================================================
   HOMEPAGE-FIXES – Kadence Seitentitel & Layout
   ============================================================ */

/* Seitentitel auf Startseite verstecken */
.home .entry-header,
.home .page-header,
.home header.entry-header,
.home .kadence-page-title-wrap,
.home .wp-block-post-title {
  display: none !important;
}

/* Padding/Margin der Seite auf Startseite entfernen */
.home .entry-content,
.home .content-container,
.home article.page,
.home .site-content,
.home main > article {
  padding-top: 0 !important;
  margin-top:  0 !important;
}

/* Vollbreite Blöcke wirklich vollbreit */
.home .alignfull,
.home .wp-block-cover.alignfull {
  margin-left:  calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  max-width:    100vw !important;
  width:        100vw !important;
}

/* Kadence innere Container-Begrenzung aufheben */
.home .kadence-inner-column-inner,
.home .wp-block-kadence-column,
.home .kb-section-dir-horizontal {
  max-width: 100% !important;
}

/* Keine Lücke zwischen Sektionen */
.home .wp-block-group + .wp-block-group,
.home .wp-block-cover + .wp-block-group,
.home .wp-block-group + .wp-block-cover {
  margin-top: 0 !important;
}

/* Team-Grid: Fotos immer korrekt skaliert */
.ir-team-grid img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Navigation auf Startseite – minimal */
.home #masthead .main-navigation {
  gap: 2rem;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Farben */
  --ir-green:          #4A7C59;
  --ir-green-light:    #7AAE8A;
  --ir-green-pale:     #C8DDD0;
  --ir-beige:          #FDFAF6;
  --ir-beige-warm:     #F2EBE0;
  --ir-beige-section:  #EAE2D6;
  --ir-gold:           #C4A87A;
  --ir-dark:           #252220;
  --ir-medium:         #6B6158;
  --ir-border:         #DDD5C8;

  /* Typografie */
  --ir-font-heading:   'Cormorant Garamond', Georgia, serif;
  --ir-font-body:      'Jost', system-ui, sans-serif;

  /* Abstände */
  --ir-gap-xs:  0.5rem;
  --ir-gap-sm:  1rem;
  --ir-gap-md:  2rem;
  --ir-gap-lg:  4rem;
  --ir-gap-xl:  7rem;

  /* Radien */
  --ir-radius-sm: 4px;
  --ir-radius-md: 10px;
  --ir-radius-lg: 20px;

  /* Schatten */
  --ir-shadow:    0 4px 24px rgba(37,34,32,0.08);
  --ir-shadow-lg: 0 12px 48px rgba(37,34,32,0.12);
}

/* ============================================================
   BASIS
   ============================================================ */

body {
  font-family: var(--ir-font-body);
  background-color: var(--ir-beige);
  color: var(--ir-dark);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAFIE
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--ir-font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ir-dark);
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2, .h2 { font-size: clamp(1.9rem, 3.5vw, 3rem);  }
h3, .h3 { font-size: clamp(1.4rem, 2.5vw, 2rem);  }
h4, .h4 { font-size: 1.3rem; }

/* Kursiv-Akzente – InnenRaum-Signatur */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--ir-green);
}

p {
  font-family: var(--ir-font-body);
  font-size: 1.05rem;
  color: var(--ir-medium);
  max-width: 68ch;
}

a {
  color: var(--ir-green);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--ir-dark); }

/* Lead-Text */
.ir-lead,
.wp-block-paragraph.is-style-lead {
  font-family: var(--ir-font-heading);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ir-medium);
  line-height: 1.6;
}

/* Zitat-Sektion (Frankl & Co.) */
blockquote,
.wp-block-quote {
  border-left: 3px solid var(--ir-green);
  padding: var(--ir-gap-sm) var(--ir-gap-md);
  margin: var(--ir-gap-md) 0;
  background: var(--ir-beige-warm);
  border-radius: 0 var(--ir-radius-md) var(--ir-radius-md) 0;
}

blockquote p,
.wp-block-quote p {
  font-family: var(--ir-font-heading);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-style: italic;
  color: var(--ir-dark);
  max-width: 100%;
}

blockquote cite,
.wp-block-quote cite {
  font-family: var(--ir-font-body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ir-green);
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

.site-header,
#masthead {
  background-color: var(--ir-beige) !important;
  border-bottom: 1px solid var(--ir-border);
}

.site-branding .site-title,
.site-header .site-title a {
  font-family: var(--ir-font-heading);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--ir-dark) !important;
  letter-spacing: 0.05em;
}

/* Navigation */
.main-navigation a,
.primary-menu a {
  font-family: var(--ir-font-body);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ir-medium) !important;
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.primary-menu a:hover {
  color: var(--ir-green) !important;
}

/* Dropdown */
.main-navigation .sub-menu {
  background: var(--ir-beige) !important;
  border: 1px solid var(--ir-border);
  border-radius: var(--ir-radius-md);
  box-shadow: var(--ir-shadow);
}

.main-navigation .sub-menu a {
  font-size: 0.85rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ============================================================
   BUTTONS & CTAs
   ============================================================ */

.wp-block-button__link,
.button,
button[type="submit"],
input[type="submit"] {
  font-family: var(--ir-font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-radius: var(--ir-radius-sm) !important;
  transition: all 0.25s ease !important;
}

/* Primär-Button */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--ir-green) !important;
  color: #fff !important;
  padding: 0.85rem 2rem !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--ir-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--ir-shadow);
}

/* Outline-Button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--ir-green) !important;
  border: 1.5px solid var(--ir-green) !important;
  padding: 0.85rem 2rem !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--ir-green) !important;
  color: #fff !important;
}

/* ============================================================
   HERO-SEKTION
   ============================================================ */

.wp-block-cover,
.ir-hero {
  min-height: 85vh;
  display: flex;
  align-items: center;
}

.wp-block-cover__inner-container {
  max-width: 900px;
}

/* Hero-Overlay Ton */
.wp-block-cover.has-background-dim::after {
  background: linear-gradient(
    135deg,
    rgba(37,34,32,0.55) 0%,
    rgba(74,124,89,0.25) 100%
  ) !important;
}

/* ============================================================
   SEKTIONEN & LAYOUTS
   ============================================================ */

/* Warme Sektion */
.ir-section-warm,
.wp-block-group.ir-section-warm {
  background-color: var(--ir-beige-warm);
  padding: var(--ir-gap-xl) 0;
}

/* Grüne Sektion */
.ir-section-green,
.wp-block-group.ir-section-green {
  background-color: var(--ir-green);
  color: #fff;
  padding: var(--ir-gap-xl) 0;
}

.ir-section-green h1,
.ir-section-green h2,
.ir-section-green h3,
.ir-section-green p {
  color: #fff;
}

/* Dunkel-Sektion */
.ir-section-dark,
.wp-block-group.ir-section-dark {
  background-color: var(--ir-dark);
  padding: var(--ir-gap-xl) 0;
}

.ir-section-dark h1,
.ir-section-dark h2,
.ir-section-dark h3 {
  color: #fff;
}

.ir-section-dark p {
  color: rgba(255,255,255,0.75);
}

/* Trennlinie */
.ir-divider {
  width: 60px;
  height: 2px;
  background-color: var(--ir-green);
  margin: var(--ir-gap-sm) 0 var(--ir-gap-md);
  border: none;
}

/* ============================================================
   ANGEBOTS-KARTEN
   ============================================================ */

.wp-block-column.ir-card,
.ir-card {
  background: #fff;
  border-radius: var(--ir-radius-md);
  padding: var(--ir-gap-md);
  box-shadow: var(--ir-shadow);
  border-top: 3px solid var(--ir-green);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ir-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ir-shadow-lg);
}

.ir-card h3 {
  font-family: var(--ir-font-heading);
  font-size: 1.6rem;
  margin-bottom: var(--ir-gap-xs);
}

/* Icon-Karte */
.ir-icon-card {
  text-align: center;
  padding: var(--ir-gap-lg) var(--ir-gap-md);
}

.ir-icon-card .ir-icon {
  font-size: 2.5rem;
  margin-bottom: var(--ir-gap-sm);
  display: block;
}

/* ============================================================
   TEAM-SEKTION
   ============================================================ */

.ir-team-member img {
  border-radius: var(--ir-radius-lg);
  filter: grayscale(15%);
  transition: filter 0.3s ease;
}

.ir-team-member:hover img {
  filter: grayscale(0%);
}

.ir-team-member h3 {
  font-size: 1.6rem;
  margin-top: var(--ir-gap-sm);
  margin-bottom: 0.2rem;
}

.ir-team-role {
  font-family: var(--ir-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ir-green);
  margin-bottom: var(--ir-gap-sm);
}

/* ============================================================
   SCROLLING-TICKER (Startseite)
   ============================================================ */

.ir-ticker {
  overflow: hidden;
  background: var(--ir-green);
  padding: 0.75rem 0;
}

.ir-ticker-inner {
  display: flex;
  gap: 4rem;
  animation: ir-scroll 20s linear infinite;
  white-space: nowrap;
  font-family: var(--ir-font-heading);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
}

@keyframes ir-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ir-ticker-dot {
  color: var(--ir-gold);
}

/* ============================================================
   FORMULARE
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: var(--ir-font-body) !important;
  font-size: 1rem !important;
  border: 1.5px solid var(--ir-border) !important;
  border-radius: var(--ir-radius-sm) !important;
  background: #fff !important;
  padding: 0.75rem 1rem !important;
  color: var(--ir-dark) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--ir-green) !important;
  box-shadow: 0 0 0 3px rgba(74,124,89,0.12) !important;
}

/* ============================================================
   BLOG / BEITRÄGE
   ============================================================ */

.entry-title {
  font-family: var(--ir-font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.entry-meta {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ir-green);
}

.wp-block-post-featured-image img {
  border-radius: var(--ir-radius-md);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer,
#colophon {
  background-color: var(--ir-dark) !important;
  color: rgba(255,255,255,0.6);
  padding: var(--ir-gap-lg) 0 var(--ir-gap-md);
}

.site-footer h4,
.widget-title {
  font-family: var(--ir-font-heading);
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: var(--ir-gap-sm);
}

.site-footer a {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--ir-gold);
}

.footer-credits {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.35);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--ir-gap-sm);
  margin-top: var(--ir-gap-md);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --ir-gap-xl: 4rem;
    --ir-gap-lg: 2.5rem;
  }

  .wp-block-cover { min-height: 70vh; }

  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
}

/* ============================================================
   UTILITY-KLASSEN
   ============================================================ */

.ir-center   { text-align: center; }
.ir-green    { color: var(--ir-green) !important; }
.ir-gold     { color: var(--ir-gold) !important; }
.ir-italic   { font-style: italic; }
.ir-caps     { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ir-spacer   { padding: var(--ir-gap-lg) 0; }
.ir-no-max   { max-width: none !important; }