/*
Theme Name: ZAD STACK Open
Theme URI: https://zadstack.com
Author: ZAD STACK
Description: Open-source product studio and newsletter theme for ZAD STACK.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: zadstack-open
*/

:root {
  --ink: oklch(14% 0.012 160);
  --paper: oklch(94% 0.016 104);
  --paper-2: oklch(88% 0.018 104);
  --green: oklch(76% 0.17 154);
  --green-dark: oklch(35% 0.1 154);
  --blue: oklch(64% 0.16 255);
  --red: oklch(65% 0.2 28);
  --line: oklch(28% 0.018 160);
  --muted: oklch(51% 0.02 160);
  --display: "IBM Plex Sans Arabic", "DIN Next Arabic", sans-serif;
  --body: "Noto Sans Arabic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.75; }
a { color: inherit; }
button, input { font: inherit; }
::selection { background: var(--green); color: var(--ink); }
.shell { width: min(92vw, 1240px); margin-inline: auto; }
.skip { position: fixed; inset-inline-start: 1rem; top: -5rem; z-index: 99; background: var(--ink); color: var(--paper); padding: .75rem 1rem; }
.skip:focus { top: 1rem; }

.site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; font-family: var(--mono); font-weight: 700; letter-spacing: -.03em; }
.mark { width: 34px; height: 34px; display: grid; gap: 3px; transform: skewY(-7deg); }
.mark i { display:block; background: var(--ink); }
.mark i:nth-child(2) { width: 72%; margin-inline-start: auto; background: var(--green-dark); }
.nav-links { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 2rem); font-size: .88rem; }
.nav-links a { text-decoration: none; border-bottom: 1px solid transparent; }
.nav-links a:hover, .nav-links a:focus { border-color: currentColor; }
.status { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; display: inline-flex; align-items: center; gap: .45rem; }
.status::before { content:""; width: 8px; height: 8px; background: var(--green-dark); }

.hero { min-height: calc(100svh - 72px); display: grid; grid-template-columns: 1.35fr .65fr; border-inline: 1px solid var(--line); }
.hero-copy { padding: clamp(3rem, 8vw, 8rem) clamp(1.4rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: space-between; border-inline-end: 1px solid var(--line); }
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; display:flex; gap:.8rem; align-items:center; }
.eyebrow::before { content:""; width: 2.8rem; height: 2px; background: var(--green-dark); }
h1,h2,h3 { font-family: var(--display); margin: 0; line-height: 1.08; letter-spacing: -.045em; }
h1 { font-size: clamp(3rem, 8vw, 8.6rem); max-width: 9ch; margin-block: clamp(2.5rem, 7vw, 6rem); }
h1 span { color: var(--green-dark); }
.hero-lead { max-width: 42rem; font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.75; }
.hero-rail { background: var(--ink); color: var(--paper); padding: 1.4rem; display:flex; flex-direction:column; justify-content:space-between; }
.rail-code { font-family: var(--mono); font-size: .72rem; color: var(--green); writing-mode: vertical-rl; }
.stack-mark { display:grid; gap:.7rem; }
.stack-mark b { display:block; height: clamp(3rem, 7vw, 7rem); background: var(--paper); }
.stack-mark b:nth-child(2) { width: 72%; margin-inline-start:auto; background: var(--green); }

.section { border-bottom: 1px solid var(--line); padding-block: clamp(4.5rem, 10vw, 9rem); }
.section-grid { display:grid; grid-template-columns: minmax(12rem,.55fr) 1.45fr; gap: clamp(2rem,7vw,8rem); }
.section-no { font-family:var(--mono); color:var(--muted); font-size:.78rem; }
.section h2 { font-size: clamp(2.4rem, 5.5vw, 5.8rem); max-width: 11ch; }
.definition { font-size:clamp(1.18rem,2vw,1.6rem); max-width:42rem; margin-block:2rem 0; }
.product-list { border-top:1px solid var(--line); margin-top:3rem; }
.product-row { display:grid; grid-template-columns: 7rem 1fr auto; gap:1rem; align-items:center; padding:1.4rem 0; border-bottom:1px solid var(--line); text-decoration:none; }
.product-row small { font-family:var(--mono); color:var(--muted); }
.product-row strong { font-size:1.15rem; }
.product-row .arrow { transition:transform .22s ease-out; }
.product-row:hover .arrow { transform:translateX(-.4rem); }

.newsletter { background: var(--ink); color: var(--paper); }
.newsletter .section-grid { align-items:start; }
.newsletter h2 { color:var(--paper); }
.issue-tag { color:var(--green); font-family:var(--mono); font-size:.75rem; }
.newsletter-copy { max-width:48rem; }
.newsletter-copy > p { color:var(--paper-2); font-size:clamp(1.08rem,1.8vw,1.35rem); max-width:38rem; }
.signal-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-block:2.5rem; }
.signal-list div { background:var(--ink); padding:1.2rem; min-height:9rem; }
.signal-list b { display:block; color:var(--green); font-family:var(--mono); margin-bottom:2rem; }
.signup { display:grid; grid-template-columns:1fr auto; max-width:42rem; border-bottom:2px solid var(--paper); }
.signup input { min-width:0; border:0; background:transparent; color:var(--paper); padding:1rem 0; outline:none; }
.signup input::placeholder { color:oklch(72% .015 160); }
.signup button { border:0; background:var(--green); color:var(--ink); font-weight:800; padding:.75rem 1.4rem; cursor:pointer; }
.signup button:hover { background:var(--paper); }
.form-note { font-family:var(--mono); font-size:.69rem !important; color:oklch(70% .015 160) !important; }
.success { border:1px solid var(--green); color:var(--green); padding:1rem; max-width:42rem; margin-bottom:1rem; }

.manifesto { display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem; }
.manifesto h2 { grid-column:1 / 8; }
.manifesto blockquote { grid-column:7 / 13; font-size:clamp(1.25rem,2.2vw,2rem); margin:4rem 0 0; padding-inline-start:1.5rem; border-inline-start:8px solid var(--green-dark); }
.site-footer { background:var(--ink); color:var(--paper); padding-block:2rem; }
.footer-grid { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; font-family:var(--mono); font-size:.72rem; }
.footer-word { font-family:var(--display); font-size:clamp(2rem,6vw,6rem); letter-spacing:-.06em; }

.content-page { min-height:70vh; padding-block:clamp(4rem,10vw,8rem); max-width:70ch; }
.content-page h1 { max-width:none; font-size:clamp(2.8rem,7vw,6rem); }
.content-page a { text-decoration-thickness:1px; text-underline-offset:.2em; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 760px) {
  .nav-links a:not(.status) { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { border-inline-end:0; min-height:70svh; }
  .hero-rail { min-height:13rem; }
  .rail-code { writing-mode:horizontal-tb; }
  .stack-mark { grid-template-columns:1fr 1fr 1fr; }
  .stack-mark b, .stack-mark b:nth-child(2) { width:auto; height:4rem; margin:0; }
  .section-grid { grid-template-columns:1fr; }
  .signal-list { grid-template-columns:1fr; }
  .signal-list div { min-height:7rem; }
  .product-row { grid-template-columns:4rem 1fr auto; }
  .manifesto { display:block; }
  .manifesto blockquote { margin-top:2rem; }
  .footer-grid { align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }
@media (pointer: coarse) { .nav-links a, .signup button { min-height:44px; } }