/**
 * Style presets.
 *
 * Each preset redefines design tokens on the body. Components read the tokens
 * and never the raw palette, so a preset is a dozen declarations rather than a
 * second copy of the stylesheet — and a component added later inherits the
 * presets automatically.
 *
 * Loaded after theme.css so the overrides win without !important.
 */

/* =========================================================================
   Brand — the original. Defined here for completeness; tokens.css already
   supplies these, so this block only documents the baseline.
   ========================================================================= */

.s4s-style--brand {
	--s4s-page: var(--s4s-sand);
	--s4s-accent: var(--s4s-gold);
}

/* =========================================================================
   Ocean — white, airy, photography-led. Cyan carries the accents and cards
   sit on soft shadows rather than borders.
   ========================================================================= */

.s4s-style--ocean {
	--s4s-sand: #FFFFFF;
	--s4s-sand-deep: #F2F7FA;
	--s4s-cream: #F2F7FA;
	--s4s-cream-warm: #F7FBFD;
	--s4s-paper: #FFFFFF;
	--s4s-paper-warm: #F7FBFD;

	--s4s-gold: #0E8FBF;
	--s4s-gold-hover: #11A3D9;
	--s4s-gold-light: #6FCBE8;
	--s4s-gold-dark: #0A6F95;

	--s4s-ink: #10222E;
	--s4s-slate: #4A6472;

	--s4s-line: rgba(16, 34, 46, .10);
	--s4s-line-soft: rgba(16, 34, 46, .06);
	--s4s-line-strong: rgba(16, 34, 46, .20);

	--s4s-radius: 18px;
	--s4s-radius-sm: 12px;
	--s4s-section-y: clamp(72px, 9vw, 128px);

	background: #FFFFFF;
}

/* Borders give way to shadow — the single change that most makes this read as
   a different site rather than a recoloured one. */
.s4s-style--ocean .s4s-card,
.s4s-style--ocean .s4s-lead,
.s4s-style--ocean .s4s-panel,
.s4s-style--ocean .s4s-facts,
.s4s-style--ocean .s4s-mycourse,
.s4s-style--ocean .s4s-curriculum__list {
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(16, 34, 46, .05), 0 10px 30px -12px rgba(16, 34, 46, .18);
}
.s4s-style--ocean .s4s-card:hover,
.s4s-style--ocean .s4s-lead:hover {
	border-color: transparent;
	box-shadow: 0 2px 4px rgba(16, 34, 46, .06), 0 18px 44px -14px rgba(14, 143, 191, .32);
	transform: translateY(-2px);
}

.s4s-style--ocean .s4s-btn { border-radius: 999px; }
.s4s-style--ocean .s4s-btn--gold { color: #FFFFFF; }
.s4s-style--ocean .s4s-btn--gold:hover { color: #FFFFFF; }

.s4s-style--ocean h1,
.s4s-style--ocean h2,
.s4s-style--ocean h3 { letter-spacing: -.025em; }

.s4s-style--ocean .s4s-section,
.s4s-style--ocean .s4s-block { padding-block: var(--s4s-section-y); }

/* The gold "4" in the wordmark would fight the cyan. */
.s4s-style--ocean .s4s-footer__wordmark span { color: var(--s4s-gold-light); }

/* =========================================================================
   Editorial — warm paper, larger type, hairline rules. Reads like a report.
   ========================================================================= */

.s4s-style--editorial {
	--s4s-sand: #F7F3EC;
	--s4s-sand-deep: #EFE8DC;
	--s4s-paper: #FFFCF6;
	--s4s-paper-warm: #F7F3EC;

	--s4s-ink: #1D1B16;
	--s4s-slate: #5E5749;

	--s4s-line: rgba(29, 27, 22, .16);
	--s4s-line-soft: rgba(29, 27, 22, .09);

	--s4s-radius: 4px;
	--s4s-radius-sm: 3px;
	--s4s-radius-pill: 3px;

	--s4s-body: 18px;
	--s4s-section-y: clamp(64px, 8vw, 112px);

	background: #F7F3EC;
}

.s4s-style--editorial .s4s-card,
.s4s-style--editorial .s4s-lead {
	border-width: 1px;
	box-shadow: none;
}
.s4s-style--editorial .s4s-card__title,
.s4s-style--editorial .s4s-lead__title { letter-spacing: -.01em; }

/* A rule above each section heading, the way a printed report separates
   chapters. */
.s4s-style--editorial .s4s-section > .s4s-wrap > h2:first-child::before,
.s4s-style--editorial .s4s-curriculum__title::before {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	background: var(--s4s-gold);
	margin-bottom: 18px;
}

.s4s-style--editorial .s4s-btn { border-radius: 3px; }

/* =========================================================================
   Deep water — dark throughout. Heavier to read, so the measure tightens and
   the body colour lifts off pure white to cut the glare.
   ========================================================================= */

.s4s-style--deep {
	--s4s-sand: #07202F;
	--s4s-sand-deep: #061B28;
	--s4s-cream: #E7EFF4;
	--s4s-cream-warm: #F1F6F9;
	--s4s-paper: #0B2B3D;
	--s4s-paper-warm: #0E3245;

	--s4s-ink: #E7EFF4;
	--s4s-slate: #9DB6C4;
	--s4s-navy-600: #E7EFF4;
	--s4s-navy-850: #04141E;

	--s4s-line: rgba(231, 239, 244, .16);
	--s4s-line-soft: rgba(231, 239, 244, .09);
	--s4s-line-strong: rgba(231, 239, 244, .3);

	background: #07202F;
	color: #E7EFF4;
}

.s4s-style--deep h1,
.s4s-style--deep h2,
.s4s-style--deep h3,
.s4s-style--deep h4 { color: var(--s4s-cream-warm); }

.s4s-style--deep a { color: var(--s4s-gold-light); }
.s4s-style--deep a:hover { color: var(--s4s-gold); }

.s4s-style--deep .s4s-card,
.s4s-style--deep .s4s-lead,
.s4s-style--deep .s4s-panel,
.s4s-style--deep .s4s-facts,
.s4s-style--deep .s4s-curriculum__list,
.s4s-style--deep .s4s-mycourse { background: var(--s4s-paper); }

.s4s-style--deep .s4s-btn--outline { color: var(--s4s-cream); border-color: var(--s4s-line-strong); }

/* Form fields on a dark ground need their own treatment or they stay white. */
.s4s-style--deep .s4s-form__field input,
.s4s-style--deep .s4s-form__field select,
.s4s-style--deep .s4s-form__field textarea {
	background: rgba(255, 255, 255, .06);
	border-color: var(--s4s-line-strong);
	color: var(--s4s-cream);
}

/* The sand and paper bands would flash white against this. Bands are emitted
   by the widget base as s4s-block--bg-{name}. */
.s4s-style--deep .s4s-block--bg-sand,
.s4s-style--deep .s4s-block--bg-paper,
.s4s-style--deep .s4s-related { background: var(--s4s-sand-deep); }

/* =========================================================================
   Logo backdrop — keeps dark artwork legible on the navy header.
   ========================================================================= */

.s4s-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Deliberately a fixed light value, not --s4s-paper: on the Deep water preset
   paper is navy, and a dark panel behind dark artwork hides the thing it exists
   to reveal. Padding scales with the logo so the badge stays proportional. */
.s4s-logo--pill .s4s-brand__mark,
.s4s-logo--circle .s4s-brand__mark {
	background: #FFFDF8;
	padding: var(--s4s-logo-pad, 8px) calc(var(--s4s-logo-pad, 8px) * 1.4);
}
.s4s-logo--pill .s4s-brand__mark { border-radius: calc(var(--s4s-logo-pad, 8px) + 6px); }
.s4s-logo--circle .s4s-brand__mark { border-radius: 999px; padding: var(--s4s-logo-pad, 8px); }
.s4s-logo--none .s4s-brand__mark {
	background: none;
	padding: 0;
	box-shadow: none;
}

/* The footer sits on navy too. */
.s4s-logo--pill .s4s-footer__mark,
.s4s-logo--circle .s4s-footer__mark {
	display: inline-flex;
	background: #FFFDF8;
	padding: 8px 12px;
	border-radius: 14px;
}
.s4s-logo--circle .s4s-footer__mark { border-radius: 999px; padding: 10px; }

/* Width is the control; height follows. The old max-height of 52px silently
   overrode any width above roughly 52px, which is what made the size setting
   look broken. */
.s4s-brand__mark .s4s-logo__img { width: var(--s4s-logo-w, 38px); height: auto; max-height: none; }
.s4s-footer__mark .s4s-logo__img { width: var(--s4s-logo-fw, 54px); height: auto; max-height: none; }

/* The header is padding-based, so it grows with the logo instead of cropping
   it — but not without limit on a phone. */
@media (max-width: 640px) {
	.s4s-brand__mark .s4s-logo__img { width: min(var(--s4s-logo-w, 38px), 46vw); }
}