/* Door (باب) - palmyradoor.tech. A learning initiative of Palmyra Academic Press.
   Palmyra's tokens (brand/tokens.css in PalmyraPub) so the family resemblance is exact; the doorway arch is Door's own
   signature. Right-to-left first; logical properties throughout, so the English page needs no overrides.
   No scripts, no third parties, fonts self-hosted (CSP: style-src 'self', font-src 'self'). */

@font-face { font-family: "Noto Naskh Arabic"; font-weight: 600; font-display: swap;
  src: local("Noto Naskh Arabic SemiBold"), local("NotoNaskhArabic-SemiBold"), url("fonts/NotoNaskhArabic-600-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* Android ships Noto Sans Arabic: local() first means most Syrian phones download nothing. */
@font-face { font-family: "Noto Sans Arabic"; font-weight: 400 600; font-display: swap;
  src: local("Noto Sans Arabic"), local("NotoSansArabic-Regular"), url("fonts/NotoSansArabic-var-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap;
  src: url("fonts/CormorantGaramond-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url("fonts/AtkinsonHyperlegible-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap;
  src: url("fonts/AtkinsonHyperlegible-700-latin.woff2") format("woff2"); }

:root {
  --lime: #FFFFFF;        /* page ground: white, at the owner's request (5 Oct 2026); Palmyra keeps its limestone */
  --card: #FFFFFF;
  --sand: #EFE8DA;
  --border: #DCD2BF;
  --border-strong: #998A68;
  --palm: #1F4634;        /* 10.6:1 on limestone */
  --palm-deep: #163427;
  --brass: #8A5A18;       /* 5.4:1 on limestone */
  --ink: #1F1A14;
  --muted: #5F564A;       /* 6.5:1 */
  --light: #F6E6C2;       /* the light behind an open door */
  --display: "Cormorant Garamond", "Noto Naskh Arabic", Georgia, serif;
  --text: "Atkinson Hyperlegible", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --wrap: 72rem;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--lime); color: var(--ink); font: 400 1.0625rem/1.75 var(--text); }
html[lang="ar"] body { font-size: 1.125rem; line-height: 1.85; }   /* Arabic reads small at the same size */
img, svg { display: block; max-width: 100%; }
a { color: var(--palm); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--brass); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; color: var(--palm-deep); line-height: 1.25; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 10; padding: .6rem 1rem; background: var(--palm); color: #fff; border-radius: var(--radius); }
.skip:focus { top: 1rem; }

/* colonnade band: the same rhythm as palmyrapub.org's top border */
.colonnade { height: 8px; background: repeating-linear-gradient(90deg, var(--palm) 0 46px, var(--brass) 46px 50px, var(--palm-deep) 50px 96px, #6F6457 96px 100px); }

/* family bar: the same switcher on palmyrapub.org, palmyradoor.tech and (to come) langwi.com */
.family-bar { border-block-end: 1px solid var(--border); font-size: .85rem; }
.family-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; min-height: 38px; }
.family-bar .label { color: var(--muted); }
.family-bar a { display: inline-flex; align-items: center; gap: .3em; min-height: 38px; color: var(--ink); text-decoration: none; }
.family-bar a:hover { color: var(--brass); text-decoration: underline; }
.family-bar a[aria-current="page"] { color: var(--palm); font-weight: 700; box-shadow: inset 0 -2px 0 var(--brass); }

/* header */
.site-header { border-block-end: 1px solid var(--border); background: var(--lime); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-block: .9rem; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--palm-deep); margin-inline-end: auto; min-height: 44px; }
.brand svg { width: 38px; height: 44px; flex: none; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.9rem; line-height: 1; }
.brand-by { display: block; font-size: .78rem; letter-spacing: .02em; color: var(--muted); margin-block-start: .25rem; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); }
.nav a:hover { color: var(--brass); }
.lang { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .9rem; border: 1px solid var(--border-strong); border-radius: 999px; text-decoration: none; font-size: .9rem; }

/* hero */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.hero .wrap { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.25fr .75fr; } }
.eyebrow { display: inline-block; margin-block-end: 1rem; font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: var(--brass); }
html[lang="en"] .eyebrow { text-transform: uppercase; letter-spacing: .14em; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); margin-block-end: .4em; }
.lead { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--ink); max-width: 38rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .6rem 1.4rem; border-radius: var(--radius);
  border: 1.5px solid var(--palm); background: var(--palm); color: #fff; font-weight: 700; text-decoration: none; transition: background-color .2s, color .2s; }
.btn:hover { background: var(--palm-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--palm); }
.btn--ghost:hover { background: var(--sand); color: var(--palm-deep); }
.hero-door { justify-self: center; width: min(320px, 60vw); }
/* phones: name and language switch share the first row, the section links take the second */
@media (max-width: 760px) {
  .site-header nav { order: 3; flex-basis: 100%; }
  .lang { order: 2; }
}

/* the hadith: the press's founding message */
.motto { background: var(--palm-deep); color: var(--lime); text-align: center; padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.motto figure { margin: 0; }
.motto .intro { margin: 0 0 .75rem; color: #D8CDB6; font-size: .95rem; }
.motto blockquote { margin: 0 auto; max-width: 46rem; }
.motto .ar { font-family: "Noto Naskh Arabic", var(--display); font-weight: 600; font-size: clamp(2.2rem, 7vw, 3.8rem); line-height: 1.5; color: #fff; margin: 0; }
.motto .tr { font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.7rem); color: var(--light); margin: .6rem 0 0; }
.motto figcaption { margin-block-start: 1.25rem; font-size: .9rem; color: #D8CDB6; }
.motto .why { max-width: 40rem; margin: 1.5rem auto 0; color: #EDE5D4; }

/* sections */
.section { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.section--sand { background: #FFFFFF; }
.section + .section { border-block-start: 1px solid var(--border); }   /* all-white page: fine rules separate sections */
.section h2 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
.section-intro { color: var(--muted); max-width: 44rem; margin-block-end: 2rem; }

/* doors: every course is an arched doorway */
.doors { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.door { display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--border-strong);
  border-start-start-radius: 999px; border-start-end-radius: 999px; border-end-start-radius: var(--radius); border-end-end-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.4rem; text-align: center; }
.door svg { width: 76px; height: 92px; margin: .75rem auto 1rem; }
.door h3 { font-size: 1.45rem; margin-block-end: .35em; }
.door p { color: var(--muted); font-size: .98rem; }
.door .status { display: inline-block; margin: 0 auto .75rem; padding: .1rem .7rem; border-radius: 999px; background: var(--sand); color: var(--brass); font-size: .8rem; font-weight: 700; }
.contents { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: auto 0 0; padding: .9rem 0 0; list-style: none; border-block-start: 1px solid var(--border); font-size: .82rem; color: var(--palm); }
.contents li { padding: .1rem .55rem; border: 1px solid var(--border); border-radius: 999px; }

/* how a door works */
.steps { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0 0 2rem; padding: 0; list-style: none; }
.steps li { counter-increment: step; position: relative; padding: 1.25rem 1.25rem 1.1rem; padding-block-start: 3.4rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.steps li::before { content: counter(step, arabic-indic); position: absolute; top: 1rem; inset-inline-start: 1.25rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--palm); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .95rem; }
html[lang="en"] .steps li::before { content: counter(step); }
.steps h3, .kinds h3, .principles h3, .family h3 { font-family: var(--text); font-size: 1.08rem; font-weight: 700; color: var(--palm-deep); margin-block-end: .35em; }
.steps p, .kinds p, .principles p, .family p { margin: 0; color: var(--muted); font-size: .98rem; }

.kinds, .principles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.kinds li { padding: 1.25rem; border-block-start: 3px solid var(--brass); background: var(--card); border-radius: 0 0 var(--radius) var(--radius); }
.principles li { padding-inline-start: 1rem; border-inline-start: 3px solid var(--palm); }
.soon { font-size: .78rem; font-weight: 700; color: var(--brass); }

/* family */
.family { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.family li { display: flex; flex-direction: column; padding: 1.4rem; background: var(--card); border: 1px solid var(--border); border-block-start: 3px solid var(--palm); border-radius: var(--radius); }
.family li.here { border-color: var(--brass); border-block-start-color: var(--brass); background: #FFFDF8; }
.family .site { margin-block-start: auto; padding-block-start: .9rem; font-weight: 700; }
.family .site a { display: inline-flex; align-items: center; min-height: 44px; }

/* footer */
.site-footer { background: var(--palm-deep); color: #D8CDB6; padding-block: 2.5rem; border-block-start: 3px solid var(--brass); font-size: .92rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--light); }
.site-footer .legal { margin-block-start: 1rem; color: #BFB39C; font-size: .85rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .colonnade, .family-bar, .site-header nav, .actions, .lang { display: none; } .motto { background: none; color: var(--ink); } .motto .ar { color: var(--ink); } }