/* Remove italics from navigation links */
#nav > ul > li {
    font-style: normal;
}

/* Make header logo responsive on small screens */
#header img {
    max-width: 95%;
    height: auto;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Extra spacing below the home page intro box */
#intro {
    margin-bottom: 2em;
    text-align: left;
}

/* Restore box padding on narrow screens — the theme's #intro rule zeroes left/right padding
   at three breakpoints (≤1280px, ≤980px, ≤736px). The .box base padding is 2.75em 1.75em;
   the ≤736px breakpoint reduces it to 25px 15px. */
@media screen and (max-width: 1280px) {
    section#intro {
        padding: 2.75em 1.75em;
    }
}

@media screen and (max-width: 736px) {
    section#intro {
        padding: 25px 15px 20px 15px;
    }
}

/* Match blockquote bottom spacing to paragraphs */
blockquote {
    margin-bottom: 1.5em;
}

/* Hint text styling */
p.hint {
    font-style: italic;
    font-size: 0.9em;
    color: #888;
    margin-top: -1em;
}

/* Center store icons in game boxes and keep them horizontal */
.box footer ul.actions {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1em;
}

.box footer ul.actions li {
    margin-top: 0;
}

/* Center blog post navigation */
article.post > footer ul.actions {
    text-align: center;
}

/* Stack blog post navigation buttons vertically on small screens */
@media screen and (max-width: 480px) {
    article.post > footer ul.actions {
        flex-direction: column;
        gap: 0.5em;
    }

    article.post > footer ul.actions li {
        width: 100%;
    }

    article.post > footer ul.actions li .button {
        width: 100%;
    }
}

/* Style code blocks in blog posts */
article.post code {
    font-family: "Courier New", Courier, monospace;
    background-color: rgba(0, 0, 0, 0.08);
    padding: 0.5em 1em;
    margin-left: 0.5cm;
    border-radius: 0.5em;
    display: inline-block;
    max-width: calc(100% - 1cm);
    overflow-x: auto;
}

/* Indent blog post article lists a bit */
article.post > ol,
article.post > ul {
    margin: 1cm;
}

/* Center example members */
article.post > ul.examples {
    text-align: center;
}

article.post > ul.examples li {
    list-style-type: none;
    display: inline-block;
}

article.post > ul.examples li img {
    padding: 2mm;
}

/* Make cards in the same row have equal heights */
#games > .row,
#blog > .row,
#main .row {
    display: flex;
    flex-wrap: wrap;
}

/* The theme uses margin-top: -50px on every .row to collapse the gutter
   when columns wrap within one row. When multiple separate .row elements
   are stacked in #main .container this negative margin pulls each row flush
   against the previous one, leaving zero visible space between them.
   Resetting it for rows that follow another row lets the column's
   padding-top: 50px create the expected inter-row gap. */
#main .container > .row + .row {
    margin-top: 0;
}

#games > .row > [class*="col-"],
#blog > .row > [class*="col-"],
#main .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

#games > .row > [class*="col-"] > .box,
#blog > .row > [class*="col-"] > .box,
#main .row > [class*="col-"] > .box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Push the footer to the bottom of each card */
#games > .row > [class*="col-"] > .box > footer,
#blog > .row > [class*="col-"] > .box > footer {
    margin-top: auto;
}

/* Customer site images nested inside the main box — cancel the theme's
   bleed-out offsets (designed for images inside their own individual boxes). */
.box .row > [class*="col-"] > p {
    text-align: center;
}

.box .row .image.featured {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0 0 1em 0;
}

/* Bottom- and right-align the Read More links in main page cards */
#main .row > [class*="col-"] > .box > p.read-more {
    margin-top: auto;
    text-align: right;
}

/* Add spacing between form inputs and buttons */
form input[type="text"],
form input[type="email"],
form input[type="password"] {
    margin-bottom: 1em;
}

/* Restore native checkbox appearance (theme sets appearance:none on all inputs) */
input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: auto;
    width: auto;
    margin-right: 0.5em;
}

/* Saved indicator that appears after toggling a subscription */
.saved-indicator {
    color: #4a4;
    font-weight: bold;
    margin-left: 0.5em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.saved-indicator.visible {
    opacity: 1;
}

.saved-indicator.fading {
    opacity: 0;
    transition: opacity 1.5s ease;
}

/* Sidebar link styles (apply .sidebar class to any sidebar section) */
.blog-sidebar a,
.sidebar a {
    text-decoration: none;
}

.blog-sidebar a:hover,
.sidebar a:hover {
    text-decoration: underline;
}

/* Highlight the current post in the blog post sidebar */
.blog-sidebar li.current > a {
    font-weight: bold;
    color: #009444;
}