/* ===========================
   360 Rentals — THEME (Brand)
   Palette:
   - White         #ffffff
   - Light Pink    #fac9b8
   - Dark Plum     #450920
   - Pop Accent    #ee2a54
   Fonts:
   - Display: Oleo Script (headings, brand)
   - Sans: Inter/System (body)
   =========================== */

/* -------- Tokens (fonts, colors, sizing) -------- */
:root{
  /* Fonts */
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Oleo Script", cursive;

  /* Core brand */
  --bg:#ffffff;                 /* page background */
  --text:#272727;               /* main text */
  --muted:#5f5f5f;              /* secondary text */

  --accent:#ee2a54;             /* primary brand pop (buttons, focus) */
  --accent-2:#450920;           /* plum accent (links, active states) */
  --tint:#fac9b8;               /* soft tint (chips, banners, subtle fills) */

  /* Surfaces & chrome */
  --card:#ffffff;               /* card surface (crisp contrast) */
  --bar:#450920;                /* header/footer bar background */
  --header-link:rgba(255,255,255,.88); /* nav links on the plum bar */
  --border:#e6e6e6;             /* general borders (soft on white) */

  /* Hero / visuals */
  --hero-gloss:.28;             /* sheen intensity on hero panel */

  /* Sizing & effects */
  --radius:14px;
  --maxw:1100px;
  --shadow:0 6px 30px rgba(0,0,0,.15);
  --space: clamp(16px, 2vw, 28px);

  /* Forms */
  --field:#ffffff;              /* input background on light theme */
}

/* -------- Base -------- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:16px/1.6 var(--font-sans);
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;            /* Oleo Script supports 400/700 */
  letter-spacing:0;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1rem}

/* ======================
   Header / Navigation
   ====================== */
.site-header{
  position:sticky; top:0; z-index:10;
  background:var(--bar);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.header-row{display:flex; align-items:center; gap:1rem; padding:.7rem 0}

.brand{display:flex; gap:.6rem; align-items:center; text-decoration:none; color:#fff}
.brand-mark{
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
}
.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0;
  font-size:1.35rem;
  color:#fff;
}

.site-nav{display:flex; gap:1rem; align-items:center; margin-left:auto}
.site-nav a{
  color:var(--header-link);
  text-decoration:none; padding:.5rem .6rem; border-radius:10px
}
.site-nav a[aria-current="page"], .site-nav a:hover{
  color:#fff; background:rgba(255,255,255,.14)
}
.nav-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,.28);
  color:#fff; padding:.45rem .6rem; border-radius:10px
}

/* ======================
   Hero (Home)
   ====================== */
.hero{
  display:grid; gap:var(--space); grid-template-columns:1.1fr .9fr;
  align-items:center; margin:2rem 0; padding:1rem 0
}
.hero h1{font-size:clamp(28px, 5vw, 48px); line-height:1.1; margin:.4rem 0 1rem}
.hero p{color:var(--muted); max-width:46ch}
.cta-row{display:flex; gap:.8rem; margin-top:1rem}

.hero-media{
  border-radius:var(--radius); border:1px solid var(--accent);
  box-shadow:var(--shadow); min-height:240px; position:relative; overflow:hidden;
  /* Brand gradient: pop accent → light tint → plum */
  background: radial-gradient(120% 120% at 100% 0%,
              var(--accent) 0%,
              var(--tint) 55%,
              var(--accent-2) 100%);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:conic-gradient(from 90deg, transparent 0 70%, rgba(255,255,255,.35) 70% 100%);
  mix-blend:overlay; opacity:var(--hero-gloss);
}

/* ======================
   Sections / Cards / CTA
   ====================== */
.section{margin:3rem 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space)}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space); align-items:start}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow)
}

/* Soft brand banner using the light pink tint */
.cta-banner{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:linear-gradient(90deg, var(--tint), var(--tint));
  padding:1rem 1.2rem; border:1px solid var(--border);
  border-radius:var(--radius); margin:3rem 0
}

/* ======================
   Buttons & Links
   ====================== */
.btn{
  display:inline-block; padding:.8rem 1rem; border-radius:12px;
  border:1px solid var(--border); text-decoration:none; color:var(--text)
}
.btn-primary{
  background:var(--accent); color:#000; border-color:transparent; font-weight:700
}
.btn-primary:hover{filter:brightness(1.05)}

.link{
  color:var(--accent-2); text-decoration:none; border-bottom:1px dashed var(--border)
}
.link:hover{border-bottom-color:var(--accent)}

.fine{font-size:.95rem}
.muted{color:var(--muted)}

/* ======================
   Gallery (thumbnails & lightbox)
   ====================== */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space)}
.gallery-item img{
  width:100%; display:block; border-radius:var(--radius);
  border:1px solid var(--border); box-shadow:var(--shadow);
  transition:transform .15s ease
}
.gallery-item img:hover{transform:translateY(-2px)}

/* CSS lightbox (no JS) */
.lightbox{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  padding:1rem; background:rgba(0,0,0,.9); z-index:100
}
.lightbox:target{display:flex}
.lightbox img{
  max-width:min(100%, var(--maxw)); max-height:85vh; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 40px rgba(0,0,0,.6)
}
.lightbox .close{
  position:absolute; top:1rem; right:1rem; font-size:2rem; line-height:1;
  text-decoration:none; color:#fff; background:rgba(0,0,0,.5);
  padding:.2rem .6rem; border-radius:10px
}

/* ======================
   Footer
   ====================== */
.site-footer{
  margin-top:4rem; background:var(--bar);
  border-top:1px solid rgba(255,255,255,.12); color:#fff
}
.footer-cols{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space); padding:2rem 0
}
.site-footer a{color:#fff; text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .muted{color:rgba(255,255,255,.88)}

/* ======================
   Services (Packages)
   ====================== */
.page-header{margin:2rem 0 1rem}
.page-header h1{margin:0 0 .4rem}

.price{font-weight:800; font-size:1.2rem; margin:.25rem 0 .75rem}
.list{margin:0; padding-left:1.1rem}
.list li{margin:.3rem 0}

/* Add-on chips use the soft tint */
.tags{display:flex; flex-wrap:wrap; gap:.5rem}
.tag{
  background:var(--tint);
  border:1px solid var(--border);
  padding:.35rem .6rem; border-radius:999px; color:var(--text)
}

/* ======================
   Booking (Form)
   ====================== */
.form{display:grid; gap:var(--space)}
label{display:grid; gap:.35rem; font-weight:600}
input, select, textarea{
  background:var(--field); color:var(--text); border:1px solid var(--border);
  padding:.8rem .9rem; border-radius:12px; outline:none
}
input:focus, select:focus, textarea:focus{border-color:var(--accent)}
select, input[type="date"], input[type="time"], input[type="number"]{appearance:none}

/* layout helpers for fields */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space)}
.grid-2 input, .grid-3 input, .grid-3 select{width:100%}

/* ======================
   Contact
   ====================== */
.contact-card p{margin:.25rem 0}
.contact-card .fine{display:block; margin-top:.5rem}

/* ======================
   Terms (Prose + TOC)
   ====================== */
.prose h2{margin-top:2rem; margin-bottom:.4rem}
.prose p{margin:.5rem 0}
.prose ul, .prose ol{padding-left:1.2rem; margin:.5rem 0}
.prose a.link{color:var(--accent-2); text-decoration:none; border-bottom:1px dashed var(--border)}
.prose a.link:hover{border-bottom-color:var(--accent)}

.toc{
  margin:1.5rem 0; padding:1rem; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius)
}
.toc ol{margin:0; padding-left:1.2rem}
.toc a{text-decoration:none; color:var(--accent-2)}
.toc a:hover{text-decoration:underline}

/* ======================
   Responsive
   ====================== */
@media (max-width:920px){
  .grid-3{grid-template-columns:1fr 1fr}
  .split, .hero{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .site-nav{
    display:none; position:absolute; right:1rem; top:64px; background:var(--bar);
    padding:.6rem; border:1px solid rgba(255,255,255,.2); border-radius:12px;
    flex-direction:column; width:min(260px,90vw)
  }
  .nav-toggle{display:inline-block; margin-left:auto}
}

/* keep H2/H3 on the sans for readability */
h2, h3 { font-family: var(--font-sans); font-weight: 700; letter-spacing: .2px; }

/* hero headline looks great a touch bigger */
.page-home .hero h1 { font-size: clamp(32px, 6.2vw, 56px); line-height: 1.05; }

.brand-name, h1 { letter-spacing: 0; }

.btn, .btn-primary { transition: transform .12s ease, filter .12s ease; }
.btn:hover, .btn-primary:hover { transform: translateY(-1px); }

@media (max-width: 420px){
  h1 { font-size: 30px; }
  .brand-name { font-size: 1.25rem; }
}

/* Replace circle with real logo */
.brand-logo{
  width:28px; height:28px; display:block;
  object-fit:contain; /* keeps non-square logos looking right */
}

/* If your logo is too dark on the plum header, make a light-on-dark variant */
.brand-logo.on-dark{ filter: brightness(0) invert(1); }  /* optional helper */