/*
Theme Name: Khenchela Wilaya
Theme URI: https://wilaya-khenchela.dz
Author: Wilaya de Khenchela
Description: قالب رسمي لموقع ولاية خنشلة — تصميم حكومي عربي RTL بالأخضر والذهبي، مع أنواع محتوى مخصصة للأخبار والبلديات والخدمات.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: khenchela-wilaya
Tags: rtl-language-support, government, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ============ TOKENS ============ */
:root{
  --primary:#1f6b3b;
  --primary-dark:#154627;
  --primary-fg:#fdfcf6;
  --gold:#d4a537;
  --gold-dark:#b8862a;
  --bg:#fbfaf5;
  --card:#ffffff;
  --fg:#1a2b20;
  --muted:#f3f2ec;
  --muted-fg:#5f6b62;
  --accent:#eef4ea;
  --border:#e3e5df;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --shadow-lg:0 10px 25px -5px rgba(0,0,0,.1);
  --radius:.5rem;
  --radius-lg:.75rem;
  --container:1280px;
  --font-display:"Cairo","Tajawal",system-ui,sans-serif;
  --font-body:"Tajawal","Cairo",system-ui,sans-serif;
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{direction:rtl;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:#dfe3d8;color:var(--fg);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.25;color:var(--fg)}
/* التتبّع الحرفي للعناصر اللاتينية فقط (يشوّه النص العربي) */
[lang="fr"] h1,[lang="fr"] h2,[lang="fr"] h3,[lang="fr"] h4,[lang="fr"] h5,[lang="fr"] h6,.brand-left .brand-top,.brand-left .brand-bottom{letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,3.5rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.125rem}
p{color:var(--fg)}

/* ============ BOXED LAYOUT ============ */
.site-wrapper{width:92%;max-width:1800px;margin-inline:auto;background:var(--bg);box-shadow:0 0 50px rgba(0,0,0,.1);min-height:100vh}
@media(max-width:768px){.site-wrapper{width:100%;box-shadow:none}}

/* ============ LAYOUT ============ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1rem}
.section{padding:4rem 0}
.section-sm{padding:2.5rem 0}
@media(min-width:768px){.section{padding:2rem 0}}

/* ============ TOP BAR ============ */
.topbar{background:linear-gradient(to left,var(--primary-dark),var(--primary));color:var(--primary-fg);font-size:.75rem}
.topbar .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-block:.5rem;gap:.75rem}
.topbar a{opacity:.9;display:inline-flex;align-items:center;gap:.35rem}
.topbar a:hover{color:var(--gold);opacity:1}
.lang-switcher{display:flex;gap:.4rem}
.lang-switcher a{padding:.15rem .55rem;border-radius:.25rem;font-size:.72rem;font-weight:700;opacity:.9}
.lang-switcher a:hover{background:rgba(255,255,255,.15);opacity:1}
.hidden-sm{font-size:.95rem}

/* ============ SITE HEADER / BRAND ============ */
.site-header{position:relative;box-shadow:var(--shadow)}

.header-main{background:var(--card);border-bottom:1px solid var(--border);padding-block:1.25rem}
@media(min-width:768px){.header-main{padding-block:1.75rem}}
@media(min-width:1024px){.header-main{padding-block:2.25rem}}
@media(max-width:1023.98px){.header-main{display:none !important}}
.header-main .container{position:relative;display:flex;justify-content:center;align-items:center}

/* حاوية أعرض بس بالهيدر والأشرطة العلوية فقط، بدون ما يأثر على باقي الموقع */
.header-main .container,
.desktop-nav-bar .container,
.news-ticker .container,
.links-ticker .container{
    max-width:1600px;
}

/* شعار/عنوان الموقع — تخطيط شبكي ثلاثي اللغة (عربي/فرنسي حول الشعار) */
.site-brand{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;width:100%}
.brand-logo{justify-self:center;margin-left: 25px;margin-right: 25px;}
.brand-right{justify-self:end;text-align:right}
.brand-left{justify-self:start;text-align:left}
.brand-side{display:flex;flex-direction:column;line-height:1.35}
.brand-top{font-size:1rem;color:var(--fg);font-weight:600;margin-bottom:.25rem;white-space:nowrap}
.brand-bottom{font-family:var(--font-display);font-weight:700;color:var(--primary);font-size:.95rem;white-space:nowrap}
.brand-logo img,.brand-logo svg{width:64px;height:64px;object-fit:contain}
@media(min-width:768px){
    .brand-top{font-size:1.15rem}
    .brand-bottom{font-size:1.05rem}
}
@media(min-width:1024px){
    .brand-top{font-size:1.3rem}
    .brand-bottom{font-size:1.15rem}
}
/* موبايل/تابلت: الشعار فقط في المنتصف، بدون نصوص العربي/الفرنسي */
@media(max-width:1023.98px){
    .site-brand{grid-template-columns:0 auto 0;gap:0}
    .brand-side{display:none}
    .brand-logo img,.brand-logo svg{width:52px;height:52px}
}

/* عناصر شعار/عنوان قديمة (بنية مبسطة سابقة)، لا تزال محفوظة تحسبًا لاستخدامها في قوالب أخرى */
/* حُذفت .site-brand img: كانت تهزم .brand-logo img (نفس الوزن، تعريف لاحق). الشعار يُضبط عبر .brand-logo img وحدها. */
.site-brand .title{font-family:var(--font-display);font-weight:700;color:var(--primary);font-size:1.15rem;line-height:1.15}
.site-brand .subtitle{font-size:.7rem;color:var(--muted-fg);margin-top:2px}

/*banner ho*/
/* Head Banner */
.header-banner-link {
    display: block;
    text-align: center;
    transition: opacity 0.3s ease;
}
.header-banner-link:hover {
    opacity: 0.9;
}

.header-banner-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  
}

/* ============ NAV ============ */
.main-nav{display:none}
@media(min-width:1024px){.main-nav{display:flex;align-items:center;gap:.25rem}}
.main-nav a,.main-nav .menu-item>a{padding:.5rem .75rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;color:rgba(26,43,32,.85);transition:all .2s}
.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:var(--primary);background:var(--accent);font-weight:600}

.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border:0;
    background:var(--accent);
    color:var(--primary-dark);
    padding:.35rem .7rem;
    border-radius:9999px;
    font-size:1rem;
    line-height:1;
    cursor:pointer;
    position:relative;
    z-index:1002;
}
.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle[aria-expanded="true"]{
    background:var(--accent);
    color:var(--primary-dark);
}

/* الهامبرغر يظهر بمكان "آخر الأخبار" في وضع الموبايل/التابلت، ويختفي فقط عند ظهور القائمة الأفقية على الديسكتوب (نفس نقطة تحول desktop-nav-bar) */
@media(max-width:1023.98px){
    .nav-toggle{ display:flex; }
    .news-ticker .news-ticker-label{ display:none; }
}
@media(min-width:1024px){
    .nav-toggle{ display:none !important }
}

/* أسماء بديلة (alias) لزر القائمة، محفوظة تحسبًا لاستخدامها في أماكن أخرى من القالب */
.mobile-menu-toggle,
.hamburger-menu,
.menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:#c9a84c;
  color:#0d1b2a;
  border:none;
  border-radius:0.375rem;
  width:44px;
  height:44px;
  cursor:pointer;
  z-index:10001;
}
.mobile-menu-toggle:hover,
.hamburger-menu:hover,
.menu-toggle:hover{
  background-color:#d4b86a;
}

.mobile-nav{display:none;border-top:1px solid var(--border);background:var(--card)}
.mobile-nav.open{display:block;max-height:75vh;overflow-y:auto;box-shadow:0 6px 14px rgba(0,0,0,.15)}
.mobile-nav ul{display:flex;flex-direction:column}
.mobile-nav a{display:block;padding:.85rem 1rem;font-size:.9rem;font-weight:500;border-bottom:1px solid var(--border)}
.mobile-nav a:hover,.mobile-nav .current-menu-item>a{background:var(--accent);color:var(--primary)}
.mobile-nav li:last-child a{border-bottom:0}
@media(min-width:1024px){
    .mobile-nav{ display:none !important }
}

/* شريط القائمة الأفقية على الديسكتوب */
.desktop-nav-bar{display:none;}
@media(min-width:1024px){
    .desktop-nav-bar{
        display:block;
        background:var(--primary);
        border-bottom:3px solid var(--gold);
    }
    .desktop-nav-bar .container{
        display:flex;
        align-items:stretch;
        justify-content:center;
        flex-wrap:wrap;
    }
    .desktop-nav-bar ul{
        display:flex;
        align-items:stretch;
        width:100%;
        justify-content:center;
    }
    .desktop-nav-bar li{display:flex}
    .desktop-nav-bar a,
    .desktop-nav-bar .menu-item>a{
        display:flex;
        align-items:center;
        padding:.9rem 1.6rem;
        color:var(--primary-fg);
        font-size:.88rem;
        font-weight:600;
        border-inline-start:1px solid rgba(255,255,255,.18);
        transition:background .2s, color .2s;
        white-space:nowrap;
    }
    .desktop-nav-bar li:first-child>a{border-inline-start:0}
    .desktop-nav-bar a:hover,
    .desktop-nav-bar .current-menu-item>a,
    .desktop-nav-bar .current_page_item>a{
        background:var(--primary-dark);
        color:var(--gold);
    }
}
@media(max-width:1023.98px){
    .desktop-nav-bar{display:none !important;}
}

/* قائمة الموبايل المنسدلة أسفل شريط الأخبار (news-ticker) */
.nav-toggle{
    /* راجع أعلاه: z-index و ألوان الزر معرّفة هناك؛ هذا فقط لتوضيح البنية */
}
.news-ticker .mobile-nav{
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:9999;
    width:100%;
    color:var(--fg);
    border-top:1px solid var(--border);
    display:none;
    background-color:#1a5f3f;
    padding:1rem;
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.news-ticker .mobile-nav.active,
.news-ticker .mobile-nav.open,
.news-ticker .mobile-nav[style*="display: block"]{
    display:block !important;
}
.news-ticker .mobile-nav ul{
    margin:0;
    padding:0;
    width:100%;
    list-style:none;
}
.news-ticker .mobile-nav li{
    width:100%;
    margin:0;
    padding:0;
    border-bottom:1px solid rgba(255,255,255,0.15);
}
.news-ticker .mobile-nav li:last-child{
    border-bottom:none;
}
.news-ticker .mobile-nav a,
.news-ticker .mobile-nav .menu-item > a,
.news-ticker .mobile-nav li a,
.news-ticker .mobile-nav ul li a{
    display:block;
    width:100%;
    background:var(--card);
    color:var(--fg) !important;
    opacity:1 !important;
    visibility:visible !important;
    text-decoration:none;
    padding:0.85rem 1rem;
    font-size:1rem;
    line-height:1.5;
    font-weight:500;
}
.news-ticker .mobile-nav a:hover,
.news-ticker .mobile-nav a:focus,
.news-ticker .mobile-nav .current-menu-item > a,
.news-ticker .mobile-nav .current_page_item > a,
.news-ticker .mobile-nav .current-menu-ancestor > a,
.news-ticker .mobile-nav .current-menu-parent > a{
    background:var(--primary-dark) !important;
    color:var(--primary-fg) !important;
}
.news-ticker .mobile-nav .sub-menu a,
.news-ticker .mobile-nav ul.children a,
.news-ticker .mobile-nav li ul a{
    background:var(--muted);
    color:var(--fg) !important;
    font-size:0.92rem;
    padding-inline-start:1.5rem;
}
.news-ticker .mobile-nav .menu-item-has-children > a::after{
    color:var(--muted-fg);
}


/* ============ HERO ============ */
.hero{position:relative;overflow:hidden}
.hero-media{position:relative;height:70vh;min-height:480px;max-height:720px;width:100%;overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to left,rgba(21,70,39,.85),rgba(21,70,39,.6) 50%,rgba(31,107,59,.4))}
.hero-inner{position:relative;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-content{max-width:680px;color:var(--primary-fg);margin-inline:auto}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);border-radius:9999px;padding:.4rem 1rem;font-size:.75rem;margin-bottom:1.25rem;animation:khw-fade-up .6s ease-out both;animation-delay:.1s}
.hero-eyebrow .dot{width:.5rem;height:.5rem;border-radius:9999px;background:var(--gold)}
.hero-content h1{color:var(--primary-fg);margin-bottom:1rem;animation:khw-fade-up .7s ease-out both;animation-delay:.25s}
.hero-content h1 .accent{color:var(--gold)}
.hero-content p{color:rgba(255,255,255,.9);font-size:1.05rem;margin-bottom:2rem;line-height:1.7;animation:khw-fade-up .7s ease-out both;animation-delay:.4s}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;animation:khw-fade-up .7s ease-out both;animation-delay:.55s}

@keyframes khw-fade-up{
    from{opacity:0; transform:translateY(24px);}
    to{opacity:1; transform:translateY(0);}
}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius);font-weight:600;font-size:.9rem;transition:all .2s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--gold);color:var(--primary-dark)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:rgba(255,255,255,.1);backdrop-filter:blur(6px);border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:var(--primary-fg)}

/* ============ STATS STRIP ============ */
.stats-wrap{position:relative;margin-top:-3.5rem;z-index:10}
.stats{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr 1fr}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;border-inline-start:1px solid var(--border)}
.stat:first-child{border-inline-start:0}
@media(max-width:767px){
    .stat:nth-child(2n+1){border-inline-start:0}
    .stat:nth-child(n+3){border-top:1px solid var(--border)}
    .site-brand{margin:0 auto}
}
.stat-icon{width:2.75rem;height:2.75rem;border-radius:var(--radius);background:var(--accent);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-value{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--primary);line-height:1.2}
.stat-label{font-size:.8rem;color:var(--muted-fg);margin-top:2px}

/* ============ SECTION HEADING ============ */
.section-heading{margin-bottom:2.5rem}
.section-heading .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.06em}
.section-heading .eyebrow::before{content:"";width:2rem;height:1px;background:var(--gold)}
.section-heading h2{margin-top:.75rem}
.section-heading .row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* ============ GRID ============ */
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ============ CARDS ============ */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .2s}
.card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary)}
.card-body{padding:1.25rem}
.card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--muted));position:relative}
.card-media img,.card-media svg.khw-placeholder{width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block}
.card-media svg.khw-placeholder{object-fit:contain;padding:1rem}
.card:hover .card-media img{transform:scale(1.05)}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted-fg);margin-bottom:.5rem}
.badge{background:var(--accent);color:var(--primary);padding:.15rem .5rem;border-radius:.25rem;font-weight:600;font-size:.7rem}
.card h3{font-size:1rem;line-height:1.4;margin-bottom:.5rem;transition:color .2s}
.card:hover h3{color:var(--primary)}
.card .excerpt{color:var(--muted-fg);font-size:.85rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Service card */
.service-card{
    padding:1.25rem;
    text-align:right;
    animation:khw-card-in .6s ease-out both;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-icon{width:3rem;height:3rem;border-radius:var(--radius);background:var(--accent);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.35rem;transition:all .2s}
.service-card .service-icon{transition:transform .3s ease, background .25s ease, color .25s ease}
.service-card:hover .service-icon{
    background:var(--primary);
    color:var(--primary-fg);
    transform:scale(1.08) rotate(-4deg);
}
.service-card h3{font-size:.95rem;line-height:1.4;margin-bottom:.35rem}
.service-card .desc{font-size:.78rem;color:var(--muted-fg);line-height:1.55}

@keyframes khw-card-in{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
}
.service-card:nth-child(1){animation-delay:.05s}
.service-card:nth-child(2){animation-delay:.15s}
.service-card:nth-child(3){animation-delay:.25s}
.service-card:nth-child(4){animation-delay:.35s}
.service-card:nth-child(5){animation-delay:.45s}
.service-card:nth-child(6){animation-delay:.55s}
.service-card:nth-child(7){animation-delay:.65s}
.service-card:nth-child(8){animation-delay:.75s}
.service-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:var(--primary);
}
@media (prefers-reduced-motion: reduce){
    .service-card{animation:none;}
    .service-card:hover{transform:none;}
    .service-card:hover .service-icon{transform:none;}
}

/* Commune card */
.commune-card{padding:1.25rem}
.commune-card .name{font-family:var(--font-display);font-weight:700;color:var(--primary);font-size:1.05rem;margin-bottom:.35rem}
.commune-card .daira{font-size:.8rem;color:var(--muted-fg);margin-bottom:.75rem}
.commune-card .meta{display:flex;gap:1rem;font-size:.75rem;color:var(--muted-fg);border-top:1px solid var(--border);padding-top:.75rem;margin-top:.75rem}

/* ============ SECTIONS BG ============ */
.bg-muted{background:var(--muted)}
.bg-accent{background:var(--accent)}

/* ============ LINK ARROW ============ */
.link-more{display:inline-flex;align-items:center;gap:.35rem;font-size:.875rem;font-weight:600;color:var(--primary)}
.link-more:hover{color:var(--primary-dark)}
.link-more::after{content:"←";transition:transform .2s}
.link-more:hover::after{transform:translateX(-3px)}

/* ============ PAGE HEADER ============ */
.page-header{background:linear-gradient(to left,var(--primary-dark),var(--primary));color:var(--primary-fg);padding:3rem 0}
.page-header h1{color:var(--primary-fg);margin-bottom:.5rem}
.page-header .breadcrumb{font-size:.8rem;opacity:.85}
.page-header .breadcrumb a{color:var(--gold)}

/* ============ CONTENT ============ */
.entry-content{max-width:800px;margin:0 auto}
.entry-content p{margin-bottom:1.15rem;line-height:1.8}
.entry-content h2{margin:2rem 0 1rem}
.entry-content h3{margin:1.5rem 0 .75rem;font-size:1.15rem}
.entry-content ul,.entry-content ol{padding-inline-start:1.5rem;margin-bottom:1.15rem}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content ul ul{list-style:circle}
.entry-content li{list-style:inherit}
.entry-content li{margin-bottom:.35rem}
.entry-content img{border-radius:var(--radius);margin:1.25rem 0}
.entry-content blockquote{border-inline-start:4px solid var(--gold);padding:.5rem 1rem;background:var(--muted);margin:1.25rem 0;font-style:italic}
.entry-content a{color:var(--primary);text-decoration:underline}
.entry-content .wp-block-image{margin:1.5rem 0}

.entry-header{margin-bottom:2rem}
.entry-header .meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:.8rem;color:var(--muted-fg);margin-top:.75rem}

/* ============ FEATURES LIST ============ */
.feature-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
.feature-list li{display:flex;align-items:center;gap:.75rem;font-size:.9rem}
.feature-list li::before{content:"";width:.35rem;height:.35rem;border-radius:9999px;background:var(--gold);flex-shrink:0}

.two-col{display:grid;gap:2.5rem;align-items:center}
@media(min-width:1024px){.two-col{grid-template-columns:1fr 1fr}}
.image-collage{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.image-collage img{border-radius:var(--radius-lg);width:100%;object-fit:cover}
.image-collage .tall{grid-row:span 2;height:100%;min-height:16rem}
.image-collage .small{height:8rem}

/* ============ CONTACT FORM ============ */
.contact-grid{display:grid;gap:2rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:2fr 1fr}}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.65rem .85rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);font:inherit;font-size:.9rem;color:var(--fg)}
.form-group input:focus,.form-group textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.info-list{display:flex;flex-direction:column;gap:1rem}
.info-item{display:flex;gap:.75rem;font-size:.9rem;align-items:flex-start}
.info-item .icon{width:2.25rem;height:2.25rem;border-radius:var(--radius);background:var(--accent);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ============ PAGINATION ============ */
.pagination{display:flex;justify-content:center;gap:.35rem;margin-top:2.5rem;flex-wrap:wrap}
.pagination a,.pagination span{padding:.5rem .85rem;border-radius:var(--radius);border:1px solid var(--border);font-size:.85rem;background:var(--card)}
.pagination .current{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.pagination a:hover{background:var(--accent);color:var(--primary)}

/* ============ FOOTER ============ */
.site-footer{margin-top:4rem;background:var(--primary-dark);color:var(--primary-fg)}
.site-footer a{opacity:.85}
.site-footer a:hover{opacity:1;color:var(--gold)}
.footer-cols{display:grid;gap:2.5rem;padding:3rem 0}
@media(min-width:768px){.footer-cols{grid-template-columns:repeat(4,1fr)}}
.footer-col h4{color:var(--gold);font-size:.95rem;margin-bottom:1rem}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.footer-col p{color:rgba(255,255,255,.85);font-size:.875rem;line-height:1.7}
.footer-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.footer-brand img{width:48px;height:48px;background:rgba(255,255,255,.1);border-radius:9999px;padding:.25rem}
.footer-brand .name{font-family:var(--font-display);font-weight:700}
.footer-brand .sub{font-size:.75rem;opacity:.8}
.footer-info li{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem}
.footer-info .icon{color:var(--gold);flex-shrink:0;margin-top:2px}
.site-bottom{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:1rem 0;font-size:.75rem;opacity:.75}

/* ============ UTIL ============ */
.text-primary{color:var(--primary)}
.text-gold{color:var(--gold)}
.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}
.mb-4{margin-bottom:1rem}
.screen-reader-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============ WP CORE ALIGN ============ */
.alignleft{float:right;margin:0 0 1rem 1.5rem}
.alignright{float:left;margin:0 1.5rem 1rem 0}
.aligncenter{display:block;margin-inline:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.8rem;color:var(--muted-fg);text-align:center;margin-top:.35rem}

/* ============ NEWS TICKER ============ */
.news-ticker{
    position:relative;
    top:0;
    z-index:1000;
    background:var(--primary-dark);
    color:var(--primary-fg);
    border-bottom:1px solid rgba(255,255,255,.1);
}
.news-ticker .container{
    display:flex;
    align-items:center;
    gap:1rem;
    padding-block:.5rem;
}
.news-ticker-label{
    flex-shrink:0;
    background:var(--gold);
    color:var(--primary-dark);
    font-size:.7rem;
    font-weight:700;
    padding:.25rem .75rem;
    border-radius:9999px;
}
.news-ticker-track{
    flex:1;
    overflow:hidden;
    position:relative;
    -webkit-mask-image:linear-gradient(to left, transparent, #000 5%, #000 95%, transparent);
    mask-image:linear-gradient(to left, transparent, #000 5%, #000 95%, transparent);
}
.news-ticker-content{
    display:flex;
    gap:2rem;
    white-space:nowrap;
    width:max-content;
    animation:khw-ticker-scroll 40s linear infinite;
}
.news-ticker-content > span{
    display:inline-flex;
    gap:2rem;
    flex-shrink:0;
}
.news-ticker-content a{
    font-size:.8rem;
    opacity:.95;
    transition:opacity .2s;
}
.news-ticker-content a:hover{
    color:var(--gold);
    opacity:1;
}
.news-ticker:hover .news-ticker-content{
    animation-play-state:paused;
}
@keyframes khw-ticker-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(50%);}
}
@media (prefers-reduced-motion: reduce){
    .news-ticker-content{animation:none;}
}

/* ============ NEWS SLIDER ============ */
.news-slider{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/8;background:var(--muted);}
.news-slider-track{position:relative;width:100%;height:100%;}
.news-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .6s ease;z-index:1;}
.news-slide.active{opacity:1;visibility:visible;z-index:2;}
.news-slide img,.news-slide svg.khw-placeholder{width:100%;height:100%;object-fit:cover;}
.news-slide-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(21,70,39,.9) 0%,rgba(21,70,39,.55) 35%,transparent 65%);}
.news-slide-caption{position:absolute;right:0;bottom:0;left:0;padding:2rem;color:var(--primary-fg);}
.news-slide-caption .badge{background:var(--gold);color:var(--primary-dark);margin-bottom:.75rem;display:inline-block;}
.news-slide-caption h3{color:var(--primary-fg);font-size:clamp(1.1rem,2.5vw,1.6rem);margin:0;max-width:70%;}
@media(max-width:640px){.news-slide-caption h3{max-width:100%}}
.news-slider-arrow{position:absolute;top:1rem;z-index:5;width:2.5rem;height:2.5rem;border-radius:9999px;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);color:#fff;font-size:1.4rem;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.news-slider-arrow:hover{background:rgba(255,255,255,.3)}
.news-slider-arrow.prev{left:1rem}
.news-slider-arrow.next{left:4rem}
.news-slider-dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:.4rem;}
.news-slider-dot{width:2rem;height:2rem;border-radius:.35rem;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);color:#fff;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.news-slider-dot:hover{background:rgba(255,255,255,.3)}
.news-slider-dot.active{background:var(--gold);color:var(--primary-dark)}

/* ============================================================
   IMPORTANT LINKS TICKER
   ============================================================ */
.links-ticker{
    background:#fff;
    border-top:1px solid #e5e7eb;
    border-bottom:1px solid #e5e7eb;
    padding:10px 0;
}
.links-ticker .container{
    display:flex;
    align-items:center;
    gap:1rem;
}
.links-ticker .news-ticker-label{
    flex-shrink:0;
    background:var(--primary);
    color:#fff;
    padding:.45rem .9rem;
    border-radius:6px;
    font-weight:700;
}
.links-ticker-track{
    overflow:hidden;
    width:100%;
    position:relative;
}
.links-ticker-content{
    display:flex;
    align-items:center;
    gap:2.5rem;
    width:max-content;
    white-space:nowrap;
    animation:links-scroll 18s linear infinite;
}
.links-ticker-content a{
    color:#0056b3 !important;
    text-decoration:none;
    font-size:1.08rem;
    font-weight:700;
    transition:color .25s;
}
.links-ticker-content a:hover{
    color:#d62828 !important;
}
/* يتوقف عند مرور الفأرة */
.links-ticker-content:hover{
    animation-play-state:paused;
}
@keyframes links-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(50%); }
}

/* ============================================================
   FIXES — أضيفت لحل مشكلتين
   1) إزالة الفراغ الأبيض فوق شريط الأخبار في وضع الموبايل
      (الهيدر الرئيسي يُخفى كلياً لأن الشعار غير مرفوع
       والنصوص العربية/الفرنسية مخفية أصلاً على الموبايل)
   2) ضمان ظهور قائمة الهامبرغر فوق باقي العناصر عند النقر
   ============================================================ */

/* =========================================================
   Mobile header simplification (v3.1)
   Matches actual markup: .topbar / .header-main / .news-ticker
   ========================================================= */
@media screen and (max-width:1023.98px) {

  /* 1. إخفاء كتلة الشعار الكبيرة (شعار + عنوان عربي/فرنسي)
        هذا هو مصدر الفراغ الأبيض الذي كان يظهر سابقاً */
  .header-main { display: none !important; }

  /* 2. الشريط العلوي: خلفية بيضاء، نص الجمهورية في المنتصف فقط */
  .site-header,
  .site-header .topbar {
    background: #ffffff !important;
    color: #0d1b2a !important;
    padding: 0.75rem 1rem !important;
  }

  .site-header .topbar .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  /* 3. إظهار نص اسم الجمهورية بالقوة (القالب يخفيه أصلاً بـ .hidden-sm) */
  .site-header .topbar .container > span,
  .site-header .topbar .hidden-sm {
    background: white;
    display: block !important;
    width: 100%;
    text-align: center !important;
    color: #0d1b2a !important;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 auto;
  }

  /* 4. إخفاء مبدّل اللغة والهاتف والبريد (قسم الفلكس الأيمن) */
  .site-header .topbar .container > div,
  .site-header .topbar .lang-switcher,
  .site-header .topbar a[href^="tel:"],
  .site-header .topbar a[href^="mailto:"] {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  .site-header .topbar .container > span,
  .site-header .topbar .hidden-sm { font-size: 0.85rem; }
}

/* =========================================================
   Khenchela Wilaya — Dropdown submenus (v4)
   Append to style.css (matches classes in your uploaded style_4.css:
   .main-nav, .desktop-nav-bar, .news-ticker .mobile-nav)
   ========================================================= */

/* ---------- Common: positioning context ---------- */
.main-nav li,
.desktop-nav-bar li {
  position: relative;
}

/* Indicator arrow for parents */
.main-nav .menu-item-has-children > a::after,
.desktop-nav-bar .menu-item-has-children > a::after {
  content: " ▾";
  font-size: 0.75em;
  margin-inline-start: 4px;
  opacity: 0.85;
}

/* ---------- Desktop dropdown (hover + focus) ---------- */
@media (min-width: 1024px) {

  .main-nav .sub-menu,
  .main-nav ul.children,
  .desktop-nav-bar .sub-menu,
  .desktop-nav-bar ul.children,
  .desktop-nav-bar li ul {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 240px;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--primary-dark, #154627);
    border-top: 3px solid var(--gold, #d4a537);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,.25);
    padding: .35rem 0;
    margin: 0;
    list-style: none;
    width: auto;

    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 10000;
  }

  .main-nav li:hover        > .sub-menu,
  .main-nav li:hover        > ul.children,
  .main-nav li:focus-within > .sub-menu,
  .main-nav li:focus-within > ul.children,
  .desktop-nav-bar li:hover        > .sub-menu,
  .desktop-nav-bar li:hover        > ul.children,
  .desktop-nav-bar li:hover        > ul,
  .desktop-nav-bar li:focus-within > .sub-menu,
  .desktop-nav-bar li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Submenu links — override the flex "menu bar" look */
  .main-nav .sub-menu li,
  .main-nav ul.children li,
  .desktop-nav-bar .sub-menu li,
  .desktop-nav-bar ul.children li,
  .desktop-nav-bar li ul li {
    display: block !important;
    width: 100%;
  }

  .main-nav .sub-menu a,
  .main-nav ul.children a,
  .desktop-nav-bar .sub-menu a,
  .desktop-nav-bar ul.children a,
  .desktop-nav-bar li ul a {
    display: block !important;
    padding: .65rem 1rem !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    font-size: .9rem;
    font-weight: 500;
    white-space: normal;
    text-align: start;
  }
  .main-nav .sub-menu a:hover,
  .main-nav ul.children a:hover,
  .desktop-nav-bar .sub-menu a:hover,
  .desktop-nav-bar ul.children a:hover,
  .desktop-nav-bar li ul a:hover {
    background: rgba(255,255,255,.12) !important;
    color: var(--gold, #d4a537) !important;
  }

  /* 3rd level: open to the side (RTL → to the left) */
  .main-nav .sub-menu .sub-menu,
  .main-nav ul.children ul.children,
  .desktop-nav-bar .sub-menu .sub-menu,
  .desktop-nav-bar ul.children ul.children,
  .desktop-nav-bar li ul ul {
    top: 0;
    right: 100%;
    left: auto;
    margin-right: 2px;
    border-top: 0;
    border-inline-end: 3px solid var(--gold, #d4a537);
  }
}

/* ---------- Mobile: submenus collapsed, toggle on tap ---------- */
@media (max-width:1023.98px) {
  .mobile-nav .menu-item-has-children { position: relative;padding-inline-end: 3rem;}

  /* سهم قابل للنقر لفتح/إغلاق القائمة الفرعية */
  .mobile-nav .menu-item-has-children > a::after {
    content: "▾";
    position: absolute;
    inset-inline-end: .75rem;
    top: .75rem;
    font-size: .9em;
    padding: .25rem .5rem;
    transition: transform .2s ease;
    opacity: .9;
  }
  .mobile-nav .menu-item-has-children.open > a::after {
    transform: rotate(180deg);
  }

  .mobile-nav .sub-menu,
  .mobile-nav ul.children,
  .mobile-nav li ul {
    position: static !important;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(0,0,0,.15);
    box-shadow: none;
    border: 0;
    padding: 0 0 0 1rem;
    margin: 0;
    min-width: 0;
    list-style: none;
  }

  .mobile-nav .menu-item-has-children.open > .sub-menu,
  .mobile-nav .menu-item-has-children.open > ul.children,
  .mobile-nav .menu-item-has-children.open > ul {
    display: block;
  }

  .mobile-nav .sub-menu a,
  .mobile-nav ul.children a,
  .mobile-nav li ul a {
    padding: .65rem .85rem;
    font-size: .9rem;
    white-space: normal;
  }
}

/* ============================================================
   TICKER SEARCH — أيقونة بحث على يسار شريط "آخر الأخبار"
   (بدون أي اعتماد على main.js — checkbox/label بالكامل بـ CSS)
   ============================================================ */
.ticker-search{
    display:flex;
    align-items:center;
    flex-shrink:0;
    margin:0;
}
.ticker-search-toggle-input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.ticker-search-field{
    width:0;
    min-width:0;
    opacity:0;
    padding:0;
    margin-inline-end:0;
    border:0;
    border-radius:9999px;
    background:rgba(255,255,255,.95);
    color:var(--fg);
    font-size:.8rem;
    font-family:inherit;
    transition:width .25s ease, opacity .2s ease, padding .25s ease, margin .25s ease;
}
.ticker-search-field::placeholder{ color:var(--muted-fg) }
.ticker-search-field:focus{ outline:2px solid var(--gold); outline-offset:1px }
.ticker-search-toggle-input:checked ~ .ticker-search-field{
    width:11rem;
    max-width:35vw;
    opacity:1;
    padding:.35rem .9rem;
    margin-inline-end:.5rem;
}
.ticker-search-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:2rem;
    height:2rem;
    border-radius:9999px;
    background:rgba(255,255,255,.12);
    font-size:.9rem;
    cursor:pointer;
    transition:background .2s;
}
.ticker-search-icon:hover{ background:rgba(255,255,255,.25) }
.ticker-search-toggle-input:checked ~ .ticker-search-icon{
    background:var(--gold);
}
@media(max-width:480px){
    .ticker-search-toggle-input:checked ~ .ticker-search-field{ width:7.5rem }
}
/* ============ SCROLL TO TOP ============ */
.scroll-top-right{
    position:fixed;
    left:1.25rem;
    bottom:1.25rem;
    width:44px;
    height:44px;
    border-radius:9999px;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.35rem;
    box-shadow:var(--shadow-lg);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .25s, transform .25s, visibility .25s, background .2s;
    z-index:998;
}
.scroll-top-right.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.scroll-top-right:hover{
    background:var(--primary-dark);
}
/* ============ RADIO + WEATHER STRIP ============ */
.radio-weather-strip{
    background:var(--muted);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:1rem 0;
}
.radio-weather-inner{
    direction:ltr; /* يفرض راديو=يسار وطقس=يمين بغض النظر عن اتجاه الموقع RTL */
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
}
.khw-radio-box{display:flex;align-items:center;gap:.75rem}
.khw-radio-label{font-weight:700;color:var(--primary);font-size:.9rem;white-space:nowrap}
#khwRadioPlayer.green-audio-player{max-width:300px}

.khw-weather-box{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--fg)}
.khw-weather-icon{font-size:1.4rem}
.khw-weather-temp{font-weight:700;color:var(--primary);font-size:1.1rem}
.khw-weather-desc{color:var(--muted-fg)}
.khw-weather-city{font-weight:600}
.khw-col-title{
    font-weight:700;
    color:var(--primary);
    font-size:.85rem;
    margin-bottom:.5rem;
}
.khw-radio-col,.khw-weather-col{
    display:flex;
    flex-direction:column;
}
#khwRadioPlayer .controls__total-time{display:none}

@media(max-width:640px){
    .radio-weather-inner{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:1.75rem;
    }
    .khw-radio-col,.khw-weather-col{
        align-items:center;
        width:100%;
    }
    .khw-radio-box,.khw-weather-box{
        justify-content:center;
        flex-wrap:wrap;
    }
    #khwRadioPlayer.green-audio-player{
        max-width:100%;
        width:100%;
    }
}
/* ============================================================
   TOURIST PLACES SECTION (khw_place)
   ============================================================ */

.places-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(31,107,59,.08), transparent 60%),
    radial-gradient(900px 400px at -10% 110%, rgba(212,165,55,.10), transparent 60%),
    var(--bg);
}
.places-bg-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.places-bg-deco .deco-shape{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;
  animation:placesFloat 14s ease-in-out infinite;
}
.places-bg-deco .s1{width:280px;height:280px;background:var(--primary);top:-60px;left:-40px;animation-delay:-2s}
.places-bg-deco .s2{width:220px;height:220px;background:var(--gold);bottom:-60px;right:10%;animation-delay:-6s}
.places-bg-deco .s3{width:180px;height:180px;background:var(--primary-dark);top:40%;right:-40px;animation-delay:-10s}
@keyframes placesFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,-25px) scale(1.08)}
}

.places-section .container{position:relative;z-index:1}

/* Bento asymmetric grid */
.places-grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px;
}
@media (max-width:1023.98px){.places-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}}
@media (max-width:560px){.places-grid{grid-template-columns:1fr;grid-auto-rows:220px}}

/* Card base */
.place-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow);
  color:var(--primary-fg);
  isolation:isolate;
  transform:translateY(30px) scale(.96);
  opacity:0;
  animation:placeReveal .8s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--i,1) * 90ms);
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .4s;
  will-change:transform;
}
@keyframes placeReveal{
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Bento sizes — every 5th pattern */
.place-card--1{grid-column:span 2;grid-row:span 2}
.place-card--2{grid-column:span 2;grid-row:span 1}
.place-card--3{grid-column:span 1;grid-row:span 1}
.place-card--4{grid-column:span 1;grid-row:span 2}
.place-card--0{grid-column:span 2;grid-row:span 1}
@media (max-width:1023.98px){
  .place-card--1,.place-card--2,.place-card--3,.place-card--4,.place-card--0{
    grid-column:span 1;grid-row:span 1;
  }
  .place-card--1{grid-column:span 2}
}
@media (max-width:560px){
  .place-card--1{grid-column:span 1}
}

/* Media layer */
.place-card-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.place-card-media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);
  transition:transform 1.2s ease;
  animation:kenBurns 18s ease-in-out infinite alternate;
}
.place-card-fallback{
  width:100%;height:100%;display:grid;place-items:center;
  font-size:4rem;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
}
@keyframes kenBurns{
  0%{transform:scale(1.08) translate(0,0)}
  100%{transform:scale(1.18) translate(-2%,-2%)}
}

/* Dark gradient overlay */
.place-card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(20,40,30,.92) 0%, rgba(20,40,30,.55) 45%, rgba(20,40,30,.05) 100%);
  z-index:1;transition:opacity .4s;
}

/* Gold shine sweep */
.place-card-shine{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(212,165,55,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s cubic-bezier(.22,1,.36,1);
}

/* Body */
.place-card-body{
  position:relative;z-index:3;
  padding:1.25rem 1.35rem 1.35rem;
  color:#fff;
  transform:translateY(8px);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.place-card-cat{
  display:inline-block;
  font-size:.72rem;font-weight:700;
  padding:.3rem .6rem;border-radius:999px;
  background:rgba(212,165,55,.9);color:#1a2b20;
  margin-bottom:.6rem;
  letter-spacing:.02em;
}
.place-card-title{
  color:#fff;font-size:1.15rem;line-height:1.35;margin-bottom:.4rem;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.place-card--1 .place-card-title{font-size:1.5rem}
.place-card-desc{
  color:rgba(255,255,255,.85);
  font-size:.85rem;line-height:1.55;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s ease, opacity .4s ease, margin .4s ease;
  margin:0;
}
.place-card-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.6rem;
  font-weight:700;font-size:.85rem;color:var(--gold);
  opacity:.9;transition:gap .3s, color .3s;
}
.place-card-cta .arrow{transition:transform .4s}

/* Hover state */
.place-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 20px 40px -15px rgba(31,107,59,.35), 0 0 0 2px var(--gold);
}
.place-card:hover .place-card-media img{transform:scale(1.22)}
.place-card:hover .place-card-media::after{opacity:.85}
.place-card:hover .place-card-shine{transform:translateX(120%)}
.place-card:hover .place-card-body{transform:translateY(0)}
.place-card:hover .place-card-desc{
  max-height:80px;opacity:1;margin-top:.3rem;
}
.place-card:hover .place-card-cta{color:#fff}
.place-card:hover .place-card-cta .arrow{transform:translateX(-6px)}

/* Focus accessibility */
.place-card:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--gold), var(--shadow-lg);
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .place-card,.place-card-media img,.places-bg-deco .deco-shape{
    animation:none!important;transition:none!important;
    opacity:1!important;transform:none!important;
  }
}
/* ============ إخفاء الشريط العلوي في الديسكتوب فقط ============ */
@media screen and (min-width:1024px) {
  .site-header .topbar { display: none !important; }
}

/* ===== الهيدر الرئيسي (ديسكتوب) ===== */
@media screen and (min-width:1024px) {

  /* تقليل الفراغ الجانبي: العناصر تتجمع في المنتصف */
  .site-header .header-main {
    min-height: 143px;
    padding-block: 12px;
  }
  .site-header .header-main .container {
    max-width: 1100px;
  }

  /* بدل 1fr auto 1fr (اللي يسبب الفراغ) → أعمدة بحسب المحتوى ومتوسطة */
  .site-header .site-brand {
    grid-template-columns: auto auto auto !important;
    justify-content: center !important;
    gap: 2.5rem !important;
    width: auto !important;
  }

  /* توسيط كل سطر */
  .site-header .brand-side,
  .site-header .brand-right,
  .site-header .brand-left {
    justify-self: center !important;
    text-align: center !important;
    align-items: center !important;
  }

  /* الشعار */
  .site-header .brand-logo img,
  .site-header .brand-logo svg {
    width: auto !important;
    height: 110px !important;
  }

  /* الأسطر العربية */
  .site-header .brand-right .brand-top {      /* الجمهورية الجزائرية الديمقراطية الشعبية */
    font-size: 26px !important;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px !important;
    white-space: nowrap;
  }
  .site-header .brand-right .brand-bottom {   /* ولاية خنشلة */
    font-size: 30px !important;
    font-weight: 700;
    white-space: nowrap;
  }

  /* الأسطر الفرنسية */
  .site-header .brand-left .brand-top {
    font-size: 19px !important;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px !important;
  }
  .site-header .brand-left .brand-bottom {
    font-size: 22px !important;
    font-weight: 700;
  }
}

/* شاشات 1025–1300: تصغير بسيط حتى لا ينكسر السطر */
@media screen and (min-width:1024px) and (max-width:1300px) {
 /* .site-header .site-brand { gap: 1.25rem !important; }*/
  .site-header .brand-right .brand-top { font-size: 21px !important; }
  .site-header .brand-right .brand-bottom { font-size: 24px !important; }
  .site-header .brand-left .brand-top { font-size: 21px !important; }
  .site-header .brand-left .brand-bottom { font-size: 24px !important; }
  .site-header .brand-logo img { height: 92px !important; }
}
.two-col.about-full { grid-template-columns: 1fr; }
/* =========================================================
   Khenchela Wilaya — Desktop nav bar (v5)
   تتجاوز القواعد القديمة في الأسطر ~190-232 و ~712+
   ========================================================= */

@media (min-width: 1024px) {

  /* ---------- الشريط ---------- */
  .desktop-nav-bar {
    display: block;
    background: var(--primary);
    border-bottom: 3px solid var(--gold, #d4a537);
    position: relative;
    z-index: 1100;
  }

  .desktop-nav-bar .container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;          /* لا انكسار إلى سطر ثانٍ */
    min-width: 0;

    /* أمان الانضغاط: التمرير الأفقي هنا لا على الـ ul،
       حتى لا تُقصّ القوائم المنسدلة عمودياً */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }

  .desktop-nav-bar .container::-webkit-scrollbar { height: 0; display: none; }

  /* ---------- قائمة العناصر ---------- */
  .desktop-nav-bar ul {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;

    /* بلا overflow هنا إطلاقاً: أي قيمة غير visible على هذا الـ ul
       تُجبر overflow-y على auto/clip فتُقصّ القوائم المنسدلة.
       التمرير الأفقي انتقل إلى .desktop-nav-bar .container أعلاه. */
    overflow: visible;
  }

  .desktop-nav-bar li {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    position: relative;
  }

  /* ---------- الروابط: حشو وخط مرنان ---------- */
  .desktop-nav-bar a,
  .desktop-nav-bar .menu-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .85rem clamp(.55rem, 1.4vw, 1.6rem);
    font-size: clamp(.78rem, .92vw, .9rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary-fg, #fff);
    white-space: nowrap;
    border-inline-start: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;        /* يجعل الخط الذهبي يلامس حدّ الشريط */
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }

  /* إلغاء الفاصل على الطرفين */
  .desktop-nav-bar li:first-child > a,
  .desktop-nav-bar li:last-child  > a { border-inline-start: 0; }
  .desktop-nav-bar li:last-child  > a { border-inline-end: 0; }

  /* ---------- حالات التفاعل والصفحة الحالية ---------- */
  .desktop-nav-bar a:hover,
  .desktop-nav-bar a:focus-visible {
    background: var(--primary-dark, #154627);
    color: var(--gold, #d4a537);
  }

  .desktop-nav-bar .current-menu-item > a,
  .desktop-nav-bar .current_page_item > a,
  .desktop-nav-bar .current-menu-ancestor > a,
  .desktop-nav-bar .current-menu-parent > a {
    background: var(--primary-dark, #154627);
    color: var(--gold, #d4a537);
    border-bottom-color: var(--gold, #d4a537);
  }

  /* ---------- نقطة تحوّل وسطية 1024 - 1200 ---------- */
  @media (max-width: 1199px) {
    .desktop-nav-bar a,
    .desktop-nav-bar .menu-item > a {
      padding-inline: clamp(.4rem, 1vw, .8rem);
      font-size: .8rem;
      min-height: 42px;
    }
  }

  /* ---------- القوائم المنسدلة ---------- */
  .desktop-nav-bar .sub-menu,
  .desktop-nav-bar ul.children,
  .desktop-nav-bar li ul {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 240px;
    width: max-content;
    max-width: min(320px, 90vw);
    overflow: visible;
    z-index: 10000;
  }

  /* آخر عنصرين: اقلب اتجاه القائمة الفرعية حتى لا تخرج عن الشاشة */
  .desktop-nav-bar > .container > ul > li:nth-last-child(1) > .sub-menu,
  .desktop-nav-bar > .container > ul > li:nth-last-child(1) > ul,
  .desktop-nav-bar > .container > ul > li:nth-last-child(2) > .sub-menu,
  .desktop-nav-bar > .container > ul > li:nth-last-child(2) > ul {
    right: auto;
    left: 0;
  }

  .desktop-nav-bar .sub-menu a,
  .desktop-nav-bar ul.children a,
  .desktop-nav-bar li ul a {
    justify-content: flex-start;
    min-height: 0;
    margin-bottom: 0;
    border-bottom: 0 !important;
    white-space: normal !important;
    font-size: .88rem !important;
    padding: .65rem 1rem !important;
  }

  /* الأسهم الدالة على وجود قائمة فرعية */
  .desktop-nav-bar .menu-item-has-children > a::after {
    content: "▾";
    font-size: .7em;
    margin-inline-start: 4px;
    opacity: .8;
    flex: 0 0 auto;
  }
}

/* Facebook embeded */
.khw-fb-embed,
.khw-embed {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 1.75rem auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  direction: ltr; /* iframe فيسبوك يُقاس بشكل أدق بهذا */
}

.khw-fb-embed iframe,
.khw-embed iframe {
  display: block;
  width: 100% !important;
  min-height: 420px;
  border: 0;
  background: #fff;
}

/* حالة التحميل: هيكل عظمي خفيف بدل مساحة بيضاء فارغة */
.khw-fb-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #f3f4f6 30%, #e9ebef 50%, #f3f4f6 70%);
  background-size: 200% 100%;
  animation: khwEmbedShimmer 1.4s linear infinite;
  z-index: 0;
}
.khw-fb-embed iframe {
  position: relative;
  z-index: 1;
}
@keyframes khwEmbedShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* منشور فيديو أو صور كثيرة يحتاج ارتفاعًا أكبر */
@media (min-width: 768px) {
  .khw-fb-embed iframe { min-height: 560px; }
}

/* الجوال: بلا حواف زائدة */
@media (max-width: 480px) {
  .khw-fb-embed,
  .khw-embed {
    max-width: 100%;
    border-radius: 10px;
    margin: 1.25rem 0;
  }
  .khw-fb-embed iframe { min-height: 480px; }
}

/* منع أي iframe قديم من كسر التخطيط */
.entry-content iframe,
.khw-article-body iframe {
  max-width: 100%;
}

/* =========================================================
   Khenchela Wilaya — Hero background slideshow (v2)
   ========================================================= */

/* الحاوية الأساسية (تأكيد حتى لو غيّرت قواعد قديمة) */
.hero{position:relative;overflow:hidden}
.hero .hero-media{position:relative;height:70vh;min-height:480px;max-height:720px;width:100%;overflow:hidden}

/* حاوية الصور: دائماً في الخلف */
.hero .hero-media .khw-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;            /* الخلف دائماً */
  overflow:hidden;
  background:#154627;
}

.hero .hero-media .khw-hero-bg .khw-hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  z-index:0;            /* لا ترفع الصورة فوق النص */
  transform:scale(1.06);
  transition:opacity 1.2s ease, transform 8s ease-out;
  will-change:opacity, transform;
}

.hero .hero-media .khw-hero-bg .khw-hero-slide.is-active{
  opacity:1;
  transform:scale(1);
  z-index:1;            /* داخل حاوية الصور فقط */
}

/* صورة واحدة: بلا حركة إطلاقاً */
.hero .hero-media .khw-hero-bg.is-static .khw-hero-slide{
  opacity:1;
  transform:none;
  transition:none;
}

/* ---------- الطبقة اللونية والنص: فوق الصور دائماً ---------- */
.hero .hero-media > .hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(to left,rgba(21,70,39,.85),rgba(21,70,39,.6) 50%,rgba(31,107,59,.4));
  pointer-events:none;
}

.hero .hero-media > .hero-inner{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero .hero-media > .hero-inner .hero-content{position:relative;z-index:4}

/* ---------- نقاط التنقل ---------- */
.hero .hero-media .khw-hero-dots{
  position:absolute;
  inset-inline:0;
  bottom:1.1rem;
  z-index:5;            /* فوق كل شيء لتبقى قابلة للنقر */
  display:flex;
  justify-content:center;
  gap:.5rem;
  padding:0 1rem;
  flex-wrap:wrap;
}

.hero .hero-media .khw-hero-dot{
  width:.6rem;
  height:.6rem;
  padding:0;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.25);
  cursor:pointer;
  transition:background .25s ease, width .25s ease, border-color .25s ease;
}

.hero .hero-media .khw-hero-dot.is-active{
  width:1.6rem;
  background:var(--gold,#d4a537);
  border-color:var(--gold,#d4a537);
}

.hero .hero-media .khw-hero-dot:focus-visible{
  outline:2px solid var(--gold,#d4a537);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .hero .hero-media .khw-hero-bg .khw-hero-slide{transition:opacity .4s linear;transform:none}
}

/* =========================================================
   إصلاح: overflow-x على .desktop-nav-bar .container يقصّ
   القوائم المنسدلة عمودياً.
   ========================================================= */
@media (min-width:1024px){
  .desktop-nav-bar .container{
    overflow:visible;
  }

.brand-banner { display: none; }

@media (min-width: 1024px) {
    .brand-banner {
        display: block;
        width: 100%;
        line-height: 0;
    }
  .brand-banner img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

    /* إخفاء الترويسة النصية في الديسكتوب */
    .header-main .site-brand { display: none !important; }
    .header-main .container { padding-left: 0; padding-right: 0; }
}