/* =====================================================================
   v8 - header / navigation (public pages AND the header shown on admin pages)

   ROOT CAUSE of the empty gap (v7): .main-nav was "flex:1 1 auto; justify-content:flex-end" inside a
   container up to 1480px wide, so every pixel the logo+title and the menu did not need became an
   empty hole between the title and the first link. Now the header is three parts:
       [ logo + title ]  [ links - take the free space and are centred in it ]  [ Register / theme / language ]
   so the free space is shared evenly instead of piling up in one place. The same markup (.nav-links +
   .nav-tools) becomes the stacked mobile menu. A tiny script in the header (config.php) switches to the
   menu button ONLY when the one-row layout would not fit (any language, font or logo), and below 1024px.
   Logical properties + the page direction give LTR for English and RTL for Pashto / Dari.
   ===================================================================== */
.site-header .header-inner{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(10px,1.4vw,22px);min-height:78px;position:static}
@media(min-width:1024px){.site-header .container{width:calc(100% - 32px);max-width:1640px}}

.site-header .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0;max-width:none;margin:0;white-space:nowrap}
.site-header .brand span{white-space:nowrap;min-width:0;line-height:1.35;font-size:clamp(15px,1.3vw,19px)}
.site-header .brand-logo{flex:none;height:54px;width:auto;max-width:min(150px,28vw)}

.site-header .menu-toggle{display:none;flex:none}
.site-header .menu-toggle .ic-bars path{transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease),opacity .2s}
.site-header .menu-toggle[aria-expanded="true"] .b1{transform:translateY(5px) rotate(45deg)}
.site-header .menu-toggle[aria-expanded="true"] .b2{opacity:0}
.site-header .menu-toggle[aria-expanded="true"] .b3{transform:translateY(-5px) rotate(-45deg)}

.site-header .main-nav{display:flex;position:static;flex:1 1 auto;min-width:0;width:auto;flex-direction:row;align-items:center;gap:clamp(8px,1.2vw,18px);padding:0;background:none;border-radius:0;box-shadow:none;max-height:none;overflow:visible;font-size:14px;font-weight:700;animation:none;color:var(--nav-text)}
.site-header .nav-links{display:flex;flex:1 1 auto;min-width:0;max-width:980px;margin-inline:auto;align-items:center;justify-content:space-evenly;gap:2px}
.site-header .nav-links a{flex:none;display:inline-block;min-height:0;white-space:nowrap;padding:8px clamp(6px,.8vw,13px);font-size:clamp(13px,1vw,14.5px)}
.site-header .nav-links a::after{inset-inline:clamp(6px,.8vw,13px);bottom:3px}
.site-header .nav-tools{display:flex;flex:none;align-items:center;gap:10px;padding:0;border:0}
.site-header .nav-cta{display:inline-block;flex:none;margin:0;padding:9px 20px;white-space:nowrap;font-size:14px}
.site-header .theme-toggle{flex:none;margin:0;align-self:auto;width:42px;height:42px}
.site-header .nav-tools .language-select{width:auto;margin:0}
.site-header .nav-tools .language-select select{width:auto;max-width:132px;min-width:0;border-radius:999px;padding:.5rem .9rem}

/* Medium desktops: spacing, logo and type scale down in two steps so the full one-row menu fits as early as possible */
@media(min-width:1024px) and (max-width:1599px){
  .site-header .header-inner{gap:12px}
  .site-header .brand{gap:9px}
  .site-header .brand-logo{height:46px;max-width:110px}
  .site-header .brand span{font-size:15px}
  .site-header .main-nav{gap:8px}
  .site-header .nav-links a{padding:8px 6px;font-size:13px}
  .site-header .nav-links a::after{inset-inline:6px}
  .site-header .nav-tools{gap:8px}
  .site-header .nav-cta{padding:8px 14px;font-size:13px}
  .site-header .theme-toggle{width:38px;height:38px}
  .site-header .nav-tools .language-select select{max-width:104px;padding:.45rem .7rem;font-size:13px}
}
@media(min-width:1024px) and (max-width:1279px){
  .site-header .header-inner{gap:10px}
  .site-header .brand-logo{height:40px;max-width:92px}
  .site-header .brand span{font-size:14px}
  .site-header .nav-links a{padding:8px 4px;font-size:12.5px}
  .site-header .nav-links a::after{inset-inline:4px}
  .site-header .nav-cta{padding:7px 11px;font-size:12.5px}
  .site-header .theme-toggle{width:34px;height:34px}
  .site-header .nav-tools .language-select select{max-width:92px}
}

/* compact (menu button) layout: forced below 1024px, and by the fit script whenever one row is too narrow */
@media(max-width:1023px){
  .site-header .header-inner{min-height:68px;gap:10px;position:static}
  .site-header .menu-toggle{display:inline-grid;flex:none;width:44px;height:44px}
  .site-header .brand{flex:1 1 auto;min-width:0;margin:0}
  .site-header .brand span{white-space:normal;text-wrap:balance;font-size:clamp(11.5px,3.3vw,17px);line-height:1.3}
  .site-header .brand-logo{height:40px;max-width:min(100px,26vw)}
  .site-header .main-nav{display:none;position:absolute;top:100%;inset-inline:0;flex:none;flex-direction:column;align-items:stretch;gap:10px;width:auto;padding:10px 14px 18px;background:var(--nav-bg);color:var(--nav-text);border-radius:0 0 20px 20px;box-shadow:0 24px 40px rgba(12,35,48,.25);max-height:calc(100vh - 90px);max-height:calc(100dvh - var(--hdr-h,76px) - 8px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .site-header .main-nav.open{display:flex;animation:navIn .25s var(--ease)}
  .site-header .nav-links{flex:none;flex-direction:column;align-items:stretch;justify-content:flex-start;max-width:none;margin:0;gap:2px}
  .site-header .nav-links a{display:flex;align-items:center;min-height:48px;padding:10px 14px;font-size:16px;white-space:normal}
  .site-header .nav-links a::after{inset-inline:14px;bottom:6px}
  .site-header .nav-tools{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding-top:12px;border-top:1px solid var(--nav-hover)}
  .site-header .nav-cta{grid-column:1 / -1;display:flex;justify-content:center;align-items:center;min-height:48px;padding:10px 20px;text-align:center;white-space:normal}
  .site-header .nav-tools .language-select{display:flex;width:100%;margin:0}
  .site-header .nav-tools .language-select select{width:100%;max-width:none;min-width:0;min-height:46px;border-radius:12px;padding:.6rem .9rem}
  .site-header .theme-toggle{width:46px;height:46px;margin:0;align-self:auto}
}
.site-header.is-compact .header-inner{min-height:68px;gap:10px;position:static}
.site-header.is-compact .menu-toggle{display:inline-grid;flex:none;width:44px;height:44px}
.site-header.is-compact .brand{flex:1 1 auto;min-width:0;margin:0}
.site-header.is-compact .brand span{white-space:normal;text-wrap:balance;font-size:clamp(11.5px,3.3vw,17px);line-height:1.3}
.site-header.is-compact .brand-logo{height:40px;max-width:min(100px,26vw)}
.site-header.is-compact .main-nav{display:none;position:absolute;top:100%;inset-inline:0;flex:none;flex-direction:column;align-items:stretch;gap:10px;width:auto;padding:10px 14px 18px;background:var(--nav-bg);color:var(--nav-text);border-radius:0 0 20px 20px;box-shadow:0 24px 40px rgba(12,35,48,.25);max-height:calc(100vh - 90px);max-height:calc(100dvh - var(--hdr-h,76px) - 8px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.site-header.is-compact .main-nav.open{display:flex;animation:navIn .25s var(--ease)}
.site-header.is-compact .nav-links{flex:none;flex-direction:column;align-items:stretch;justify-content:flex-start;max-width:none;margin:0;gap:2px}
.site-header.is-compact .nav-links a{display:flex;align-items:center;min-height:48px;padding:10px 14px;font-size:16px;white-space:normal}
.site-header.is-compact .nav-links a::after{inset-inline:14px;bottom:6px}
.site-header.is-compact .nav-tools{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding-top:12px;border-top:1px solid var(--nav-hover)}
.site-header.is-compact .nav-cta{grid-column:1 / -1;display:flex;justify-content:center;align-items:center;min-height:48px;padding:10px 20px;text-align:center;white-space:normal}
.site-header.is-compact .nav-tools .language-select{display:flex;width:100%;margin:0}
.site-header.is-compact .nav-tools .language-select select{width:100%;max-width:none;min-width:0;min-height:46px;border-radius:12px;padding:.6rem .9rem}
.site-header.is-compact .theme-toggle{width:46px;height:46px;margin:0;align-self:auto}

@media(max-width:360px){
  .site-header .brand-logo{height:38px}
  .site-header .menu-toggle{width:42px;height:42px}
}

/* ---------------------------------------------------------------------
   Admin dashboard: header actions + side navigation on phones/tablets
   --------------------------------------------------------------------- */
.admin-nav-toggle{display:none}
.admin-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px}
.admin-user{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.admin-user a{display:inline-flex;align-items:center;min-height:40px}
@media(max-width:420px){.admin-user a{display:inline-flex!important}}
@media(max-width:900px){
  .admin-shell{display:block}
  .admin-sidebar{position:static;max-height:none;overflow:visible;padding:12px 14px;gap:10px}
  .admin-nav-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--nav-hover);background:var(--nav-hover);color:var(--nav-text);font:inherit;font-weight:800;cursor:pointer}
  .admin-nav-toggle::after{content:"";width:10px;height:10px;border-inline-end:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
  .admin-nav-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .admin-sidebar nav{display:none;flex-direction:column;overflow:visible;gap:4px;padding:6px 0 2px}
  .admin-sidebar nav.open{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .admin-sidebar nav a{display:flex;align-items:center;min-height:46px;white-space:normal;padding:10px 14px}
  .admin-sidebar nav a.active::before{inset-inline:auto;inset-inline-start:0;top:20%;bottom:20%;width:4px;height:auto}
  .logout-form{position:static;width:100%;margin:0}
  .logout-form button{width:100%;min-height:46px}
}

.rev-tag{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.rev-tag code{font-family:ui-monospace,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate}

/* v8.1: Center Officials message preview and balanced gallery mosaic */
.official-message{overflow-wrap:anywhere;line-height:1.85;white-space:normal}
.official-message.is-collapsed{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.official-see-toggle{display:inline-block;margin-top:8px;padding:0;border:0;background:transparent;color:var(--primary,#155e75);font:inherit;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.gal-grid.is-masonry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gal-gap,18px);column-count:initial}
.gal-grid.is-masonry .gal-item{margin:0;min-width:0}
.gal-grid.is-masonry .gal-item:nth-child(3n + 1){grid-column:1 / -1}
.gal-grid.is-masonry .gal-item:nth-child(3n + 1) .gal-media{aspect-ratio:16 / 7}
.gal-grid.is-masonry .gal-item:nth-child(3n + 1) .gal-media img{width:100%;height:100%;object-fit:cover}
.gal-grid.is-masonry .gal-item:not(:nth-child(3n + 1)) .gal-media{aspect-ratio:1 / 1}
.gal-grid.is-masonry .gal-item:not(:nth-child(3n + 1)) .gal-media img{width:100%;height:100%;object-fit:cover}
.gal-grid .gal-media video{width:100%;height:100%;object-fit:cover}
@media(max-width:560px){.gal-grid.is-masonry{grid-template-columns:1fr}.gal-grid.is-masonry .gal-item:nth-child(n){grid-column:auto}.gal-grid.is-masonry .gal-media{aspect-ratio:4 / 3!important}.gal-grid.is-masonry .gal-media img{height:100%;object-fit:cover}}