/*
Theme Name: Villa Tereza
Theme URI: https://villatereza.com
Author: Tangalle Beach Villas
Description: Bespoke private website for Villa Tereza, Tangalle.
Version: 1.0.8
Text Domain: villa-tereza
*/
:root{--ink:#363734;--soft:#686963;--clay:#a95f49;--palm:#627769;--paper:#faf7f1;--line:#ded9cf}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em;line-height:.97}
.site-header{height:92px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 38px;background:#fffffff8;border-bottom:1px solid var(--line);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:12px;width:auto;height:auto;overflow:visible;text-transform:uppercase;font-weight:800;letter-spacing:.08em}
.brand img{width:86px;height:86px;object-fit:contain}
.brand b{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--clay);border-radius:50%;font:12px Georgia;color:var(--clay)}
.brand small{display:block;margin-top:4px;font-size:8px;color:#8b8982}
.brand span{font-size:15px}
.site-nav{display:flex;gap:22px;font-size:13px}
.site-nav a:hover{color:var(--clay)}
.outline{justify-self:end;border:1px solid var(--clay);color:var(--clay);padding:13px 18px;font-size:13px;font-weight:800}
.mobile-menu{display:none}
.hero{height:calc(100vh - 92px);min-height:680px;position:relative;overflow:hidden}
.hero-image{position:absolute;inset:0;background:center/cover no-repeat;filter:saturate(.86)}
.wash{position:absolute;inset:0;background:linear-gradient(90deg,#fffaf4f5 0%,#fffaf4e3 45%,#fffaf4a5 74%,#fffaf476 100%)}
.hero-copy{position:absolute;left:max(6vw,55px);top:50%;transform:translateY(-50%);max-width:800px}
.hero-logo{width:180px;height:180px;object-fit:contain;margin:0 0 2px;animation:villa-logo-in .65s ease-out both}
@keyframes villa-logo-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.kicker{margin:0 0 18px;color:var(--clay);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.hero h1{font-size:clamp(55px,7vw,100px);margin:0}
.hero-copy>p:not(.kicker){max-width:620px;font-size:19px;line-height:1.65;color:var(--soft)}
.actions{display:flex;align-items:center;gap:30px;margin-top:30px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 25px;background:var(--clay);color:#fff;font-size:13px;font-weight:800}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800}
.facts{position:absolute;right:0;bottom:0;display:flex;background:#fffaf4ef}
.facts span{display:flex;align-items:center;gap:9px;padding:23px;border-left:1px solid var(--line);font-size:12px;font-weight:700}
.intro{width:min(1160px,calc(100% - 56px));margin:auto;padding:125px 0;display:grid;grid-template-columns:1.15fr .85fr;gap:80px}
.intro h2,.feature h2,.review-preview h2{font-size:clamp(48px,5.5vw,76px);margin:0}
.intro>p{font-size:18px;line-height:1.8;color:var(--soft)}
.feature{width:min(1220px,calc(100% - 56px));margin:0 auto 120px;display:grid;grid-template-columns:1.2fr .8fr;background:#eee8df}
.feature img{height:590px;object-fit:cover;opacity:.86}
.feature>div{padding:65px;display:flex;flex-direction:column;justify-content:center}
.feature>div>p:not(.kicker){font-size:17px;line-height:1.75;color:var(--soft)}
.review-preview{text-align:center;padding:100px 25px;background:var(--palm);color:#fff}
.review-preview .kicker{color:#ead5cb}
.review-preview p:not(.kicker){font-size:17px}
.review-preview .button{margin-top:22px}
.button.light{background:#fff;color:var(--palm)}
.page-hero{padding:100px max(6vw,30px) 70px;background:#eee8df}
.page-hero h1{font-size:clamp(58px,8vw,105px);margin:0}
.page-wrap{width:min(1120px,calc(100% - 56px));margin:auto;padding:75px 0 110px}
.page-wrap h2{font-size:clamp(38px,5vw,62px)}
.page-wrap p,.page-wrap li{font-size:17px;line-height:1.75;color:var(--soft)}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gallery-grid img{height:430px;object-fit:cover}
.room-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.room-card{padding:30px;background:#eee8df}
.site-footer{display:grid;grid-template-columns:minmax(190px,250px) 1fr;align-items:center;gap:38px;padding:38px;background:#303832;color:#fff;font-size:11px}
.footer-logo-panel{display:flex;align-items:center;justify-content:flex-start;min-height:150px;padding:4px 0;background:transparent}
.footer-logo-panel img{width:auto;height:150px;max-width:100%;object-fit:contain;object-position:left center;filter:grayscale(1) brightness(0) invert(1);opacity:.88}
.footer-signoff{display:flex;justify-content:flex-end;align-items:center;gap:28px;flex-wrap:wrap}
.footer-signoff span{color:#d9e1dc}
.footer-signoff a{color:#fff}
.footer-signoff a:hover{color:#ead39b}
@media(max-width:960px){.site-header{grid-template-columns:1fr auto;padding:0 20px}
.site-nav{display:none}
.mobile-menu{display:block}
.mobile-menu summary{cursor:pointer}
.mobile-menu div{position:absolute;left:0;right:0;top:91px;padding:25px;background:#fff;display:grid;gap:18px}
.outline{display:none}
.hero-copy{left:28px;right:28px;top:42%}
.facts{left:0;right:auto;width:100%;justify-content:center}
.facts span{padding:18px 10px}
.intro,.feature,.room-grid{grid-template-columns:1fr}
.feature img{height:420px}
.feature>div{padding:42px}
.gallery-grid{grid-template-columns:1fr}
.site-footer{grid-template-columns:1fr;justify-items:center;text-align:center}
.footer-logo-panel{width:min(240px,100%)}
.footer-logo-panel img{object-position:center}
.footer-signoff{justify-content:center}
}
@media(max-width:560px){.brand{width:auto;height:auto}.hero-logo{width:150px;height:150px;margin-bottom:0}.hero-copy{top:42%}}
.explore-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.explore-card{margin:0;background:#eee8df}
.explore-card img{height:330px;object-fit:cover}
.explore-card figcaption{padding:28px}
.explore-card small{color:var(--clay);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.explore-card h2{font-size:38px;margin:12px 0}
.explore-links{display:flex;gap:18px;margin-top:38px}
@media(max-width:960px){.explore-grid{grid-template-columns:1fr}}