/*
Theme Name: One Strike Away
Description: The original One Strike Away baseball archive layout, rebuilt for WordPress.
Version: 1.2.2
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: one-strike-away
*/

@font-face {
    font-family: 'PT Serif';
    src: url('assets/pt-serif-regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'PT Serif';
    src: url('assets/pt-serif-italic.woff2') format('woff2');
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PT Serif';
    src: url('assets/pt-serif-bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: Muli;
    src: url('assets/muli.woff2') format('woff2');
    font-display: swap;
}

:root {
    --osa-blue: #0c3b7d;
    --osa-red: #b11420;
    --osa-canvas: 1140px;
    --osa-edge: #ccc;
    --osa-sans: Arial, Helvetica, sans-serif;
    --osa-nav: 'Trebuchet MS', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: #4a4b52;
    color: #000;
    font: 16px/1.6 'PT Serif', Georgia, serif;
    overflow-wrap: anywhere;
}

a { color: var(--osa-red); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--osa-red); outline-offset: 3px; }
img, video, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; }
iframe { border: 0; }
h1, h2, h3, h4 { margin: 0 0 .55em; font-family: var(--osa-sans); line-height: 1.3; }
h1, h2 { font-size: 22px; }
h3 { font-size: 17px; }

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.screen-reader-text:focus {
    z-index: 100;
    top: 12px;
    left: 12px;
    width: auto;
    height: auto;
    clip-path: none;
    padding: 10px 16px;
    background: #fff;
}

.site-canvas { max-width: var(--osa-canvas); margin: 8px auto 0; background: #fff; }
.site-header { display: flex; flex-direction: column; }

.masthead {
    display: flex;
    align-items: flex-start;
    min-height: 249px;
    padding: 0 20px;
    background: #eee url('assets/banner.png') no-repeat center top;
}

.masthead img { width: auto; max-width: 100%; max-height: 206px; }
.brand-title { align-self: center; color: var(--osa-blue); font: 700 32px/1.2 var(--osa-sans); }

.site-nav {
    color: #d1d6df;
    background: var(--osa-blue);
    border-bottom: 1px solid #000;
    text-align: center;
}

.site-nav ul, .footer-nav ul, .side-list, .archive-poll ul { list-style: none; margin: 0; padding: 0; }

.site-nav .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 59px;
}

.site-nav a, .nav-toggle {
    display: block;
    color: inherit;
    font: 16px/1.2 var(--osa-nav);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.site-nav a { padding: 12px 8px; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav .current-menu-item > a { color: #fff; }
.site-nav .sub-menu, .site-nav .children { padding-left: .7rem; }
.site-nav .sub-menu a, .site-nav .children a { font-size: 13px; }
.nav-toggle, .nav-toggle[hidden] { display: none; }

.site-layout, .osa-home-columns {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 200px);
    grid-template-areas: 'left content right';
    grid-column-gap: 20px;
    padding: 11px 20px 30px;
}

.site-layout main, .osa-home-main { grid-area: content; min-width: 0; }
.sidebar-left { grid-area: left; }
.sidebar-right { grid-area: right; }
/* Classic WordPress themes may add this wrapper to the Group block. */
.osa-home-columns > .wp-block-group__inner-container { display: contents; }
.osa-home-columns > .wp-block-group,
.osa-home-columns > .wp-block-group__inner-container > .wp-block-group { margin: 0; }
.site-layout.no-sidebar, .editable-home.no-sidebar .osa-home-columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'content';
}
.editable-home.no-sidebar :is(.osa-home-left, .osa-home-right) { display: none; }
.editable-home > :not(.osa-home-columns, .screen-reader-text) { margin-inline: 20px; }

.archive-story + .archive-story { border-top: 1px solid var(--osa-edge); margin-top: 28px; padding-top: 16px; }
.archive-story-header .story-title { margin: 0; font: 700 22px/1.3 var(--osa-sans); }
.story-title a { color: #000; }
.archive-date { display: block; }

.entry-content { margin-top: 24px; }
.entry-content p, .entry-content ul, .entry-content ol { margin: 0 0 1em; }
.entry-content figure, .archive-story > figure { margin: 0 0 22px; }
.archive-story > figure { margin-top: 24px; }
.archive-story > figure + .entry-content { margin-top: 0; }
.entry-content figcaption, .wp-caption-text { font-size: 14px; color: #555; }
.entry-content blockquote { margin: 1em 0; padding: .25em 1em; border-left: 2px solid var(--osa-edge); }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content table { display: block; overflow: auto; border-collapse: collapse; }
.entry-content :is(th, td) { border: 1px solid var(--osa-edge); padding: .35em .6em; }
.entry-content pre { overflow: auto; }
.entry-content iframe { width: 100%; max-height: 70vh; }
.entry-content audio { width: 100%; }
.entry-content::after { content: ''; display: block; clear: both; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: 0 1em .8em 0; }
.alignright { float: right; margin: 0 0 .8em 1em; }
.post-tags, .pagination, .post-navigation { margin-top: 20px; }

.archive-heading { border-bottom: 1px solid var(--osa-edge); margin-bottom: 20px; padding-bottom: 10px; }
.archive-heading p { margin: 0; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.story-grid .story { border: 1px solid var(--osa-edge); }
.story-grid .lead { grid-column: 1 / -1; }
.story-pad, .panel { padding: 12px; }
.story-cover { display: block; }
.story-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.story-meta, .eyebrow { margin: 0 0 .4em; font-size: 14px; }
.story-excerpt { margin: 0; }
.read-more { display: inline-block; margin-top: .6em; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em; }
.page-numbers { padding: 0 .3em; }

.sidebar { min-width: 0; font-size: 14px; line-height: 1.25; }
.sidebar-section { margin-bottom: 24px; }
.sidebar-right .sidebar-section { margin-top: 24px; margin-bottom: 50px; }

.widget-title {
    border-bottom: 1px solid #000;
    margin: 0 0 24px;
    padding: 1px 0 6px;
    color: #000;
    font: 700 14px/1.2 Muli, var(--osa-sans);
    letter-spacing: .35px;
    text-transform: uppercase;
}

.widget-title a { color: inherit; }
.side-list li { margin: 0 0 11px; }

.archive-poll {
    width: 152px;
    max-width: 100%;
    border: 1px solid var(--osa-edge);
    border-radius: 12px;
    padding: 11px 6px;
    font: 13px/1.3 var(--osa-sans);
}

.archive-poll h3 { margin: 0; padding-bottom: 15px; border-bottom: 1px solid #ddd; font-size: 14px; line-height: 1.2; }
.archive-poll li { padding-top: 20px; }
.poll-circle { display: block; width: 13px; height: 13px; margin-bottom: 10px; border: 1px solid #888; border-radius: 50%; }

.search-form { display: flex; align-items: stretch; width: 100%; min-height: 52px; border: 1px solid #bfbfbf; }
.search-field, .search-submit { border: 0; background: transparent; color: #444; font: inherit; }
.search-field { width: 100%; min-width: 0; padding: 0 8px 0 0; font-size: 16px; }
.search-submit { display: grid; place-items: center; flex: 0 0 45px; cursor: pointer; }
.search-field::placeholder { color: #999; }
.comments-area { margin-top: 24px; }
.comment-form label:not([for=wp-comment-cookies-consent]) { display: block; }
.comment-form input, .comment-form textarea { max-width: 100%; font: inherit; }

.site-footer { border-top: 1px solid var(--osa-edge); padding: 14px 20px; text-align: center; }
.site-footer p { margin: 0; }
.footer-nav .menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

@media (min-width: 801px) and (max-width: 1120px) {
    .site-layout:not(.no-sidebar), .editable-home:not(.no-sidebar) .osa-home-columns {
        grid-template-columns: minmax(130px, 18%) minmax(0, 1fr) minmax(130px, 18%);
    }
}

@media (max-width: 800px) {
    .masthead { justify-content: center; order: 2; min-height: 0; padding: 0 24px; }
    .masthead img { max-height: 206px; }
    .site-nav { order: 1; }
    .site-nav .menu { display: block; min-height: auto; }
    .site-nav.has-toggle .nav-toggle {
        display: block;
        width: 100%;
        min-height: 63px;
        padding: 10px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .site-nav.has-toggle:not(.is-open) .nav-inner { display: none; }
    .site-layout, .site-layout.no-sidebar, .osa-home-columns {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'content' 'right' 'left';
        row-gap: 26px;
        padding: 5px 24px 24px;
        border-top: 1px solid #000;
    }
    .site-layout.no-sidebar { grid-template-areas: 'content'; }
    .editable-home > :not(.osa-home-columns, .screen-reader-text) { margin-inline: 24px; }
    .entry-content { margin-top: 35px; }
    .sidebar-right .sidebar-section { margin-bottom: 26px; }
}

@media (max-width: 480px) {
    .story-grid { grid-template-columns: minmax(0, 1fr); }
}