/* =========================================================
   Riu Aruba Timeshare — legacy design recreation
   ========================================================= */

/* ---- Global font reset — original site set this on every element;
   without it, Twenty Twenty-Five's own theme.json typefaces leak
   through on headings/sidebar/search and look wrong. ---- */
* {
	font-family: "Segoe UI", Calibri, "Myriad Pro", Myriad, "Trebuchet MS", Helvetica, Arial, sans-serif !important;
}

/* ---- Body / page background (cream texture) ---- */
body {
	background-color: #f5ece0 !important;
	background-image: url('../images/body_bg.jpg') !important;
	background-repeat: repeat-x !important;
	background-position: top center !important;
}

/* ---- Page-wide wrapper: beach photo banner at the top, fading
   into the body's cream texture below (matches original's #page div) ---- */
.rat-page-bg {
	background-image: url('../images/main_bg.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	max-width: none;
	width: 100%;
}

/* ---- Header ---- */
.rat-header {
	padding: 0;
	padding-bottom: 32px;
	max-width: none;
	--wp--style--block-gap: 0;
}

/* Kill WP's auto block-gap spacing above the slideshow and nav
   (was causing unwanted gaps), set deliberate spacing explicitly. */
.rat-header .rat-slideshow {
	margin-top: 0 !important;
	margin-bottom: 18px !important;
}

.rat-header .rat-nav {
	margin-top: 0 !important;
}

.rat-header-inner {
	max-width: 960px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto !important;
	padding: 0 10px 20px;
	align-items: flex-start;
}

.rat-logo {
	width: 400px;
	height: 52px;
}

.rat-logo-link {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url('../images/logo.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

/* "Blog" / "Contact Us" hanging wooden signs — real images, hover-swapped */
.rat-header-buttons {
	gap: 6px;
}

.rat-sign {
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.rat-sign-blog {
	width: 104px;
	height: 66px;
	background-image: url('../images/blog.png');
}

.rat-sign-blog:hover {
	background-image: url('../images/blog_hover.png');
}

.rat-sign-contact {
	width: 234px;
	height: 66px;
	background-image: url('../images/contact_us.png');
}

.rat-sign-contact:hover {
	background-image: url('../images/contact_us_hover.png');
}

/* ---- Top navigation bar (glossy, dark active state) ---- */
.rat-nav {
	background-color: #eeeeee;
	background-image: linear-gradient(180deg, #fdfdfd, #e2e2e2);
	max-width: 960px;
	width: 100%;
	height: 44px;
	box-sizing: border-box;
	margin: 0 auto;
	border-bottom: 1px solid #ccc;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: stretch;
}

/* WP's Navigation block injects extra wrapper layers between the
   <nav> and the actual <ul> of links — all of them need to stretch
   to the full height, or the tab row floats shorter than the bar. */
.rat-nav .wp-block-navigation__responsive-container,
.rat-nav .wp-block-navigation__responsive-container-content {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: stretch;
}

.rat-nav .wp-block-navigation__container {
	background: none;
	border-bottom: none;
	box-shadow: none;
	margin: 0;
	height: 100%;
	width: 100%;
	gap: 0 !important;
	display: flex;
	align-items: stretch;
}

.rat-nav .wp-block-navigation-item {
	border-right: 1px solid #ddd;
	position: relative;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: stretch;
}

.rat-nav .wp-block-navigation-item:last-child {
	border-right: none;
}

.rat-nav a {
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0;
	color: #4e4e4e !important;
	padding: 0 14px !important;
	margin: 0 !important;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
}

.rat-nav .wp-block-navigation-item:hover > a,
.rat-nav .current-menu-item > a {
	background-color: #000;
	color: #dedede !important;
}

a.wp-block-navigation-item__content {
	height: 44px;
	align-content: center;
}

/* Small downward-pointing arrow under the active tab */
.rat-nav .current-menu-item::after {
	content: "";
	position: absolute;
	bottom: -7px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid #000;
	z-index: 5;
}

/* Soft shadow cast below the nav, using the original shadow.png,
   sitting inside the 32px gap above the content container. */
.rat-nav {
	position: relative;
	margin-bottom: 32px;
}

.rat-nav::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -32px;
	height: 32px;
	background-image: url('../images/shadow.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 1;
}

/* ---- Page content (outer, #main equivalent) ---- */
.rat-page-wrap {
	max-width: 960px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
	background-color: #ffffff;
	background-image: linear-gradient(180deg, #e6e6e6 0%, #f5f5f5 20%, #ffffff 100%);
	background-repeat: no-repeat;
	background-size: 100% 400px;
	background-position: top;
	box-shadow:
		inset 100px 40px 50px -55px rgb(0 0 0 / 5%),
		inset -100px 40px 50px -55px rgb(0 0 0 / 5%);
	padding: 0;
}

/* ---- #main-inside equivalent ---- */
.rat-main-inside {
	position: relative;
	width: 100%;
	min-height: 380px;
	padding: 30px;
}

.rat-content-columns {
	gap: 40px;
}

.rat-main-col {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px;
}

.rat-main-col h1.wp-block-post-title {
	font-weight: bold;
	font-size: 250%;
	letter-spacing: normal;
	text-shadow: #999 1px 1px 3px;
	color: #1a1a1a;
	margin: 0.5em 0 1em 0;
	padding: 0 0 15px 0;
	border-bottom: 1px solid #999;
}

/* In-content subheadings (e.g. "Riu Palace Aruba Timeshare") — plain
   content h2s, distinct from the post-title h1 above. */
.rat-main-col h2 {
	font-weight: normal;
	font-size: 180%;
	letter-spacing: -0.04em;
	line-height: 110%;
	color: #1a1a1a;
	margin: 0.7em 0 0.2em;
}

.rat-main-col h3 {
	font-size: 130%;
	font-weight: bold;
	letter-spacing: -0.04em;
	margin: 0.7em 0 0.2em;
}

.rat-main-col p {
	line-height: 1.5;
	margin: 0.6em 0 0.3em;
}

.rat-main-col img.alignleft {
	float: left;
	margin-right: 8px;
	padding: 3px;
	margin-top: 4px;
	margin-bottom: 4px;
	border-radius: 4px;
	border: 1px solid #eee;
}

/* ---- Category / archive listing pages ---- */
.rat-archive-title {
	font-weight: bold;
	font-size: 200%;
	text-shadow: #999 1px 1px 3px;
	color: #1a1a1a;
	margin: 0.5em 0 1em 0;
	padding: 0 0 15px 0;
	border-bottom: 1px solid #999;
}

.rat-archive-query .wp-block-post-title {
	font-size: 150%;
	font-weight: bold;
	margin: 1em 0 0.2em;
}

.rat-archive-query .wp-block-post-title a {
	color: #4e4e4e;
	text-decoration: none;
}

.rat-archive-query .wp-block-post-title a:hover {
	color: #ed1e24;
}

.rat-archive-query .wp-block-post-excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: #444;
}

/* ---- Sidebar ---- */
.rat-sidebar-col {
	padding-left: 30px;
}

.rat-sidebar-block {
	margin-bottom: 30px;
}

.rat-sidebar-title {
	color: #0071bb;
	font-size: 1.15em;
	font-weight: bold;
	border-bottom: 1px solid #eee;
	padding-bottom: 6px;
	margin-bottom: 10px;
}

.rat-categories,
.rat-amenities {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rat-categories li,
.rat-amenities li {
	padding: 4px 0 4px 16px;
	position: relative;
	font-size: 14px;
	color: #6b6b6b;
	border-bottom: 1px dotted #eee;
}

.rat-categories li::before,
.rat-amenities li::before {
	content: "\203A";
	position: absolute;
	left: 0;
	color: #44a1fb;
	font-weight: bold;
}

.rat-search .wp-block-search__inside-wrapper {
	border: 1px solid #c8c8c8;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

.rat-search input[type="search"] {
	border: none;
	border-radius: 0;
	padding: 7px 14px;
	width: 100%;
	outline: none;
}

.rat-search .wp-block-search__button {
	background-color: #3873bd;
	background-image: linear-gradient(180deg, #4a85cf, #2c5c96);
	border-radius: 0 24px 24px 0;
	color: #fff;
	border: none;
	padding: 7px 18px;
	margin: 0;
}

.rat-search .wp-block-search__button:hover {
	background-color: #2c5c96;
}

/* ---- Footer ---- */
.rat-footer {
	max-width: 960px;
	margin: 0 auto;
	padding: 16px 0 30px;
	text-align: center;
}

.rat-footer-text {
	color: #999;
	font-size: 12px;
}

.rat-footer-text a {
	color: #777;
}

/* =========================================================
   Responsive behavior
   ========================================================= */

/* ---- Desktop: never let the fixed-width design get narrower
   than its original 960px column, matching the original site's
   own min-width:960px rule. Horizontal scroll below this is
   intentional/expected, same as the original. ---- */
@media (min-width: 1024px) {
	header,
	.rat-page-bg,
	.rat-header-inner,
	.rat-nav,
	.rat-page-wrap {
		min-width: 960px;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Flatten WP's mobile-modal wrapper chain on desktop so the
	   actual <ul> of links behaves as a direct flex child of <nav>,
	   instead of being sized by four nested layers of modal-dialog
	   chrome (each with their own auto-height/padding). */
	.rat-nav .wp-block-navigation__responsive-container,
	.rat-nav .wp-block-navigation__responsive-close,
	.rat-nav .wp-block-navigation__responsive-dialog,
	.rat-nav .wp-block-navigation__responsive-container-content {
		display: contents;
	}

	.rat-nav .wp-block-navigation__responsive-container-close {
		display: none;
	}
}

/* ---- Mobile / narrow tablet: fluid layout, shrunk header
   assets, and WordPress's built-in hamburger + flyout nav
   (enabled via overlayMenu:"mobile" on the Navigation block). ---- */
@media (max-width: 1023px) {
	.rat-header-inner {
		flex-wrap: wrap;
		padding: 10px;
		row-gap: 10px;
	}

	.rat-logo {
		width: 220px;
		height: 29px;
	}

	.rat-header-buttons {
		gap: 4px;
	}

	.rat-sign-blog {
		width: 70px;
		height: 44px;
	}

	.rat-sign-contact {
		width: 150px;
		height: 44px;
	}

	.rat-slideshow {
		max-width: 92%;
		width: 92%;
		height: auto;
		aspect-ratio: 824 / 200;
	}

	.rat-page-wrap,
	.rat-page-bg {
		min-width: 0;
	}

	.rat-content-columns {
		flex-wrap: wrap;
	}

	.rat-main-col,
	.rat-sidebar-col {
		flex-basis: 100% !important;
	}

	.rat-sidebar-col {
		border-top: 1px solid #eee;
		padding-top: 20px;
		margin-top: 20px;
	}

	/* Hide the desktop active-tab arrow indicator — it doesn't
	   make sense in a vertical flyout menu. */
	.rat-nav .current-menu-item::after {
		display: none;
	}

	/* Hamburger toggle button */
	.rat-nav .wp-block-navigation__responsive-container-open {
		color: #4e4e4e;
		padding: 10px 14px;
	}

	/* Flyout panel */
	.rat-nav .wp-block-navigation__responsive-container.is-menu-open {
		background-color: #1a1a1a;
	}

	.rat-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		border-right: none;
		border-bottom: 1px solid #333;
	}

	.rat-nav .wp-block-navigation__responsive-container.is-menu-open a {
		color: #fff !important;
		font-size: 16px;
		padding: 14px 20px !important;
	}

	.rat-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a {
		background-color: #3873bd;
		color: #fff !important;
	}

	.rat-nav .wp-block-navigation__responsive-container-close {
		color: #fff;
	}
}

/* ---- Homepage slideshow (CSS-only crossfade, no JS dependency) ---- */
.rat-slideshow {
	max-width: 824px;
	height: 200px;
	margin: 0 auto !important;
	position: relative;
	background: #fff;
	padding: 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.rat-slide {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	background-size: cover;
	background-position: center;
}

/* Base layer: always visible, guarantees something shows even if
   animations are disabled/paused (e.g. headless screenshots, reduced-motion). */
.rat-slide-1 {
	background-image: url('../images/slides/aruba-timeshare-1.jpg');
	opacity: 1;
	z-index: 1;
}

/* Remaining slides crossfade on top of the base layer. */
.rat-slide-2,
.rat-slide-3,
.rat-slide-4,
.rat-slide-5,
.rat-slide-6,
.rat-slide-7,
.rat-slide-8 {
	opacity: 0;
	z-index: 2;
	animation: rat-slide-fade 28s infinite;
}

.rat-slide-2 { background-image: url('../images/slides/aruba-timeshare-2.jpg'); animation-delay: 0s; }
.rat-slide-3 { background-image: url('../images/slides/aruba-timeshare-3.jpg'); animation-delay: 4s; }
.rat-slide-4 { background-image: url('../images/slides/aruba-timeshare-4.jpg'); animation-delay: 8s; }
.rat-slide-5 { background-image: url('../images/slides/aruba-timeshare-5.jpg'); animation-delay: 12s; }
.rat-slide-6 { background-image: url('../images/slides/aruba-timeshare-6.jpg'); animation-delay: 16s; }
.rat-slide-7 { background-image: url('../images/slides/aruba-timeshare-7.jpg'); animation-delay: 20s; }
.rat-slide-8 { background-image: url('../images/slides/aruba-timeshare-8.jpg'); animation-delay: 24s; }

@media (prefers-reduced-motion: reduce) {
	.rat-slide-2, .rat-slide-3, .rat-slide-4, .rat-slide-5,
	.rat-slide-6, .rat-slide-7, .rat-slide-8 {
		animation: none;
		opacity: 0;
	}
}

@keyframes rat-slide-fade {
	0%   { opacity: 0; }
	3%   { opacity: 1; }
	11%  { opacity: 1; }
	14%  { opacity: 0; }
	100% { opacity: 0; }
}

/* ---- "Welcome to" script graphic, replaces the Home page H1 text ---- */
.rat-main-col h1.rat-welcome-title {
	background-image: url('../images/welcome.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 180px;
	height: 45px;
	text-indent: -1999px;
	overflow: hidden;
	font-weight: normal;
	text-shadow: none;
	border-bottom: none;
	margin: 0.5em 0 1em 0;
	padding: 0;
}