/* =====================================================================
   NAROMX — Pilot layer
   Loaded LAST (after style.css, internal.css, plugin CSS, tokens.css and
   naromx-brand.css) by wp-content/mu-plugins/naromx-pilot.php.

   Purely additive: it only re-points variables and adds properties. No theme
   or plugin file is edited. Rollback = delete the mu-plugin.

   Fixes, in the order of the review (DESIGN-REVIEW.md):
     A. P1  — kit tokens reach the 34 internal surfaces
     B. P3  — one Arabic typeface (Cairo, the kit font); `Dubai` never loads
     C. P2  — letter-spacing no longer breaks Arabic joining
     D. P4/P5/#27/#28 — bidi: Latin runs inside RTL blocks
     E. P7  — 44px touch targets on coarse pointers / small screens
     F. #2  — /radio/ horizontal scroll at 390
     G. P9/#18 — contrast of dim text and of form-control borders
     H. P8  — a brand :focus-visible ring instead of the Chrome default
     I. #1  — price row on the front page (paired with the PHP entity decode)
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. P1 — TOKEN BRIDGE
   internal.css declares a self-contained oklch palette on `body.nx-int`.
   Re-declare the same custom properties from the kit tokens so every
   `var(--nx-*)` consumer (342 of them) speaks the kit palette.
   Specificity `html body.nx-int` (0,0,2 + 2 elements) beats `body.nx-int`.
   --------------------------------------------------------------------- */
html body.nx-int{
  --nx-bg:       var(--brand-bg);                                           /* #05100E */
  --nx-bg-2:     color-mix(in oklab, var(--brand-bg) 90%, var(--brand-fg));
  --nx-panel:    color-mix(in oklab, var(--brand-bg) 84%, var(--brand-fg));
  --nx-line:     #16211E;                                                   /* kit hairline */
  --nx-line-2:   var(--brand-muted);                                        /* #6E8983 — control borders, needs >=3:1 */
  --nx-ink:      var(--brand-fg);                                           /* #EAF6F2 */
  --nx-ink-soft: color-mix(in oklab, var(--brand-fg) 80%, var(--brand-bg));
  --nx-ink-dim:  var(--brand-muted);                                        /* #6E8983 — 5.58:1 on #05100E */
  --nx-teal:     var(--brand-accent);                                       /* #2FE0BE */
  --nx-teal-ink: var(--brand-bg);
  --nx-red:      var(--brand-accent-2);                                     /* #E24A6A */
  --nx-acid:     var(--brand-accent-2);                                     /* 5th colour folded into accent-2 */
}

/* The front page engine also writes `--bg/--ink/--accent…`; brand-naromx.php
   already re-tints those at runtime. Here we only align the *stylesheet*
   defaults so a non-JS render is on-palette too. */
html:root{
  --bg:#071924 !important; --ink:#F4F4EE !important; --ink-soft:#AFC1C2 !important;
  --accent:#59DBC5 !important; --accent2:#F27466 !important; --line:#29434B !important;
}

/* internal.css hard-codes a handful of acid-lime glows (oklch … 118) that used
   to pair with --nx-acid. Re-point the visible ones to the kit accent-2. */
body.nx-int .nx-rel.is-latest{
  box-shadow:0 0 0 1px color-mix(in oklab, var(--brand-accent-2) 35%, transparent),
             0 20px 50px rgba(0,0,0,.55),
             0 0 60px color-mix(in oklab, var(--brand-accent-2) 8%, transparent);
}
body.nx-int .nx-rel.is-latest .nx-ver{box-shadow:0 0 22px color-mix(in oklab, var(--brand-accent-2) 50%, transparent)}
body.nx-int .nx-btn-fill:hover{box-shadow:0 10px 30px color-mix(in oklab, var(--brand-accent-2) 35%, transparent)}
body.nx-int .nx-svc-price{filter:drop-shadow(0 0 6px color-mix(in oklab, var(--brand-accent-2) 40%, transparent))}

/* A2. Plugin surfaces that carry their own palette (the 4th, 5th and 6th
   accents the review found). Each is re-pointed at the kit, not restyled. */

/* radio station widget — hard-codes #3aa99f (teal) and #ff3b2f (red) */
body .tick-tl,body .tick-tr{border-color:var(--brand-accent)}
body .tick-bl,body .tick-br{border-color:var(--brand-accent-2)}
body .naromx-live-badge.live-dj{border-color:var(--brand-accent-2);color:var(--brand-accent-2)}
body .naromx-live-badge.auto-dj{border-color:var(--brand-accent);color:var(--brand-accent)}
body .live-pulse{background:var(--brand-accent-2);box-shadow:0 0 8px var(--brand-accent-2)}
body .transmission-light.active{background:var(--brand-accent-2);box-shadow:0 0 10px var(--brand-accent-2)}
body .naromx-radio-play-btn:hover,
body .naromx-radio-play-btn:focus{border-color:var(--brand-accent);color:var(--brand-accent)}
body .naromx-radio-play-btn.playing{border-color:var(--brand-accent-2);color:var(--brand-accent-2)}
body .naromx-quality-switch button.active,
body .naromx-radio-lang button.active,
body .tab-btn.active,
body .queue-time{color:var(--brand-accent)}
body .tab-btn.active{border-bottom-color:var(--brand-accent)}
body .station-tag{color:var(--brand-accent-2)}
body .search-input:focus{border-color:var(--brand-accent)}
body .request-submit-btn,
body .request-badge{border-color:var(--brand-accent);color:var(--brand-accent)}
body .request-submit-btn:hover:not(:disabled){background:var(--brand-accent);color:var(--brand-bg)}
body .request-status-notice.success{border-left-color:var(--brand-accent);color:var(--brand-accent)}
body .request-status-notice.error{border-left-color:var(--brand-accent-2);color:var(--brand-accent-2)}
body .schedule-status-badge{border-color:var(--brand-accent-2);color:var(--brand-accent-2)}
body .naromx-radio-wrapper{color:var(--brand-fg)}
body .naromx-live-badge span{letter-spacing:normal}

/* radio-booking widget — its whole palette hangs off one variable (#edff00) */
body .nrc-shell{
  --acid:var(--brand-accent);
  --ink:var(--brand-bg);
  --line:#16211E;
  color:var(--brand-fg);
  border-color:var(--brand-muted);
  font-family:'IBM Plex Mono', Cairo, ui-monospace, monospace;
}
body .nrc-head,body .nrc-head span{background:var(--brand-bg)}
/* the display size (up to 62px) forced one Arabic word per line in a .82fr column */
body .nrc-head strong{color:var(--brand-fg);font-size:clamp(26px,3.2vw,44px);margin-top:40px}
body .nrc-head p,body .nrc-form label>span{color:var(--brand-muted)}
body .nrc-form input,body .nrc-form textarea{background:var(--brand-bg);color:var(--brand-fg);border-color:var(--brand-muted)}
body .nrc-form button{color:var(--brand-bg)}
body .nrc-form button:hover{background:var(--brand-accent-2);color:var(--brand-fg)}

/* global language switch — inline styles + !important, so both are needed */
body .naromx-global-lang-switch{
  font-family:var(--brand-font-body) !important;
  border-color:color-mix(in oklab, var(--brand-accent) 35%, transparent) !important;
  background:color-mix(in oklab, var(--brand-bg) 88%, transparent) !important;
  box-shadow:0 0 10px color-mix(in oklab, var(--brand-accent) 15%, transparent) !important;
}
body .naromx-lang-btn{color:var(--brand-muted) !important;text-shadow:none !important}
body .naromx-lang-btn:hover{color:var(--brand-fg) !important}
body .naromx-lang-btn.active{color:var(--brand-accent) !important;text-shadow:0 0 8px color-mix(in oklab, var(--brand-accent) 50%, transparent) !important}

/* selection + scrollbar were on a 4th teal (#71edbd) */
body ::selection{background:var(--brand-accent) !important;color:var(--brand-bg) !important}
body ::-moz-selection{background:var(--brand-accent) !important;color:var(--brand-bg) !important}
::-webkit-scrollbar-track{background:var(--brand-bg)}
::-webkit-scrollbar-thumb{background:var(--brand-accent);border-color:var(--brand-bg)}
::-webkit-scrollbar-thumb:hover{background:var(--brand-accent-2)}

/* ---------------------------------------------------------------------
   B. P3 — TYPOGRAPHY: ONE ARABIC FACE
   `Dubai` has no @font-face anywhere (43 elements on / and 50 on /radio/
   were falling back to the system UI font). The customizations plugin forces
   it with `[lang="ar"]{…!important}` (specificity 0,1,0), so this needs
   `html[lang="ar"]` (0,1,1) + !important to win.
   Cairo is self-hosted (uploads/brand-fonts/Cairo-VF.ttf) and is the kit face.
   --------------------------------------------------------------------- */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] body.font-arabic,
html[lang="ar"] .font-arabic,
html[lang="en"] body{
  font-family:var(--brand-font-body) !important;    /* Cairo, system-ui, sans-serif */
}

/* Internal pages: display + Arabic roles both become Cairo; the mono role keeps
   its Latin face but gains Cairo as the Arabic fallback so an Arabic word inside
   a mono kicker is no longer drawn by the system font. */
html body.nx-int{
  --nx-ar:  var(--brand-font-body);
  --nx-disp:var(--brand-font-heading);
  --nx-mono:'JetBrains Mono', Cairo, ui-monospace, SFMono-Regular, monospace;
}
/* Front page: same idea for the Latin display / mono stacks. */
html:root{
  --ar:  var(--brand-font-body) !important;
  --ink-ar:var(--brand-font-heading) !important;
  --disp:'Archivo Black', sans-serif !important;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace !important;
}
/* Elements that set a Latin family directly rather than through a variable. */
body .naromx-radio-wrapper,
body .naromx-player-wrapper,
body .woocommerce-loop-product__title,
body .woocommerce div.product .product_title{
  font-family:var(--brand-font-body) !important;
}
/* Woo falls back to Arial for prices / notices — give it the kit face too. */
body.nx-int .woocommerce .price,
body.nx-int .woocommerce-message,
body.nx-int .woocommerce-info,
body.nx-int .woocommerce-error{font-family:var(--brand-font-body)}

/* ---------------------------------------------------------------------
   C. P2 — LETTER-SPACING ON ARABIC
   Positive tracking visually detaches the letters of a joined Arabic word.
   Every element below was measured carrying Arabic text (0.55px – 2.86px).
   Latin-only lockups (.hero-wm, .int-wm, .foot-wm, .rel-code) keep theirs.
   --------------------------------------------------------------------- */
.hero-kicker,
.sec-tag,
.tune span,
.radio-btn,
.radio-link,
.store-all,
.svc-name,
.prod-row b,
.nav a,
.marquee-run,
body.nx-int .nx-kicker,
body.nx-int .nx-sec-tag,
body.nx-int .nx-metaline,
body.nx-int .nx-tag,
body.nx-int .int-cart,
body.nx-int .int-menu a,
body.nx-int .nx-field label,
body.nx-int .nx-form-note,
body.nx-int .nx-toc-h,
body.nx-int .nx-doc-idx,
body.nx-int .nx-btn,
body.nx-int .nx-svc-n,
body.nx-int .nx-chan .lbl,
body.nx-int .nx-cell .k,
body.nx-int .nx-rel li .k,
body .station-tag,
body .station-desc,
body .tab-btn,
body .listeners-count,
body .naromx-status-label,
body .history-artist,
body .history-time,
body .track-index,
body .track-mix,
body .naromx-quality-switch button,
body .naromx-radio-lang button,
body .naromx-lang-btn,
body.nx-int .nx-track1-action,
body.nx-int .nx-track1-action .lbl,
body.nx-int .nx-post-nav .d,
body.nx-int .nx-track1-navlink .d,
body.nx-int .nx-chan .lbl{
  letter-spacing:normal;
}

/* ---------------------------------------------------------------------
   D. P4 / P5 / #27 / #28 — BIDIRECTIONAL TEXT
   `unicode-bidi:plaintext` resolves each block's base direction from its own
   first strong character, so an all-Latin sentence inside the RTL document
   keeps its full stop at the end, a `<code>` path keeps its leading slash,
   and an `English / عربي` heading no longer splits across the wrap.
   --------------------------------------------------------------------- */
/* every text block on the internal pages; `li` only inside prose so the nav,
   which is a list, keeps the document direction */
body.nx-int :is(h1,h2,h3,h4,h5,h6,p,blockquote,figcaption,summary,dd,dt,caption,td,th),
body.nx-int :is(.prose,.entry-content,.nx-doc-sec,.nx-faq) li,
body.nx-int :is(.nx-title,.prose-title,.nx-h2,.nx-lede,.nx-faq .a,.woocommerce-info,.wc-block-cart__empty-cart__title),
body .station-desc,
body .station-title,
body .naromx-now-playing-title,
body .naromx-now-playing-artist,
body .history-name,
body .track-name,
body .hero-sub,
body .svc-desc,
body .radio-now,
body .rel-feature{
  unicode-bidi:plaintext;
}
/* Inline code / file paths are Latin by definition. */
body code, body kbd, body samp, body .nx-code{direction:ltr;unicode-bidi:embed;text-align:left}
/* Machine-format inputs must read left-to-right whatever the page direction. */
body input[type="url"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="date"],
body input[type="time"],
body input[type="datetime-local"]{direction:ltr;text-align:left}

/* ---------------------------------------------------------------------
   E. P7 — TOUCH TARGETS
   Scoped to coarse pointers / phone widths so the desktop density that the
   review praised is untouched.
   --------------------------------------------------------------------- */
@media (pointer:coarse), (max-width:820px){
  body.nx-int .nx-foot-nav a,
  body.nx-int .foot-lines a,
  body.nx-int .int-cart,
  body.nx-int .int-wm,
  body.nx-int .int-menu a,
  body .naromx-lang-btn,
  body .tab-btn,
  body .naromx-quality-switch button,
  body .naromx-radio-lang button,
  body .naromx-player-controls button,
  body .store-all,
  body .radio-link,
  body .nav a,
  body .wm{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  body.nx-int .nx-foot-nav{gap:2px 18px}
  body .naromx-lang-btn{min-width:44px}
  body .naromx-quality-switch button,
  body .naromx-radio-lang button{min-width:44px;padding-inline:10px}
  body.nx-int .int-burger{width:44px;height:44px;justify-content:center}
  /* checkbox controls: 13x13 default -> 24px, the WCAG 2.5.8 minimum */
  body input[type="checkbox"],
  body input[type="radio"]{width:24px;height:24px;accent-color:var(--brand-accent)}

  /* second pass: everything still measuring under 44px on a phone */
  body.nx-int .nx-reltrack-play,
  body .woocommerce-product-gallery__trigger,
  body .show-password-input,
  body .page-numbers,
  body.nx-int .nx-pagination .page-numbers{min-width:44px;min-height:44px}
  body.nx-int .nx-kicker,
  body.nx-int .nx-chan a.val,
  body.nx-int .product_meta a{min-height:44px;display:inline-flex;align-items:center}
  body.nx-int .nx-toc a{min-height:44px;display:flex;align-items:center}
  body .naromx-lang-switch button{min-width:44px;min-height:44px}
  body .nx-btn,
  body .wp-block-button__link,
  body .woocommerce a.button,
  body .woocommerce button.button,
  body a.button.product_type_simple,
  body button.single_add_to_cart_button,
  body .naromx-action-btn,
  body .naromx-player-controls button,
  body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body select,
  body textarea{min-height:44px}
}

/* ---------------------------------------------------------------------
   F. #2 (blocker) — /radio/ horizontal scroll at 390
   `.naromx-radio-grid` is a 1fr grid. Its item's automatic minimum size is the
   min-content width of `.naromx-now-playing-title`, which is `white-space:nowrap`
   — so the single track blew out to 357px inside a 308px container and the
   document gained 94px of horizontal scroll. `min-width:0` restores the
   intended shrink; the title already has overflow/ellipsis of its own.
   --------------------------------------------------------------------- */
body .naromx-radio-grid > *{min-width:0}
body .naromx-radio-grid{max-width:100%}
body .naromx-now-playing-title,
body .naromx-now-playing-artist{overflow:hidden;text-overflow:ellipsis}
/* same class of bug in the player widget's grid */
body .naromx-player-grid > *{min-width:0}

/* ---------------------------------------------------------------------
   G. P9 / #18 — CONTRAST
   Form-control borders must reach 3:1 against their background (WCAG 1.4.11);
   they were 1.05:1 – 2.64:1. --nx-line-2 above already carries the internal
   forms; these are the WooCommerce and plugin forms that don't use it.
   --------------------------------------------------------------------- */
body.nx-int :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]),
  textarea, select),
body.nx-int .select2-container .select2-selection,
body .nrc-form input,
body .nrc-form textarea,
body .search-input{
  border:1px solid var(--brand-muted) !important;
  background:var(--brand-bg);
  color:var(--brand-fg);
}
/* small dim text that measured 3.34 – 4.17:1 now rides on --brand-muted (5.58:1) */
body .naromx-quality-switch button,
body .history-time,
body .history-artist,
body .track-index,
body .track-mix,
body .naromx-status-label,
body .listeners-count,
body .naromx-lang-btn,
body .tab-btn:not(.active),
body.nx-int .woocommerce-tabs ul.tabs li a{
  color:var(--brand-muted);
}
body.nx-int .woocommerce-tabs ul.tabs li.active a{color:var(--brand-fg)}
/* Woo's own rules win on specificity; the tab list is not inside a .woocommerce
   wrapper on this theme, so the selector must not require one. */
body .woocommerce-tabs ul.tabs li a{color:var(--brand-muted) !important;background:transparent !important}
/* the active tab shipped an acid-yellow #E7FF00 chip — a 7th palette colour */
body .woocommerce-tabs ul.tabs li.active a{color:var(--brand-bg) !important;background:var(--brand-accent) !important}
/* player elapsed / total time was rgba(fg,.45) = 4.01:1 */
body .naromx-time-row span{color:var(--brand-muted)}
/* required-field marker was #aa0000 (2.49:1) */
body .required,
body .woocommerce form .form-row .required,
body abbr.required{color:var(--brand-accent-2) !important;text-decoration:none}
/* decorative separators drawn at 10-20% alpha, i.e. invisible text glyphs */
body :is(.naromx-lang-switch,.naromx-hud-footer,.naromx-radio-lang,.naromx-quality-switch) .divider,
body .naromx-global-lang-switch span{color:var(--brand-muted) !important}
body .naromx-radio-lang button{color:var(--brand-muted)}
/* the player widget has a second language switch of its own */
body .naromx-lang-switch button{color:var(--brand-muted)}
body .naromx-lang-switch button:hover{color:var(--brand-fg)}
body .naromx-lang-switch button.active{color:var(--brand-accent)}

/* ---------------------------------------------------------------------
   H. P8 — focus ring in the brand palette instead of Chrome's blue default
   --------------------------------------------------------------------- */
body :focus-visible{
  outline:2px solid var(--brand-accent);
  outline-offset:2px;
  border-radius:0;
}

/* ---------------------------------------------------------------------
   I. #1 (blocker) — front page price row
   The entity decode happens in PHP/JS (naromx-pilot.php); this only keeps the
   decoded string on one line with the currency isolated from the Arabic name.
   --------------------------------------------------------------------- */
.prod-row .prod-price{
  unicode-bidi:isolate;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}