/* Darija phrase pages + finder: the self-hosted Arabic font (Noto Naskh Arabic, OFL: /assets/fonts/OFL-NotoNaskhArabic.txt)
   and the phrase card. Built by sites/build_darija_pages.py - edit there. CSP-safe: no inline styles, font-src 'self'. */
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/assets/fonts/NotoNaskhArabic-Bold.ttf") format("truetype");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
[lang="ar"] { font-family: "Noto Naskh Arabic", serif; font-weight: 700; direction: rtl; unicode-bidi: isolate; }
td.ar { font-size: 20px; line-height: 1.6; }

.crumbs { padding-top: var(--s-6); font-size: var(--t-small); color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--muted); }
.dpage .hero.small { padding-top: var(--s-5); }
.dz { font-weight: 600; color: var(--navy); }

.cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); min-width: 0; }
.pcard p { margin: 0; }
.pc-en { color: var(--muted); font-size: 15px; }
.pc-lat { font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: var(--s-2) 0 !important; overflow-wrap: anywhere; }
.pc-ar { font-size: 40px; line-height: 1.6; text-align: right; overflow-wrap: anywhere; }
.pc-say { margin-top: var(--s-2) !important; color: var(--muted); font-size: 15px; }
.pc-say .k { font-weight: 500; color: var(--ink); }
.pcard:not(.big) .pc-lat { font-size: 22px; }
.pcard:not(.big) .pc-ar { font-size: 30px; }
.gpair { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; margin-bottom: var(--s-4); }
.legend { color: var(--muted); font-size: 15px; margin: 0 0 var(--s-3); }
.g-lab { font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-2); }
@media (max-width: 639px) { .gpair { grid-template-columns: 1fr; } .pc-lat { font-size: 26px; } .pc-ar { font-size: 34px; } }

.dialogue { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.dialogue li { display: grid; grid-template-columns: 90px 1fr 1fr; gap: var(--s-1) var(--s-4); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dialogue li:last-child { border-bottom: 0; }
.who { font-size: 13px; font-weight: 500; color: var(--muted); grid-row: span 2; padding-top: 3px; }
.dl-lat { font-weight: 600; color: var(--navy); }
.dl-ar { font-size: 20px; text-align: right; line-height: 1.6; }
.dl-en { grid-column: 2 / -1; color: var(--muted); font-size: 15px; }
.dl-title { font-weight: 500; }
@media (max-width: 639px) {
  .dialogue li { grid-template-columns: 1fr; }
  .who { grid-row: auto; padding: 0; }
  .dl-en { grid-column: auto; }
}

.gtk { padding-left: 20px; }
.gtk li { margin-bottom: var(--s-2); }
.related { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.related a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); text-decoration: none; }
.related a:hover { border-color: var(--line-strong); }
.r-lab { font-weight: 500; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.r-lat { color: var(--muted); }
.r-ar { font-size: 22px; line-height: 1.6; text-align: right; }

/* phone: the 4-column phrase tables become one block per phrase (no sideways scroll) */
@media (max-width: 639px) {
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .ptable tr:last-child { border-bottom: 0; }
  .ptable td { padding: 0; border: 0; }
  .ptable td:first-child { color: var(--muted); font-size: 14px; }
  .ptable td.ar { text-align: right; white-space: normal; font-size: 22px; }
}

/* finder page: the "Free page" hint + the Common phrases list */
.pghint { margin: var(--s-3) 0 0; font-weight: 500; }
.common { margin-top: var(--s-6); }
.common h2 { margin-top: 0; }
.common-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.common-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); text-decoration: none; font-weight: 500; }
.common-list a:hover { border-color: var(--navy); }

.course-cta { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); }

.cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.cmp-col { display: flex; flex-direction: column; min-width: 0; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--field); }
.cmp-col h3 { margin: 0; }
.cmp-price { margin: var(--s-1) 0 var(--s-3); font-weight: 600; color: var(--ink); }
.cmp-col ul { margin: 0 0 var(--s-4); padding-left: 1.1em; }
.cmp-col li + li { margin-top: 4px; }
.cmp-col > p:last-child { margin: auto 0 0; }
.dpage .cmp { grid-template-columns: 1fr; }
@media (max-width: 899px) { .cmp { grid-template-columns: 1fr; } }