/* ============================================================================
   RANCO concepts — shared layer.
   Loaded after css/ibix-base.css and before the per-direction theme.

   Holds only what is genuinely common to all three directions: the self-hosted
   faces, the contact FACTS' markup hooks, the concept pill and the accessibility
   helpers. Everything that makes a direction look like itself lives in a.css /
   b.css / c.css, so the three can diverge without fighting each other.

   THE LOGO IS NEVER RECOLOURED (owner, 2026-07-31). Every direction here is
   built on a light ground for exactly that reason.

   Measured contrast, all AA-small unless noted:
     #223566 on #FFFFFF 11.87:1 · #1A2340 15.46:1 · #4A5B7D 6.81:1
     brand #328FCE on white is 3.53:1 — LARGE TEXT AND DECORATION ONLY.
     For blue small text use #1F6FA8 (5.39:1).
     On navy #223566: white 11.87:1 · #C8D6EA 8.06:1 · #A8BDD8 6.18:1
   ========================================================================= */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-var-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-var-latin.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --navy:    #223566;   /* the client's own brand navy, verbatim */
  --blue:    #328FCE;   /* the client's own brand blue, verbatim */
  --blue-tx: #1F6FA8;   /* the same blue darkened ONLY where it must carry small text */
  --ink:     #1A2340;
  --muted:   #4A5B7D;
  --paper:   #FFFFFF;
  --arabic:  'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --ease:    cubic-bezier(.16, 1, .3, 1);
}

html { scrollbar-width: thin; scrollbar-color: #C3D2E4 transparent }
::-webkit-scrollbar { width: 11px; height: 8px }
::-webkit-scrollbar-thumb { background: #C3D2E4; border-radius: 9px }
::selection { background: var(--blue); color: #fff }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue-tx); outline-offset: 3px; border-radius: 4px;
}

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

/* Arabic never inherits a Latin display face, and never letter-spacing. */
.ar { font-family: var(--arabic); letter-spacing: normal }

/* Phone numbers must not be re-ordered by the bidi algorithm when they sit
   next to Arabic text. */
.tel-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums }

/* --- the IBIX credit ---------------------------------------------------------
   Owner's rule, 2026-08-01: the WHOLE phrase is the link, and it must LOOK
   clickable. Styled in the host page's own muted colour and fonts — never IBIX
   brand colours. Two classes (0,2,0) so it beats each theme's `.foot a` (0,1,1)
   whichever direction it lands in. min-height clears the WCAG 2.2 target size.
   -------------------------------------------------------------------------- */
.foot .credit, .g-foot .credit {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--muted);
  border-bottom: 1px solid #C3D2E4; padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.foot .credit b, .g-foot .credit b { font-weight: 600; margin-left: .3em }
.foot .credit:hover, .g-foot .credit:hover { color: var(--navy); border-color: var(--navy) }
/* Direction A's footer sits on white above a navy rule; B and C on white too —
   the muted token is the same in all four, so one rule serves them all. */

/* --- concept pill: these are demos, and must always say so ---------------- */
.concept-pill {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: 14px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(26, 35, 64, .92); color: #fff;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; white-space: nowrap;
  box-shadow: 0 8px 26px rgba(26, 35, 64, .28);
}
/* inline-block + padding so the link clears the WCAG 2.2 (2.5.8) 24px target */
.concept-pill a {
  display: inline-block; padding: 5px 2px; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.5);
}
.concept-pill .n { color: #7FC1EC }
@media (max-width: 560px) {
  .concept-pill { font-size: .6rem; letter-spacing: .12em; padding: 6px 12px; bottom: 10px }
}
@media print { .concept-pill { display: none } }