/* ============================================
   FRATELLI POSITANO — DESIGN TOKENS
   ============================================ */
:root{
  --color-notte: #14232B;        /* night sky / deep base */
  --color-blue: #1E5266;         /* sea blue, primary */
  --color-blue-light: #2C6E86;
  --color-calce: #F6F1E4;        /* whitewash cream */
  --color-calce-dim: #EDE6D4;
  --color-limone: #E8B93C;       /* lemon accent */
  --color-limone-light: #F4D37A;
  --color-terracotta: #B15A38;   /* roof tile */
  --color-bougainvillea: #C1495C;/* rare accent */
  --color-ink: #1A2A2F;

  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;

  --radius: 4px;
  --container: 1180px;
  --transition: 0.35s cubic-bezier(.4,0,.2,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-calce);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
.container{ max-width: var(--container); margin:0 auto; padding: 0 28px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============ TYPE ============ */
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; line-height:1.05; margin:0; }
em{ font-style: italic; font-weight:500; color: var(--color-limone); }
p{ line-height:1.7; margin:0 0 1em; color: rgba(26,42,47,0.78); }

.eyebrow{
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-terracotta);
  margin: 0 0 14px;
}
.eyebrow-center{ text-align:center; }
.section-title{ font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 16px; }
.section-title.center{ text-align:center; max-width: 640px; margin-left:auto; margin-right:auto; }
.section-lead{ text-align:center; max-width: 560px; margin: 0 auto 48px; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  border: 2px solid transparent;
  cursor:pointer;
}
.btn-lemon{ background: var(--color-limone); color: var(--color-notte); }
.btn-lemon:hover{ background: var(--color-limone-light); transform: translateY(-2px); }
.btn-outline{ border-color: rgba(246,241,228,0.6); color: var(--color-calce); }
.btn-outline:hover{ border-color: var(--color-calce); background: rgba(246,241,228,0.08); }
.btn-full{ width:100%; text-align:center; border:none; }

/* ============ HEADER ============ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
  padding: 22px 0;
}
.site-header.scrolled{
  background: rgba(20,35,43,0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  padding: 12px 0;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.logo{ font-family: var(--font-display); font-size: 1.35rem; font-weight:600; color: var(--color-calce); white-space:nowrap; }
.logo span{ color: var(--color-limone); font-style: italic; }
.main-nav{ display:flex; gap: 32px; }
.main-nav a{ color: rgba(246,241,228,0.85); font-size: 0.92rem; font-weight:600; transition: color var(--transition); }
.main-nav a:hover{ color: var(--color-limone); }
.nav-cta{ padding: 10px 22px; font-size: 0.82rem; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 8px; }
.nav-toggle span{ width:24px; height:2px; background: var(--color-calce); border-radius:2px; }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(44,110,134,0.55), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(177,90,56,0.25), transparent 50%),
    linear-gradient(160deg, var(--color-notte) 0%, var(--color-blue) 100%);
  overflow: hidden;
  padding: 140px 0 120px;
}
.hero-glow{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(232,185,60,0.10), transparent 60%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; text-align:center; }
.hero-title{
  color: var(--color-calce);
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  letter-spacing: -0.01em;
}
.hero-tagline{
  color: rgba(246,241,228,0.82);
  font-size: 1.15rem;
  max-width: 560px;
  margin: 26px auto 38px;
}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom: 44px; }
.hero-rating{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color: var(--color-calce); font-size: 0.9rem; font-weight:600;
}
.stars{ color: var(--color-limone); letter-spacing:2px; }
.rating-divider{ opacity:0.5; }
.rating-count, .rating-price{ opacity:0.75; font-weight:500; }

.terrace-divider{ position:absolute; bottom:-1px; left:0; width:100%; line-height:0; z-index:3; }
.terrace-divider svg{ width:100%; height:70px; display:block; }
.terrace-divider svg path{ fill: var(--color-calce); }
.terrace-divider--top{ position:relative; bottom:auto; }
.terrace-divider--top svg path{ fill: var(--color-notte); }

/* ============ STORY ============ */
.story{ padding: 110px 0; }
.story-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items:center; }
.photo-frame{
  position:relative;
  background: linear-gradient(135deg, var(--color-blue-light), var(--color-notte));
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.photo-frame--tall{ aspect-ratio: 3/4; }
.photo-frame::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(232,185,60,0.18), transparent 55%);
}
.photo-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.photo-label{
  position:relative; z-index:1;
  color: rgba(246,241,228,0.85);
  font-size: 0.78rem; font-weight:600;
  padding: 16px; letter-spacing:0.02em;
}
.story-text h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 22px; }
.story-stats{ display:flex; gap: 40px; margin-top: 32px; }
.story-stats strong{ display:block; font-family: var(--font-display); font-size: 1.9rem; color: var(--color-blue); }
.story-stats span{ font-size: 0.8rem; color: rgba(26,42,47,0.6); }

/* ============ MENU ============ */
.menu-section{ padding: 110px 0; background: var(--color-calce-dim); }
.menu-tabs{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom: 48px;
}
.menu-tab{
  background: transparent; border: 1.5px solid rgba(30,82,102,0.25);
  color: var(--color-blue); padding: 12px 22px; border-radius: 999px;
  font-family: var(--font-body); font-weight:700; font-size: 0.85rem; cursor:pointer;
  transition: all var(--transition); text-align:left; line-height:1.3;
}
.menu-tab span{ display:block; font-weight:500; font-size: 0.72rem; opacity:0.65; text-transform:none; letter-spacing:0; }
.menu-tab.active, .menu-tab:hover{ background: var(--color-blue); color: var(--color-calce); border-color: var(--color-blue); }
.menu-panel{ display:none; max-width: 760px; margin: 0 auto; }
.menu-panel.active{ display:block; animation: fadeUp 0.4s ease; }
.panel-note{ text-align:center; font-style:italic; color: rgba(26,42,47,0.6); margin-bottom: 30px; }
.menu-list{ display:flex; flex-direction:column; gap: 26px; }
.menu-item{ border-bottom: 1px dashed rgba(30,82,102,0.25); padding-bottom: 22px; }
.menu-item-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.menu-item-head h3{ font-size: 1.15rem; }
.menu-item .price{ font-family: var(--font-display); font-weight:600; color: var(--color-terracotta); white-space:nowrap; }
.menu-item p{ margin-top:6px; margin-bottom:0; font-size:0.92rem; }

@keyframes fadeUp{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

/* ============ REVIEWS ============ */
.reviews{ padding: 110px 0; }
.reviews-summary{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom: 48px; }
.big-rating{ font-family: var(--font-display); font-size: 4rem; color: var(--color-blue); line-height:1; }
.reviews-summary p{ margin:4px 0 0; font-size:0.85rem; }
.review-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.review-card{
  background: var(--color-calce-dim);
  border-radius: var(--radius);
  padding: 30px;
  border-left: 3px solid var(--color-limone);
}
.review-card p{ font-style: italic; margin: 14px 0; }
.review-author{ font-weight:700; font-size:0.85rem; color: var(--color-blue); }

/* ============ GALLERY ============ */
.gallery{ padding: 0 0 110px; }
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-grid .photo-frame{ aspect-ratio: 1/1; }

/* ============ VISIT / RESERVATION ============ */
.visit{ position:relative; background: var(--color-notte); padding: 110px 0 100px; color: var(--color-calce); }
.visit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.visit h2{ color: var(--color-calce); font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin-bottom: 22px; }
.visit .eyebrow{ color: var(--color-limone); }
.info-list li{ margin-bottom: 20px; line-height:1.6; color: rgba(246,241,228,0.85); }
.info-list strong{ display:block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--color-limone); margin-bottom:4px; }
.info-list a:hover{ color: var(--color-limone); }
.map-frame{ margin-top: 28px; border-radius: var(--radius); overflow:hidden; aspect-ratio: 16/10; }
.map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(0.2) contrast(1.05); }

.reservation-form{
  background: var(--color-calce);
  color: var(--color-ink);
  border-radius: var(--radius);
  padding: 40px;
}
.reservation-form .eyebrow{ color: var(--color-terracotta); }
.form-row{ display:flex; gap:16px; margin-bottom: 4px; }
.field{ flex:1; margin-bottom: 18px; }
.field label{ display:block; font-size:0.78rem; font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.06em; color: var(--color-blue); }
.field input, .field select, .field textarea{
  width:100%; padding: 12px 14px; border-radius: var(--radius);
  border: 1.5px solid rgba(30,82,102,0.22); font-family: var(--font-body); font-size:0.95rem;
  background: #fff; color: var(--color-ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(30,82,102,0.15);
}
.form-status{ margin-top:14px; font-size:0.88rem; font-weight:600; color: var(--color-blue); min-height: 1.2em; }

/* ============ FOOTER ============ */
.site-footer{ background: var(--color-notte); color: rgba(246,241,228,0.7); padding: 60px 0 24px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-grid h4{ color: var(--color-calce); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; }
.footer-grid a, .footer-grid p{ display:block; margin-bottom:10px; font-size:0.9rem; }
.footer-grid a:hover{ color: var(--color-limone); }
.footer-copy{ text-align:center; font-size:0.8rem; border-top: 1px solid rgba(246,241,228,0.1); padding-top:20px; margin:0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .main-nav, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .story-grid, .visit-grid{ grid-template-columns: 1fr; }
  .review-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .form-row{ flex-direction:column; gap:0; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .reservation-form{ padding: 26px; }
  .menu-tabs{ flex-direction:column; align-items:stretch; }
}