/* style.css - Giggling Girls and Bloody Violence!! Blog Stylesheet */

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #f5f0eb;
    color: #2c2c2c;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.8;
    min-height: 100vh;
}

a {
    color: #8b1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #cc0000;
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== BLOGGER WRAPPER OVERRIDES ===== */
.content-outer,
.content-fauxborder-left {
    background: transparent !important;
}

.content-inner {
    background: #ffffff;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
    border-left: 1px solid #e0d6ce;
    border-right: 1px solid #e0d6ce;
}

/* ===== HEADER ===== */
.header-outer {
    background: #ffffff;
    border-bottom: 3px solid #8b1a1a;
    padding: 25px 0 15px 0;
}

.header-inner {
    padding: 0 30px;
}

#Header1 {
    text-align: center;
}

.titlewrapper h1.title {
    font-size: 38px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8b1a1a;
    margin-bottom: 8px;
}

.titlewrapper h1.title a {
    color: #8b1a1a;
}

.titlewrapper h1.title a:hover {
    color: #cc0000;
    text-decoration: none;
}

.descriptionwrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: 10px 20px;
    border-top: 1px solid #e8e0d8;
    border-bottom: 1px solid #e8e0d8;
    background: #faf8f6;
}

.descriptionwrapper .description {
    font-size: 13px;
    color: #666;
    font-style: italic;
    letter-spacing: 0.3px;
    line-height: 1.6;
}

.descriptionwrapper .description span {
    display: block;
}

/* ===== NAVIGATION / TABS ===== */
.tabs-outer {
    background: #f5f0eb;
    border-bottom: 2px solid #e0d6ce;
}

.tabs-inner {
    padding: 0 20px;
}

#PageList1 {
    text-align: center;
}

#PageList1 .widget-content ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 0 10px 0;
    gap: 3px;
}

#PageList1 .widget-content ul li {
    display: inline-block;
    margin: 0;
}

#PageList1 .widget-content ul li a {
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: all 0.3s ease;
    background: transparent;
}

#PageList1 .widget-content ul li a:hover {
    color: #8b1a1a;
    border-color: #d4c5b8;
    background: #faf8f6;
    text-decoration: none;
}

/* ===== MAIN CONTENT ===== */
.main-outer {
    background: transparent;
}

.main-inner {
    padding: 25px 30px;
}

/* ===== POSTS ===== */
.date-header {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid #e8e0d8;
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-weight: normal;
}

.post-outer {
    background: #ffffff;
    border: 1px solid #e8e0d8;
    padding: 30px 35px;
    margin-bottom: 35px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.post-title {
    font-size: 28px;
    font-weight: bold;
    color: #2c2c2c;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #f0e8e0;
    padding-bottom: 12px;
}

.post-title a {
    color: #2c2c2c;
}

.post-title a:hover {
    color: #8b1a1a;
    text-decoration: none;
}

.post-body {
    font-size: 16px;
    color: #2c2c2c;
    line-height: 1.9;
}

.post-body p {
    margin-bottom: 18px;
}

.post-body .separator {
    margin: 10px 0 18px 0;
}

.post-body img {
    border: 1px solid #e0d6ce;
    border-radius: 4px;
    padding: 4px;
    background: #ffffff;
    max-width: 100%;
}

.post-body a {
    color: #8b1a1a;
}

.post-body a:hover {
    color: #cc0000;
}

/* ===== BLOG PAGER ===== */
#blog-pager {
    padding: 25px 0;
    text-align: center;
    border-top: 1px solid #e8e0d8;
    border-bottom: 1px solid #e8e0d8;
    margin-bottom: 35px;
}

#blog-pager a {
    display: inline-block;
    padding: 8px 24px;
    border: 1px solid #d4c5b8;
    border-radius: 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    background: #faf8f6;
    transition: all 0.3s ease;
}

#blog-pager a:hover {
    color: #8b1a1a;
    border-color: #8b1a1a;
    background: #f5f0eb;
    text-decoration: none;
}

#blog-pager .home-link {
    margin: 0 15px;
}

/* ===== COMMENTS ===== */
.comments {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid #f0e8e0;
}

.comments h4 {
    font-size: 20px;
    font-weight: bold;
    color: #2c2c2c;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.comment {
    background: #faf8f6;
    border: 1px solid #e8e0d8;
    padding: 18px 22px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.comment-header {
    border-bottom: 1px solid #e8e0d8;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.comment-header .user {
    color: #2c2c2c;
    font-weight: bold;
    font-size: 15px;
}

.comment-header .datetime {
    font-size: 12px;
    color: #888;
    margin-left: 14px;
}

.comment-content {
    color: #3c3c3c;
    font-size: 15px;
    line-height: 1.8;
}

.comment-actions a {
    font-size: 12px;
    color: #888;
}

.comment-actions a:hover {
    color: #8b1a1a;
    text-decoration: underline;
}

/* ===== LONG / SPAM COMMENTS -> COMPACT (CSS ONLY, NO HTML CHANGES) ===== */

/* 1. Stacked line breaks (<br><br><br>) collapse into a single one.
      Works on every comment and already cuts these blocks to a third. */
.comment-content br + br {
    display: none;
}

/* 2. Safety net: no single comment can take more than this much screen. */
.comment-content {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 3. Link dumps (a comment holding 8 or more links) are folded to two dim
      lines. Higher specificity than the rule above, so it always wins. */
.comment-content:has(a:nth-of-type(8)) {
    max-height: 3.4em;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.7;
    color: #a8a8a8;
}

/* every break removed: the links flow inline instead of one per line */
.comment-content:has(a:nth-of-type(8)) br {
    display: none;
}

.comment-content:has(a:nth-of-type(8)) a {
    color: #a8a8a8;
    text-decoration: none;
}

.comment-content:has(a:nth-of-type(8)) a::after {
    content: "\00b7";
    color: #d0c8c0;
    margin: 0 3px 0 5px;
}

.comment-content:has(a:nth-of-type(8)) a:last-of-type::after {
    content: none;
}

/* ===== SIDEBAR ===== */
.sidebar {
    padding-left: 25px;
}

.sidebar .widget {
    background: #faf8f6;
    border: 1px solid #e8e0d8;
    padding: 18px 20px;
    margin-bottom: 25px;
    border-radius: 4px;
}

.sidebar .widget h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #555;
    border-bottom: 2px solid #f0e8e0;
    padding-bottom: 10px;
    margin-bottom: 14px;
    font-weight: bold;
}

.sidebar .widget h2.title {
    font-size: 14px;
}

/* ===== SIDEBAR IMAGE WIDGETS -> HORIZONTAL TAG CARDS =====
   Pure CSS, no changes to the Blogger markup.
   The sidebar becomes a grid: every normal widget keeps a full-width row,
   while the consecutive .widget.Image blocks each take one narrow column,
   so they line up horizontally as small cards (tag name on top, image below).
   Columns are calculated from the sidebar width, so it works on any page
   whatever the number of image widgets is. */

.sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    column-gap: 12px;
    align-content: start;
}

/* Everything that is not an image widget stays full width */
.sidebar > .widget {
    grid-column: 1 / -1;
}

/* Image widget = one card in the row */
.sidebar > .widget.Image {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    padding: 10px 7px 9px 7px;
    text-align: center;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.sidebar > .widget.Image:hover {
    border-color: #d9c4bc;
    box-shadow: 0 2px 10px rgba(139, 26, 26, 0.10);
    transform: translateY(-2px);
}

/* Tag name on top of the card */
.sidebar > .widget.Image h2 {
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: bold;
    color: #555;
    border: none;
    padding: 0;
    margin: 0 0 7px 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    transition: color 0.25s ease;
}

.sidebar > .widget.Image:hover h2 {
    color: #8b1a1a;
}

/* Image pinned to the bottom, so all cards in a row line up */
.sidebar > .widget.Image .widget-content {
    margin-top: auto;
}

.sidebar > .widget.Image .widget-content a {
    display: block;
    line-height: 0;
}

.sidebar > .widget.Image .widget-content img {
    display: block;
    width: 100%;
    height: 62px;
    object-fit: cover;
    border: 1px solid #e0d6ce;
    border-radius: 3px;
    background: #ffffff;
}

/* Blogger leftovers that would break the card */
.sidebar > .widget.Image br,
.sidebar > .widget.Image .widget-item-control {
    display: none;
}

/* ===== POPULAR POSTS ===== */
.PopularPosts ul {
    list-style: none;
}

.PopularPosts ul li {
    padding: 12px 0;
    border-bottom: 1px solid #f0e8e0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.PopularPosts ul li:last-child {
    border-bottom: none;
}

.PopularPosts .item-thumbnail {
    flex-shrink: 0;
}

.PopularPosts .item-thumbnail img {
    border: 1px solid #e0d6ce;
    padding: 3px;
    background: #ffffff;
    border-radius: 3px;
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.PopularPosts .item-title {
    font-size: 14px;
    line-height: 1.4;
    font-weight: bold;
}

.PopularPosts .item-title a {
    color: #2c2c2c;
}

.PopularPosts .item-title a:hover {
    color: #8b1a1a;
    text-decoration: underline;
}

.PopularPosts .item-snippet {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== BLOG LIST (KINDRED SPIRITS) ===== */
#BlogList1 .blog-title a {
    color: #2c2c2c;
    font-size: 14px;
    font-weight: bold;
}

#BlogList1 .blog-title a:hover {
    color: #8b1a1a;
    text-decoration: underline;
}

#BlogList1 .item-content {
    font-size: 13px;
    color: #666;
}

#BlogList1 .blog-icon img {
    border-radius: 3px;
}

/* ===== FOLLOWERS ===== */
#Followers1 .widget-content {
    text-align: center;
}

#Followers1 .widget-content img {
    border-radius: 50%;
    border: 1px solid #e0d6ce;
}

/* ===== TRANSLATE ===== */
#Translate1 .widget-content {
    text-align: center;
}

#Translate1 .goog-te-gadget {
    color: #555 !important;
}

#Translate1 .goog-te-gadget select {
    background: #ffffff;
    color: #2c2c2c;
    border: 1px solid #d4c5b8;
    padding: 5px 10px;
    border-radius: 3px;
    font-family: 'Georgia', serif;
    font-size: 13px;
}

/* ===== FOOTER ===== */
.footer-outer {
    background: #f5f0eb;
    border-top: 3px solid #e0d6ce;
    padding: 25px 0;
}

#Attribution1 {
    font-size: 12px;
    color: #888;
    text-align: center;
    letter-spacing: 0.5px;
}

#Attribution1 a {
    color: #666;
}

#Attribution1 a:hover {
    color: #8b1a1a;
    text-decoration: underline;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 10px;
    background: #f5f0eb;
}

::-webkit-scrollbar-track {
    background: #f5f0eb;
}

::-webkit-scrollbar-thumb {
    background: #d4c5b8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b8a898;
}

/* ===== SELECTION ===== */
::selection {
    background: #8b1a1a;
    color: #ffffff;
}

::-moz-selection {
    background: #8b1a1a;
    color: #ffffff;
}

/* ===== RESPONSIVE TWEAKS ===== */
@media screen and (max-width: 800px) {
    .titlewrapper h1.title {
        font-size: 26px;
        letter-spacing: 1px;
    }

    .main-inner {
        padding: 12px 15px;
    }

    .post-outer {
        padding: 18px 20px;
    }

    .post-title {
        font-size: 22px;
    }

    .sidebar {
        padding-left: 0;
        margin-top: 25px;
    }

    #PageList1 .widget-content ul {
        gap: 2px;
    }

    #PageList1 .widget-content ul li a {
        font-size: 11px;
        padding: 6px 12px;
    }

    .columns-inner {
        display: flex;
        flex-direction: column;
    }

    .column-center-outer {
        order: 1;
    }

    .column-right-outer {
        order: 2;
    }

    .descriptionwrapper .description {
        font-size: 12px;
    }

    /* Tag cards: sidebar is wider here, allow slightly bigger cards */
    .sidebar {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
}

@media screen and (max-width: 500px) {
    .titlewrapper h1.title {
        font-size: 20px;
        letter-spacing: 0.5px;
    }

    .post-outer {
        padding: 12px 14px;
    }

    .post-title {
        font-size: 18px;
    }

    .post-body {
        font-size: 15px;
    }

    .PopularPosts ul li {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .sidebar .widget {
        padding: 12px 14px;
    }

    #blog-pager a {
        font-size: 11px;
        padding: 6px 14px;
    }

    .comment {
        padding: 12px 14px;
    }

    .comment-header .datetime {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }

    /* Tag cards on small screens */
    .sidebar {
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
        column-gap: 8px;
    }
    
    .sidebar > .widget.Image {
        padding: 8px 6px;
    }
    
    .sidebar > .widget.Image h2 {
        font-size: 9px;
        letter-spacing: 0.3px;
    }
    
    .sidebar > .widget.Image .widget-content img {
        height: 52px;
    }
}

/* ===== UTILITY ===== */
.clear {
    clear: both;
}

.hidden {
    display: none;
}

.text-center {
    text-align: center;
}

/* ===== BLOGGER OVERRIDES (keep original functionality) ===== */
.variant-hummingBirds2 .content-inner {
    background: #ffffff;
}

.variant-hummingBirds2 .main-inner .column-center-inner {
    padding: 0;
}

.variant-hummingBirds2 .main-inner .column-right-inner {
    padding: 0;
}

/* ===== POST FOOTER LINKS ===== */
.post-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f0e8e0;
}

.post-footer .post-labels {
    font-size: 13px;
    color: #888;
}

.post-footer .post-labels a {
    color: #8b1a1a;
}

.post-footer .post-labels a:hover {
    color: #cc0000;
    text-decoration: underline;
}

/* ===== SHARE BUTTONS ===== */
.share-button-link-text {
    font-size: 12px;
    color: #666;
}

/* ===== REACTIONS ===== */
.reactions-label {
    font-size: 13px;
    color: #888;
}