/*
Theme Name: Temasek Retreats Theme 1
Theme URI: https://temasekretreats.com/
Author: Temasek Retreats Engineering
Author URI: https://temasekretreats.com/
Description: Premium minimal / modern retreat presentation for Temasek Retreats, Port Dickson. Clean luxury, strong typography, restrained palette, editorial hospitality feel. PRESENTATION ONLY — consumes the Temasek Retreats Engine presentation API; zero business logic.
Version: 1.3.0
Requires at least: 6.5
Tested up to: 7.0.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: temasek-retreats-theme-1
Temasek Contract: yes
*/

/* ==========================================================================
   TEMASEK RETREATS — THEME 1 (PREMIUM MINIMAL / MODERN RETREAT)
   Design tokens + full presentation stylesheet.
   Self-contained: system font stacks, inline SVG scenes, no external assets.
   ========================================================================== */

:root {
	--tre1-ivory:    #faf9f6;   /* page background                    */
	--tre1-paper:    #ffffff;   /* cards                              */
	--tre1-ink:      #16181a;   /* primary text                       */
	--tre1-ink-soft: #4c5257;   /* secondary text                     */
	--tre1-muted:    #6b7278;   /* captions                           */
	--tre1-teal:     #14585c;   /* accent — deep sea teal             */
	--tre1-teal-soft:#e4eeed;   /* accent wash                        */
	--tre1-terra:    #c2653c;   /* warm accent                        */
	--tre1-line:     rgba(22, 24, 26, 0.12);
	--tre1-line-dark:rgba(250, 249, 246, 0.16);
	--tre1-serif: "Georgia", "Times New Roman", "Iowan Old Style", serif;
	--tre1-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tre1-gutter: clamp(1.25rem, 4vw, 4rem);
	--tre1-max: 74rem;
	--tre1-radius: 6px;
	--tre1-shadow: 0 24px 48px -28px rgba(20, 40, 44, 0.35);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0; font-family: var(--tre1-sans); color: var(--tre1-ink);
	background: var(--tre1-ivory); line-height: 1.7; font-size: 1rem;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--tre1-serif); line-height: 1.18; margin: 0 0 0.5em; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--tre1-teal); }
ul { margin: 0 0 1em; padding-left: 1.1em; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--tre1-teal); color: #fff; padding: 0.7rem 1.2rem;
	font-weight: 600; text-decoration: none; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; top: 0; }
:focus-visible { outline: 2px solid var(--tre1-teal); outline-offset: 2px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Layout helpers ---------- */
.tre1-container { max-width: var(--tre1-max); margin: 0 auto; padding: 0 var(--tre1-gutter); }
.tre1-container--narrow { max-width: 54rem; }
.tre1-section { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.tre1-section--alt { background: var(--tre1-paper); }
.tre1-section--dark { background: var(--tre1-ink); color: var(--tre1-ivory); }

.tre1-eyebrow {
	font-family: var(--tre1-sans); text-transform: uppercase; letter-spacing: 0.26em;
	font-size: 0.72rem; font-weight: 600; color: var(--tre1-teal); margin: 0 0 0.9rem;
}
.tre1-section--dark .tre1-eyebrow { color: #9cc9c9; }
.tre1-title { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.tre1-lede { font-size: clamp(1.02rem, 1.5vw, 1.22rem); color: var(--tre1-ink-soft); max-width: 46rem; }
.tre1-section--dark .tre1-lede { color: rgba(250, 249, 246, 0.82); }

.tre1-btn {
	display: inline-block; padding: 0.9rem 1.9rem; background: var(--tre1-teal); color: #fff;
	text-decoration: none; font-weight: 600; letter-spacing: 0.05em; font-size: 0.85rem;
	border: 1px solid var(--tre1-teal); border-radius: 999px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tre1-btn:hover, .tre1-btn:focus { background: #0f4649; border-color: #0f4649; color: #fff; }
.tre1-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.tre1-btn--ghost:hover, .tre1-btn--ghost:focus { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
.tre1-btn--ink { background: var(--tre1-ink); color: var(--tre1-ivory); border-color: var(--tre1-ink); }
.tre1-btn--ink:hover, .tre1-btn--ink:focus { background: #2a2d30; color: #fff; }

/* ---------- Header ---------- */
.tre1-header {
	position: sticky; top: 0; z-index: 60; background: rgba(250, 249, 246, 0.94);
	backdrop-filter: blur(10px); border-bottom: 1px solid var(--tre1-line);
}
.tre1-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	max-width: var(--tre1-max); margin: 0 auto; padding: 0.95rem var(--tre1-gutter);
}
.tre1-header__brand a {
	font-family: var(--tre1-serif); font-size: 1.2rem; letter-spacing: 0.14em;
	text-transform: uppercase; text-decoration: none; color: var(--tre1-ink);
}
.tre1-nav__list { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.tre1-nav__list a {
	color: var(--tre1-ink-soft); text-decoration: none; font-size: 0.82rem; letter-spacing: 0.1em;
	text-transform: uppercase; padding: 0.3rem 0; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s;
}
.tre1-nav__list a:hover, .tre1-nav__list a:focus { color: var(--tre1-teal); border-color: var(--tre1-teal); }

/* ---------- Hero ---------- */
.tre1-hero {
	position: relative; min-height: 92svh; min-height: 92vh; display: flex; align-items: flex-end;
	color: #fff; overflow: hidden;
}
.tre1-hero__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 60%; display: block;
}
.tre1-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(13, 30, 32, 0.22) 0%, rgba(13, 30, 32, 0.02) 45%, rgba(13, 30, 32, 0.72) 100%);
}
.tre1-hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--tre1-max); margin: 0 auto; padding: 7rem var(--tre1-gutter) 3.2rem; }
.tre1-hero__kicker { text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.74rem; color: rgba(255,255,255,0.92); margin: 0 0 1.1rem; }
.tre1-hero__title { font-size: clamp(2.6rem, 7vw, 5rem); color: #fff; margin: 0 0 0.7rem; }
.tre1-hero__sub { font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255,255,255,0.92); max-width: 36rem; margin: 0 0 2rem; font-family: var(--tre1-serif); font-style: italic; }
.tre1-hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 2.4rem; }
.tre1-hero__facts { display: flex; gap: 2.4rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 1.3rem 0 0; border-top: 1px solid rgba(255,255,255,0.25); }
.tre1-hero__facts strong { display: block; font-family: var(--tre1-serif); font-size: 1.5rem; font-weight: 500; }
.tre1-hero__facts span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.78); }

/* ---------- Why ---------- */
.tre1-why__grid { display: grid; grid-template-columns: 1.05fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.tre1-why__scene { border-radius: var(--tre1-radius); overflow: hidden; box-shadow: var(--tre1-shadow); aspect-ratio: 4 / 3; }
.tre1-why__image, .tre1-sea__image, .tre1-exp__image, .tre1-pool__image, .tre1-location__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.tre1-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 2rem 0 0; }
.tre1-stat { border-top: 2px solid var(--tre1-teal); padding-top: 0.9rem; }
.tre1-stat strong { display: block; font-family: var(--tre1-serif); font-size: 2rem; font-weight: 500; color: var(--tre1-teal); }
.tre1-stat span { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tre1-muted); }

/* ---------- Sea & sunset ---------- */
.tre1-sea { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.tre1-sea__scene { order: 2; border-radius: var(--tre1-radius); overflow: hidden; box-shadow: var(--tre1-shadow); aspect-ratio: 4 / 3; }

/* ---------- Experience ---------- */
.tre1-exp { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.tre1-exp__scene { order: 2; border-radius: var(--tre1-radius); overflow: hidden; box-shadow: var(--tre1-shadow); aspect-ratio: 4 / 3; }
.tre1-exp__list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.tre1-exp__list li { padding: 0.85rem 0; border-bottom: 1px solid var(--tre1-line); display: flex; gap: 0.9rem; }
.tre1-exp__list li::before { content: "—"; color: var(--tre1-terra); flex: 0 0 auto; }

/* ---------- Rooms ---------- */
.tre1-rooms__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 2.4rem 0 0; }
.tre1-room { background: var(--tre1-paper); border: 1px solid var(--tre1-line); border-radius: var(--tre1-radius); padding: 1.8rem; box-shadow: 0 10px 30px -24px rgba(20,40,44,0.4); }
.tre1-room h3 { font-size: 1.3rem; }
.tre1-room p { color: var(--tre1-ink-soft); font-size: 0.95rem; }
.tre1-room__num { font-family: var(--tre1-serif); color: var(--tre1-terra); font-size: 0.85rem; display: block; margin-bottom: 0.6rem; }
.tre1-extras { margin: 1.6rem 0 0; display: grid; gap: 0.7rem; }
.tre1-extras li { list-style: none; padding: 0.9rem 1.1rem; background: var(--tre1-teal-soft); border-radius: var(--tre1-radius); border-left: 3px solid var(--tre1-teal); font-size: 0.95rem; }

/* ---------- Pool & beach ---------- */
.tre1-pool { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.tre1-pool__scene { order: 1; border-radius: var(--tre1-radius); overflow: hidden; box-shadow: var(--tre1-shadow); aspect-ratio: 4 / 3; }

/* ---------- Amenities ---------- */
.tre1-amenities__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2rem; margin-top: 2.2rem; }
.tre1-amenities__grid li { list-style: none; padding: 1rem 0; border-bottom: 1px solid var(--tre1-line); display: flex; gap: 0.8rem; align-items: baseline; }
.tre1-amenities__grid li::before { content: "◆"; color: var(--tre1-teal); font-size: 0.6rem; }

/* ---------- Gallery ---------- */
.tre1-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.2rem; }
.tre1-gallery__tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--tre1-radius); background: var(--tre1-ink); }
.tre1-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.tre1-gallery__tile:hover img { transform: scale(1.04); }
.tre1-gallery__tile a { display: block; width: 100%; height: 100%; }
.tre1-gallery__tile a:focus-visible { outline: 2px solid var(--tre1-teal); outline-offset: -2px; }
.tre1-gallery__note { margin: 1.2rem 0 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tre1-muted); }

/* Lightbox (native <dialog>) */
.tre-lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.tre-lightbox::backdrop { background: rgba(16, 20, 22, 0.9); }
.tre-lightbox__img { max-width: 92vw; max-height: 84vh; display: block; margin: 0 auto; }
.tre-lightbox__caption { color: #fff; text-align: center; margin: 0.8rem 0 0; font-size: 0.9rem; }
.tre-lightbox__close { display: block; margin: 1rem auto 0; background: var(--tre1-teal); color: #fff; border: 1px solid var(--tre1-teal); padding: 0.5rem 1.4rem; cursor: pointer; font-family: inherit; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.tre-lightbox__close:hover, .tre-lightbox__close:focus { background: #0f4649; }

/* ---------- Location ---------- */
.tre1-location__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.tre1-location__address { font-family: var(--tre1-serif); font-size: 1.3rem; line-height: 1.5; margin: 0 0 1.2rem; }
.tre1-location__meta p { margin: 0.4rem 0; color: var(--tre1-ink-soft); }
.tre1-location__meta a { color: var(--tre1-teal); text-decoration: none; border-bottom: 1px solid rgba(20,88,92,0.35); }

/* ---------- Panels / price ---------- */
.tre1-panel { background: var(--tre1-paper); border: 1px solid var(--tre1-line); border-radius: var(--tre1-radius); padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: var(--tre1-shadow); }
.tre1-panel--dark { background: var(--tre1-ink); border-color: var(--tre1-ink); color: var(--tre1-ivory); }
.tre1-price__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 2.2rem; }

/* Engine shortcodes */
.tre-calendar__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9rem; }
.tre-calendar__table th { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--tre1-muted); padding: 0.5rem; }
.tre-calendar__day { border: 1px solid var(--tre1-line); text-align: center; padding: 0.55rem 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tre-calendar__day .tre-calendar__num { display: block; font-weight: 600; }
.tre-calendar__status { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tre-calendar__available .tre-calendar__status { color: #336f47; }
.tre-calendar__booked, .tre-calendar__held { color: #a3574a; }

.tre-rates__list { list-style: none; margin: 0; padding: 0; }
.tre-rates__item { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid var(--tre1-line); }
.tre-rates__label { font-family: var(--tre1-serif); font-size: 1.05rem; }
.tre-rates__value { font-family: var(--tre1-serif); font-size: 1.2rem; color: var(--tre1-teal); white-space: nowrap; }
.tre-rates__note { grid-column: 1 / -1; font-size: 0.78rem; color: var(--tre1-muted); font-style: italic; }

.tre-price { margin-top: 1.4rem; }
.tre-price__nights { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.76rem; color: var(--tre1-muted); }
.tre-price__total { font-family: var(--tre1-serif); font-size: 2rem; color: var(--tre1-ink); margin: 0.3rem 0; }
.tre-price__details { list-style: none; padding: 0; margin: 0; color: var(--tre1-ink-soft); }
.tre-price__details li { padding: 0.3rem 0; }

.tre-booking-form { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
.tre-booking-form__field { display: grid; gap: 0.35rem; }
.tre-booking-form__field label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tre1-muted); }
.tre-booking-form__field input { background: #fff; border: 1px solid var(--tre1-line); color: var(--tre1-ink); padding: 0.8rem 0.9rem; font-size: 1rem; border-radius: var(--tre1-radius); font-family: inherit; }
.tre-booking-form__field input:focus { outline: 2px solid var(--tre1-teal); outline-offset: 1px; }
.tre-booking-form__submit { background: var(--tre1-teal); color: #fff; border: 1px solid var(--tre1-teal); padding: 0.95rem 1.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; cursor: pointer; border-radius: 999px; font-family: inherit; }
.tre-booking-form__submit:hover, .tre-booking-form__submit:focus { background: #0f4649; }
.tre-booking-form__quote { font-family: var(--tre1-serif); font-size: 1.1rem; color: var(--tre1-teal); min-height: 1.4em; }
.tre-booking-form__error { color: #b3452f; }
.tre-booking-form__error--hidden, .tre-booking-form__confirm--hidden { display: none; }
.tre-booking-form__confirm { color: #2f7a48; }

.tre-policy h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--tre1-teal); font-family: var(--tre1-sans); margin: 1.6rem 0 0.4rem; }
.tre-policy .tre-policy__deposit, .tre-policy .tre-policy__security, .tre-policy .tre-policy__provider { font-family: var(--tre1-serif); font-size: 1.8rem; color: var(--tre1-teal); margin: 0.1rem 0 0.3rem; }

/* ---------- House rules ---------- */
.tre1-rules__list { list-style: none; padding: 0; margin: 2rem 0 0; columns: 2; column-gap: 3rem; }
.tre1-rules__list li { break-inside: avoid; padding: 0.8rem 0; border-bottom: 1px solid var(--tre1-line-dark); display: flex; gap: 0.9rem; }
.tre1-rules__list li::before { content: "—"; color: var(--tre1-terra); flex: 0 0 auto; }
.tre1-rules__times { margin-top: 2rem; font-family: var(--tre1-serif); font-size: 1.1rem; color: #9cc9c9; }

/* ---------- FAQ ---------- */
.tre1-faq__item { border-bottom: 1px solid var(--tre1-line); }
.tre1-faq__item summary { cursor: pointer; padding: 1.1rem 0; font-family: var(--tre1-serif); font-size: 1.12rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tre1-faq__item summary::-webkit-details-marker { display: none; }
.tre1-faq__item summary::after { content: "+"; font-family: var(--tre1-sans); color: var(--tre1-teal); font-size: 1.4rem; }
.tre1-faq__item[open] summary::after { content: "–"; }
.tre1-faq__item p { color: var(--tre1-ink-soft); padding-bottom: 1.2rem; margin: 0; max-width: 44rem; }

/* ---------- Contact ---------- */
.tre1-contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; margin-top: 2.2rem; }
.tre1-contact__card { border-left: 2px solid var(--tre1-teal); padding-left: 1.2rem; }
.tre1-contact__card strong { display: block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; color: var(--tre1-teal); margin-bottom: 0.4rem; }
.tre1-contact__card p { margin: 0; color: var(--tre1-ink); }
.tre1-contact__card a { color: var(--tre1-teal); text-decoration: none; }

/* ---------- Cancellation ---------- */
.tre1-cancel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.2rem; }
.tre1-cancel__card { text-align: center; }
.tre1-cancel__lead { font-family: var(--tre1-serif); font-size: 1.15rem; color: var(--tre1-ink-soft); margin: 0 0 0.4rem; }
.tre1-cancel__verdict { font-family: var(--tre1-serif); font-size: 1.9rem; color: var(--tre1-teal); margin: 0; }

/* ---------- Footer ---------- */
.tre1-footer { background: var(--tre1-ink); color: rgba(250, 249, 246, 0.75); }
.tre1-footer__inner { max-width: var(--tre1-max); margin: 0 auto; padding: 3rem var(--tre1-gutter); display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: center; }
.tre1-footer__brand { font-family: var(--tre1-serif); font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tre1-ivory); margin: 0 0 0.4rem; }
.tre1-footer__copy { margin: 0; font-size: 0.85rem; }
.tre1-footer__nav { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap; }
.tre1-footer__nav a { color: rgba(250, 249, 246, 0.75); text-decoration: none; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
.tre1-footer__nav a:hover { color: #9cc9c9; }

/* ---------- Generic pages ---------- */
.tre1-page { padding: clamp(4rem, 10vw, 7rem) 0; }
.tre1-page__title { font-size: clamp(1.9rem, 4vw, 2.8rem); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.tre1-why__grid, .tre1-sea, .tre1-exp, .tre1-pool, .tre1-location__grid, .tre1-price__grid { grid-template-columns: 1fr; }
	.tre1-sea__scene, .tre1-exp__scene, .tre1-pool__scene, .tre1-why__scene { order: -1; }
	.tre1-rooms__grid { grid-template-columns: 1fr; }
	.tre1-rules__list { columns: 1; }
	.tre1-cancel__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.tre1-header__inner { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
	.tre1-nav__list { gap: 1rem; }
	.tre1-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.tre1-stats { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}