/* ===== La Piazza – Tuscan Theme (light, warm, bistro) ===== */

/* Optional font for headings (loads from Google) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&display=swap');

:root{
  --bg: #faf8f4;            /* cream */
  --paper: #ffffff;         /* card/paper */
  --text: #1e1b16;          /* body text */
  --muted: #6f6a61;         /* soft text */
  --accent: #c4533b;        /* terracotta */
  --accent-600: #a84633;
  --green: #1f4a34;         /* deep green */
  --gold: #caa752;
  --line: #ece7de;          /* soft line */
  --shadow: 0 12px 28px rgba(30, 27, 22, .08);
  --radius: 18px;
}

/* Base --------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1600px 800px at 10% -10%, #fff 0, #fff 30%, transparent 31%),
    radial-gradient(1200px 600px at 110% 0, #fff 0, #fff 30%, transparent 31%),
    var(--bg);
  line-height: 1.6;
}

h1, h2, h3, .display-5{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: .2px;
}

.text-soft { color: var(--muted)!important; }

.section{ padding: 64px 0; }
.section-tight{ padding: 36px 0; }
.section-title{ font-weight: 800; margin-bottom: 10px; }

/* Buttons ------------------------------------------------ */
.btn{
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  transition: .18s ease-in-out;
}

.btn-cta{
  background: var(--accent);
  color:#fff;
  border:2px solid var(--accent);
}
.btn-cta:hover{ background: var(--accent-600); border-color: var(--accent-600); color:#fff; }

.btn-outline-light{
  background: transparent;
  color: var(--green);
  border:2px solid var(--green);
}
.btn-outline-light:hover{ background: var(--green); color:#fff; }

/* Header / Nav ------------------------------------------ */
.rl-header{
  background: var(--paper);
  box-shadow: 0 2px 0 rgba(31,26,18,.04), 0 10px 24px rgba(31,26,18,.04);
}

.rl-header .navbar{
  --bs-navbar-color: var(--text);
  --bs-navbar-hover-color: var(--accent);
}

.logo{
  width: 36px; height: 36px; border-radius: 50%;
  display:grid; place-items:center;
  font-weight:800; color:#fff;
  background: var(--accent);
}
.brand{ font-weight:800; }

/* Hero --------------------------------------------------- */
.hero{
  padding: 72px 0 48px;
  position: relative;
  background:
    radial-gradient(900px 420px at 100% 20%, #fff 0, #fff 40%, transparent 41%),
    linear-gradient(180deg, #fff, #fff0 40%),
    var(--bg);
}

.pill{
  display:inline-block;
  padding: 6px 12px;
  border:1px solid var(--line);
  background:#fff;
  color: var(--green);
  border-radius: 999px;
  font-weight:600;
  font-size:.9rem;
}

.fw-800{ font-weight:800; }
.grad{
  background: linear-gradient(90deg, var(--accent), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.reviews{ margin-top:20px; }
.stars{ color: #f3c96a; font-size: 18px; letter-spacing: 3px; }

/* Hero visual card (right) */
.hero-card{
  border-radius: var(--radius);
  height: 340px;
  background:
    linear-gradient(120deg, rgba(202,167,82,.18), rgba(196,83,59,.18)),
    url('https://images.unsplash.com/photo-1546549039-49fae1661f6c?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  border:1px solid var(--line);
}
.hero-card::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height: 8px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

/* Generic “card” (formerly glass) ----------------------- */
.card-glass{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Trust bar --------------------------------------------- */
.trust{ padding: 14px 18px; display:flex; align-items:center; gap:16px; }
.trust-title{ font-weight:700; color: var(--muted); margin-right:8px; }
.trust .logos{ display:flex; gap:16px; flex-wrap:wrap; }
.logo-ph{
  border:1px dashed var(--line);
  padding:6px 10px; border-radius:8px;
  color: var(--muted); font-weight:600; background:#fff;
}

/* Menu cards -------------------------------------------- */
.dish{ padding: 16px; }
.dish-top{ display:flex; align-items:center; gap:12px; }
.dish-line{ height:1px; background: var(--line); margin:10px 0; }

.dish-photo.ph{
  width: 56px; height: 56px; border-radius: 12px;
  background:
    linear-gradient(120deg, rgba(196,83,59,.25), rgba(202,167,82,.25)),
    url('https://images.unsplash.com/photo-1542281286-9e0a16bb7366?q=80&w=800&auto=format&fit=crop') center/cover no-repeat;
  border:1px solid var(--line);
}

.price{
  margin-left: auto;
  white-space: nowrap;
  font-weight: 800;
  color: var(--green);
  padding: 6px 10px;
  background: #f2f1ec;
  border:1px solid var(--line);
  border-radius: 999px;
}

/* Gallery ------------------------------------------------ */
.gph.ph{
  border-radius: 14px;
  height: 170px;
  background:
    linear-gradient(120deg, rgba(196,83,59,.2), rgba(31,74,52,.2)),
    url('https://images.unsplash.com/photo-1543772920-3346a1b4d9b7?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Visit / badges ---------------------------------------- */
.badge-soft{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  font-weight:600;
  border:1px solid var(--line);
  border-radius: 999px;
  background:#fff;
  color: var(--green);
}

.ratio > iframe{ border:0; }

/* CTA stripe -------------------------------------------- */
.lp-circle{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--green); color:#fff; font-weight:800;
}

/* Sticky mobile bar ------------------------------------- */
.bookbar{
  position: fixed; left:0; right:0; bottom:0;
  display:flex; gap:10px; padding: 10px 12px;
  background:#ffffffd9; backdrop-filter: blur(4px);
  border-top:1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(31,26,22,.06);
  z-index: 1030;
}

/* Reveal animation -------------------------------------- */
.reveal{ opacity: 0; transform: translateY(14px); transition:.5s ease; }
.reveal.in-view{ opacity:1; transform:none; }

/* Tweaks ------------------------------------------------ */
a{ color: var(--accent); }
a:hover{ color: var(--accent-600); }

.navbar-toggler{ border: 1px solid var(--line)!important; }

/* Responsive ------------------------------------------- */
@media (max-width: 991.98px){
  .hero-card{ height: 240px; }
}

@media (max-width: 575.98px){
  .section{ padding: 52px 0; }
  .hero{ padding: 56px 0 32px; }
}