/* ══════════════════════════════════════════════════
   Artikel-Detailseite – Fußzeit Studio
   single-post.css  |  passend zu blog-entries.css
   ══════════════════════════════════════════════════ */

/* ── Design-Token (gleiche Werte wie blog-slider.css) ── */
:root {
    --sp-bg:          #fdf8f5;
    --sp-beige:       #ede3da;
    --sp-brown:       #6b5044;
    --sp-accent:      #a07860;
    --sp-accent-dark: #8a6550;
    --sp-text:        #4a3b35;
    --sp-muted:       #9e8a82;
    --sp-radius:      14px;
    --sp-shadow:      0 2px 14px rgba(90, 60, 40, 0.09);
}

/* ══════════════════════════════════════════════════
   1. FEATURED IMAGE
   ══════════════════════════════════════════════════ */

.single .post-thumbnail,
.single .blog-entry-media {
    border-radius: var(--sp-radius);
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: var(--sp-shadow);
}

.single .post-thumbnail img,
.single .blog-entry-media img,
.single .single-post-thumbnail img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    border-radius: var(--sp-radius);
    transition: transform 0.55s ease;
}

/* ══════════════════════════════════════════════════
   2. ARTIKEL-TITEL
   ══════════════════════════════════════════════════ */

.single .single-post-title.entry-title,
.single h2.single-post-title {
    font-family: 'GreatVibes', Georgia, serif;
    font-size: 4.2rem;
    color: var(--sp-text);
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════
   3. META-LEISTE (Autor, Datum, Kategorien)
   ══════════════════════════════════════════════════ */

.single ul.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    list-style: none;
    padding: 12px 16px;
    margin: 0 0 28px;
    font-size: 1.3rem;
    color: var(--sp-muted);
    background: var(--sp-beige);
    border-radius: 50px;
    border-top: none;
    border-bottom: none;
}

.single ul.meta li {
    display: flex;
    align-items: center;
    gap: 5px;
}

.single ul.meta li a {
    color: var(--sp-text);
    text-decoration: none;
    transition: color 0.2s;
}

.single ul.meta li a:hover {
    color: var(--sp-accent);
}

.single ul.meta .owp-icon use {
    fill: var(--sp-accent);
}

/* ══════════════════════════════════════════════════
   4. FLIESSTEXT  (.entry-content)
   ══════════════════════════════════════════════════ */

.single .entry-content {
    color: var(--sp-text);
    font-size: 1.55rem;
    line-height: 1.85;
    max-width: 760px;
}

/* Überschriften im Artikel */
.single .entry-content h1,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4,
.single .entry-content h5,
.single .entry-content h6 {
    color: var(--sp-text);
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.6em;
    line-height: 1.3;
}

.single .entry-content h2 { font-size: 2.4rem; }
.single .entry-content h3 { font-size: 2.0rem; }
.single .entry-content h4 { font-size: 1.75rem; }

/* Links */
.single .entry-content a {
    color: var(--sp-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.single .entry-content a:hover {
    color: var(--sp-accent-dark);
}

/* Blockquote */
.single .entry-content blockquote {
    border-left: 4px solid var(--sp-accent);
    background: var(--sp-beige);
    margin: 1.8em 0;
    padding: 14px 20px;
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
    color: var(--sp-brown);
    font-style: italic;
}

/* Listen */
.single .entry-content ul li::marker,
.single .entry-content ol li::marker {
    color: var(--sp-accent);
}

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

/* ══════════════════════════════════════════════════
   5. TAGS
   ══════════════════════════════════════════════════ */

.single .post-tags {
    margin: 28px 0 20px;
    font-size: 1.3rem;
}

.single .post-tags a {
    display: inline-block;
    padding: 5px 14px;
    border: 1.5px solid var(--sp-accent);
    border-radius: 50px;
    color: var(--sp-accent);
    text-decoration: none;
    margin: 4px 4px 4px 0;
    transition: background 0.2s, color 0.2s;
}

.single .post-tags a:hover {
    background: var(--sp-accent);
    color: #ffffff;
}

.single .post-tags .owp-tag-texts {
    color: var(--sp-muted);
    font-style: italic;
    margin-right: 6px;
}

/* ══════════════════════════════════════════════════
   6. NEXT / PREV NAVIGATION
   ══════════════════════════════════════════════════ */

.single .post-navigation {
    border-top: 1px solid var(--sp-beige);
    border-bottom: 1px solid var(--sp-beige);
    padding: 20px 0;
    margin: 32px 0;
    display: flex;
    gap: 16px;
}

.single .post-navigation .nav-previous,
.single .post-navigation .nav-next {
    flex: 1;
}

.single .post-navigation a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: var(--sp-text);
    transition: color 0.2s;
}

.single .post-navigation a:hover {
    color: var(--sp-accent);
}

.single .post-navigation .title {
    font-size: 1.2rem;
    color: var(--sp-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.single .post-navigation .post-title {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--sp-text);
    line-height: 1.4;
}

.single .post-navigation a:hover .post-title {
    color: var(--sp-accent);
}

.single .post-navigation .nav-next {
    text-align: right;
}

/* ══════════════════════════════════════════════════
   7. AUTHOR BIO
   ══════════════════════════════════════════════════ */

.single #author-bio {
    background: var(--sp-beige);
    border-radius: var(--sp-radius);
    padding: 24px;
    margin: 32px 0;
}

.single #author-bio #author-bio-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.single #author-bio .author-bio-avatar img {
    border-radius: 50%;
    border: 3px solid var(--sp-accent);
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.single #author-bio .author-bio-title a {
    color: var(--sp-text);
    text-decoration: none;
    font-size: 1.7rem;
    font-weight: 700;
}

.single #author-bio .author-bio-title a:hover {
    color: var(--sp-accent);
}

.single #author-bio .author-bio-description {
    color: var(--sp-muted);
    font-size: 1.4rem;
    line-height: 1.7;
    margin-top: 6px;
}

/* ══════════════════════════════════════════════════
   8. SIDEBAR (Widgets)
   ══════════════════════════════════════════════════ */

.single #sidebar .widget {
    background: #ffffff;
    border-radius: var(--sp-radius);
    padding: 20px 22px;
    margin-bottom: 24px;
    box-shadow: var(--sp-shadow);
    border: 1px solid rgba(160, 120, 96, 0.13);
}

/* Widget-Überschriften */
.single #sidebar .widget-title {
    font-family: 'GreatVibes', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--sp-text);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sp-beige);
    letter-spacing: 0.01em;
}

/* Suchfeld */
.single #sidebar .widget .search-field {
    border: 1.5px solid var(--sp-beige);
    border-radius: 50px 0 0 50px;
    padding: 8px 14px;
    color: var(--sp-text);
    background: var(--sp-bg);
    font-size: 1.4rem;
    width: calc(100% - 90px);
    transition: border-color 0.2s;
}

.single #sidebar .widget .search-field:focus {
    border-color: var(--sp-accent);
    outline: none;
}

.single #sidebar .widget .search-submit {
    background: var(--sp-text) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 0 50px 50px 0 !important;
    padding: 8px 16px !important;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.2s;
}

.single #sidebar .widget .search-submit:hover {
    background: var(--sp-accent) !important;
}

/* Neueste Beiträge – Links */
.single #sidebar .widget ul li {
    border-bottom: 1px solid var(--sp-beige);
    padding: 7px 0;
    list-style: none;
    font-size: 1.4rem;
}

.single #sidebar .widget ul li:last-child {
    border-bottom: none;
}

.single #sidebar .widget ul li a {
    color: var(--sp-text);
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.5;
}

.single #sidebar .widget ul li a:hover {
    color: var(--sp-accent);
}

/* Kommentare-Platzhaltertext */
.single #sidebar .widget .no-comments {
    color: var(--sp-muted);
    font-style: italic;
    font-size: 1.35rem;
}

/* ══════════════════════════════════════════════════
   9. RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .single .single-post-title.entry-title,
    .single h2.single-post-title {
        font-size: 3.2rem;
    }

    .single ul.meta {
        border-radius: 12px;
        font-size: 1.2rem;
    }

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

    .single .post-navigation {
        flex-direction: column;
    }

    .single .post-navigation .nav-next {
        text-align: left;
    }

    .single #author-bio #author-bio-inner {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------
   12. Sidebar — Widgets (Suche · Neueste Beiträge · Neueste Kommentare)
   ------------------------------------------------------------------ */

/* Abstand zwischen den Widget-Boxen */
.widget-area .sidebar-box {
    margin-bottom: 36px;
}

/* Widget-Titel: Standard-Blau (#13aff0) → Dusty Rose + Script-Font */
.widget-area .widget-title {
    font-family:    var(--fz-font-script), cursive;
    font-size:      1.35rem;
    font-weight:    400;
    color:          var(--fz-brown);
    text-transform: none;
    letter-spacing: 0.3px;
    line-height:    1.2;
    padding-left:   14px;
    margin-bottom:  18px;
    border-width:   0 0 0 3px;
    border-style:   solid;
    border-color:   var(--fz-rose);
}

/* ------ Suche-Widget ------ */

.widget-area .widget_search .search-form {
    display:       flex;
    overflow:      hidden;
    border:        1px solid var(--fz-beige-dark);
    border-radius: var(--fz-radius-sm);
    background:    #fff;
    transition:    border-color var(--fz-transition), box-shadow var(--fz-transition);
}

.widget-area .widget_search .search-form:focus-within {
    border-color: var(--fz-rose);
    box-shadow:   0 0 0 3px rgba(196, 150, 140, 0.15);
}

.widget-area .widget_search .search-field {
    flex:        1;
    border:      none;
    outline:     none;
    background:  transparent;
    color:       var(--fz-text);
    font-size:   0.9rem;
    padding:     10px 14px;
    line-height: 1.4;
    min-width:   0;
}

.widget-area .widget_search .search-field::placeholder {
    color: var(--fz-muted);
}

.widget-area .widget_search .search-submit {
    background:     var(--fz-brown);
    color:          #fff;
    border:         none;
    padding:        10px 18px;
    font-size:      11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor:         pointer;
    flex-shrink:    0;
    transition:     background var(--fz-transition);
}

.widget-area .widget_search .search-submit:hover {
    background: var(--fz-rose);
}

/* ------ Neueste Beiträge & Neueste Kommentare ------ */

.widget-area .widget_recent_entries ul,
.widget-area .widget_recent_comments ul {
    margin:     0;
    padding:    0;
    list-style: none;
}

/* Trennlinien: Grau → warmes Beige */
.widget-area .widget_recent_entries li,
.widget-area .widget_recent_comments li {
    padding:       10px 0;
    border-top:    none;
    border-bottom: 1px solid var(--fz-beige-dark);
    line-height:   1.45;
}

.widget-area .widget_recent_entries li:first-child,
.widget-area .widget_recent_comments li:first-child {
    border-top: 1px solid var(--fz-beige-dark);
}

/* Beitrags-Links */
.widget-area .widget_recent_entries li a {
    display:         block;
    color:           var(--fz-brown-mid);
    text-decoration: none;
    font-size:       0.9rem;
    transition:      color var(--fz-transition), padding-left var(--fz-transition);
}

.widget-area .widget_recent_entries li a:hover {
    color:        var(--fz-rose);
    padding-left: 6px;
}

/* Datum unter dem Beitrags-Titel */
.widget-area .widget_recent_entries li .post-date {
    display:        block;
    font-size:      11px;
    color:          var(--fz-muted);
    margin-top:     3px;
    letter-spacing: 0.3px;
}

/* Kommentar-Links */
.widget-area .widget_recent_comments li a {
    color:           var(--fz-brown-mid);
    text-decoration: none;
    font-size:       0.9rem;
    transition:      color var(--fz-transition);
}

.widget-area .widget_recent_comments li a:hover {
    color: var(--fz-rose);
}

/* Leerer Zustand: "Es sind keine Kommentare vorhanden." */
.widget-area .widget_recent_comments li:only-child {
    color:      var(--fz-muted);
    font-size:  0.88rem;
    font-style: italic;
    text-align: center;
    padding:    16px 0;
    border:     none;
}