/* ============================================================
   VacationPlaces — Global Styles
   ============================================================ */

/* ---------- CSS custom properties (mirroring theme.json) ---------- */
:root {
	--vp-navy:   #2F4156;
	--vp-mist:   #8DB4C4;
	--vp-coral:  #E8734A;
	--vp-beige:  #F5EFEB;
	--vp-white:  #FFFFFF;

	--vp-nav-height: 64px;
	--vp-section-gap-desktop: 100px;
	--vp-section-gap-mobile: 64px;
}

/* ---------- Base resets ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--vp-beige);
	color: var(--vp-navy);
	-webkit-font-smoothing: antialiased;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* =============================================================
   HEADER — sticky + Navy background + Ocean Mist links
   All rules use direct hex values so they work regardless of
   whether WordPress successfully generates the preset color CSS.
   ============================================================= */

/* 1. Sticky context on the template-part wrapper
      WordPress wraps each part in .wp-block-template-part on
      the frontend. Making the wrapper sticky means no ancestor
      overflow property can break it. */
.wp-block-template-part:has(.vp-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* 2. Fallback: sticky on the header element itself for browsers
      without :has() support (Firefox < 121, older Safari) */
@supports not (selector(:has(*))) {
	.vp-header {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

/* 3. Prevent wp-site-blocks overflow from swallowing sticky */
.wp-site-blocks {
	overflow-x: clip; /* clip, not hidden — keeps sticky working */
}

/* 4. Kill any residual block-gap margin above the hero so it sits flush
      against the sticky navbar. The theme.json blockGap is set to 0 but
      WordPress may still inject margin-block-start via is-layout-flow. */
.vp-hero {
	margin-top:         0 !important;
	margin-block-start: 0 !important;
}

/* 4. Navy background on every element inside the header bar.
      Using both background and background-color covers shorthand
      vs longhand specificity races. Direct hex beats preset vars. */
.vp-header,
.vp-header.wp-block-group,
.vp-header .wp-block-navigation,
.vp-header .wp-block-navigation ul,
.vp-header .wp-block-navigation__container {
	background:       #2F4156 !important;
	background-color: #2F4156 !important;
}

/* Height + decoration — also enforce single-row flex layout here rather than
   relying on WordPress block-editor generated is-layout-flex / is-nowrap classes,
   which can fail to apply on inner page templates. */
.vp-header {
	display:         flex !important;
	flex-direction:  row !important;
	flex-wrap:       nowrap !important;
	align-items:     center !important;
	justify-content: space-between !important;
	column-gap:      1.5rem;
	height:          var(--vp-nav-height);
	border-bottom:   1px solid rgba(141, 180, 196, 0.2);
	box-shadow:      0 2px 12px rgba(47, 65, 86, 0.15);
}

/* Logo and social stay fixed-size at the ends */
.vp-header__logo,
.vp-header__social {
	flex: 0 0 auto !important;
}

/* Nav is the middle flex item — fills remaining space and centres its links */
.vp-header__nav {
	flex:            1 1 auto !important;
	display:         flex !important;
	align-items:     center;
	justify-content: center;
	gap:             2rem;
	min-width:       0;
	list-style:      none;
	margin:          0;
	padding:         0;
}

/* Nav link styles — Ocean Mist at rest, Beige on hover */
.vp-header__nav a {
	color:           #8DB4C4 !important;
	text-decoration: none !important;
	background:      transparent !important;
	font-family:     'Inter', sans-serif;
	font-size:       16px;
	font-weight:     500;
	letter-spacing:  0.04em;
	white-space:     nowrap;
	transition:      color 0.2s ease;
	padding:         0.25rem 0;
}

.vp-header__nav a:hover {
	color: #F5EFEB !important;
}

/* 5. Logo wordmark — white / beige text, no underline */
.vp-header__logo p,
.vp-header__logo a {
	color:           #F5EFEB !important;
	text-decoration: none !important;
}

.vp-header__logo .wp-block-site-logo img {
	width:      36px;
	height:     36px;
	object-fit: contain;
}

/* Mobile nav — links stack below logo on small screens */
@media (max-width: 768px) {
	.vp-header {
		flex-wrap:      wrap !important;
		height:         auto !important;
		min-height:     var(--vp-nav-height);
		padding-top:    0.75rem;
		padding-bottom: 0.5rem;
	}

	.vp-header__nav {
		flex-basis: 100% !important;
		order:      3;
		gap:        1.5rem;
		padding:    0 0 0.5rem;
	}

	.vp-header__social {
		order: 2;
	}
}

/* 8. Social icons — Ocean Mist fill, white on hover */
.vp-header__social .wp-block-social-link a {
	background:       transparent !important;
	background-color: transparent !important;
}

.vp-header__social .wp-block-social-link svg {
	fill:       #8DB4C4;
	transition: fill 0.2s ease;
}

.vp-header__social .wp-block-social-link:hover svg {
	fill: #F5EFEB;
}

/* ---------- Footer ----------
   Use direct hex on every possible selector so the Navy background is
   never defeated by the body's Beige or by missing preset CSS. The
   template-part wrapper (:has) covers any gap outside the .vp-footer box. */
.vp-footer,
.vp-footer.wp-block-group,
footer.vp-footer {
	background:       #2F4156 !important;
	background-color: #2F4156 !important;
}

.wp-block-template-part:has(.vp-footer),
footer:has(.vp-footer) {
	background:       #2F4156;
	background-color: #2F4156;
}

.vp-footer__nav,
.vp-footer__nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.vp-footer__nav li {
	padding: 3px 0;
}

.vp-footer__nav a,
.vp-footer__nav .wp-block-navigation-item__content {
	color: var(--vp-mist) !important;
	font-size: 13px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.vp-footer__nav a:hover,
.vp-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--vp-beige) !important;
}

.vp-footer .wp-block-social-link a {
	background: transparent !important;
	border: 1.5px solid var(--vp-mist);
	border-radius: 4px;
	padding: 4px;
	transition: border-color 0.2s;
}

.vp-footer .wp-block-social-link:hover a {
	border-color: var(--vp-beige);
}

.vp-footer .wp-block-social-link svg {
	fill: var(--vp-mist);
}

.vp-footer .wp-block-social-link:hover svg {
	fill: var(--vp-beige);
}

.vp-footer__divider {
	border-color: rgba(141, 180, 196, 0.3) !important;
	background: none !important;
}

/* ---------- Scroll to top button ---------- */
.vp-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 200;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #2F4156;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, background 0.2s ease;
}

.vp-scroll-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.vp-scroll-top:hover {
	background: #E8734A;
}

/* ---------- Utility: section overline tag ---------- */
.vp-overline {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vp-mist);
	margin-bottom: 0.5rem;
}

/* ---------- Utility: "Coming Soon" badge ---------- */
.vp-badge-soon {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vp-coral);
	border: 1.5px solid var(--vp-coral);
	border-radius: 999px;
	padding: 2px 10px;
	background: rgba(232, 115, 74, 0.08);
}

/* ---------- Newsletter form — global (all pages) ---------- */
.vp-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.vp-newsletter-form__row {
	display: flex;
	flex-wrap: nowrap; /* keep input + button on one line at all tablet/desktop sizes */
	gap: 0.5rem;
	max-width: 480px; /* cap so input never stretches past 360px */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.vp-newsletter-form__input {
	flex: 1;
	max-width: 360px;
	padding: 0.6rem 0.875rem;
	border: 1.5px solid var(--vp-mist);
	border-radius: 6px;
	background: var(--vp-white);
	color: var(--vp-navy);
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.vp-newsletter-form__input::placeholder {
	color: var(--vp-mist);
}

.vp-newsletter-form__input:focus {
	outline: none;
	border-color: var(--vp-navy);
	box-shadow: 0 0 0 3px rgba(232, 115, 74, 0.2);
}

.vp-newsletter-form__btn {
	padding: 0.6rem 1.25rem;
	background-color: var(--vp-coral);
	color: var(--vp-beige);
	border: none;
	border-radius: 6px;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.vp-newsletter-form__btn:hover {
	background-color: #c95e38;
}

.vp-newsletter-form__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.vp-newsletter-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 12px !important;
	color: var(--vp-mist);
	cursor: pointer;
	line-height: 1.35;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.vp-newsletter-form__consent * {
	font-size: 12px !important;
	line-height: 1.35;
}

.vp-newsletter-form__consent input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--vp-coral);
}

/* Footer newsletter — darker variant on Navy background */
.vp-footer .vp-newsletter-form__input {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--vp-mist);
	color: var(--vp-beige);
	font-size: 13px;
	padding: 0.5rem 0.75rem;
}

.vp-footer .vp-newsletter-form__input::placeholder {
	color: rgba(141, 180, 196, 0.7);
}

.vp-footer .vp-newsletter-form__btn {
	font-size: 12px;
	padding: 0.5rem 0.875rem;
}

.vp-footer .vp-newsletter-form__consent {
	color: rgba(141, 180, 196, 0.7);
	font-size: 12px !important;
	line-height: 1.3;
}

/* ---------- Atlas TDC Badge ---------- */
.vp-atlas-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 2px solid var(--vp-navy);
	background: var(--vp-beige);
	text-align: center;
	padding: 1.5rem;
	margin: 0 auto;
}

.vp-atlas-badge__title {
	display: block;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 22px;
	color: var(--vp-navy);
	line-height: 1.1;
}

.vp-atlas-badge__sub {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 500;
	color: var(--vp-navy);
	opacity: 0.7;
	margin-top: 6px;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

/* ---------- About page cards ---------- */
.vp-about-card {
	height: 100%;
	transition: box-shadow 0.2s ease;
}

.vp-about-card:hover {
	box-shadow: 0 4px 16px rgba(47, 65, 86, 0.10);
}

/* ---------- CTA section ---------- */
.vp-cta {
	text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	:root {
		--vp-nav-height: 56px;
	}

	/* Stack footer into a single column; zero the default block gap so
	   spacing is controlled explicitly below for even separation. */
	.vp-footer__columns {
		flex-direction: column !important;
		gap: 0 !important;
	}

	.vp-footer .wp-block-column {
		flex-basis: 100% !important;
		text-align: left;        /* every section left-aligned on mobile */
		padding-right: 0 !important; /* cancel the logo column's desktop 40px */
	}

	/* Consistent spacing + a subtle divider between each stacked section
	   (skips the first/logo column). */
	.vp-footer__columns > .wp-block-column + .wp-block-column {
		margin-top: 1.75rem;
		padding-top: 1.75rem;
		border-top: 1px solid rgba(141, 180, 196, 0.2);
	}

	/* Left-align the FOLLOW US social icons on mobile. */
	.vp-footer .wp-block-social-links {
		justify-content: flex-start;
	}

	.vp-scroll-top {
		right: 16px;
		bottom: 16px;
	}

}

/* Only stack the newsletter row on very narrow phones */
@media (max-width: 480px) {
	.vp-newsletter-form__row {
		flex-direction: column;
	}

	.vp-newsletter-form__btn {
		width: 100%;
	}
}