/* ---------------------------------------------------------------------------
   Additions only. style.css is untouched, so nothing that already worked can
   break: this file is loaded after it and only adds the new blocks (tools,
   articles, social, contact fallback) plus the accessibility skip link.
   --------------------------------------------------------------------------- */

/* Keyboard users need a way past the header without tabbing the whole nav. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy-lift); color:var(--text);
  padding:.7rem 1.1rem; border-radius:0 0 var(--r) 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

/* ------------------------------------------------------------ tool cards */
.card.tool{ display:flex; flex-direction:column; gap:.75rem; }

.card.tool h3{ line-height:1.25; }

.tool-meta{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:0; font-size:.78rem; color:var(--muted);
}
.tool-meta span{
  border:1px solid var(--line); border-radius:999px;
  padding:.2rem .6rem; white-space:nowrap;
}

.card.tool .btn{
  margin-top:auto; align-self:flex-start;
  text-decoration:none; display:inline-block;
}

/* ------------------------------------------------------------- articles */
.card.post h3{ margin:0 0 .5rem; line-height:1.3; }
.card.post h3 a{
  color:var(--text); text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px; background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .28s var(--ease);
}
.card.post h3 a:hover,
.card.post h3 a:focus-visible{ background-size:100% 1px; }

.post-meta{
  margin:.6rem 0 0; font-size:.78rem; color:var(--muted);
}

/* -------------------------------------------------------------- contact */
.contact-alt{
  margin:1rem 0 0; font-size:.9rem; color:var(--muted);
}
.contact-alt a{ color:var(--accent); }

/* --------------------------------------------------------------- footer */
.foot{ flex-wrap:wrap; gap:.9rem; }
.foot-row{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }

.social{ display:flex; gap:1.15rem; flex-wrap:wrap; align-items:center; }
.social a{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--muted); text-decoration:none; font-size:.85rem;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.social a svg{
  width:1.05em; height:1.05em; flex:none; fill:currentColor;
}
.social a:hover,
.social a:focus-visible{ color:var(--text); border-color:var(--accent); }

/* ------------------------------------------------- hero video
   A recorded MetaHuman sits over the WebGL canvas. The canvas stays in the
   DOM as the fallback, so if the video errors the scene is already there. */
.stage-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:1;
  background:#0B0B14;
}
.stage-grid, .stage-top, .stage-bottom{ z-index:2; }

.sound-toggle{
  position:absolute; z-index:3; inset-block-end:1rem; inset-inline-end:1rem;
  width:2.4rem; height:2.4rem; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.18); border-radius:50%;
  background:rgba(10,10,20,.55); backdrop-filter:blur(6px);
  color:#fff; cursor:pointer; padding:0;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.sound-toggle:hover,
.sound-toggle:focus-visible{ background:rgba(10,10,20,.8); border-color:var(--accent); }
.sound-toggle svg{ width:1.15rem; height:1.15rem; fill:currentColor; }
/* A line through the speaker while muted — the default state. */
.sound-toggle .sound-x{
  position:absolute; width:1.35rem; height:2px; border-radius:2px;
  background:currentColor; transform:rotate(-45deg); transition:opacity .2s var(--ease);
}
.sound-toggle.is-on .sound-x{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .stage-video{ display:none; }
}

/* The article bodies are English only for now. Saying so on the card is
   kinder than letting an Arabic reader click through and find out. */
.lang-badge{
  display:inline-block; margin-inline-start:.55rem; padding:.1rem .45rem;
  border:1px solid var(--line, #2A2A3C); border-radius:999px;
  font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); vertical-align:middle; white-space:nowrap;
}

/* --------------------------------------------------- article pages only */
.article{
  max-width:44rem; margin:0 auto; padding:calc(var(--head) + 2.5rem) 1.25rem 5rem;
}
.article h1{ line-height:1.15; margin:0 0 .6rem; }
.article .post-meta{ margin:0 0 2.5rem; }
.article h2{ margin:2.6rem 0 .8rem; }
.article h3{ margin:1.8rem 0 .5rem; }
.article p, .article li{ line-height:1.75; color:#D6D6E0; }
.article ul, .article ol{ padding-left:1.2rem; }
.article li{ margin:.4rem 0; }
.article blockquote{
  margin:1.6rem 0; padding:.2rem 0 .2rem 1.1rem;
  border-left:2px solid var(--accent); color:var(--muted);
}
.article code{
  background:var(--panel); border:1px solid var(--line);
  border-radius:6px; padding:.1rem .4rem; font-size:.9em;
}
.article .back{
  display:inline-block; margin-bottom:2rem;
  color:var(--muted); text-decoration:none; font-size:.9rem;
}
.article .back:hover{ color:var(--text); }
.article .end{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  color:var(--muted); font-size:.92rem;
}
.article .end a{ color:var(--accent); }

/* Arabic reads right to left; the article column has to follow. */
html[lang="ar"] .article{ direction:rtl; text-align:right; }
html[lang="ar"] .article ul,
html[lang="ar"] .article ol{ padding-left:0; padding-right:1.2rem; }
html[lang="ar"] .article blockquote{
  border-left:0; border-right:2px solid var(--accent);
  padding:.2rem 1.1rem .2rem 0;
}

@media (max-width:640px){
  .article{ padding-top:calc(var(--head) + 1.5rem); }
}