/**
 * The Spoke brand styles.
 * @link https://triconliving.com/apartment/the-spoke/
 */

body {
	--wp--preset--color--foreground: var(--wp--preset--color--contrast, #1f1d1d);
	--wp--preset--font-size--tiny: var(--wp--preset--font-size--xx-small, 14px);
	--wp--preset--font-size--eyebrow: var(--wp--preset--font-size--x-small, 14px);
}

/* Reduce outer padding for mobile clamp(2rem, 3vw + 1.5rem, 3rem);*/
@media (max-width: 781px) {
	body {
		--wp--preset--spacing--70: 20px;
	}
}

/* Headings */
h1,
h2,
.has-huge-font-size,
.has-x-large-font-size {
	line-height: 1;
	letter-spacing: 0.02em;
}

/* "css": ".is-style-subheading { text-transform: uppercase; font-weight: 500 !important; }", */
.is-style-subheading {
	text-transform: uppercase;
	font-weight: 500 !important;
}

/* Details Accordion */
details.wp-block-details summary {
	text-transform: uppercase;
}
details.is-style-plus summary {
    display: flex;
    align-items: center;
    gap: 0.75em;
}
details.is-style-plus summary::before {
    content: "";
    flex-shrink: 0;
    width: 0.75em;
    height: 0.75em;
    background:
        linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat,
        linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat;
    transition: transform 0.3s ease;
}
details.is-style-plus[open] summary::before {
    transform: rotate(45deg);
}

/**
 * Swiper Carousel
 */
figure.wp-block-gallery.swiper-wrapper {
	border-radius: 32px;
	--wp--style--unstable-gallery-gap: 12px;
}

.carousel-swiper--pattern .wp-block-group.swiper-wrapper .card-block:first-child {
    margin-left: var(--wp--preset--spacing--70) !important;
}

/* Gallery images */
figure.wp-block-gallery.swiper-wrapper .wp-block-image:first-child {
	margin-left: var(--wp--style--unstable-gallery-gap) !important;
}
figure.wp-block-gallery.swiper-wrapper .wp-block-image a {
	border-radius: 32px;
	overflow: hidden;
}

/* Fill content for cards with hover */
.wp-block-cover.hide-content-until-hover.card-block:not(.is-position-bottom-left) {
	align-items: stretch;
}

/* Custom width cards - default 362px */
.carousel-swiper--pattern .swiper-wrapper .card-block {
	--swiper-margin-size: 20px;
	min-height: 300px;
}
.carousel-swiper--pattern .swiper-wrapper .card-block.slide-square {
	--swiper-slide-width: 300px;
}
.carousel-swiper--pattern .swiper-wrapper .card-block.slide-narrow {
	--swiper-slide-width: 200px;
}
.carousel-swiper--pattern .swiper-wrapper .card-block.slide-wide {
	--swiper-slide-width: 400px;
}
@media (min-width: 1200px) {
	.carousel-swiper--pattern .swiper-wrapper .card-block {
		--swiper-slide-width: 500px;
		--swiper-margin-size: 32px;
		min-height: 600px;
	}
	.carousel-swiper--pattern .swiper-wrapper .card-block.slide-square {
		--swiper-slide-width: 600px;
	}
	.carousel-swiper--pattern .swiper-wrapper .card-block.slide-narrow {
		--swiper-slide-width: 400px;
	}
	.carousel-swiper--pattern .swiper-wrapper .card-block.slide-wide {
		--swiper-slide-width: 900px;
	}
}

/* Swiper custom wide arrows */
.carousel-swiper--pattern.has-bottom-controls .swiper-button-next,
.carousel-swiper--pattern.has-bottom-controls .swiper-button-prev {
	width: 80px;
	height: 40px;
	border-radius: 0;
	box-shadow: none !important;
	background: none !important;
	right: var(--swiper-navigation-size, 20px) !important;
	bottom: 20px !important;
}
.carousel-swiper--pattern.has-bottom-controls .swiper-button-prev {
	left: var(--swiper-navigation-size, 20px) !important;
}
.carousel-swiper--pattern.has-bottom-controls .swiper-button-next::after,
.carousel-swiper--pattern.has-bottom-controls .swiper-button-prev::after {
	width: 60px;
	height: 20px;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16' fill='none'%3E%3Cpath stroke='%231f1d1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M0 8h58m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E");
}

/* Hover card with plus sign for gallery and cover blocks */
figure.wp-block-gallery.swiper-wrapper .wp-block-image a::after,
.wp-block-cover.hide-content-until-hover::after {
	content: "\FF0B";
	font-size: 50px;
	line-height: 1;
	position: absolute;
	z-index: 2;
	top: 1rem;
	right: 1rem;
	color: rgba(255, 255, 255, 0.9);
	font-family: sans-serif;
	font-weight: 200;
	transition: all 0.4s ease;
}
.wp-block-cover.hide-content-until-hover:hover::after {
	color: currentColor;
	transform: rotate(45deg);
}
.wp-block-cover.hide-content-until-hover > .wp-block-cover__image-background {
	transition: transform 0.4s ease;
}
.wp-block-cover.hide-content-until-hover:hover > .wp-block-cover__image-background {
	transform: scale(1.05);
}

/**
 * Interactive Tower
 * tangerine: rgb(213, 97, 42);
 * lavender: rgb(155, 162, 198);
 * burgundy: rgb(55, 17, 32);
 */

/* TODO: add this to tricon-vue-blocks to fix loading spinner */
.unitAvailabilityBlock {
	position: relative;
}

.ApartmentBlock.the-spoke .loadMoreButton {
	--wp--preset--font-size--medium: 16px;
}

.ApartmentBlock.the-spoke {
	--tab-color: var(--wp--preset--color--gray-lighter);
	--tab-active-color: var(--wp--preset--color--gray-lighter);
	--color-background: var(--wp--preset--color--gray-lightest);
	--wp--style--global--wide-size: 1600px;
	font-size: 16px;
	line-height: 1.4;
}

.ApartmentBlock.the-spoke .interactiveTowerWrap {
	--compass-rotation: 25deg;
	--tower-selected: rgb(55, 17, 32);
	--color-accent-rgb: 55, 17, 32;
	--color-coming-soon-rgb: 155, 162, 198;
	--color-background: var(--wp--preset--color--gray-lightest);
	--plate-unit-fill: #ddd;
}
.ApartmentBlock.the-spoke .interactiveTowerWrap::before {
	border-radius: 32px;
}
.ApartmentBlock.the-spoke .UnitsListWrapper,
.ApartmentBlock.the-spoke .floorPlanGridWrap {
	position: relative;
}
.ApartmentBlock .UnitsListWrapper::before,
.ApartmentBlock .floorPlanGridWrap::before {
	background: var(--color-background);
	content: "";
	inset: -80px -24px -24px -24px;
	position: absolute;
	z-index: -1;
	border-radius: 32px;
}

/* Footer background color and hide social */
.site-footer-part {
	--wp--preset--color--black: var(--wp--preset--color--tertiary);
	--wp--preset--font-size--normal: 1.25rem;
	line-height: 1.5;
}
.site-footer-part .wp-block-social-links {
	display: none;
}

/**
 * LOADING ANIMATION — only uses opacity + transform
 */
.spoke-logo-loader .wp-block-cover {
	clip-path: inset(0 0 100% 0);
	animation: spoke-cover-wipe 1.4s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards;
}
.spoke-logo-loader .wp-block-outermost-icon-block {
	transform: translateY(calc(-50vh + var(--wp--preset--spacing--70) + 50%));
	animation: spoke-logo-drop 1.4s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards;
}
.spoke-logo-loader .icon-container svg {
	transform: translateX(-20%);
	animation: spoke-center-wordmark 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}
.spoke-logo-loader #spoke-the-sp,
.spoke-logo-loader #spoke-ke {
	opacity: 0;
	animation: spoke-text-reveal 1s ease-out 0.8s forwards;
}

/* Spin emblem on hover */
#spoke-emblem {
	transform-origin: 940px 86px;
	transition: transform 0.6s ease;
}
.spoke-logo-loader svg:hover #spoke-emblem {
	transform: rotate(360deg);
}

@keyframes spoke-cover-wipe {
	to { clip-path: inset(0 0 0 0); }
}
@keyframes spoke-logo-drop {
	to { transform: translateY(0); }
}
@keyframes spoke-center-wordmark {
	to { transform: translateX(0); }
}
@keyframes spoke-text-reveal {
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.spoke-logo-loader .wp-block-cover { animation: none; clip-path: none; }
	.spoke-logo-loader .wp-block-outermost-icon-block { animation: none; transform: none; }
	.spoke-logo-loader .icon-container svg { animation: none; transform: none; }
	.spoke-logo-loader #spoke-the-sp,
	.spoke-logo-loader #spoke-ke { animation: none; opacity: 1; }
}

/**
 * Sticky nav menu
 * Collapse entire bar when inactive — just show the icon
 */
.nav-menu-sticky {
	position: sticky;
	z-index: 999;
	top: calc(100vh - 60px);
	margin: 0 1rem !important;
	margin-top: -60px !important;
	background: transparent !important;
	transition: background-color 0.3s ease;
}
.nav-menu-sticky .menu-link-wrapper {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

/* Show menu when icon is hovered or focused */
.nav-menu-sticky:has(.menu-icon-wrapper:hover) .menu-link-wrapper,
.nav-menu-sticky:has(.menu-link-wrapper:hover) .menu-link-wrapper,
.nav-menu-sticky:focus-within .menu-link-wrapper {
	opacity: 1;
	visibility: visible;
}

.nav-menu-sticky:has(.menu-icon-wrapper:hover),
.nav-menu-sticky:has(.menu-link-wrapper:hover),
.nav-menu-sticky:focus-within {
	background-color: #f5f1daab !important;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* Spin icon when menu is NOT active */
.nav-menu-sticky .wp-block-outermost-icon-block a {
	animation: spin 15s linear infinite;
}

.nav-menu-sticky:has(.menu-icon-wrapper:hover) .wp-block-outermost-icon-block a,
.nav-menu-sticky:has(.menu-link-wrapper:hover) .wp-block-outermost-icon-block a,
.nav-menu-sticky:focus-within .wp-block-outermost-icon-block a {
	animation-play-state: paused;
}

/* Stack menu on mobile 20px, 10px */
@media (max-width: 781px) {
	.nav-menu-sticky {
		top: 20px;
		left: 20px;
		margin: 0 !important;
		display: none !important;

		flex-direction: column;
        align-items: flex-start;
		padding: 8px;
		width: fit-content;
	}

	.cslice-scrolled .nav-menu-sticky {
		display: flex !important;
		position: fixed;
	}

	.nav-menu-sticky .menu-link-wrapper {
		flex-direction: column;
        align-items: flex-start;
		gap: 1rem;
		padding: 20px 8px 4px 8px;
		min-width: 200px;
	}

	.nav-menu-sticky .menu-link-wrapper .wp-block-group.has-background {
		width: 100%;
		text-align: center;
	}
}


/**
 * Animate fixed position spinning register button
 * TODO: Remove after full page launch
 */
.register-link-sticky {
	position: sticky;
	bottom: var(--wp--preset--spacing--70, 20px);
	margin: 0 0 -150px 0;
	cursor: pointer;
}
.register-link-sticky a {
	animation: spin 15s linear infinite;
	width: 150px;
	height: 150px;
	z-index: 8000;
}
.register-link-sticky a:hover {
	animation-play-state: paused;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* LEGACY Buttons (keep commented out code for reference) */
/*
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:not(.has-primary-background-color):not(.has-white-background-color) {
	border: none;
	padding: 12px 18px
}
.wp-block-button .wp-block-button__link,
.gform_wrapper .gform_footer .gform_button {
	font-size: var(--wp--preset--font-size--medium) !important;
	border-radius: 50px;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 600 !important;
}
*/

/* LEGACY Gravity Forms */
.gform_wrapper .gform-field-label--type-sub {
	font-size: var(--gf-local-font-size) !important;
}
.gform_wrapper .gform_footer {
	justify-content: center;
}
.gform_wrapper .gform_footer .gform_button {
	background-color: var(--wp--preset--color--gray-lighter) !important;
	color: var(--wp--preset--color--tertiary) !important;
	padding: 1em 1.25em 0.875em 1.25em !important;
}
.gform_wrapper.gform-theme--orbital .gform_body .gfield .ginput_container input,
.gform_wrapper.gform-theme--orbital .gform_body .gfield .ginput_container select,
.gform_wrapper.gform-theme--orbital .gform_body .gfield .ginput_container textarea {
	border-color: var(--wp--preset--color--gray-lighter);
}

/**
 * HACK to fix dropdowns
 * Fixes select dropdown options on Windows Chrome
 */
.gform_wrapper.gform-theme--orbital .gform_body .gfield .ginput_container select option {
	background-color: #371120 !important;
	color: white !important;
}
.gform_wrapper.gform-theme--orbital .gform_body .gfield .ginput_container select option:checked {
	background-color: #d5612a !important;
}