/* =========================================================================
   Ralph Jacobs Legal Hub — styles for markup emitted by the PLUGIN
   -------------------------------------------------------------------------
   The Legal & Compliance Centre plugin's shortcodes and document router emit
   their own rj-* markup (cards, badges, the reading surface, clauses, verify
   form, register tables). Those classes were styled by the block theme's
   assets/css/legal.css, which is no longer loaded now that the hub runs a
   classic theme — so this file carries them forward.

   Ported from theme/assets/css/legal.css and re-expressed in the shared shell's
   own custom properties (--rj-* from assets/css/main.css), so a palette change
   in main.css flows through here instead of drifting.

   Do not restyle shell components here — this file is only for plugin output.
   ========================================================================= */

/* ---- Document cards (library, updates) ---------------------------------- */
.rj-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.rj-card {
	border: 1px solid var(--rj-border-subtle);
	border-radius: var(--rj-radius-md);
	background: var(--rj-white);
	padding: 1.1rem 1.25rem;
}

.rj-card h3 {
	margin: 0 0 .4rem;
	font-size: 1.1rem;
}

.rj-card h3 a {
	text-decoration: none;
}

.rj-card .rj-card-meta {
	margin: .25rem 0 0;
	color: var(--rj-text-secondary);
	font-size: .85rem;
}

.rj-cat-group {
	margin: 2rem 0;
}

.rj-cat-group > h2 {
	padding-bottom: .3rem;
	border-bottom: 2px solid var(--rj-gold-on-light);
}

/* ---- Status badges -----------------------------------------------------
   Status is never conveyed by colour alone: every badge carries its own text
   label, so the colour is reinforcement, not the signal. (WCAG 1.4.1)
   ------------------------------------------------------------------------- */
.rj-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .75rem 0;
}

.rj-badge {
	display: inline-block;
	padding: .28rem .6rem;
	border: 1px solid;
	border-radius: var(--rj-radius-pill);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.rj-badge--current {
	color: #55622F;
	border-color: #6B7A43;
	background: #EFF2E6;
}

.rj-badge--scheduled {
	color: #7A5A1C;
	border-color: #7A5A1C;
	background: #F5EFDF;
}

.rj-badge--superseded,
.rj-badge--archived {
	color: var(--rj-text-secondary);
	border-color: #C9BC9E;
	background: var(--rj-white);
}

.rj-badge--withdrawn {
	color: #8A3033;
	border-color: #8A3033;
	background: #F6ECEC;
}

.rj-badge--info {
	color: var(--rj-green);
	border-color: var(--rj-green);
	background: #EAF0ED;
}

/* ---- Document reading surface ------------------------------------------- */
:root {
	/* Courtroom legal serif — Century Schoolbook is the US Supreme Court's
	   mandated face; Times New Roman / Georgia / Cambria fall back. No web font. */
	--rj-legal-serif: "Century Schoolbook", "Times New Roman", Georgia, Cambria, serif;
}

/* The document reads as white "paper" that fills the content width (the theme
   widens the container on desktop/wide — see legal-hub.css). Type is the classic
   courtroom serif at a roomy measure; the ToC + body lay out in two columns on
   desktop (below). */
.rj-legal-doc {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	font-family: var(--rj-legal-serif);
	font-size: 1.125rem;   /* 18px */
	line-height: 1.8;       /* roomy — court filings use 1.5–2.0 line spacing */
	color: var(--rj-text-body);
}

/* Guarantee the reading size on clause prose even if the shell sizes <p>. */
.rj-clause-text,
.rj-clause-text p,
.rj-clause-text li {
	font-size: 1.125rem;
	line-height: 1.8;
}

.rj-breadcrumb {
	margin-bottom: 1rem;
	color: var(--rj-text-secondary);
	font-size: .85rem;
}

.rj-breadcrumb a {
	color: inherit;
}

.rj-doc-title {
	margin: 0 0 .25rem;
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	line-height: 1.25;
}

.rj-doc-purpose {
	margin: 0 0 1rem;
	color: var(--rj-text-body);
	font-style: italic;
}

.rj-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .2rem 1rem;
	margin: 1rem 0;
	font-size: .9rem;
}

.rj-meta dt {
	color: var(--rj-text-secondary);
	font-weight: 700;
}

.rj-meta dd {
	margin: 0;
}

/* ---- Applicability summary --------------------------------------------- */
.rj-applicability {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--rj-border-subtle);
	border-left: 4px solid var(--rj-gold-on-light);
	border-radius: var(--rj-radius-md);
	background: var(--rj-white);
}

.rj-applicability h2 {
	margin: 0 0 .5rem;
	color: var(--rj-gold-on-light);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.rj-applicability ul {
	margin: 0;
	padding-left: 1.1rem;
}

/* ---- View toggle + transparency banner ---------------------------------- */
.rj-viewtoggle {
	display: inline-flex;
	overflow: hidden;
	margin: 1rem 0 .25rem;
	border: 1px solid var(--rj-green);
	border-radius: var(--rj-radius-pill);
}

.rj-viewtoggle a {
	padding: .4rem 1rem;
	color: var(--rj-green);
	font-size: .85rem;
	text-decoration: none;
}

.rj-viewtoggle a[aria-current="true"] {
	background: var(--rj-green);
	color: var(--rj-parchment);
}

.rj-transparency-banner {
	margin: .25rem 0 1.25rem;
	color: var(--rj-text-secondary);
	font-size: .8rem;
}

/* ---- Table of contents -------------------------------------------------- */
.rj-toc {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--rj-border-subtle);
	border-radius: var(--rj-radius-md);
	background: var(--rj-white);
}

.rj-toc h2 {
	margin: 0 0 .5rem;
	color: var(--rj-text-secondary);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.rj-toc ol {
	margin: 0;
	padding-left: 1.2rem;
}

.rj-toc a {
	text-decoration: none;
	color: var(--rj-text-body);
}

.rj-toc a:hover,
.rj-toc a:focus-visible {
	text-decoration: underline;
}

/* The ToC lives inside .rj-legal-doc, so pull its list type back from the 18px
   document body to compact navigation type. */
.rj-toc ol li {
	font-size: .95rem;
	line-height: 1.45;
	margin-top: .45em;
}

/* ---- Two-column document layout ----------------------------------------
   The plugin wraps the ToC + sections in .rj-doc-layout( .rj-toc + .rj-doc-body ).
   Desktop and up: ToC becomes a sticky left column that stays in view while the
   document body scrolls on the right. Below desktop it stacks (ToC on top).
   ------------------------------------------------------------------------- */
.rj-doc-body {
	min-width: 0;         /* long words / wide tables wrap instead of overflowing */
	max-width: 82ch;      /* comfortable legal measure; extra width becomes margin */
}

.rj-doc-body > .rj-section:first-child {
	margin-top: 0;
}

@media (min-width: 1024px) {
	.rj-doc-layout--with-toc {
		display: grid;
		grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
		column-gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}

	.rj-doc-layout--with-toc > .rj-toc {
		position: sticky;
		top: 88px;                        /* clear the sticky main bar */
		align-self: start;
		max-height: calc(100vh - 112px);  /* scroll internally if very long */
		overflow: auto;
		margin: 0;
	}

	.rj-doc-body {
		max-width: none;                  /* the grid column sets the measure here */
	}
}

@media (max-width: 1023px) {
	.rj-doc-layout--with-toc > .rj-toc {
		margin: 1.25rem 0 1.75rem;
	}
}

/* ---- Sections & clauses ------------------------------------------------
   scroll-margin-top keeps a deep-linked clause clear of the sticky main bar
   instead of hiding under it.
   ------------------------------------------------------------------------- */
.rj-section {
	margin: 2rem 0;
	scroll-margin-top: 120px;
}

.rj-section > h2 {
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--rj-border-subtle);
	font-size: 1.5rem;
	line-height: 1.35;
}

.rj-clause {
	margin: 1.1rem 0;
	scroll-margin-top: 120px;
}

.rj-clause.is-not-applicable {
	opacity: .55;
}

.rj-clause-summary {
	margin: 0 0 .3rem;
	color: var(--rj-text-secondary);
	font-style: italic;
}

.rj-clause-id {
	color: var(--rj-text-secondary);
	font-size: .7rem;
	letter-spacing: .04em;
}

.rj-clause-badge {
	margin-left: .4rem;
	font-size: .68rem;
}

.rj-legal-doc table {
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
}

.rj-legal-doc th,
.rj-legal-doc td {
	padding: .5rem .6rem;
	border: 1px solid var(--rj-border-subtle);
	text-align: left;
	vertical-align: top;
}

/* ---- Actions & notices -------------------------------------------------- */
.rj-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1rem 0;
}

.rj-btn {
	display: inline-block;
	padding: .5rem 1rem;
	border: 1px solid var(--rj-green);
	border-radius: var(--rj-radius-md);
	background: var(--rj-green);
	color: var(--rj-parchment);
	font-family: inherit;
	font-size: .9rem;
	text-decoration: none;
	cursor: pointer;
}

.rj-btn--ghost {
	background: transparent;
	color: var(--rj-green);
}

.rj-notice {
	margin: 1rem 0;
	padding: .8rem 1rem;
	border: 1px solid;
	border-radius: var(--rj-radius-md);
}

.rj-notice--warning {
	color: #7A5A1C;
	border-color: #7A5A1C;
	background: #F5EFDF;
}

.rj-notice--error {
	color: #8A3033;
	border-color: #8A3033;
	background: #F6ECEC;
}

.rj-notice--info {
	color: var(--rj-green);
	border-color: var(--rj-green);
	background: #EAF0ED;
}

.rj-notice--success {
	color: #55622F;
	border-color: #6B7A43;
	background: #EFF2E6;
}

/* ---- Verify form + register tables -------------------------------------- */
.rj-verify-form {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1rem 0;
}

.rj-verify-form input[type="text"] {
	flex: 1 1 320px;
	padding: .5rem .6rem;
	border: 1px solid var(--rj-border-subtle);
	border-radius: var(--rj-radius-md);
	font-family: inherit;
}

.rj-table {
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
}

.rj-table th,
.rj-table td {
	padding: .5rem .6rem;
	border: 1px solid var(--rj-border-subtle);
	text-align: left;
}

.rj-table thead th {
	background: var(--rj-parchment);
}

/* Wide register tables must scroll in their own box, never the page body. */
.rj-table-scroll {
	overflow-x: auto;
}

/* ---- Legal contact page (theme-owned, sourced from Legal Entity records) - */
.rj-contact-entities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.rj-contact-entity {
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--rj-border-subtle);
	border-left: 4px solid var(--rj-green);
	border-radius: var(--rj-radius-md);
	background: var(--rj-white);
}

.rj-contact-entity h2 {
	margin: 0 0 .15rem;
	font-size: 1.05rem;
}

.rj-contact-entity__trading {
	margin: 0 0 .75rem;
	color: var(--rj-text-secondary);
	font-size: .85rem;
}

.rj-contact-entity address {
	font-style: normal;
	white-space: pre-line;
}

/* Focus visibility (WCAG 2.2 AA) */
.rj-legal-doc a:focus-visible,
.rj-btn:focus-visible,
.rj-viewtoggle a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(21, 58, 47, .45);
}

/* ---- Print -----------------------------------------------------------
   A printed legal document has to stand on its own as evidence: the whole
   shell goes, the reading surface flattens, and the snapshot/hash footer is
   revealed. Selectors cover the hub's shell classes, not just bare elements.
   ------------------------------------------------------------------------- */
.rj-print-footer {
	display: none;
}

@media print {
	.rj-announcement,
	.rj-sites,
	.rj-header,
	.rj-mainbar,
	.rj-mainbar-sentinel,
	.rj-mega,
	.rj-drawer-root,
	.rj-mobile-search,
	.rj-footer,
	.rj-skip-link,
	.rj-breadcrumbs,
	.rj-actions,
	.rj-viewtoggle,
	.rj-searchform {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	.rj-legal-doc {
		max-width: none !important;
		padding: 0 !important;
		border: none !important;
		background: #fff !important;
	}

	.rj-clause,
	.rj-section,
	table,
	tr {
		break-inside: avoid;
	}

	/* Print is always the full publication, never the applicable-only view. */
	.rj-clause.is-not-applicable {
		opacity: 1;
	}

	a[href]::after {
		content: "";
	}

	.rj-print-footer {
		display: block !important;
		margin-top: 1rem;
		padding-top: .5rem;
		border-top: 1px solid #000;
		font-size: 10pt;
	}
}

/* =========================================================================
   Company Register ([rj_company_register]) — legal entities stacked vertically,
   each showing its legal information inline ("Label: value") with a collapsible
   "View domains & countries" disclosure. Styled with the shell's own tokens.
   ========================================================================= */
.rj-entity-register__intro {
	margin: 0 0 1.25rem;
	color: var(--rj-text-secondary, #55524b);
}

.rj-entity-register {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 1.25rem 0 2rem;
}

.rj-entity {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--rj-border-subtle, #e3e0d8);
	border-inline-start: 4px solid var(--rj-gold-on-light, #b08d57);
	border-radius: 10px;
	background: var(--rj-white, #ffffff);
}

.rj-entity__name {
	margin: 0 0 .85rem;
	font-family: var(--rj-legal-serif, Georgia, serif);
	font-size: 1.35rem;
	line-height: 1.3;
}

.rj-facts {
	margin: 0;
}

.rj-fact {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .5rem;
	padding: .45rem 0;
	border-block-end: 1px solid var(--rj-border-subtle, #eee7d9);
}

.rj-fact:last-child {
	border-block-end: none;
}

.rj-fact__label {
	flex: 0 0 15rem;
	max-width: 100%;
	font-weight: 600;
	color: var(--rj-text-secondary, #55524b);
}

.rj-fact__value {
	flex: 1 1 16rem;
	min-width: 0;
	word-break: break-word;
}

/* Narrow screens: label sits above its value. */
@media (max-width: 640px) {
	.rj-fact__label {
		flex-basis: 100%;
	}
}

.rj-entity__more {
	margin-top: 1rem;
}

.rj-entity__more > summary {
	cursor: pointer;
	display: inline-block;
	padding: .4rem .1rem;
	font-weight: 600;
	color: var(--rj-link, #7a5b23);
}

.rj-entity__more > summary:hover {
	text-decoration: underline;
}

.rj-entity__more-body {
	padding-top: .5rem;
}

.rj-entity__more-body h4 {
	margin: .9rem 0 .3rem;
	font-size: 1rem;
}

.rj-entity__more-body .rj-muted {
	color: var(--rj-text-secondary, #6a7280);
}

/* ---- Accessibility fixes (RJ-PUB-08 audit, 29 Sep 2026) ------------------ */

/* B4: long addresses (e.g. PAIAComplaints@inforegulator.org.za) wrap at 320 px. */
.rj-clause-text a {
	overflow-wrap: anywhere;
}

/* C4: card and archive titles became H2 (they sit directly under the page H1);
   keep their previous size. */
.rj-card h2 {
	margin: 0 0 .4rem;
	font-size: 1.1rem;
}

.rj-card h2 a {
	text-decoration: none;
}

.rj-archive-doc {
	font-size: 1.2rem;
	margin-block: 2rem .75rem;
}