/* PF Fris: visual, information-dense, structure first */

/* Boxed layout: header/utility bar/footer run full-bleed; only CONTENT sections
   are inset "cards" against the tinted page ground. Not the whole theme. */
body { background: var(--wp--preset--color--page-tint); }
.site-header-wrap, .rg-utility-bar, .rg-footer { background: var(--wp--preset--color--white); }

.rg-card-section {
	max-width: 1200px;
	background: var(--wp--preset--color--white);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(31,42,44,0.07);
	padding: 2.4rem;
	margin: 1.5rem auto;
}
.rg-card-section > *:first-child { margin-top: 0; }
.rg-card-section > *:last-child { margin-bottom: 0; }
.rg-card-section h2 { margin-top: 2.2rem; margin-bottom: 0.9rem; }
.rg-card-section h2:first-child { margin-top: 0; }
.rg-card-section p { margin-top: 0; margin-bottom: 1.1rem; line-height: 1.65; }
@media (max-width: 1264px) {
	.rg-card-section { margin: 1.5rem 2rem; }
}
@media (max-width: 782px) {
	/* 14px margin plus 24px padding cost a fifth of a phone screen, so trim
	   both: the card edge still reads as a card at 10px. */
	.rg-card-section { margin: 0.6rem; padding: 1.15rem; }
}

/* Utility bar */
.rg-utility-bar {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.rg-utility-bar p {
	margin: 0;
	padding: 0.5rem 0;
	font-size: 0.8rem;
}
.rg-utility-bar a { color: var(--wp--preset--color--white); }

/* Header */
.site-header-wrap {
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.site-header-wrap a { color: var(--wp--preset--color--ink); text-decoration: none; }

.rg-wordmark {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.55rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
	text-decoration: none !important;
	white-space: nowrap;
}
.rg-wordmark-city { font-weight: 400; }
.rg-wordmark-name { font-weight: 800; }
.rg-wordmark:hover .rg-wordmark-name { color: var(--wp--preset--color--amber); }

/* Primary navigation: hover/focus on desktop, tap accordion on mobile.
   Panels open without JS via :focus-within; nav.js adds close-on-repeat-tap,
   Escape, one-section-at-a-time and the mobile scroll lock. */
.rg-nav { position: relative; }

.rg-nav-toggle { display: none; }

.rg-nav-list {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rg-nav-list > li { position: relative; }

.rg-nav-list > li > a,
.rg-sub-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.55rem 0.7rem;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	background: none;
	border: none;
	border-radius: 7px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.rg-nav-list > li > a:hover,
.rg-sub-trigger:hover { background: var(--wp--preset--color--paper); }
.rg-nav-list > li > a:focus-visible,
.rg-sub-trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
}

.rg-caret {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.15s ease;
}
.rg-nav-group.is-open .rg-caret { transform: rotate(180deg); }

/* Panels */
.rg-nav-panel {
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	box-shadow: 0 20px 44px rgba(31,42,44,0.16);
	padding: 1rem;
	display: none;
	z-index: 30;
}
.rg-nav-group:hover > .rg-nav-panel,
.rg-nav-group:focus-within > .rg-nav-panel,
.rg-nav-group.is-open > .rg-nav-panel {
	display: block;
}

.rg-nav-mega-panel { width: 760px; max-width: min(92vw, calc(100vw - 2rem)); }
.rg-nav-panel-list { width: 270px; }
.rg-nav-panel-list ul { list-style: none; margin: 0; padding: 0; }
.rg-nav-panel-list li + li { margin-top: 0.15rem; }
.rg-nav-panel-list a {
	display: block;
	padding: 0.5rem 0.6rem;
	border-radius: 6px;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.rg-nav-panel-list a:hover { background: var(--wp--preset--color--paper); }

.rg-nav-panel-lead {
	display: inline-block;
	margin-bottom: 0.6rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--amber);
	text-decoration: none;
}
.rg-nav-mega-heading {
	margin: 0.8rem 0 0.45rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
.rg-nav-mega-heading:first-of-type { margin-top: 0.2rem; }

.rg-nav-mega-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.7rem;
}
.rg-nav-mega-item {
	display: flex;
	flex-direction: column;
	border-radius: 7px;
	overflow: hidden;
	text-decoration: none !important;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
}
.rg-nav-mega-item img,
.rg-nav-mega-placeholder-fill {
	width: 100%;
	height: 78px;
	object-fit: cover;
	display: block;
}
.rg-nav-mega-placeholder-fill {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--amber) 100%);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	padding: 0 0.4rem;
}
.rg-nav-mega-item > span:last-child {
	padding: 0.45rem 0.55rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}
.rg-nav-mega-item:hover { border-color: var(--wp--preset--color--amber); }

/* Mobile: full-width accordion */
@media (max-width: 900px) {
	.rg-nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0 10px;
		background: none;
		border: none;
		cursor: pointer;
	}
	.rg-nav-toggle span {
		display: block;
		height: 2px;
		background: var(--wp--preset--color--ink);
		border-radius: 2px;
	}
	.rg-nav-toggle:focus-visible {
		outline: 2px solid var(--wp--preset--color--amber);
		outline-offset: 2px;
	}

	.rg-nav-list {
		display: none;
		position: absolute;
		top: calc(100% + 0.5rem);
		/* The nav element is only as wide as the burger, so anchor the panel
		   to its right edge and give it a real width of its own. */
		right: 0.5rem;
		left: auto;
		width: min(340px, calc(100vw - 1.5rem));
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 10px;
		box-shadow: 0 20px 44px rgba(31,42,44,0.16);
		padding: 0.4rem;
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
		z-index: 40;
	}
	.rg-nav.is-open .rg-nav-list { display: flex; }

	.rg-nav-list > li { width: 100%; }
	.rg-nav-list > li > a,
	.rg-sub-trigger {
		box-sizing: border-box;
		width: 100%;
		min-height: 44px;
		justify-content: space-between;
		padding: 0.7rem 0.8rem;
		font-size: 1rem;
	}
	.rg-nav-list > li + li { border-top: 1px solid var(--wp--preset--color--line); }

	.rg-nav-panel {
		position: static;
		width: auto;
		max-width: none;
		box-shadow: none;
		border: none;
		border-radius: 0;
		padding: 0 0 0.6rem;
		display: none;
	}
	/* On mobile only an explicit tap opens a section, never focus drifting in. */
	.rg-nav-group.is-open > .rg-nav-panel { display: block; }
	.rg-nav-group:hover > .rg-nav-panel,
	.rg-nav-group:focus-within > .rg-nav-panel { display: none; }
	.rg-nav-group.is-open:hover > .rg-nav-panel,
	.rg-nav-group.is-open:focus-within > .rg-nav-panel { display: block; }

	.rg-nav-panel-list a { min-height: 44px; display: flex; align-items: center; font-size: 0.95rem; }
	.rg-nav-mega-grid { grid-template-columns: 1fr 1fr; }
	.rg-nav-mega-item img,
	.rg-nav-mega-placeholder-fill { height: 64px; }
}

body.rg-nav-locked { overflow: hidden; }
}

/* Buttons: outline variant (no pill radius, matches theme.json 7px) */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--amber);
	background: transparent;
}

/* Breadcrumbs */
.rg-breadcrumbs {
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 0.75rem;
}
.rg-breadcrumbs a { color: inherit; }

/* Homepage photo banner, above the text+map hero card */
.rg-home-banner { position: relative; height: 340px; overflow: hidden; }
.rg-home-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-home-banner-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 0.9rem 2.4rem;
	background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
	color: white;
	font-size: 0.85rem;
}
@media (max-width: 782px) {
	.rg-home-banner { height: 220px; }
	.rg-home-banner-caption { padding: 0.7rem 1.2rem; font-size: 0.78rem; }
}

/* Homepage hero (padding here wins over .rg-card-section's shorthand, source order) */
.rg-hero-wrap {
	gap: 2.5rem;
	padding: 3rem 2.4rem;
	align-items: center;
}
@media (max-width: 782px) {
	.rg-hero-wrap { padding: 1.6rem 1.15rem; }
}
.rg-hero-text { flex: 1.05; }
.rg-hero-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rg-highlight {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--wp--preset--color--amber);
	background: var(--wp--preset--color--amber-tint);
	border-radius: 5px;
	padding: 0.18rem 0.5rem;
	margin-left: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.rg-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 0.3rem 0.65rem;
}
.rg-route-map-card {
	flex: 0.95;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.5rem;
	min-width: min(320px, 100%);
}
.rg-route-map {
	height: 360px;
	border-radius: 6px;
	background: var(--wp--preset--color--paper);
}
.rg-route-map .leaflet-popup-content { font-family: var(--wp--preset--font-family--body); font-size: 0.88rem; line-height: 1.5; }
.rg-route-map .leaflet-popup-content a { color: var(--wp--preset--color--amber); }
.rg-route-map-tooltip.leaflet-tooltip,
.rg-map-tooltip.leaflet-tooltip {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.8rem;
	border: none;
	box-shadow: 0 4px 10px rgba(31,42,44,0.15);
}
.rg-route-map-legend {
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-soft);
	margin: 0.6rem 0 0;
	text-align: center;
}

.rg-muted { color: var(--wp--preset--color--ink-soft); font-size: 0.9rem; }

/* Body copy links: underline with a bit of breathing room, external links get a small icon */
.wp-block-post-content a,
main a {
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
main a[href^="http"]:not([href*="rostockgedser.com"])::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.22em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
	vertical-align: -0.05em;
}

/* Tables: responsive scroll wrapper, nicer default look */
.wp-block-table {
	overflow-x: auto;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--line);
}
.wp-block-table table { width: 100%; border-collapse: collapse; margin: 0; }
.wp-block-table th {
	text-align: left;
	background: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.85);
	padding: 0.8rem 1rem;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	white-space: nowrap;
}
.wp-block-table td {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 0.92rem;
}
.wp-block-table tbody tr:last-child td { border-bottom: none; }
.wp-block-table tbody tr:hover td { background: var(--wp--preset--color--paper); }

/* Comparison table wrap */
.rg-table-wrap { padding-bottom: 0.5rem; }
.rg-table-wrap table { width: 100%; }

/* Visual route cards (replaces the plain comparison table) */
.rg-route-cards {
	display: grid;
	/* Fit the cards that are actually there. A hard five-column grid left the
	   three-card France tab with two empty columns and 151px cards. */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}
.rg-route-cards-6 { grid-template-columns: repeat(6, 1fr); }
.rg-route-cards-4 { grid-template-columns: repeat(4, 1fr); }

.rg-details-table { margin-top: 1.6rem; }
.rg-details-table summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--wp--preset--color--amber);
	list-style: none;
}
.rg-details-table summary::-webkit-details-marker { display: none; }
.rg-details-table summary::before { content: "+ "; }
.rg-details-table[open] summary::before { content: "\2212 "; }
.rg-details-table .wp-block-table { margin-top: 1rem; }
@media (max-width: 782px) {
	.rg-details-table .wp-block-table { position: relative; }
	.rg-details-table .wp-block-table::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 28px;
		background: linear-gradient(to right, transparent, var(--wp--preset--color--white));
		pointer-events: none;
	}
}

/* CSS-only tabs (radio-button technique, no JS) */
.rg-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.rg-tab-labels { display: flex; gap: 0.4rem; border-bottom: 2px solid var(--wp--preset--color--line); margin-bottom: 1.6rem; flex-wrap: wrap; }
.rg-tab-labels label {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
	padding: 0.6rem 1rem;
	border-bottom: 2.5px solid transparent;
	margin-bottom: -2px;
}
.rg-tab-panel { display: none; }
#rg-tab-france:checked ~ .rg-tab-panels .rg-panel-france,
#rg-tab-spain:checked ~ .rg-tab-panels .rg-panel-spain,
#rg-tab-ci:checked ~ .rg-tab-panels .rg-panel-ci { display: block; }
#rg-tab-france:checked ~ .rg-tab-labels label[for="rg-tab-france"],
#rg-tab-spain:checked ~ .rg-tab-labels label[for="rg-tab-spain"],
#rg-tab-ci:checked ~ .rg-tab-labels label[for="rg-tab-ci"] {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--amber);
}
.rg-route-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none !important;
	background: var(--wp--preset--color--paper);
}
.rg-route-card:hover { border-color: var(--wp--preset--color--amber); box-shadow: 0 10px 24px rgba(31,42,44,0.1); transform: translateY(-2px); }
.rg-route-card-img { height: 110px; position: relative; }
.rg-route-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-route-card-img.rg-nav-mega-placeholder .rg-nav-mega-placeholder-fill { height: 110px; }
.rg-route-card-body { padding: 0.9rem 1rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.rg-route-card-body .rg-highlight { margin-left: 0; margin-bottom: 0.5rem; align-self: flex-start; white-space: normal; line-height: 1.3; }
.rg-route-card-name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1rem; color: var(--wp--preset--color--ink); margin-bottom: 0.2rem; }
.rg-route-card-meta { font-size: 0.82rem; color: var(--wp--preset--color--ink-soft); margin-bottom: 0.7rem; }
.rg-route-card-cta { margin-top: auto; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.82rem; color: var(--wp--preset--color--amber); }

@media (max-width: 900px) {
	.rg-route-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
	.rg-route-cards { grid-template-columns: 1fr; }
}

/* Quote / trust strip */
.rg-quote-strip {
	background: var(--wp--preset--color--amber-tint);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1.6rem 0;
}
.rg-quote-strip p { margin: 0; max-width: 860px; font-size: 1rem; }

/* Real-photo showcase */
.rg-photo-section { margin-top: 1.2rem; }
.rg-photo-cover img { width: 100%; height: 300px; object-fit: cover; border-radius: 8px; }
.rg-photo-cover figcaption { font-size: 0.8rem; color: var(--wp--preset--color--ink-soft); margin-top: 0.4rem; }

/* Haven tile grid */
.rg-haven-grid { gap: 1px !important; background: var(--wp--preset--color--line); border: 1px solid var(--wp--preset--color--line); }
.rg-haven-tile { background: var(--wp--preset--color--white); padding: 1.1rem 1rem; }
.rg-haven-tile p { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.92rem; }
.rg-haven-tile .rg-muted { font-family: var(--wp--preset--font-family--body); font-weight: 400; display: block; margin-top: 0.2rem; }

/* Route/haven hero (featured image banner) */
.rg-route-hero { position: relative; padding-bottom: 2rem; }
.rg-route-hero-image { position: relative; }
.rg-route-hero-image img { width: 100%; height: 440px; object-fit: cover; display: block; }
.rg-route-hero-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0) 55%);
}
.rg-route-hero-text { margin-top: -3.2rem; position: relative; z-index: 1; }
.rg-route-hero-text .rg-breadcrumbs { color: rgba(255,255,255,0.85); }
.rg-route-hero-text h1 {
	background: var(--wp--preset--color--white);
	display: inline-block;
	padding: 0.9rem 1.3rem;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(31,42,44,0.18);
}

/* Fact panel pattern (used inside post-content on route/haven pages) */
.rg-fact-panel {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.3rem 1.4rem;
}
.rg-fact-panel h3 {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 0.9rem;
}
.rg-fact-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 0.9rem;
}
.rg-fact-row:last-child { border-bottom: none; }
.rg-fact-row .rg-fact-label { color: var(--wp--preset--color--ink-soft); }
.rg-fact-row .rg-fact-value { font-weight: 600; text-align: right; }

/* Tip / note callout block */
.rg-tip {
	background: var(--wp--preset--color--amber-tint);
	border-left: 3px solid var(--wp--preset--color--amber);
	border-radius: 6px;
	padding: 1rem 1.2rem;
}
.rg-tip strong { color: var(--wp--preset--color--ink); }

/* Pros / cons block */
.rg-proscons { gap: 1.5rem !important; }
.rg-proscons > .wp-block-column {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.2rem 1.4rem;
}
.rg-proscons h3 { font-size: 0.95rem; margin: 0 0 0.6rem; }
.rg-proscons ul { margin: 0; padding-left: 1.1rem; }
.rg-proscons li { margin-bottom: 0.35rem; font-size: 0.92rem; }

/* Homepage "who's behind this" photo + text block */
.rg-who-block { gap: 2rem; }
.rg-who-portal {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	background: var(--wp--preset--color--amber-tint);
	border-radius: 16px;
	padding: 1.4rem 1.6rem;
}
.rg-who-portal a { display: block; border-radius: 50%; }
.rg-who-portal img.rg-porthole {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 7px solid var(--wp--preset--color--ink);
	box-shadow: 0 0 0 4px var(--wp--preset--color--white), 0 8px 20px rgba(31,42,44,0.22);
	transition: transform 0.15s ease;
}
.rg-who-portal a:hover img.rg-porthole,
.rg-who-portal a:focus-visible img.rg-porthole { transform: scale(1.04); }
.rg-who-caption { font-size: 0.8rem; color: var(--wp--preset--color--ink-soft); text-align: center; }
.rg-who-text { flex: 1 1 380px; }
.rg-who-text ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.rg-who-text li { margin-bottom: 0.4rem; line-height: 1.5; }
@media (max-width: 782px) {
	.rg-who-block { justify-content: center; text-align: center; }
	.rg-who-portal img.rg-porthole { width: 120px; height: 120px; border-width: 5px; }
}

/* Homepage "how this guide is different" 3-card row */
.rg-how-cards { gap: 1.5rem !important; margin-top: 1.6rem; }
.rg-how-cards > .wp-block-column {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.4rem 1.5rem;
}
.rg-how-cards h3 { margin-top: 0 !important; margin-bottom: 0.5rem; }
.rg-how-cards p { margin-bottom: 0 !important; }

/* Generic content block (photo-caption card, small info tile) */
.rg-block {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.2rem 1.3rem;
}

/* Port mini-map */
.rg-port-map { height: 260px; border-radius: 6px; background: var(--wp--preset--color--paper); }

/* Weather widget */
.rg-weather { min-height: 156px; }
.rg-weather-now { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.rg-weather-temp { font-family: var(--wp--preset--font-family--heading); font-size: 2.2rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.rg-weather-desc { font-weight: 600; font-size: 0.95rem; }
.rg-weather-days { display: flex; gap: 0.5rem; }
.rg-weather-day { flex: 1; background: var(--wp--preset--color--paper); border-radius: 6px; padding: 0.6rem 0.4rem; text-align: center; font-size: 0.82rem; }
.rg-weather-day-label { font-weight: 600; margin-bottom: 0.2rem; }
.rg-weather-credit { margin-top: 0.7rem; font-size: 0.72rem; }

/* Port essentials grid (map / weather / facilities) */
.rg-port-essentials { gap: 1.2rem !important; }
.rg-port-essentials > .wp-block-column {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.2rem 1.3rem;
}
.rg-port-essentials h3 {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 0.8rem;
}
.rg-port-essentials ul { margin: 0; padding-left: 1.1rem; }
.rg-port-essentials li { font-size: 0.9rem; margin-bottom: 0.35rem; }

/* Port photo gallery */
.rg-port-gallery.wp-block-gallery {
	border-radius: 8px;
	overflow: hidden;
}
.rg-port-gallery img { border-radius: 6px; }

/* General polish: consistent transitions, tighter rhythm */
a, .wp-element-button, .rg-nav-list > li > a, .rg-haven-tile, .rg-nav-mega-item {
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.wp-element-button:hover { transform: translateY(-1px); }
.rg-haven-tile a { text-decoration: none; }
.rg-haven-tile:hover { background: var(--wp--preset--color--paper); }
h1, h2, h3 { text-wrap: balance; }
.rg-card-section h3 { margin-top: 1.6rem; margin-bottom: 0.6rem; }

/* Compact author byline (replaces the old full "Written by..." paragraph) */
.rg-byline {
	margin-top: 2.2rem !important;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-soft);
}

/* In-page "jump to section" nav (alternative to real tabs, keeps one SEO page) */
.rg-jumpnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 1.4rem 0 2rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.rg-jumpnav a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none !important;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 0.4rem 0.75rem;
}
.rg-jumpnav a:hover { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--amber); }
html { scroll-padding-top: 90px; }

/* Quick-facts summary strip (ferrygogo-style, top of route/port pages) */
.rg-quickfacts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	background: var(--wp--preset--color--ink);
	border-radius: 8px;
	margin: 1.2rem 0 1.6rem;
	overflow: hidden;
}
.rg-quickfacts-item {
	flex: 1 1 0;
	min-width: 140px;
	padding: 0.9rem 1.2rem;
	border-right: 1px solid rgba(255,255,255,0.14);
}
.rg-quickfacts-item:last-child { border-right: none; }
.rg-qf-label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,0.6);
	margin-bottom: 0.25rem;
}
.rg-qf-value {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--white);
}
@media (max-width: 700px) {
	.rg-quickfacts-item { flex: 1 1 45%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); }
}

/* Footer */
.rg-footer {
	background: var(--wp--preset--color--ink);
	color: rgba(255,255,255,0.75);
	padding: 1.5rem 0;
	margin-top: 3rem;
}
.rg-footer a { color: rgba(255,255,255,0.85); }
.rg-footer p { margin: 0; font-size: 0.85rem; }

@media (max-width: 782px) {
	.rg-hero-wrap { flex-wrap: wrap; }
	.rg-haven-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.rg-route-hero-text { margin-top: -2rem; }
}

/* Route map legend */
.rg-map-legend {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-soft);
}
.rg-map-legend li { display: flex; align-items: center; gap: 0.45rem; }
.rg-map-key { flex: none; display: inline-block; }
.rg-map-key-depart {
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--wp--preset--color--ink);
}
.rg-map-key-arrive {
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--amber);
}
.rg-map-key-sailed {
	width: 22px; height: 0;
	border-top: 3px solid var(--wp--preset--color--amber);
}
.rg-map-key-research {
	width: 22px; height: 0;
	border-top: 3px dashed var(--wp--preset--color--amber);
}

.rg-picture { display: contents; }

.rg-faq details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 0.9rem 0; }
.rg-faq details:last-child { border-bottom: none; }
.rg-faq summary { cursor: pointer; font-family: var(--wp--preset--font-family--heading); font-weight: 600; }
.rg-faq p { margin: 0.7rem 0 0; }

/* Footer: compact navigation */
.rg-footer { padding: 2.6rem 0 1.4rem; }
.rg-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}
.rg-footer-col h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--white);
	margin: 0 0 0.8rem;
}
.rg-footer-col ul { list-style: none; margin: 0; padding: 0; }
.rg-footer-col li { margin-bottom: 0.45rem; font-size: 0.87rem; }
.rg-footer-col a { text-decoration: none; }
.rg-footer-col a:hover { color: var(--wp--preset--color--white); text-decoration: underline; }
.rg-footer-about p { font-size: 0.87rem; line-height: 1.6; margin: 0 0 0.7rem; max-width: 34ch; }
.rg-footer-brand {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	color: var(--wp--preset--color--white);
	letter-spacing: -0.015em;
}
.rg-footer-legal {
	max-width: 1200px;
	margin: 2.2rem auto 0;
	padding: 1.2rem 1rem 0;
	border-top: 1px solid rgba(255,255,255,0.15);
	font-size: 0.78rem;
}
@media (max-width: 782px) {
	.rg-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
	.rg-footer-about { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.rg-footer-grid { grid-template-columns: 1fr; }
}

/* Photo strips wrap instead of crushing when nested in a narrow column */
.rg-photo-section { flex-wrap: wrap; }
.rg-photo-section > .wp-block-column { flex: 1 1 200px; min-width: 190px; }

/* WordPress core forces flex-wrap:nowrap!important on columns above 782px,
   which crushes photo strips nested inside a narrow column. */
@media (min-width: 782px) {
	.wp-block-columns.rg-photo-section { flex-wrap: wrap !important; }
	.wp-block-columns.rg-photo-section > .wp-block-column { flex: 1 1 200px; min-width: 190px; }
}

/* Newsreader is the heading face. UI chrome stays on the sans: small caps
   labels, nav and table headers read badly in a serif at those sizes. */
.rg-nav-list > li > a,
.rg-sub-trigger,
.rg-nav-panel-list a,
.rg-nav-panel-lead,
.rg-nav-mega-heading,
.rg-nav-mega-item > span:last-child,
.rg-nav-mega-placeholder-fill,
.rg-highlight,
.rg-badge,
.rg-map-tooltip.leaflet-tooltip,
.wp-block-table th,
.rg-tab-labels label,
.rg-route-card-cta,
.rg-weather-temp,
.rg-jumpnav a,
.rg-qf-label,
.rg-qf-value,
.rg-footer-col h2 {
	font-family: var(--wp--preset--font-family--body);
}

/* Serif needs a touch less weight and a touch more size than the grotesque did */
.rg-wordmark { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.75rem); letter-spacing: -0.005em; }
.rg-wordmark-name { font-weight: 700; }
.rg-footer-brand { font-size: 1.3rem; letter-spacing: -0.005em; }

.rg-footer-disclosure {
	max-width: 1200px;
	margin: 2rem auto 0;
	padding: 0 1rem;
	font-size: 0.78rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.6);
}
.rg-hero-badges { margin-bottom: 0.9rem; }

.rg-map-key-ferry {
	width: 22px; height: 0;
	border-top: 3px solid var(--wp--preset--color--amber);
}
.rg-map-key-other {
	width: 22px; height: 0;
	border-top: 2px dashed #8b98a8;
}

/* Homepage comparison: a table on desktop, one card per route on mobile.
   Six columns will not fit a 320px phone, and horizontal scrolling hides
   exactly the decision information people came for. */
.rg-exp-sailed { color: var(--wp--preset--color--amber); }
.rg-exp-research { color: var(--wp--preset--color--ink-soft); }

@media (max-width: 782px) {
	.rg-compare-table table,
	.rg-compare-table tbody,
	.rg-compare-table tr,
	.rg-compare-table td { display: block; width: 100%; }

	.rg-compare-table thead { display: none; }

	.rg-compare-table tr {
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 10px;
		padding: 0.9rem 1rem;
		margin-bottom: 0.9rem;
		background: var(--wp--preset--color--white);
	}

	.rg-compare-table td {
		border: none;
		padding: 0.25rem 0;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		font-size: 0.92rem;
	}
	.rg-compare-table td::before {
		content: attr(data-label);
		flex: none;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.72rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink-soft);
	}
	.rg-compare-table td[data-label=""] { justify-content: flex-end; padding-top: 0.6rem; }
	.rg-compare-table td[data-label=""]::before { content: none; }

	/* The destination is the card heading, not a labelled row */
	.rg-compare-table td[data-label="Destination"] {
		display: block;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.15rem;
		padding-bottom: 0.5rem;
		margin-bottom: 0.4rem;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
	.rg-compare-table td[data-label="Destination"]::before { content: none; }
	.rg-compare-table td span.rg-highlight { text-align: right; }
}

/* Hero: two actions, then a quiet row of destinations */
.rg-hero-destinations {
	margin: 0.9rem 0 0;
	font-size: 0.88rem;
	color: var(--wp--preset--color--ink-soft);
}
.rg-hero-destinations a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rg-hero-destinations a:hover { color: var(--wp--preset--color--amber); }
.rg-hero-destinations span { margin: 0 0.35rem; opacity: 0.5; }

@media (max-width: 600px) {
	.rg-hero-text .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 0.6rem; }
	.rg-hero-text .wp-block-button { width: 100%; }
	.rg-hero-text .wp-block-button__link { display: block; width: 100%; text-align: center; min-height: 48px; line-height: 1.6; }
	.rg-hero-destinations { line-height: 2; }
}

/* Footer: keep the disclosure to a readable measure instead of one long line */
.rg-footer-disclosure {
	max-width: 78ch;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255,255,255,0.12);
}
.rg-footer-legal {
	border-top: none;
	margin-top: 0.9rem;
	padding-top: 0;
	color: rgba(255,255,255,0.5);
}
.rg-footer-legal a { color: rgba(255,255,255,0.7); }
.rg-footer-about p { margin-bottom: 0.6rem; }
.rg-footer-brand { margin-bottom: 0.7rem; }

/* WordPress writes per-column percentages (40/30/30) that add to exactly 100%,
   so any gap pushes the last column onto a second row. Share the space
   equally instead, and let min-width decide when wrapping is actually wanted. */
.wp-block-columns.rg-photo-section > .wp-block-column {
	flex-basis: 0 !important;
	flex-grow: 1 !important;
	min-width: 190px;
}


/* Bottom line: description left, legal right, stacked on small screens */
.rg-footer-legal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.6rem 2rem;
	flex-wrap: wrap;
}
.rg-footer-legal p { margin: 0; }
@media (max-width: 600px) {
	.rg-footer-legal { flex-direction: column; gap: 0.4rem; }
}

/* Experience badge: say sailed or researched once, near the top */
.rg-experience {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1.2rem;
	padding: 0.4rem 0.8rem;
	border-radius: 7px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
	font-size: 0.82rem;
	line-height: 1.3;
}
.rg-experience strong { font-weight: 600; }
.rg-experience-sailed {
	border-color: var(--wp--preset--color--amber);
	background: var(--wp--preset--color--amber-tint);
}
.rg-experience-sailed strong { color: var(--wp--preset--color--amber); }
.rg-experience-tick { color: var(--wp--preset--color--amber); font-weight: 700; }
.rg-experience-note {
	color: var(--wp--preset--color--ink-soft);
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: 0.45rem;
	margin-left: 0.1rem;
}

/* External links: show that the click leaves the site */
.rg-ext::after {
	content: "\2197";
	display: inline-block;
	margin-left: 0.18em;
	font-size: 0.82em;
	line-height: 1;
	opacity: 0.65;
	text-decoration: none;
}
.rg-footer .rg-ext::after,
.rg-nav .rg-ext::after { opacity: 0.5; }


/* Footer blocks share the canvas width so their edges line up with the
   content card above; only the disclosure TEXT is held to a readable measure. */
.rg-footer-grid,
.rg-footer-disclosure,
.rg-footer-legal { max-width: 1200px; }
.rg-footer-disclosure { padding: 1.4rem 1rem 0; }
.rg-footer-disclosure p { max-width: 78ch; margin: 0; }

/* Prose stays at the 820px reading width; structural blocks use the full
   card. Columns, tables and photo strips are things you scan, not read, and
   squeezing them into the text column is what made the port guide look
   cramped. Card is 1200 with 2.4rem padding, so the inner width is 1123. */
@media (min-width: 1100px) {
	/* Inside the card the parent is already the full inner width, so simply
	   lifting the reading-width cap is enough. */
	.rg-card-section > .wp-block-columns {
		max-width: none !important;
	}

	/* Content pages keep their blocks inside the reading column. Pulling them
	   out needed a hard-coded offset that broke whenever a container width
	   changed, so it is not worth the fragility. */
	.entry-content > .rg-tabs,
	.entry-content > .wp-block-columns {
		max-width: none !important;
	}
}

/* Nested strips get less room, so let three sit side by side a bit longer */
.wp-block-columns.rg-photo-section > .wp-block-column { min-width: 170px; }

/* Any table with three or more columns becomes one card per row on phones.
   The homepage comparison already worked this way; this generalises it so
   the Isle of Wight six-column table and every future table behave alike. */
@media (max-width: 782px) {
	.rg-responsive-table,
	.rg-responsive-table tbody,
	.rg-responsive-table tr,
	.rg-responsive-table td { display: block; width: 100%; }

	.rg-responsive-table thead { display: none; }

	.rg-responsive-table tr {
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 10px;
		padding: 0.9rem 1rem;
		margin-bottom: 0.9rem;
		background: var(--wp--preset--color--white);
	}

	.rg-responsive-table td {
		border: none;
		padding: 0.25rem 0;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		font-size: 0.92rem;
		text-align: right;
	}
	.rg-responsive-table td::before {
		content: attr(data-label);
		flex: none;
		text-align: left;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.72rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink-soft);
	}

	/* First cell is the card heading rather than a labelled row */
	.rg-responsive-table td:first-child {
		display: block;
		text-align: left;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.1rem;
		padding-bottom: 0.5rem;
		margin-bottom: 0.4rem;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
	.rg-responsive-table td:first-child::before { content: none; }
	.rg-responsive-table td[data-label=""]::before { content: none; }
}

/* Hero photo: the site's own Portsmouth shot, sized to stay sharp */
.rg-hero-photo {
	flex: 1;
	margin: 0;
	min-width: min(420px, 100%);
}
.rg-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
}
.rg-hero-photo figcaption {
	margin-top: 0.55rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 900px) {
	.rg-hero-photo { min-width: 100%; }
}

@media (max-width: 782px) {
	/* Match the card padding used elsewhere on phones */
	.rg-route-map-card { padding: 1.15rem; }
}

/* A nowrap eyebrow pushed the page 39px wide at 320. Long labels may wrap. */
@media (max-width: 782px) {
	.rg-highlight {
		white-space: normal;
		max-width: 100%;
		margin-left: 0;
		line-height: 1.35;
	}
}

/* Route that is still running but has a confirmed end date */
.rg-highlight.rg-closing { color: var(--wp--preset--color--white); background: var(--wp--preset--color--ink); }
.rg-nav-flag {
	display: block;
	font-style: normal;
	font-size: 0.62rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
	margin-top: 0.1rem;
}
.rg-route-card-body .rg-exp-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.rg-home-note { margin-top: 1rem; }