/* ============================================================
   RANKRIX: PAGES LAYER
   The rules every page needs that are not part of a home page
   widget: the glass hero and empty-state panels of the fallback
   templates (index.php, 404.php, inc/template-tags.php), the skip
   link inc/seo.php prints on every page, the caption under the
   hero figures, and the caption inc/chrome-copy.php inserts into
   the locked header. Loads AFTER rkx-widgets.css and BEFORE
   rkx-responsive.css, which has the last word at the extremes.

   Everything here follows the widget layer's tokens: --w-glass,
   --w-border, --w-accent*, --w-r, --w-ease, --w-font, --w-disp,
   --w-mono and the --big large-display multiplier. Nothing
   circular. Containers never react to hover; controls do.
   ============================================================ */

/* ------------------------------------------------------------
   TEMPLATE HERO  (inc/template-tags.php, used by index.php and 404.php)
   The panel that opens every page WordPress renders without Elementor.
   ------------------------------------------------------------ */
.rkx-phero__panel {
	display: flex; flex-direction: column; gap: clamp(14px, 2vh, 22px);
	padding: clamp(20px, 3vh, 38px) clamp(18px, 2.6vw, 40px);
}
.rkx-phero__head { margin: 0; max-width: var(--rkx-measure-wide, 92ch); }
.rkx-phero__head .rkx-w-title { font-size: calc(clamp(27px, min(3.4vw, 5.4vh), 50px) * var(--big)); line-height: 1.05; }
.rkx-phero__head .rkx-w-intro { margin-top: 14px; }
.rkx-phero + .rkx-sec { padding-top: 0; }                         /* the panel below the hero sits one gap away, not two */

/* breadcrumbs */
.rkx-phero__crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; }
.rkx-phero__crumbs li { display: flex; align-items: center; gap: 10px; font-family: var(--w-font); font-size: calc(10.5px * var(--big)); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; color: var(--w-dim); }
.rkx-phero__crumbs li + li::before { content: "/"; color: rgba(243, 239, 230, 0.24); }
.rkx-phero__crumbs a { color: var(--w-muted); text-decoration: none; transition: color var(--w-fast) var(--w-ease); }
.rkx-phero__crumbs a:hover { color: #F3EFE6; }
.rkx-phero__crumbs a:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }
.rkx-phero__crumbs [aria-current="page"] { color: var(--w-accent-tx); }

/* empty states */
.rkx-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(22px, 3vh, 40px) clamp(18px, 2.4vw, 36px); }
.rkx-empty__title { margin: 0; font-family: var(--w-disp); font-size: calc(clamp(20px, 2vw, 30px) * var(--big)); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #F3EFE6; }
.rkx-empty__text { margin: 0; max-width: var(--rkx-measure, 72ch); font-size: calc(14.5px * var(--big)); line-height: 1.6; color: var(--w-muted); }
.rkx-empty__links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; }
/* a post or page WordPress renders through index.php: its own content, inside the panel */
.rkx-empty__content > :first-child { margin-top: 0; }
.rkx-empty__content > :last-child { margin-bottom: 0; }
.rkx-empty__content a { color: var(--w-accent-tx); }
.rkx-empty__content h2, .rkx-empty__content h3 { font-family: var(--w-disp); line-height: 1.25; color: #F3EFE6; }

@media (max-width: 560px) {
	.rkx-empty__links .rkx-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------
   SKIP LINK  (inc/seo.php injects it at wp_body_open)
   The chrome is locked, so the skip link is added rather than
   edited in. It stays out of the way until it is focused.
   ------------------------------------------------------------ */
.rkx-skip {
	position: fixed; top: 8px; left: 8px; z-index: 2000;
	padding: 12px 18px;
	font-family: var(--rkx-font, Inter, sans-serif); font-size: 13px; font-weight: 600;
	color: #F3EFE6; text-decoration: none;
	background: rgba(31, 57, 194, 0.95);
	border: 1px solid rgba(129, 140, 248, 0.6); border-radius: var(--rkx-radius, 1px);
	transform: translateY(-160%);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rkx-skip:focus { transform: none; outline: 2px solid #F3EFE6; outline-offset: 2px; }
#rkx-content { display: block; scroll-margin-top: 80px; }

/* The honesty caption under the hero console numbers (inc/widgets/hero.php). */
.rkx-hero__viz-caption {
	margin: 0; padding-top: 10px; border-top: 1px solid var(--w-border);
	font-family: var(--w-font); font-size: calc(10.5px * var(--big)); line-height: 1.45;
	letter-spacing: 0.02em; color: var(--w-dim);
}
.rkx-hero__viz-caption:empty { display: none; }

/* ------------------------------------------------------------------
   Header mega-menu featured card: caption marking the growth bars as
   an illustration. The card lives in the locked chrome; the caption is
   inserted by inc/chrome-copy.php, so its styling belongs here.
   ------------------------------------------------------------------ */
.rkx-fc-note {
	margin: 8px 0 0;
	font-size: calc(10px * var(--rkx-big, 1));
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rkx-ghost-b, rgba(243, 239, 230, .42));
}