/* Design refresh (Admin → Settings → Design). Colour and readability fixes are scoped to body.pja-refresh,
   motion to body.pja-anim, so each can be switched off without touching page content.
   Contrast on the cream background (#f4f3ee): heading gold #9a7a1c 3.7:1 (large text), small gold text
   #806314 5.1:1, paragraphs #2d3748 10.8:1, navy buttons with white text 17:1. */

/* ---- 1. headings and gold text ---------------------------------------------------------------- */
body.pja-refresh .entry-hero .entry-title,
body.pja-refresh .entry-content h1:not(.has-text-color),
body.pja-refresh .entry-content h2:not(.has-text-color),
body.pja-refresh .entry-content h3:not(.has-text-color),
body.pja-refresh .entry-content h4:not(.has-text-color) {
	color: #9a7a1c;
}
/* small gold text: FAQ questions, links in text, info box titles */
body.pja-refresh .entry-content .rank-math-question,
body.pja-refresh .entry-content .rank-math-list-item > h3,
body.pja-refresh .entry-content .rank-math-list-item > h4,
body.pja-refresh .entry-content p a:not(.kb-button):not(.button),
body.pja-refresh .entry-content li a {
	color: #806314;
}
body.pja-refresh .entry-content p a:not(.kb-button):not(.button):hover,
body.pja-refresh .entry-content li a:hover {
	color: #0f1c26;
}
/* text on dark (navy) rows keeps the original bright gold, which reads well there */
body.pja-refresh .entry-content .has-kb-palette-1-background-color :is(h1, h2, h3, h4):not(.has-text-color),
body.pja-refresh .entry-content .has-kb-palette-1-background-color .wp-block-kadence-advancedheading:not(.has-text-color) {
	color: #d4af37;
}

/* ---- 2. buttons: rounded champagne-gold pills with navy text (6:1), navy with gold text on hover ---- */
body.pja-refresh .pja-form .hs-button,
body.pja-refresh .pja-form input[type=submit],
body.pja-refresh .kb-forms-submit,
body.pja-refresh .entry-content .kb-button.kb-btn-global-fill,
body.pja-refresh .entry-content .kt-blocks-info-box-learnmore {
	background: linear-gradient(135deg, #ecd48f 0%, #c99d3e 100%) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #0f1c26 !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	padding: 12px 26px !important;
	box-shadow: 0 8px 20px rgba(201, 157, 62, .32);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
body.pja-refresh .pja-form .hs-button:hover,
body.pja-refresh .pja-form .hs-button:focus,
body.pja-refresh .pja-form input[type=submit]:hover,
body.pja-refresh .kb-forms-submit:hover,
body.pja-refresh .kb-forms-submit:focus,
body.pja-refresh .entry-content a.kb-button.kb-btn-global-fill:hover,
body.pja-refresh .entry-content a.kb-button.kb-btn-global-fill:focus,
body.pja-refresh .entry-content .kt-blocks-info-box-learnmore:hover,
body.pja-refresh .entry-content .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-learnmore {
	background: #0f1c26 !important;
	color: #ecd48f !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(15, 28, 38, .28);
}
/* small labels styled as buttons (e.g. "Payment Options", "Location") are not links: no hover */
body.pja-refresh .entry-content span.kb-button.kb-btn-global-fill {
	padding: 6px 16px !important;
	font-size: 12px;
	box-shadow: none;
}
body.pja-refresh .entry-content span.kb-button.kb-btn-global-fill:hover {
	background: linear-gradient(135deg, #ecd48f 0%, #c99d3e 100%) !important;
	color: #0f1c26 !important;
	transform: none;
	box-shadow: none;
}
/* rounded form fields */
body.pja-refresh .pja-form input[type=text],
body.pja-refresh .pja-form input[type=email],
body.pja-refresh .pja-form input[type=tel],
body.pja-refresh .pja-form select,
body.pja-refresh .pja-form textarea,
body.pja-refresh .kb-form .kb-field {
	border-radius: 10px !important;
}

/* ---- rounded boxes: stat boxes, cards, info boxes, coloured columns --------------------------- */
body.pja-refresh .entry-content .wp-block-kadence-column > .kt-inside-inner-col {
	border-radius: 16px;
}
body.pja-refresh .entry-content .kt-blocks-info-box-link-wrap {
	border-radius: 16px !important;
}
body.pja-refresh .entry-content .kb-row-layout-wrap.kt-row-has-bg:not(.alignfull) {
	border-radius: 20px;
	overflow: hidden;
}
/* villa / apartment cards: the photo follows the card's rounded top corners */
body.pja-refresh .entry-content .kt-inside-inner-col:has(> figure):has(> .kb-table-container) {
	overflow: hidden;
}
body.pja-refresh .entry-content .kt-inside-inner-col:has(> .kb-table-container) .kb-table-container,
body.pja-refresh .entry-content .wp-block-kadence-image img,
body.pja-refresh .entry-content figure.wp-block-image img {
	border-radius: 14px;
}
body.pja-refresh .entry-content .kt-inside-inner-col:has(> figure):has(> .kb-table-container) > figure img {
	border-radius: 0;
}

/* ---- amenity / feature icons: gold badge circles ---------------------------------------------- */
body.pja-refresh .entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media:has(.kadence-info-box-icon-container) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 0 !important;
	background: linear-gradient(135deg, #ecd48f 0%, #c99d3e 100%) !important;
	box-shadow: 0 8px 18px rgba(201, 157, 62, .35), inset 0 0 0 3px rgba(255, 255, 255, .35);
	transition: transform .25s ease, box-shadow .25s ease;
}
body.pja-refresh .entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media:has(.kadence-info-box-icon-container) .kt-info-svg-icon,
body.pja-refresh .entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media:has(.kadence-info-box-icon-container) .kt-info-svg-icon svg {
	color: #0f1c26 !important;
	font-size: 28px !important;
	width: 28px;
	height: 28px;
}
body.pja-refresh .entry-content .wp-block-kadence-infobox:hover .kt-blocks-info-box-media:has(.kadence-info-box-icon-container) {
	transform: translateY(-3px) rotate(-4deg);
	box-shadow: 0 12px 24px rgba(201, 157, 62, .45), inset 0 0 0 3px rgba(255, 255, 255, .35);
}

/* phones: icon boxes with the icon on the left get the icon above the text, so the text has the full width */
@media (max-width: 767px) {
	body.pja-refresh .entry-content .kt-blocks-info-box-media-align-left:has(.kadence-info-box-icon-container) {
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left;
	}
	body.pja-refresh .entry-content .kt-blocks-info-box-media-align-left:has(.kadence-info-box-icon-container) .kt-blocks-info-box-media-container {
		margin: 0 0 14px !important;
	}
}

/* ---- mobile menu toggle: black ------------------------------------------------------------------ */
body.pja-refresh #mobile-toggle.menu-toggle-open,
body.pja-refresh #mobile-toggle.menu-toggle-open:focus,
body.pja-refresh #mobile-toggle.menu-toggle-open:hover {
	background: #000;
	color: #fff;
	border-radius: 10px;
	padding: .55em .65em;
	box-shadow: 0 0 0 1px rgba(236, 212, 143, .55);
}

/* ---- home: Palm Central image shown large above its heading ------------------------------------ */
body.pja-refresh .kt-info-box370_857b03-31 .kadence-info-box-image-inner-intrisic-container {
	max-width: 100% !important;
}
body.pja-refresh .kt-info-box370_857b03-31 .kt-blocks-info-box-media-container,
body.pja-refresh .kt-info-box370_857b03-31 .kt-blocks-info-box-media {
	display: block !important;
	width: 100%;
	margin: 0 0 18px !important;
}
body.pja-refresh .kt-info-box370_857b03-31 .kt-blocks-info-box-media .kadence-info-box-image-intrisic img {
	border-radius: 14px;
}

/* ---- 3. brochure / call-to-action boxes: plain gold lettering instead of the gold-purple gradient --- */
body.pja-refresh .wp-block-kadence-advancedheading .kb-adv-text-inner {
	background-image: none !important;
	-webkit-text-fill-color: currentColor !important;
	color: #9a7a1c;
}
body.pja-refresh .kb-row-layout-wrap:has(.pja-form) .wp-block-kadence-advancedheading:not(.has-text-color) {
	color: #9a7a1c;
}

/* ---- 4. paragraph text: larger and darker ------------------------------------------------------ */
body.pja-refresh .entry-content p.wp-block-paragraph:not(.has-text-color):not([class*="font-size"]),
body.pja-refresh .entry-content ul.wp-block-list > li,
body.pja-refresh .entry-content .rank-math-answer p {
	font-size: 16px;
	line-height: 1.7;
	color: #2d3748;
}
/* compact text stays compact: facts tables, cards and info boxes */
body.pja-refresh .entry-content .kb-table p.wp-block-paragraph,
body.pja-refresh .entry-content .kt-blocks-info-box-text {
	font-size: inherit;
	line-height: inherit;
}

/* ---- 5. page title strip: warm cream instead of the theme's blue-grey ----------------------------- */
body.pja-refresh .entry-hero.page-hero-section .entry-hero-container-inner {
	background: #ece7da;
	border-bottom: 1px solid #e0d6bd;
}

/* pages with a transparent header (white logo and menu over the title strip) get a navy strip so they show */
body.pja-refresh.transparent-header .entry-hero.page-hero-section .entry-hero-container-inner {
	background: #1a202c;
	border-bottom: 0;
}
body.pja-refresh.transparent-header .entry-hero .entry-title {
	color: #d4af37;
}

/* ---- breadcrumbs above the page title (child pages such as the villa pages) --------------------- */
.pja-breadcrumbs {
	font-size: 13px;
	letter-spacing: .02em;
	color: #5c6470;
	margin-bottom: .75rem;
	text-align: center;
}
.pja-breadcrumbs a {
	color: #806314;
	text-decoration: none;
}
.pja-breadcrumbs a:hover {
	text-decoration: underline;
}
.pja-breadcrumbs .sep {
	margin: 0 .45em;
	opacity: .6;
}

/* ---- header that gets slimmer and stays on top after scrolling (desktop) ------------------------ */
@media (min-width: 1025px) {
	body.pja-refresh.pja-scrolled #main-header .site-main-header-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: #1a202c;
		box-shadow: 0 2px 14px rgba(0, 0, 0, .25);
	}
	body.pja-refresh.pja-scrolled #main-header .site-main-header-inner-wrap {
		min-height: 60px;
	}
	body.pja-refresh.pja-scrolled #main-header .site-branding a.brand img {
		max-width: 50px;
	}
	body.pja-refresh #main-header .site-main-header-inner-wrap,
	body.pja-refresh #main-header .site-branding a.brand img {
		transition: min-height .25s ease, max-width .25s ease;
	}
	body.pja-refresh.pja-scrolled.pja-anim #main-header .site-main-header-wrap {
		animation: pjaSlideDown .25s ease-out;
	}
}
body.pja-refresh [id] {
	scroll-margin-top: 80px;
}

/* ---- 7–11. motion (only with Settings → Design → animations on, and never with reduced motion) ---- */
@media (prefers-reduced-motion: no-preference) {
	html.pja-smooth {
		scroll-behavior: smooth;
	}
	/* sections fade up the first time they scroll into view (the class is only added by the script) */
	body.pja-anim .pja-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .5s ease-out, transform .5s ease-out;
	}
	body.pja-anim .pja-reveal.pja-in {
		opacity: 1;
		transform: none;
	}
	/* villa / apartment cards lift slightly and the photo zooms a little on hover */
	body.pja-anim .kt-inside-inner-col:has(> figure):has(> .kb-table-container) {
		transition: transform .25s ease, box-shadow .25s ease;
	}
	body.pja-anim .kt-inside-inner-col:has(> figure):has(> .kb-table-container):hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 28px rgba(15, 28, 38, .12);
	}
	body.pja-anim .kt-inside-inner-col:has(> figure):has(> .kb-table-container) .kb-is-ratio-image {
		overflow: hidden;
	}
	body.pja-anim .kt-inside-inner-col:has(> figure):has(> .kb-table-container) img {
		transition: transform .6s ease;
	}
	body.pja-anim .kt-inside-inner-col:has(> figure):has(> .kb-table-container):hover img {
		transform: scale(1.04);
	}
	/* mega menu and dropdowns fade in */
	body.pja-anim .header-navigation li:hover > ul.sub-menu {
		animation: pjaFadeIn .18s ease-out;
	}
}
@keyframes pjaFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
@keyframes pjaSlideDown {
	from { transform: translateY(-100%); }
	to { transform: none; }
}