/*
Theme Name: Royal Elementor Kit Child
Theme URI: https://royal-elementor-addons.com/royal-elementor-kit/
Template: royal-elementor-kit
Author: Sheldon Johnson
Description: Modern government/professional child theme for Royal Elementor Kit. Supports custom post types: agency, athlete, department, division, document, executive, facility, grant, news, notice, press-release, procurement-schedule, programme, publication, registration, request-for-proposal, speech, tender, vacancy, addendum, notice-of-award.
Version: 3.0.0
*/

/* ===========================================================================
   0. DESIGN TOKENS
   All brand colours, spacing, shadows, and radii in one place.
   =========================================================================== */
:root {
    /* Brand palette */
    --color-primary:        #002855;   /* Deep navy — authority */
    --color-primary-light:  #1d4ed8;   /* Bright blue — CTAs & accents */
    --color-primary-hover:  #1e3a6e;   /* Hover state for primary */
    --color-accent-left:    #1d4ed8;   /* Left-border accent on detail panels */
    --color-danger:         #dc2626;   /* Dates, closed states */
    --color-danger-bg:      #fef2f2;
    --color-danger-border:  #fca5a5;
    --color-closed-bg:      #111827;   /* Registration Closed — black */
    --color-success:        #15803d;

    /* Surfaces */
    --color-surface:        #f8fafc;   /* Page background */
    --color-surface-card:   #ffffff;   /* Card / panel background */
    --color-surface-panel:  #f1f5f9;   /* Info panel background */
    --color-border:         #e2e8f0;
    --color-border-light:   #f0f4f8;

    /* Typography */
    --color-heading:        #0f172a;
    --color-body:           #374151;
    --color-muted:          #6b7280;
    --color-link:           #1d4ed8;
    --color-link-hover:     #1e3a6e;

    /* Elevation */
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card:  0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
    --shadow-hover: 0 12px 32px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-inset: inset 0 1px 3px rgba(0,0,0,0.06);

    /* Geometry */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-pill:  999px;

    /* Spacing */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}

/* ===========================================================================
   1. ARCHIVE PAGE — grid cards
   =========================================================================== */

.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Card shell */
.archive-item-inner {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-top-color var(--transition-base);
}

.archive-item-inner:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-top-color: var(--color-primary-light);
}

/* Archive thumbnail */
.archive-thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-bottom: 1px solid var(--color-border-light);
    display: block;
}

/* Archive card content */
.archive-content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Archive headings */
.page-title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 14px;
}

.entry-title {
    font-size: 1.25rem;
    margin: 0 0 0.6rem;
}

.entry-title a {
    color: var(--color-heading);
    text-decoration: none;
    line-height: 1.35;
    transition: color var(--transition-fast);
}

.entry-title a:hover {
    color: var(--color-primary-light);
}

/* Archive meta */
.entry-meta {
    font-size: 0.78rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    display: block;
}

/* Archive excerpt */
.entry-summary {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-body);
    margin-bottom: var(--space-md);
}

/* Meta badge variants */
.meta-position { color: var(--color-primary-light); }
.meta-date     { color: var(--color-danger); }
.meta-type     {
    background: var(--color-surface-panel);
    color: var(--color-body);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
}

/* ===========================================================================
   2. SHARED BUTTON SYSTEM
   One set of button rules used across all post types.
   =========================================================================== */

/* Primary action button — used by .button, and all *-link-btn classes.
   Matches the Executive Read More button treatment for consistency and readability. */
.button,
.programme-link-btn,
.addendum-link-btn,
.award-link-btn,
.rfp-link-btn,
.tender-link-btn,
.grant-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--color-surface-panel) !important;
    color: var(--color-primary) !important;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    box-shadow: none;
    white-space: nowrap;
}

.button:hover,
.button:focus,
.programme-link-btn:hover,
.programme-link-btn:focus,
.addendum-link-btn:hover,
.addendum-link-btn:focus,
.award-link-btn:hover,
.award-link-btn:focus,
.rfp-link-btn:hover,
.rfp-link-btn:focus,
.tender-link-btn:hover,
.tender-link-btn:focus,
.grant-link-btn:hover,
.grant-link-btn:focus {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary);
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    outline: none;
}

/* Button containers — normalise the margins from different post types */
.programme-register-btn,
.addendum-download-btn,
.award-download-btn,
.rfp-download-btn,
.tender-download-btn,
.grant-register-btn,
.grant-download-btn {
    margin-top: var(--space-md);
}

/* ===========================================================================
   3. SINGLE PAGE LAYOUT — card-on-grey
   =========================================================================== */

/* Page background */
.content-wrapper.site-content {
    background-color: var(--color-surface);
    padding: var(--space-xl) 0;
    margin-bottom: -14px;
}

/* The content card */
body.single #primary.site-main {
    background-color: var(--color-surface-card);
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 64px;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    border-top: 5px solid var(--color-primary);
    border-bottom: 2px solid var(--color-border);
    width: 100%;
}

/* Base article typography */
article {
    color: var(--color-body);
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Single page title */
h1.entry-title {
    color: var(--color-primary);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    text-align: center;
    margin-top: 0;
    margin-bottom: 24px;
    line-height: 1.2;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 20px;
    font-weight: 700;
}

/* ===========================================================================
   4. IMAGES
   =========================================================================== */

.post-thumbnail img,
.executive-image img,
.press-thumbnail img,
.addendum-thumbnail img,
.award-thumbnail img,
.rfp-thumbnail img,
.tender-thumbnail img,
.grant-thumbnail img,
.programme-thumbnail img,
.registration-thumbnail img,
.notice-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--color-border);
    display: block;
}

/* Executive portrait — constrained height, centred */
.executive-image img {
    max-height: 420px;
    margin: 0 auto var(--space-lg);
}

/* Speech photo — narrower, centred */
.speech-thumbnail img {
    width: 70%;
    margin: 0 auto var(--space-lg);
}

/* ===========================================================================
   5. ENTRY CONTENT (main body text)
   =========================================================================== */

.entry-content,
.facility-content,
.speech-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-body);
}

.entry-content p,
.facility-content p,
.speech-content p {
    margin-bottom: 1.4rem;
}

.entry-content a,
.facility-content a,
.speech-content a,
.division-page-url a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.entry-content a:hover,
.facility-content a:hover,
.speech-content a:hover,
.division-page-url a:hover {
    color: var(--color-link-hover);
}

/* ===========================================================================
   6. INFO / DETAIL PANELS  (left-border card style)
   =========================================================================== */

.agency-details,
.division-details,
.executive-meta,
.facility-details,
.vacancy-details,
.programme-details,
.programme-info,
.registration-details,
.document-action,
.department-details,
.division-page-url,
.addendum-info,
.award-info,
.rfp-info,
.tender-info,
.grant-details,
.speech-details {
    background-color: var(--color-surface-panel);
    border-left: 4px solid var(--color-accent-left);
    padding: 24px 28px;
    margin-bottom: var(--space-lg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-sm);
}

/* Links inside panels */
.agency-details a,
.division-details a,
.facility-details a,
.grant-details a,
.addendum-info a,
.award-info a,
.rfp-info a,
.tender-info a,
.programme-info a,
.registration-details a,
.vacancy-details a,
.document-action a:not(.button) {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.agency-details a:hover,
.division-details a:hover,
.facility-details a:hover,
.grant-details a:hover,
.addendum-info a:hover,
.award-info a:hover,
.rfp-info a:hover,
.tender-info a:hover,
.programme-info a:hover,
.registration-details a:hover,
.vacancy-details a:hover,
.document-action a:not(.button):hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}

/* Lists inside panels */
.facility-details ul,
.programme-info ul,
.grant-details ul,
.addendum-info ul,
.award-info ul,
.rfp-info ul,
.tender-info ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.facility-details li,
.programme-info li,
.grant-details li,
.addendum-info li,
.award-info li,
.rfp-info li,
.tender-info li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}

.facility-details li:last-child,
.programme-info li:last-child,
.grant-details li:last-child,
.addendum-info li:last-child,
.award-info li:last-child,
.rfp-info li:last-child,
.tender-info li:last-child {
    border-bottom: none;
}

/* ===========================================================================
   7. META TYPOGRAPHY — labels, positions, dates
   =========================================================================== */

.position,
.meta-type,
.meta-date {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.position {
    color: var(--color-primary-light);
    font-weight: 800;
}

.meta-date {
    color: var(--color-danger);
    font-weight: 600;
}

/* ===========================================================================
   8. DATE AREAS — consistent label / value rows
   =========================================================================== */

.date-area {
    background: var(--color-surface-panel);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Label/value flex rows — shared by programme, addendum, registration, rfp, tender */
.programme-date-area,
.addendum-date-area,
.registration-date-area,
.rfp-date-area,
.tender-date-area,
.tender-status-area {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.programme-date-label,
.addendum-date-label,
.registration-date-label,
.rfp-date-label,
.tender-date-label,
.tender-status-label {
    font-weight: 700;
    color: var(--color-muted);
    min-width: 110px;
    flex-shrink: 0;
}

.programme-date-value,
.addendum-date-value,
.registration-date-value,
.rfp-date-value,
.tender-date-value {
    color: var(--color-heading);
}

.tender-status-value {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-primary-light);
}

/* ===========================================================================
   9. NOTICE OF AWARD — label/value table rows
   =========================================================================== */

.award-meta-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.55;
}

.award-meta-label {
    font-weight: 700;
    color: var(--color-muted);
    min-width: 148px;
    flex-shrink: 0;
}

.award-meta-value {
    color: var(--color-heading);
}

/* ===========================================================================
   10. DOCUMENT DOWNLOAD AREAS
   =========================================================================== */

.document-action,
.notice-addons,
.notice-pdf,
.speech-pdf,
.press-addons,
.registration-addons {
    margin: var(--space-lg) 0;
    text-align: center;
    padding: var(--space-md) var(--space-lg);
    border: 2px dashed var(--color-border);
    background: var(--color-surface-panel);
    border-radius: var(--radius-md);
}

.document-action h3 {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-sm);
}

/* ===========================================================================
   11. SEPARATION / HR
   =========================================================================== */

.separation,
hr.separation {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-md) 0;
}

/* ===========================================================================
   12. CONTACT INFO BLOCK
   =========================================================================== */

.contact-info {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.contact-info h3 {
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.contact-info p {
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-body);
}

.contact-info a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===========================================================================
   13. STATUS MESSAGES — closed / application closed
   =========================================================================== */

.status-closed-message {
    display: block;
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
    padding: 14px 20px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    margin-top: var(--space-md);
}

.status-registration-closed {
    display: block;
    background-color: var(--color-closed-bg);
    color: #ffffff;
    padding: 14px 20px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    margin-top: var(--space-md);
}

/* ===========================================================================
   14. GRANT FILE ROWS
   =========================================================================== */

.grant-file-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
    gap: 24px;
}

.grant-file-row:last-child {
    border-bottom: none;
}

.grant-file-name {
    font-weight: 600;
    color: var(--color-body);
    font-size: 0.95rem;
    line-height: 1.5;
    flex-grow: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    align-self: center;
}

/* The grant download button inherits from the shared .button system above */

/* ===========================================================================
   15. EXECUTIVE PROFILE
   =========================================================================== */

.executive-meta {
    text-align: left;
}

.executive-meta .full-name {
    font-size: 1.4rem;
    color: var(--color-heading);
    font-weight: 700;
    margin: 4px 0 0;
}

.executive-footer {
    padding: var(--space-md) 0;
    text-align: center;
    background-color: var(--color-surface-panel);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

/* ===========================================================================
   16. ATHLETE PROFILE
   =========================================================================== */

.athlete-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.athlete-featured-image {
    width: 100%;
    max-width: 780px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.athlete-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.athlete-name {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--color-primary);
    margin: 0 0 8px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.athlete-discipline-group {
    margin-top: 14px;
    text-align: center;
}

.athlete-discipline-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.athlete-discipline-values {
    display: block;
    font-size: 1.1rem;
    color: var(--color-primary-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}

/* Decorative underline after athlete header */
.athlete-header::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-primary-light);
    margin: 20px auto 0;
    border-radius: var(--radius-pill);
}

.athlete-biography {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-body);
    margin-bottom: var(--space-lg);
}

.athlete-biography p {
    margin-bottom: 1.4rem;
}

.athlete-gallery-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 2px solid var(--color-border);
}

/* ===========================================================================
   17. GALLERY HEADING
   =========================================================================== */

.og-gallery-heading {
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 10px;
}

/* ===========================================================================
   18. POST NAVIGATION
   =========================================================================== */

.post-navigation {
    max-width: 900px;
    margin: var(--space-md) auto 0;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-border);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.nav-previous a,
.nav-next a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface-card);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nav-previous a:hover,
.nav-next a:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    text-decoration: none;
}

.nav-previous a::before {
    content: "←";
    font-size: 1.1em;
}

.nav-next a::after {
    content: "→";
    font-size: 1.1em;
}

.nav-previous { text-align: left; }
.nav-next     { text-align: right; }

/* ===========================================================================
   19. SPEECH CONTENT (matches entry-content)
   =========================================================================== */

.speech-details {
    /* Inherits the shared panel style from section 6 */
}

/* ===========================================================================
   20. PROGRAMME / REGISTRATION — info section spacing
   =========================================================================== */

.programme-info,
.registration-info {
    margin-bottom: var(--space-lg);
}

/* Programme registration buttons intentionally inherit the shared button system above,
   so their text remains readable and consistent with Executive buttons. */
.programme-link-btn {
    background: var(--color-surface-panel) !important;
    color: var(--color-primary) !important;
}

.programme-link-btn:hover,
.programme-link-btn:focus {
    background: var(--color-primary) !important;
    color: #ffffff !important;
}

/* Executive biography read-more pattern */
.executive-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-body);
    margin-bottom: var(--space-lg);
}

.executive-content p {
    margin-bottom: 1.4rem;
}

.executive-bio-preview,
.executive-bio-full {
    color: var(--color-body);
}

.executive-bio-preview[hidden],
.executive-bio-full[hidden] {
    display: none;
}

.executive-read-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 10px 20px;
    background: var(--color-surface-panel);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.executive-read-more-btn:hover,
.executive-read-more-btn:focus {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    outline: none;
}

/* ===========================================================================
   21. RESPONSIVE
   =========================================================================== */

@media (max-width: 960px) {
    body.single #primary.site-main {
        padding: 40px 44px;
        margin: 0 20px;
    }
}

@media (max-width: 768px) {
    body.single #primary.site-main {
        padding: 32px 28px;
        margin: 0 16px;
        border-radius: var(--radius-md);
    }

    .archive-grid {
        grid-template-columns: 1fr;
    }

    .award-meta-label {
        min-width: 110px;
    }

    ul.lcp_catlist {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    body.single #primary.site-main {
        padding: 24px 18px;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    h1.entry-title {
        font-size: 1.6rem;
        text-align: left;
    }

    .post-navigation .nav-links {
        flex-direction: column;
        gap: 10px;
    }

    .nav-previous,
    .nav-next {
        text-align: center;
        width: 100%;
    }

    .nav-previous a,
    .nav-next a {
        width: 100%;
        justify-content: center;
    }

    .speech-thumbnail img {
        width: 100%;
    }

    .grant-file-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .grant-link-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        justify-content: center;
    }

    ul.lcp_catlist {
        grid-template-columns: 1fr;
    }
}

/* ===========================================================================
   22. 404 PAGE
   =========================================================================== */

/* Large decorative error code number */
.error-404__header {
    text-align: center;
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-lg);
}

.error-404__code {
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    letter-spacing: -4px;
    margin-bottom: 0.15em;
    user-select: none;
}

/* Override the centred single-page h1 style specifically for 404 */
.error-404 h1.entry-title,
.error-404 .error-404__title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--color-heading);
}

.error-404__lead {
    font-size: 1.05rem;
    color: var(--color-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Section blocks inside the 404 body */
.error-404__section {
    margin-bottom: var(--space-xl);
}

.error-404__section-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-primary-light);
    display: inline-block;
}

.error-404__section-desc {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
}

/* Search box wrapper — constrain width on wide screens */
.error-404__search-wrap {
    max-width: 520px;
}

/* WordPress default search form overrides for the 404 page */
.error-404__search-wrap .search-form {
    display: flex;
    gap: 8px;
}

.error-404__search-wrap .search-field {
    flex: 1;
    padding: 11px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-body);
    background: var(--color-surface-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.error-404__search-wrap .search-field:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.error-404__search-wrap .search-submit {
    padding: 11px 20px;
    background: var(--color-primary-light);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}

.error-404__search-wrap .search-submit:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

/* Quick-links grid */
.error-404__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.error-404__link-item {
    margin: 0;
}

.error-404__link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    background: var(--color-surface-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-heading);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.error-404__link-card:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    text-decoration: none;
}

.error-404__link-icon {
    font-size: 1.75rem;
    line-height: 1;
    display: block;
}

.error-404__link-label {
    display: block;
    line-height: 1.3;
}

/* Recent posts list */
.error-404__recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.error-404__recent-item {
    border-bottom: 1px solid var(--color-border);
}

.error-404__recent-item:last-child {
    border-bottom: none;
}

.error-404__recent-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    text-decoration: none;
    background: var(--color-surface-card);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.error-404__recent-link:hover {
    background: var(--color-surface-panel);
    text-decoration: none;
}

.error-404__recent-title {
    color: var(--color-heading);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: color var(--transition-fast);
}

.error-404__recent-link:hover .error-404__recent-title {
    color: var(--color-primary-light);
}

.error-404__recent-date {
    color: var(--color-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Homepage CTA at the bottom */
.error-404__cta {
    text-align: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-lg);
}

/* ── 404 Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .error-404__links {
        grid-template-columns: repeat(2, 1fr);
    }

    .error-404__search-wrap .search-form {
        flex-direction: column;
    }

    .error-404__search-wrap .search-submit {
        width: 100%;
    }

    .error-404__recent-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* =====================================================================
   Professional Text Alignment for Custom Post Type Templates
   ---------------------------------------------------------------------
   Applies justified alignment to main body copy, biographies, articles,
   speeches, descriptions, and custom post template paragraphs.
   Excludes headings, metadata, buttons, navigation, forms, galleries,
   and footer/header utility areas to avoid visual regressions.
   ===================================================================== */

.single-executive .executive-content,
.single-executive .executive-bio-preview,
.single-executive .executive-bio-full,
.single-athlete .athlete-biography,
.single-speech .speech-content,
.single-vacancy .vacancy-content,
.single-facility .facility-content,
.single-programme .entry-content,
.single-grant .entry-content,
.single-registration .entry-content,
.single-news .entry-content,
.single-press-release .entry-content,
.single-notice .entry-content,
.single-document .facility-content,
.single-publication .entry-content,
.single-agency .entry-content,
.single-department .entry-content,
.single-division .entry-content,
.single-addendum .entry-content,
.single-addendum .addendum-description,
.single-tender .entry-content,
.single-tender .tender-description,
.single-request-for-proposal .entry-content,
.single-request-for-proposal .rfp-description,
.single-procurement-schedule .facility-content,
.single-notice-of-award .entry-content {
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.single-executive .executive-content p,
.single-executive .executive-bio-preview p,
.single-executive .executive-bio-full p,
.single-athlete .athlete-biography p,
.single-speech .speech-content p,
.single-vacancy .vacancy-content p,
.single-facility .facility-content p,
.single-programme .entry-content p,
.single-grant .entry-content p,
.single-registration .entry-content p,
.single-news .entry-content p,
.single-press-release .entry-content p,
.single-notice .entry-content p,
.single-document .facility-content p,
.single-publication .entry-content p,
.single-agency .entry-content p,
.single-department .entry-content p,
.single-division .entry-content p,
.single-addendum .entry-content p,
.single-addendum .addendum-description p,
.single-tender .entry-content p,
.single-tender .tender-description p,
.single-request-for-proposal .entry-content p,
.single-request-for-proposal .rfp-description p,
.single-procurement-schedule .facility-content p,
.single-notice-of-award .entry-content p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

/* Keep functional/interface elements aligned naturally. */
.single-executive .executive-read-more-btn,
.single-programme .programme-register-btn,
.single-programme .programme-link-btn,
.single-registration .registration-btn,
.single-grant .grant-button,
.single-vacancy .vacancy-apply-button,
.single-facility .facility-button,
.single-tender .tender-button,
.single-request-for-proposal .rfp-button,
.single-addendum .addendum-button,
.single-document .document-button,
.single-notice-of-award .award-button,
.single .post-navigation,
.single .nav-links,
.single .gallery,
.single form,
.single table {
    text-align: initial;
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
}