/* ============================================================
   FINAS Manpower Recruitment Corporation – Design Tokens + Shared Base
   ------------------------------------------------------------
   Defined ONCE. Imported into every mock-up page.
   Palette comes straight from the FINAS logo:
     Royal Blue #17478A · Red #EA2331 · Gold #F9DE3B · Navy #1B294A
   Never redefine a token in a page-scoped <style> block.
   Shared nav + footer blocks get appended when the homepage
   directions are built, so all directions read as one brand.
   ============================================================ */

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root {
  /* --- Primary palette (carries every page) --- */
  --blue:#17478A;          /* Royal Blue – primary, brand soul (logo globe) */
  --navy:#1B294A;          /* Dark Navy – wordmark ink, darkest grounds */
  --blue-deep:#0F3266;     /* hover / gradient partner for --blue */

  /* --- Accent palette – ENERGY ONLY, never a flood --- */
  --red:#EA2331;           /* Red – action: CTAs, key moments (logo arc) */
  --red-deep:#C21824;      /* hover states / red on light where contrast matters */
  --gold:#F9DE3B;          /* Gold – TAHANAN highlight: underlines, stats on navy */
  --gold-deep:#B89A0A;     /* gold-derived, readable on light grounds */

  /* --- Derived tints (fine to use for surfaces) --- */
  --blue-tint-20:#D1DCEC;
  --blue-tint-10:#E4EBF4;
  --blue-tint-05:#F1F5FA;
  --red-tint-10:#FCE6E8;
  --gold-tint-15:#FEF7D8;

  /* --- Support / UI neutrals --- */
  --cloud:#F4F6FA;         /* cool off-white background */
  --paper:#FFFFFF;
  --ink:#141E33;           /* body text – near-navy, never pure black */
  --ink-soft:#3E4A61;
  --ink-faint:#68748B;
  --line:#DFE5EE;
  --line-soft:#EBF0F6;

  /* --- Typography ---
     Display: Archivo – confident grotesque, echoes the bold FINAS wordmark.
     Body: Inter – clean, highly legible, matches FINAS document suite.
     Per-language overrides (real build, via :lang()):
       ja: "Noto Sans JP"  ·  zh: "Noto Sans SC"  ·  ar: "Noto Sans Arabic" + RTL */
  --display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --text-xs:0.8125rem;                                        /* 13px */
  --text-s:0.9375rem;                                         /* 15px */
  --text-base:clamp(1rem, 0.96rem + 0.2vw, 1.125rem);         /* 16 → 18px */
  --text-lg:clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);      /* 18 → 21px */
  --text-xl:clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --text-2xl:clamp(1.7rem, 1.35rem + 1.6vw, 2.5rem);
  --text-3xl:clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  --text-hero:clamp(2.6rem, 1.4rem + 5.2vw, 5.2rem);

  --leading-tight:1.06;
  --leading-snug:1.25;
  --leading-body:1.65;
  --tracking-wide:0.14em;

  /* --- Spacing – 8px base scale --- */
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem;
  --s-5:2rem;  --s-6:3rem;   --s-7:4.5rem; --s-8:7rem;

  /* Aliases used by section-architecture skill */
  --space-xs:var(--s-1);
  --space-s:var(--s-2);
  --space-m:var(--s-3);
  --space-l:var(--s-5);
  --space-xl:var(--s-6);

  /* Section block spacing (fluid) */
  --section-space-s:clamp(3rem, 2rem + 4vw, 5rem);
  --section-space-m:clamp(4rem, 2.6rem + 5.6vw, 7.5rem);
  --section-space-l:clamp(5rem, 3rem + 7vw, 9.5rem);

  /* --- Layout --- */
  --container-width:1240px;
  --container-narrow:880px;
  --gutter:clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* --- Radius – confident, not bubbly --- */
  --r-card:16px;
  --r-m:12px;
  --r-s:8px;
  --r-pill:100px;

  /* --- Shadows (navy-tinted, never grey mud) --- */
  --shadow-s:0 2px 10px rgba(23,71,138,.06);
  --shadow-m:0 14px 40px rgba(23,71,138,.10);
  --shadow-blue:0 12px 34px rgba(23,71,138,.22);
  --shadow-red:0 12px 30px rgba(234,35,49,.24);
  --shadow-lift:0 22px 60px rgba(23,71,138,.14);

  /* --- Motion --- */
  --dur-fast:160ms;
  --dur-normal:320ms;
  --dur-slow:640ms;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-soft:cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:var(--body);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

h1, h2, h3, h4 {
  font-family:var(--display);
  font-weight:700;
  line-height:var(--leading-tight);
  letter-spacing:-0.015em;
  color:var(--navy);
  text-wrap:balance;
}

p { text-wrap:pretty; }

a { color:inherit; text-decoration:none; }

ul, ol { list-style:none; padding:0; }

button { font:inherit; color:inherit; cursor:pointer; border:none; background:none; }

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

/* Visible keyboard focus on every interactive element */
:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link {
  position:absolute; left:var(--s-3); top:-100px; z-index:200;
  background:var(--navy); color:#fff; padding:.75rem 1.25rem;
  border-radius:var(--r-pill); font-weight:700; font-size:var(--text-s);
  transition:top var(--dur-fast) ease;
}
.skip-link:focus { top:var(--s-3); }

/* Screen-reader-only helper */
.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;
}

/* RTL readiness: layout primitives use logical properties throughout.
   The Arabic build flips with <html dir="rtl" lang="ar"> – no extra CSS. */

/* ----------------------------------------------------------------
   3. LAYOUT PRIMITIVES (section-architecture skill)
   ---------------------------------------------------------------- */
.section { padding-block:var(--section-space-m); padding-inline:var(--gutter); }
.section--s { padding-block:var(--section-space-s); }
.section--l { padding-block:var(--section-space-l); }
.section--flush-top { padding-top:0; }

.container {
  width:100%;
  max-width:var(--container-width);
  margin-inline:auto;
}
.container--narrow { max-width:var(--container-narrow); }

/* ----------------------------------------------------------------
   4. SHARED TYPE HELPERS
   ---------------------------------------------------------------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--body);
  font-size:var(--text-xs); font-weight:700;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--blue); line-height:1;
}
.eyebrow::before { content:""; width:28px; height:2px; background:var(--red); border-radius:2px; }
.eyebrow--on-dark { color:var(--gold); }
.eyebrow--on-dark::before { background:var(--gold); }

.lede {
  font-size:var(--text-lg);
  color:var(--ink-soft);
  line-height:1.55;
  max-width:60ch;
}

.section-title { font-size:var(--text-3xl); }
.section-head { display:flex; flex-direction:column; gap:var(--s-3); max-width:62ch; }
.section-head--center { margin-inline:auto; text-align:center; align-items:center; }

/* ----------------------------------------------------------------
   5. BUTTONS
   Primary red = the ONE action colour (Apply / Hire enquiries).
   Blue = secondary paths. Ghost = tertiary.
   ---------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--body); font-weight:700; font-size:var(--text-base);
  padding:.9rem 1.8rem; border-radius:var(--r-pill);
  min-height:48px; /* large tap target */
  transition:transform var(--dur-fast) var(--ease-out-soft),
             box-shadow var(--dur-normal) var(--ease-out-soft),
             background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  will-change:transform;
}
.btn svg { width:1.05em; height:1.05em; }

.btn--primary { background:var(--red); color:#fff; box-shadow:var(--shadow-red); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(234,35,49,.32); background:var(--red-deep); }

.btn--blue { background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn--blue:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(23,71,138,.3); background:var(--blue-deep); }

.btn--ghost { background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--blue); color:var(--blue-deep); }

.btn--on-dark { background:#fff; color:var(--navy); }
.btn--on-dark:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.18); }

.btn--gold { background:var(--gold); color:var(--navy); }
.btn--gold:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(249,222,59,.35); }

.link-cta {
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; color:var(--blue);
  transition:gap var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) ease;
}
.link-cta::after { content:"→"; transition:transform var(--dur-fast) var(--ease-out-soft); }
.link-cta:hover { color:var(--blue-deep); }
.link-cta:hover::after { transform:translateX(4px); }
[dir="rtl"] .link-cta::after { content:"←"; }
[dir="rtl"] .link-cta:hover::after { transform:translateX(-4px); }

/* ----------------------------------------------------------------
   6. SIGNATURE MARKS
   ---------------------------------------------------------------- */
/* TAHANAN underline – gold route-arc under a key phrase (1–2 per page).
   Markup: <span class="u-tahanan">phrase<svg …></svg></span>
   The inline SVG path echoes the logo's triple arc. Never on body copy. */
.u-tahanan { position:relative; display:inline-block; white-space:nowrap; }
.u-tahanan > svg {
  position:absolute; left:0; bottom:-0.28em; width:100%; height:.32em;
  overflow:visible; pointer-events:none;
}

/* Route divider – dashed flight-path between sections or list items */
.route-line {
  border:none; height:2px; margin-block:var(--s-5);
  background-image:linear-gradient(90deg, var(--blue-tint-20) 55%, transparent 45%);
  background-size:12px 2px;
}

/* ----------------------------------------------------------------
   6b. SHARED TOPBAR + NAV  (identical across all homepage directions)
   ---------------------------------------------------------------- */
.topbar {
  background:var(--navy); color:rgba(255,255,255,.75);
  padding-block:.5rem; padding-inline:var(--gutter);
  font-size:var(--text-xs); font-weight:600;
}
.topbar__inner {
  max-width:var(--container-width); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
}
.topbar__meta { display:flex; align-items:center; gap:var(--s-4); }
.topbar__meta svg { width:14px; height:14px; }
.topbar__meta span { display:inline-flex; align-items:center; gap:.45em; }
@media (max-width:720px){ .topbar__meta span.hide-s { display:none; } }
.lang-switch { display:inline-flex; align-items:center; gap:2px; }
.lang-switch button {
  font-size:var(--text-xs); font-weight:600; color:rgba(255,255,255,.7);
  padding:.3em .8em; border-radius:var(--r-pill);
  transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.lang-switch button:hover { color:#fff; background:rgba(255,255,255,.12); }
.lang-switch button[aria-pressed="true"] { background:var(--gold); color:var(--navy); }

.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  padding-inline:var(--gutter);
  transition:border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}
.site-header[data-scrolled="true"] {
  border-bottom-color:var(--line);
  box-shadow:0 4px 24px rgba(23,71,138,.06);
}
.nav {
  max-width:var(--container-width); margin-inline:auto;
  padding-block:.8rem;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}
.nav__brand { display:inline-flex; align-items:center; line-height:0; }
.nav__brand img { height:48px; width:auto; display:block; }
@media (max-width:480px){ .nav__brand img { height:40px; } }
.nav__links { display:flex; align-items:center; gap:var(--s-4); }
.nav__link {
  font-weight:600; font-size:var(--text-s); color:var(--ink-soft);
  padding:.4rem 0; position:relative; transition:color var(--dur-fast) ease;
  white-space:nowrap;
}
.nav__link::after {
  content:""; position:absolute; inset-inline:0; bottom:-2px; height:2px;
  background:var(--red); border-radius:2px; transform:scaleX(0);
  transform-origin:left; transition:transform var(--dur-normal) var(--ease-out-expo);
}
.nav__link:hover, .nav__link[aria-current="page"] { color:var(--blue); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform:scaleX(1); }
.nav__actions { display:flex; align-items:center; gap:var(--s-3); }
.nav__cta { padding:.65rem 1.35rem; min-height:44px; font-size:var(--text-s); }

.nav__toggle { display:none; width:46px; height:46px; border-radius:var(--r-s); position:relative; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content:""; position:absolute; left:50%; width:22px; height:2px;
  background:var(--ink); border-radius:2px; margin-left:-11px;
  transition:transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.nav__toggle span { top:50%; margin-top:-1px; }
.nav__toggle span::before { top:-7px; }
.nav__toggle span::after { top:7px; }
.nav__toggle[aria-expanded="true"] span { background:transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1060px) {
  .nav__links {
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:var(--s-2);
    background:var(--paper); padding:5.5rem var(--s-5) var(--s-5);
    box-shadow:var(--shadow-m); transform:translateX(110%);
    transition:transform var(--dur-normal) var(--ease-out-expo);
  }
  .nav__links[data-open="true"] { transform:translateX(0); }
  .nav__link { font-size:var(--text-lg); }
  .nav__toggle { display:flex; position:relative; z-index:110; }
  .nav__cta { display:none; }
}

/* ----------------------------------------------------------------
   6c. SHARED FOOTER  (identical across all homepage directions)
   ---------------------------------------------------------------- */
.site-footer {
  background:var(--navy); color:#B9C4DA;
  padding-block:var(--section-space-m) var(--s-6);
  padding-inline:var(--gutter);
}
.footer__grid {
  max-width:var(--container-width); margin-inline:auto;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:var(--s-6) var(--s-5);
}
.footer__logo { height:56px; width:auto; display:block; margin-bottom:var(--s-3); }
.footer__tagline { color:#93A2C2; max-width:36ch; font-size:var(--text-s); line-height:1.6; }
.footer__tagline b { color:var(--gold); font-weight:700; }
.footer__col h3 {
  color:#fff; font-size:var(--text-xs); font-family:var(--body); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; margin-bottom:var(--s-3);
}
.footer__col ul { display:flex; flex-direction:column; gap:.65rem; }
.footer__col a { color:#B9C4DA; font-size:var(--text-s); transition:color var(--dur-fast) ease; }
.footer__col a:hover { color:#fff; }
.footer__contact li { display:flex; gap:.6em; align-items:flex-start; font-size:var(--text-s); color:#B9C4DA; }
.footer__contact svg { width:16px; height:16px; flex:none; margin-top:.2em; color:var(--gold); }
.footer__chat {
  display:inline-flex; align-items:center; gap:.6rem; margin-top:var(--s-3);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-pill); font-weight:700; font-size:var(--text-s);
  transition:background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-soft);
}
.footer__chat:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }
.footer__chat svg { width:18px; height:18px; }
.footer__bottom {
  max-width:var(--container-width); margin:var(--s-7) auto 0; padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); align-items:center; justify-content:space-between;
  font-size:var(--text-xs); color:#8291B3;
}
.footer__legal { display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-4); }
.footer__legal a:hover { color:#fff; }
.footer__licence {
  max-width:var(--container-width); margin:var(--s-4) auto 0;
  font-size:var(--text-xs); color:#8291B3; line-height:1.6;
}
@media (max-width:900px) {
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__col--brand { grid-column:1 / -1; }
}
@media (max-width:520px) { .footer__grid { grid-template-columns:1fr; } }

/* ----------------------------------------------------------------
   6d. MESSENGER CHAT FAB  (SOW signature: chat redirect)
   ---------------------------------------------------------------- */
.chat-fab {
  position:fixed; inset-inline-end:clamp(1rem, 2vw, 2rem); bottom:clamp(1rem, 2vw, 2rem);
  z-index:90; display:inline-flex; align-items:center; gap:.6rem;
  background:var(--blue); color:#fff; font-weight:700; font-size:var(--text-s);
  padding:.85rem 1.3rem; border-radius:var(--r-pill); box-shadow:var(--shadow-blue);
  transition:transform var(--dur-fast) var(--ease-out-soft), background-color var(--dur-fast) ease;
}
.chat-fab:hover { transform:translateY(-3px); background:var(--blue-deep); }
.chat-fab svg { width:20px; height:20px; }
@media (max-width:600px){ .chat-fab .chat-fab__label { display:none; } .chat-fab { padding:.85rem; } }

/* ----------------------------------------------------------------
   7. SCROLL REVEAL (progressive enhancement)
   JS adds [data-reveal] -> .is-in. Without JS, content is visible.
   ---------------------------------------------------------------- */
[data-reveal] {
  opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease-out-expo),
             transform var(--dur-slow) var(--ease-out-expo);
  transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity:1; transform:none; }
.no-js [data-reveal], html:not(.js) [data-reveal] { opacity:1; transform:none; }

/* ----------------------------------------------------------------
   8. REDUCED MOTION – mandatory
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}