/* Barya Laar v5 — loaded AFTER style.css. Adds: dark/light tokens, larger logo, heading system,
   hero refinement, public gallery, background video, admin helpers. Existing rules are not edited. */

:root{--surface:#fff;--surface-2:#f4f8fb;--on-btn:#fff}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent,#eab308);outline-offset:2px;border-radius:6px}
html{color-scheme:light}
body{transition:background-color .25s ease,color .25s ease}

/* ---------- Dark theme tokens (admin colours stay saved; readable variants come from PHP) ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --page-bg:#0e1621;--text:#e6edf4;--muted:#a9b7c6;--line:#263548;--line-strong:#35495f;
  --primary-tint:#14212f;--primary-tint-2:#1b2d41;--surface:#152130;--surface-2:#1b2a3c;
  --primary-dark:var(--primary);--ring:rgba(120,190,225,.4);
  --shadow-sm:0 6px 22px rgba(0,0,0,.38);--shadow:0 16px 42px rgba(0,0,0,.5);--shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --btn-1:var(--dk-primary,#155e75);--btn-2:color-mix(in srgb,var(--dk-primary,#155e75) 68%,#000);
  --hd-c2:#fbbf24;--hd-acc:#fbbf24;--hd-icon:var(--primary);
}
html[data-theme="dark"] body{background:var(--page-bg);color:var(--text)}
html[data-theme="dark"] :is(body.inner-page .card,body.inner-page .course-card,body.inner-page .news-card,body.inner-page .event-card,body.inner-page .teacher-card,.gallery-grid figure,.gal-item,.empty,.contact-details p,.stat-card,.admin-panel,.table-wrap,.gallery-admin-grid article,.dz-group,.form-panel,.media-item,.dz-tabs a,.translation-fieldset legend){background:var(--surface);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .detail-page{background:rgba(21,33,48,.92);border-color:var(--line)}
html[data-theme="dark"] .form-actions{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] :is(.form-panel input,.form-panel textarea,.form-panel select,.admin-panel input:not([type=checkbox]):not([type=color]):not([type=file]):not([type=radio]),.admin-panel textarea,.admin-panel select,.search-form input,.admin-language select){background:#0f1a26;color:var(--text);border-color:var(--line-strong)}
html[data-theme="dark"] :is(.form-panel,.admin-panel) ::placeholder{color:#7f90a3}
html[data-theme="dark"] .admin-panel input[type=file],html[data-theme="dark"] .admin-form-grid>.translation-fieldset{background:var(--primary-tint);border-color:var(--line-strong)}
html[data-theme="dark"] .section:not(.register-section){background-color:var(--page-bg)}
html[data-theme="dark"] .section.section-muted{background-image:linear-gradient(135deg,#111e2d,#0d1722)}
html[data-theme="dark"] .section:not(.register-section)::before{opacity:.55}
html[data-theme="dark"] .nav-cta{background:var(--accent);color:#10202c;border-color:var(--accent)}
html[data-theme="dark"] .hero .btn{background:#fff;color:#0f3b4d}
html[data-theme="dark"] .admin-brand>span{color:#0f3b4d}
html[data-theme="dark"] .btn-reset{background:#b42318;color:#fff;border-color:#b42318}
html[data-theme="dark"] .btn{color:var(--on-btn);border:1px solid rgba(255,255,255,.16)}
html[data-theme="dark"] .btn-light{background:var(--primary-tint-2);color:var(--primary);border-color:var(--line-strong)}
html[data-theme="dark"] .danger-link{background:#3a1d1b;color:#ffb4ab;border-color:#5b2a27}
html[data-theme="dark"] .alert.error{background:#3a1d1b;color:#ffb4ab;border-color:#5b2a27}
html[data-theme="dark"] .alert.success{background:#16301f;color:#a6e9bd;border-color:#245536}
html[data-theme="dark"] .register-section{background:linear-gradient(125deg,var(--dk-secondary,#164e63),var(--dk-primary,#155e75));background:linear-gradient(125deg,color-mix(in srgb,var(--dk-secondary,#164e63) 82%,#000),color-mix(in srgb,var(--dk-primary,#155e75) 78%,#000))}
html[data-theme="dark"] .dz-tabs a.active{background:var(--dk-primary,#155e75);color:#fff}
html[data-theme="dark"] img{filter:brightness(.94)}
html[data-theme="dark"] .dz-bgv img,html[data-theme="dark"] .gal-item img{filter:none}

/* ---------- Theme toggle ---------- */
.theme-toggle{display:inline-grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--nav-hover,rgba(255,255,255,.2));background:var(--nav-hover,rgba(255,255,255,.14));color:var(--nav-text,#fff);cursor:pointer;transition:transform .25s ease,background .2s ease;margin-inline-start:4px}
.theme-toggle:hover{transform:rotate(14deg) scale(1.06)}
.theme-toggle .ic-sun{display:none}
html[data-theme="dark"] .theme-toggle .ic-sun{display:block}
html[data-theme="dark"] .theme-toggle .ic-moon{display:none}
@media(max-width:1100px){.main-nav .theme-toggle{align-self:flex-start;margin:8px 0 0}}

/* ---------- Logo: clearer, tasteful, ratio preserved ---------- */
.header-inner{min-height:88px}
.brand{gap:12px;flex:0 1 auto;min-width:0}
.brand-logo{height:62px;width:auto;max-width:min(170px,34vw);object-fit:contain;padding:4px;border-radius:14px}
@media(max-width:1100px){.header-inner{min-height:80px}.brand-logo{height:56px}}
@media(max-width:760px){.header-inner{min-height:72px}.brand-logo{height:50px;width:auto;max-width:34vw}}
@media(max-width:380px){.brand-logo{height:44px}}

/* ---------- Heading system (icon + title + decorative line) ---------- */
.dz-hd{--lc:var(--hd-acc,#eab308);display:flex;flex-wrap:wrap;align-items:center;justify-content:var(--hd-just,flex-start);gap:.2em .75em;margin:0 0 .5em;max-width:100%}
.dz-ic{order:0;display:inline-grid;place-items:center;flex:none;width:calc(var(--hd-icsz,30px) * 1.6);height:calc(var(--hd-icsz,30px) * 1.6);border-radius:50%;color:var(--hd-icon,var(--primary));background:rgba(21,94,117,.1)}
@supports (color:color-mix(in srgb,red 50%,blue)){.dz-ic{background:color-mix(in srgb,currentColor 13%,transparent)}}
.dz-ic .dz-svg{width:var(--hd-icsz,30px);height:var(--hd-icsz,30px)}
.dz-title{order:1;margin:0;min-width:0;font-family:var(--hd-font,inherit);font-weight:var(--hd-w,800);font-size:calc(var(--hd-base,clamp(26px,3.4vw,42px)) * var(--hd-scale,1));line-height:1.35;letter-spacing:0;color:var(--secondary);text-shadow:var(--hd-sh,none);overflow-wrap:anywhere}
html[dir="ltr"] .dz-title{letter-spacing:var(--hd-ls,0)}   /* never space Arabic-script letters: it breaks their joins */
.dz-hd.sz-h1{--hd-base:clamp(30px,4.4vw,52px)}
.dz-hd.sz-h2{--hd-base:clamp(26px,3.4vw,42px)}
.dz-hd.sz-h3{--hd-base:clamp(20px,2.4vw,28px)}
.dz-hd .dz-title::after{content:none!important}
.dz-hd:not(.pos-top) .dz-title{flex:0 1 auto;max-width:calc(100% - var(--hd-icsz,30px) * 1.6 - .8em)}
.dz-hd.pos-top .dz-title{max-width:100%}
.dz-hl{color:var(--hd-c2,#b45309)}
.dz-hd.is-grad .dz-title{background-image:linear-gradient(var(--hd-gdir,90deg),var(--hd-g1,#155e75),var(--hd-g2,#b45309));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
.dz-hd.pos-end .dz-ic{order:2}
.dz-hd.pos-top .dz-ic{flex:0 0 100%;width:auto;height:auto;background:none;display:flex;justify-content:var(--hd-just,flex-start)}
.dz-hd.pos-top .dz-ic .dz-svg{padding:.3em;box-sizing:content-box;border-radius:50%;background:rgba(21,94,117,.1)}
.dz-line{order:3;flex:0 0 100%;display:flex;justify-content:var(--hd-just,flex-start);margin-top:.35em;min-height:4px}
.dz-line::before{content:"";display:block;transform-origin:var(--tx,left)}
html[dir="rtl"]{--tx:right}
.line-none .dz-line{display:none}
.line-underline .dz-line::before{width:76px;height:4px;border-radius:4px;background:var(--lc)}
.line-bar .dz-line::before{width:46px;height:7px;border-radius:7px;background:var(--lc)}
.line-dots .dz-line::before{width:56px;height:8px;background:radial-gradient(circle,var(--lc) 3px,transparent 3.6px) 0 0/16px 8px repeat-x}
.line-double .dz-line::before{width:76px;height:9px;background:linear-gradient(var(--lc),var(--lc)) top/100% 3px no-repeat,linear-gradient(var(--lc),var(--lc)) bottom/55% 3px no-repeat}
html[dir="rtl"] .line-double .dz-line::before{background-position:top,bottom right}
.line-gradient .dz-line::before{width:110px;height:4px;border-radius:4px;background:linear-gradient(to right,var(--hd-g1,var(--primary)),var(--lc))}
html[dir="rtl"] .line-gradient .dz-line::before{background:linear-gradient(to left,var(--hd-g1,var(--primary)),var(--lc))}
.hero .dz-hd{--hd-icon:#fff;--hd-c2:#fcd34d;--hd-acc:#fcd34d;margin-bottom:.4em}
.hero .dz-hd.sz-h1{--hd-base:clamp(32px,5vw,60px)}
.hero .dz-ic{background:rgba(255,255,255,.16)}
.register-section .dz-hd{--hd-icon:#fff;--hd-c2:#fcd34d;--hd-acc:#fcd34d}
.register-section .dz-ic{background:rgba(255,255,255,.16)}
/* heading animations (all disabled for reduced motion / low-power devices) */
.anim-fade .dz-title{animation:dzHdFade var(--hd-dur,1.1s) ease both}
.anim-slide .dz-title{animation:dzHdSlide var(--hd-dur,1.1s) cubic-bezier(.2,.7,.2,1) both}
.anim-shine .dz-title{animation:dzHdGlow calc(var(--hd-dur,1.1s) * 2.4) ease-in-out infinite alternate}
.anim-grow .dz-line::before{animation:dzHdGrow var(--hd-dur,1.1s) ease both}
@keyframes dzHdFade{from{opacity:0}to{opacity:1}}
@keyframes dzHdSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dzHdGlow{from{text-shadow:0 0 0 transparent}to{text-shadow:0 0 16px var(--lc)}}
@keyframes dzHdGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.dz-hd .dz-title,.dz-hd .dz-line::before{animation:none!important}body{transition:none}}
html.dz-lite .dz-hd .dz-title,html.dz-lite .dz-hd .dz-line::before{animation:none!important}

/* ---------- Homepage hero refinement ---------- */
.hero-v5{padding-bottom:clamp(26px,4vw,46px)}
.hero-v5 .hero-copy p{max-width:62ch;font-size:clamp(16px,1.5vw,19px);line-height:1.9}
.hero-v5 .hero-art-inner{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:28px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.hero-stats{list-style:none;margin:clamp(26px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.hero-stats li{display:grid;gap:2px;justify-items:center;text-align:center;padding:14px 16px;border-radius:18px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-stats strong{font-size:clamp(24px,3vw,34px);line-height:1.2}
.hero-stats span{font-size:13.5px;opacity:.92}

/* ---------- Public gallery ---------- */
.gal-grid{--cols:var(--gal-cols,3);--gap:var(--gal-gap,18px)}
.gal-grid.is-masonry{column-count:var(--cols);column-gap:var(--gap)}
.gal-grid.is-masonry .gal-item{break-inside:avoid;margin:0 0 var(--gap)}
.gal-grid.is-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);align-items:start}
@media(max-width:1000px){.gal-grid{--cols:2}}
@media(max-width:560px){.gal-grid{--cols:1}}
.gal-item{margin:0;overflow:hidden;background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--radius,18px);box-shadow:var(--shadow-sm)}
.gal-media{display:block;width:100%;margin:0;padding:0;border:0;background:var(--primary-tint);cursor:zoom-in;line-height:0}
.gal-item img{display:block;width:100%;height:auto}
.gal-item video{display:block;width:100%;height:auto;max-height:80vh;background:#000}
.gal-item figcaption{display:grid;gap:4px;padding:12px 15px 14px;font-size:14.5px;line-height:1.75;color:var(--muted);overflow-wrap:anywhere}
.gal-item figcaption strong{color:var(--secondary);font-size:15.5px}
.gal-lightbox{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:1fr auto;place-items:center;gap:10px;padding:clamp(14px,3vw,30px);background:rgba(5,10,16,.9)}
.gal-lightbox img{max-width:min(96vw,1300px);max-height:78vh;width:auto;height:auto;object-fit:contain;border-radius:10px;filter:none}
.gal-lightbox p{margin:0;max-width:min(92vw,900px);color:#e6edf4;text-align:center;font-size:15px;line-height:1.7}
.gal-lightbox button{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer}

/* ---------- Background video (inside the existing section design system) ---------- */
.dz-bgv{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.dz-bgv video,.dz-bgv img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--dz-fit,cover);object-position:var(--dz-bgpos,center);filter:none}
.dz-bgv::after{content:"";position:absolute;inset:0;background:var(--dz-ov,transparent)}
.dz-bgv-toggle{position:absolute;inset-block-end:12px;inset-inline-end:12px;z-index:6;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(10,20,30,.55);color:#fff;font-size:14px;cursor:pointer;display:grid;place-items:center}

/* ---------- Admin helpers ---------- */
.ic-picker{display:grid;gap:8px}
.ic-picker input[type=search]{width:100%}
.ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;max-height:250px;overflow:auto;padding:2px}
.ic-opt{position:relative;display:grid;justify-items:center;gap:3px;padding:9px 4px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;text-align:center;font-size:11px;line-height:1.3}
.ic-opt input{position:absolute;opacity:0;pointer-events:none}
.ic-opt:has(input:checked){border-color:var(--primary);background:var(--primary-tint);box-shadow:0 0 0 3px var(--ring)}
.ic-opt:has(input:focus-visible){outline:3px solid var(--accent)}
.ic-opt .dz-svg{width:26px;height:26px;color:var(--primary)}
.dz-vprev{display:block;width:100%;max-height:230px;margin-top:8px;border-radius:12px;background:#000}
.gl-admin-grid .media-item img,.gl-admin-grid .media-item video{display:block;width:100%;height:170px;object-fit:cover;background:#000}
.gl-admin-grid .media-item.is-public{border-inline-start:4px solid #1f9d55}
.gl-admin-grid .media-item.is-private{border-inline-start:4px solid #98a2b3}
.gl-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.gl-actions form{display:inline-flex;margin:0}
.gl-public{background:var(--primary-tint);padding:12px 14px;border-radius:12px}

/* ---------- v6: images with width/height keep their proportions (zero specificity: never overrides existing rules) ---------- */
:where(img[width][height]){height:auto}

/* ---------- v6: configurable icons ---------- */
.bl-ic{--ic-w:var(--ic-size,64px);display:inline-grid;place-items:center;flex:none;max-width:100%;color:var(--ic-color,currentColor);border-radius:var(--ic-r,0)}
@media(max-width:640px){.bl-ic{--ic-w:var(--ic-size-m,48px)}}
.bl-ic:not(.is-img){width:var(--ic-w);height:var(--ic-w)}
.bl-ic .dz-svg{width:58%;height:58%}
.bl-ic.is-img img{width:auto;height:auto;max-width:var(--ic-w);max-height:var(--ic-w);object-fit:contain}
.bl-ic.bg-solid{background:var(--ic-bg,#fff)}
.bl-ic.bg-soft{background:rgba(255,255,255,.2)}
.bl-ic.is-img.bg-solid,.bl-ic.is-img.bg-soft{padding:8px}
.bl-ic-pub{margin-bottom:var(--ic-gap,22px)}
.bl-ic-pub.bg-default:not(.is-img){background:linear-gradient(135deg,#fff,#d6f0ff);color:var(--ic-color,#0077cc)}
.bl-ic-adm{margin:0;margin-inline-end:max(0px,calc(var(--ic-gap,12px) - 12px))}
.bl-ic-adm.bg-default:not(.is-img){background:#fff;color:var(--ic-color,var(--primary-dark,#0f3b4d))}
.bl-hd-row{display:flex;align-items:center;justify-content:center;gap:var(--ic-gap,12px);flex-wrap:wrap;max-width:100%}
.bl-hd-row .bl-ic-pub{margin:0}
.login-mark.is-custom{background:none;box-shadow:none;width:auto;height:auto;border-radius:0}
.admin-brand .admin-title{display:block;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.admin-brand .bl-ic-adm.is-img{max-width:56px}

/* ---------- v6: admin icon editor ---------- */
.v6-prev-wrap{display:grid;gap:6px;justify-items:center;margin-bottom:18px}
.v6-prev{display:grid;justify-items:center;align-content:center;gap:8px;min-width:220px;min-height:120px;padding:20px;border-radius:16px;background:linear-gradient(135deg,var(--secondary),var(--primary));color:#fff;max-width:100%}
.v6-prev.is-adm{background:var(--nav-bg,#102f3c);color:var(--nav-text,#fff)}
.v6-prev-slot{display:grid;place-items:center}
.v6-icon-panel [hidden]{display:none!important}
.v6-icon-panel .ic-opt[hidden]{display:none}
.v6-icon-form .check-label{margin-bottom:8px}
.v6-icon-form output{font-weight:800;color:var(--primary)}