/* =============================================================================
   Rexline — shared design layer for the menu sub-pages
   Loaded only on /epc-consultancy/* and /product-supply-services/* pages
   (body gets .rx-sub, plus .rx-sub--epc or .rx-sub--product).

   It changes design tokens, typography and surface treatment so every
   sub-page under the same menu reads as one family. It does not change any
   page's layout, and it never touches content.
   ========================================================================== */

body.rx-sub {
  --u-red:        #e82a3f;
  --u-red-d:      #c01329;
  --u-navy:       #184879;
  --u-ink:        #141b25;
  --u-body:       #414c5b;
  --u-soft:       #6c7889;
  --u-line:       rgba(20, 27, 37, .1);
  --u-paper:      #f5f8fb;
  --u-paper-alt:  #eef2f7;
  --u-glass:      rgba(255, 255, 255, .74);
  --u-glass-hi:   rgba(255, 255, 255, .9);
  --u-shadow:     0 26px 64px -34px rgba(16, 26, 41, .55);
  --u-max:        1240px;
  --u-pad:        clamp(18px, 4vw, 44px);
  --u-sans:       Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --u-serif:      "Roboto Serif", Roboto, serif;
}

/* one page background for the whole family */
body.rx-sub #rx-content {
  background:
    radial-gradient(980px 520px at 6% 0%, rgba(232, 42, 63, .07), transparent 60%),
    radial-gradient(860px 460px at 96% 10%, rgba(24, 72, 121, .09), transparent 58%),
    linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
}

/* -------------------------------------------------------------------------
   1. The 38 product pages already share one token set — repoint it at the
      site kit so the old #c8102e red and grey text line up with everything
      else. Declared on every element so a block-level declaration cannot
      shadow it.
   ---------------------------------------------------------------------- */
body.rx-sub .page-content * {
  --rx-red:        var(--u-red);
  --rx-red-dark:   var(--u-red-d);
  --rx-navy:       #0e1521;
  --rx-navy-2:     var(--u-ink);
  --rx-dark-mid:   #1e293b;
  --rx-text:       var(--u-ink);
  --rx-text-mid:   var(--u-body);
  --rx-text-soft:  var(--u-soft);
  --rx-light:      #ffffff;
  --rx-light-mid:  var(--u-paper);
  --rx-light-alt:  var(--u-paper-alt);
  --rx-border:     var(--u-line);
}

/* -------------------------------------------------------------------------
   2. Typography — one voice across all sub-pages
   ---------------------------------------------------------------------- */
body.rx-sub .page-content,
body.rx-sub .page-content p,
body.rx-sub .page-content li,
body.rx-sub .page-content td,
body.rx-sub .page-content th,
body.rx-sub .page-content div,
body.rx-sub .page-content span { font-family: var(--u-sans); }

body.rx-sub .page-content h1,
body.rx-sub .page-content h2,
body.rx-sub .page-content h3,
body.rx-sub .page-content h4,
body.rx-sub .page-content [class*="-title"],
body.rx-sub .page-content [class*="__title"],
body.rx-sub .page-content [class*="-h1"],
body.rx-sub .page-content [class*="-h2"] {
  font-family: var(--u-serif);
  font-weight: 600;
  letter-spacing: -.005em;
  /* no colour here on purpose: some of these headings sit on dark heroes and
     each page already picks the right one */
}
body.rx-sub .page-content h1,
body.rx-sub .page-content [class*="-hero"] [class*="-title"] { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.1; }
body.rx-sub .page-content h2 { font-size: clamp(24px, 3vw, 38px); line-height: 1.16; }
body.rx-sub .page-content h3 { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.24; }
body.rx-sub .page-content p  { font-size: 15.8px; line-height: 1.8; }

/* the emphasised half of a two-tone heading keeps the brand red */

/* -------------------------------------------------------------------------
   3. Shared parts — eyebrow, pill, card, stat, button, table
   ---------------------------------------------------------------------- */
body.rx-sub .page-content [class*="-eyebrow"],
body.rx-sub .page-content [class*="-kicker"],
body.rx-sub .page-content [class*="-label"]:not(label) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* A pill is a small label. The match is on a fragment of a class name, so
   `rx-table--chips` — a whole table — was being given a 999px radius and came
   out as a white ellipse the width of the page with the specifications
   floating inside it. Tables, their parts, and anything laid out as a grid or
   a row of its own are not pills. */
body.rx-sub .page-content :is([class*="-pill"], [class*="-tag"]:not([class*="-tags"]), [class*="-chip"], [class*="-badge"]):not(table):not(thead):not(tbody):not(tr):not(td):not(th):not([class*="table"]):not([class*="grid"]):not([class*="list"]):not([class*="row"]):not([class*="wrap"]) {
  /* geometry and type only — each page keeps its own colours, so a pill on a
     dark band stays readable */
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.35;
}

body.rx-sub .page-content [class*="-card"],
body.rx-sub .page-content [class*="__card"],
body.rx-sub .page-content [class*="-panel"] {
  /* one radius and one hover across the family; colours stay with the page */
  border-radius: 16px;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s, border-color .26s;
}
/* The hover belongs to the card alone. Matching "-card" anywhere in a class
   name also caught the card's head and its text ("-cardhead", "-cardtext")
   and the grid holding the cards ("-cards"): hovering one card lifted three
   boxes, one inside the other. Real cards are found at load and marked
   `rx-hovercard`; that is the only lift now. */
body.rx-sub .page-content :is([class*="-card"], [class*="__card"]):not(.rx-hovercard):hover { transform: none; }

body.rx-sub .page-content [class*="-stat"] [class*="-n"],
body.rx-sub .page-content [class*="-stat__n"],
body.rx-sub .page-content [class*="-num"] { font-family: var(--u-serif); font-weight: 600; }

body.rx-sub .page-content a[class*="-btn"],
body.rx-sub .page-content a[class*="__btn"],
body.rx-sub .page-content a[class*="-button"],
body.rx-sub .page-content button[class*="-btn"] {
  /* one button across the family — deliberately not [class*="-cta"], which
     also matches the links inside a CTA block */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 11px;
  font-family: var(--u-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--u-red), var(--u-red-d));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 28px rgba(232, 42, 63, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: .2s;
}
body.rx-sub .page-content a[class*="-btn"]:hover,
body.rx-sub .page-content a[class*="__btn"]:hover,
body.rx-sub .page-content a[class*="-button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(232, 42, 63, .42), inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #fff;
}

body.rx-sub .page-content table { border-collapse: collapse; font-size: 14px; }
body.rx-sub .page-content thead th { font-weight: 700; letter-spacing: .05em; }

/* images sit in the same frame everywhere */
body.rx-sub .page-content [class*="-photo"],
body.rx-sub .page-content [class*="-slot"],
body.rx-sub .page-content [class*="-media"] { border-radius: 14px; overflow: hidden; }

/* -------------------------------------------------------------------------
   4. EPC sub-pages — the twenty pages share the rxi-…-nasir-… template,
      so one rule set restyles all of them at once.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   5. Phones
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.rx-sub .page-content a[class*="-btn"],
  body.rx-sub .page-content a[class*="__btn"],
  body.rx-sub .page-content a[class*="-button"] { width: 100%; max-width: 360px; }
  /* CTA blocks: the contact links stack full width */
  body.rx-sub .page-content [class*="-cta__links"] { flex-direction: column !important; }
  /* the link itself, not the icon and labels inside it: the fragment match
     also caught `…__link-ico`, so the 38px red square grew to the full row */
  body.rx-sub .page-content [class*="-cta__link"]:not([class*="__link-"]) { width: 100%; }
  body.rx-sub .page-content [class*="-cta__inner"] { padding-left: 16px !important; padding-right: 16px !important; }
}