/* UNA Base - performance-first, token-driven */
:root{
  /* Aliases for UNA Style Library token keys */
  --una-color-bg: var(--color-bg-page, #ffffff);
  --una-color-text: var(--color-text-base, #111111);
  --una-color-primary: var(--color-accent, #0ea5e9);

  --una-container: 1320px;
  --una-gap: 24px;
  --una-sidebar-width: 320px;

  /* Fallback tokens (may be overridden by tokens.css) */
  --una-color-bg: #ffffff;
  --una-color-surface: #ffffff;
  --una-color-text: #111111;
  --una-color-muted: rgba(0,0,0,.64);
  --una-color-border: rgba(0,0,0,.10);
  --una-color-primary: #0ea5e9;

  --una-radius-sm: 10px;
  --una-radius-md: 14px;
  --una-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --una-shadow-md: 0 6px 20px rgba(0,0,0,.08);

  --una-font-base: var(--typography-font-family-base, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  --una-font-headings: var(--typography-font-family-headings, var(--typography-font-family-base, var(--una-font-base)));
  --una-font-size: 16px;
  --una-line-height: 1.65;
  --una-heading-scale: 1.18;

  --una-focus: 0 0 0 3px rgba(14,165,233,.35);
}

html{font-size:var(--una-font-size);}
body{
  margin:0;
  color:var(--color-text-base, var(--una-color-text));
  background:var(--color-bg-page, var(--una-color-bg));
  font-family:var(--una-font-base);
  line-height:var(--una-line-height);
  text-rendering:optimizeLegibility;
}

/* Fix mobile horizontal overflow caused by skip link (a11y) */
.una-skip-link{
  position: fixed;
  inset-inline-start: 0;   /* بدل left */
  top: 0;
  transform: translateX(-120%); /* خارج الشاشة لكن قريب */
  z-index: 999999;
  max-width: 90vw;
  overflow: hidden;
  white-space: nowrap;
}

.una-skip-link:focus,
.una-skip-link:active{
  transform: translateX(0);   /* يظهر عند التركيز */
}

/* === Mobile Overflow Guard (TEST) === من هنااااااااااااااااااااااااااااااااااااااااااااااا*/
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }              /* أفضل من hidden إذا مدعوم */
body { overflow-x: clip; max-width: 100vw; }

@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* Media & long content safety */
img, svg, video, canvas { max-width: 100%; height: auto; }
pre, code { max-width: 100%; overflow-x: auto; }
table { max-width: 100%; }
html, body{ overflow-x:hidden; }
html, body{ margin:0 !important; padding:0 !important; }
  /* Fallback tokens (may be overridden by tokens.css)  الى هناااااااااااااااااااااااااااااااااااااااا*/


a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--una-font-headings);}

a:hover{text-decoration:underline;}
:focus-visible{outline:none; box-shadow: var(--una-focus); border-radius: 6px;}

/* Accessibility */
.screen-reader-text{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.screen-reader-text:focus{position:static !important; width:auto; height:auto; margin:0; clip:auto; overflow:visible;}

.una-container{
  width:min(var(--una-container), calc(100% - 32px));
  margin-inline:auto;
}

/* ---------------------------------------------------
   Container Mode (Patch 2)
   - default = contained (rule above)
   - full = edge-to-edge (used for pages or site-wide)
--------------------------------------------------- */
body.una-container-mode-full .una-container{
  width:100%;
  margin-inline:0;
}

.una-grid{
  display:grid;
  gap:var(--una-gap);
}

/* Responsive archive grid controlled by Theme Options (CSS vars) */
.una-grid--archive{grid-template-columns:repeat(var(--una-archive-cols-mobile,1),1fr);}
@media (min-width:768px){.una-grid--archive{grid-template-columns:repeat(var(--una-archive-cols-tablet,2),1fr);}}
@media (min-width:992px){.una-grid--archive{grid-template-columns:repeat(var(--una-archive-cols-desktop,3),1fr);}}
@media (min-width: 992px){
  .una-grid--2{grid-template-columns: 1fr 1fr;}
  .una-grid--3{grid-template-columns: 1fr 1fr 1fr;}
  .una-grid--4{grid-template-columns: 1fr 1fr 1fr 1fr;}
  .una-layout--sidebar{grid-template-columns: 1fr var(--una-sidebar-width);}
  .una-layout--sidebar-left{grid-template-columns: var(--una-sidebar-width) 1fr;}
}

.una-card{
  background:var(--una-color-surface);
  border:1px solid var(--una-color-border);
  border-radius:var(--una-radius-md);
  box-shadow:var(--una-shadow-sm);
  overflow:hidden;
}
.una-card__body{padding:14px;}
.una-card__kicker{font-size:.85rem;color:var(--una-color-muted);margin:0 0 6px;}
.una-card__title{font-family:var(--una-font-headings);margin:0 0 8px;line-height:1.25;}
.una-card__meta{font-size:.85rem;color:var(--una-color-muted);display:flex;gap:10px;flex-wrap:wrap;}
.una-card__thumb img{display:block;width:100%;height:auto;}
.una-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:700;
  padding:4px 8px;border-radius:999px;
  background:rgba(14,165,233,.12); color:var(--una-color-primary);
  border:1px solid rgba(14,165,233,.22);
}
.una-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--una-color-border);
  background:var(--una-color-surface);
  cursor:pointer;
  font:inherit;
}
.una-btn:hover{box-shadow:var(--una-shadow-sm);}
.una-btn--primary{background:var(--una-color-primary);border-color:transparent;color:white;}

.una-meta{font-size:.85rem;color:var(--una-color-muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.una-meta__sep{opacity:.55;}
.una-meta a{color:inherit;text-decoration:none;font-weight:700;}
.una-meta a:hover{text-decoration:underline;}
.una-meta a:focus-visible{outline:2px solid var(--una-color-primary,#0a5fff);outline-offset:2px;border-radius:6px;}

.una-tax{margin:.4rem 0 0;font-size:.85rem;color:var(--una-color-muted);display:flex;gap:12px;flex-wrap:wrap;}
.una-tax__label{opacity:.85;margin-inline-end:6px}
/* Terms links (categories / tags)
   We use a pill-like style to stay readable even if --una-color-muted becomes too close to the background. */
.una-tax__item{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--una-color-border,rgba(0,0,0,.12));border-radius:999px;background:var(--una-color-surface,var(--una-color-bg-1,#f3f4f6));color:var(--una-color-text,#111827);text-decoration:none;font-weight:700;line-height:1.2}
.una-tax__item:hover{background:var(--una-color-bg-1,#f3f4f6);text-decoration:none}
.una-tax__item:focus-visible{outline:2px solid var(--una-color-primary,#0a5fff);outline-offset:2px}

.una-skip-link{
  position:absolute; left:-9999px; top:auto; width:1px;height:1px;overflow:hidden;
}
.una-skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; padding:10px 12px;
  background:var(--una-color-surface); border:1px solid var(--una-color-border);
  border-radius:10px; z-index:99999;
}

/* Single */
.una-article__title{font-family:var(--una-font-headings);line-height:1.15;margin:0 0 10px;}
.una-article__header{padding:18px 0;}
.una-article.has-post-bg{
  background-image:var(--una-post-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:var(--una-radius-lg);
  padding:18px;
  border:1px solid var(--una-color-border);
  position:relative;
  overflow:hidden;
}
.una-article.has-post-bg::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.08));
  pointer-events:none;
}
.una-article.has-post-bg > *{position:relative;}
.una-article.has-post-bg .una-article__title,
.una-article.has-post-bg .una-meta,
.una-article.has-post-bg .una-tax{color:#fff;}
.una-article__content{font-size:1.05rem;}
.una-article__content h2,.una-article__content h3{font-family:var(--una-font-headings);line-height:1.2;}
.una-article__tools{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;}
.una-toc{border:1px solid var(--una-color-border);border-radius:var(--una-radius-md);padding:12px;background:var(--una-color-surface);}
.una-toc__title{margin:0 0 8px;font-family:var(--una-font-headings);}
.una-toc__list{margin:0;padding-left:18px;}
.una-progress{
  position:fixed; inset-inline:0; top:0; height:3px; z-index:9999;
  background:rgba(0,0,0,.06);
}
.una-progress__bar{height:100%; width:0; background:var(--una-color-primary);}


/* Heading scale */
h1{font-size:calc(1.8rem * var(--una-heading-scale));}
h2{font-size:calc(1.5rem * var(--una-heading-scale));}
h3{font-size:calc(1.25rem * var(--una-heading-scale));}
h4{font-size:calc(1.1rem * var(--una-heading-scale));}

.una-author-header{display:flex;flex-direction:column;gap:8px;}
.una-author-avatar img{border-radius:999px;display:block;}
.una-author-count{margin:0;color:var(--color-text-muted, rgba(0,0,0,.6));}
mark{background:rgba(255,230,0,.35);padding:0 .15em;border-radius:.2em;}


/* UNA Blocks - Token-driven (controlled via UNA Style Library tokens.css) */

.una-block{margin: var(--una-block-margin, 18px 0);}
.una-block__inner{
  padding: var(--una-block-padding, 16px);
  background: var(--una-block-bg, transparent);
  border: var(--una-block-border-width, 1px) solid var(--una-block-border-color, rgba(0,0,0,.08));
  border-radius: var(--una-block-radius, 12px);
  box-shadow: var(--una-block-shadow, none);
}

.una-tax-row{display:flex;gap:var(--una-tax-row-gap,10px);align-items:flex-start;flex-wrap:wrap;margin:10px 0;}
.una-tax-label{font-weight:700;color:var(--una-tax-label-color,currentColor);opacity:var(--una-tax-label-opacity,.85);}
.una-tax-items{display:flex;gap:var(--una-tax-items-gap,8px);flex-wrap:wrap;}
.una-tax-chip{
  display:inline-flex;
  padding:var(--una-tax-chip-padding,6px 10px);
  border-radius:var(--una-tax-chip-radius,999px);
  border:var(--una-tax-chip-border-width,1px) solid var(--una-tax-chip-border-color,rgba(0,0,0,.10));
  background:var(--una-tax-chip-bg,transparent);
  color:var(--una-tax-chip-color,currentColor);
  text-decoration:none;
}
.una-tax-chip:hover{opacity:.9}

/* UNA Related Slider (scroll-snap) */
.una-related{margin:24px 0;}
.una-related__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.una-related__title{margin:0;font-size:18px;color:var(--una-slider-title-color,inherit);}
.una-slider{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: var(--una-slider-item-width, 320px);
  gap: var(--una-slider-section-gap, 12px);
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.una-slider > *{scroll-snap-align:start;}
.una-slider-card{
  background:var(--una-slider-card-bg,#fff);
  border:var(--una-slider-card-border-width,1px) solid var(--una-slider-card-border-color,rgba(0,0,0,.08));
  border-radius:var(--una-slider-card-radius,12px);
  padding:var(--una-slider-card-padding,14px);
  box-shadow:var(--una-slider-card-shadow,none);
}
.una-slider-card__title{margin:0 0 6px;font-size:16px;line-height:1.35;}
.una-slider-card__title a{
  color: var(--una-slider-link-color, var(--una-color-link, var(--una-color-primary)));
  text-decoration:none;
}
.una-slider-card__title a:hover{ color: var(--una-color-link-hover, var(--una-color-primary)); }
.una-slider-card__meta{font-size:13px;color:var(--una-slider-meta-color,var(--color-text-muted));}
html, body{ overflow-x:hidden; }
/* Fix unexpected top gap above header */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

/* ===============================
   Thumbnails (Fixed) — UNA-RESET
   - No shadows / padding / margins
   - Radius is controlled by Card media radius only
   - 5 fixed ratios (used as Style IDs in blocks/templates)
   =============================== */

.una-thumb{
  position:relative;
  display:block;
  width:100%;
  flex:0 0 auto;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  box-shadow:none;
  background:transparent;
  border-radius:0;
  aspect-ratio:16/9;
}

/* 5 fixed ratios (classes) */
.una-thumb-1x1{aspect-ratio:1/1;}
.una-thumb-4x3{aspect-ratio:4/3;}
.una-thumb-3x2{aspect-ratio:3/2;}
.una-thumb-16x9{aspect-ratio:16/9;}
.una-thumb-21x9{aspect-ratio:21/9;}

/* Mini/List thumbnails: fixed width only (no layers) */
.una-card.is-mini .una-thumb{
  width:86px;
  flex:0 0 86px;
}

.una-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1);
  transition:transform 260ms ease;
}

.una-thumb:hover img{
  transform:scale(1.06);
}

/* Optional overlay (kept for legacy markup) */
.una-thumb__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:14px;
  background:rgba(0,0,0,0.40);
}

.una-thumb__overlay .una-thumb__text{
  color:#ffffff;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
}