/* ═══════════════════════════════════════════════════════════════════════════
   ui.css — the shared JMVRA design system.

   WHY THIS FILE EXISTS
   --------------------
   The content pages carried ~271 KB of inline <style>, each with its own
   prefix (au-, ap-, ra-, bpa-, dl- …) re-implementing the same buttons,
   cards, tables and headings with slightly different sizes, radii and
   shadows. Nothing was shared, so nothing was consistent, and every page
   shipped its own copy.

   This file defines those components ONCE, on top of the tokens already in
   variables.css (brand colours, --radius-*, --shadow-*), so the branding is
   unchanged — only the repetition goes.

   HOW IT IS SCOPED
   ----------------
   Two kinds of rules, deliberately separated:

     1. A handful of GLOBAL rules that are safe everywhere (keyboard focus,
        images not overflowing, anchor offsets, print). These apply to every
        page that loads the site header.

     2. Everything else is OPT-IN. A page adds class="content ui-page" to its
        content wrapper and gets the typography and spacing baseline; the
        .ui-* component classes do nothing until markup asks for them. A page
        that has not been refined yet is completely unaffected.

   Loaded after main.css, so where a selector ties on specificity this file
   wins — which is why the overrides below can be written plainly.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Spacing scale — one rhythm for every refined page. */
    --ui-1: 4px;  --ui-2: 8px;   --ui-3: 12px; --ui-4: 16px;
    --ui-5: 24px; --ui-6: 32px;  --ui-7: 48px; --ui-8: 64px;
    /* Type: nothing below 14px on a content page. */
    --ui-text: 1rem;            /* 16px body            */
    --ui-small: .9rem;          /* 14.4px smallest      */
    --ui-lh: 1.75;
    --ui-line: rgba(var(--color-primary-rgb), .16);
    --ui-line-soft: rgba(var(--color-primary-rgb), .09);
    --ui-surface: #fff;
    --ui-surface-2: var(--color-primary-surface, #FFF8F4);
    --ui-ink: var(--color-default, #1a1f24);
    --ui-muted: #55606e;        /* 6.2:1 on white       */
    --ui-amber: #b45309;
    --ui-amber-bg: #fff7ed;
    --ui-green: #15803d;
    --ui-green-bg: #f0fdf4;
    --ui-red: var(--color-red, #df1529);
    --ui-red-bg: #fef2f2;
}

/* ═══ 1. GLOBAL — safe on every page ═══════════════════════════════════ */

/* Keyboard focus was invisible in most of the site's custom components:
   a keyboard or screen-reader user could not tell where they were. One
   visible ring, everywhere, on focus-visible only (so mouse clicks do not
   draw it). */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(var(--color-primary-rgb), .55);
    outline-offset: 2px;
    border-radius: 4px;
}

/* An image wider than its column is the commonest cause of a page scrolling
   sideways on a phone. */
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }

/* A heading linked to with #anchor was hidden behind the sticky header. */
:target { scroll-margin-top: 90px; }

/* Long DOIs, URLs and identifiers in tables and cards break the line
   instead of pushing the layout wider than the screen. */
.ui-page, .ui-card, .ui-table td, .ui-table th { overflow-wrap: break-word; }

/* Any table can be made scrollable by wrapping it in this, without the page
   having to restyle the table itself. */
.ui-tw { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media print {
    .ui-btn, .ui-cta, .breadcrumbs, .back-to-top, .scroll-top { display: none !important; }
    .ui-card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
    .ui-page { font-size: 11pt; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-btn, .ui-card, .ui-link-card { transition: none !important; }
    .ui-btn:hover, .ui-card:hover, .ui-link-card:hover { transform: none !important; }
}

/* ═══ 2. OPT-IN — .ui-page typography baseline ═════════════════════════ */

.ui-page {
    font-family: var(--font-default), sans-serif;
    font-size: var(--ui-text);
    line-height: var(--ui-lh);
    color: var(--ui-ink);
    /* main.css justifies .col-lg-8, which opens rivers of white space at
       this measure. Left-aligned reads better and is the accessible
       default. */
    text-align: left;
}
/* ":not([class])" throughout this block is what makes .ui-page safe to add
   to an existing page: it sets the baseline for PLAIN elements only, and
   never touches an element the page has already styled through a class of
   its own (which would otherwise lose on specificity to ".ui-page p"). */
.ui-page p, .ui-page li, .ui-page td, .ui-page th, .ui-page dd { text-align: left; }
.ui-page p:not([class]) { margin: 0 0 var(--ui-4); }
.ui-page > :first-child { margin-top: 0; }
.ui-page ul:not([class]), .ui-page ol:not([class]) { margin: 0 0 var(--ui-4); padding-left: 1.35em; }
.ui-page ul:not([class]) > li, .ui-page ol:not([class]) > li { margin-bottom: var(--ui-2); }
.ui-page ul:not([class]) > li:last-child, .ui-page ol:not([class]) > li:last-child { margin-bottom: 0; }
.ui-page strong, .ui-page b { font-weight: 700; }
/* Deliberately NOT restyling every <a> and <strong> in a refined page:
   these pages put text on coloured and dark panels, and a blanket colour
   would make a link inside a brand-blue band unreadable. Pages opt a link
   in with .ui-link instead. */
.ui-link { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.ui-link:hover { color: var(--color-primary); }
.ui-page hr { border: 0; border-top: 1px solid var(--ui-line); margin: var(--ui-6) 0; }
.ui-page small, .ui-page .ui-small { font-size: var(--ui-small); }

/* Headings. The page's single H1 comes from page_hero(); these are the
   sections under it. The long selectors beat main.css's
   ".blog .blog-details .content h3" (22px / margin-top 30px). */
.ui-page h2:not([class]), .ui-h2,
.blog .blog-details .content.ui-page h2:not([class]) {
    font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem);
    font-weight: 800; line-height: 1.3; letter-spacing: -.01em;
    color: var(--color-primary-dark);
    margin: var(--ui-7) 0 var(--ui-3);
}
.ui-page h3:not([class]), .ui-h3,
.blog .blog-details .content.ui-page h3:not([class]) {
    font-size: 1.12rem; font-weight: 800; line-height: 1.4;
    color: var(--color-primary-dark);
    margin: var(--ui-5) 0 var(--ui-2);
}
.ui-page h4:not([class]), .ui-h4 { font-size: 1rem; font-weight: 800; color: var(--color-primary-dark); margin: var(--ui-4) 0 var(--ui-2); }
/* A short accent rule under a section heading — used where a page wants the
   section start to be obvious. Opt-in, so headings stay plain by default. */
.ui-h2--rule::after { content: ''; display: block; width: 44px; height: 3px; border-radius: 3px;
    background: var(--color-primary); margin-top: var(--ui-3); }
.ui-lead { font-size: 1.02rem; line-height: 1.8; color: var(--ui-muted); margin: 0 0 var(--ui-5); max-width: 70ch; }
.ui-muted { color: var(--ui-muted); }

/* Vertical rhythm between the blocks of a page. */
.ui-section { margin: 0 0 var(--ui-7); }
.ui-section:last-child { margin-bottom: 0; }

/* ═══ 3. COMPONENTS ════════════════════════════════════════════════════ */

/* ── Buttons ───────────────────────────────────────────────────────────
   Same geometry as the homepage's buttons (8px radius, 11-12px × 24px,
   bold .92rem). Every variant sets its OWN background — a button with a
   transparent background over an unknown section was the "buttons need a
   proper background" problem. 44px min height is the accessible tap size. */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-2);
    min-height: 44px; padding: 11px 22px;
    border: 1.5px solid transparent; border-radius: var(--radius-sm, 8px);
    background: var(--color-primary); color: #fff;
    font-family: var(--font-default), sans-serif; font-size: .92rem; font-weight: 700; line-height: 1.2;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.ui-btn:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-2px); text-decoration: none; }
.ui-btn i { font-size: 1.05em; }
.ui-btn--main { background: var(--ui-red); border-color: var(--ui-red); color: #fff;
    box-shadow: 0 4px 14px rgba(var(--color-red-rgb, 223,21,41), .22); }
.ui-btn--main:hover { background: #b71220; border-color: #b71220; color: #fff; }
.ui-btn--line { background: #fff; border-color: rgba(var(--color-primary-rgb), .34); color: var(--color-primary-dark); }
.ui-btn--line:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ui-btn--soft { background: var(--color-primary-tint, #FDEEE7); border-color: transparent; color: var(--color-primary-dark); }
.ui-btn--soft:hover { background: var(--color-primary); color: #fff; }
/* On a dark/brand band. */
.ui-btn--white { background: #fff; border-color: #fff; color: var(--color-primary-dark); }
.ui-btn--white:hover { background: #eaf3fa; border-color: #eaf3fa; color: var(--color-primary-dark); }
.ui-btn--ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff; }
.ui-btn--ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.ui-btn--wa { background: #1f9b52; border-color: #1f9b52; color: #fff; }   /* 3.4:1 on white, 4.6:1 for the label */
.ui-btn--wa:hover { background: #17793f; border-color: #17793f; color: #fff; }
.ui-btn--sm { min-height: 38px; padding: 8px 16px; font-size: .86rem; }
.ui-btn--lg { min-height: 50px; padding: 14px 28px; font-size: 1rem; }
.ui-btn--block { width: 100%; }
.ui-btns { display: flex; flex-wrap: wrap; gap: var(--ui-3); margin: var(--ui-4) 0 0; }

/* ── Cards ─────────────────────────────────────────────────────────────
   One card, one border, one radius. Cards do not nest: a .ui-card inside a
   .ui-card drops its border so a section never looks like a box in a box
   in a box. */
.ui-card {
    background: var(--ui-surface); border: 1px solid var(--ui-line);
    border-radius: var(--radius-md, 12px); padding: var(--ui-5);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(9,32,68,.10));
}
.ui-card > :last-child { margin-bottom: 0; }
.ui-card .ui-card { border: 0; box-shadow: none; padding: 0; background: none; }
.ui-card--soft { background: var(--ui-surface-2); box-shadow: none; }
.ui-card--flat { box-shadow: none; }
.ui-card--accent { border-top: 3px solid var(--color-primary); }
.ui-card__h { display: flex; align-items: center; gap: var(--ui-2); margin: 0 0 var(--ui-3);
    font-size: 1.05rem; font-weight: 800; color: var(--color-primary-dark); }
.ui-card__h i { color: var(--color-primary); }
.ui-link-card { display: block; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s, border-color .18s; }
.ui-link-card:hover { transform: translateY(-2px); border-color: rgba(var(--color-primary-rgb), .38);
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(9,32,68,.11)); color: inherit; }

/* Grids that stack by themselves — no per-page media queries needed. */
.ui-grid { display: grid; gap: var(--ui-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ui-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ui-grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ── Alerts / notes ───────────────────────────────────────────────────── */
.ui-alert { display: flex; gap: var(--ui-3); align-items: flex-start;
    background: var(--ui-surface-2); border: 1px solid var(--ui-line);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm, 8px); padding: var(--ui-3) var(--ui-4);
    margin: 0 0 var(--ui-4); font-size: .95rem; line-height: 1.65; }
.ui-alert > i { font-size: 1.15rem; color: var(--color-primary); flex: 0 0 auto; margin-top: 2px; }
.ui-alert > :last-child { margin-bottom: 0; }
.ui-alert--warn { background: var(--ui-amber-bg); border-color: rgba(180,83,9,.25); border-left-color: var(--ui-amber); }
.ui-alert--warn > i { color: var(--ui-amber); }
.ui-alert--ok { background: var(--ui-green-bg); border-color: rgba(21,128,61,.25); border-left-color: var(--ui-green); }
.ui-alert--ok > i { color: var(--ui-green); }
.ui-alert--stop { background: var(--ui-red-bg); border-color: rgba(185,28,28,.25); border-left-color: #b91c1c; }
.ui-alert--stop > i { color: #b91c1c; }

/* ── Badges ───────────────────────────────────────────────────────────── */
.ui-badge { display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-primary-tint, #FDEEE7); color: var(--color-primary-dark);
    border-radius: var(--radius-pill, 999px); padding: 4px 12px;
    font-size: .8rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.ui-badge--solid { background: var(--color-primary); color: #fff; }
.ui-badge--amber { background: var(--ui-amber-bg); color: var(--ui-amber); }
.ui-badge--green { background: var(--ui-green-bg); color: var(--ui-green); }
.ui-badges { display: flex; flex-wrap: wrap; gap: var(--ui-2); }

/* ── Tables ───────────────────────────────────────────────────────────── */
.ui-table { width: 100%; border-collapse: collapse; margin: 0; background: #fff; }
.ui-table caption { caption-side: top; text-align: left; padding: 0 0 var(--ui-2);
    font-size: .9rem; color: var(--ui-muted); }
.ui-table th, .ui-table td { padding: 12px 16px; font-size: .95rem; line-height: 1.55;
    border-bottom: 1px solid var(--ui-line); vertical-align: top; }
.ui-table thead th { background: var(--ui-surface-2); color: var(--color-primary-dark);
    font-size: .88rem; font-weight: 800; text-align: left; }
.ui-table tbody th { text-align: left; font-weight: 700; color: var(--ui-ink); }
.ui-table td { color: var(--ui-muted); }
.ui-table tbody tr:last-child th, .ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table--box { border: 1px solid var(--ui-line); border-radius: var(--radius-md, 12px); overflow: hidden; }
.ui-table--box .ui-table { border-radius: inherit; }
/* Phones: one card per row, the column name shown as a label. The page
   supplies data-label on each cell; without it the cell simply stacks. */
@media (max-width: 767.98px) {
    .ui-table--stack thead { display: none; }
    .ui-table--stack, .ui-table--stack tbody, .ui-table--stack tr, .ui-table--stack td, .ui-table--stack th {
        display: block; width: 100%; }
    .ui-table--stack tr { padding: var(--ui-3) var(--ui-4); border-bottom: 1px solid var(--ui-line); }
    .ui-table--stack tbody tr:last-child { border-bottom: 0; }
    .ui-table--stack td, .ui-table--stack th { border: 0; padding: 4px 0; display: flex; gap: var(--ui-3); justify-content: space-between; }
    .ui-table--stack td[data-label]::before, .ui-table--stack th[data-label]::before {
        content: attr(data-label); font-weight: 700; color: var(--ui-ink); flex: 0 0 auto; }
}

/* ── Lists with icons (replaces several per-page ::before list styles) ── */
.ui-list { list-style: none; margin: 0 0 var(--ui-4); padding: 0; }
.ui-list li { display: flex; gap: var(--ui-3); align-items: flex-start; padding: var(--ui-2) 0; margin: 0; }
.ui-list li i { color: var(--color-primary); margin-top: 3px; flex: 0 0 auto; }
.ui-list--ok li i { color: var(--ui-green); }

/* ── Key / value rows (fees, journal facts, specifications) ───────────── */
.ui-kv { margin: 0 0 var(--ui-4); }
.ui-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ui-4);
    padding: 10px 0; border-bottom: 1px dashed var(--ui-line); }
.ui-kv > div:last-child { border-bottom: 0; }
.ui-kv dt { font-weight: 600; color: var(--ui-muted); margin: 0; }
.ui-kv dd { margin: 0; font-weight: 800; color: var(--ui-ink); text-align: right; }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.ui-cta { display: grid; grid-template-columns: minmax(0,1.4fr) auto; gap: var(--ui-5); align-items: center;
    margin: var(--ui-7) 0 0; padding: var(--ui-6); border-radius: var(--radius-lg, 16px); color: #fff;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); }
.ui-cta h2, .ui-cta h3 { color: #fff; margin: 0 0 var(--ui-2); font-weight: 800; }
.ui-cta p { color: rgba(255,255,255,.9); margin: 0; max-width: 62ch; }
.ui-cta .ui-btns { margin: 0; flex-direction: column; min-width: 240px; }
@media (max-width: 991.98px) {
    .ui-cta { grid-template-columns: minmax(0,1fr); padding: var(--ui-5); }
    .ui-cta .ui-btns { flex-direction: row; min-width: 0; }
}

/* ── Responsive tail ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .ui-page { font-size: .98rem; }
    .ui-page h2:not([class]), .ui-h2, .blog .blog-details .content.ui-page h2:not([class]) { margin-top: var(--ui-6); }
    .ui-card { padding: var(--ui-4); }
    .ui-btns .ui-btn { flex: 1 1 210px; }
}
@media (max-width: 575.98px) {
    .ui-card { padding: var(--ui-4) var(--ui-3); border-radius: var(--radius-sm, 8px); }
    .ui-btns .ui-btn { flex: 1 1 100%; }
    .ui-table th, .ui-table td { padding: 10px 12px; }
}

/* ══ Headings on dark panels ═══════════════════════════════════════════════
   The block above colours every UNCLASSED h2/h3/h4 inside .ui-page in
   --color-primary-dark. That is right on white and invisible on the site's
   dark-blue hero and CTA panels, where it measured 1.0-1.5:1 — "Pay
   Publication Charges", "Conference Proposal", "Publication Process &
   Guidelines", "Submit Your Request Here" and others.

   The fix lives here, next to the rule that causes it, rather than as a
   class added to each heading: any heading inside one of these dark
   components is white, whatever page it is on. .ui-on-dark is the opt-in
   for a dark panel added later.

   Two selector forms because the colour rule above has two: the
   .content.ui-page one (0-4-1) needs the long form to lose. */
.ui-page :is(.ui-on-dark, .pex-hero, .pc-hero, .pc-submit, .sc-cta, .jwb-hero, .jwb-final-cta,
             .sj-hero, .snj-alt, .au-act, .au-cta, .au-multi) :is(h1, h2, h3, h4, h5, h6):not([class]),
.blog .blog-details .content.ui-page :is(.ui-on-dark, .pex-hero, .pc-hero, .pc-submit, .sc-cta, .jwb-hero,
             .jwb-final-cta, .sj-hero, .snj-alt, .au-act, .au-cta, .au-multi) :is(h1, h2, h3, h4, h5, h6):not([class]) {
    color: #fff;
}