/* 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;
}

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

#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 cards on technology page */
#customers > [class*="col-"] > .box {
    border-bottom: none;
}

#customers > [class*="col-"] > .box > header {
    text-align: center;
}

#customers > [class*="col-"] > .box .image.featured {
    margin-bottom: 1cm;
}

/* 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;
}