/* ==========================================================================
   Numera - pages.css
   Styles shared by the generated pages: the nav (page links, solid bar, phone menu, Arabic order), the page head,
   the glance cards, the VAT and Zakat callout, the FAQ and the closing band. generator/templates/base.html loads
   this file after main.css and, on Arabic pages, after rtl.css, so those two files stay as they are.
   The rules only one page uses live in css/pages/<page>.css (pricing.css, how-we-work.css, about.css, faq.css), which
   base.html links last, so they win over the rules here.
   ========================================================================== */

/* ---- Page links in the nav (desktop) ---- */
.nav__link {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease;
}
.nav__link:hover { color: var(--c-accent); }
.nav__link:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---- Solid nav: pages without a dark hero image ----
   The look of main.css's scrolled state, always on. The bar is sticky, not fixed, so it
   takes its own height in the page and the first block of content starts below it. */
.nav.nav--solid {
  position: sticky;
  background: rgba(250,247,242,0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}
.nav--solid .nav__logo-img--white { opacity: 0; }
.nav--solid .nav__logo-img--color { opacity: 1; }
.nav--solid .nav__logo-text { color: var(--c-ink); }
.nav--solid .lang-toggle { color: var(--c-muted); }
.nav--solid .lang-toggle:hover { color: var(--c-primary); }

/* Dark text on a light bar: a solid page, or a hero page once it is scrolled */
.nav.is-scrolled .nav__link,
.nav--solid .nav__link { color: var(--c-ink); }
.nav.is-scrolled .nav__link:hover,
.nav--solid .nav__link:hover { color: var(--c-primary); }

/* ---- Phone menu: a details element, so it opens and closes without JavaScript ---- */
.nav__menu { display: none; }
.nav__menu-button {
  display: block;             /* not grid or flex: older Safari ignores those on a summary */
  width: 44px;
  height: 44px;
  padding: 10px;              /* centres the 24px icon in the 44px tap target */
  margin-inline-end: -10px;   /* the icon lines up with the page gutter */
  border-radius: 999px;
  color: var(--c-white);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.nav__menu-button::-webkit-details-marker { display: none; }
.nav__menu-button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.nav__menu-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.nav__menu-close { display: none; }
.nav__menu[open] .nav__menu-bars { display: none; }
.nav__menu[open] .nav__menu-close { display: inline; }
.nav.is-scrolled .nav__menu-button,
.nav--solid .nav__menu-button { color: var(--c-ink); }

.nav__menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 4px 20px 16px;
  background: var(--c-ground);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 18px 32px rgba(10,21,23,0.10);
}
.nav__menu-link {
  display: block;
  padding: 15px 0;
  border-top: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
}
.nav__menu-link:first-child { border-top: 0; }
.nav__menu-link:hover,
.nav__menu-link:focus-visible { color: var(--c-primary); }

/* ---- Phone: the page links move into the menu (main.css already hides the language toggle) ---- */
@media (max-width: 760px) {
  .nav__right { gap: 8px; }
  .nav__right .nav__link { display: none; }
  .nav__menu { display: block; }
}

/* ---- Arabic ----
   rtl.css forces .nav__right left-to-right, which put the first link farthest from the logo.
   Right-to-left here makes the bar read in order from the logo: Plans, How we work, About,
   FAQ, the language toggle, WhatsApp, and the phone menu button last. Tajawal is set here
   because rtl.css gives it to most Arabic text but not to these new links. */
[dir="rtl"] .nav__right { direction: rtl; }
[dir="rtl"] .nav__link {
  font-family: var(--font-arabic);
  font-size: 15px;
}
[dir="rtl"] .nav__menu-link {
  font-family: var(--font-arabic);
  font-size: 19px;
}

@media (prefers-reduced-motion: reduce) {
  .nav__link { transition: none; }
}

/* ==========================================================================
   Components shared by the plans and prices, how we work and about pages (and the pages to come)
   Logical properties (inline-start, text-align: start) make the same rules work in Arabic; only the fonts and
   sizes are set again in the Arabic block at the end, because main.css gives these elements a Latin font that
   Tajawal has to replace, as it does in rtl.css for the older classes.
   ========================================================================== */

/* An amount and its currency never break across two lines */
.money { white-space: nowrap; }

/* Headings break into even lines, so a short last line never holds one orphaned word */
.page-head__title,
.callout__title,
.faq__title,
.band__title { text-wrap: balance; }

/* A link to #faq-term or #ai-and-partners must not land under the sticky nav */
.faq[id],
.faq__item[id],
.callout-section[id] { scroll-margin-top: 96px; }

/* ---- Page head: title, the answer with its numbers, the terms in short ---- */
.page-head {
  padding: 72px 0 56px;
  background: var(--c-ground);
}
.page-head__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.page-head__title {
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 20px;
}
.page-head__lead {
  max-width: 780px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--c-ink);
}
.page-head__date {
  margin-top: 14px;
  font-size: 14px;
  color: var(--c-muted);
}
.glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 40px 0 16px;
  padding: 0;
  list-style: none;
}
.glance__item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 22px 24px;
}
.glance__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 10px;
}
.glance__text {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(10,21,23,0.78);
}

/* ---- VAT and Zakat ---- */
.callout-section {
  padding: 64px 0;
  background: var(--c-primary);
  color: var(--c-white);
}
.callout__title {
  max-width: 900px;
  margin-bottom: 18px;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.callout__text {
  max-width: 820px;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}

/* ---- FAQ: every answer is visible text, so a reader, a search engine and an AI fetcher all see it ---- */
.faq {
  padding: 72px 0 48px;
  background: var(--c-ground);
}
.faq__title {
  margin-bottom: 32px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.faq__list { max-width: 860px; }
.faq__item {
  padding: 24px 0;
  border-top: 1px solid var(--c-line);
}
.faq__item:last-child { border-bottom: 1px solid var(--c-line); }
.faq__q {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}
.faq__a {
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(10,21,23,0.82);
}
.faq__more {
  margin-top: 28px;
  font-size: 16px;
  color: rgba(10,21,23,0.82);
}
.faq__more a,
.band__link {
  font-weight: 600;
  color: var(--c-primary);
  text-underline-offset: 4px;
}

/* ---- Closing call to action ---- */
.band {
  padding: 56px 0;
  background: var(--c-ground-deep);
  border-top: 1px solid var(--c-line);
}
.band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
}
.band__copy { max-width: 640px; }
.band__title {
  margin-bottom: 10px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.band__text {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(10,21,23,0.78);
}
.band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

/* ---- Closing call: two pills side by side, so the ghost one takes the size of the primary one ---- */
.band__actions .pill--ghost-dark {
  padding: 14px 28px;
  border-color: rgba(20,82,76,0.35);
  font-size: 15px;
}
.band__actions .pill--ghost-dark:hover { background: var(--c-white); }

/* ---- Phone: the shared components tighten up ---- */
@media (max-width: 760px) {
  .page-head { padding: 48px 0 40px; }
  .glance {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
  }
  .glance__item {
    padding: 16px 18px;
    border-radius: 14px;
  }
  .glance__label { margin-bottom: 6px; }
  .glance__text { font-size: 15px; }
  .callout-section { padding: 48px 0; }
  .faq { padding: 52px 0 40px; }
  .band { padding: 44px 0; }
}

/* ---- Arabic: Tajawal for every element that carries words, larger sizes for Arabic letters ---- */
[dir="rtl"] .page-head__eyebrow {
  font-family: var(--font-arabic);
  font-size: 15px;
  text-transform: none;
}
[dir="rtl"] .page-head__title,
[dir="rtl"] .callout__title,
[dir="rtl"] .faq__title,
[dir="rtl"] .band__title { line-height: 1.25; }
[dir="rtl"] .glance__label {
  font-family: var(--font-arabic);
  font-size: 14px;
  text-transform: none;
}
[dir="rtl"] .page-head__date { font-size: 15px; }
/* rtl.css keeps every .pill left-to-right; these labels are Arabic sentences with « » around a name */
[dir="rtl"] .band__actions .pill { direction: rtl; }
[dir="rtl"] .glance__text { font-size: 16px; }
[dir="rtl"] .band__text,
[dir="rtl"] .faq__a { font-size: 18px; }
[dir="rtl"] .faq__q { font-size: 21px; }