/* ============================================================
   FUSSZEIT STUDIO OBERPFALZ
   Blog Artikel-Detailseite — Single Post Styling
   Scope: body.single-post  (OceanWP)
   Einbinden: functions.php → wp_enqueue_style (is_single())
   ============================================================ */


/* ------------------------------------------------------------------
   1. Design-Token / CSS-Variablen
   ------------------------------------------------------------------ */
:root {
  --fz-beige:         #f5ede6;   /* Hintergrundton warm beige      */
  --fz-beige-dark:    #e4d0c5;   /* Trennlinien, Karten-Rahmen     */
  --fz-beige-card:    #faf4f0;   /* helle Karten-Fläche            */
  --fz-rose:          #c4968c;   /* Dusty Rose – Akzentfarbe       */
  --fz-rose-light:    #e8c5bc;   /* helles Rose für Borders/Hover  */
  --fz-brown:         #3c2e21;   /* Dark Brown – Überschriften     */
  --fz-brown-mid:     #7a5c4a;   /* Mittleres Braun – Sekundärtext */
  --fz-charcoal:      #2a2420;   /* Fast-Schwarz für Fliesstext    */
  --fz-text:          #4a3728;   /* Hauptfliesstext                */
  --fz-muted:         #9a8378;   /* Meta, Labels, Hints            */
  --fz-font-script:   'GreatVibes', 'Elatina', cursive;
  --fz-font-body:     inherit;
  --fz-radius:        12px;
  --fz-radius-sm:     6px;
  --fz-transition:    0.28s ease;
  --fz-shadow-soft:   0 4px 20px rgba(60, 46, 33, 0.08);
}


/* ------------------------------------------------------------------
   2. Hero Featured Image
   ------------------------------------------------------------------ */
.single-post .thumbnail {
  margin-bottom: 0;
  border-radius: var(--fz-radius) var(--fz-radius) 0 0;
  overflow: hidden;
  position: relative;
}

.single-post .thumbnail img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 520px;
  border-radius: var(--fz-radius) var(--fz-radius) 0 0;
  transition: transform 0.5s ease;
}

/* Sanfter Hover-Zoom auf das Hero-Bild */
.single-post .thumbnail:hover img {
  transform: scale(1.015);
}

/* Weiches Gradient-Overlay: Bild → Hintergrundfarbe */
.single-post .thumbnail::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 130px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(245, 237, 230, 0.6) 100%
  );
  pointer-events: none;
  border-radius: 0 0 0 0;
}


/* ------------------------------------------------------------------
   3. Post-Titel & Entry-Header
   ------------------------------------------------------------------ */
.single-post .entry-header {
  margin: 36px 0 0;
  text-align: left;
}

.single-post .single-post-title.entry-title,
.single-post h1.single-post-title.entry-title {
  font-family: var(--fz-font-script), cursive;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;            /* Script-Fonts brauchen kein Bold  */
  line-height: 1.25;
  color: var(--fz-brown);
  margin: 0;
  letter-spacing: 0.5px;
}

/* Dekorative Rosé-Linie unterhalb des Titels */
.single-post .entry-header::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  background: var(--fz-rose);
  margin-top: 16px;
  border-radius: 2px;
}


/* ------------------------------------------------------------------
   4. Meta-Zeile  (Autor · Datum · Kategorie · Lesezeit)
   ------------------------------------------------------------------ */
.single-post ul.meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  list-style:  none;
  margin:      18px 0 30px;
  padding:     0;
  font-size:   12px;
  color:       var(--fz-muted);
  letter-spacing: 0.35px;
  text-transform: uppercase;
  line-height: 1;
}

.single-post ul.meta li {
  display:     flex;
  align-items: center;
  gap:         5px;
  color:       var(--fz-muted);
  padding:     4px 0;
}

/* Bullet-Separator · zwischen Items */
.single-post ul.meta li + li::before {
  content:    '·';
  margin:     0 9px;
  color:      var(--fz-rose-light);
  font-size:  16px;
  line-height: 1;
  flex-shrink: 0;
}

/* SVG / Icon-Farbe in der Meta-Leiste */
.single-post ul.meta li svg.owp-icon,
.single-post ul.meta li i {
  width:   13px;
  height:  13px;
  color:   var(--fz-rose);
  fill:    var(--fz-rose);
  flex-shrink: 0;
  opacity: 0.85;
}

/* Kategorie- und Autorenlinks */
.single-post ul.meta .meta-cat a,
.single-post ul.meta .meta-author a {
  color:           var(--fz-brown-mid);
  text-decoration: none;
  transition:      color var(--fz-transition);
}

.single-post ul.meta .meta-cat a:hover,
.single-post ul.meta .meta-author a:hover {
  color: var(--fz-rose);
}


/* ------------------------------------------------------------------
   5. Artikel-Inhalt — Typografie
   ------------------------------------------------------------------ */
.single-post .entry-content {
  font-size:   1rem;
  line-height: 1.85;
  color:       var(--fz-text);
  max-width:   72ch;           /* optimale Lesezeilenlänge         */
}

/* Zwischenüberschriften im Artikel in Script-Font */
.single-post .entry-content h2,
.single-post .entry-content h3 {
  font-family:   var(--fz-font-script), cursive;
  font-weight:   400;
  color:         var(--fz-brown);
  margin-top:    2em;
  margin-bottom: 0.5em;
}

.single-post .entry-content h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.single-post .entry-content h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
}

.single-post .entry-content p {
  margin-bottom: 1.4em;
}

/* Inline-Links im Artikeltext */
.single-post .entry-content a {
  color:                    var(--fz-rose);
  text-decoration:          underline;
  text-decoration-color:    var(--fz-rose-light);
  text-underline-offset:    3px;
  transition:               color var(--fz-transition),
                            text-decoration-color var(--fz-transition);
}

.single-post .entry-content a:hover {
  color:                 var(--fz-brown);
  text-decoration-color: var(--fz-brown);
}

/* Elegantes Blockquote */
.single-post .entry-content blockquote {
  border-left:   3px solid var(--fz-rose);
  background:    var(--fz-beige-card);
  padding:       20px 26px;
  margin:        32px 0;
  border-radius: 0 var(--fz-radius) var(--fz-radius) 0;
  font-style:    italic;
  color:         var(--fz-brown-mid);
}

.single-post .entry-content blockquote p {
  margin:      0;
  font-size:   1.05rem;
  line-height: 1.75;
}

/* Bilder im Content */
.single-post .entry-content img {
  border-radius: var(--fz-radius-sm);
  max-width:     100%;
  height:        auto;
}

/* Horizontale Trennlinie */
.single-post .entry-content hr {
  border:        none;
  border-top:    1px solid var(--fz-beige-dark);
  margin:        36px 0;
}


/* ------------------------------------------------------------------
   6. Tag-Cloud / Schlagworte
   ------------------------------------------------------------------ */
.single-post .post-tags,
.single-post .tagcloud {
  margin: 8px 0 4px;
}

.single-post .post-tags a,
.single-post .tagcloud a {
  display:         inline-block;
  background:      var(--fz-beige-card);
  color:           var(--fz-brown-mid);
  border:          1px solid var(--fz-beige-dark);
  border-radius:   20px;
  padding:         5px 14px;
  font-size:       11px;
  letter-spacing:  0.5px;
  text-transform:  uppercase;
  text-decoration: none;
  margin:          4px 3px;
  transition:      background var(--fz-transition),
                   border-color var(--fz-transition),
                   color var(--fz-transition);
}

.single-post .post-tags a:hover,
.single-post .tagcloud a:hover {
  background:    var(--fz-rose-light);
  border-color:  var(--fz-rose);
  color:         var(--fz-brown);
}


/* ------------------------------------------------------------------
   7. Vor / Zurück Navigation
   ------------------------------------------------------------------ */
.single nav.post-navigation {
  margin-top:  52px;
  padding-top: 32px;
  border-top:  1px solid var(--fz-beige-dark);
}

/* Label "Vorheriger Beitrag" / "Nächster Beitrag" */
.single nav.post-navigation .nav-links .title {
  color:          var(--fz-rose);
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight:    600;
  transition:     color var(--fz-transition);
  line-height:    20px;
}

.single nav.post-navigation .nav-links a:hover .title {
  color: var(--fz-brown);
}

/* Beitrags-Titel in Script */
.single nav.post-navigation .nav-links .post-title {
  font-family:  var(--fz-font-script), cursive;
  font-size:    1.25rem;
  font-weight:  400;
  color:        var(--fz-brown);
  margin-top:   5px;
  transition:   color var(--fz-transition);
  display:      block;
}

.single nav.post-navigation .nav-links a:hover .post-title {
  color: var(--fz-rose);
}

/* Pfeil-Icons */
.single nav.post-navigation .nav-links .owp-icon,
.single nav.post-navigation .nav-links i {
  color:   var(--fz-rose);
  fill:    var(--fz-rose);
  opacity: 0.75;
}

/* Trennlinie zwischen prev & next */
.single nav.post-navigation .nav-previous {
  border-right-color: var(--fz-beige-dark);
}


/* ------------------------------------------------------------------
   8. Author Bio Box
   ------------------------------------------------------------------ */
#author-bio {
  background:    var(--fz-beige-card);
  border:        1px solid var(--fz-beige-dark);  /* überschreibt Parent-Theme Trennlinie */
  border-radius: var(--fz-radius);
  padding:       28px 30px;
  margin-top:    52px;
  box-shadow:    var(--fz-shadow-soft);
}

#author-bio #author-bio-inner {
  align-items: flex-start;
  gap:         22px;
}

#author-bio .author-bio-avatar {
  min-width:    80px;
  margin-right: 24px;
}

#author-bio .author-bio-avatar img {
  width:        80px;
  height:       80px;
  border:       3px solid var(--fz-rose-light);
  border-radius: 50%;
  object-fit:   cover;
  transition:   border-color var(--fz-transition);
}

#author-bio .author-bio-avatar:hover img {
  border-color: var(--fz-rose);
}

/* Name in Script-Font */
#author-bio .author-bio-title {
  font-family:    var(--fz-font-script), cursive;
  font-size:      1.6rem;
  font-weight:    400;
  color:          var(--fz-brown);
  margin-bottom:  6px;
  text-transform: none;
  display:        block;
}

#author-bio .author-bio-description {
  font-size:   0.93rem;
  line-height: 1.75;
  color:       var(--fz-text);
}

#author-bio .author-bio-description p:last-child {
  margin: 0;
}

#author-bio .author-bio-description a {
  color:           var(--fz-rose);
  text-decoration: none;
  transition:      color var(--fz-transition);
}

#author-bio .author-bio-description a:hover {
  color: var(--fz-brown);
}


/* ------------------------------------------------------------------
   9. Social Share — Feintuning des bestehenden Stils
   ------------------------------------------------------------------ */
.social-share-wrapper {
  margin-top:    48px;
  margin-bottom: 16px;
  padding-top:   28px;
  border-top:    1px solid var(--fz-beige-dark);
  max-width:     100%;
}

.social-share-heading {
  font-size:      11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color:          var(--fz-muted);
  font-style:     normal;
}


/* ------------------------------------------------------------------
   10. Kommentarsektion
   ------------------------------------------------------------------ */
.single-post #comments {
  margin-top:  52px;
  padding-top: 32px;
  border-top:  1px solid var(--fz-beige-dark);
}

.single-post #comments .comments-title {
  font-family:   var(--fz-font-script), cursive;
  font-size:     2rem;
  font-weight:   400;
  color:         var(--fz-brown);
  margin-bottom: 28px;
  line-height:   1.2;
}

/* Einzelner Kommentar */
.single-post .comment-body {
  padding:       20px 0;
  border-bottom: 1px solid var(--fz-beige-dark);
}

.single-post .comment-author .fn {
  font-weight: 600;
  color:       var(--fz-brown);
}

.single-post .comment-meta a {
  color:           var(--fz-muted);
  font-size:       12px;
  text-decoration: none;
}

/* Antwort-Formular */
.single-post #respond {
  margin-top:    32px;
  background:    var(--fz-beige-card);
  border:        1px solid var(--fz-beige-dark);
  border-radius: var(--fz-radius);
  padding:       28px 30px;
}

.single-post #respond .comment-reply-title {
  font-family:   var(--fz-font-script), cursive;
  font-size:     1.8rem;
  font-weight:   400;
  color:         var(--fz-brown);
  margin-bottom: 20px;
  display:       block;
}

.single-post #respond .comment-form label {
  display:       block;
  font-size:     12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color:          var(--fz-muted);
  margin-bottom:  6px;
}

.single-post #respond input[type="text"],
.single-post #respond input[type="email"],
.single-post #respond input[type="url"],
.single-post #respond textarea {
  width:         100%;
  border:        1px solid var(--fz-beige-dark);
  border-radius: var(--fz-radius-sm);
  background:    #fff;
  color:         var(--fz-text);
  padding:       10px 14px;
  font-size:     0.93rem;
  transition:    border-color var(--fz-transition), box-shadow var(--fz-transition);
  box-sizing:    border-box;
}

.single-post #respond input[type="text"]:focus,
.single-post #respond input[type="email"]:focus,
.single-post #respond input[type="url"]:focus,
.single-post #respond textarea:focus {
  outline:    none;
  border-color: var(--fz-rose);
  box-shadow: 0 0 0 3px rgba(196, 150, 140, 0.15);
}

/* Absenden-Button */
.single-post #respond .submit {
  background:     var(--fz-brown);
  color:          #fff;
  border:         none;
  border-radius:  var(--fz-radius-sm);
  padding:        12px 32px;
  font-size:      12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background var(--fz-transition), transform 0.15s ease;
}

.single-post #respond .submit:hover {
  background:  var(--fz-rose);
  transform:   translateY(-1px);
}

.single-post #respond .submit:active {
  transform: translateY(0);
}


/* ------------------------------------------------------------------
   11. Mobile Responsiveness
   ------------------------------------------------------------------ */

/* --- Tablet (≤ 900px) --- */
@media (max-width: 900px) {
  .single-post .entry-content {
    max-width: 100%;
  }
}

/* --- Smartphone Landscape (≤ 768px) --- */
@media (max-width: 768px) {
  .single-post .single-post-title.entry-title,
  .single-post h1.single-post-title.entry-title {
    font-size: 2.1rem;
  }

  .single-post .thumbnail img {
    max-height: 300px;
  }

  .single-post ul.meta {
    font-size: 11px;
  }

  .single-post .entry-content {
    font-size: 0.97rem;
  }

  #author-bio {
    padding: 20px 18px;
  }

  #author-bio .author-bio-avatar {
    min-width: 64px;
    margin-right: 18px;
  }

  #author-bio .author-bio-avatar img {
    width:  64px;
    height: 64px;
  }

  .single nav.post-navigation .nav-links .post-title {
    font-size: 1.05rem;
  }

  .single-post #respond {
    padding: 20px 18px;
  }
}

/* --- Smartphone Portrait (≤ 480px) --- */
@media (max-width: 480px) {
  .single-post .entry-header {
    margin-top: 20px;
  }

  .single-post .single-post-title.entry-title,
  .single-post h1.single-post-title.entry-title {
    font-size: 1.85rem;
  }

  /* Meta: vertikal stapeln */
  .single-post ul.meta {
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
  }

  .single-post ul.meta li + li::before {
    display: none;
  }

  /* Prev/Next kompakter */
  .single nav.post-navigation .nav-links .nav-previous,
  .single nav.post-navigation .nav-links .nav-next {
    padding: 10px 0;
  }

  /* Author-Avatar ausblenden (Parent-Theme zeigt ihn schon ab 480px aus) */
  #author-bio .author-bio-avatar {
    display: none;
  }

  /* Share-Buttons */
  .social-share-container {
    gap: 10px;
  }

  .share-button {
    width:  44px;
    height: 44px;
  }

  .share-button .dashicons {
    font-size: 20px;
    width:     20px;
    height:    20px;
  }

  .single-post #respond {
    padding: 16px 14px;
  }
}