/* Tomelo Apartments — site stylesheet (replaces Phantom). Sections are
   appended per implementation task; do not reorder. */

/* ===== 1. Tokens ===== */
:root {
	--bg: #F9F5EE;
	--bg-card: #FFFFFF;
	--ink: #28323A;
	--ink-soft: #55606A;
	--sea: #155E75;
	--sea-deep: #114A5C;
	--terracotta: #C4634B;
	--terracotta-ink: #AC5340;
	--olive: #5E6C41;
	--cta: #B24A3E;
	--cta-hover: #9E4136;
	--coral-light: #F08080;
	--line: rgba(40, 50, 58, .14);
	--radius: 12px;
	--radius-pill: 999px;
	--space-1: .5rem;
	--space-2: 1rem;
	--space-3: 1.75rem;
	--space-4: 3rem;
	--space-5: 5rem;
	--font-display: "Marcellus", "Times New Roman", serif;
	--font-body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
	--shadow-card: 0 2px 10px rgba(40, 50, 58, .08);
	--shadow-lift: 0 8px 24px rgba(40, 50, 58, .14);
}

/* ===== 2. Fonts ===== */
@font-face {
	font-family: "Marcellus";
	src: url("/assets/fonts/marcellus.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("/assets/fonts/source-sans-3-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("/assets/fonts/source-sans-3-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("/assets/fonts/source-sans-3-700.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
}

/* ===== 3. Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	min-width: 320px;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--sea);
	line-height: 1.15;
	letter-spacing: .01em;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { max-width: 68ch; }
a { color: var(--sea); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--terracotta-ink); }
strong { font-weight: 700; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== 4. Layout helpers ===== */
.container { max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); }
.section { padding-block: var(--space-4); }
.section + .section { padding-top: 0; }

/* ===== 5. Buttons ===== */
.btn {
	display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--font-body); font-weight: 600; font-size: 1rem;
	padding: .8em 1.5em; min-height: 44px;
	border-radius: var(--radius-pill); border: 0;
	text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-cta { background: var(--cta); color: #fff; }
.btn-cta:hover { background: var(--cta-hover); color: #fff; }
.btn-ghost { background: transparent; color: var(--sea); box-shadow: inset 0 0 0 2px var(--sea); }
.btn-ghost:hover { color: var(--terracotta-ink); box-shadow: inset 0 0 0 2px var(--terracotta-ink); }
.btn-ghost.on-dark { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.btn-ghost.on-dark:hover { color: #fff; box-shadow: inset 0 0 0 2px var(--coral-light); }
.btn .icon { width: 1.2em; height: 1.2em; fill: currentColor; }

/* ===== 6. Header ===== */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.site-header {
	position: sticky; top: 0; z-index: 1000;
	background: var(--bg); /* fallback for browsers without color-mix */
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.site-header-inner { display: flex; align-items: center; gap: var(--space-2); min-height: 64px; }
.logo { display: flex; align-items: center; gap: .6em; font-family: var(--font-display); font-size: 1.15rem; color: var(--sea); text-decoration: none; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--space-2); list-style: none; padding: 0; }
.site-nav a { text-decoration: none; font-weight: 600; padding: .5em .25em; }
.site-header-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.header-book { font-size: .9rem; padding: .55em 1.2em; }
.nav-toggle { display: none; background: none; border: 0; padding: .6em; cursor: pointer; }
.nav-toggle-bar { display: block; width: 22px; height: 2px; background: var(--sea); margin: 5px 0; }
@media (max-width: 860px) {
	.site-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; display: none;
		background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); }
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; gap: 0; padding: var(--space-1) var(--space-2); }
	.site-nav a { display: block; padding: .8em 0; }
	.nav-toggle { display: block; }
	.header-book { display: none; }
}

/* ===== 7. Language menu + tile strip ===== */
.lang-menu { position: relative; }
.lang-menu summary {
	list-style: none; cursor: pointer; font-weight: 700; font-size: .9rem;
	padding: .5em .9em; border-radius: var(--radius-pill); border: 1px solid var(--line);
	display: inline-flex; align-items: center; gap: .35em; min-height: 40px;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: "▾"; font-size: .8em; }
.lang-menu[open] > ul {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 1001;
	background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-lift); list-style: none; padding: .4rem; margin: 0; min-width: 11rem;
}
.lang-menu a, .lang-menu .lang-current { display: block; padding: .5em .8em; border-radius: 8px; text-decoration: none; }
.lang-menu a:hover { background: var(--bg); }
.lang-menu .lang-current { font-weight: 700; color: var(--ink-soft); }
.tile-strip { display: flex; gap: 6px; margin-block: var(--space-2); }
.tile-strip i, .tile-strip a { width: 26px; height: 10px; border-radius: 3px; display: block; }
.c-blue { background: #3E7CB1; } .c-green { background: #5E8C5A; } .c-maroon { background: #8C3B3B; }
.c-purple { background: #7B5E9E; } .c-pink { background: #D98A9E; }

/* ===== 8. Footer + floating CTA + legacy-content shim ===== */
.site-footer { background: var(--bg-card); border-top: 1px solid var(--line); margin-top: var(--space-5); }
.site-footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-3); padding-block: var(--space-4); }
@media (max-width: 860px) { .site-footer-inner { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: 1.2rem; margin-bottom: var(--space-1); }
.contact-list { list-style: none; padding: 0; }
.contact-list a { display: inline-block; padding: .35em 0; text-decoration: none; font-weight: 600; }
.lang-switcher { display: flex; flex-wrap: wrap; gap: .35em .8em; font-size: .9rem; }
.lang-switcher .lang-current { font-weight: 700; }
.copyright { font-size: .85rem; color: var(--ink-soft); }
.book-now-float { position: fixed; right: 1rem; bottom: 1.25rem; z-index: 1002; box-shadow: var(--shadow-lift); }
@media (min-width: 861px) { .book-now-float { display: none; } }
/* Legacy shim: pages not yet redesigned keep readable layout */
#main .inner { max-width: 72rem; margin-inline: auto; padding: var(--space-4) var(--space-2); }
.gallery-container { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.5em 0; }
.gallery-container a { line-height: 0; }
.gallery-container img { width: 220px; height: 165px; object-fit: cover; border-radius: 4px; }
.pswp { z-index: 100000; }

/* ===== 9. Hero ===== */
.hero { position: relative; min-height: min(70vh, 620px); display: flex; align-items: flex-end; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(rgba(17, 74, 92, .25), rgba(17, 74, 92, .68)); }
.hero-content { position: relative; color: #fff; padding-block: var(--space-4); }
.hero-content h1 { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.hero-content > p { font-size: 1.15rem; margin-top: var(--space-1); text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.hero-tiles { margin-top: var(--space-2); }
.hero-tiles a { transition: transform .15s ease; }
.hero-tiles a:hover { transform: translateY(-3px); }
@media (max-width: 640px) { .hero { min-height: 55vh; } }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-content > * { animation: hero-in .6s ease both; }
.hero-content > p { animation-delay: .1s; }
.hero-actions { animation-delay: .2s; }
.hero-tiles { animation-delay: .3s; }

/* ===== 10. Apartment cards ===== */
.apt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 960px) { .apt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .apt-grid { grid-template-columns: 1fr; } }
.apt-card a { display: block; background: var(--bg-card); border-radius: var(--radius); overflow: hidden;
	text-decoration: none; color: var(--ink); box-shadow: var(--shadow-card); transition: box-shadow .15s ease, transform .15s ease; }
.apt-card a:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); color: var(--ink); }
.apt-card-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.apt-card-body { display: block; padding: var(--space-2); }
.apt-chip { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-size: 1.15rem; color: var(--sea); }
.apt-chip i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.apt-facts { display: block; margin-top: .35em; font-weight: 600; color: var(--ink-soft); font-size: .95rem; }
.apt-blurb { display: block; margin-top: .5em; }
.apt-card-small .apt-card-photo img { aspect-ratio: 16 / 10; }

/* ===== 11. Split sections + map ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.feature-card {
	display: block;
	color: inherit;
	text-decoration: none;
}
.feature-card .split {
	padding: var(--space-2);
	border-radius: var(--radius);
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.feature-card:hover,
.feature-card:focus-visible {
	color: inherit;
}
.feature-card:hover .split,
.feature-card:focus-visible .split {
	background: var(--bg-card);
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}
.feature-card:focus-visible {
	outline: 3px solid var(--sea);
	outline-offset: 3px;
	border-radius: var(--radius);
}
.feature-card-cta {
	color: var(--terracotta-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .18em;
}
#map { height: 420px; border-radius: var(--radius); margin-top: var(--space-2); z-index: 0; }
.map-nav-btn { display: flex; align-items: center; gap: .4em; background: #fff; padding: .5em .9em;
	border-radius: 8px; font-weight: 700; text-decoration: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); }

/* ===== 12. Apartment page ===== */
.apt-page { padding-block: var(--space-3) 0; }
.apt-header .apt-facts { font-size: 1.05rem; }
.apt-chip-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .35em; vertical-align: .08em; }
.apt-gallery { margin-block: var(--space-2); position: relative; }
.apt-gallery .gallery-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.apt-gallery a { line-height: 0; border-radius: 8px; overflow: hidden; }
.apt-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.apt-gallery a.gallery-lead { grid-column: span 2; grid-row: span 2; }
.apt-gallery a:nth-child(n+6) { display: none; }
.gallery-all { position: absolute; right: var(--space-1); bottom: var(--space-1); background: var(--bg-card); }
@media (max-width: 640px) { .apt-gallery .gallery-container { grid-template-columns: repeat(2, 1fr); } }

/* ===== 13. Apartment layout, amenities, booking card ===== */
.apt-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-3); align-items: start; margin-top: var(--space-3); }
@media (max-width: 860px) { .apt-layout { grid-template-columns: 1fr; } }
.apt-main h2 { margin-top: var(--space-3); }
.apt-main h3 { margin-top: var(--space-2); color: var(--olive); font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .04em; }
.detail-list { list-style: none; padding: 0; margin-top: .5em; }
.detail-list li { padding: .3em 0 .3em 1.4em; position: relative; }
.detail-list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); }
.amenities { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5em; margin-top: var(--space-1); }
.amenities li { background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; padding: .55em .8em; font-weight: 600; font-size: .95rem; }
.booking-card { position: sticky; top: 84px; background: var(--bg-card); border: 1px solid var(--line);
	border-radius: var(--radius); padding: var(--space-2); box-shadow: var(--shadow-card);
	display: flex; flex-direction: column; gap: var(--space-1); }
.booking-card .btn { justify-content: center; }
@media (max-width: 860px) { .booking-card { position: static; } }

/* ===== 14. Final-review fixes ===== */
.contact-jump { font-weight: 600; }
.contact-jump a { color: var(--terracotta-ink); }
#apartments, [id^="apt-"], #map, #footer { scroll-margin-top: 80px; }