/* =====================================================================
   5Horof V2 — design system
   Clean industrial: deep navy, generous whitespace, large imagery,
   restrained accent. Written mobile-first, and direction-neutral
   (logical properties) so the Arabic RTL build needs almost no overrides.
   No CSS framework — every rule here is one the site actually uses.
   ===================================================================== */

/* The stylesheets that used to be @imported from here are now requested directly
   by inc/layout.php.

   @import is serial: the browser cannot know those seven files exist until it has
   downloaded and parsed this one, so it pays a second round trip before anything
   on the page is styled. On a phone in an export market that is 150-300ms of
   unstyled page. As <link> tags they are fetched at the same time as this file.

   ORDER MATTERS and layout.php preserves it: this file declares the tokens, the
   next six override in sequence, and mobile.css must come last because it narrows
   rules the others set. */

:root {
  /* Brand — carried over from V1's #001f9a but darkened for contrast.
     Navy reads as engineering and reliability, which is what a B2B
     buyer is looking for on a factory site. */
  --navy-900: #071426;
  --navy-800: #0B1F3A;
  --navy-700: #12305A;
  --navy-600: #1B457F;
  --navy-500: #2563AC;
  --blue-400: #4C8FD8;
  --blue-100: #DCE9F8;
  --blue-50:  #F1F6FC;

  --accent:      #00A3A3;   /* teal — used sparingly, for emphasis only */
  --accent-dark: #007E7E;

  /* The live site's brand blue and its yellow. Kept exactly, because the
     header, the hero buttons and the Shop Online pill are recognisably
     these two colours and the business is known by them. */
  --brand:       #001F9A;
  --brand-2:     #003CFF;
  --yellow:      #FDD717;
  --yellow-dark: #E6C210;

  --ink:      #0C1524;
  --ink-soft: #47566B;
  --ink-mute: #7A879B;
  --line:     #E3E9F1;
  --line-soft:#EFF3F8;
  --surface:  #FFFFFF;
  --surface-2:#F7F9FC;

  --ok:   #0F7B3E;
  --warn: #B4690E;
  --err:  #B42318;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(12,21,36,.05), 0 1px 3px rgba(12,21,36,.06);
  --shadow:    0 4px 12px rgba(12,21,36,.07), 0 2px 4px rgba(12,21,36,.05);
  --shadow-lg: 0 18px 44px rgba(12,21,36,.12);

  --wrap: 1200px;
  --gut: 1.25rem;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, not `hidden`: hidden would make this a scroll container and every
     position:sticky inside it (the header, the chip bar) would stop sticking.
     clip refuses the scroll without creating one. */
  overflow-x: clip;
}

/* Jumping to #about or #products would otherwise land with the heading hidden
   behind the fixed header. This leaves room for it. */
section[id], [id]:target { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  overflow-x: clip;
}

img, video { max-width: 100%; height: auto; display: block; }

/* A long email, URL or product code has no break opportunity in it, and an
   unbreakable word sets its container's minimum width — which is how one word
   drags an entire section off the side of a phone. Allow the break. */
h1, h2, h3, h4, p, li, a, span, td, th, label, summary { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Keyboard users need to see where they are */
:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; border-radius: 4px; }

/* Off-screen until focused — but clipped rather than parked at -9999px, which
   would add that much inline overflow and, in Arabic, drag the page sideways. */
.skip-link {
  position: absolute; inset-inline-start: 0; top: 0; z-index: 200;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  background: var(--navy-800); color: #fff; padding: .75rem 1.25rem;
  white-space: nowrap;
}
.skip-link:focus { width: auto; height: auto; clip-path: none; overflow: visible; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.section--alt { background: var(--surface-2); }
.section--navy { background: var(--navy-800); color: #fff; }
.section--navy .sec-kicker { color: var(--blue-400); }
.section--navy .sec-lead, .section--navy p { color: #C6D4E6; }

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1rem; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-kicker {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy-500); margin-bottom: .75rem;
}
.sec-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  font-weight: 600; font-size: .97rem; cursor: pointer; text-align: center;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary  { background: var(--navy-800); color: #fff; }
.btn--primary:hover  { background: var(--navy-700); color: #fff; }
.btn--accent   { background: var(--accent); color: #fff; }
.btn--accent:hover   { background: var(--accent-dark); color: #fff; }
.btn--ghost    { background: transparent; color: var(--navy-800); border-color: var(--line); }
.btn--ghost:hover    { border-color: var(--navy-800); }
.btn--on-dark  { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--on-dark:hover  { background: rgba(255,255,255,.18); color: #fff; }
.btn--wa       { background: #25D366; color: #08331a; }
.btn--wa:hover { background: #1FBE5A; color: #08331a; }
.btn--lg  { padding: 1rem 1.9rem; font-size: 1.03rem; }
.btn--block { width: 100%; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--blue-100); box-shadow: var(--shadow); transform: translateY(-3px); }
.card__media { aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 1.15rem 1.25rem 1.35rem; }
.card__title { font-size: 1.08rem; font-weight: 700; margin-bottom: .35rem; }
.card__text { font-size: .93rem; color: var(--ink-soft); margin-bottom: .85rem; }
.card__link { font-size: .9rem; font-weight: 600; color: var(--navy-600); display: inline-flex; gap: .35rem; align-items: center; }
.card:hover .card__link .arw { transform: translateX(3px); }
.arw { transition: transform .2s var(--ease); }

/* ---------- pills & tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 100px; font-size: .78rem; font-weight: 600;
  background: var(--blue-50); color: var(--navy-600); border: 1px solid var(--blue-100);
}
.pill--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); }
.tag { font-size: .72rem; color: var(--ink-mute); background: var(--surface-2); border: 1px solid var(--line); padding: .18rem .5rem; border-radius: 6px; }

/* ---------- stat block ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat { background: var(--surface); padding: 1.4rem 1.1rem; text-align: center; }
.stat__num { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; color: var(--navy-800); line-height: 1; letter-spacing: -.03em; }
.stat__label { font-size: .8rem; color: var(--ink-mute); margin-top: .4rem; }
.section--navy .stats { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.section--navy .stat { background: var(--navy-800); }
.section--navy .stat__num { color: #fff; }
.section--navy .stat__label { color: #A9BDD6; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- forms ---------- */
.field { margin-bottom: 1rem; }
.field__label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; color: var(--ink); }
.field__hint { font-size: .8rem; color: var(--ink-mute); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; padding: .8rem .95rem; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 4px var(--blue-50);
}
.textarea { min-height: 6rem; resize: vertical; }
.field--err .input, .field--err .select, .field--err .textarea { border-color: var(--err); }
.field__err { font-size: .8rem; color: var(--err); margin-top: .35rem; display: none; }
.field--err .field__err { display: block; }

/* choice chips — replace long dropdowns, far easier on a phone */
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: block; padding: .6rem 1rem; border: 1.5px solid var(--line); border-radius: 100px;
  font-size: .9rem; font-weight: 500; cursor: pointer; user-select: none;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.choice input:checked + span { border-color: var(--navy-800); background: var(--navy-800); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* ---------- misc ---------- */
.muted { color: var(--ink-mute); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
hr.rule { border: 0; border-top: 1px solid var(--line); margin-block: clamp(2rem,5vw,3.5rem); }