/*
 * Eclipse360 global styles.
 * Colours, fonts and sizes live in theme.json. This file covers pieces
 * theme.json can't express: the fixed header, label style, link underline,
 * button dot, focus states.
 */

:root {
	--e360-ink: var(--wp--preset--color--ink);
	--e360-ink-2: var(--wp--preset--color--ink-2);
	--e360-paper: var(--wp--preset--color--paper);
	--e360-paper-2: var(--wp--preset--color--paper-2);
	--e360-rust: var(--wp--preset--color--rust);
	--e360-rust-hi: var(--wp--preset--color--rust-hi);
	--e360-mute-d: var(--wp--preset--color--mute-dark);
	--e360-mute-l: var(--wp--preset--color--mute-light);
	--e360-line-d: rgba(245, 242, 236, .14);
	--e360-line-l: rgba(17, 16, 16, .14);
	--e360-serif: var(--wp--preset--font-family--serif);
	--e360-sans: var(--wp--preset--font-family--sans);
	--e360-gutter: var(--wp--custom--gutter);
	--e360-header: var(--wp--custom--header-height);
	--e360-ease: var(--wp--custom--ease);
	--e360-max: 1320px;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

:where(h1, h2, h3) { text-wrap: balance; }
:where(h1, h2, h3) em { font-style: italic; font-weight: 400; color: var(--e360-rust); }

:focus-visible { outline: 2px solid var(--e360-rust-hi); outline-offset: 3px; border-radius: 2px; }

/* Smooth-scroll library hooks */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- Shared label (eyebrow) ---------- */
.e360-eyebrow {
	font-family: var(--e360-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--e360-rust-hi);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.e360-eyebrow::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}
.has-paper-background-color .e360-eyebrow,
.e360-on-paper .e360-eyebrow { color: var(--e360-rust); }

/* ---------- Text link with underline that draws away on hover ---------- */
.e360-textlink {
	font: 500 14px/1 var(--e360-sans);
	letter-spacing: .04em;
	text-decoration: none;
	color: inherit;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding-bottom: 6px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: background-size .4s;
}
.e360-textlink:hover { background-size: 0 1px; background-position: 100% 100%; }
.e360-arrow { display: inline-block; transition: transform .3s; }
.e360-textlink:hover .e360-arrow,
.e360-btn:hover .e360-arrow { transform: translateX(4px); }

/* ---------- Buttons: core button + custom-block button share one look ---------- */
.wp-block-button__link,
.e360-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition: background-color .3s, color .3s, border-color .3s;
}
.e360-btn {
	font: 500 14px/1 var(--e360-sans);
	letter-spacing: .04em;
	text-decoration: none;
	color: inherit;
	padding: 16px 22px;
	border-radius: 999px;
	border: 1px solid currentColor;
}
.wp-block-button__link::before,
.e360-btn::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--e360-rust);
	transition: transform .3s;
}
.wp-block-button__link:hover::before,
.e360-btn:hover::before { transform: scale(1.6); }
.e360-btn:hover { background: var(--e360-paper); color: var(--e360-ink); border-color: var(--e360-paper); }

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding-top: env(safe-area-inset-top, 0px);
	padding-left: var(--e360-gutter);
	padding-right: var(--e360-gutter);
	border-bottom: 1px solid transparent;
	transition: transform .5s var(--e360-ease), background-color .4s, border-color .4s;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.site-header.is-solid {
	background: rgba(17, 16, 16, .86);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-color: var(--e360-line-d);
}
.site-header.is-hidden { transform: translateY(-110%); }
.site-header__bar {
	height: var(--e360-header);
	max-width: var(--e360-max);
	margin-inline: auto;
	gap: 24px;
}
.site-header .wp-block-site-logo img,
.site-header .site-header__logo img { height: 22px; width: auto; }
.site-header .wp-block-navigation { font-size: 14px; gap: 28px; }
.site-header .wp-block-navigation-item__content { opacity: .78; transition: opacity .25s; }
.site-header .wp-block-navigation-item__content:hover { opacity: 1; }
.site-header .wp-block-buttons .wp-block-button__link { padding: 12px 18px; font-size: 13px; }
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: calc(var(--e360-header) + 24px);
	padding-left: var(--e360-gutter);
	padding-right: var(--e360-gutter);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--e360-serif);
	font-size: 40px;
	line-height: 1.1;
	opacity: 1;
}
@media (max-width: 781px) {
	.site-header .site-header__cta { display: none; }
}

/* ---------- Main ---------- */
.site-main { min-height: 60vh; margin-block-start: 0; }
/* Footer sits flush under the last section. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > * + .site-main,
.wp-site-blocks > * + * > .site-main { margin-block-start: 0; }
.site-main--padded { padding-top: calc(var(--e360-header) + 80px); padding-bottom: 120px; }

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid var(--e360-line-d);
	padding-top: 80px;
	padding-bottom: 40px;
}
.site-footer .wp-block-columns { gap: 40px; }
.site-footer__tagline { font-family: var(--e360-serif); font-style: italic; font-size: 22px; margin-top: 14px; }
.site-footer__meta { color: var(--e360-mute-d); font-size: 13px; }
.site-footer h3 {
	font-family: var(--e360-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--e360-rust-hi);
	margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--e360-mute-d); }
.site-footer ul a { text-decoration: none; }
.site-footer ul a:hover { color: var(--e360-paper); }
.site-footer__legal {
	border-top: 1px solid var(--e360-line-d);
	margin-top: 56px;
	padding-top: 24px;
	font-size: 13px;
	color: var(--e360-mute-d);
}
.site-footer .site-footer__logo img { height: 22px; width: auto; }

/* ---------- Single project ---------- */
.e360-project-single { padding-top: calc(var(--e360-header) + 64px); padding-bottom: 120px; }
.e360-project-single__head > * + * { margin-top: 0; }
.e360-project-single__back { margin: 0 0 40px; }
.e360-project-single__title { margin: 0; }
.e360-project-single__loc { margin: 14px 0 0; font-family: var(--e360-serif); font-style: italic; font-size: 24px; color: var(--e360-mute-d); }
.e360-project-single__loc:empty { display: none; }
.e360-project-single__tags { margin-top: 18px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--e360-rust-hi); }
.e360-project-single__image { margin-top: 56px; margin-bottom: 0; }
.e360-project-single__image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.e360-project-single__body { margin-top: 64px; font-size: 18px; color: var(--e360-mute-d); }
.e360-project-single__body h2, .e360-project-single__body h3 { color: var(--e360-paper); font-size: clamp(28px, 2.6vw, 40px); margin-top: 48px; }
.e360-project-single__body li { margin-bottom: 8px; }
.e360-project-single__body strong { color: var(--e360-paper); font-weight: 500; }
.e360-project-single__foot { margin-top: 24px; }

/* ---------- Shared section shell for inner-page blocks ---------- */
.e360-section {
	--e360-edge: max(var(--e360-gutter), calc((100% - var(--e360-max)) / 2));
	position: relative;
	box-sizing: border-box;
	padding: clamp(80px, 10vw, 130px) var(--e360-edge);
}
.e360-section *, .e360-section *::before, .e360-section *::after { box-sizing: border-box; }
.e360-section.alignfull { margin-top: 0; margin-bottom: 0; }
.e360-section.is-ink { background: var(--e360-ink); color: var(--e360-paper); }
.e360-section.is-ink-2 { background: var(--e360-ink-2); color: var(--e360-paper); }
.e360-section.is-paper { background: var(--e360-paper); color: var(--e360-ink); }
.e360-section.is-paper .e360-eyebrow { color: var(--e360-rust); }
.e360-section.is-paper .e360-btn:hover { background: var(--e360-ink); color: var(--e360-paper); border-color: var(--e360-ink); }
.e360-section .e360-h2 {
	margin: 18px 0 0;
	font-family: var(--e360-serif);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.02;
	letter-spacing: -.01em;
}
.e360-section .e360-lead { margin: 0; max-width: 60ch; font-size: 18px; }
.e360-section.is-ink .e360-lead, .e360-section.is-ink-2 .e360-lead { color: var(--e360-mute-d); }
.e360-section.is-paper .e360-lead { color: var(--e360-mute-l); }
.e360-section .e360-muted { color: var(--e360-mute-d); }
.e360-section.is-paper .e360-muted { color: var(--e360-mute-l); }
html.motion .e360-reveal { opacity: 0; }

/* ---------- Gravity Forms finishing touches (colours come from functions.php) ---------- */
.gform_wrapper.gform-theme {
	--gf-ctrl-font-family: var(--e360-sans);
	--gf-font-family-base: var(--e360-sans);
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-label-color-primary: var(--e360-paper);
	--gf-ctrl-label-color-secondary: var(--e360-mute-d);
	--gf-color-in-ctrl-light: #2a2725;
	--gf-color-out-ctrl-light: #4a4542;
	font-family: var(--e360-sans);
}
.gform_wrapper.gform-theme .gform_title { font-family: var(--e360-serif); font-weight: 500; font-size: 30px; color: var(--e360-paper); }
.gform_wrapper.gform-theme .gfield_label,
.gform_wrapper.gform-theme legend.gfield_label { font-family: var(--e360-serif); font-size: 24px; font-weight: 500; line-height: 1.2; }
.gform_wrapper.gform-theme .gfield_required { color: var(--e360-rust-hi); }
.gform_wrapper.gform-theme .gchoice label { color: var(--e360-paper); }
.gform_wrapper.gform-theme .gform_page_footer .button,
.gform_wrapper.gform-theme .gform_footer .button { letter-spacing: .04em; }
.gform_wrapper.gform-theme .gf_progressbar_title,
.gform_wrapper.gform-theme .gf_step_label { color: var(--e360-mute-d); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.gform_confirmation_message { font-family: var(--e360-serif); font-size: 26px; line-height: 1.3; color: var(--e360-paper); }