/* NPF UI corrections — loaded last on every page (see .dev/seo-patch.py, which adds the <link>).
 *
 * These are ordinary CSS overrides for the visual defects that the stacked stylesheets of the export
 * (_next/static/css/*) leave behind: the header lockup reads backwards in Arabic and is stretched across
 * the pill, the hero's two quick buttons fall out of the hero card below ~1300px, the language switch
 * shows a Latin "AR" on English pages, the journey tables on /explore are set at 13/10/9px, and the
 * "Proxeed Women" pairing call-to-action is a plain text link.
 *
 * The file has no ?v= stamp on purpose: it is NOT under /_next/static, so the host's default lifetime
 * applies and a new copy is picked up on the next revalidation. Nothing here changes the DOM.
 */

/* ------------------------------------------------------------------ header lockup
 * The markup is server-rendered on all pages and carries both lines:
 *   strong  = نايل فارما فود        (Arabic wordmark)
 *   small   = NILE PHARMA FOOD     (Latin wordmark)
 * Only one of them belongs on screen per language, with the brand tagline underneath, set flush —
 * the old rules used `direction:ltr` + `justify-content:space-between`, which mirrored the three words
 * in Arabic and stretched them edge to edge inside the pill. */
.ca-site .ca-brand,
.ca-site .ca-brand-copy,
.ca-site .ca-brand-line { direction: inherit; }

html[dir="rtl"] .ca-site .ca-brand,
html[dir="rtl"] .ca-site .ca-brand-copy { direction: rtl; }
html[dir="ltr"] .ca-site .ca-brand,
html[dir="ltr"] .ca-site .ca-brand-copy { direction: ltr; }

.ca-site .ca-brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
}

.ca-site .ca-brand-line {
  display: flex;
  width: auto;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.3em;
  letter-spacing: 0;
  white-space: nowrap;
}

.ca-site .ca-brand-copy strong.ca-brand-line {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}

.ca-site .ca-brand-copy small.ca-brand-line {
  font: 600 9px/1.3 var(--font-sans);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* one wordmark per language */
html[dir="rtl"] .ca-site .ca-brand-copy small.ca-brand-line { display: none; }
html[dir="ltr"] .ca-site .ca-brand-copy strong.ca-brand-line { display: none; }

/* the tagline (the brand's own slogan, the one in the Organization JSON-LD) */
.ca-site .ca-brand-copy::after {
  content: "نهتم بك";
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--nile-text3, #9db2c2);
}
html[lang="en"] .ca-site .ca-brand-copy::after {
  content: "We care about you";
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .ca-site .ca-brand-copy strong.ca-brand-line { font-size: 12px; }
  .ca-site .ca-brand-copy small.ca-brand-line { font-size: 8.5px; }
  .ca-site .ca-brand-copy::after { font-size: 8.5px; }
  html[lang="en"] .ca-site .ca-brand-copy::after { font-size: 7px; }
}

/* ------------------------------------------------------------------ language switch
 * On English pages the switch points at the Arabic edition; AR in Latin letters reads as a language
 * code, not as an invitation. It becomes «ع» set in the site's display face (Thmanyah), bold. */
html[lang="en"] .ca-site .ca-language {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1;
}
/* The English header used to offer the language switch as the Latin letters «AR». It now shows the single
 * Arabic letter «ع», set in the site's own display face (Thmanyah) at bold weight — no var() here: --font-sans
 * is not defined on these pages, and an invalid var() drops the whole declaration, which sent the letter back
 * to a Latin-only fallback. */
html[lang="en"] .ca-site .ca-language::before {
  content: "ع";
  font-family: "Thmanyah Serif Display", fontSans, "fontSans Fallback", serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0;
  display: block;
  transform: none;
}
.ca-site .ca-language { font-family: "Thmanyah Serif Display", fontSans, "fontSans Fallback", sans-serif; }

/* ------------------------------------------------------------------ home hero: the quick actions
 * .ca-hero-copy is absolutely positioned at a fixed top inside a hero whose height is a viewport
 * fraction; below ~1300px the copy is taller than the hero and «ابحث / اسأل NPF» (and, on the English
 * page, the CTA) spill over the bottom edge of the card. Letting the copy sit in the flow again and
 * giving it the same top offset as padding makes the hero grow around it at every width. */
@media (min-width: 761px) {
  .ca-site .ca-home .ca-hero {
    height: auto !important;
    min-height: min(86svh, 780px) !important;
    max-height: none !important;
    padding-bottom: 92px !important;
  }
  .ca-site .ca-home .ca-hero-copy {
    position: relative !important;
    top: auto !important;
    inset-block-start: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: min(46%, 600px) !important;
    max-width: 600px !important;
    margin-inline-start: calc(var(--ca-gutter, 24px) + 42px) !important;
    margin-inline-end: 0 !important;
    padding: 122px 0 0 !important;
    z-index: 5;
  }
  .ca-site .ca-home .ca-hero-quick { margin-top: 18px; }
}

@media (max-width: 760px) {
  .ca-site .ca-home .ca-hero-copy {
    position: relative !important;
    top: auto !important;
    inset-inline-start: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-inline: var(--ca-gutter, 16px) !important;
    padding-top: 104px !important;
    padding-bottom: 8px;
  }
  .ca-site .ca-home .ca-hero { height: auto !important; min-height: auto !important; }
  .ca-site .ca-home .ca-hero-quick > a,
  .ca-site .ca-home .ca-hero-quick > button { min-height: 40px !important; font-size: 12px !important; }
}

/* ------------------------------------------------------------------ the ghost word behind the pack
 * «PLUS» is a Latin-only flourish; in Arabic it becomes بروكسيد بلس, so it needs the site's Arabic
 * face and a size that keeps two words on one line. */
html[dir="rtl"] .nile-hero-ghost {
  font-family: var(--font-sans) !important;
  font-size: clamp(58px, 7vw, 104px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ /explore: the journey tables
 * 13px titles over 10px bodies and 9px kickers, in three columns of a very dense table. One step up
 * for every level and a wider canvas so the columns stop being cramped. */
.atlas-journey-builder { max-width: 1560px; }
.atlas-journey-result-grid { gap: 14px; }
.atlas-journey-column { padding: 20px 20px 14px; }
.atlas-journey-column-title h3 { font-size: 17px; }
.atlas-journey-column-title span { font-size: 12px; }
.atlas-journey-column-note { font-size: 12.5px; line-height: 1.75; margin-top: 12px; }
.atlas-journey-column li > a,
.atlas-journey-product-row > a { padding-block: 16px; gap: 6px; }
.atlas-journey-column li small { font-size: 11px; }
.atlas-journey-column li strong { font-size: 15.5px; line-height: 1.65; }
.atlas-journey-column li span { font-size: 13px; line-height: 1.8; }
.atlas-journey-column li i { font-size: 12px; }
.atlas-journey-library-links a { font-size: 12.5px; }
.atlas-journey-option strong { font-size: 17px; }
.atlas-journey-option small { font-size: 12.5px; line-height: 1.85; }
.atlas-journey-disclaimer { font-size: 13px; line-height: 1.8; }

@media (max-width: 1100px) {
  .atlas-journey-column li strong { font-size: 15px; }
  .atlas-journey-column li span { font-size: 12.5px; }
}

/* ------------------------------------------------------------------ Proxeed Women pairing card
 * The pairing paragraph on the male product pages is a full-width link; it becomes the one pink
 * surface of the page, with the arrow on its own disc. */
.ca-site .pd-pair {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(255, 138, 176, 0.38);
  border-radius: 24px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 178, 205, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 138, 176, 0.1), rgba(255, 138, 176, 0.03));
  padding: 22px 24px;
}
.ca-site .pd-pair > p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--nile-text, #eaf3ff);
}
.ca-site .pd-pair > a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  justify-self: start;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 168, 198, 0.5);
  background: linear-gradient(100deg, #ff8ab0, #ffb3cd 55%, #ffd9e6);
  color: #3d0f22;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 34px -18px rgba(255, 138, 176, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.ca-site .pd-pair > a:hover,
.ca-site .pd-pair > a:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 18px 40px -16px rgba(255, 138, 176, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* the pairing card can sit beside the product text on wide screens instead of stacking under it */
@media (min-width: 1100px) {
  .ca-site .pd-about .pd-pair { max-width: 520px; }
}

/* ------------------------------------------------------------------ product facts
 * The availability sentence is gone from the copy (see the product pages); the fact list becomes a
 * single column of short label/value pairs so it never shows a half-empty row. */
.ca-site .pd-facts { gap: 10px 26px; }
.ca-site .pd-facts dt { font-size: 11px; letter-spacing: 0.02em; }
.ca-site .pd-facts dd { font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .ca-site .pd-pair > a { transition: none; }
}

/* Checkout: the invalid-form banner names the fields first, then says where to look. The hint sits on its own
   line so the field list stays readable on a phone. */
.npf-banner-hint,
.npf-notice .npf-banner-hint {
  display: block;
  margin-top: .35em;
  font-weight: 400;
  font-size: .92em;
  opacity: .82;
  line-height: 1.5;
}