/*
 * Extendable HexDisplay visual overrides.
 * Site-wide wrappers, template parts, and editor-adjacent tweaks.
 */

body {
	background:
		radial-gradient(circle at 0% 0%, rgba(44, 162, 255, 0.16), transparent 24rem),
		radial-gradient(circle at 100% 0%, rgba(119, 225, 255, 0.16), transparent 18rem),
		linear-gradient(180deg, #f7fbff 0%, #edf5ff 42%, #e4effc 100%);
	color: #10233f;
}

.wp-site-blocks {
	min-height: 100vh;
}

header.wp-block-template-part,
footer.wp-block-template-part {
	margin-top: 0;
	margin-bottom: 0;
}

header.wp-block-template-part:has(.hex-site-header) {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: transparent;
}

.admin-bar header.wp-block-template-part:has(.hex-site-header) {
	top: 32px;
}

.hex-site-header {
	position: relative;
	top: auto;
	z-index: 1;
	padding: 1rem 0 0;
	background:
		linear-gradient(180deg, rgba(245, 250, 255, 0.92), rgba(245, 250, 255, 0));
	backdrop-filter: blur(12px);
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part:has(.hex-site-header) {
		top: 46px;
	}
}

.hex-site-header__bar,
.hex-site-footer__inner,
.hex-page__hero-inner,
.hex-page__content {
	width: min(1200px, calc(100% - 2rem));
	margin-inline: auto;
}

.hex-site-header__bar,
.hex-site-footer__inner,
.hex-page__hero-inner {
	max-width: 1200px !important;
}

.hex-site-footer {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

.hex-site-header__bar {
	display: grid;
	grid-template-columns: auto minmax(20rem, 1fr) auto;
	width: min(1200px, calc(100% - 2rem));
	max-width: 1200px !important;
	margin-inline: auto;
	align-items: center;
	gap: clamp(1rem, 2.25vw, 2.25rem);
	padding: 0.72rem 0.9rem;
	border: 1px solid rgba(176, 211, 244, 0.78);
	border-radius: 1.7rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.78) 20%),
		linear-gradient(180deg, rgba(236, 244, 255, 0.98), rgba(220, 232, 247, 0.98) 54%, rgba(210, 225, 243, 0.98) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.94),
		inset 0 0 0 2px rgba(29, 151, 255, 0.12),
		0 18px 40px rgba(72, 112, 159, 0.16);
}

.hex-site-header__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	flex-shrink: 0;
}

.hex-site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem;
	min-width: 0;
}

.hex-site-header__identity {
	display: grid;
	gap: 0.22rem;
	min-width: max-content;
}

.hex-site-header__tag {
	margin: 0;
	color: #2688ea;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(45, 169, 255, 0.18);
	white-space: nowrap;
}

.hex-site-header .wp-block-site-title,
.hex-site-footer .wp-block-site-title {
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #10233f;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9),
		0 8px 18px rgba(150, 183, 220, 0.2);
}

.hex-site-header .wp-block-site-title {
	font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem);
}

.hex-site-header .wp-block-navigation {
	justify-self: center;
	gap: 0.2rem;
	min-width: 0;
}

.hex-site-header .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 0.1rem;
}

.hex-site-header .wp-block-navigation__responsive-container,
.hex-site-header .wp-block-navigation__responsive-container.is-menu-open,
.hex-site-header .wp-block-navigation__responsive-dialog {
	z-index: 100000 !important;
}

.hex-site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1rem;
}

.hex-site-header .wp-block-navigation-item__content {
	padding: 0.58rem clamp(0.48rem, 0.85vw, 0.75rem);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: clamp(0.78rem, 0.72rem + 0.18vw, 0.9rem);
	font-weight: 600;
	color: rgba(16, 35, 63, 0.84);
	transition:
		background-color 180ms ease,
		color 180ms ease,
		transform 180ms ease;
	text-decoration: none !important;
}

.hex-site-header .wp-block-navigation-item__content:hover,
.hex-site-header .wp-block-navigation-item__content:focus-visible {
	background: rgba(46, 167, 255, 0.12);
	color: #10233f;
	transform: translateY(-1px);
	text-decoration: none !important;
}

.hex-site-header .hex-primary-nav .wp-block-navigation-item__content[aria-current="page"] {
	background: rgba(23, 105, 210, 0.1);
	box-shadow: inset 0 0 0 1px rgba(23, 105, 210, 0.3);
	color: #0c397a;
	font-weight: 750;
	text-decoration: none !important;
}

.hex-site-header .hex-primary-nav .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid #1769d2;
	outline-offset: 3px;
	text-decoration: none !important;
}

.hex-site-header .wp-block-buttons {
	flex-shrink: 0;
	margin: 0;
}

.hex-site-header .wp-block-button__link {
	white-space: nowrap;
	padding: 0.78rem 1rem;
	border: 1px solid rgba(228, 243, 255, 0.52);
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 18%),
		linear-gradient(180deg, #1b69dd 0%, #0b327c 52%, #071b48 100%);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: 0.84rem;
	font-weight: 700;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.72),
		inset 0 0 0 2px rgba(28, 155, 255, 0.55),
		0 16px 28px rgba(0, 0, 0, 0.42),
		0 0 22px rgba(45, 169, 255, 0.22);
}

.hex-site-footer {
	padding: 4rem 0 2rem;
}

.hex-site-footer__inner {
	display: grid;
	gap: 1.5rem;
	width: min(1200px, calc(100% - 2rem));
	max-width: 1200px !important;
	margin-inline: auto;
	padding: 2rem;
	border: 1px solid rgba(176, 211, 244, 0.72);
	border-radius: 2rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.8) 20%),
		linear-gradient(180deg, rgba(236, 244, 255, 0.98), rgba(220, 232, 247, 0.98));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.92),
		inset 0 0 0 1px rgba(66, 153, 255, 0.08),
		0 20px 44px rgba(72, 112, 159, 0.14);
}

.hex-site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}

.hex-site-footer__brand {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 0.65rem 1.25rem;
	align-items: center;
}

.hex-site-footer__brand .wp-block-site-logo {
	grid-row: 1 / span 2;
	align-self: start;
	margin: 0;
}

.hex-site-footer__brand .wp-block-site-title {
	align-self: end;
	margin: 0;
}

.hex-site-footer__brand-copy {
	max-width: 28rem;
	margin: 0;
	color: rgba(16, 35, 63, 0.74);
	line-height: 1.6;
}

.hex-site-footer__meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.hex-site-footer__meta-card {
	display: grid;
	grid-template-columns: 8px minmax(9rem, 0.55fr) minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding: 1rem 0;
	border-top: 1px solid rgba(126, 177, 226, 0.34);
}

.hex-site-footer__meta-card:last-child {
	border-bottom: 1px solid rgba(126, 177, 226, 0.34);
}

.hex-site-footer__meta-card::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2688ea;
	box-shadow: 0 0 0 5px rgba(38, 136, 234, 0.1);
	content: "";
}

.hex-site-footer__meta-card strong {
	display: block;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: 0.95rem;
	color: #10233f;
}

.hex-site-footer__meta-card span {
	display: block;
	margin: 0;
	color: rgba(16, 35, 63, 0.68);
	font-size: 0.92rem;
	line-height: 1.5;
}

.hex-site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(123, 224, 255, 0.3);
}

.hex-site-footer .wp-block-navigation a {
	color: rgba(16, 35, 63, 0.82);
}

.hex-site-footer .wp-block-social-links {
	gap: 0.5rem;
}

.hex-site-footer .wp-social-link {
	border-radius: 999px;
	background: rgba(46, 167, 255, 0.12);
	color: #1458b0 !important;
}

.hex-page,
.hex-page-with-title {
	padding-bottom: 4rem;
}

.hex-page__hero {
	padding: 3rem 0 1.5rem;
}

.hex-page__hero-inner {
	padding: 2rem;
	border: 1px solid rgba(176, 211, 244, 0.74);
	border-radius: 2rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.8) 20%),
		linear-gradient(180deg, rgba(236, 244, 255, 0.98), rgba(220, 232, 247, 0.98) 52%, rgba(210, 225, 243, 0.98));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.92),
		inset 0 0 0 2px rgba(29, 151, 255, 0.12),
		0 20px 44px rgba(72, 112, 159, 0.14);
}

.hex-page__eyebrow {
	margin: 0 0 0.8rem;
	color: #2688ea;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hex-page__hero-inner .wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: clamp(2rem, 1.5rem + 2vw, 3.3rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.95;
	color: #10233f;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.92),
		0 8px 18px rgba(150, 183, 220, 0.18);
}

.hex-page__content {
	padding: 1rem 0 0;
}

.hex-page__content > .entry-content,
.hex-page__content > .wp-block-post-content {
	width: 100%;
	max-width: none !important;
	padding: 2rem;
	border: 1px solid rgba(176, 211, 244, 0.62);
	border-radius: 1.75rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.78)),
		rgba(231, 241, 252, 0.92);
	box-shadow: 0 18px 40px rgba(72, 112, 159, 0.12);
}

.hex-page__content .wp-block-post-content > .alignfull,
.hex-page__content .wp-block-post-content > [data-align="full"] {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}

.hex-page__content .wp-block-post-content > .alignwide,
.hex-page__content .wp-block-post-content > [data-align="wide"] {
	max-width: min(1200px, 100%) !important;
}

.hex-page__content .wp-block-post-content .wp-block-group,
.hex-page__content .wp-block-post-content .wp-block-columns {
	max-width: 100%;
}

.hex-page__content .wp-block-post-content > *:first-child {
	margin-top: 0;
}

.hex-page__content .wp-block-post-content > *:last-child {
	margin-bottom: 0;
}

.hex-page__content .ecwid {
	max-width: 1200px;
	margin-inline: auto;
}

.hex-page__content .ecwid + *,
.hex-page__content * + .ecwid {
	margin-top: 1.5rem;
}

.hex-designer-page,
.hex-designer-page > .wp-block-post-content {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
}

.hex-designer-page {
	padding: 1rem clamp(0.5rem, 1.5vw, 1.25rem) 1.5rem;
}

.hex-designer-page .hexdisplay-wall-planner-host {
	width: min(1440px, calc(100vw - 2rem));
	max-width: 1440px;
	margin: 0 auto;
}

@media (max-width: 1000px) {
	.hex-site-header__tag {
		display: none;
	}

	.hex-site-header__bar {
		gap: 1rem;
	}

	.hex-site-header .wp-block-navigation-item__content {
		padding-inline: 0.42rem;
	}

	.hex-site-footer__top,
	.hex-site-footer__meta {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1120px) {
	.hex-site-footer__top {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 782px) {
	.hex-site-header__bar {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	.hex-site-footer__bottom {
		flex-direction: column;
		align-items: stretch;
	}

	.hex-site-footer__top {
		grid-template-columns: 1fr;
	}

	.hex-site-footer__meta-card {
		grid-template-columns: 8px 1fr;
		gap: 0.35rem 1rem;
	}

	.hex-site-footer__meta-card::before {
		grid-row: 1 / span 2;
	}

	.hex-site-header__actions {
		width: auto;
		justify-content: flex-end;
	}

	.hex-site-header .wp-block-navigation__responsive-container-open {
		z-index: 1001;
	}

	.hex-site-header .wp-block-navigation {
		width: auto;
	}

	.hex-site-header .wp-block-buttons {
		margin-left: auto;
	}

	.hex-site-header .wp-block-navigation__responsive-container.is-menu-open {
		inset: 0.5rem !important;
		border-radius: 1.25rem;
		background:
			linear-gradient(180deg, rgba(241, 247, 255, 0.98), rgba(223, 235, 249, 0.98)) !important;
		box-shadow: 0 20px 42px rgba(72, 112, 159, 0.18);
	}

	.hex-site-header .wp-block-navigation__responsive-container-content {
		padding-top: 1.25rem;
	}

	.hex-site-header .wp-block-navigation__responsive-container-open,
	.hex-site-header .wp-block-navigation__responsive-container-close {
		padding: 0.55rem;
		border-radius: 999px;
		background: rgba(46, 167, 255, 0.12);
		color: #1458b0;
	}
}

@media (max-width: 640px) {
	.hex-site-header {
		padding-top: 0.65rem;
	}

	.hex-site-header__bar,
	.hex-site-footer__inner,
	.hex-page__hero-inner,
	.hex-page__content > .wp-block-post-content {
		padding: 1.25rem;
		border-radius: 1.35rem;
	}

	.hex-site-header__brand {
		gap: 0.7rem;
	}

	.hex-site-header .wp-block-site-logo img,
	.hex-site-header .custom-logo {
		max-width: 52px !important;
		height: auto !important;
	}

	.hex-site-header__tag {
		font-size: 0.64rem;
	}

	.hex-site-header .wp-block-site-title {
		font-size: 1rem;
	}

	.hex-site-header .wp-block-button__link {
		padding: 0.72rem 0.9rem;
		font-size: 0.84rem;
	}

	.hex-page__content {
		padding-top: 0.75rem;
	}
}

@media (max-width: 480px) {
	.hex-site-header__tag {
		display: none;
	}

	.hex-site-header .wp-block-buttons {
		display: none;
	}

	.hex-site-header__actions {
		justify-content: flex-end;
	}
}