/* ==========================================================================
   Safe & Cozy — base
   Typography, layout primitives and buttons. Everything is scoped under
   .sc-page so dropping this into the RentacarWP theme cannot leak outwards,
   and the theme's global element rules cannot leak in.
   ========================================================================== */

.sc-page,
.sc-page *,
.sc-page *::before,
.sc-page *::after {
	box-sizing: border-box;
}

.sc-page {
	margin: 0;
	background: var(--sc-surface);
	color: var(--sc-body);
	font-family: var(--sc-font);
	font-size: var(--sc-fs-body);
	line-height: var(--sc-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --- Headings ------------------------------------------------------------ */

/* :where() keeps these at one-class specificity, so a component rule like
   .sc-card__title wins on source order instead of losing to `.sc-page h3` —
   which is what silently disabled the elements' title-size controls. */
.sc-page :where(h1, h2, h3, h4) {
	margin: 0;
	color: var(--sc-green-900);
	font-weight: 800;
	line-height: var(--sc-lh-snug);
	letter-spacing: -0.015em;
}

.sc-page :where(h1) {
	font-size: var(--sc-fs-h1);
	line-height: var(--sc-lh-tight);
	letter-spacing: -0.025em;
}

.sc-page :where(h2) {
	font-size: var(--sc-fs-h2);
	letter-spacing: -0.02em;
}

.sc-page :where(h3) {
	font-size: var(--sc-fs-h3);
	font-weight: 700;
}

.sc-page :where(h4) {
	font-size: var(--sc-fs-h4);
	font-weight: 700;
}

.sc-page :where(p) {
	margin: 0;
}

/* :where() keeps these resets at zero specificity, so any single-class
   component rule (.sc-btn--primary, .sc-nav__list a, …) still wins. */
.sc-page :where(a) {
	color: inherit;
	text-decoration: none;
	transition: color var(--sc-dur) var(--sc-ease);
}

.sc-page :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-page :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Take <picture> out of the box tree so the <img> sizes against the real
   container. Without this a percentage height on the img has nothing to
   resolve against and the image collapses. */
.sc-page :where(picture) {
	display: contents;
}

.sc-page :where(svg) {
	display: block;
	flex: none;
}

.sc-page :where(button) {
	font: inherit;
	color: inherit;
}

/* --- Layout -------------------------------------------------------------- */

.sc-container {
	width: 100%;
	max-width: calc(var(--sc-container) + var(--sc-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--sc-gutter);
}

.sc-section {
	padding-block: var(--sc-section-y);
}

/* --- Section heading + mountain rule ------------------------------------- */

.sc-section-head {
	margin-bottom: clamp(14px, 11.2px + 0.9vw, 18px);
	text-align: center;
}

.sc-section-head__rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sc-space-3);
	margin-top: 6px;
	color: var(--sc-gold-500);
}

/* The two tapered gold rules either side of the mountain glyph. */
.sc-section-head__rule::before,
.sc-section-head__rule::after {
	content: "";
	width: clamp(56px, 32px + 6vw, 130px);
	height: 1px;
	background: currentcolor;
	opacity: 0.55;
}

.sc-section-head__rule svg {
	width: 42px;
	height: 20px;
}

/* --- Buttons ------------------------------------------------------------- */

.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sc-space-2);
	padding: 11.52px 21.6px;
	border: 0;
	border-radius: var(--sc-radius-sm);
	font-size: var(--sc-fs-sm);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--sc-dur) var(--sc-ease),
		color var(--sc-dur) var(--sc-ease),
		transform var(--sc-dur) var(--sc-ease);
}

.sc-btn:hover {
	transform: translateY(-1px);
}

.sc-btn:active {
	transform: translateY(0);
}

.sc-btn--primary {
	background: var(--sc-green-900);
	color: var(--sc-on-dark);
}

.sc-btn--primary:hover {
	background: var(--sc-green-700);
	color: var(--sc-on-dark);
}

/* Secondary: a green outline, for the second of two buttons. */
.sc-btn--outline {
	border: 1px solid var(--sc-green-900);
	background: var(--sc-surface);
	color: var(--sc-green-900);
}

.sc-btn--outline:hover {
	background: var(--sc-cream);
	color: var(--sc-green-900);
}

.sc-btn--gold {
	padding: 12.8px 12.8px 12.8px 25.6px;
	background: var(--sc-gold-500);
	color: var(--sc-on-dark);
	font-size: var(--sc-fs-h3);
	gap: var(--sc-space-6);
}

.sc-btn--gold:hover {
	background: var(--sc-gold-600);
	color: var(--sc-on-dark);
}

/* The white disc holding the arrow inside the gold CTA button. */
/* A leading icon in a button. The arrow pill below sizes its own svg. */
.sc-btn > svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.sc-btn__arrow {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-surface);
	color: var(--sc-gold-500);
	transition: transform var(--sc-dur) var(--sc-ease);
}

.sc-btn--gold:hover .sc-btn__arrow {
	transform: translateX(3px);
}

.sc-btn__arrow svg {
	width: 16px;
	height: 16px;
}

/* --- Utilities ----------------------------------------------------------- */

.sc-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.sc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Keyboard focus only — never on mouse clicks. */
.sc-page :focus-visible {
	outline: 2px solid var(--sc-gold-500);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.sc-page *,
	.sc-page *::before,
	.sc-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Full bleed
   Lets a section escape whatever container the page builder wraps it in, so a
   hero or CTA band reaches the screen edges without the row having to be set
   to "stretch". The negative margins expand the element; width stays auto so
   no explicit 100vw is needed.
   -------------------------------------------------------------------------- */

.sc-bleed {
	margin-inline: calc(50% - 50vw);
}

/* 50vw counts the scrollbar, so a bleeding section overhangs by its width and
   leaves a sliver of horizontal scroll. Clipping has to happen at the root —
   an overflow set on <body> does not reliably propagate — and :has() keeps the
   rule to pages that actually contain one of our sections. `clip` does not
   create a scroll container, so the sticky header still works. */
html:has(.sc-page) {
	overflow-x: clip;
}

.sc-page {
	overflow-x: clip;
}