/*
Theme Name: Rentner unterwegs Child
Theme URI: https://rentner-unterwegs.com
Description: Child-Theme für Kadence – Markenfarben, Schriften und seniorenfreundliche Anpassungen für Rentner unterwegs.
Author: Rentner unterwegs
Template: kadence
Version: 1.0.0
Text Domain: rentner-unterwegs-child
*/

/* =========================================================
   MARKENFARBEN  (entsprechen den Kadence-Customizer-Werten
   aus der README – hier nur als Referenz/Hilfsvariablen)
   ========================================================= */
:root{
  --ru-primary:#0E5C63;     /* Petrol – Hauptfarbe   */
  --ru-primary-dark:#0A464C;/* Petrol dunkel (Hover) */
  --ru-accent:#F2A900;      /* Gold – Buttons/CTA    */
  --ru-accent-dark:#D99400;
  --ru-ink:#1E2A2E;         /* Textfarbe             */
  --ru-bg:#FBF8F3;          /* Heller Hintergrund    */
  --ru-sand:#EFE8DB;        /* Flächen-Tönung        */
  --ru-line:#E4DBCC;        /* Linien/Rahmen         */
}

/* =========================================================
   1) SENIORENFREUNDLICHKEIT
   Etwas größere Grundschrift + klarer Fokusrahmen für
   Tastatur-Bedienung. Bewusst zurückhaltend, damit es
   die Kadence-Customizer-Einstellungen nicht überschreibt.
   ========================================================= */
body{ font-size:1.06rem; line-height:1.65; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
.button:focus-visible{
  outline:3px solid var(--ru-accent);
  outline-offset:2px;
}

/* Links beim Überfahren klar unterstreichen (bessere Erkennbarkeit) */
.entry-content a:hover{ text-decoration:underline; }

/* =========================================================
   2) BUTTONS – runde, große Klickflächen
   Wirkt nur, wenn man der Schaltfläche die CSS-Klasse
   "ru-btn" bzw. "ru-btn-accent" gibt (Block → Erweitert →
   Zusätzliche CSS-Klasse).
   ========================================================= */
.ru-btn,
.ru-btn-accent{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:15px 28px; border-radius:999px;
  font-weight:700; font-size:1.05rem; text-decoration:none;
  transition:.15s ease;
}
.ru-btn{ background:var(--ru-primary); color:#fff; }
.ru-btn:hover{ background:var(--ru-primary-dark); color:#fff; }
.ru-btn-accent{ background:var(--ru-accent); color:#3a2c00; }
.ru-btn-accent:hover{ background:var(--ru-accent-dark); color:#3a2c00; }

/* =========================================================
   3) BILD-KACHELN MIT TITEL  (Klasse: "ru-card")
   Für die "Beliebte Reiseziele"-Kacheln: dunkler Verlauf
   unten, damit weißer Titeltext gut lesbar ist.
   Anwenden auf einen Kadence-Bild-/Link-Block.
   ========================================================= */
.ru-card{ position:relative; border-radius:16px; overflow:hidden; display:block; }
.ru-card img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ru-card:hover img{ transform:scale(1.05); }
.ru-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 55%);
}
.ru-card .ru-card-title{
  position:absolute; left:22px; bottom:18px; z-index:2;
  color:#fff; font-weight:600; font-size:1.5rem;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

/* =========================================================
   4) BEITRAGS-KACHELN (Kadence Posts-Block) etwas weicher
   ========================================================= */
.kt-blocks-post-grid-item{ transition:.15s ease; }
.kt-blocks-post-grid-item:hover{ transform:translateY(-2px); }

/* =========================================================
   5) FLÄCHEN-ABSCHNITT (Klasse: "ru-sand-section")
   Heller Sand-Hintergrund mit Innenabstand für Abschnitte
   wie "Wie möchten Sie reisen?".
   ========================================================= */
.ru-sand-section{
  background:var(--ru-sand);
  border-radius:16px;
  padding:44px 30px;
}

/* Korrektur: Seitentitel direkt einfärben (steht in <p>, nicht in <a>) */
.site-branding .site-title,
.site-title.vs-md-false,
.site-title-wrap .site-title { color:#0E5C63 !important; }

/* Titelbalken nur auf der Startseite ausblenden */
.home .entry-hero.page-hero-section { display:none !important; }

/* Ziel-Kacheln (Shortcode [ru_ziele]) */
.ru-ziele-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1180px;margin:0 auto;}
.ru-ziel{position:relative;display:flex;align-items:flex-end;height:230px;border-radius:14px;overflow:hidden;
  background-size:cover;background-position:center;text-decoration:none;transition:transform .25s ease;}
.ru-ziel:hover{transform:translateY(-3px);text-decoration:none;}
.ru-ziel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0) 55%);}
.ru-ziel-name{position:relative;z-index:2;color:#fff;font-family:'Lora',serif;font-weight:600;
  font-size:1.6rem;padding:18px 22px;text-shadow:0 2px 12px rgba(0,0,0,.55);}
@media(max-width:900px){.ru-ziele-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ru-ziele-grid{grid-template-columns:1fr;}}

/* Einheitliche Bildhöhe der Berichte-Kacheln (Startseite) */
.wp-block-query .wp-block-post-featured-image{
  margin-bottom:14px;
}
.wp-block-query .wp-block-post-featured-image img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

/* Abstand über dem "Alle Reiseziele ansehen"-Button */
.ru-ziele-grid + .wp-block-buttons{
  margin-top:40px;
}

/* Abstand über dem "Alle Reiseziele ansehen"-Button */
.ru-ziele-grid + .wp-block-buttons{
  margin-top:40px;
}

/* Abstand über dem "Alle Reiseziele ansehen"-Button */
.ru-ziele-grid + .wp-block-buttons{
  margin-top:40px;
}

/* Abstand über dem "Alle Reiseziele ansehen"-Button (gezielt über den Link) */
.wp-block-buttons:has(a[href="/alle-reiseziele/"]){
  margin-top:44px !important;
}

/* Beitragsbild-Kacheln: oberen Bildrand (mit Text) zeigen statt Mitte */
.wp-block-post-featured-image img{
  object-position: top center !important;
}

/* Grosses Beitragsbild im Artikel: vollstaendig zeigen, nichts abschneiden */
.article-post-thumbnail.kadence-thumbnail-ratio-2-3 .post-thumbnail-inner{
  aspect-ratio: auto !important;
}
.article-post-thumbnail img,
.post-thumbnail-inner img{
  object-fit: contain !important;
  object-position: center center !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
}