@charset "UTF-8";

/* ==========================================================================
   Rubber Jellyfish — pages.css

   The contract between the theme and page content authored in the WordPress
   editor. Every class here is prefixed "rj-" and every one of them is used by
   the ready-to-paste page markup in ../../../../pages/.

   Two rules keep this file portable:
     1. Nothing here depends on the theme's header/footer markup, so this file
        can be enqueued from a different theme (a Divi child theme, say) and
        the pasted pages will still look right.
     2. Background photos are addressed through .rj-bg--* utilities at the end
        of this file, so page markup never carries an image URL that would
        break on a domain or Media Library change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sections — the horizontal bands a page is built from
   -------------------------------------------------------------------------- */

.rj-section {
	position: relative;
	padding-block: var(--rj-space-xl);
}

.rj-section > .rj-container,
.rj-section > .rj-container--narrow {
	position: relative;
	z-index: 1;
}

.rj-section--tight {
	padding-block: var(--rj-space-lg);
}

.rj-section--tint {
	background: var(--rj-sand);
}

.rj-section--mist {
	background: var(--rj-mist);
}

.rj-section--dark {
	background: var(--rj-navy);
	color: var(--rj-on-dark-soft);
}

/* A photographic band. The veil is a pseudo-element rather than a gradient
   baked into background-image so the same overlay works over any photo. */
.rj-section--photo {
	background-color: var(--rj-navy);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--rj-on-dark-soft);
}

.rj-section--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--rj-veil);
}

.rj-section--dark :is(h1, h2, h3, h4),
.rj-section--photo :is(h1, h2, h3, h4) {
	color: var(--rj-white);
}

.rj-section--dark a:not(.rj-btn),
.rj-section--photo a:not(.rj-btn) {
	color: var(--rj-white);
}

.rj-section--dark a:not(.rj-btn):hover,
.rj-section--photo a:not(.rj-btn):hover {
	color: var(--rj-amber-light);
}

/* Section heading block: optional eyebrow, title, amber rule, optional lede. */
.rj-section__head {
	max-width: var(--rj-measure);
	margin-bottom: var(--rj-space-lg);
}

.rj-section__head--center {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.rj-eyebrow {
	display: block;
	margin-bottom: 0.65rem;
	font-family: var(--rj-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--rj-amber-text);
}

.rj-section--dark .rj-eyebrow,
.rj-section--photo .rj-eyebrow,
.rj-hero .rj-eyebrow {
	color: var(--rj-amber-light);
}

/* The short amber rule under a heading — the signature of the reference
   layout. Applied to the heading itself so it travels with the text. */
.rj-rule::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin-top: var(--rj-space-sm);
	background: var(--rj-amber);
}

.rj-section__head--center .rj-rule::after {
	margin-inline: auto;
}

.rj-lede {
	margin-top: var(--rj-space-md);
	font-size: var(--rj-step-1);
	line-height: 1.55;
	color: var(--rj-ink-soft);
}

.rj-section--dark .rj-lede,
.rj-section--photo .rj-lede {
	color: var(--rj-on-dark-soft);
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

.rj-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(78vh, 40rem);
	padding-block: clamp(4rem, 3rem + 8vw, 8rem);
	background-color: var(--rj-navy);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	color: var(--rj-on-dark);
}

.rj-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--rj-veil);
}

.rj-hero--page {
	min-height: min(48vh, 26rem);
}

.rj-hero__inner {
	position: relative;
	z-index: 1;
	width: min(100% - 2.5rem, 56rem);
	margin-inline: auto;
}

.rj-hero h1 {
	margin-bottom: var(--rj-space-md);
	color: var(--rj-white);
	text-shadow: 0 2px 20px rgba(6, 16, 28, 0.5);
}

.rj-hero__subhead {
	max-width: 44rem;
	margin-inline: auto;
	font-size: var(--rj-step-1);
	line-height: 1.55;
	color: var(--rj-on-dark);
	text-shadow: 0 1px 12px rgba(6, 16, 28, 0.55);
}

.rj-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rj-space-sm);
	margin-top: var(--rj-space-lg);
}

/* --------------------------------------------------------------------------
   3. Quick links — the four-tile strip beneath a hero
   --------------------------------------------------------------------------
   Ordered by commitment, left to right, and colour-stepped from amber to navy
   so the visual weight matches the size of the ask.
   -------------------------------------------------------------------------- */

.rj-quicklinks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--rj-navy);
}

.rj-quicklinks a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 4.25rem;
	padding: 1rem 1.25rem;
	color: var(--rj-white);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.rj-quicklinks li:nth-child(1) a { background: var(--rj-amber-light); color: var(--rj-navy); }
.rj-quicklinks li:nth-child(2) a { background: var(--rj-amber); color: #2a1401; }
.rj-quicklinks li:nth-child(3) a { background: var(--rj-blue); }
.rj-quicklinks li:nth-child(4) a { background: var(--rj-navy-soft); }

.rj-quicklinks a:hover {
	background: var(--rj-navy);
	color: var(--rj-white);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* --------------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------------
   min-height 48px clears WCAG 2.2 AA 2.5.8 Target Size (24px minimum) with
   room to spare, and matches the AAA 44px guidance.
   -------------------------------------------------------------------------- */

.rj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.85rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--rj-radius);
	font-family: var(--rj-font-body);
	font-size: 0.83rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rj-btn--primary {
	background: var(--rj-blue);
	border-color: var(--rj-blue);
	color: var(--rj-white);
}

.rj-btn--primary:hover {
	background: var(--rj-blue-dark);
	border-color: var(--rj-blue-dark);
	color: var(--rj-white);
}

.rj-btn--accent {
	background: var(--rj-amber);
	border-color: var(--rj-amber);
	color: #2a1401;
}

.rj-btn--accent:hover {
	background: var(--rj-amber-light);
	border-color: var(--rj-amber-light);
	color: #2a1401;
}

.rj-btn--dark {
	background: var(--rj-navy);
	border-color: var(--rj-navy);
	color: var(--rj-white);
}

.rj-btn--dark:hover {
	background: var(--rj-navy-soft);
	border-color: var(--rj-navy-soft);
	color: var(--rj-white);
}

/* Outline button on a light ground. */
.rj-btn--secondary {
	background: transparent;
	border-color: var(--rj-navy);
	color: var(--rj-navy);
}

.rj-btn--secondary:hover {
	background: var(--rj-navy);
	color: var(--rj-white);
}

/* Outline button on a photo or dark ground. */
.rj-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--rj-white);
	color: var(--rj-white);
}

.rj-btn--ghost:hover {
	background: var(--rj-white);
	color: var(--rj-navy);
}

.rj-btn--full {
	width: 100%;
}

/* An inline "read on" link with an arrow. The arrow is decorative, so it is
   hidden from assistive technology — the link text carries the meaning. */
.rj-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--rj-amber);
	padding-bottom: 1px;
}

.rj-arrow:hover {
	border-bottom-color: currentColor;
}

.rj-arrow::after {
	content: "\2192";
	font-size: 1.1em;
	line-height: 1;
	transition: transform 0.15s ease;
}

.rj-arrow:hover::after {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */

.rj-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--rj-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Explicitly two across, not auto-fit: with four cards, auto-fit lays out
   three and leaves the fourth stranded on its own row. */
.rj-cards--2 { grid-template-columns: 1fr; }

.rj-cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

@media (min-width: 46em) {

	.rj-cards--2 { grid-template-columns: repeat(2, 1fr); }
}

.rj-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--rj-white);
	border: 1px solid var(--rj-line);
	border-radius: var(--rj-radius-lg);
	box-shadow: var(--rj-shadow-sm);
}

.rj-card > img,
.rj-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.rj-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--rj-space-sm);
	padding: var(--rj-space-md);
}

.rj-card :is(h2, h3, h4) {
	margin: 0;
	font-size: var(--rj-step-1);
}

.rj-card p {
	margin: 0;
	color: var(--rj-ink-soft);
}

.rj-card .rj-card__cta {
	margin-top: auto;
	padding-top: var(--rj-space-xs);
}

/* Numbered cards, for "how it works" style steps. */
.rj-card--step .rj-card__body {
	position: relative;
}

.rj-card__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--rj-mist);
	border-radius: 50%;
	font-family: var(--rj-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--rj-navy);
}

.rj-section--dark .rj-card,
.rj-section--photo .rj-card {
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   6. Statistics
   -------------------------------------------------------------------------- */

.rj-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--rj-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.rj-stat {
	padding: var(--rj-space-md) var(--rj-space-sm);
	background: rgba(255, 255, 255, 0.07);
	border-radius: var(--rj-radius-lg);
}

.rj-section:not(.rj-section--dark):not(.rj-section--photo) .rj-stat {
	background: var(--rj-sand);
}

/* On the sand band a sand tile disappears, so it becomes a white card there. */
.rj-section--tint .rj-stat {
	background: var(--rj-white);
}

.rj-stat__figure {
	display: block;
	font-family: var(--rj-font-display);
	font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--rj-amber);
}

.rj-section:not(.rj-section--dark):not(.rj-section--photo) .rj-stat__figure {
	color: var(--rj-blue);
}

.rj-stat__label {
	display: block;
	margin-top: 0.65rem;
	font-size: var(--rj-step--1);
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. Split media — text beside an image
   -------------------------------------------------------------------------- */

.rj-media {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rj-space-lg);
	align-items: center;
}

@media (min-width: 52em) {

	.rj-media {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	}

	/* Reverse puts the image first in the source order but on the right
	   visually, so the reading order stays text-then-image. */
	.rj-media--reverse .rj-media__figure {
		order: 2;
	}
}

.rj-media__body > :first-child {
	margin-top: 0;
}

.rj-media__figure {
	margin: 0;
}

.rj-media__figure img {
	width: 100%;
	border-radius: var(--rj-radius-lg);
	box-shadow: var(--rj-shadow-md);
}

.rj-media__figure figcaption {
	margin-top: 0.75rem;
	font-size: var(--rj-step--1);
	color: var(--rj-ink-soft);
}

.rj-section--dark .rj-media__figure figcaption,
.rj-section--photo .rj-media__figure figcaption {
	color: var(--rj-on-dark-soft);
}

/* Two overlapping photographs, as in the reference layout. Collapses to a
   simple stack below the breakpoint, where overlap would crop badly. */
.rj-stack {
	position: relative;
	display: grid;
	gap: var(--rj-space-sm);
	margin: 0;
}

.rj-stack img {
	width: 100%;
	border-radius: var(--rj-radius-lg);
	box-shadow: var(--rj-shadow-md);
}

@media (min-width: 52em) {

	.rj-stack {
		display: block;
		padding-bottom: 4.5rem;
		padding-right: 3rem;
	}

	.rj-stack img:last-child {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 58%;
		border: 6px solid var(--rj-white);
	}
}

/* --------------------------------------------------------------------------
   8. Video and embeds
   -------------------------------------------------------------------------- */

.rj-video {
	position: relative;
	margin: 0 0 var(--rj-space-md);
	overflow: hidden;
	background: var(--rj-navy);
	border-radius: var(--rj-radius-lg);
	box-shadow: var(--rj-shadow-md);
	aspect-ratio: 16 / 9;
}

.rj-video iframe,
.rj-video video,
.rj-video > .wp-block-embed__wrapper > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.rj-video figcaption {
	margin-top: 0.75rem;
	font-size: var(--rj-step--1);
	color: var(--rj-ink-soft);
}

/* A generic scroll container for anything with a fixed intrinsic width —
   the Google Calendar embed, wide tables. */
.rj-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.rj-embed {
	width: 100%;
	min-height: 34rem;
	border: 1px solid var(--rj-line);
	border-radius: var(--rj-radius-lg);
	background: var(--rj-white);
}

/* --------------------------------------------------------------------------
   9. Fact lists, wins timeline, link lists
   -------------------------------------------------------------------------- */

.rj-facts {
	display: grid;
	gap: var(--rj-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rj-facts > li {
	position: relative;
	padding-left: 2.25rem;
}

.rj-facts > li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--rj-amber);
	border-radius: 50%;
	transform: translateY(-50%);
}

.rj-facts--blue > li::before {
	background: var(--rj-blue);
}

/* Dated policy wins. The date is the visual anchor, the outcome the payload. */
.rj-wins {
	display: grid;
	gap: var(--rj-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.rj-win {
	display: grid;
	gap: var(--rj-space-sm);
	padding: var(--rj-space-md);
	background: var(--rj-white);
	border: 1px solid var(--rj-line);
	border-left: 5px solid var(--rj-green);
	border-radius: var(--rj-radius);
}

@media (min-width: 46em) {

	.rj-win {
		grid-template-columns: 11rem 1fr;
		gap: var(--rj-space-md);
		align-items: start;
	}
}

.rj-win__date {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rj-green-dark);
}

.rj-win h3 {
	margin-bottom: 0.5rem;
	font-size: var(--rj-step-1);
}

.rj-win p:last-child {
	margin-bottom: 0;
}

/* A plain list of outbound links with a description. */
.rj-linklist {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rj-linklist > li {
	padding-block: var(--rj-space-sm);
	border-bottom: 1px solid var(--rj-line);
}

.rj-linklist > li:first-child {
	border-top: 1px solid var(--rj-line);
}

.rj-linklist__name {
	font-weight: 700;
	color: var(--rj-navy);
}

.rj-linklist__meta {
	display: block;
	font-size: var(--rj-step--1);
	color: var(--rj-ink-soft);
}

/* Press coverage: outlet name, medium, region. */
.rj-press {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--rj-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rj-press > li {
	padding: var(--rj-space-md);
	background: var(--rj-white);
	border: 1px solid var(--rj-line);
	border-radius: var(--rj-radius-lg);
}

.rj-press a {
	font-family: var(--rj-font-display);
	font-size: var(--rj-step-1);
	font-weight: 600;
	text-decoration: none;
	color: var(--rj-navy);
}

.rj-press a:hover {
	color: var(--rj-blue-dark);
	text-decoration: underline;
}

.rj-press span {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--rj-step--1);
	color: var(--rj-ink-soft);
}

/* News teaser list. */
.rj-newslist {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rj-newslist > li {
	padding-block: var(--rj-space-md);
	border-bottom: 1px solid var(--rj-line);
}

.rj-newslist__date {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rj-amber-text);
}

.rj-section--dark .rj-newslist__date,
.rj-section--photo .rj-newslist__date {
	color: var(--rj-amber-light);
}

.rj-newslist h3 {
	margin: 0;
	font-size: var(--rj-step-1);
}

.rj-newslist h3 a {
	color: var(--rj-navy);
	text-decoration: none;
}

.rj-newslist h3 a:hover {
	color: var(--rj-blue-dark);
	text-decoration: underline;
}

.rj-section--dark .rj-newslist > li {
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.rj-section--dark .rj-newslist h3 a {
	color: var(--rj-white);
}

/* --------------------------------------------------------------------------
   10. Callouts and pull quotes
   -------------------------------------------------------------------------- */

.rj-callout {
	padding: var(--rj-space-md);
	background: var(--rj-mist);
	border-left: 5px solid var(--rj-blue);
	border-radius: var(--rj-radius);
}

.rj-callout > :last-child {
	margin-bottom: 0;
}

/* A callout heading is a label for the note, not a section title, so it stays
   at body-adjacent size whatever level the document structure needs it to be. */
.rj-callout :is(h2, h3, h4) {
	margin-bottom: var(--rj-space-xs);
	font-size: var(--rj-step-1);
}

.rj-callout--warn {
	background: #fdf2e6;
	border-left-color: var(--rj-amber);
}

.rj-pullquote {
	max-width: 46rem;
	margin: var(--rj-space-lg) auto;
	padding: 0;
	border: 0;
	font-family: var(--rj-font-display);
	font-size: var(--rj-step-2);
	font-style: italic;
	line-height: 1.35;
	text-align: center;
	color: var(--rj-navy);
}

.rj-section--dark .rj-pullquote,
.rj-section--photo .rj-pullquote {
	color: var(--rj-white);
}

.rj-pullquote cite {
	display: block;
	margin-top: var(--rj-space-sm);
	font-family: var(--rj-font-body);
	font-size: 0.82rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rj-amber-text);
}

.rj-section--dark .rj-pullquote cite,
.rj-section--photo .rj-pullquote cite {
	color: var(--rj-amber-light);
}

/* --------------------------------------------------------------------------
   11. Accordion (native details/summary — keyboard accessible with no JS)
   -------------------------------------------------------------------------- */

.rj-accordion {
	display: grid;
	gap: 0.75rem;
}

.rj-accordion details {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--rj-radius);
}

.rj-section:not(.rj-section--dark):not(.rj-section--photo) .rj-accordion details {
	background: var(--rj-white);
	border-color: var(--rj-line);
}

.rj-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rj-space-sm);
	min-height: 48px;
	padding: 0.9rem 1.25rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.rj-accordion summary::-webkit-details-marker {
	display: none;
}

.rj-accordion summary::after {
	content: "+";
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
}

.rj-accordion details[open] summary::after {
	content: "\2212";
}

.rj-accordion .rj-accordion__body {
	padding: 0 1.25rem 1.25rem;
}

/* --------------------------------------------------------------------------
   12. Donation amounts
   --------------------------------------------------------------------------
   Kept on the green already used across the donation section. Dark ink on
   green measures 9.8:1, comfortably past AA.
   -------------------------------------------------------------------------- */

.rj-amounts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 var(--rj-space-md);
	padding: 0;
	list-style: none;
}

.rj-amounts .rj-btn {
	min-width: 7rem;
	background: var(--rj-green);
	border-color: var(--rj-green);
	color: #16210b;
}

.rj-amounts .rj-btn:hover {
	background: var(--rj-green-dark);
	border-color: var(--rj-green-dark);
	color: var(--rj-white);
}

.rj-amounts .rj-btn--other {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

/* --------------------------------------------------------------------------
   13. Form card — a white panel floated on a photographic band
   -------------------------------------------------------------------------- */

.rj-form-card {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	background: var(--rj-white);
	border-radius: var(--rj-radius-lg);
	box-shadow: var(--rj-shadow-md);
	color: var(--rj-ink);
}

.rj-section--photo .rj-form-card :is(h1, h2, h3, h4) {
	color: var(--rj-navy);
}

.rj-section--photo .rj-form-card a:not(.rj-btn) {
	color: var(--rj-blue-dark);
}

.rj-section--photo .rj-form-card a:not(.rj-btn):hover {
	color: var(--rj-blue-darker);
}

.rj-section--photo .rj-form-card .rj-eyebrow,
.rj-section--dark .rj-form-card .rj-eyebrow {
	color: var(--rj-amber-text);
}

.rj-form-card .rj-lede {
	color: var(--rj-ink-soft);
}

/* Gravity Forms sits inside .rj-form-card. These rules restyle only what the
   plugin leaves to the theme; nothing here depends on Gravity Forms' own CSS
   layer being disabled. */
.rj-form-card .gform_wrapper .gfield_label {
	font-family: var(--rj-font-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rj-navy);
}

.rj-form-card .gform_wrapper input[type="text"],
.rj-form-card .gform_wrapper input[type="email"],
.rj-form-card .gform_wrapper input[type="tel"],
.rj-form-card .gform_wrapper input[type="url"],
.rj-form-card .gform_wrapper select,
.rj-form-card .gform_wrapper textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	background: var(--rj-sand);
	border: 1px solid var(--rj-line);
	border-radius: var(--rj-radius);
	font-family: var(--rj-font-body);
	font-size: 1rem;
	color: var(--rj-ink);
}

.rj-form-card .gform_wrapper textarea {
	min-height: 10rem;
	line-height: 1.55;
}

.rj-form-card .gform_wrapper .gform_button,
.rj-form-card .gform_wrapper button[type="submit"] {
	min-height: 48px;
	padding: 0.85rem 2.25rem;
	background: var(--rj-blue);
	border: 2px solid var(--rj-blue);
	border-radius: var(--rj-radius);
	font-family: var(--rj-font-body);
	font-size: 0.83rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--rj-white);
	cursor: pointer;
}

.rj-form-card .gform_wrapper .gform_button:hover,
.rj-form-card .gform_wrapper button[type="submit"]:hover {
	background: var(--rj-blue-dark);
	border-color: var(--rj-blue-dark);
}

/* The required asterisk and validation text need to survive on the sand
   ground; the plugin's defaults are too light for AA. */
.rj-form-card .gform_wrapper .gfield_required {
	color: #b3300f;
}

.rj-form-card .gform_wrapper .gfield_description.validation_message,
.rj-form-card .gform_wrapper .validation_error {
	color: #96280d;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   14. Figures and galleries
   -------------------------------------------------------------------------- */

.rj-figure {
	margin: 0 0 var(--rj-space-md);
}

.rj-figure img {
	width: 100%;
	border-radius: var(--rj-radius-lg);
}

.rj-figure figcaption {
	margin-top: 0.7rem;
	font-size: var(--rj-step--1);
	line-height: 1.5;
	color: var(--rj-ink-soft);
}

.rj-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--rj-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rj-gallery figure {
	margin: 0;
}

.rj-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--rj-radius);
}

.rj-gallery figcaption {
	margin-top: 0.6rem;
	font-size: var(--rj-step--1);
	line-height: 1.5;
	color: var(--rj-ink-soft);
}

/* --------------------------------------------------------------------------
   15. Prose — a readable measure for long-form body copy
   -------------------------------------------------------------------------- */

.rj-prose {
	max-width: var(--rj-measure);
}

.rj-prose > h2 {
	margin-top: var(--rj-space-lg);
}

.rj-prose > h3 {
	margin-top: var(--rj-space-md);
}

.rj-prose > :first-child {
	margin-top: 0;
}

.rj-prose ul,
.rj-prose ol {
	padding-left: 1.35rem;
}

.rj-prose li {
	margin-bottom: 0.5rem;
}

.rj-prose li::marker {
	color: var(--rj-amber);
}

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */

.rj-center { text-align: center; }

/* Portrait photographs cropped into a landscape card frame lose the subject if
   the crop is centred. This pulls the visible window towards the top. */
.rj-img--top { object-position: center 18%; }

.rj-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rj-space-sm);
	margin-top: var(--rj-space-md);
}
.rj-actions--center { justify-content: center; }
.rj-mt-lg { margin-top: var(--rj-space-lg); }
.rj-mb-0 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Background photographs
   --------------------------------------------------------------------------
   Page markup names a photo by class, never by URL. Paths are relative to this
   stylesheet, so they survive a domain change, a move to staging, and a change
   of site directory. To swap a photo site-wide, change it once here.

   Credits are recorded in ../../../../documentation/image-credits.md and on the
   site's Attributions page.
   -------------------------------------------------------------------------- */

.rj-bg--balloons-ocean {
	background-image: url("../../images/balloons-ocean-1920.jpg");
}

.rj-bg--sunset-waves {
	background-image: url("../../images/sunset-waves-1920.jpg");
}

.rj-bg--turtle-silhouette {
	background-image: url("../../images/turtle-silhouette-1920.jpg");
}

.rj-bg--burst-balloon {
	background-image: url("../../images/burst-balloon-sand-1920.jpg");
}

.rj-bg--balloons-shore {
	background-image: url("../../images/balloons-rocky-shore-1920.jpg");
}

.rj-bg--golden-hour {
	background-image: url("../../images/sea-golden-hour-1920.jpg");
}

.rj-bg--sunset-shore {
	background-image: url("../../images/sunset-shore-1920.jpg");
}

.rj-bg--waves-sand {
	background-image: url("../../images/waves-on-sand-1920.jpg");
}

/* Serve the smaller renditions on small viewports — a phone never needs the
   1920px file. */
@media (max-width: 50em) {

	.rj-bg--balloons-ocean { background-image: url("../../images/balloons-ocean-1200.jpg"); }
	.rj-bg--sunset-waves { background-image: url("../../images/sunset-waves-1200.jpg"); }
	.rj-bg--turtle-silhouette { background-image: url("../../images/turtle-silhouette-1200.jpg"); }
	.rj-bg--burst-balloon { background-image: url("../../images/burst-balloon-sand-1200.jpg"); }
	.rj-bg--balloons-shore { background-image: url("../../images/balloons-rocky-shore-1200.jpg"); }
	.rj-bg--golden-hour { background-image: url("../../images/sea-golden-hour-1200.jpg"); }
	.rj-bg--sunset-shore { background-image: url("../../images/sunset-shore-1200.jpg"); }
	.rj-bg--waves-sand { background-image: url("../../images/waves-on-sand-1200.jpg"); }
}