/**
 * Blog styles — archive cards + single post
 *
 * Hand-authored CSS, deliberately NOT part of the assets/scss -> theme.css
 * pipeline. theme.css is a compiled artifact; regenerating it requires the
 * sass toolchain from package.json and would put the whole site at risk for
 * the sake of a few blog rules. This file is enqueued separately and only on
 * blog views (see inc/blog-functions.php), so `npm run dev` can never
 * overwrite it and a mistake here cannot affect any other page.
 *
 * Accent is the brand red (#dd0c03) — the same red configured on the button
 * colours in the Customizer. It is the only accent used here; remaining
 * tokens mirror assets/scss/sass_files/_variables.scss.
 *
 * @since 1.0
 */

:root {
    --blog-accent: #dd0c03;
    --blog-ink: #212529;
    --blog-heading: #303a3b;
    --blog-muted: #606060;
    --blog-muted-light: #919191;
    --blog-border: #e4e4e4;
    --blog-surface: #f7f7f7;
    --blog-radius: 4px;
    --blog-font-body: "Open Sans", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --blog-font-meta: "Montserrat", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ==========================================================================
   Shared meta styling (dates, authors, categories)
   ========================================================================== */

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--blog-font-meta);
    font-size: 13px;
    font-weight: 500;
    color: var(--blog-muted);
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-meta li {
    display: inline-flex;
    align-items: center;
}

/* Dot separator between meta items. Using a pseudo-element on the separator
   itself rather than borders keeps it out of the accessibility tree. */
.blog-meta li + li::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--blog-muted-light);
    margin: 0 10px;
    flex-shrink: 0;
}

.blog-meta svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.blog-meta a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.blog-meta a:hover,
.blog-meta a:focus {
    color: var(--blog-ink);
    border-bottom-color: var(--blog-accent);
}

.blog-eyebrow {
    display: inline-block;
    font-family: var(--blog-font-meta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blog-accent);
    text-decoration: none;
    margin-bottom: 12px;
}

a.blog-eyebrow:hover,
a.blog-eyebrow:focus {
    color: var(--blog-ink);
    text-decoration: none;
}

/* ==========================================================================
   Archive header
   ========================================================================== */

.blog-archive__header {
    margin-bottom: 45px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--blog-border);
}

.blog-archive__header h1 {
    font-family: var(--blog-font-body);
    font-size: 2rem;
    font-weight: 600;
    color: var(--blog-heading);
    margin: 0 0 10px 0;
}

.blog-archive__count {
    font-family: var(--blog-font-meta);
    font-size: 13px;
    color: var(--blog-muted-light);
    margin: 0;
}

.blog-archive__description {
    font-family: var(--blog-font-body);
    color: var(--blog-muted);
    margin: 12px 0 0 0;
    max-width: 60ch;
}

/* ==========================================================================
   Post cards
   ========================================================================== */

.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.post-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
    border-color: #d6d6d6;
    transform: translateY(-3px);
}

.post-card__media {
    position: relative;
    display: block;
    /* Fixed ratio box keeps the grid aligned regardless of source image size. */
    padding-top: 56.25%;
    background: var(--blog-surface);
    overflow: hidden;
}

/* theme.css sets `img[width][height]{max-width:100%;height:auto}` globally and
   WordPress prints width/height attributes on featured images, so that rule
   (0,2,1) outranks a plain `.post-card__media img` (0,1,1) and the image kept
   its natural height instead of covering the box. Repeating the attribute
   selector here wins on specificity without resorting to !important. */
.post-card .post-card__media img,
.post-card .post-card__media img[width][height] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.post-card:hover .post-card__media img {
    transform: scale(1.04);
}

/* Placeholder shown when a post has no featured image, so cards without one
   still hold their shape in the grid instead of collapsing. */
.post-card__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    height: 160px;
    background: linear-gradient(135deg, #f2f2f2 0%, #e8e8e8 100%);
}

.post-card__media--placeholder svg {
    width: 42px;
    height: 42px;
    stroke: #c4c4c4;
    fill: none;
    stroke-width: 1.4;
}

.post-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px;
}

/* Parent class included for the same reason as .author-box__name — the
   theme's `.content-inner h2` would otherwise size every card title at 30px. */
.post-card .post-card__title {
    font-family: var(--blog-font-body);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 12px 0;
}

.post-card__title a {
    color: var(--blog-heading);
    text-decoration: none;
}

.post-card__title a:hover,
.post-card__title a:focus {
    color: var(--blog-accent);
    text-decoration: none;
}

.post-card .blog-meta {
    margin-bottom: 14px;
}

.post-card__excerpt {
    font-family: var(--blog-font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--blog-muted);
    margin: 0 0 20px 0;
}

.post-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.post-card__author {
    display: flex;
    align-items: center;
    font-family: var(--blog-font-meta);
    font-size: 12px;
    color: var(--blog-muted-light);
    min-width: 0;
}

.post-card__author img,
.post-card__author img[width][height] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.post-card__author span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-card .read-more {
    font-family: var(--blog-font-meta);
    font-size: 13px;
    font-weight: 700;
    color: var(--blog-accent);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.post-card .read-more:hover,
.post-card .read-more:focus {
    color: var(--blog-ink);
    text-decoration: none;
}

.post-card .read-more::after {
    content: "\2192";
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.2s ease;
}

.post-card:hover .read-more::after {
    transform: translateX(3px);
}

/* Grid gutters — cards sit in Bootstrap columns, this spaces the rows. */
.blog-grid__item {
    margin-bottom: 30px;
}

/* ==========================================================================
   Featured (first) card on page 1 — full width, side-by-side on desktop
   ========================================================================== */

@media screen and (min-width: 768px) {
    .post-card--featured {
        flex-direction: row;
    }

    .post-card--featured .post-card__media {
        flex: 0 0 45%;
        max-width: 45%;
        padding-top: 0;
        min-height: 290px;
    }

    .post-card--featured .post-card__media--placeholder {
        height: auto;
    }

    .post-card--featured .post-card__body {
        flex: 1 1 55%;
        padding: 30px;
        justify-content: center;
    }

    .post-card--featured .post-card__title {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.blog-empty {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed var(--blog-border);
    border-radius: var(--blog-radius);
    background: var(--blog-surface);
}

.blog-empty h2 {
    font-family: var(--blog-font-body);
    font-size: 1.5rem;
    color: var(--blog-heading);
    margin-bottom: 10px;
}

.blog-empty p {
    color: var(--blog-muted);
    margin: 0;
}

/* ==========================================================================
   Single post
   ========================================================================== */

.single-post__header {
    margin-bottom: 30px;
}

.content-inner .single-post__header h1 {
    font-family: var(--blog-font-body);
    font-weight: 600;
    line-height: 1.25;
    color: var(--blog-heading);
    margin: 0 0 18px 0;
}

.single-post__header .blog-meta {
    padding-top: 18px;
    border-top: 1px solid var(--blog-border);
}

.single-post__thumbnail {
    margin: 0 0 35px 0;
    border-radius: var(--blog-radius);
    overflow: hidden;
}

.single-post__thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

.single-post__thumbnail figcaption {
    font-family: var(--blog-font-meta);
    font-size: 12px;
    color: var(--blog-muted-light);
    padding: 10px 2px 0;
}

/* Readability pass over post body copy. Scoped to .single-post__content so
   it cannot leak into the service/landing pages that share .content-inner. */
.single-post__content {
    font-family: var(--blog-font-body);
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--blog-ink);
}

.single-post__content > *:first-child {
    margin-top: 0;
}

.single-post__content p {
    margin-bottom: 1.5rem;
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    color: var(--blog-heading);
    font-weight: 600;
}

.single-post__content ul,
.single-post__content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.3rem;
}

.single-post__content li {
    margin-bottom: 0.5rem;
}

.single-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--blog-radius);
}

.single-post__content blockquote {
    margin: 2rem 0;
    padding: 6px 0 6px 24px;
    border-left: 3px solid var(--blog-accent);
    font-size: 1.125rem;
    font-style: italic;
    color: var(--blog-muted);
}

.single-post__content blockquote p:last-child {
    margin-bottom: 0;
}

.single-post__content a {
    color: var(--blog-accent);
    text-decoration: underline;
}

.single-post__content a:hover,
.single-post__content a:focus {
    color: var(--blog-ink);
}

.single-post__content table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.single-post__content th,
.single-post__content td {
    padding: 10px 12px;
    border: 1px solid var(--blog-border);
    text-align: left;
}

.single-post__content th {
    background: var(--blog-surface);
    font-weight: 600;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.single-post__tags {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--blog-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.single-post__tags .tag-label {
    font-family: var(--blog-font-meta);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blog-muted-light);
    margin-right: 4px;
}

.single-post__tags a {
    display: inline-block;
    font-family: var(--blog-font-meta);
    font-size: 13px;
    color: var(--blog-muted);
    background: var(--blog-surface);
    border: 1px solid var(--blog-border);
    border-radius: 100px;
    padding: 5px 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.single-post__tags a:hover,
.single-post__tags a:focus {
    background: var(--blog-accent);
    border-color: var(--blog-accent);
    /* White on the brand red clears AA (5.09:1); the theme's usual #161616
       label colour only reaches 3.59:1 against it. */
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
   Author box
   ========================================================================== */

.author-box {
    display: flex;
    align-items: flex-start;
    margin-top: 45px;
    padding: 30px;
    background: var(--blog-surface);
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
    /* Accent edge ties the box to the theme's button colour. */
    border-left: 4px solid var(--blog-accent);
}

.author-box__avatar {
    flex-shrink: 0;
    margin-right: 22px;
}

.author-box__avatar img,
.author-box__avatar img[width][height] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: block;
}

.author-box__content {
    flex-grow: 1;
    min-width: 0;
}

.author-box__label {
    font-family: var(--blog-font-meta);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--blog-muted-light);
    margin: 0;
}

/* Scoped with the parent class so it beats the theme's `.content-inner h2`
   (0,1,1), which was forcing this to 30px with its own bottom margin. */
.author-box .author-box__name {
    font-family: var(--blog-font-body);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--blog-heading);
    margin: 2px 0 10px 0;
}

.author-box__name a {
    color: inherit;
    text-decoration: none;
}

.author-box__name a:hover,
.author-box__name a:focus {
    color: var(--blog-accent);
    text-decoration: none;
}

.author-box__bio {
    font-family: var(--blog-font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--blog-muted);
    margin: 0 0 14px 0;
}

.author-box__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.author-box__links a {
    font-family: var(--blog-font-meta);
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.author-box__links a:hover,
.author-box__links a:focus {
    color: var(--blog-ink);
    text-decoration: none;
}

.author-box__links svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   Post navigation (previous / next)
   ========================================================================== */

.post-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--blog-border);
}

.post-navigation__item {
    flex: 1 1 calc(50% - 10px);
    min-width: 220px;
    display: block;
    padding: 18px 22px;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.post-navigation__item:hover,
.post-navigation__item:focus {
    border-color: var(--blog-accent);
    background: var(--blog-surface);
    text-decoration: none;
}

.post-navigation__item--next {
    text-align: right;
}

.post-navigation__label {
    display: block;
    font-family: var(--blog-font-meta);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--blog-muted-light);
    margin-bottom: 6px;
}

.post-navigation__title {
    display: block;
    font-family: var(--blog-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--blog-heading);
}

/* ==========================================================================
   Pagination — extends the existing .sgi-pagination markup
   ========================================================================== */

.blog-posts .sgi-pagination {
    margin-top: 20px;
}

.blog-posts .sgi-pagination .page-numbers li a,
.blog-posts .sgi-pagination .page-numbers li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    font-family: var(--blog-font-meta);
    font-size: 14px;
    font-weight: 600;
    color: var(--blog-muted);
    background: #fff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-posts .sgi-pagination .page-numbers li a:hover,
.blog-posts .sgi-pagination .page-numbers li a:focus {
    border-color: var(--blog-accent);
    color: var(--blog-ink);
}

.blog-posts .sgi-pagination .page-numbers li span.current {
    background: var(--blog-accent);
    border-color: var(--blog-accent);
    color: #fff;
}

/* ==========================================================================
   Sidebar spacing on blog views
   ========================================================================== */

.blog-posts .widget-wrapper {
    position: sticky;
    top: 100px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 991px) {
    .blog-posts .widget-wrapper {
        position: static;
        margin-top: 40px;
    }
}

@media screen and (max-width: 767px) {
    .content-inner .single-post__header h1 {
        font-size: 1.625rem;
    }

    .single-post__content {
        font-size: 1rem;
    }

    .author-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 25px 20px;
    }

    .author-box__avatar {
        margin: 0 0 16px 0;
    }

    .author-box__links {
        justify-content: center;
    }

    .post-navigation__item,
    .post-navigation__item--next {
        flex: 1 1 100%;
        text-align: left;
    }

    .blog-archive__header {
        margin-bottom: 30px;
    }

    .post-card__body {
        padding: 20px;
    }
}

/* Respect users who have asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .post-card,
    .post-card__media img,
    .post-card .read-more::after,
    .single-post__tags a,
    .post-navigation__item {
        transition: none;
    }

    .post-card:hover {
        transform: none;
    }

    .post-card:hover .post-card__media img {
        transform: none;
    }
}