/* ============================================================
   single.css / archive.css — shared between both templates
   Styles for individual posts and the news archive.
   Add this file as both single.css and archive.css, or
   load it from functions.php for both templates.
   Depends on variables defined in style.css.
============================================================ */

/* ============================================================
   POST LAYOUT — centred, no sidebar
============================================================ */
.post-layout {
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 40px 80px;
}

/* ============================================================
   HERO META — date and category in subtitle
============================================================ */
.post-date,
.post-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.post-date i,
.post-category i {
    font-size: 0.8rem;
    opacity: 0.8;
}

.post-meta-divider {
    margin: 0 6px;
    opacity: 0.5;
}

.page-hero-sub a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

.page-hero-sub a:hover {
    color: var(--white) !important;
}

/* ============================================================
   POST CARD — wraps the content
============================================================ */
.post-card {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 40px 44px;
}

/* ============================================================
   POST CONTENT — styles for WP editor output
============================================================ */
.post-content h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--blue);
    margin: 28px 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--blue-light);
}

.post-content h2:first-child {
    margin-top: 0;
}

.post-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 20px 0 8px;
}

.post-content p {
    margin-bottom: 14px;
    color: var(--text-mid);
    line-height: 1.7;
}

.post-content ul,
.post-content ol {
    padding-left: 22px;
    margin-bottom: 14px;
    color: var(--text-mid);
}

.post-content li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.post-content strong {
    color: var(--text);
}

.post-content a {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: var(--cyan);
    text-underline-offset: 3px;
}

.post-content a:hover {
    color: var(--cyan);
}

/* ============================================================
   POST FOOTER — tags and back link
============================================================ */
.post-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-tag {
    display: inline-block;
    background: var(--blue-light);
    color: var(--blue) !important;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none !important;
    border: 1px solid #C5D8EE;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.post-tag:hover {
    background: var(--blue);
    color: var(--white) !important;
}

.post-tag--small {
    font-size: 0.72rem;
    padding: 3px 8px;
}

.post-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--blue) !important;
    text-decoration: none !important;
    transition: gap 0.15s ease;
}

.post-back-link:hover {
    gap: 10px;
}

/* ============================================================
   ARCHIVE LIST
============================================================ */
.archive-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.archive-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--blue) !important;
    text-decoration: none !important;
    margin-bottom: 20px;
}

.archive-card {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--blue);
    padding: 24px 28px;
    transition: border-color 0.15s ease;
}

.archive-card:hover {
    border-left-color: var(--cyan);
}

.archive-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    font-size: 0.82rem;
    color: var(--text-light);
}

.archive-card-meta .post-date {
    font-size: 0.82rem;
    color: var(--text-light);
}

.archive-card-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.archive-card-title a {
    color: var(--text) !important;
    text-decoration: none !important;
}

.archive-card-title a:hover {
    color: var(--blue) !important;
}

.archive-card-excerpt {
    font-size: 0.92rem;
    color: var(--text-light);
    margin-bottom: 12px;
    line-height: 1.6;
}

.archive-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue) !important;
    text-decoration: none !important;
    transition: gap 0.15s ease;
}

.archive-card-link:hover {
    gap: 10px;
    color: var(--cyan) !important;
}

/* ============================================================
   PAGINATION
============================================================ */
.archive-pagination {
    margin-top: 32px;
}

.archive-pagination ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 6px;
    flex-wrap: wrap;
}

.archive-pagination ul li a,
.archive-pagination ul li span {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
    color: var(--blue) !important;
    background: var(--white);
    transition: all 0.15s ease;
}

.archive-pagination ul li span.current {
    background: var(--blue);
    color: var(--white) !important;
    border-color: var(--blue);
}

.archive-pagination ul li a:hover {
    background: var(--blue-light);
    border-color: var(--blue);
}

/* ============================================================
   MOBILE
============================================================ */
@media (max-width: 800px) {
    .post-layout {
        padding: 24px 20px 60px;
    }
    .post-card {
        padding: 24px 22px;
    }
    .post-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}