/* ============================================================
   main.css — Ministry of Education Timor-Leste
   Design System: Government / Professional
   Brand palette:
     Primary   #2f7bbd
     Secondary #956b80
     Tertiary  #b35984
     Neutral   #6c778d
   ============================================================ */

/* ── 1. CSS Custom Properties ─────────────────────────────── */
:root {
    /* Brand Colors */
    --color-primary: #2f7bbd;
    --color-primary-dark: #255f93;
    --color-primary-light: #e8f1f9;
    --color-secondary: #956b80;
    --color-secondary-light: #f3e9ee;
    --color-tertiary: #fafafa;
    --color-tertiary-light: #ffffff;
    --color-neutral: #6c778d;
    --color-black: #1a1a1a;

    /* Neutral Scale */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-400: #9ca3af;
    --color-gray-600: #4b5563;
    --color-gray-800: #1f2937;
    --color-white: #ffffff;

    /* Semantic */
    --color-bg: var(--color-white);
    --color-bg-alt: var(--color-gray-50);
    --color-text: var(--color-gray-800);
    --color-text-muted: var(--color-neutral);
    --color-border: var(--color-gray-200);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Noto Serif', Georgia, serif;

    /* Type Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Layout */
    --max-width: 1200px;
    --container-pad: 1.5rem;

    /* Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 8px 32px rgb(0 0 0 / 0.12);

    /* Transitions */
    --transition: 200ms ease;
}

/* ── 2. Reset & Base ──────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* Accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    z-index: 9999;
    font-weight: 600;
    transition: top var(--transition);
}

.skip-link:focus {
    top: 1rem;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 3. Layout Utilities ──────────────────────────────────── */
.container {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.section {
    padding-block: var(--space-20);
}

.section--alt {
    background-color: var(--color-bg-alt);
}

/* Latest News sits a shade deeper than the other alt sections so the
   white post cards read as distinctly raised off the background. */
.latest-news.section--alt {
    background-color: var(--color-gray-100);
}

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.section__title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    color: var(--color-black);
    position: relative;
    padding-bottom: var(--space-3);
}

.section__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

.section__more {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

.section__more:hover {
    text-decoration: underline;
}

.page-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-12);
    padding-block: var(--space-12);
}

.page-layout--full {
    grid-template-columns: 1fr;
}

@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr;
    }

    .page-layout__sidebar {
        order: -1;
    }
}

/* ── 4. Buttons ───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    cursor: pointer;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
}

.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.btn--outline {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.btn--outline:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    text-decoration: none;
}

.btn--secondary {
    background: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

.btn--secondary:hover {
    background: var(--color-secondary);
    color: var(--color-white);
    text-decoration: none;
}

.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

/* ── 5. Language Switcher ─────────────────────────────────── */
/* Sits in the header's right-hand column, on the line above the CTA buttons. */
.site-header__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* Nudged down off the brand's midline; a relative offset so it shifts
       visually without changing the header's height. */
    position: relative;
    top: 6px;
}

/* Full-bleed row: outside the centred .container, so the languages sit hard
   against the window's right edge with only a small gutter. */
.site-header__lang-bar {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-1) var(--space-4) 0;
    /* Without this the "|" separators inherit the body's 1.6 line-height and
       pad the row out to 26px for 12px text. */
    line-height: 1.4;
}

/* The switcher strip (24px) counts as the space above the logo, so the padding
   below matches it — that centres the brand in the white band. */
.site-header__lang-bar + .site-header__inner {
    padding-top: 0;
    padding-bottom: var(--space-6);
}

/* Search and CTA buttons share one row, so they centre against each other
   rather than against the taller two-row column. */
.site-header__actions-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.lang-toggle__btn {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-family: inherit;
    transition: color var(--transition);
}

.lang-toggle__btn:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.lang-toggle__btn.is-active {
    color: var(--color-text);
    font-weight: 700;
}

.lang-toggle__sep {
    color: var(--color-border);
    /* Match the links — at the inherited 16px the separators alone made the
       row several pixels taller than the text needs. */
    font-size: var(--text-xs);
}

/* The header column is hidden on small screens, so the switcher moves into
   the mobile nav panel — again directly above the CTA buttons. */
.lang-toggle--mobile {
    display: none;
}

/* ── 6. Site Header ───────────────────────────────────────── */
/* The header scrolls with the page (not sticky); z-index keeps the
   mega-menu panels above page content. */
.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding-block: var(--space-3);
}

.site-header__brand {
    flex: 1;
}

.site-header__logo-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.site-header__logo-link:hover {
    text-decoration: none;
}

.custom-logo {
    max-height: 58px;
    width: auto;
}

.site-header__identity {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-decoration: none;
}

.site-header__identity:hover {
    text-decoration: none;
}

.site-header__ministry {
    font-size: 1.4375rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.25;
    letter-spacing: -0.01em;
    /* Stretch the glyphs a touch taller so the wordmark doesn't look squeezed. */
    transform: scaleY(1.08);
    transform-origin: left center;
}

.site-header__country {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* Search form in header */
.search-form {
    display: flex;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition);
}

.search-form:focus-within {
    border-color: var(--color-primary);
}

.search-form__input {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border: none;
    outline: none;
    width: 200px;
    font-family: inherit;
    background: transparent;
    color: var(--color-text);
}

.search-form__btn {
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    transition: background var(--transition);
}

.search-form__btn:hover {
    background: var(--color-primary-dark);
}

/* Header CTA buttons */
.site-header__cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.site-header__cta--mobile {
    display: none;
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
}

.nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-gray-800);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Primary nav */
.primary-nav {
    background: var(--color-primary);
    position: relative;
}

/* Mega menu — top level */
.mega-menu {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

.mega-menu__item {
    position: relative;
}

.mega-menu__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
}

.mega-menu__caret {
    transition: transform var(--transition);
}

/* Top-level items with a submenu render as <button> toggles */
button.mega-menu__link {
    background: none;
    border: 0;
    font: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.mega-menu__link:hover,
.mega-menu__item.current-menu-item>.mega-menu__link {
    background: var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
}

.mega-menu__link[aria-expanded="true"] .mega-menu__caret {
    transform: rotate(180deg);
}

/* Mega menu — dropdown panel */
.mega-menu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px;
    width: max-content;
    max-width: min(900px, calc(100vw - 32px));
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition);
    z-index: 200;
}

.mega-menu__item:hover .mega-menu__panel,
.mega-menu__item:focus-within .mega-menu__panel,
.mega-menu__item.is-open .mega-menu__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Panels for items near the right edge are flipped by main.js to hang from
   the item's right edge instead — otherwise a left-anchored panel sticks out
   past the viewport and makes the whole page scroll sideways. */
.mega-menu__panel--flip {
    left: auto;
    right: 0;
}

.mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-6);
}

/* Flat submenu lists: columns of at most 10 rows, filled top to bottom.
   header.php sets --mega-cols / --mega-rows so the split is balanced. */
.mega-menu__grid--flat {
    grid-auto-flow: column;
    grid-template-columns: repeat(var(--mega-cols, 1), minmax(220px, 1fr));
    grid-template-rows: repeat(var(--mega-rows, 10), auto);
    gap: var(--space-3) var(--space-8);
}

.mega-menu__col-link {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    padding: var(--space-1) 0;
}

.mega-menu__col-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.mega-menu__col-title {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.mega-menu__divider {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-border);
    margin: var(--space-1) 0;
}

.mega-menu__sublist a {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    border-left: 2px solid var(--color-border);
}

.mega-menu__sublist a:hover {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    text-decoration: none;
}

/* ── 7. Hero Section ──────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #14283b 0%, #1d4a73 40%, var(--color-primary) 100%);
    overflow: hidden;
}

/* Curtain reveal: the hero pins to the viewport while .front-curtain
   (everything after it on the homepage) slides up over it. Reduced-motion
   users get plain stacking with no pinning. */
@media (prefers-reduced-motion: no-preference) {
    .hero {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

.front-curtain {
    position: relative;
    z-index: 2;
    background: var(--color-bg);
    border-radius: 28px 28px 0 0;
    margin-top: -24px;
    overflow: hidden;
    box-shadow: 0 -18px 44px rgba(12, 32, 51, 0.25);
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 80% 50%, rgba(179, 89, 132, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(47, 123, 189, 0.35) 0%, transparent 50%);
}

.hero__photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: transform, filter;
}

.hero__photo-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: opacity;
}

[data-hero-fade],
[data-hero-stats] {
    will-change: opacity, transform, filter;
}

.hero__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-12);
    align-items: center;
    padding-block: var(--space-20);
}

.hero__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-tertiary);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.hero__title {
    font-family: var(--font-serif);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    color: var(--color-white);
    line-height: 1.15;
    margin-bottom: var(--space-6);
}

.hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.8);
    max-width: 540px;
    margin-bottom: var(--space-8);
    line-height: 1.7;
}

.hero__cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Stats cards in hero */
.hero__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.stat-card {
    background: rgba(20, 40, 59, 0.46);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    text-align: center;
    min-width: 140px;
}

.stat-card__number {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-tertiary);
    line-height: 1;
}

.stat-card__label {
    display: block;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.75);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── 8. Services Grid ─────────────────────────────────────── */
/* Section background: a tiled photograph of blue tais cloth under the same
   left-to-right navy gradient the hero photo uses, so the two sections read
   as one treatment. The weave is nearly covered under the heading and opens
   up toward the right. The texture layer sits in its own negative-z layer so
   the cards and heading paint on top; a photo set in the Customizer replaces
   the tile and takes the same gradient. */
.services--photo {
    position: relative;
    isolation: isolate;
}

.services__photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-primary-light);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.services__photo--tais {
    background-image: url('../img/tais-pattern.webp');
    background-position: center top;
    background-size: 340px auto;
    background-repeat: repeat;
}

.services__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right,
            rgb(20 40 59 / 0.94) 0%,
            rgb(20 40 59 / 0.88) 25%,
            rgb(29 74 115 / 0.62) 50%,
            rgb(47 123 189 / 0.24) 75%,
            rgb(47 123 189 / 0.1) 100%);
}

.services--photo .section__title {
    color: var(--color-white);
}

/* The primary-blue rule under the heading is lost against the navy. */
.services--photo .section__title::after {
    background: rgb(255 255 255 / 0.9);
}

.services--photo .service-card,
.services--photo .services__calendar {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.services__layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.services__layout .services__grid {
    margin-top: 0;
}

.services__layout--no-calendar {
    display: block;
}

.services__grid {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.services__layout--no-calendar .services__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.services__calendar-col {
    flex: 2;
    min-width: 0;
}

.services__calendar-download {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    box-sizing: border-box;
}

.services__calendar-download svg {
    flex-shrink: 0;
}

.services__calendar {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.services__calendar iframe {
    display: block;
    width: 100%;
    height: 480px;
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.service-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.service-card__icon {
    font-size: 2rem;
}

.service-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-black);
}

.service-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ── 9. Post Grid & Cards ─────────────────────────────────── */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.post-grid--home {
    margin-top: 0;
    /* Fixed four-up: the auto-fill track minimum only fits three columns in
       the 1200px container, which would strand the fourth card on its own row. */
    grid-template-columns: repeat(4, 1fr);
}

.post-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
}

.post-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.post-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.post-card__image-placeholder {
    height: 200px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-tertiary-light));
}

.post-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.post-card__date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.post-card__cat {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: 2px 8px;
    border-radius: 999px;
    text-decoration: none;
}

.post-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: 1.3;
}

.post-card__link {
    color: var(--color-black);
    text-decoration: none;
}

.post-card__link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.post-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    flex: 1;
}

.post-card__readmore {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: auto;
}

.post-card__readmore:hover {
    text-decoration: underline;
}

/* ── 10. Tender List ──────────────────────────────────────── */
.announcement-banner {
    background: var(--color-white);
}

.tender-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: var(--space-8);
}

.tender-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--transition);
}

.tender-item:last-child {
    border-bottom: none;
}

.tender-item:hover {
    background: var(--color-gray-50);
    text-decoration: none;
}

.tender-item__date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    min-width: 80px;
    font-weight: 500;
}

.tender-item__title {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 500;
}

.tender-item__arrow {
    color: var(--color-primary);
    font-weight: 700;
}

/* ── 11. Archive Header ───────────────────────────────────── */
.archive-header {
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-8);
}

.archive-header__title {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    color: var(--color-black);
}

.archive-header__desc {
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.archive-header__intro {
    margin-top: var(--space-4);
    max-width: 70ch;
}

.archive-header__intro > :first-child { margin-top: 0; }
.archive-header__intro > :last-child { margin-bottom: 0; }

/* ── 12. Pagination ───────────────────────────────────────── */
.pagination {
    margin-top: var(--space-12);
}

.pagination .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.pagination .page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}

.pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* ── 13. Footer ───────────────────────────────────────────── */
.site-footer {
    position: relative;
    isolation: isolate;
    background: var(--color-black);
    color: rgba(255, 255, 255, 0.8);
}

/* Tais texture: a faint woven pattern behind the footer content, fading out
   toward the bottom so the policy links stay easy to read. */
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--footer-pattern, url('../img/footer-tais.webp')) center top / 340px auto repeat;
    opacity: var(--footer-pattern-opacity, 0.1);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

.footer-top {
    padding-block: var(--space-16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-top__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-12);
}

.footer-brand__name {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-3);
    text-wrap: balance;
}

.footer-brand__name .nowrap {
    white-space: nowrap;
}

.footer-brand__link:hover {
    text-decoration: none;
}

.footer-brand__tagline {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.footer-brand__address {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
    font-style: normal;
    line-height: 1.8;
}

.footer-brand__address a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-brand__address a:hover {
    color: var(--color-white);
}

.footer-col__title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-white);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer__links a {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.65);
    transition: color var(--transition);
}

.footer__links a:hover {
    color: var(--color-white);
    text-decoration: none;
}

/* Shown only to logged-in editors when a footer menu location has no menu
   assigned — so a missing column is obviously a wp-admin setting, not a
   theme-file edit. Never rendered for public visitors. */
.footer__admin-hint {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    line-height: 1.5;
}

.footer__admin-hint a {
    color: var(--color-primary);
    text-decoration: underline;
}

.footer-bottom {
    padding-block: var(--space-6);
    background: rgba(0, 0, 0, 0.3);
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.footer-bottom__copy {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom__menu {
    display: flex;
    gap: var(--space-4);
}

.footer-bottom__menu a {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom__menu a:hover {
    color: var(--color-white);
    text-decoration: none;
}

/* ── 14. No Results ───────────────────────────────────────── */
.no-results {
    padding-block: var(--space-16);
    text-align: center;
}

.no-results__title {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

/* ── 14b. Org Chart ───────────────────────────────────────── */
.orgchart__viewer {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

.orgchart__viewer embed {
    display: block;
    width: 100%;
    height: 80vh;
}

.orgchart__viewer {
    background: var(--color-bg-alt);
    text-align: center;
}

.orgchart__zoom {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-3);
}

.orgchart__zoom-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.orgchart__zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    transition: background var(--transition), border-color var(--transition);
}

.orgchart__zoom-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.orgchart__zoom-btn[data-zoom-reset] {
    font-size: var(--text-sm);
}

.orgchart__zoom-stage {
    position: relative;
    height: 80vh;
    overflow: hidden;
    background: var(--color-bg-alt);
    cursor: grab;
    touch-action: none;
}

.orgchart__zoom-stage.is-dragging {
    cursor: grabbing;
}

.orgchart__zoom-stage .orgchart__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-drag: none;
}

.orgchart__empty {
    padding-block: var(--space-12);
    color: var(--color-text-muted);
    text-align: center;
}

.no-items {
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--space-8);
}

/* ── 15. Widgets ──────────────────────────────────────────── */
.widget {
    margin-bottom: var(--space-8);
}

.widget__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

/* ── 16. News Slideshow ───────────────────────────────────── */
.slideshow {
    position: relative;
    /* The arrows overlay the slide, so the caption reserves a lane for
       them on each side. Change these and both stay in step. */
    --slideshow-arrow-size: 2.75rem;
    --slideshow-arrow-inset: var(--space-4);
    --slideshow-caption-gutter: calc(var(--slideshow-arrow-inset) + var(--slideshow-arrow-size) + var(--space-3));
    --slideshow-caption-bg: 20, 40, 59;
}

.slideshow__viewport {
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.slideshow__track {
    display: flex;
    transition: transform 500ms ease;
    will-change: transform;
}

.slideshow__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.slideshow__link {
    position: relative;
    display: block;
    color: var(--color-white);
    text-decoration: none;
}

.slideshow__link:hover,
.slideshow__link:focus,
.slideshow__link:focus-visible {
    color: var(--color-white);
    text-decoration: none;
}

.slideshow__link:hover .slideshow__title,
.slideshow__link:focus .slideshow__title,
.slideshow__link:focus-visible .slideshow__title {
    color: var(--color-white);
}

.slideshow__image {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.slideshow__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-8) var(--slideshow-caption-gutter) var(--space-6);
    background: linear-gradient(to top,
            rgba(var(--slideshow-caption-bg), 0.92) 0%,
            rgba(var(--slideshow-caption-bg), 0.55) 60%,
            transparent 100%);
}

.slideshow__date {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-tertiary-light);
    margin-bottom: var(--space-2);
}

.slideshow__title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
    max-width: 42rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.slideshow__excerpt {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    max-width: 38rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.slideshow__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--slideshow-arrow-size);
    height: var(--slideshow-arrow-size);
    border-radius: 50%;
    background: rgba(var(--slideshow-caption-bg), 0.55);
    color: var(--color-white);
    font-size: var(--text-2xl);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
    z-index: 2;
}

.slideshow__arrow:hover {
    background: var(--color-primary);
}

.slideshow__arrow--prev {
    left: var(--slideshow-arrow-inset);
}

.slideshow__arrow--next {
    right: var(--slideshow-arrow-inset);
}

.slideshow__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.slideshow__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--color-gray-200);
    transition: background var(--transition), transform var(--transition);
}

.slideshow__dot:hover {
    background: var(--color-primary-light);
}

.slideshow__dot[aria-current="true"] {
    background: var(--color-primary);
    transform: scale(1.2);
}

/* ── 16a. Sub-page Index (section landing pages) ──────────── */
.subpages {
    max-width: 75ch;
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.subpages__title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    color: var(--color-black);
    margin-bottom: var(--space-6);
}

.subpages__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
}

.subpages__link {
    display: block;
    height: 100%;
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    transition: background var(--transition), border-color var(--transition);
}

.subpages__link:hover,
.subpages__link:focus-visible {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    text-decoration: none;
}

.subpages__name {
    display: block;
    font-weight: 600;
    color: var(--color-link);
}

.subpages__link:hover .subpages__name {
    color: var(--color-link-hover);
}

.subpages__desc {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .subpages__list {
        grid-template-columns: 1fr;
    }
}

/* Sitemap page (page-sitemap.php): one column per main-menu section. */
.sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-8) var(--space-12);
    margin-top: var(--space-8);
}

.sitemap__title {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
}

.sitemap__title a {
    color: inherit;
}

.sitemap__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap__list .sitemap__list {
    margin-top: var(--space-2);
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-border);
}

.sitemap__list a {
    color: var(--color-link);
}

.sitemap__list a:hover {
    color: var(--color-link-hover);
}

/* ── 16b. Page Content (static pages & articles) ──────────── */
.page-content {
    max-width: 75ch;
    font-size: var(--text-lg);
    line-height: 1.75;
}

.page-content > * + * {
    margin-top: var(--space-4);
}

.page-content h2,
.page-content h3,
.page-content h4 {
    font-family: var(--font-serif);
    color: var(--color-black);
    line-height: 1.3;
    margin-top: var(--space-8);
}

.page-content h2 {
    font-size: var(--text-2xl);
}

.page-content h3 {
    font-size: var(--text-xl);
}

.page-content h4 {
    font-size: var(--text-lg);
}

.page-content ul,
.page-content ol {
    padding-left: var(--space-6);
}

.page-content li + li {
    margin-top: var(--space-2);
}

.page-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-content blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-light);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-sm);
    font-style: italic;
}

.page-content img {
    border-radius: var(--radius-md);
}

.page-content figcaption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.page-content th,
.page-content td {
    border: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
}

.page-content th {
    background: var(--color-bg-alt);
    font-weight: 600;
}

.page-content hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-8);
}

.page-links {
    margin-top: var(--space-8);
    font-weight: 600;
}

.static-page__thumbnail {
    margin-bottom: var(--space-8);
}

.static-page__image {
    border-radius: var(--radius-lg);
}

/* ── 16c. Single Post ─────────────────────────────────────── */
.single-post__header {
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-8);
}

.single-post__cat {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}

.single-post__title {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    color: var(--color-black);
    line-height: 1.2;
}

.single-post__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.single-post__meta-sep {
    color: var(--color-gray-400);
}

.single-post__thumbnail {
    margin-bottom: var(--space-8);
}

.single-post__image {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.single-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-8);
}

.single-post__tags a {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    transition: border-color var(--transition), color var(--transition);
}

.single-post__tags a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}

.post-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: 600;
}

.post-nav__next {
    margin-left: auto;
    text-align: right;
}

/* ── 16d. Search Results ──────────────────────────────────── */
.search-results {
    display: flex;
    flex-direction: column;
}

.search-result {
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.search-result__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.search-result__type {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.search-result__date {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.search-result__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
}

.search-result__title a {
    color: var(--color-black);
}

.search-result__title a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.search-result__excerpt {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
}

.archive-header__query {
    color: var(--color-primary);
}

.no-results .search-form,
.error-404__search .search-form {
    max-width: 420px;
    margin-inline: auto;
    margin-top: var(--space-6);
}

/* ── 16e. 404 ─────────────────────────────────────────────── */
.error-404 {
    padding-block: var(--space-20);
    text-align: center;
}

.error-404__code {
    font-family: var(--font-serif);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary-light);
}

.error-404__title {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    color: var(--color-black);
    margin-top: var(--space-4);
}

.error-404__text {
    max-width: 50ch;
    margin: var(--space-4) auto 0;
    color: var(--color-text-muted);
}

.error-404__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/* ── 16f. Sidebar Recent News ─────────────────────────────── */
.recent-news {
    list-style: none;
}

.recent-news__item {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.recent-news__item:first-child {
    padding-top: 0;
}

.recent-news__link {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
}

.recent-news__link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.recent-news__date {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* ── 17. Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .footer-top__grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

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

    .services__layout {
        flex-direction: column;
    }

    .services__calendar-col,
    .services__calendar {
        width: 100%;
    }

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

@media (max-width: 768px) {
    :root {
        --container-pad: 1rem;
    }

    .site-header__lang-bar {
        display: none;
    }

    .site-header__lang-bar + .site-header__inner {
        padding-block: var(--space-3);
    }

    /* In the blue mobile nav the switcher becomes a three-way segmented
       control: the header's grey-on-white colours vanish against the blue,
       and 12px words are too small to tap. */
    .lang-toggle--mobile {
        display: flex;
        gap: 0;
        margin: var(--space-6) var(--space-4) 0;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .lang-toggle--mobile .lang-toggle__sep {
        display: none;
    }

    .lang-toggle--mobile .lang-toggle__btn {
        flex: 1;
        padding: var(--space-3) var(--space-2);
        font-size: var(--text-sm);
        font-weight: 500;
        text-align: center;
        color: var(--color-white);
    }

    .lang-toggle--mobile .lang-toggle__btn:not(:first-child) {
        border-left: 1px solid rgba(255, 255, 255, 0.45);
    }

    .lang-toggle--mobile .lang-toggle__btn:hover {
        background: rgba(255, 255, 255, 0.15);
        color: var(--color-white);
    }

    .lang-toggle--mobile .lang-toggle__btn.is-active {
        background: var(--color-white);
        color: var(--color-primary-dark);
        font-weight: 700;
    }

    .single-post__title {
        font-size: var(--text-3xl);
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav__next {
        margin-left: 0;
        text-align: left;
    }

    .site-header__search {
        display: none;
    }

    .site-header__cta {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .primary-nav {
        max-height: 0;
        overflow: hidden;
        overflow-y: auto;
        transition: max-height 400ms ease;
    }

    .primary-nav.is-open {
        max-height: calc(100vh - 110px);
    }

    .mega-menu {
        flex-direction: column;
    }

    .mega-menu__link {
        justify-content: space-between;
    }

    .mega-menu__panel {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        width: auto;
        max-width: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.15);
        padding: var(--space-4);
        display: none;
    }

    .mega-menu__item.is-open .mega-menu__panel {
        display: block;
    }

    .mega-menu__grid,
    .mega-menu__grid--flat {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: var(--space-4);
    }

    .mega-menu__col-link,
    .mega-menu__col-title {
        color: rgba(255, 255, 255, 0.9);
    }

    .mega-menu__sublist a {
        color: rgba(255, 255, 255, 0.7);
        border-left-color: rgba(255, 255, 255, 0.2);
    }

    .mega-menu__divider {
        border-top-color: rgba(255, 255, 255, 0.2);
    }

    .mega-menu__item + .mega-menu__item {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Full-width buttons recoloured for the blue panel: the primary button
       is blue-on-blue and the secondary mauve-on-blue with header colours. */
    .site-header__cta--mobile {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) var(--space-6);
    }

    .site-header__cta--mobile .btn {
        justify-content: center;
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }

    .site-header__cta--mobile .btn--primary {
        background: var(--color-white);
        border-color: var(--color-white);
        color: var(--color-primary-dark);
    }

    .site-header__cta--mobile .btn--primary:hover {
        background: var(--color-primary-light);
        border-color: var(--color-primary-light);
        color: var(--color-primary-dark);
    }

    .site-header__cta--mobile .btn--secondary {
        border-color: rgba(255, 255, 255, 0.6);
        color: var(--color-white);
    }

    .site-header__cta--mobile .btn--secondary:hover {
        background: rgba(255, 255, 255, 0.15);
        color: var(--color-white);
    }

    .hero {
        min-height: auto;
    }

    .stat-card {
        min-width: unset;
    }

    .services__layout {
        flex-direction: column;
    }

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

    .services__calendar-col,
    .services__calendar {
        width: 100%;
    }

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

    .footer-top__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .section__head {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Phones: the caption leaves the photo and sits below it on a solid
       panel, so a long headline can never outgrow the image and be clipped.
       The arrows stay centred over the photo. */
    .slideshow {
        container-type: inline-size;
    }

    .slideshow__slide,
    .slideshow__link {
        display: flex;
        flex-direction: column;
    }

    .slideshow__link {
        flex: 1;
    }

    .slideshow__image {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .slideshow__caption {
        position: static;
        flex: 1;
        padding: var(--space-4) var(--space-4) var(--space-6);
        background: rgb(var(--slideshow-caption-bg));
    }

    .slideshow__title {
        font-size: var(--text-lg);
        line-height: 1.3;
    }

    .slideshow__arrow {
        top: calc(100cqw * 9 / 32);
    }
}

@media (max-width: 480px) {
    .slideshow {
        --slideshow-arrow-size: 2.25rem;
        --slideshow-arrow-inset: var(--space-2);
    }

    .slideshow__arrow {
        font-size: var(--text-xl);
    }

    .custom-logo {
        max-height: 48px;
    }

    .site-header__ministry {
        font-size: var(--text-xl);
    }

    .site-header__country {
        font-size: var(--text-sm);
    }

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

    .hero__cta {
        flex-direction: column;
    }

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ── 18. Print ────────────────────────────────────────────── */
@media print {

    .site-header,
    .primary-nav,
    .hero__stats,
    .services,
    .site-footer,
    .nav-toggle,
    .news-slideshow {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}

/* ── 22. About — Ministry Leadership ──────────────────────── */
/* The panel flows with the page (no sticky/pin): two full bio cards are
   taller than a typical browser window, so pinning would either crop the
   panel or push the second card off-screen. Top-aligned in the grid. */
.leadership-aside {
    align-self: start;
}

.leadership-aside__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.leader-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    text-align: center;
}

.leader-card + .leader-card {
    margin-top: var(--space-6);
}

.leader-card__photo {
    width: 110px;
    height: 123px;
    object-fit: cover;
    object-position: top center;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-md);
    border: 3px solid var(--color-primary-light);
}

.leader-card__name {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.3;
    color: var(--color-text);
}

.leader-card__role {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: var(--space-1);
}

.leader-card__bio {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-top: var(--space-3);
    text-align: left;
}

@media (max-width: 768px) {
    .leader-card {
        max-width: 420px;
        margin-inline: auto;
    }
}

/* ── 23. Document & Tender Lists ──────────────────────────── */
/* Used by the "Document List" and "Tender List" block patterns
   (inc/block-patterns.php). Replaced the former publication and
   tender custom post types. */

.moe-doclist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block: var(--space-6);
}

.moe-doclist .moe-doc {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    grid-template-areas:
        "type title"
        "type meta";
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: start;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.moe-doclist .moe-doc:hover,
.moe-doclist .moe-doc:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* File-type badge. Editors just type "PDF", "DOCX", "XLSX". */
.moe-doc__type {
    grid-area: type;
    align-self: center;
    margin: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
}

.moe-doc__title {
    grid-area: title;
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.35;
}

.moe-doc__title a {
    color: var(--color-text);
    text-decoration: none;
}

.moe-doc__title a:hover,
.moe-doc__title a:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.moe-doc__meta {
    grid-area: meta;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Tenders: status comes from the parent group, not the row ──
   The editor drags a row between the Open and Closed groups; the
   colour follows automatically, so there is no CSS class to edit. */

.moe-doclist--open .moe-doc {
    border-inline-start: 4px solid #2e7d5b;
}

.moe-doclist--open .moe-doc__meta {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: #e6f4ec;
    color: #1f5b41;
    font-weight: 600;
}

.moe-doclist--closed .moe-doc {
    border-inline-start: 4px solid var(--color-gray-400);
    background: var(--color-bg-alt);
}

.moe-doclist--closed .moe-doc__title a {
    color: var(--color-text-muted);
}

.moe-doclist--closed .moe-doc__type {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.moe-doclist--closed .moe-doc__meta {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    font-weight: 600;
}

@media (max-width: 600px) {
    .moe-doclist .moe-doc {
        grid-template-columns: 1fr;
        grid-template-areas:
            "type"
            "title"
            "meta";
        row-gap: var(--space-2);
    }

    .moe-doc__type {
        justify-self: start;
        min-width: 3.5rem;
    }
}

@media print {
    .moe-doclist .moe-doc {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
    }
}