/*
Theme Name: Switchpoint
Theme URI: https://switchpointwm.com
Author: Rock Kitchen Harris
Author URI: https://rkh.co.uk
Description: Block theme for Switchpoint Wealth Management.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: switchpoint
*/

/* Sticky header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Sections sit flush: no block gap between header, main, footer,
 * or between full-width sections and whatever sits next to them.
 */
.wp-site-blocks > * + *,
main > * + *,
main > .alignfull,
main > .alignfull + *,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

main > .wp-block-post-content:first-child > .alignfull:first-child {
	margin-block-start: 0;
}

/*
 * Core navigation only collapses below 600px; the header row (logo, menu,
 * CTAs) runs out of room well before that, so collapse it up to 1080px.
 */
@media (max-width: 1079px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Hamburger sits at the far right, after the CTAs */
	.site-header .wp-block-navigation {
		order: 2;
	}

	/* CTAs become icon buttons; the label stays for screen readers */
	.header-cta .wp-element-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		font-size: 0;
	}

	.header-cta .wp-element-button::before {
		content: "";
		width: 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask: var(--sp-cta-icon) center / contain no-repeat;
		mask: var(--sp-cta-icon) center / contain no-repeat;
	}

	.header-cta__portal {
		--sp-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
	}

	.header-cta__contact {
		--sp-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 21l1.9-5.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
	}
}

/* Mobile menu: 44px touch targets for open/close */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
}

.site-header .wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) !important;
}

/* White logo top-left of the open menu, level with the close button */
.site-header .is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
}

.menu-overlay-logo {
	display: none;
}

.site-header .is-menu-open .menu-overlay-logo {
	display: flex;
	align-items: center;
	width: fit-content;
	min-height: 44px;
	transition: opacity var(--sp-fast) ease;
}

.site-header .is-menu-open .menu-overlay-logo:hover {
	opacity: 0.75;
}

.menu-overlay-logo img {
	display: block;
	width: 200px;
	height: auto;
}

.site-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0 !important;
	right: 0 !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--50) !important;
}

/* Large, well-spaced links in the open overlay */
.site-header .is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
}

.site-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgb(255 255 255 / 0.15);
}

.site-header .is-menu-open .wp-block-navigation-item:first-child {
	border-top: 1px solid rgb(255 255 255 / 0.15);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1.25rem 0 !important;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.2;
}

.site-header .is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

.header-cta {
	flex-wrap: nowrap;
}

.header-cta .wp-element-button {
	white-space: nowrap;
}

/*
 * Logo: the wordmark (no "Wealth Management" strapline) at full size at the
 * top of the page, shrinking as the sticky header scrolls (where scroll
 * timelines are supported).
 */
.site-header .site-logo {
	--sp-logo-w: 230px;
	--sp-logo-w-scrolled: 180px;
	flex-shrink: 0;
	width: var(--sp-logo-w);
}

.site-header .site-logo img {
	width: 100% !important;
}

@media (max-width: 599px) {
	.site-header .site-logo {
		--sp-logo-w: 170px;
		--sp-logo-w-scrolled: 150px;
	}
}

/* Visible focus */
:where(a, button, input, .wp-element-button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ==========================================================================
   Micro interactions
   ========================================================================== */

:root {
	--sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sp-fast: 180ms;
	--sp-slow: 700ms;
}

/* Text links: underline fades rather than snapping */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition:
		color var(--sp-fast) ease,
		text-decoration-color var(--sp-fast) ease,
		opacity var(--sp-fast) ease;
}

:where(p, li) a:hover {
	text-decoration-color: transparent;
}

/* Buttons */
.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--sp-fast) ease,
		border-color var(--sp-fast) ease,
		color var(--sp-fast) ease,
		transform var(--sp-fast) var(--sp-ease);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(1px);
}

/* Outline buttons fill on hover */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--purple);
	border-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
}

/* Light buttons on dark/image backgrounds */
.wp-block-cover .wp-block-button__link.has-white-background-color:hover {
	background-color: transparent !important;
	color: var(--wp--preset--color--white) !important;
}

/* Navigation: underline draws in from the left */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms var(--sp-ease);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Logo */
.site-logo a {
	display: block;
	transition: opacity var(--sp-fast) ease;
}

.site-logo a:hover {
	opacity: 0.75;
}

/* Header gains a soft shadow once the page scrolls (progressive enhancement) */
@supports (animation-timeline: scroll()) {
	.site-header > .wp-block-group {
		animation: sp-header-shadow linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}

	@keyframes sp-header-shadow {
		to {
			box-shadow: 0 6px 24px rgb(63 42 86 / 0.08);
		}
	}

	.site-header .site-logo {
		animation: sp-logo-shrink linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}

	@keyframes sp-logo-shrink {
		to {
			width: var(--sp-logo-w-scrolled);
		}
	}
}

/* Images in content: slow, subtle zoom on hover */
main .wp-block-columns .wp-block-image {
	overflow: hidden;
}

main .wp-block-columns .wp-block-image img,
main .wp-block-columns .wp-block-cover__image-background {
	transition: transform 900ms var(--sp-ease);
}

main .wp-block-columns .wp-block-image:hover img,
main .wp-block-columns .wp-block-cover:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

/* Photo cards: overlay deepens (the delta symbol stays still) */
.wp-block-columns .wp-block-cover {
	overflow: hidden;
}

.wp-block-columns .wp-block-cover__background {
	transition: opacity var(--sp-slow) var(--sp-ease);
}

.wp-block-columns .wp-block-cover:hover .wp-block-cover__background {
	opacity: 0.45;
}

/* Value cards lift slightly */
.wp-block-column.has-white-background-color {
	transition:
		transform 400ms var(--sp-ease),
		box-shadow 400ms var(--sp-ease);
}

.wp-block-column.has-white-background-color:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgb(63 42 86 / 0.08);
}

/* Gravity Forms fields */
.gform_wrapper input:not([type="submit"], [type="checkbox"], [type="radio"]),
.gform_wrapper textarea,
.gform_wrapper select {
	transition:
		border-color var(--sp-fast) ease,
		box-shadow var(--sp-fast) ease;
}

.gform_wrapper input:not([type="submit"], [type="checkbox"], [type="radio"]):hover,
.gform_wrapper textarea:hover {
	border-color: var(--wp--preset--color--muted);
}

/* Content gently fades up as it enters the viewport (front end only) */
@supports (animation-timeline: view()) {
	body:not(.editor-styles-wrapper) main :where(.wp-block-columns:not(.alignfull), .wp-block-heading, .wp-block-buttons) {
		animation: sp-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}

	@keyframes sp-reveal {
		from {
			opacity: 0;
			transform: translateY(24px);
		}
	}
}

/* ==========================================================================
   About
   ========================================================================== */

.eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.has-white-color .eyebrow,
.wp-block-cover .eyebrow {
	color: inherit;
	opacity: 0.8;
}

/* Image sits on an offset platinum block */
.wp-block-image.offset-frame {
	box-shadow: calc(-1 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40) 0 var(--wp--preset--color--platinum);
}

/* Pillars: numbered with a short rule */
.pillar > .wp-block-image {
	margin-bottom: var(--wp--preset--spacing--40);
}

.pillar > .eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.pillar > .eyebrow::after {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: currentColor;
}

.pillar > .eyebrow + .wp-block-heading {
	margin-top: 0.5rem;
}

/* ==========================================================================
   Team
   ========================================================================== */

.team-card {
	height: 100%;
}

.team-card > * {
	margin: 0;
}

.team-card .wp-block-post-featured-image {
	overflow: hidden;
	width: 100%;
}

.team-card .wp-block-post-featured-image img {
	transition: transform 900ms var(--sp-ease);
}

.team-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.team-card .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms var(--sp-ease);
}

.team-card:hover .wp-block-post-title a {
	background-size: 100% 1px;
}

/* No portrait yet: platinum panel with the symbol */
.team-portrait--empty {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--platinum);
}

.has-platinum-background-color .team-portrait--empty {
	background: var(--wp--preset--color--white);
}

.team-portrait--empty a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.team-portrait--empty img {
	width: 48px !important;
	height: auto !important;
	opacity: 0.3;
	transition: opacity 400ms var(--sp-ease), transform 900ms var(--sp-ease) !important;
}

.team-card:hover .team-portrait--empty img {
	opacity: 0.5;
}

/* Profile page */
.profile__header .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--20);
}

.profile__header .eyebrow {
	margin-top: 0;
}

.team-social .wp-social-link {
	transition: transform var(--sp-fast) var(--sp-ease), opacity var(--sp-fast) ease;
}

.team-social .wp-social-link:hover {
	transform: translateY(-2px);
	opacity: 0.75;
}

.profile__contact + .team-social {
	padding-top: var(--wp--preset--spacing--20);
}

html {
	scroll-padding-top: 6rem;
}

/* ==========================================================================
   News
   ========================================================================== */

.news-intro {
	max-width: 40rem;
}

/* Cards */
.news-card {
	height: 100%;
}

.news-card > * {
	margin: 0;
}

.news-card .wp-block-post-featured-image {
	overflow: hidden;
	width: 100%;
}

.news-card .wp-block-post-featured-image img {
	transition: transform 900ms var(--sp-ease);
}

.news-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.news-card .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms var(--sp-ease);
}

.news-card:hover .wp-block-post-title a {
	background-size: 100% 1px;
}

.news-card .wp-block-post-excerpt__excerpt {
	margin: 0.25em 0 0;
}

.wp-block-post-terms a {
	text-decoration: none;
	font-weight: 400;
	color: var(--wp--preset--color--purple);
}

.wp-block-post-terms a:hover {
	text-decoration: underline;
}

.article__meta > * + *::before,
.news-card .wp-block-group > * + *::before {
	content: "·";
	margin-right: 0.6em;
}

.article__meta > *,
.news-card .wp-block-group > * {
	display: inline-flex;
	margin: 0;
}

/* Back link */
.back-link a {
	text-decoration: none;
}

.back-link a::before {
	content: "←";
	display: inline-block;
	margin-right: 0.5em;
	transition: transform var(--sp-fast) var(--sp-ease);
}

.back-link a:hover::before {
	transform: translateX(-4px);
}

/* Article body */
.article__body {
	font-size: var(--wp--preset--font-size--medium);
}

.article__body > p:first-child {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.article__body > * + * {
	margin-block-start: 1.4em;
}

.article__body h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-start: 2em;
}

.article__body h3 {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin-block-start: 1.8em;
}

.article__body :where(h2, h3) + * {
	margin-block-start: 0.75em;
}

.article__body .wp-block-image,
.article__body .wp-block-pullquote {
	margin-block: 2.5em;
}

.article__body .wp-block-image figcaption {
	margin-top: 0.75em;
	text-align: left;
}

.article__body ul,
.article__body ol {
	padding-left: 1.2em;
}

.article__body li + li {
	margin-top: 0.5em;
}

.article__body li::marker {
	color: var(--wp--preset--color--muted);
}

.article__body .wp-block-pullquote {
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
}

.article__body .wp-block-pullquote blockquote p {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.3;
}

.article__body .wp-block-pullquote cite {
	display: block;
	margin-top: 1em;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

.article__body .article-note {
	margin-block-start: 3em;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Previous / next */
.article__footer {
	gap: var(--wp--preset--spacing--40);
}

.post-nav {
	flex: 1 1 0;
	font-size: var(--wp--preset--font-size--small);
}

.post-nav a {
	display: block;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.post-nav .post-navigation-link__label {
	display: block;
	margin-bottom: 0.35em;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.post-nav a:hover .post-navigation-link__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.post-nav--prev .post-navigation-link__label::before,
.post-nav--next .post-navigation-link__label::after {
	display: inline-block;
	transition: transform var(--sp-fast) var(--sp-ease);
}

.post-nav--prev .post-navigation-link__label::before {
	content: "←";
	margin-right: 0.6em;
}

.post-nav--next .post-navigation-link__label::after {
	content: "→";
	margin-left: 0.6em;
}

.post-nav--prev a:hover .post-navigation-link__label::before {
	transform: translateX(-4px);
}

.post-nav--next a:hover .post-navigation-link__label::after {
	transform: translateX(4px);
}

@media (max-width: 599px) {
	.article__footer {
		flex-direction: column;
	}

	.post-nav--next {
		text-align: left;
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 1ms !important;
	}

	.wp-block-columns .wp-block-image:hover img,
	.wp-block-columns .wp-block-cover:hover .wp-block-cover__image-background,
	.wp-block-column.has-white-background-color:hover,
	.news-card:hover .wp-block-post-featured-image img,
	.team-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

/* ==========================================================================
   Brand delta: large background triangle on Group blocks (Styles > Delta)
   ========================================================================== */

.wp-block-group.is-style-delta {
	--sp-delta-color: color-mix(in srgb, var(--wp--preset--color--platinum) 60%, transparent);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.wp-block-group.is-style-delta::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* Inset top/bottom so the delta sits inside the section; width follows height */
	top: 8%;
	bottom: 8%;
	right: 4%;
	aspect-ratio: 87 / 100;
	max-width: 60%;
	background-color: var(--sp-delta-color);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	pointer-events: none;
}

.wp-block-group.is-style-delta.has-platinum-background-color {
	--sp-delta-color: rgb(255 255 255 / 0.55);
}

.wp-block-group.is-style-delta:is(.has-purple-background-color, .has-purple-dark-background-color) {
	--sp-delta-color: rgb(255 255 255 / 0.03);
}

@media (max-width: 781px) {
	.wp-block-group.is-style-delta::before {
		max-width: 90%;
		opacity: 0.6;
	}
}