/*
Theme Name:     Studios 6
Theme URI:      https://studios6.co.uk
Description:    Twentytwentyfive child theme.
Author:         Studios 6
Author URI:     https://studios6.co.uk
Template:       twentytwentyfive
Version:        0.3.4
*/

/* Header on phones: logo at brand minimum (140px) and CTA hidden so logo + menu icon fit. */
@media (max-width: 600px) {
	.s6-header .wp-block-site-logo img {
		width: 140px;
		height: auto;
	}

	.s6-header .s6-header-cta {
		display: none;
	}
}

/* Block style "Card": flat surface, 1px Line border, 12px radius (brand: cards 12-14px). */
.is-style-s6-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 1.5rem;
	height: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.is-style-s6-card:hover {
	border-color: var(--wp--preset--color--signal-blue);
}

.is-style-s6-card a {
	font-weight: 700;
	text-decoration: none;
}

/*
 * Block style "Plane motif": angled bands at the S's rising angle, dark to light,
 * ending on a thin slate "foundation" line. Bleeds off the right edge, sits behind
 * the section background only (never behind text). Max 3 bands per layout.
 */
.is-style-s6-planes {
	--s6-plane-dark: color-mix(in srgb, var(--wp--preset--color--signal-blue) 22%, var(--wp--preset--color--studio-navy));
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.is-style-s6-planes::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 46%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		167deg,
		transparent 36%,
		var(--s6-plane-dark) 36% 52%,
		transparent 52% 58%,
		var(--wp--preset--color--signal-blue) 58% 74%,
		transparent 74% 78%,
		var(--wp--preset--color--ink-slate) 78% 81%,
		transparent 81%
	);
}

/* Tablets and phones: move the bands to a strip along the bottom so they never sit behind text. */
@media (max-width: 1100px) {
	.is-style-s6-planes {
		padding-bottom: 160px !important;
	}

	.is-style-s6-planes::before {
		top: auto;
		left: 0;
		width: 100%;
		height: 130px;
	}
}

/* Phones: slimmer plane strip, roomier step lists, less side padding in the CTA panel. */
@media (max-width: 600px) {
	.is-style-s6-planes {
		padding-bottom: 112px !important;
	}

	.is-style-s6-planes::before {
		height: 88px;
	}

	.is-style-s6-planes.alignwide {
		padding-right: var(--wp--preset--spacing--40) !important;
		padding-left: var(--wp--preset--spacing--40) !important;
	}

	.is-layout-grid:not(:has(> .is-style-s6-card)) {
		row-gap: var(--wp--preset--spacing--50);
	}
}

/* White outline buttons on dark sections: faint white tint on hover (Paper would hide the white text). */
.wp-block-button.is-style-outline .wp-block-button__link.has-white-color:hover {
	background-color: rgb(255 255 255 / 0.1) !important;
}

/* Cards: push the last line (e.g. "Read more") to the bottom so rows line up. */
.is-style-s6-card > :last-child {
	margin-top: auto;
}

/* 404: Paper section runs straight into the navy footer. */
.error404 .wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Footer links: white, turning Sky on hover. */
.s6-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.s6-footer a:where(:not(.wp-element-button)):hover,
.s6-footer a:where(:not(.wp-element-button)):focus {
	color: var(--wp--preset--color--sky);
	text-decoration: underline;
}

/* Photos: card radius, full width of their column. */
.s6-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/*
 * Frosted sticky header. The frost sits on a pseudo-element: backdrop-filter on the
 * header itself would trap the fixed-position mobile menu inside the header box.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

@media (min-width: 601px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

.s6-header.has-background {
	position: relative;
	isolation: isolate;
	background-color: transparent !important;
}

.s6-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / 0.94);
}

/* Frost where blur is supported (solid white fallback above). */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.s6-header::before {
		background: rgb(255 255 255 / 0.72);
		-webkit-backdrop-filter: blur(16px) saturate(180%);
		backdrop-filter: blur(16px) saturate(180%);
	}
}

/* Hero photo. */
.s6-hero-media .wp-block-image {
	margin: 0;
}

.s6-hero-media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
}

/*
 * Contrast: Signal Blue on Paper is 4.49:1, just under AA (4.5:1) for small text.
 * On Paper sections, blue text and links use Studio Navy instead (about 15:1). Buttons keep their colours.
 */
.has-paper-background-color .has-signal-blue-color.has-text-color,
.has-paper-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--studio-navy) !important;
}

/* FAQs (core Details block, class s6-faq): bordered rows, Navy question, +/− marker in Mono. */
.s6-faq {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1rem 1.25rem;
}

.wp-block-details.s6-faq + .wp-block-details.s6-faq {
	margin-block-start: 0.75rem;
}

.s6-faq summary {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--studio-navy);
	cursor: pointer;
	list-style: none;
}

.s6-faq summary::-webkit-details-marker {
	display: none;
}

.s6-faq summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	color: var(--wp--preset--color--signal-blue);
}

.s6-faq[open] summary::after {
	content: "−";
}

.s6-faq[open] summary {
	margin-bottom: 0.5rem;
}

.s6-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--signal-blue);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Channel pages: "back to the hub" link and KPI list markers. */
.s6-back a {
	text-decoration: none;
	font-weight: 500;
}

.s6-kpis li::marker {
	color: var(--wp--preset--color--signal-blue);
}

/* Motion: only for visitors who haven't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	/* Scroll reveal (classes added by assets/js/motion.js). */
	.s6-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.15s ease;
	}

	.s6-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Cards lift slightly on hover (mouse devices only). */
	.is-style-s6-card {
		transition: border-color 0.15s ease, transform 0.2s ease;
	}

	@media (hover: hover) {
		.is-style-s6-card:hover,
		.s6-reveal.is-visible.is-style-s6-card:hover {
			transform: translateY(-4px);
			transition-delay: 0s !important;
		}
	}

	/* Planes rise in once on load, echoing the S. */
	.is-style-s6-planes::before {
		animation: s6-planes-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
}

@keyframes s6-planes-in {
	from {
		opacity: 0;
		transform: translateX(6%);
	}
}