.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

.menu-button:hover {
    color: var(--primary-color);
}

.titlebar.collapsed {
    position: fixed;
    top: 0;
    left: 0;
}

/* Desktop: hide the bar while scrolling down, slide it back in on scroll up.
   Below this width the bar stays put, as it did before. */
@media (min-width: 769px) {
    .titlebar {
        transition: transform 0.25s ease;
    }

    .titlebar.nav-hidden {
        transform: translateY(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .titlebar {
        transition: none;
    }
}

/* Plain white with a full-bleed hairline rather than a drop shadow: the shadow
   is the main thing that dates a sticky header. The background and rule sit on
   the bar itself so they reach the viewport edges -- .nav is capped at 1000px
   and centred, so putting them there left the rule stopping short. */
.titlebar.collapsed {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

.titlebar.collapsed .nav{
    padding: 0 3px;
    background-color: transparent;
    margin-top: 0px;
    box-shadow: none;
}

/* Once scrolled, the compact bar is just the nav. The promo banner and the
   latest-articles strip belong to the top of the page, not to the sticky bar. */
.titlebar.collapsed #skyscraper,
.titlebar.collapsed #latest-articles {
    display: none;
}

/* A sustained scroll up brings the two strips back, but the nav itself stays
   compact: .collapsed is never lifted below the very top of the page. */
.titlebar.collapsed.strips-open #skyscraper {
    display: flex;
}

.titlebar.collapsed.strips-open #latest-articles {
    display: block;
}

.titlebar.collapsed .logo {
    font-size: 20px;
}
.titlebar.collapsed .logo img {
    max-height: 28px;
    width: auto;
}

.menu-modal{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    display: none;
    z-index: 1001;
    overflow-y: auto;
}

/* The panel lines up with the content column rather than the viewport edge, so
   the close button lands where the menu button that opened it was. The content
   column is the nav's 1000px, centred; below that width the panel fills the
   screen and there is no gutter to line up with. */
@media (min-width: 769px) {
    .menu-modal {
        padding-left: max(0px, calc((100% - 1000px) / 2));
    }

    /* The strip of screen left of the panel takes the site colour instead of the
       dim overlay: on a wide screen it is a visible band, and it reads as part
       of the site rather than as dead space. */
    .menu-modal::before {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: max(0px, calc((100% - 1000px) / 2));
        background: var(--primary-color);
        pointer-events: none;
    }
}

.search-item p {
    margin-top: 0px;
}
.search-header {
    text-transform:uppercase;
    color: #757575;
    font-size: smaller;
}
.menu {
    width: max( min(300px,100vw), 45vw);
    height: 100vh;
    background-color: white;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 1002;
    /* So the close button is positioned against the panel, not the viewport. */
    position: relative;
}

/* Close button at the top left */
.close-modal {
    position: absolute;
    top: 10px;
    left: 10px; /* Move close button to top left */
    background: none;
    border: none;
    font-size: 1.5em;
    color: #333;
    cursor: pointer;
    padding: 10px;
}

/* Sit where the menu button that opened this was. The panel starts at the nav's
   left edge, so these offsets are the nav's own button position, less a couple
   of pixels: the close glyph's box is taller than the menu icon (1.5em text
   against a 20px svg), so matching the boxes would leave the marks themselves
   4px apart. These line up the marks. */
@media (min-width: 769px) {
    .close-modal {
        top: 73px;
        left: 18px;
    }
}

.close-modal:focus {
    outline: none; /* Removes default focus outline */
}

.search-modal {
    max-width: min(100vw, 1050px);
    margin: auto;
    display: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.search-modal .search-box {
    width:100%;
    margin: 0 auto;
    padding: 0 30px;
}
.search-modal .search-box button {
    margin-left: 0;
}


.search-box {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

form {
    width: 100%;
}

.search-box input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    font-size: 1.5rem;
    width:100%;
}

.search-box button {
    padding: 10px 20px;
    background-color: #ccc;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 1rem;
}

.search-box button:hover {
    background-color: #bbb;
}

.menu-modal.active, .search-modal.active {
    display: flex;
}

.menu-modal ul {
    margin-top: 50px;
    padding: 20px;
    padding-bottom: 50px;
    list-style: none;
    background-color: white;
}

/* The close button sits lower on desktop, where it lines up with the menu
   button rather than the corner, so the list has to start below it. */
@media (min-width: 769px) {
    .menu-modal ul {
        margin-top: 130px;
    }
}

.menu-modal ul hr {
    border: 1px solid var(--primary-color-light);
}

.menu-modal ul li {
    margin: 10px 0;
    font-size: 1.3em;
    cursor: pointer;
    text-transform: uppercase;
}

.menu-modal a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.menu-modal a {
    color: var(--primary-color);
    text-decoration: none;
}

.search-modal input {
    width: 80%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search-modal button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    background-color: #444;
    color: #fff;
    margin-left: 10px;
    cursor: pointer;
}

.content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.content p {
    margin-top: 20px;
}

footer {
    margin-top: 30px;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 10px 60px 10px;
    bottom: 0;
    width: 100%;
}

.footer-section {
    flex: 1;
    min-width: 200px;
    padding: 10px;
}

.footer-section h4 {
    margin-bottom: 10px;
    text-align: center;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin: 5px 0;
    text-align: center;
}

.footer-section ul li a {
    color: #fff;
    text-decoration: none;
}

.footer-section ul li a:hover {
    text-decoration: underline;
}

.footer-search input {
    width: 80%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.footer-search button {
    padding: 5px 10px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


.social-share-icons {
    margin: 20px auto;
    max-width: 816px;
    list-style-type: none;
    padding: 0;
    display: none;
    gap: 20px;
}
.social-share-icons svg {
    width: 1em; /* Makes the icon size relative to the font-size of the button */
    height: 1em; /* Maintains the aspect ratio */
    fill: currentColor; /* Inherits the button's text color */
    vertical-align: middle; /* Aligns the icon with any text or content */
}
.social-share-icons li {
    display: inline-block;
}
.social-share-icons a {
    text-decoration: none;
    color: #bdbdbd;
    font-size: 24px;
    transition: color 0.3s;
}
.social-share-icons a:hover {
    color: var(--primary-color);
}


.page-container {
    font-family: 'Open Sans', sans-serif;
    max-width: 816px;
    padding: 0px var(--padding);
}


.footer {
    text-align: center;
    font-size: 0.9em;
    color: #777;
    margin-top: 40px;
}

/* Link base styles now inlined in base.html <style> */

/* Responsive Design */
@media (max-width: 480px) {
    .search-box {
        padding: 0 10px;
    }
}

@media (max-width: 768px) {

    .homepage-container {
        max-width: 816px;
        padding: 0 var(--padding);
    }

    .menu-modal ul li {
        font-size: 1.1rem;
        line-height: 1.2;
        padding: 10px;
        padding-left: 0px;
    }
}

.related-article-wrapper a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.affiliate-disclosure a {
    color: #555;
    text-decoration: underline;
}

.image-source a {
    text-decoration: none;
    color: #555;
    text-decoration: underline;
}

.content-container {
    padding: 0 var(--padding);
}

.contact-section {
    margin-top: 20px;
    display: flex;
    gap: 2em;
}

.contact-card {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.card-body {
    margin-bottom: 20px;
}

.row {
    display: flex;
    gap: 10px;
}

.col {
    flex: 1;
}

.input-box {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-control {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea.form-control {
    resize: vertical;
}

.contact-button {
    background: #007bff;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    width: 100%;
}

.contact-button:hover {
    background: #0056b3;
}

.contact-section p {
    margin: 10px 0;
}

@media (max-width: 700px) {
    .row {
        display: block;
    }
    .contact-section {
        margin-top: 20px;
        display: block;
        gap: 0;
    }
}


footer .copyright {
    text-transform: uppercase;
    font-size: 0.7em;
    color: #bdbdbd;
}

footer hr {
    background-color: #444;
    border: 0;
    max-width: 200px;
    margin: auto;
    height: 2px;
}

.resultExcerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.search-item img {
    max-width: 100px;
    margin-right: 20px;
    flex-shrink: 0;
}

.search-item .search-text {
    flex-grow: 1;
}

.search-text a {
    font-weight:300;
    font-size:larger;
    line-height:0ch;
}

@media (max-width: 600px) {
    .search-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-item img {
        margin-right: 0;
        margin-bottom: 10px;
        max-width: 100%;
    }
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 40px 0 20px;
    flex-wrap: wrap;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: background 0.15s, border-color 0.15s;
}

.pagination-link:hover {
    background: #f5f5f5;
    border-color: #bbb;
    text-decoration: none;
}

.pagination-link.active {
    background: #333;
    color: #fff;
    border-color: #333;
    font-weight: 600;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: #999;
    font-size: 14px;
}

.pagination-prev,
.pagination-next {
    font-weight: 500;
}

.category-pages {
    display: flex;
    flex-wrap: wrap;
    flex: 1 2;
    gap: 20px;
    margin-bottom: 20px;
}

.category-page {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    line-height: 1.2em;
}

.category-page img {
    background-color: #757575;
    max-width: 150px;
    height: auto;
    flex-shrink: 0;
}

.category-page div {
    flex-grow: 1;
}

.category-page a {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}

.category-page p {
    color: #555;
    font-size: 0.9em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sitemap ul:first-child {
    padding-left: 0px;
}


/* .pull-related-small h2 now inlined in article.html <style> */

.aside-related-article a:hover {
    text-decoration:underline;
}

/* h2/h3/h4 font now inlined in base.html <style> */

.article-body tr:nth-child(even) {
    background-color: #fafafa;
}

.article-body tr:hover {
    background-color: #f0f0f0;
}

/* Article header excerpt font now inlined in article.html <style> */

.text-warning {
    color: #ff6600;
}

.text-positive {
    color: #339900;
}

.text-primary {
    color: blue
}

pre, code {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    box-sizing: border-box;
}

pre, code {
    background-color: #f6f8fa;
    border-radius: 6px;
    padding: 12px 16px;
    font-family: 'Fira Mono', 'Consolas', 'Monaco', monospace;
    font-size: 1em;
    color: #24292e;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

pre {
    margin: 24px 0;
    overflow-x: auto;
}

code {
    background-color: #f6f8fa;
    padding: 2px 6px;
    border-radius: 4px;
}

pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
}

.rec-reading-item:last-child {
    border-bottom: 1px solid #e8e8e8;
}

.rec-reading-item a:hover .rec-reading-title {
    text-decoration: underline;
}

/* Explore more pills */
.article-explore {
    max-width: 816px;
    margin: 32px auto 0;
    padding: 0 var(--padding);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.explore-label {
    font-family: 'Gilda Display', Times, 'Times New Roman', serif;
    font-size: 1.15rem;
    color: #333;
    margin-right: 4px;
}

.explore-pill {
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid #999;
    border-radius: 24px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

.explore-pill:hover {
    background-color: #333;
    color: #fff;
}

/* Article feedback / voting */
.article-feedback {
    max-width: 816px;
    margin: 28px auto 36px;
    padding: 0 var(--padding);
    text-align: center;
}

.feedback-line {
    border-top: 1px solid #d0d0d0;
    margin-bottom: 20px;
}

.feedback-prompt {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    color: #555;
    margin: 0 0 12px;
}

.feedback-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.feedback-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.feedback-btn svg {
    fill: #888;
    transition: fill 0.2s;
}

.feedback-btn:hover {
    border-color: #555;
}

.feedback-btn:hover svg {
    fill: #333;
}

.feedback-btn.selected {
    background-color: var(--primary-color, #333);
    border-color: var(--primary-color, #333);
}

.feedback-btn.selected svg {
    fill: #fff;
}

.feedback-thanks {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    color: #777;
    margin-top: 12px;
}