/*
Theme Name:   IFD Roof
Theme URI:    https://ifd-roof.com
Description:  Child-Theme von Twenty Twenty-Five für IFD Roof. Enthält das Design-System (Farben, Schriften, Abstände) sowie fertige Muster für alle Seitenabschnitte. Inhalte werden ausschließlich über den Block-Editor gepflegt.
Author:       IFD Roof
Version:      1.5.0
Template:     twentytwentyfive
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Text Domain:  ifd-roof
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* --------------------------------------------------------------------------
   Fast alles läuft über theme.json. Hier steht nur, was sich mit
   Block-Einstellungen nicht abbilden lässt.
   -------------------------------------------------------------------------- */

/* Dachlinien-Trenner zwischen den Abschnitten.
   Wird als zusätzliche CSS-Klasse "ifd-roofline" auf eine Gruppe gesetzt. */
.ifd-roofline{
  height:64px;
  background:var(--wp--preset--color--primary-dark);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
.ifd-roofline.is-flipped{
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}

/* Schichten der Dachaufbau-Grafik im Hero.
   Klasse "ifd-layer" auf die jeweilige Gruppe setzen. */
.ifd-layer{
  border-radius:4px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  opacity:0;
  transform:translateY(14px);
  animation:ifd-layer-rise .6s ease forwards;
}
.ifd-layer:nth-child(1){animation-delay:.10s;}
.ifd-layer:nth-child(2){animation-delay:.25s;}
.ifd-layer:nth-child(3){animation-delay:.40s;}
.ifd-layer:nth-child(4){animation-delay:.55s;}
.ifd-layer:nth-child(5){animation-delay:.70s;}

@keyframes ifd-layer-rise{
  to{opacity:1; transform:translateY(0);}
}

/* Im Editor sollen die Schichten sofort sichtbar sein, nicht erst animiert. */
.editor-styles-wrapper .ifd-layer{
  opacity:1;
  transform:none;
  animation:none;
}

@media (prefers-reduced-motion: reduce){
  .ifd-layer{opacity:1; transform:none; animation:none;}
}

/* Leistungs-Karten: dezenter Hover, sonst identisch zum Mockup. */
.ifd-card{
  transition:transform .2s ease, box-shadow .2s ease;
}
.ifd-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(37,57,110,0.12);
}

/* Kennzahlen-Leiste: Zahlen enger setzen als der Fließtext. */
.ifd-stat-number{
  line-height:1.1;
  letter-spacing:-0.02em;
}

/* --------------------------------------------------------------------------
   Kopfbereich
   Zweistufig: schmale Servicezeile oben, Hauptleiste darunter.
   -------------------------------------------------------------------------- */

/* Hauptleiste bleibt beim Scrollen stehen, die Servicezeile scrollt weg.
   So bleibt die Navigation erreichbar, ohne dauerhaft Platz zu kosten. */
.ifd-mainbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(8px);
}
.admin-bar .ifd-mainbar{top:32px;}
@media (max-width:782px){
  .admin-bar .ifd-mainbar{top:46px;}
}

/* Servicezeile
   Die Selektoren sind bewusst spezifischer als die Link-Farbe aus theme.json
   (:root :where(a) → Spezifität 0,1,0), sonst greift dort das Markenblau
   und die Links stünden Blau auf Blau. */
.ifd-topbar .ifd-topbar-links a,
.ifd-topbar p a{
  color:#b9c4e0;
  text-decoration:none;
}
.ifd-topbar .ifd-topbar-links a:hover,
.ifd-topbar p a:hover{
  color:#fff;
  text-decoration:underline;
}

/* Wort-Bild-Marke: Logo und zweizeiliger Schriftzug bilden eine Einheit */
.ifd-brand .wp-block-site-title a{
  font-family:var(--wp--preset--font-family--display);
  font-weight:800;
  font-size:1.4rem;
  line-height:1.1;
  color:var(--wp--preset--color--primary-dark);
  text-decoration:none;
  letter-spacing:-0.01em;
}
.ifd-brand-sub{
  line-height:1.25;
  max-width:22ch;
}
.ifd-brand .wp-block-site-logo img{
  border-radius:4px;
}

/* Navigation: roter Unterstrich beim Hover, aktive Seite dauerhaft markiert */
.ifd-mainbar .wp-block-navigation-item__content{
  position:relative;
  padding-block:4px;
  text-decoration:none;
}
.ifd-mainbar .wp-block-navigation-item__content::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:2px;
  background:var(--wp--preset--color--accent);
  transition:width .2s ease;
}
.ifd-mainbar .wp-block-navigation-item__content:hover::after,
.ifd-mainbar .current-menu-item > .wp-block-navigation-item__content::after{
  width:100%;
}
.ifd-mainbar .current-menu-item > .wp-block-navigation-item__content{
  font-weight:600;
  color:var(--wp--preset--color--primary-dark);
}

/* Auf schmalen Schirmen den Untertitel weglassen — sonst bricht die
   Kopfzeile in drei Zeilen um. */
@media (max-width:900px){
  .ifd-brand-sub{display:none;}
  .ifd-topbar{display:none;}
}

/* --------------------------------------------------------------------------
   Große Bildschirme
   wideSize wächst über theme.json mit (min(1520px, 90vw)). Hier folgen die
   Feinheiten, die sich nicht über theme.json abbilden lassen.
   -------------------------------------------------------------------------- */

/* Fließtext bekommt auf breiten Schirmen ein Zeilenmaß, das lesbar bleibt.
   Ohne Begrenzung entstehen sonst Zeilen mit 120+ Zeichen. */
.wp-block-column > p,
.wp-block-group > p{
  max-width:68ch;
}
/* Zentrierte Abschnitte (Zitat, Kennzahlen) davon ausnehmen */
.has-text-align-center{
  max-width:none;
}

@media (min-width:1600px){
  /* Spalten dürfen weiter auseinanderrücken, sonst kleben die Karten
     auf breiten Schirmen aneinander. */
  .wp-block-columns.alignwide{
    gap:3rem;
  }
  /* Hero-Text nicht über die volle Spaltenbreite laufen lassen */
  .ifd-hero-text{
    max-width:34rem;
  }
}

/* --------------------------------------------------------------------------
   Mitglieder-Karten
   Die Verbandslogos kommen in sehr unterschiedlichen Formaten und Auflösungen.
   Feste Höhe plus object-fit: contain bringt sie auf eine gemeinsame Linie,
   ohne sie zu verzerren.
   -------------------------------------------------------------------------- */
.ifd-org-logo{
  margin:0 0 var(--wp--preset--spacing--30) 0;
}
.ifd-org-logo img{
  height:64px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}

/* Karten in einer Reihe gleich hoch, damit das Raster ruhig wirkt */
.wp-block-columns .wp-block-column > .ifd-card{
  height:100%;
}
.wp-block-columns .wp-block-column{
  display:flex;
  flex-direction:column;
}

/* --------------------------------------------------------------------------
   Karten auf dunklem Grund
   .ifd-card hat standardmäßig nur einen Rahmen und keinen Hintergrund. Auf den
   weißen und hellgrauen Abschnitten ist das richtig; in den dunkelblauen und
   anthrazitfarbenen Abschnitten stünde dunkler Text sonst auf dunklem Grund.
   Deshalb bekommen Karten dort einen weißen Hintergrund.
   -------------------------------------------------------------------------- */
.has-blue-depth-gradient-background .ifd-card,
.has-primary-dark-background-color .ifd-card,
.has-charcoal-background-color .ifd-card{
  background-color:var(--wp--preset--color--base);
  border-color:transparent;
}

/* Links in diesen Karten wieder auf Markenblau, nicht auf die
   Hell-auf-Dunkel-Farbe des umgebenden Abschnitts. */
.has-blue-depth-gradient-background .ifd-card a,
.has-primary-dark-background-color .ifd-card a,
.has-charcoal-background-color .ifd-card a{
  color:var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   Personenkarten
   Porträts kommen in unterschiedlichen Formaten. Ein festes Seitenverhältnis
   plus object-fit sorgt für eine ruhige Reihe, egal was hochgeladen wird.
   -------------------------------------------------------------------------- */
.ifd-person-photo{
  margin:0 0 var(--wp--preset--spacing--30) 0;
}
.ifd-person-photo img{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center 20%;
  border-radius:8px;
  display:block;
}

/* Karte ohne Fließtext soll nicht künstlich hoch werden */
.ifd-card.is-compact{
  padding-top:var(--wp--preset--spacing--40);
  padding-bottom:var(--wp--preset--spacing--40);
}
.ifd-card.is-compact > *:last-child{
  margin-bottom:0;
}