/*
Theme Name: SAF Institutional
Description: Lightweight, accessible, bilingual (Somali/English) institutional theme for the Somaliland Armed Forces.
Version: 1.0.0
Text Domain: saf
Requires PHP: 8.0
*/
:root{--g1:#0a3d20;--g2:#0f5a2e;--g3:#1f8f3f;--g4:#e8f3ec;--gold:#c9a24a;--ink:#16221b;--grey:#f3f6f4;--line:#d5ddd8;--white:#fff;--max:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2;color:var(--g1);margin:0 0 .5em}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
a{color:var(--g2)}
img{max-width:100%;height:auto}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:99}
.screen-reader-text{position:absolute;left:-999px}
/* top bar */
.topbar{background:var(--g1);color:#d6e8dc;font-size:.85rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.4rem}
.topbar a{color:#fff;text-decoration:none}
.lang{list-style:none;margin:0;padding:0;display:flex;gap:.3rem}
.lang a{padding:.15rem .6rem;border:1px solid #ffffff55;border-radius:3px;display:block}
.lang .current-lang a{background:var(--gold);color:var(--g1);border-color:var(--gold);font-weight:700}
/* brand header */
.brandbar{background:#fff;border-bottom:1px solid var(--line)}
.brandbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--g1)}
.brand img{height:88px;width:auto}
.brand b{font:700 clamp(1.2rem,2.6vw,1.9rem) Georgia,serif;display:block;line-height:1.15}
.brand small{color:#4b5f53;font-size:.95rem}
.search-form{display:flex}
.search-form input[type=search]{padding:.6rem .8rem;border:1px solid var(--line);border-inline-end:0;min-width:220px;font-size:.95rem}
.search-form button{background:var(--g2);color:#fff;border:0;padding:0 1rem;cursor:pointer;font-weight:600}
/* green nav bar */
.navbar{background:var(--g2);border-bottom:4px solid var(--gold);position:sticky;top:0;z-index:30}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between}
.nav-toggle{display:none;background:transparent;color:#fff;border:2px solid #ffffff88;padding:.55rem 1rem;border-radius:4px;font-size:1rem;margin:.5rem 0}
.menu,.menu ul{list-style:none;margin:0;padding:0}
.menu{display:flex;flex-wrap:wrap}
.menu>li>a{display:block;padding:1rem .95rem;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem}
.menu>li:hover>a,.menu>li:focus-within>a,.menu>.current-menu-item>a,.menu>.current-menu-ancestor>a{background:var(--g1)}
.menu li{position:relative}
.menu>.menu-item-has-children>a:after{content:" \25BE";font-size:.8em}
.menu li ul{display:none;position:absolute;inset-inline-start:0;top:100%;min-width:250px;background:#fff;border-top:3px solid var(--gold);box-shadow:0 10px 24px #0a3d2030;z-index:40}
.menu li:hover>ul,.menu li:focus-within>ul{display:block}
.menu li ul a{display:block;padding:.65rem 1rem;color:var(--g1);text-decoration:none;font-size:.93rem;border-bottom:1px solid var(--grey)}
.menu li ul a:hover{background:var(--g4)}
/* slider */
.slider{position:relative;background:var(--g1);overflow:hidden}
.slides{position:relative;height:clamp(380px,72vh,680px)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease;background:var(--bg,none) center/cover no-repeat,linear-gradient(120deg,var(--g1),var(--g3))}
.slide.active{opacity:1;visibility:visible}
.slide:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06260fe6 0%,#06260f99 45%,#06260f22 100%)}
.slide .wrap{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.slide h2{color:#fff;font-size:clamp(2rem,5.5vw,3.8rem);max-width:18ch;margin:0 0 .4em}
.slide p{font-size:clamp(1rem,2vw,1.3rem);max-width:46ch;color:#e6f2ea;margin:0 0 1.2rem}
.btn{display:inline-block;padding:.8rem 1.4rem;border-radius:3px;text-decoration:none;font-weight:700;margin:.3rem .5rem .3rem 0;border:2px solid var(--gold);color:#fff;background:transparent}
.btn.primary{background:var(--gold);color:var(--g1)}
.btn.dark{background:var(--g2);border-color:var(--g2);color:#fff}
.btn.dark:hover{background:var(--g1)}
.sl-btn{position:absolute;top:50%;transform:translateY(-50%);background:#0a3d20bb;color:#fff;border:0;width:48px;height:64px;font-size:1.6rem;cursor:pointer;z-index:5}
.sl-prev{inset-inline-start:0}.sl-next{inset-inline-end:0}
.sl-btn:hover{background:var(--g3)}
.dots{position:absolute;bottom:1rem;left:0;right:0;display:flex;justify-content:center;gap:.5rem;z-index:5}
.dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer}
.dots button[aria-current=true]{background:var(--gold);border-color:var(--gold)}
/* ticker */
.ticker{background:var(--g4);border-bottom:1px solid var(--line)}
.ticker .wrap{display:flex;gap:1rem;align-items:center;padding-block:.6rem;font-size:.95rem}
.ticker strong{background:var(--g2);color:#fff;padding:.2rem .7rem;border-radius:3px;white-space:nowrap}
.ticker a{color:var(--g1);font-weight:600;text-decoration:none}
/* sections */
section{padding:clamp(2.5rem,6vw,4.5rem) 0}
section.alt{background:var(--grey)}
.sec-title{display:flex;justify-content:space-between;align-items:end;border-bottom:3px solid var(--g2);margin-bottom:1.5rem;padding-bottom:.4rem}
.sec-title h2{margin:0}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--g3);padding:1.3rem;border-radius:2px}
.card .thumb{display:block;margin:-1.3rem -1.3rem 1rem;aspect-ratio:3/2;background:linear-gradient(120deg,var(--g1),var(--g3));overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .meta{font-size:.82rem;color:#4b5f53;margin:0 0 .3rem}
.card h3{font-size:1.15rem}.card h3 a{text-decoration:none;color:var(--g1)}
.tiles{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:-2.2rem;position:relative;z-index:6;box-shadow:0 8px 24px #0a3d2030}
.tiles a{background:var(--g2);color:#fff;text-decoration:none;padding:1.2rem .6rem;text-align:center;font-weight:700;border-inline-end:1px solid #ffffff30}
.tiles a:hover,.tiles a:focus-visible{background:var(--g1)}
.tiles svg{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.7;display:block;margin:0 auto .4rem}
.quote{display:grid;grid-template-columns:230px 1fr;gap:2rem;align-items:center}
.quote img{width:100%;border:4px solid var(--g2)}
.mv{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mv .card{border-top:6px solid var(--g1)}
.values{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));text-align:center}
.values li{padding:1.1rem .5rem;background:#fff;border:1px solid var(--line);border-bottom:4px solid var(--g3)}
.values svg{width:44px;height:44px;stroke:var(--g3);fill:none;stroke-width:1.6}
.banner{background:linear-gradient(110deg,var(--g1),var(--g3));color:#fff}
.banner h2{color:#fff}.banner p{max-width:60ch}
.timeline{border-inline-start:3px solid var(--gold);padding-inline-start:1.5rem;list-style:none;margin:0}
.timeline li{margin-bottom:1.4rem;position:relative}
.timeline li:before{content:"";position:absolute;inset-inline-start:-1.95rem;top:.5rem;width:.7rem;height:.7rem;background:var(--g3);border-radius:50%}
details{border:1px solid var(--line);padding:.8rem 1rem;margin-bottom:.5rem;background:#fff}
summary{cursor:pointer;font-weight:700;color:var(--g1)}
.page-hero{background:var(--g1);color:#fff;padding:2.2rem 0;border-bottom:4px solid var(--gold)}
.page-hero h1{color:#fff;margin:0}
.content{max-width:860px;margin:0 auto;padding:2.5rem 1.25rem}
/* footer */
.site-footer{background:var(--g1);color:#cfe3d6;padding:3rem 0 1.5rem;border-top:6px solid var(--gold)}
.site-footer a{color:#fff}.site-footer h3{color:#fff;font-size:1.05rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.fbrand{display:flex;gap:1rem;align-items:center}.fbrand img{height:80px;background:#fff;border-radius:50%;padding:4px}
.site-footer .legal{border-top:1px solid #ffffff30;margin-top:2rem;padding-top:1rem;font-size:.85rem}
[dir=rtl] .quote{direction:rtl}
@media(max-width:900px){
 .nav-toggle{display:block}
 .navbar .wrap{flex-wrap:wrap}
 .primary-nav{display:none;width:100%}
 .primary-nav.open{display:block}
 .menu{flex-direction:column}
 .menu>li>a{border-top:1px solid #ffffff22}
 .menu li ul{position:static;box-shadow:none;border:0;background:var(--g1)}
 .menu li:hover>ul,.menu li:focus-within>ul{display:none}
 .menu li.open>ul{display:block}
 .menu li ul a{color:#fff;border-color:#ffffff18;padding-inline-start:2rem}
 .brandbar .search-form{display:none}
 .brand img{height:64px}
 .quote{grid-template-columns:1fr}
 .topbar .wrap{flex-direction:column;gap:.3rem}
 .sl-btn{width:36px;height:48px}
 .tiles{margin-top:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* newsroom, leadership, social icons */
.grid2{display:grid;gap:1.25rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.5rem}
.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;align-items:center}
.feature .thumb{margin:-1.3rem 0 -1.3rem -1.3rem;height:calc(100% + 2.6rem);aspect-ratio:auto;min-height:260px}
.feature h2 a{text-decoration:none;color:var(--g1)}
.pagination{margin-top:2rem}.pagination .nav-links{display:flex;gap:.4rem;flex-wrap:wrap}
.pagination a,.pagination span{padding:.45rem .85rem;border:1px solid var(--line);text-decoration:none}
.pagination .current{background:var(--g2);color:#fff;border-color:var(--g2)}
.leaders{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.thumb.portrait{aspect-ratio:3/4}
.profile{display:grid;grid-template-columns:320px 1fr;gap:2rem;align-items:start}
.profile aside img{width:100%;border:4px solid var(--g2)}
.social{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:.8rem 0}
.social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--g2);color:#fff}
.social a:hover,.social a:focus-visible{background:var(--g1)}
.social svg{width:18px;height:18px}
@media(max-width:700px){.grid2,.feature,.profile{grid-template-columns:1fr}.feature .thumb{margin:-1.3rem -1.3rem 0;height:auto}}