/*
 * RabbitEars Blog - Content Styles
 * Layout based on previous wsuper theme, adapted for RabbitEars.info integration
 */

/* ============================================
   LAYOUT: Two-column blog with right sidebar
   ============================================ */
#wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 8px;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
}
#main {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    text-align: left;
    background-color: #fff;
    padding: 0.5em 20px 2em 1em;
}
#content {
    display: block;
    text-align: left;
}

/* ============================================
   SIDEBAR
   ============================================ */
#sidebar {
    flex: 0 0 230px;
    width: 230px;
    text-align: left;
    padding-left: 0;
    margin-top: 0;
    font-size: 0.875em;
    line-height: 1.6;
}
#blognav,
#blogextra {
    background-color: #666666;
    color: #eee;
    padding: 0.75em;
    margin-bottom: 0.5em;
}
#blognav h2,
#blogextra h2 {
    font-size: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
}
#sidebar h3 {
    font-size: 0.95em;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    margin: 1em 0 0.3em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid #888;
}
#sidebar h3:first-child {
    margin-top: 0;
}
#sidebar .widget {
    margin-bottom: 0.5em;
}
#sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#sidebar li {
    padding: 0.25em 0.25em;
    border-bottom: 1px solid #777;
    display: block;
}
#sidebar li:last-child {
    border-bottom: none;
}
#sidebar a:link,
#sidebar a:visited {
    color: #ddd;
    text-decoration: none;
    border: none;
}
#sidebar a:hover,
#sidebar a:focus {
    color: #fff;
    background-color: #d52125;
}
#sidebar input[type='search'],
#sidebar #q {
    width: 75%;
    padding: 0.25em;
    margin-top: 0.25em;
    border: 1px solid #888;
    background: #555;
    color: #fff;
}
#sidebar input[type='submit'] {
    padding: 0.25em 0.5em;
    background: #444;
    color: #fff;
    border: 1px solid #555;
    cursor: pointer;
    vertical-align: top;
    margin-top: 0.25em;
}
#sidebar input[type='submit']:hover {
    background: #333;
}

/* Hide empty extra menu section */
#blogextra:empty,
#blogextra:has(> h2:only-child) {
    display: none;
}
#blogextra h2:only-child {
    display: none;
}

/* Category current highlight */
.category-current {
    background-color: #333;
}

/* Calendar widget */
#sidebar table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
}
#sidebar table caption {
    font-weight: bold;
    padding-bottom: 0.3em;
    color: #fff;
}
#sidebar th {
    background-color: #444;
    color: #fff;
    padding: 0.25em;
    text-align: center;
    font-size: 0.85em;
}
#sidebar td {
    text-align: center;
    padding: 0.2em;
}
#sidebar td a {
    font-weight: bold;
}

/* ============================================
   DAY DATE SEPARATOR
   Right-aligned date with line beneath
   ============================================ */
.post-day-date {
    font-size: 0.85em;
    text-align: right;
    color: #555;
    margin: 1.5em 0 0 0;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #ccc;
}
/* Remove decorative before/after pseudo-elements from Berlin */
.post-day-date:before,
.post-day-date:after {
    display: none !important;
}

/* ============================================
   POST FORMATTING
   ============================================ */
.post {
    max-width: none;
    margin: 0 0 1.5em;
    padding: 0;
    text-align: left;
}

/* Post title - left aligned, bold */
.post-title {
    font-size: 1.3em;
    font-weight: bold;
    text-align: left;
    margin: 0.4em 0 0.1em;
    line-height: 1.3;
}
.post-title a,
.post-title a:link,
.post-title a:visited {
    color: #267daf;
    text-decoration: none;
    border-bottom: none;
}
.post-title a:hover,
.post-title a:focus {
    color: #1a5a7a;
    text-decoration: underline;
}

/* Post metadata line */
.post-meta {
    font-size: 0.8em;
    background-color: transparent;
    border-radius: 0;
    padding: 0 0 0 0.2em;
    margin-bottom: 0.75em;
    clear: both;
    color: #666;
}
.post-info {
    margin: 0.2em 0;
}
.full .post-info,
.short .post-info,
.post-cat,
.post-tags-list {
    margin: 0.2em 0;
    display: inline;
    vertical-align: top;
}
.post-info a,
.post-meta a {
    color: #555;
    border-bottom: none;
}
.post-info a:hover,
.post-meta a:hover {
    color: #d52125;
}

/* Post meta icons */
.post-date,
.post-cat,
.post-tags-list,
.post-permalink,
.comment_count,
.ping_count,
.attach_count,
.feed {
    padding-left: 22px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding-right: 0.5em;
}
.post-author {
    padding-right: 0.5em;
}
.post-date {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAVUlEQVR4AWOAgfS8CgMg/g/EDHiwAroaZEkHIgxgwGbAfaigAzKNAzOg0fcZkCQDiDBAAY3+j2xAP1RzP6ZGTDUoBpCDqW4AAzl4WBkwasB7ChLSewARMrRM3s//dwAAAABJRU5ErkJggg==');
}
.post-cat {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAPklEQVQ4jWNgoDVIz6sQAOL3QPwfC35PjOYGHJrBmAGP6URhBko0gw2gRiBR5gJKnDFqwGAygJKkjD8zEQMAfaDXiG8i/HEAAAAASUVORK5CYII=');
}
.post-tags-list {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiElEQVR42pWRwQmAMAxFHSGjOIIjOEJv3jx77CYdwVEcxRG0wcqX4vfXwIeS8B4J7b5qmpeQc5DEVjg9elYSPY0wqoAJAgWTgkDBWsBhIVgvARrjDzjdv1CvtOdYI7zVgt4FZWACDvwE2I3CeI9vJwzVJgwOPiMnQKJgKRGwlJhHwEKiYC3R8AlasOr+Us7WEQAAAABJRU5ErkJggg==');
    padding-left: 22px !important;
}
.comment_count {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAy0lEQVR4Aa3TzQnDMAwFYI2QETxCRsgIHcG33oqPPWqDjuARMoJHyAgeISOor/AExtQhDS184Abp+S+Rv/7uj2eABBkKvCCCjPhgYrFBhZX/S/PsdhSwwT6YbWKgQfwWoGyeQQ5k1oU+YGeInFAh9QEGy8mAzO0E0CsBfrDeF69sQSEwoP5yiIlNoRmbX9PGdBlQNiTW1zbgo3AVa/MGql8dJRDWGG3CN8zImwutzayBz6wxC/euB2ewcCXW2WFi0VD/cSlXrBRZeN0b9TCAAS8suQkAAAAASUVORK5CYII=');
}
.post-permalink {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXklEQVR4Ae3OoRGAQAxE0S2BUugKh6YbSkwJISswzBcRF8fN/HP7JvI7zmurospmUcn5e4Gs1Cy/gFYBrQYuGAV+4HZtAMbhAGEAxrsDhAEYywHCAI8RQSB4jIiTewBEcJB73aUZqgAAAABJRU5ErkJggg==');
}

/* Tags list inline formatting */
.post-tags-list {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}
.post-tags-item {
    list-style: none;
    display: inline-block;
    vertical-align: top;
}
.post-tags-item a:after {
    content: ',';
}
.post-tags-item:last-child a:after {
    content: '';
}

/* Post content */
.post-content {
    line-height: 1.7;
    margin: 0.5em 0 0.75em;
    color: #333;
}
.post-content img {
    max-width: 100%;
    height: auto;
}
.post-content a {
    color: #0066cc;
}
.post-content a:hover {
    color: #d52125;
}
.post-content blockquote {
    font-style: italic;
    color: #555;
    border-left: 3px solid #267daf;
    margin-left: 0;
    padding-left: 1em;
}
.post-content pre {
    background-color: #555;
    color: #efd540;
    padding: 0.5em 1em;
    overflow-x: auto;
    font-size: 0.875em;
}
.post-content code {
    background-color: #555;
    color: #efd540;
    padding: 0.1em 0.3em;
    font-size: 0.9em;
}
.post-content pre code {
    padding: 0;
}

/* Comment count bar - gray background, right-aligned */
.post-info-co {
    background-color: #ddd;
    padding: 0.3em 0.75em;
    margin: 0.5em 0 0;
    text-align: right;
    font-size: 0.85em;
    color: #555;
}
.post-info-co a {
    color: #333;
    border-bottom: none;
}
.post-info-co a:hover {
    color: #d52125;
}

/* Continue Reading button */
.post-read-it a {
    display: inline-block;
    background-color: #999;
    color: #fff;
    padding: 0.3em 1em;
    border-radius: 3px;
    font-weight: bold;
    text-decoration: none;
}
.post-read-it a:hover {
    background-color: #777;
    color: #fff;
}

/* Post attachments */
.post-attachments {
    position: relative;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    margin: 1em 0;
}
.post-attachments-title {
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: bold;
    color: #666;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
    text-align: center;
    margin: 1.5em 0;
    padding: 0.5em 0;
}
.pagination a {
    color: #0066cc;
    margin: 0 0.3em;
}
.pagination a:hover {
    color: #d52125;
}

/* ============================================
   BREADCRUMB
   ============================================ */
#breadcrumb {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 0.5em;
    text-align: left;
}
#breadcrumb a {
    color: #0066cc;
}

/* ============================================
   CONTENT INFO (category/tag pages)
   ============================================ */
#content-info {
    margin-bottom: 2em;
    border-bottom: 1px solid #ddd;
    padding: 0;
    font-size: 0.875em;
}
#content-info h2 {
    display: inline-block;
    padding: 0.4em 0.6em;
    border-radius: 4px;
    background-color: #267daf;
    color: #fff;
    font-size: 1.1em;
}
#content-info h2 a {
    color: #fff;
}
#content-info h3 {
    font-size: 1em;
}
#content-info ul {
    padding-left: 0;
}
.content-info__feed {
    display: inline-block;
    list-style-type: none;
}
.content-info__feed li {
    display: inline;
    margin-right: 1.5em;
}

/* ============================================
   COMMENTS
   ============================================ */
.post-feedback {
    max-width: none;
    margin: 2em 0;
    clear: both;
}
.post-feedback h3 {
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    margin-bottom: 1em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #ccc;
}
/* Remove decorative before/after on feedback headings */
.post-feedback h3:before,
.post-feedback h3:after {
    display: none !important;
}
.comments-list {
    list-style: none;
    padding-left: 0;
}
.comments-list li {
    list-style: none;
}
.comment,
.ping {
    overflow: hidden;
    padding: 0.75em 1.5em;
    margin-bottom: 1.5em;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}
.ping {
    background-color: #f3efed;
}

/* Comment form */
.comment-form,
.send-trackback {
    overflow: hidden;
    padding: 0.75em 1.5em;
    margin-bottom: 2em;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}
.field label {
    display: inline-block;
    width: 10em;
}
.field input {
    max-width: 100%;
}
.field textarea {
    display: block;
    width: 100%;
}
.form-help,
.remember {
    font-size: 0.875em;
}
#pr {
    background-color: #f3f3f3;
    padding: 0.5em;
    border: 2px solid #6c7c7c;
    margin-bottom: 1em;
}
.buttons {
    text-align: right;
}
button.submit,
button.preview {
    background-color: #4d4d4d;
    border: 1px solid #333;
    border-radius: 3px;
    color: #fff;
    padding: 0.4em 1em;
    cursor: pointer;
}
button.submit:hover,
button.preview:hover {
    background-color: #333;
}

/* ============================================
   ARCHIVE PAGES
   ============================================ */
.arch-block {
    display: inline-block;
    margin: 0 0 2em 2em;
    vertical-align: top;
}
.arch-block:first-child {
    margin-left: 0;
}
.arch-block h3 {
    color: #267daf;
    font-size: 1.1em;
    font-style: italic;
    margin-bottom: 0.5em;
}
.arch-block h4 {
    font-weight: bold;
    font-size: 1em;
    color: #333;
    margin: 0;
}
.arch-list,
.arch-sub-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.arch-sub-list {
    margin-left: 20px;
}
.arch-by-year {
    margin-bottom: 1em;
    margin-top: 1.5em;
}
.arch-by-year h3:first-child {
    margin-top: 0;
}
.fromto {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 0.875em;
    font-style: italic;
}

/* Tag cloud sizing */
.arch-tag-list li {
    display: inline-block;
    padding-right: 0.75em;
}
.arch-tag-list .tag0  { color: #999; font-size: 90%; }
.arch-tag-list .tag10 { color: #888; font-size: 92%; }
.arch-tag-list .tag20 { color: #777; font-size: 94%; }
.arch-tag-list .tag30 { color: #666; font-size: 96%; }
.arch-tag-list .tag40 { color: #555; font-size: 98%; }
.arch-tag-list .tag50 { color: #444; font-size: 100%; }
.arch-tag-list .tag60 { color: #333; font-size: 102%; }
.arch-tag-list .tag70 { color: #222; font-size: 104%; }
.arch-tag-list .tag80 { color: #111; font-size: 106%; }
.arch-tag-list .tag90 { color: #050505; font-size: 108%; }
.arch-tag-list .tag100 { color: #000; font-size: 110%; }

/* ============================================
   FOOTNOTES
   ============================================ */
.footnotes {
    font-size: 0.875em;
    margin-top: 2em;
    margin-bottom: 2em;
}
.footnotes h4 {
    display: inline-block;
    border-top: 1px solid #267daf;
    padding-right: 2em;
}

/* ============================================
   NAVIGATION LINKS (prev/next post)
   ============================================ */
.navlinks {
    margin: 1em 0;
    text-align: center;
}

/* ============================================
   FEED ICON
   ============================================ */
.feed {
    background-image: url('data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNiAxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEzIDBoLTEwYy0xLjY1NyAwLTMgMS4zNDMtMyAzdjEwYzAgMS42NTcgMS4zNDMgMyAzIDNoMTBjMS42NTcgMCAzLTEuMzQzIDMtM3YtMTBjMC0xLjY1Ny0xLjM0My0zLTMtM3ptLTguNjg1IDEyLjk3N2MtLjcxOSAwLTEuMzAzLS41OC0xLjMwMy0xLjI5OSAwLS43MTQuNTg0LTEuMzAxIDEuMzAzLTEuMzAxLjcyMSAwIDEuMzA0LjU4NyAxLjMwNSAxLjMwMSAwIC43MTgtLjU4MyAxLjI5OS0xLjMwNSAxLjI5OXptMy4yNzQuMDExYzAtMS4yMjgtLjQ3Ny0yLjM4MS0xLjM0MS0zLjI0My0uODY0LS44NjYtMi4wMTMtMS4zNDQtMy4yMzQtMS4zNDR2LTEuODc2YzMuNTYxIDAgNi40NiAyLjg5OSA2LjQ2IDYuNDYzem0zLjMyOS0uMDAyYzAtNC4zNjEtMy41NDUtNy45MS03LjkwMi03Ljkxdi0xLjg3NmM1LjM5NCAwIDkuNzg0IDQuMzkyIDkuNzg0IDkuNzg2eiIgZmlsbD0iIzY3NmU3OCIvPjwvc3ZnPg=='), none;
    background-size: 0.875em;
    padding-left: 1.25em;
}

/* ============================================
   ERROR PAGE
   ============================================ */
.error {
    background-color: #d52125;
    color: #fff;
    padding: 0.5em 1em;
    border-radius: 4px;
}

/* ============================================
   RESPONSIVE: Stack sidebar below on mobile
   ============================================ */
@media (max-width: 700px) {
    #wrapper {
        flex-direction: column;
    }
    #main {
        padding-right: 1em;
    }
    #sidebar {
        flex: 1 1 auto;
        width: auto;
    }
    .post {
        margin: 0 0 1.5em;
    }
}