/* Prodca National General Trading — layout.
   Colour and type come only from brand-tokens.css.
   @import has to stay first; an earlier @font-face would drop the tokens.
   Horizontal lockup viewBox already includes about one-third of the
   clear-space unit. At 56px tall the file is about 240px wide, which
   is the on-screen minimum. Do not render it smaller, including at 390px. */
@import url("brand-tokens.css");

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Jost-VF.woff2") format("woff2");
}

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("../fonts/ReadexPro-VF.woff2") format("woff2");
}

:root {
  --header-pad: 0.7rem;
  --header-h: calc(var(--logo-header-height) + (var(--header-pad) * 2));
  --space: clamp(3.375rem, 6.75vw, 5.8125rem);
  --wrap: 72rem;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: var(--fs-body);
}

/* The token file sets the Arabic stack on html, then sets a Latin stack
   on body, which wins. Apply the Arabic stack on the body as well.
   A nested LTR block (the English half of the 404 page, email addresses)
   switches back to Jost. */
html[lang="ar"] body {
  font-family: var(--font-arabic);
  line-height: 1.8;
}

[dir="ltr"] {
  font-family: var(--font-latin);
  line-height: var(--lh-latin);
}

[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3 {
  font-family: var(--font-latin);
  font-weight: 400;
  letter-spacing: 0.02em;
}

body.nav-open {
  overflow: hidden;
}

/* Arabic reading size sits a little above the Latin size. */
html[lang="ar"] {
  font-size: 106.25%;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  text-wrap: balance;
  line-height: 1.25;
}

h1 {
  margin: 0;
  font-size: var(--fs-h1);
}

h2 {
  margin: 0;
  font-size: var(--fs-h2);
}

h3 {
  margin: 0 0 0.85rem;
  font-size: var(--fs-h3);
  line-height: 1.45;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-inline-start: 1.2rem;
}

li + li {
  margin-top: 0.45rem;
}

.latin,
.num {
  font-family: var(--font-latin);
}

.num {
  font-weight: 500;
  letter-spacing: 0.14em;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: 0;
  z-index: 80;
  transform: translateY(-140%);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.7rem 1rem;
  text-decoration: none;
}

.skip-link:focus {
  transform: none;
}

.wrap {
  width: min(var(--wrap), calc(100% - clamp(32px, 5vw, 4.5rem)));
  margin-inline: auto;
}

.section,
.hero,
.band,
.sector {
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.section {
  padding: var(--space) 0;
}

.section h2::before,
.band h2::before,
.notice h1::before,
.notice h2::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: var(--frame-width);
  margin-bottom: 1.15rem;
  background: var(--color-rule);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-bg);
  border-bottom: var(--frame-width) solid var(--color-rule);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem 40px;
  min-height: var(--header-h);
  padding: var(--header-pad) 0;
}

.logo {
  display: flex;
  flex: none;
  align-items: center;
  text-decoration: none;
}

.logo img,
.footer-logo img {
  display: block;
  flex: none;
  height: var(--logo-header-height);
  width: auto;
  min-width: var(--logo-min-width-horizontal);
  max-width: none;
  aspect-ratio: 868.5 / 297.8;
}

.header-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: auto;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.75rem;
  border: var(--frame-width) solid var(--frame-color);
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

html[lang="en"] .lang-switch {
  font-family: var(--font-arabic);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}

.lang-switch:hover {
  color: var(--color-link-hover);
  border-color: var(--prodca-gold-deep);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--frame-width) solid var(--frame-color);
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--color-text);
}

.nav-toggle-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 16px;
  height: 10px;
}

.nav-toggle-box span {
  display: block;
  height: 1px;
  background: currentColor;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.1rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

html[lang="en"] .site-nav a {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.site-nav a:hover {
  color: var(--color-link-hover);
}

.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h));
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}

.hero-inner {
  margin-block: auto;
  padding-block: clamp(4rem, 11vh, 7.5rem);
}

.hero .eyebrow {
  margin: 0 0 1.35rem;
  color: var(--color-inverse-link);
}

.hero h1,
.band h2,
.hero .lede,
.band p {
  color: var(--color-inverse-text);
}

.lede {
  max-width: 38rem;
  margin: 1.35rem 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

html[lang="ar"] .lede {
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
}

.btn-row,
.sector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  border: var(--frame-width) solid transparent;
  border-radius: var(--btn-radius);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

html[lang="en"] .btn {
  letter-spacing: 0.04em;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-text);
}

a.btn-gold,
a.btn-gold:hover {
  background: var(--btn-gold-bg);
  color: var(--prodca-navy);
  border-color: var(--btn-gold-bg);
}

a.btn-gold:hover {
  background: var(--btn-gold-hover);
  border-color: var(--btn-gold-hover);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--frame-color);
}

.btn-outline:hover {
  color: var(--color-link-hover);
  border-color: var(--prodca-gold-deep);
}

.btn-line {
  background: transparent;
  color: var(--color-inverse-text);
  border-color: var(--prodca-gold);
}

.btn-line:hover {
  color: var(--color-inverse-bg);
  background: var(--prodca-gold-light);
  border-color: var(--prodca-gold-light);
}

.hero-index {
  border-top: var(--frame-width) solid color-mix(in srgb, var(--prodca-gold) 55%, transparent);
}

.hero-index-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero-index a {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 100%;
  padding: 1.35rem 1.15rem 1.5rem;
  border-inline-start: var(--frame-width) solid color-mix(in srgb, var(--prodca-gold) 45%, transparent);
  color: var(--color-inverse-text);
  text-decoration: none;
}

.hero-index a:first-child {
  border-inline-start: 0;
}

.hero-index a:hover {
  color: var(--color-inverse-link);
}

.hero-index .num {
  color: var(--color-inverse-link);
  font-size: 0.75rem;
}

.about-grid,
.vision-grid,
.footer-grid {
  display: grid;
  gap: 2rem 3.5rem;
}

.about-grid {
  grid-template-columns: minmax(12rem, 0.7fr) 1.45fr;
  align-items: start;
}

.section-copy p + p {
  margin-top: 0.15rem;
}

.sector-list {
  margin-top: 2.75rem;
  border-top: var(--frame-width) solid var(--color-rule);
}

.sector {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.75rem 2rem;
  padding: 2.75rem 0;
  border-bottom: var(--frame-width) solid var(--color-border);
}

.sector-kicker {
  margin: 0.35rem 0 0;
  color: var(--color-accent-text);
  font-size: 0.8125rem;
}

@media (min-width: 901px) {
  .sector-body {
    max-width: 70ch;
  }
}

.sector-body ul {
  max-width: 44rem;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin: 2.75rem 0 0;
  padding: 0;
  list-style: none;
}

.why-grid li {
  margin: 0;
  padding-top: 1.15rem;
  border-top: var(--frame-width) solid var(--color-rule);
}

.why-grid h3 {
  margin-bottom: 0.55rem;
}

.band {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  padding: var(--space) 0;
}

.vision-grid {
  grid-template-columns: 1fr 1fr;
}

.band .eyebrow,
.band h2::before {
  background: var(--prodca-gold);
}

.contact-list {
  display: grid;
  gap: 1.35rem 2rem;
  margin: 2.25rem 0 0;
}

.contact-list div {
  display: grid;
  gap: 0.25rem;
  padding-top: 1rem;
  border-top: var(--frame-width) solid var(--color-border);
}

.contact-list dt {
  color: var(--color-accent-text);
  font-size: var(--fs-caption);
  font-weight: 500;
}

html[lang="en"] .contact-list dt {
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.contact-list dd {
  margin: 0;
  color: var(--color-text);
  font-size: 1.125rem;
}

.contact-list a {
  text-decoration-thickness: 1px;
}

.site-footer {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.75rem;
}

.footer-grid {
  grid-template-columns: minmax(15rem, 1.35fr) minmax(10rem, 0.8fr) minmax(12rem, 1fr);
  align-items: start;
}

.footer-logo {
  display: inline-flex;
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.footer-copy,
.footer-license {
  max-width: 36rem;
  color: var(--color-inverse-text);
  font-size: var(--fs-caption);
  line-height: 1.7;
}

.footer-license {
  margin-top: 0.35rem;
  color: var(--color-inverse-link);
}

.footer-heading,
.social-name {
  margin: 0 0 0.75rem;
  color: var(--color-inverse-link);
  font-size: var(--fs-caption);
  font-weight: 500;
}

html[lang="en"] .footer-heading,
html[lang="en"] .social-name {
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.nav-store-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--color-text);
  white-space: nowrap;
}

.nav-store .badge {
  min-height: 0;
  padding: 0.2rem 0.5rem;
}

.quick-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-links li + li {
  margin-top: 0.15rem;
}

.quick-links a,
.social-list a {
  color: var(--color-inverse-text);
  text-decoration: none;
}

.quick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.quick-links a:hover,
.social-list a:hover {
  color: var(--color-inverse-link);
}

.social-groups {
  display: grid;
  gap: 1.25rem;
}

.social-list {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--frame-width) solid var(--prodca-gold);
  border-radius: var(--btn-radius);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  border: var(--frame-width) solid var(--prodca-gold-deep);
  border-radius: var(--btn-radius);
  color: var(--color-accent-text);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.2;
}

html[lang="en"] .badge {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer .badge {
  min-height: 0;
  margin-inline-start: 0.35rem;
  padding: 0.2rem 0.45rem;
  border-color: var(--prodca-gold-light);
  color: var(--color-inverse-link);
}

.store-pending {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-inverse-text);
}

.notice {
  padding: clamp(4.5rem, 12vw, 7.5rem) 0 1rem;
}

.notice-en {
  padding-top: 2.75rem;
  padding-bottom: clamp(4rem, 10vw, 6rem);
}

.notice .btn {
  margin-top: 1.5rem;
}

::selection {
  background: var(--prodca-gold-light);
  color: var(--prodca-navy);
}

@media (max-width: 1200px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    max-height: calc(100svh - var(--header-h));
    overflow: auto;
    padding: 0.35rem 0 1rem;
    background: var(--color-bg);
    border-bottom: var(--frame-width) solid var(--color-rule);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav a {
    display: flex;
    width: 100%;
    padding: 0.15rem 0;
    border-bottom: var(--frame-width) solid var(--color-border);
    white-space: normal;
  }

  .nav-store-pending {
    width: 100%;
    padding: 0.15rem 0;
    border-bottom: var(--frame-width) solid var(--color-border);
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .nav-lang {
    padding-top: 0.75rem;
  }

  .nav-lang .lang-switch {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .footer-grid,
  .vision-grid,
  .about-grid,
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .hero {
    min-height: 0;
  }

  .hero-inner {
    margin-block: 0;
    padding-block: 3.25rem 2.5rem;
  }

  .hero-index-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-index a {
    border-inline-start: 0;
    border-top: var(--frame-width) solid color-mix(in srgb, var(--prodca-gold) 45%, transparent);
  }

  .hero-index a:nth-child(odd) {
    border-inline-end: var(--frame-width) solid color-mix(in srgb, var(--prodca-gold) 45%, transparent);
  }

  .hero-index a:nth-child(-n + 2) {
    border-top: 0;
  }

  .sector {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 2.15rem 0;
  }
}

@media (max-width: 560px) {
  .why-grid,
  .vision-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .btn-row .btn,
  .sector-actions .btn {
    width: 100%;
  }
}

@media (forced-colors: active) {
  .btn,
  .badge,
  .lang-switch,
  .nav-toggle,
  .social-list a {
    border: 1px solid ButtonText;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .site-header {
    position: static;
  }

  .nav-toggle,
  .hero-index {
    display: none !important;
  }

  .hero,
  .band,
  .site-footer {
    background: var(--prodca-white) !important;
    color: var(--prodca-graphite) !important;
  }
}

/* ===== v2.1 "Quiet Authority" overrides (preview) ===== */
:root { --wrap: 75rem; /* 1200px */ --space: clamp(4rem, 8vw, 6rem); /* 64–96px, 8pt grid */ }
.wrap { width: min(var(--wrap-max), calc(100% - 48px)); }
@media (max-width: 480px) { .wrap { width: calc(100% - 32px); } }
body { color: var(--color-text-body); }
html[lang="ar"] { font-size: 100%; }
html[lang="ar"] body { line-height: var(--lh-arabic); }

/* Headings: Jost 300 only at >=32px */
h1, h2, h3 { font-weight: 400; }
html[lang="en"] h1 { font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 3.8rem); letter-spacing: 0.01em; }
html[lang="en"] h2 { font-weight: 300; font-size: clamp(2rem, 3vw, 2.5rem); }
html[lang="ar"] h1 { font-weight: 400; font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.4; }
html[lang="ar"] h2 { font-weight: 400; font-size: clamp(1.75rem, 2.8vw, 2.25rem); line-height: 1.4; }
html[lang="ar"] h3 { font-weight: 500; }

/* Hero: sand ground, navy text, gold only as hairline */
.hero { background: var(--color-bg-alt); color: var(--color-text-body); min-height: 0; }
.hero-inner { padding-block: 96px 80px; }
.hero h1 { color: var(--color-text); }
.hero .lede { color: var(--color-text-body); }
.hero .eyebrow { color: var(--prodca-gold-deep-on-sand); }
.hero .eyebrow::after { content: ""; display: block; width: 48px; height: 1px; margin-top: 16px; background: var(--prodca-gold); }
.hero-index { border-top: 1px solid var(--prodca-gold); }
.hero-index a { color: var(--color-text); border-inline-start-color: var(--prodca-stone); }
.hero-index a:hover { color: var(--prodca-navy-hover); }
.hero-index .num { color: var(--color-text-muted); }
@media (max-width: 720px) {
  .hero-index a { border-top-color: var(--prodca-stone); }
  .hero-index a:nth-child(odd) { border-inline-end-color: var(--prodca-stone); }
  .hero-inner { padding-block: 64px 48px; }
}

/* Buttons: navy primary, navy outline; no gold UI */
.btn-outline:hover, .lang-switch:hover { color: var(--prodca-navy); border-color: var(--prodca-navy); background: var(--color-bg-alt); }
.btn { padding: 12px 24px; }
.badge { border-color: var(--prodca-slate); color: var(--color-text-muted); }
.site-footer .badge { border-color: var(--prodca-gold-light); color: var(--prodca-gold-light); }
a:hover { color: var(--prodca-navy-hover); }
.site-nav a:hover { color: var(--prodca-navy-hover); text-decoration: underline; text-underline-offset: 6px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.site-footer :focus-visible, .band :focus-visible { outline-color: var(--prodca-ivory); }

/* Sectors: gold top hairline per card */
.sector { border-top: 1px solid var(--prodca-gold); border-bottom: 0; }
.sector-list { border-top: 0; }
.why-grid li { border-top-color: var(--prodca-gold); }

/* Secondary text uses slate / gold-deep on ivory only */
.sector-kicker, .contact-list dt { color: var(--prodca-gold-deep); }

/* Arabic: 16px minimum everywhere (menu, header, badges, footer) */
html[lang="ar"] .site-nav a, html[lang="ar"] .nav-store-pending,
html[lang="ar"] .eyebrow, html[lang="ar"] .badge, html[lang="ar"] .sector-kicker,
html[lang="ar"] .contact-list dt, html[lang="ar"] .footer-copy, html[lang="ar"] .footer-license,
html[lang="ar"] .footer-heading, html[lang="ar"] .social-name, html[lang="ar"] .quick-links a,
html[lang="ar"] .store-pending, html[lang="ar"] small,
html[lang="en"] .lang-switch { font-size: 1rem; }
html[lang="ar"] .hero-index span:not(.num) { font-size: 1rem; }
/* Latin numerals/labels inside Arabic pages are Latin text: keep >=16px for consistency */
html[lang="ar"] .hero-index .num, html[lang="ar"] .lang-switch { font-size: 1rem; }
html[lang="ar"] .site-footer .badge, html[lang="ar"] .nav-store .badge { font-size: 1rem; }

/* v2.1 fix: About measure ~60–80 chars/line, aligned to the start (right in RTL) */
@media (min-width: 901px) {
  .about-grid { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); justify-content: start; }
  .about-grid .section-copy { max-width: 54ch; justify-self: start; text-align: start; }
  html[lang="ar"] .about-grid .section-copy { max-width: 60ch; }
}