/*
Theme Name: 3B Vilamoura
Description: Sunny yellow and white holiday rental theme with a built-in availability booking calendar.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: threeb
*/

/* ---------- Tokens ---------- */
:root{
  --sun:#FFD21F; --sun-deep:#F5B800; --sun-pale:#FFF8D6; --white:#fff;
  --ink:#2A2410; --muted:#6A6244; --radius:22px;
  --head:'DM Serif Display',Georgia,serif; --body:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.65;display:flex;flex-direction:column;min-height:100vh}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.1}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--sun);padding:.5rem 1rem;z-index:99}
main{flex:1}
.wrap{max-width:1100px;margin:auto;padding:4rem 1.25rem}
.narrow{max-width:860px}
.title{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1rem}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch;margin-bottom:2.2rem}
.entry-content p{margin-bottom:1rem;max-width:65ch}
img{max-width:100%;height:auto}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:4px solid var(--sun)}
.admin-bar .site-header{top:32px}
.nav{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.7rem 1.25rem}
.logo{font-family:var(--head);font-size:1.6rem;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.logo i{width:30px;height:30px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 5px var(--sun-pale)}
.nav ul{display:flex;gap:.3rem;list-style:none;flex-wrap:wrap}
.nav li a{display:block;padding:.5rem 1.1rem;border-radius:99px;text-decoration:none;font-weight:500;transition:background .2s}
.nav li a:hover{background:var(--sun-pale)}
.nav .current-menu-item>a,.nav .current_page_item>a{background:var(--sun);font-weight:700}

/* ---------- Buttons ---------- */
.btn,.wp-block-button__link{display:inline-block;padding:.9rem 1.9rem;border-radius:99px;font-weight:700;font-size:1rem;font-family:inherit;text-decoration:none;background:var(--ink);color:var(--sun);border:2px solid var(--ink);cursor:pointer;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-3px);background:var(--sun);color:var(--ink)}
.btn:disabled{opacity:.5;cursor:wait}

/* ---------- Hero ---------- */
.hero{min-height:82vh;display:flex;align-items:center;background:linear-gradient(rgba(255,210,31,.18),rgba(255,210,31,.18)),var(--hero) center/cover var(--sun)}
.hero .wrap{width:100%}
.panel{background:var(--white);border-radius:var(--radius);padding:2.5rem;max-width:560px;border-bottom:8px solid var(--sun);box-shadow:0 20px 50px rgba(42,36,16,.25)}
.panel .tag{display:inline-block;background:var(--sun);padding:.3rem .9rem;border-radius:99px;font-weight:700;font-size:.9rem;margin-bottom:1.2rem}
.panel h1{font-size:clamp(2.4rem,6vw,3.8rem);margin-bottom:1rem}
.panel p{color:var(--muted);font-size:1.1rem;margin-bottom:1.8rem}
.wave{display:block;width:100%;height:60px;margin-top:-1px;background:var(--sun)}
.wave path{fill:var(--white)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem}
.stat{background:var(--sun-pale);border-radius:var(--radius);padding:1.5rem;display:flex;gap:1rem;align-items:center}
.stat .e{font-size:2.2rem}
.stat strong{display:block;font-family:var(--head);font-size:1.25rem;font-weight:400}
.stat small{color:var(--muted)}
.cta{background:var(--sun);text-align:center}
.cta h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:1.5rem}

/* ---------- About / Services / Contact ---------- */
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
.about p{margin-bottom:1.1rem;max-width:62ch}
.about h2{font-size:1.7rem;margin:1.8rem 0 .8rem}
.glance{background:var(--sun);border-radius:var(--radius);padding:2rem;position:sticky;top:100px}
.glance h3{font-size:1.6rem;margin-bottom:1rem}
.glance li{list-style:none;padding:.6rem 0;border-bottom:2px solid rgba(42,36,16,.12);display:flex;gap:.7rem}
.glance li:last-child{border:0}
.feature{display:grid;grid-template-columns:auto 1fr;gap:1.8rem;background:var(--sun);border-radius:var(--radius);padding:2.2rem;margin-bottom:3rem}
.feature .big{font-size:4rem;line-height:1}
.feature h3{font-size:2rem;margin-bottom:.6rem}
.feature .btn{margin-top:1.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.card{border:3px solid var(--sun-pale);border-radius:var(--radius);padding:1.7rem;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--sun);transform:translateY(-4px)}
.card .ic{width:56px;height:56px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-size:1.7rem;margin-bottom:1rem}
.card h3{font-size:1.4rem;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.98rem}
.mail{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;background:var(--sun);border-radius:var(--radius);padding:1.6rem 2rem;margin-top:2.5rem}
.mail p{flex:1;min-width:220px}

/* ---------- Availability calendar ---------- */
.tb-cal{border:3px solid var(--sun);border-radius:var(--radius);padding:1.5rem}
.tb-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.tb-nav h3{font-size:1.5rem}
.tb-nav button{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--sun);font-size:1.4rem;cursor:pointer;line-height:1}
.tb-nav button:disabled{opacity:.3;cursor:not-allowed}
.tb-months{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.tb-mname{text-align:center;font-family:var(--head);font-size:1.3rem;margin-bottom:.6rem}
.tb-dow,.tb-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tb-dow span{text-align:center;font-size:.8rem;font-weight:700;color:var(--muted);padding-bottom:.3rem}
.tb-day{aspect-ratio:1;border:0;border-radius:12px;background:var(--sun-pale);font:inherit;color:var(--ink);cursor:pointer;transition:background .15s}
.tb-day:hover:not(:disabled){background:var(--sun)}
.tb-day.blank{visibility:hidden}
.tb-day.is-past{background:transparent;color:#bbb}
.tb-day.is-booked{background:#ece9dd;color:#9a9580;text-decoration:line-through}
.tb-day.is-booked.out-ok{background:var(--sun-pale);color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 2px var(--sun-deep)}
.tb-day.in-range{background:var(--sun);color:var(--ink);text-decoration:none}
.tb-day.sel{background:var(--ink);color:var(--sun);text-decoration:none}
.tb-day:disabled{cursor:not-allowed}
.tb-legend{display:flex;gap:1.2rem;flex-wrap:wrap;list-style:none;margin:1.2rem 0;font-size:.9rem;color:var(--muted)}
.tb-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:.4rem}
.tb-summary{font-weight:700;margin-bottom:1rem}
.tb-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:var(--sun-pale);border-radius:var(--radius);padding:1.5rem}
.tb-form[hidden]{display:none}
.tb-form label{display:flex;flex-direction:column;gap:.3rem;font-weight:500;font-size:.95rem}
.tb-form .full{grid-column:1/-1}
.tb-form input,.tb-form textarea{font:inherit;padding:.7rem .9rem;border:2px solid #e0d9a8;border-radius:12px;background:var(--white)}
.tb-form input:focus,.tb-form textarea:focus{border-color:var(--ink);outline:0}
.tb-hp{position:absolute;left:-9999px}
.tb-result{margin-top:1rem;font-weight:700}

/* ---------- Footer ---------- */
.site-footer{background:var(--sun);border-top:4px solid var(--ink)}
.site-footer .in{max-width:1100px;margin:auto;padding:1.6rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.site-footer a{font-weight:700}

/* ---------- Responsive ---------- */
@media(max-width:800px){
  .about,.feature,.tb-months,.tb-form{grid-template-columns:1fr}
  .glance{position:static}
  .nav{justify-content:center}
  .wrap{padding:3rem 1.25rem}
  .panel{padding:1.8rem}
  .tb-months .tb-box+.tb-box{display:none}
}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}