/* =========================================================================
   ITHAR DIGITAL — CODE LAYER
   Loaded after styles.css. Adds the light "IDE" aesthetic (code windows,
   terminals, syntax colour, gutters) and the sub-page / legal styles.
   Kept separate so the base brand system stays readable.
   ========================================================================= */

:root{
  /* light syntax palette, GitHub-Light-ish, tuned to the brand */
  --syn-key:#8250DF;   /* const, arrow  */
  --syn-str:#0A6E4A;   /* "strings"     */
  --syn-fn:#1554F0;    /* identifiers   */
  --syn-num:#0550AE;   /* numbers       */
  --syn-com:#8A94AB;   /* // comments   */
  --syn-punc:#57606A;  /* {} [] , ;     */
  --code-bg:#FBFCFE;
  --code-bar:#F1F4FA;
  --gutter:#A8B2C6;
}

/* =========================== code window =========================== */
.codewin{
  background:var(--code-bg); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-md); text-align:left;
}
.codewin__bar{
  display:flex; align-items:center; gap:8px;
  background:var(--code-bar); border-bottom:1px solid var(--line); padding:11px 14px;
}
.codewin__dot{width:11px; height:11px; border-radius:50%; flex:none}
.codewin__dot--r{background:#FF5F57}
.codewin__dot--y{background:#FEBC2E}
.codewin__dot--g{background:#28C840}
.codewin__name{
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-400);
  margin-left:8px; letter-spacing:.02em;
}
.codewin__body{
  margin:0; padding:18px 18px 20px; overflow-x:auto;
  font-family:var(--font-mono); font-size:.85rem; line-height:1.85; color:var(--ink-700);
}
.codewin__body code{display:block; white-space:pre}
.codewin .ln{
  display:inline-block; width:2.1em; margin-right:1.1em; text-align:right;
  color:var(--gutter); user-select:none; -webkit-user-select:none;
}

.tok-key{color:var(--syn-key); font-weight:600}
.tok-str{color:var(--syn-str)}
.tok-fn{color:var(--syn-fn); font-weight:600}
.tok-num{color:var(--syn-num)}
.tok-com{color:var(--syn-com); font-style:italic}
.tok-punc{color:var(--syn-punc)}

.caret{
  display:inline-block; width:8px; height:1.05em; vertical-align:-.18em;
  background:var(--one); margin-left:2px; animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ============================= terminal ============================= */
.terminal{
  background:var(--code-bg); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 20px; font-family:var(--font-mono); font-size:.84rem; line-height:2;
  overflow-x:auto;
}
.terminal div{white-space:pre}
.terminal .cmd::before{content:"$ "; color:var(--zero); font-weight:600}
.terminal .cmd{color:var(--ink-800)}
.terminal .out{color:var(--ink-400)}
.terminal .ok{color:var(--ink-500)}
.terminal .ok::before{content:"OK "; color:var(--zero); font-weight:600}

/* =================== section label as a code comment =================== */
.sec-num::before{content:"// "; opacity:.55}

/* ================== service card filename tab ================== */
.card__file{
  display:block; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-300);
  border-bottom:1px dashed var(--line); padding-bottom:10px; margin-bottom:16px;
  letter-spacing:.02em; transition:color .3s;
}
.card:hover .card__file{color:var(--one)}

/* ====================== scanlines (very faint) ====================== */
.scan{
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.55;
  background:repeating-linear-gradient(
    180deg, rgba(21,84,240,.032) 0px, rgba(21,84,240,.032) 1px,
    transparent 1px, transparent 4px);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 35%, #000 20%, transparent 80%);
  mask-image:radial-gradient(ellipse 80% 65% at 50% 35%, #000 20%, transparent 80%);
}

.hero__code{max-width:660px; margin:54px auto 0; position:relative; z-index:2}

/* ============== process steps rendered as terminal lines ============== */
.step__cmd{
  display:block; font-family:var(--font-mono); font-size:.75rem; color:var(--zero);
  margin-bottom:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.step__cmd::before{content:"$ "; opacity:.7}

/* =========================================================================
   SUB-PAGES — about / terms / privacy / refund
   ========================================================================= */
.page-head{
  position:relative; overflow:hidden;
  padding:clamp(52px,7vw,84px) 0 clamp(34px,4vw,48px);
  background:
    radial-gradient(700px 380px at 82% -10%, var(--pulse-100) 0%, transparent 62%),
    radial-gradient(620px 340px at 8% 0%, var(--one-100) 0%, transparent 60%),
    #fff;
  border-bottom:1px solid var(--line);
}
.page-head__inner{position:relative; z-index:2}
.page-head h1{font-size:clamp(2rem,5vw,3rem); margin-bottom:.3em}
.page-head p{color:var(--ink-500); max-width:62ch; margin:0}
.page-meta{
  font-family:var(--font-mono); font-size:.75rem; color:var(--ink-300);
  margin-top:18px; display:flex; gap:20px; flex-wrap:wrap;
}

.legal{
  display:grid; grid-template-columns:232px 1fr; gap:56px; align-items:start;
  padding:clamp(42px,6vw,70px) 0 clamp(56px,7vw,88px);
}
.toc{position:sticky; top:100px}
.toc h2{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-300); margin-bottom:14px;
}
.toc a{
  display:block; padding:7px 0 7px 14px; font-size:.9rem; color:var(--ink-500);
  border-left:2px solid var(--line); transition:color .2s, border-color .2s;
}
.toc a:hover{color:var(--one); border-left-color:var(--one)}

/* min-width:0 is load-bearing. A grid item defaults to min-width:auto, so a wide
   child (.terminal, .codewin, a long table) sets the column's floor to its own
   intrinsic width and pushes the whole page sideways instead of scrolling
   inside its own box. */
.legal > *{min-width:0}
.prose{max-width:74ch; min-width:0; font-size:1rem; line-height:1.78}
.prose .terminal,
.prose .codewin,
.prose table{max-width:100%}
.prose h2{font-size:1.4rem; margin:2.2em 0 .6em; scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h2 .n{
  font-family:var(--font-mono); font-size:.7rem; color:var(--one);
  background:var(--one-100); border-radius:6px; padding:3px 8px;
  vertical-align:middle; margin-right:10px; letter-spacing:.1em;
}
.prose h3{font-size:1.06rem; margin:1.6em 0 .5em; color:var(--ink-800)}
.prose p,.prose li{color:var(--ink-500)}
.prose strong{color:var(--ink-800); font-weight:600}
.prose ul{margin:0 0 1.1em; padding-left:0}
.prose ul li{position:relative; padding-left:24px; margin-bottom:.5em}
.prose ul li::before{
  content:"1"; position:absolute; left:0; top:0;
  font-family:var(--font-mono); font-size:.78rem; color:var(--one); opacity:.6;
}
.prose ul li:nth-child(even)::before{content:"0"; color:var(--zero)}
.prose a{text-decoration:underline; text-underline-offset:3px}
.prose table{width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.92rem}
.prose th,.prose td{border:1px solid var(--line); padding:10px 13px; text-align:left; vertical-align:top}
.prose th{background:var(--bg-soft); font-family:var(--font-display); color:var(--ink-800); font-weight:600}
.prose > :last-child{margin-bottom:0}

.callout{
  border:1px solid var(--one-100); background:var(--bg-tint);
  border-radius:var(--r-md); padding:18px 20px; margin:0 0 1.7em;
}
.callout p{margin:0; color:var(--ink-500); font-size:.94rem}
.callout p + p{margin-top:.7em}
.callout strong{color:var(--ink-900)}
.callout--warn{border-color:#F3D9A6; background:#FFF9EF}

/* Unfilled legal placeholder. Deliberately loud: these MUST be replaced with
   the real entity details before the policies are relied on, and a highlight
   the client cannot miss is safer than a value we invented. */
.ph{
  background:#FFF0C2; border-bottom:1.5px dashed #C99A2E; color:#7A5A10;
  font-family:var(--font-mono); font-size:.88em; padding:1px 5px; border-radius:4px;
}

/* legal links in the footer base row */
.footer__legal{display:flex; gap:20px; flex-wrap:wrap; justify-content:center}
.footer__legal a{color:rgba(255,255,255,.55); font-size:.86rem; transition:color .2s}
.footer__legal a:hover{color:#fff}

/* ============================ about page ============================ */
.about-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px; margin:0 0 1.9em;
}
.about-stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:22px 20px;
}
.about-stat b{
  display:block; font-family:var(--font-display); font-size:1.85rem;
  color:var(--ink-900); line-height:1.1; margin-bottom:4px;
}
.about-stat span{font-size:.87rem; color:var(--ink-400)}

/* ============================ responsive ============================ */
@media (max-width:900px){
  .legal{grid-template-columns:1fr; gap:30px}
  .toc{position:static; border-bottom:1px solid var(--line); padding-bottom:16px}
  .toc a{display:inline-block; border-left:0; padding:6px 16px 6px 0}
}
@media (max-width:640px){
  .codewin__body{font-size:.75rem; padding:14px 12px 16px}
  .codewin .ln{width:1.6em; margin-right:.7em}
  .terminal{font-size:.75rem; padding:14px 15px}
  .hero__code{margin-top:40px}
}
@media (prefers-reduced-motion:reduce){
  .caret{animation:none}
  .scan{display:none}
}
@media print{
  .toc,.page-head{display:none}
}

/* =========================================================================
   PROJECT CARDS — live sites we built. Shared by the home page and /catalog.
   ========================================================================= */
.work{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:1100px){ .work{grid-template-columns:repeat(2,1fr)} }
.work__card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s;
}
.work__card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.work__shot{display:block; background:var(--code-bar); border-bottom:1px solid var(--line)}
.work__bar, .browser__bar{
  display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--code-bar);
}
.work__bar i, .browser__bar i{width:9px; height:9px; border-radius:50%; background:#FF5F57}
.work__bar i:nth-child(2), .browser__bar i:nth-child(2){background:#FEBC2E}
.work__bar i:nth-child(3), .browser__bar i:nth-child(3){background:#28C840}
.work__bar em, .browser__bar em{
  font-style:normal; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-400);
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:2px 10px; margin-inline-start:10px;
}
.work__shot img{width:100%; height:auto; aspect-ratio:896/616; object-fit:cover; object-position:top}
.work__body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.work__sector{font-size:.8rem; font-weight:600; color:var(--zero); margin-bottom:6px}
.work__body h3{font-size:1.3rem; margin-bottom:.4em}
.work__body p{color:var(--ink-500); font-size:.94rem; margin-bottom:14px}
.work__built{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px}
.work__built li{
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-400);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 10px;
}
.work__body .link-arrow{margin-top:auto}

@media (max-width:820px){ .work{grid-template-columns:1fr} }

/* =========================================================================
   BACK TO TOP — created by main.js on every page, shown after one screen.
   Sits on the same side as the WhatsApp button and stacks above it when
   that one is visible, so the two never overlap.
   ========================================================================= */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:89;
  width:46px; height:46px; border-radius:14px; border:1px solid var(--line);
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink-900);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s, transform .25s var(--ease), visibility .25s, background .2s, color .2s, bottom .25s;
}
.to-top svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.to-top.is-on{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--ink-900); color:#fff; border-color:var(--ink-900)}
.to-top:focus-visible{outline:2.5px solid var(--one); outline-offset:3px}
body:has(.wa-fab:not([hidden])) .to-top{bottom:92px}
/* The cookie banner spans the bottom edge above everything and would swallow
   clicks on this button. Step aside until the visitor has answered it. */
body:has(.consent.is-in) .to-top{opacity:0; visibility:hidden}
html[dir="rtl"] .to-top{right:auto; left:22px}
@media (max-width:640px){
  .to-top{right:16px; bottom:16px; width:42px; height:42px}
  html[dir="rtl"] .to-top{right:auto; left:16px}
  body:has(.wa-fab:not([hidden])) .to-top{bottom:80px}
}
@media (prefers-reduced-motion:reduce){ .to-top{transition:none} }
@media print{ .to-top{display:none} }