/* ACCESSIBILITY / MAINTENANCE:
   Reusable screen-reader-only text utility. Use this for explanatory text that
   should remain available to assistive technology without changing the layout. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ACCESSIBILITY / MAINTENANCE:
   The skip link is inserted by assets/js/public-progress.js so every public page
   that loads the shared script gets the same keyboard bypass behavior. Keep the
   class name in sync with that script if this styling is ever refactored. */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10001;
    padding: 10px 14px;
    border-radius: 10px;
    background: #17191f;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .16s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #5b21b6;
}

/* ACCESSIBILITY / MAINTENANCE:
   Do not remove visible keyboard focus without replacing it with an equally
   obvious indicator. :focus-visible avoids showing the ring for normal mouse use. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent-dark, #5b21b6);
    outline-offset: 3px;
}

/* The main landmark receives temporary programmatic focus from the skip link.
   Suppress that outline only because the skip-link itself already provides a
   visible focus indication and the destination is not a normal interactive item. */
main[tabindex="-1"]:focus {
    outline: none;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
}

.nav-link-icon {
    display:none !important;
    place-items: center;
    width:28px;
    height:28px;
    flex:0 0 28px;
    border:1px solid rgba(91,8,123,.14);
    border-radius:9px;
    background:linear-gradient(145deg,#fbf7ff,#f2eafa);
    color: var(--accent, #6b21a8);
    font-family: Arial, sans-serif;
    font-size:14px;
    font-weight: 800;
    line-height: 1;
    box-shadow:0 4px 12px rgba(49,0,79,.06);
}

.public-menu-trigger .nav-link-icon,
.site-nav a .nav-link-icon {
    display:inline-grid;
    place-items:center;
    margin-right:2px;
}

.nav-link-icon svg {
    display:block;
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Group icons are also defined in CSS so they remain visible even while an
   older cached menu script is being replaced by the database-driven menu. */
.public-menu-trigger::before {
    display:none;
    place-items:center;
    width:28px;
    height:28px;
    flex:0 0 28px;
    border:1px solid rgba(91,8,123,.14);
    border-radius:9px;
    background:linear-gradient(145deg,#fbf7ff,#f2eafa);
    color:var(--accent,#6b21a8);
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:800;
    line-height:1;
    box-shadow:0 4px 12px rgba(49,0,79,.06);
}
.public-menu-trigger:has(> .nav-link-icon)::before { display:none; }

.site-nav > a,
.public-menu-trigger {
    min-height:44px;
    border-radius:13px;
    transition:color .18s ease,background .18s ease,transform .18s ease;
}
.site-nav > a { padding:7px 10px; }
.public-menu-trigger { gap:8px !important; padding:7px 10px !important; }
.site-nav > a:hover,
.public-menu-trigger:hover,
.public-menu-trigger:focus-visible { background:#f8f2fc; transform:translateY(-1px); }
.site-nav > a[aria-current="page"],
.public-menu-trigger.is-current { background:linear-gradient(135deg,#f5edfb,#fffbea); color:#4f076c; }
.site-nav > a[aria-current="page"] .nav-link-icon,
.public-menu-trigger.is-current .nav-link-icon { border-color:rgba(213,182,0,.42); background:#fffce0; }
.public-menu-chevron { margin-left:1px; color:#755680; }

/* Preserve the ministry identity in the wide header. The menu has several
   grouped items, so the header receives a wider layout than page content and
   the logo is prevented from shrinking into an oval. */
.site-header .nav-wrap {
    width:min(1500px,calc(100% - 40px));
    max-width:1500px;
    min-height:88px;
    gap:28px;
}
.site-header .brand {
    flex:0 0 auto;
    gap:13px;
    font-size:1.12rem;
    line-height:1.25;
}
.site-header .brand-mark {
    width:52px;
    height:52px;
    flex:0 0 52px;
    border:2px solid #fff4a8;
    border-radius:50%;
    background-color:#fff;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    box-shadow:0 7px 20px rgba(49,0,79,.16);
}
.site-header .brand > span:last-child { white-space:nowrap; }
.site-header .site-nav { flex:1 1 auto; min-width:0; justify-content:flex-end; gap:6px; }

@media(min-width:981px) and (max-width:1700px){
    .site-header .nav-wrap{gap:16px}
    .site-header .brand{font-size:1rem;gap:9px}
    .site-header .brand-mark{width:46px;height:46px;flex-basis:46px}
    .site-header .site-nav{gap:1px}
    .site-header .site-nav>a,.site-header .public-menu-trigger{padding:6px 7px!important;font-size:.9rem}
    .site-header .nav-link-icon,.site-header .public-menu-trigger::before{width:25px;height:25px;flex-basis:25px;border-radius:8px}
    .site-header .nav-link-icon svg{width:14px;height:14px}
}

@media(min-width:761px) and (max-width:1100px){
    .site-header .nav-wrap{width:calc(100% - 24px);min-height:72px;padding:8px 0;justify-content:space-between;flex-wrap:nowrap;gap:10px}
    .site-header .brand{margin:0;font-size:.88rem;gap:8px}
    .site-header .brand-mark{width:42px;height:42px;flex-basis:42px}
    .site-header .nav-toggle{display:none!important}
    .site-header .site-nav{display:flex!important;position:static!important;width:auto;max-height:none;overflow:visible;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:flex-end;gap:0;z-index:auto}
    .site-header .site-nav>a,.site-header .public-menu-trigger{min-height:38px;padding:5px 6px!important;font-size:.79rem}
    .site-header .nav-link-icon,.site-header .public-menu-trigger::before{display:none!important}
    .site-header .public-menu-group{width:auto}
}

@media(min-width:761px) and (max-width:900px){
    .site-header .brand > span:last-child{display:none}
}

@media(max-width:980px){
    .site-header .nav-wrap{width:calc(100% - 28px);min-height:72px;gap:14px}
    .site-header .brand{font-size:1rem;gap:10px}
    .site-header .brand-mark{width:46px;height:46px;flex-basis:46px}
    .site-header .brand > span:last-child{white-space:normal;max-width:245px}
}

@media(max-width:760px){
    .site-header .nav-toggle{display:inline-block!important}
    .site-header .site-nav{display:none!important}
    .site-header .site-nav.is-open{display:flex!important}
}

@media(max-width:420px){
    .site-header .nav-wrap{width:calc(100% - 20px);min-height:66px;gap:6px}
    .site-header .brand{gap:7px;font-size:.86rem;line-height:1.18}
    .site-header .brand-mark{width:40px;height:40px;flex:0 0 40px}
    .site-header .brand > span:last-child{max-width:168px}
    .site-header .nav-toggle{min-width:56px;min-height:40px;padding:6px 7px;border-radius:12px;font-size:.9rem}
}

/* A brief, transparent transition dialog. Its four coloured bands create a
   quiet moving wave without darkening or blocking the page underneath. */
.page-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    display: none;
    height: 42px;
    overflow: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.page-progress.is-visible {
    display: flex;
}

.page-progress-waves {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-progress-wave {
    width: 7px;
    height: 15px;
    border-radius: 99px;
    animation: page-progress-wave .85s ease-in-out infinite;
}

.wave-gold { background: #d4a33a; }
.wave-green { background: #0b6a43; animation-delay: .1s; }
.wave-brown { background: #744729; animation-delay: .2s; }
.wave-purple { background: #542372; animation-delay: .3s; }
.page-progress-wave:last-child { animation-delay: .4s; }

@keyframes page-progress-wave {
    0%, 100% { height: 12px; transform: translateY(0); }
    50% { height: 36px; transform: translateY(-5px); }
}

/* Slide only the page's main content. The header and footer stay visible, so
   navigation feels like the homepage slider and never creates an overlay. */
body.public-transition-ready main {
    transition: transform .34s ease-out, opacity .24s ease-out;
}

body.public-transition-enter main {
    opacity: 0;
    transform: translateX(28px);
}

body.public-transition-leave main {
    opacity: 0;
    transform: translateX(-28px);
}

/* Small-screen polish for the homepage hero. */
@media (max-width: 640px) {
    .hero .eyebrow {
        display: block;
        margin-bottom: 12px;
        font-size: .68rem;
        line-height: 1.45;
        letter-spacing: .12em;
        white-space: normal;
    }

    .hero h1 {
        font-size: clamp(2.75rem, 13vw, 3.8rem);
        line-height: 1.02;
        letter-spacing: -.04em;
    }

    .hero-lead {
        margin-top: 20px;
        line-height: 1.45;
    }
}

/* ACCESSIBILITY / MAINTENANCE:
   Respect the user's reduced-motion preference. Keep this override whenever new
   public transition animations are added. */
@media (prefers-reduced-motion: reduce) {
    .skip-link,
    .page-progress,
    .page-progress-wave,
    body.public-transition-ready main {
        transition: none;
        animation-duration: 1.4s;
        transform: none;
    }

    .skip-link:not(:focus):not(:focus-visible) {
        transform: translateY(-160%);
    }
}