/*
Theme Name: Mwaq3na
Theme URI: https://mwaq3na.com
Author: mwaq3na
Description: ثيم مخصص لموقع مواقعنا - دليل تفاعلي للأدوات والمواقع المفيدة مع خلط عشوائي وفلترة فورية.
Version: 1.0.0
Text Domain: mwaq3na
*/

/* ============ Tokens ============ */
:root{
  --ink: #0A0C12;
  --ink-2: #12141C;
  --ink-3: #171A24;
  --glass: rgba(255,255,255,.045);
  --glass-strong: rgba(255,255,255,.075);
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --text: #E9EAF0;
  --text-dim: #9AA0AE;
  --text-faint: #656B7A;
  --gold: #F2B84B;
  --gold-dim: rgba(242,184,75,.16);
  --teal: #59D9C5;
  --radius: 18px;
  --radius-sm: 12px;
  --ff-display: 'Cairo', system-ui, sans-serif;
  --ff-body: 'Tajawal', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', monospace;
  --container: 1280px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.7;
  direction: rtl;
}
.bg-fx{ position: fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.bg-fx .blob{ position:absolute; border-radius:50%; filter: blur(80px); mix-blend-mode: screen; will-change: transform; }
.bg-fx .blob-a{
  width:560px; height:560px; top:-14%; right:-10%; opacity:.4;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  animation: driftA 28s ease-in-out infinite alternate;
}
.bg-fx .blob-b{
  width:420px; height:420px; bottom:-16%; left:-10%; opacity:.24;
  background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
  animation: driftB 34s ease-in-out infinite alternate;
}
.bg-fx .blob-c{
  width:320px; height:320px; top:38%; left:58%; opacity:.16;
  background: radial-gradient(circle, var(--gold) 0%, transparent 72%);
  animation: driftC 22s ease-in-out infinite alternate;
}
.bg-fx .grain{
  position:absolute; inset:-25%; opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' fill='%23F2B84B'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@keyframes driftA{ from{ transform: translate(0,0) scale(1); } to{ transform: translate(-70px,50px) scale(1.15); } }
@keyframes driftB{ from{ transform: translate(0,0) scale(1); } to{ transform: translate(60px,-40px) scale(1.1); } }
@keyframes driftC{ from{ transform: translate(0,0); } to{ transform: translate(-50px,-60px); } }

@media (max-width: 700px){
  .bg-fx .blob{ animation: none; filter: blur(50px); }
  .bg-fx .blob-a{ width:280px; height:280px; opacity:.28; }
  .bg-fx .blob-b{ width:220px; height:220px; opacity:.16; }
  .bg-fx .blob-c{ display:none; }
  .bg-fx .grain{ opacity:.03; }
}

:root{ --header-h: 60px; --admin-h: 0px; }
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
::selection{ background: var(--gold-dim); color: var(--gold); }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap{ max-width: var(--container); margin-inline:auto; padding-inline: 24px; position: relative; z-index: 1; }

/* ============ Header ============ */
.site-header{
  position: sticky; top: var(--admin-h, 0px); z-index: 50;
  background: rgba(10,12,18,.92);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap{ display:flex; align-items:center; gap:18px; padding-block:14px; flex-wrap: nowrap; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--ff-display); font-weight:900; font-size: 1.25rem; color:var(--text); flex: 0 0 auto; }
.brand .dot{ width:10px; height:10px; border-radius:50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }

.header-right{ display:flex; align-items:center; gap:8px; flex: 0 0 auto; }
.header-search{ display:flex; align-items:center; }
.header-search input{
  background: var(--glass); border:1px solid var(--border); color:var(--text);
  border-radius:999px; padding:9px 16px; font-family: var(--ff-body); font-size:.9rem; width: 160px;
  transition: border-color .2s, width .2s;
}
.header-search input:focus{ border-color: var(--border-strong); width: 200px; }

/* ---- desktop: always-visible inline navbar, submenus open on hover ---- */
.nav-dropdown{ position:relative; flex: 1 1 auto; min-width:0; }
.menu-toggle{ display:none; }

.menu-panel{
  display:flex; position:static; background:transparent; border:none; box-shadow:none; padding:0;
  overflow:visible; max-height:none;
}
.menu-panel > ul{ display:flex; flex-wrap:wrap; gap:2px; list-style:none; margin:0; padding:0; }
.menu-panel > ul > li{ flex:0 0 auto; position:relative; }
.menu-panel > ul > li > a{ display:block; padding:9px 14px; border-radius:999px; font-size:.88rem; color:var(--text-dim); white-space:nowrap; transition: all .15s; }
.menu-panel > ul > li > a:hover{ background: var(--glass); color: var(--text); }
.menu-panel > ul > li.menu-item-has-children > a::after{ content:'▾'; font-size:.65em; margin-inline-start:6px; opacity:.55; position:relative; top:-1px; }

/* nested items: hover dropdown on desktop */
.menu-panel ul.sub-menu{
  display:none; position:absolute; top:100%; inset-inline-start:0; min-width:190px;
  background: var(--ink-2); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:8px; flex-direction:column; gap:2px; box-shadow: 0 24px 60px rgba(0,0,0,.5); z-index:70; margin:4px 0 0;
}
.menu-panel > ul > li:hover > ul.sub-menu,
.menu-panel > ul > li:focus-within > ul.sub-menu{ display:flex; }
.menu-panel ul.sub-menu li{ width:100%; }
.menu-panel ul.sub-menu a{ display:block; padding:8px 12px; border-radius:8px; font-size:.85rem; color:var(--text-dim); white-space:nowrap; }
.menu-panel ul.sub-menu a:hover{ background: var(--glass); color: var(--text); }

@media (max-width: 640px){
  .header-search input{ width: 120px; }
  .header-search input:focus{ width: 150px; }
  .nav-dropdown{ flex: 0 0 auto; }

  .menu-toggle{
    display:inline-flex; align-items:center; gap:7px;
    background: var(--glass); border:1px solid var(--border); color:var(--text);
    border-radius:999px; padding:9px 16px; font-size:.86rem; white-space:nowrap;
  }
  .menu-toggle svg{ width:12px; height:12px; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
  .menu-toggle span.label{ display:none; }

  .menu-panel{
    display:none; position:fixed; inset-inline:14px;
    top: calc(var(--header-h, 60px) + var(--admin-h, 0px) + 8px);
    max-height: calc(100vh - var(--header-h, 60px) - var(--admin-h, 0px) - 24px);
    overflow-y:auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--ink-2); border:1px solid var(--border); border-radius: var(--radius-sm);
    padding:10px; box-shadow: 0 24px 60px rgba(0,0,0,.5); z-index:60;
  }
  .menu-panel.is-open{ display:block; }
  .menu-panel > ul{ flex-direction:column; }
  .menu-panel > ul > li > a{ text-align:center; }

  .menu-panel ul.sub-menu{
    position:static; display:block; background:transparent; border:none; box-shadow:none;
    padding-inline-start:14px; margin:2px 0 6px;
  }
  .menu-panel ul.sub-menu a{ text-align:center; color: var(--text-faint); }
}

/* ============ Hero ============ */
.hero{ padding: 64px 0 28px; text-align:center; position:relative; }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--ff-mono); font-size:.75rem; letter-spacing:.06em;
  color: var(--gold); background: var(--gold-dim); border:1px solid rgba(242,184,75,.3);
  padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.hero h1{
  font-family: var(--ff-display); font-weight:900; font-size: clamp(2rem, 5vw, 3.4rem);
  margin:0 0 14px; line-height:1.25;
}
.hero h1 .accent{ color: var(--gold); }
.hero p{ color: var(--text-dim); max-width: 620px; margin:0 auto; font-size:1.05rem; }

/* ============ Filter bar ============ */
.filterbar{
  position: relative;
  background: rgba(10,12,18,.92); backdrop-filter: blur(16px);
  border:1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin: 26px auto 30px;
}
.filterbar-body{ display:flex; flex-direction:column; gap:14px; }
.filter-toggle{ display:none; }
.filterbar-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filterbar-row.chips{ overflow-x:auto; padding-bottom:4px; scrollbar-width: thin; }
.filterbar-row.chips::-webkit-scrollbar{ height:5px; }
.filterbar-row.chips::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:10px; }

.chip{
  flex: 0 0 auto;
  background: var(--glass); border:1px solid var(--border); color: var(--text-dim);
  padding:7px 15px; border-radius: 999px; font-size:.85rem; white-space:nowrap;
  transition: all .18s ease;
}
.chip:hover{ border-color: var(--border-strong); color: var(--text); }
.chip.is-active{ background: var(--gold-dim); border-color: rgba(242,184,75,.5); color: var(--gold); font-weight:700; }
.chip .count{ font-family: var(--ff-mono); font-size:.72rem; opacity:.7; margin-inline-start:5px; }
.chip .chip-label{ pointer-events:none; }

.tagchips{ display:flex; gap:8px; flex-wrap:wrap; }
.tagchip{
  background: transparent; border:1px dashed var(--border); color: var(--text-faint);
  padding:5px 12px; border-radius:999px; font-size:.78rem; transition: all .18s ease;
}
.tagchip:hover{ color:var(--teal); border-color: var(--teal); }
.tagchip.is-active{ background: rgba(89,217,197,.12); border: 1px solid var(--teal); color: var(--teal); border-style:solid; }

.filter-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result-count{ font-family: var(--ff-mono); font-size:.8rem; color: var(--text-faint); }
.result-count b{ color: var(--gold); font-weight:700; }

.shuffle-btn{
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--gold), #d99a2b);
  color: #1a1204; font-weight:800; font-size:.88rem;
  border:none; padding:10px 20px; border-radius:999px;
  box-shadow: 0 6px 20px rgba(242,184,75,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.shuffle-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(242,184,75,.35); }
.shuffle-btn:active{ transform: translateY(0); }
.shuffle-btn svg{ width:16px; height:16px; transition: transform .5s ease; }
.shuffle-btn.is-spinning svg{ transform: rotate(360deg); }

.reset-link{ font-size:.82rem; color: var(--text-faint); border-bottom:1px dotted var(--text-faint); }
.reset-link:hover{ color: var(--text); }

/* ============ Grid & Cards ============ */
.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap:20px;
  padding-bottom: 80px; min-height: 200px;
}
.card{
  background: var(--glass); border:1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display:flex; flex-direction:column; gap:12px; position:relative;
  backdrop-filter: blur(10px);
  opacity:0; transform: translateY(14px) scale(.98);
  animation: cardIn .5s cubic-bezier(.2,.8,.2,1) forwards;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.card:hover{ border-color: var(--border-strong); background: var(--glass-strong); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
@keyframes cardIn{ to{ opacity:1; transform: translateY(0) scale(1); } }

.card.is-featured{
  border-color: rgba(242,184,75,.55);
  box-shadow: 0 0 0 1px rgba(242,184,75,.3), 0 0 34px rgba(242,184,75,.18);
  animation: cardIn .5s cubic-bezier(.2,.8,.2,1) forwards, glowPulse 2.6s ease-in-out .5s infinite;
}
@keyframes glowPulse{
  0%,100%{ box-shadow: 0 0 0 1px rgba(242,184,75,.3), 0 0 24px rgba(242,184,75,.14); }
  50%{ box-shadow: 0 0 0 1px rgba(242,184,75,.55), 0 0 40px rgba(242,184,75,.28); }
}
.featured-badge{
  position:absolute; top:-11px; right: 16px;
  background: var(--gold); color:#1a1204; font-weight:800; font-size:.72rem;
  padding:4px 12px; border-radius:999px; box-shadow:0 4px 12px rgba(242,184,75,.4);
}

.card-top{ display:flex; align-items:center; gap:12px; }
.card-thumb{
  width:52px; height:52px; border-radius:14px; overflow:hidden; flex:0 0 auto;
  background: var(--ink-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
}
.card-thumb img{ width:100%; height:100%; object-fit:cover; }
.card-thumb .fallback{ font-family: var(--ff-display); font-weight:900; color: var(--text-faint); font-size:1.1rem; }
.card-title{ font-family: var(--ff-display); font-weight:700; font-size:1.05rem; margin:0; }
.card-cat{
  display:inline-block; font-size:.7rem; padding:3px 10px; border-radius:999px; margin-top:4px;
  border:1px solid var(--cat-border, var(--border)); color: var(--cat-color, var(--text-dim)); background: var(--cat-bg, transparent);
  transition: filter .2s ease;
}
.card-cat:hover{ filter: brightness(1.3); }
.card-excerpt{ color: var(--text-dim); font-size:.87rem; line-height:1.75; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.card-tags a{ font-size:.7rem; color: var(--text-faint); background: rgba(255,255,255,.03); border:1px solid var(--border); padding:2px 9px; border-radius:999px; transition: all .18s ease; }
.card-tags a:hover{ color: var(--teal); border-color: var(--teal); }

/* ============ Load more ============ */
.load-sentinel{
  display:none; align-items:center; justify-content:center; gap:10px; margin:34px auto 60px; width: fit-content;
  background: var(--glass); border:1px solid var(--border); color: var(--text);
  padding: 12px 28px; border-radius:999px; font-size:.88rem; font-family: inherit;
  transition: all .18s ease;
}
.load-sentinel.is-active{ display:flex; }
.load-sentinel:hover{ border-color: var(--border-strong); background: var(--glass-strong); transform: translateY(-1px); }
.load-sentinel svg{ width:14px; height:14px; opacity:.7; }
.load-sentinel .load-count{
  font-family: var(--ff-mono); font-size:.76rem; color: var(--gold);
  background: var(--gold-dim); padding:2px 10px; border-radius:999px;
}
.card-actions{ display:flex; gap:8px; margin-top:4px; }
.btn{
  flex:1; text-align:center; padding:9px 10px; border-radius:10px; font-size:.82rem; font-weight:700;
  transition: all .18s ease; border:1px solid var(--border);
}
.btn-primary{ background: var(--teal); color:#04211c; border-color: var(--teal); }
.btn-primary:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--text-dim); }
.btn-ghost:hover{ color: var(--text); border-color: var(--border-strong); }

/* ============ Empty state ============ */
.empty-state{ text-align:center; padding: 70px 20px; color: var(--text-dim); grid-column: 1/-1; }
.empty-state .glyph{ font-size:2.4rem; margin-bottom:14px; }
.empty-state button{ margin-top:16px; background: var(--glass); border:1px solid var(--border); color:var(--text); padding:9px 20px; border-radius:999px; }

/* ============ Single / Page ============ */
.single-wrap{ max-width: 760px; margin: 50px auto 100px; padding-inline:24px; position:relative; z-index:1; }
.single-card{ background: var(--glass); border:1px solid var(--border); border-radius: var(--radius); padding: 34px; }
.single-card h1{ font-family: var(--ff-display); font-size: 2rem; margin-top:0; }
.single-card .content{ color: var(--text-dim); font-size: 1.02rem; line-height:1.9; }
.single-card .content img{ border-radius: var(--radius-sm); margin: 16px 0; }
.single-card .content a{ color: var(--teal); text-decoration: underline; }
.single-card .content h2, .single-card .content h3, .single-card .content h4{ font-family: var(--ff-display); color: var(--text); margin-top:1.6em; }
.single-card .content blockquote{ border-inline-start:3px solid var(--gold); padding-inline-start:16px; margin-inline-start:0; color: var(--text-dim); font-style:italic; }
.single-card .content table{ width:100%; border-collapse:collapse; }
.single-card .content table td, .single-card .content table th{ border:1px solid var(--border); padding:8px 12px; }
.single-card .content ul, .single-card .content ol{ padding-inline-start:22px; }

/* Neutralize legacy light-mode block-plugin output (e.g. old UAGB "Post Grid" pages)
   so pages built with the previous theme don't clash with the dark design. */
.single-card .content [class*="uagb-post"],
.single-card .content .wp-block-uagb-post-grid,
.single-card .content .uagb-post__inner-wrap{
  background: var(--glass) !important; border:1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important; color: var(--text) !important;
}
.single-card .content .uagb-post__title,
.single-card .content .uagb-post__title a{ color: var(--text) !important; text-decoration:none !important; }
.single-card .content .uagb-post__text,
.single-card .content .uagb-post__excerpt{ color: var(--text-dim) !important; }
.single-card .content .uagb-post__image{ border-radius: var(--radius-sm) !important; overflow:hidden; }
.single-card .content [style*="background-color:#fff"],
.single-card .content [style*="background-color: #fff"],
.single-card .content [style*="background:#fff"]{ background: var(--glass) !important; }
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--text-faint); font-size:.88rem; margin-bottom:24px; }
.back-link:hover{ color: var(--text); }

/* ============ Footer ============ */
.site-footer{ border-top:1px solid var(--border); padding: 34px 0; margin-top:40px; position:relative; z-index:1; }
.site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.site-footer p{ color: var(--text-faint); font-size:.85rem; margin:0; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:34px; height:34px; border-radius:50%; background: var(--glass); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition: all .2s; }
.footer-social a:hover{ color: var(--gold); border-color: var(--gold); }

@media (max-width: 600px){
  .filterbar{
    position: sticky; top: calc(var(--header-h, 60px) + var(--admin-h, 0px)); z-index:40;
    padding: 10px;
  }
  .filter-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    background: var(--glass); border:1px solid var(--border); border-radius: var(--radius-sm);
    padding: 12px 16px; color: var(--text); font-size:.9rem;
  }
  .filter-toggle .fbtn-left{ display:flex; align-items:center; gap:8px; }
  .filter-toggle svg{ width:13px; height:13px; transition: transform .2s ease; flex:0 0 auto; }
  .filter-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
  .filter-summary{
    font-family: var(--ff-mono); font-size:.74rem; color: var(--gold);
    background: var(--gold-dim); border:1px solid rgba(242,184,75,.3);
    padding: 3px 10px; border-radius:999px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .filterbar-body{
    display:none; flex-direction:column; margin-top:12px;
    max-height: calc(100vh - var(--header-h, 60px) - var(--admin-h, 0px) - 40px);
    overflow-y:auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: 70px; /* keeps controls clear of AddToAny's fixed bottom share bar */
  }
  .filterbar-body.is-open{ display:flex; }
  .filter-toolbar{
    order:-1; flex-direction:column; align-items:stretch; gap:10px;
    position:relative; z-index:5; margin-bottom:4px;
    padding-bottom:12px; border-bottom:1px solid var(--border);
  }
  .shuffle-btn{ justify-content:center; }
  .tagchips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .tagchips::-webkit-scrollbar{ display:none; }
  .tagchip{ flex:0 0 auto; }

  /* AddToAny's floating share bar (plugin, not part of this theme) can otherwise
     sit on top of the open filter panel and block taps on mobile. */
  .a2a_floating_style{ z-index: 20 !important; }
}