/*
Theme Name: Curious Cat Management Child
Description: Custom layout and readable typography for the management blog.
Template: ccmib
Version: 1.0.0
Text Domain: ccmib-child
*/

/* Keep the browser's default font size as the basis for relative sizes. */
html { font-size: 100%; }
body { font-size: 1rem; }

@media screen {
    /* 200px wider overall: 160px for articles and 40px for sidebar spacing. */
    #branding, #main, #wrapper, #colophon, #access { width: 1140px; }
    #access .menu-header, div.menu { width: 1128px; }
    #content { margin-right: 320px; }
    .one-column #content { width: 800px; }
    .single-attachment #content { width: 1140px; }
    #site-title, #site-info { width: 900px; }
    #footer-widget-area .widget-area { width: 270px; }

    /* Preserve the header image's intrinsic size. */
    #branding img { width: auto; height: auto; }

    /* Relative typography follows browser font-size preferences. */
    #content { font-size: 1.2rem; line-height: 1.6; }
    #content input, #content textarea { font-size: 1em; line-height: 1.6; }
    #content .entry-title { font-size: 1.575rem; line-height: 1.3; }
    .entry-meta, .entry-utility { font-size: 0.9rem; line-height: 1.5; }
    #content .page-title { font-size: 1.05rem; line-height: 1.5; }
    #content .page-title span { font-size: 1.2rem; }
    #content pre, #content kbd, #content tt, #content var { font-size: 0.9375em; line-height: 1.5; }
    #content code { font-size: 0.8125em; }
    #content .entry-content h1, #content .entry-content h2,
    #content .entry-content h3, #content .entry-content h4,
    #content .entry-content h5, #content .entry-content h6 { line-height: 1.4; }
    #content .entry-content tr th, #content .entry-content thead th,
    #content .entry-content label, #respond label { font-size: 0.9rem; line-height: 1.5; }
}

/* Sidebar typography: a modest 10% increase, independent of article text. */
@media screen {
    #primary, #secondary { font-size: 1.1rem; line-height: 1.5; }
    #primary input, #primary button, #primary select,
    #secondary input, #secondary button, #secondary select { font-size: 1em; }
    #primary .entry-meta, #secondary .entry-meta { font-size: 0.75625rem; }
}

/* Link interaction colors: blue post titles and purple other links. */
a:active,
a:hover,
a:focus-visible { color: #743399; }

.page-title a:active,
.page-title a:hover,
.page-title a:focus-visible { color: #743399; }

.entry-title a:active,
.entry-title a:hover,
.entry-title a:focus-visible { color: #0066cc; }

.page-link a:active,
.page-link a:hover,
.page-link a:focus-visible { color: #743399; }

.entry-meta a:hover,
.entry-utility a:hover,
.entry-meta a:focus-visible,
.entry-utility a:focus-visible { color: #743399; }

.navigation a:active,
.navigation a:hover,
.navigation a:focus-visible { color: #743399; }

.comment-meta a:active,
.comment-meta a:hover,
.comment-meta a:focus-visible { color: #743399; }

.reply a:hover,
a.comment-edit-link:hover,
.reply a:focus-visible,
a.comment-edit-link:focus-visible { color: #743399; }

.widget_rss a.rsswidget:hover,
.widget_rss a.rsswidget:focus-visible { color: #743399; }

/* The custom footer credit uses the available footer width. */
#colophon #site-info.ccmib-footer-credit { width: 100%; font-size: 0.875rem; line-height: 1.5; }

/* Give the footer a distinct, spacious visual boundary. */
@media screen {
    #footer { margin-top: 2rem; }
    #colophon {
        box-sizing: border-box;
        background: #eef3f8;
        border-top: 4px solid #0066cc;
        margin-top: 0;
        padding: 1.75rem 1.5rem;
    }
    #colophon #site-info.ccmib-footer-credit {
        color: #26384a;
        font-size: 1rem;
        line-height: 1.6;
        text-align: center;
    }
    #site-info.ccmib-footer-credit a { color: #0066cc; }
    #site-info.ccmib-footer-credit a:hover,
    #site-info.ccmib-footer-credit a:focus-visible {
        color: #743399;
        text-decoration: underline;
    }
}

/* Use the footer width for archive and category links. */
@media screen {
    #footer-widget-area .widget-area { float: none; width: 100%; margin-right: 0; }
    #footer-widget-area .widget-area > ul.xoxo {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 2.5rem;
        margin: 0 0 1.5rem;
    }
    #footer-widget-area .widget-container { min-width: 0; margin-bottom: 0; }
    #footer-widget-area .wp-block-heading {
        color: #26384a;
        font-size: 1.25rem;
        line-height: 1.4;
        margin-bottom: 1rem;
    }
    #footer-widget-area ul.wp-block-archives,
    #footer-widget-area ul.wp-block-categories {
        column-gap: 1.25rem;
        list-style: none;
        margin: 0;
        font-size: 1rem;
        line-height: 1.5;
    }
    #footer-widget-area ul.wp-block-archives { column-count: 3; }
    #footer-widget-area ul.wp-block-categories { column-count: 2; }
    #footer-widget-area .wp-block-archives li,
    #footer-widget-area .wp-block-categories li {
        break-inside: avoid;
        margin-bottom: 0.4rem;
    }
    #colophon #site-info.ccmib-footer-credit {
        box-sizing: border-box;
        border-top: 1px solid #cbd8e5;
        padding-top: 1.25rem;
    }
}
@media screen and (max-width: 50rem) {
    #footer-widget-area .widget-area > ul.xoxo { grid-template-columns: 1fr; gap: 1.5rem; }
    #footer-widget-area ul.wp-block-archives { column-count: 2; }
}

/* Archived quote treatment, with spacing relative to the reading font. */
#content .entry-content blockquote,
#content .entry-summary blockquote,
#content .comment-content blockquote {
    position: relative;
    /* A separate formatting context keeps quote borders clear of floated images. */
    display: flow-root;
    max-width: 71%;
    margin: 0 auto 1.25em;
    padding: 1.5em 2em;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    background: transparent;
    font-size: 1em;
    font-style: normal;
    line-height: 1.6;
}
#content .entry-content blockquote::before,
#content .entry-summary blockquote::before,
#content .comment-content blockquote::before {
    content: "\201C";
    position: absolute;
    top: 0;
    left: 0.13em;
    color: rgba(0, 0, 0, 0.2);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4em;
    line-height: 1;
}
#content .entry-content blockquote::after,
#content .entry-summary blockquote::after,
#content .comment-content blockquote::after {
    content: "\201D";
    position: absolute;
    bottom: -0.325em;
    right: 0.13em;
    color: rgba(0, 0, 0, 0.2);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4em;
    line-height: 1;
}
#content blockquote p:last-child { margin-bottom: 0; }
#content blockquote em, #content blockquote i { font-style: italic; }
@media screen and (max-width: 50rem) {
    #content .entry-content blockquote,
    #content .entry-summary blockquote,
    #content .comment-content blockquote { box-sizing: border-box; max-width: 100%; }
}

/* Place the sidebar beside both the header and article column on desktop. */
@media screen and (min-width: 50.001rem) {
    body:not(.one-column):not(.single-attachment) #wrapper {
        display: grid;
        grid-template-columns: 860px 220px;
        /* Keep the long sidebar from stretching the header row. */
        grid-template-rows: max-content minmax(0, 1fr) auto auto;
        column-gap: 60px;
    }
    body:not(.one-column):not(.single-attachment) #header { grid-column: 1; grid-row: 1; min-width: 0; }
    body:not(.one-column):not(.single-attachment) #branding,
    body:not(.one-column):not(.single-attachment) #access { width: 860px; }
    body:not(.one-column):not(.single-attachment) #access .menu-header,
    body:not(.one-column):not(.single-attachment) #access div.menu { width: 848px; }
    body:not(.one-column):not(.single-attachment) #site-title { width: 620px; }
    body:not(.one-column):not(.single-attachment) #main { display: contents; }
    body:not(.one-column):not(.single-attachment) #container {
        grid-column: 1;
        grid-row: 2;
        float: none;
        width: auto;
        min-width: 0;
        margin: 0;
        padding-top: 40px;
    }
    body:not(.one-column):not(.single-attachment) #content { margin-right: 40px; }
    body:not(.one-column):not(.single-attachment) #primary {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: start;
        padding-top: 30px;
    }
    body:not(.one-column):not(.single-attachment) #secondary { grid-column: 2; grid-row: 3; }
    body:not(.one-column):not(.single-attachment) #footer { grid-column: 1 / -1; grid-row: 4; }
}
/* Archives are now in the sidebar; the footer contains the copyright credit. */
#colophon #site-info.ccmib-footer-credit { border-top: 0; padding-top: 0; }

/* Keep previous/next post navigation below the article only. */
.single-post #content #nav-above { display: none; }

/* Slightly larger previous/next article links. */
.single-post #content #nav-below {
    font-size: 1.05rem;
    line-height: 1.5;
}