/* ============================================================
   Hotel Touring Livigno — Menu Digitale
   Style: Hand-Drawn Whimsical Flat Design
   Earthy neutrals · Terracotta accent · Organic shapes
   Fonts: Caveat (handwritten) + Lato (body)
   ============================================================ */

:root {
  /* ---- Palette ---- */
  --paper:          #F5F0E6;
  --card:           #FDFAF4;
  --card-hover:     #FFF6ED;
  --ink:            #2C1810;
  --ink-mid:        #5C3D2E;
  --ink-light:      #8B6B55;
  --terracotta:     #BF5050;
  --terracotta-dk:  #933F40;
  --terracotta-lt:  #F2DDD7;
  --sage:           #7A9472;
  --sage-dk:        #5A7254;
  --sage-lt:        #D6E8D3;
  --sand:           #C8B098;
  --gold:           #B8963E;
  --gold-dk:        #8E6E1E;

  /* ---- Shadows: solid offset, no blur ---- */
  --shadow-sm:      3px 3px 0 var(--ink);
  --shadow-md:      4px 4px 0 var(--ink);
  --shadow-hover:   6px 6px 0 var(--ink);
  --shadow-red:     3px 3px 0 var(--terracotta-dk);
  --shadow-sage:    3px 3px 0 var(--sage-dk);
  --shadow-gold:    3px 3px 0 var(--gold-dk);

  /* ---- Border radius: subtly asymmetric ---- */
  --r-card:    14px 11px 13px 12px / 12px 14px 11px 13px;
  --r-btn:      8px  6px  8px  7px /  7px  8px  6px  8px;
  --r-pill:    20px 18px 20px 19px / 19px 20px 18px 20px;
  --r-badge:   10px  8px 10px  9px /  9px 10px  8px 10px;

  /* ---- Typography ---- */
  --font-hand: 'Caveat', cursive;
  --font-body: 'Lato', 'Helvetica Neue', sans-serif;

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast: 0.15s;
  --t-mid:  0.25s;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x: clip prevents horizontal scroll WITHOUT creating a scroll container,
   so position: sticky on .cat-tabs continues to work correctly */
html { background-color: #F5F0E6; overflow-x: clip; }
a { text-decoration: none; color: inherit; }

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  overflow-x: clip;
}

/* Page-enter animations */
@keyframes headerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-header {
  animation: headerIn 0.28s var(--ease) both;
}
main {
  /* slight delay so header lands first */
  animation: pageIn 0.36s var(--ease) 0.06s both;
}

/* ============================================================
   GOOGLE TRANSLATE — nuke banner & toolbar completely
   ============================================================ */
/* Hides the top toolbar */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}
.goog-te-banner-frame,
.goog-te-menu-frame,
#goog-gt-tt,
.skiptranslate > iframe {
  display:    none    !important;
  height:     0       !important;
  visibility: hidden  !important;
}
/* Always keep body flush — GT injects top:40px as inline style */
body { top: 0 !important; margin-top: 0 !important; }

/* ============================================================
   HEADER — main (index)
   ============================================================ */
.site-header {
  background: linear-gradient(to bottom, #BF5050 0%, #A94848 30%, #933F40 55%, #7D3638 78%, #662D2F 100%);
  color: white;
  padding: 32px 20px 52px;
  text-align: center;
  position: relative;
  overflow: visible;
}

/* Torn-paper / hand-painted bottom edge */
.site-header::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -14px;
  height: 20px;
  background: #662D2F;
  clip-path: polygon(
    0% 0%, 3% 100%, 6% 20%, 9% 85%, 12% 10%, 16% 90%, 20% 15%,
    24% 80%, 28% 5%, 32% 95%, 36% 20%, 40% 75%, 44% 0%,
    48% 90%, 52% 10%, 56% 80%, 60% 5%, 64% 95%, 68% 15%,
    72% 85%, 76% 10%, 80% 90%, 84% 20%, 88% 80%, 92% 5%,
    96% 95%, 100% 15%, 100% 0%
  );
  z-index: 1;
}

/* Language-switch pill — top-right of main header */
.lang-switch {
  position: absolute;
  top: 13px;
  right: 16px;
  z-index: 10;
  background: #FDFAF4;
  border: 2px solid #2C1810;
  border-radius: 20px 18px 20px 19px / 19px 20px 18px 20px;
  box-shadow: 2px 2px 0 #2C1810;
  color: #2C1810;
  font-family: var(--font-hand);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 4px 11px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.lang-switch:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #2C1810;
}
.lang-switch:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #2C1810;
}

.header-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.logo-text {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px 4px 6px 5px / 5px 6px 4px 6px;
  padding: 7px 18px;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase;
  color: white;
  margin-bottom: 14px;
}

.header-title {
  font-family: var(--font-hand);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: white;
  margin-bottom: 6px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.12);
}

.header-subtitle {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  font-style: italic;
}

/* ============================================================
   HEADER — compact (menu sub-pages)
   Back btn on LEFT · Hotel name on RIGHT
   ============================================================ */
.site-header.compact {
  padding: 0;
  text-align: left;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.site-header.compact::after { display: none; }

/* Left side: back button */
.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px 14px 16px;
  color: white;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease);
  /* subtle separator on the right */
  border-right: 1px solid rgba(255,255,255,0.2);
}

.back-btn:hover {
  background: rgba(0,0,0,0.12);
}

.back-btn svg {
  transition: transform var(--t-fast) var(--ease);
  flex-shrink: 0;
}

.back-btn:hover svg {
  transform: translateX(-3px);
}

/* Right side: hotel name */
.compact-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 18px;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em;
  text-align: right;
}

/* ============================================================
   INDEX — NAVIGATION CARDS
   ============================================================ */
.cards-section {
  max-width: 860px;
  margin: 44px auto 0;
  padding: 0 18px 50px;
  flex: 1;
}

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 560px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Card entrance animation */
.menu-card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);

  /* Staggered entrance */
  opacity: 0;
  transform: translateY(20px);
  animation: cardIn 0.4s var(--ease) forwards;
}

.menu-card:active {
  transform: translate(3px, 3px) scale(0.97) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
  opacity: 0.88;
}

.menu-card:nth-child(1) { animation-delay: 0.05s; }
.menu-card:nth-child(2) { animation-delay: 0.12s; }
.menu-card:nth-child(3) { animation-delay: 0.19s; }
.menu-card:nth-child(4) { animation-delay: 0.26s; }

@keyframes cardIn {
  to { opacity: 1; transform: translateY(0); }
}

.menu-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
  background: var(--card-hover);
}

.card-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50% 46% 50% 48% / 48% 50% 46% 50%;
  box-shadow: 2px 2px 0 var(--ink);
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform var(--t-fast) var(--ease);
}

.card-icon svg {
  width: 30px;
  height: 30px;
}

/* Wine bottle is taller than square — let it breathe vertically */
.menu-card:last-child .card-icon {
  width: 48px;
  height: 62px;
  border-radius: 26px 22px 26px 24px / 22px 26px 22px 26px;
}

/* Cutlery / tall SVG icons — taller oval container */
.card-icon--tall {
  width: 48px;
  height: 62px;
  border-radius: 26px 22px 26px 24px / 22px 26px 22px 26px;
}

.menu-card:hover .card-icon {
  transform: rotate(-4deg) scale(1.05);
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.card-title {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1.15;
}

.card-desc {
  color: var(--ink-mid);
  font-size: 0.85rem;
  line-height: 1.5;
}
.card-desc small { color: var(--ink-light); }

.card-btn {
  display: inline-block;
  background: var(--terracotta);
  color: white;
  padding: 7px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-red);
  font-family: var(--font-hand);
  font-size: 0.95rem;
  font-weight: 700;
  width: fit-content;
  margin-top: 4px;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.menu-card:hover .card-btn {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--terracotta-dk);
}

.card-btn.sage { background: var(--sage);  box-shadow: var(--shadow-sage); }
.menu-card:hover .card-btn.sage { box-shadow: 4px 4px 0 var(--sage-dk); }

.card-btn.gold { background: var(--gold);  box-shadow: var(--shadow-gold); }
.menu-card:hover .card-btn.gold { box-shadow: 4px 4px 0 var(--gold-dk); }

/* ============================================================
   MENU PAGE LAYOUT
   ============================================================ */
.menu-page {
  max-width: 860px;
  margin: 28px auto 0;
  padding: 0 18px 60px;
  flex: 1;
  width: 100%;
}

.page-header { margin-bottom: 10px; }

.page-title {
  font-family: var(--font-hand);
  font-size: 2rem;
  font-weight: 700;
  color: var(--terracotta);

  /* Entrance animation */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.4s var(--ease) 0.05s forwards;
}

.page-subtitle {
  color: var(--ink-light);
  font-size: 0.88rem;
  font-style: italic;
  margin-top: 4px;
  margin-bottom: 16px;

  opacity: 0;
  animation: fadeUp 0.4s var(--ease) 0.12s forwards;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CATEGORY TABS — sticky, scrollable, centered on active
   ============================================================ */
.cat-tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper);
  /* Match body grain texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 300px 300px;

  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* Break out of parent 18px padding to reach screen edges */
  margin-left: -18px;
  margin-right: -18px;
  padding: 10px 18px 12px;
  margin-bottom: 24px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  /* Bottom line to separate from content */
  box-shadow: 0 2px 0 var(--sand);

  opacity: 0;
  animation: fadeUp 0.4s var(--ease) 0.18s forwards;
}

.cat-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
  flex-shrink: 0;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink-mid);
  padding: 5px 14px;
  font-family: var(--font-hand);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.cat-tab:hover {
  background: var(--terracotta-lt);
  transform: translateY(-1px);
}

.cat-tab.active {
  background: var(--terracotta);
  color: white;
  border-color: var(--terracotta-dk);
  box-shadow: 2px 2px 0 var(--terracotta-dk);
  transform: translate(-1px, -1px);
}

/* Category section — scroll-margin accounts for sticky tabs height */
.cat-section {
  margin-bottom: 38px;
  scroll-margin-top: 70px;
}

.cat-section:last-child { margin-bottom: 0; }

.cat-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 C5 0%2C 10 6%2C 15 3 C20 0%2C 25 6%2C 30 3 C35 0%2C 40 6%2C 40 3' stroke='%23C4583A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 40px 6px;
}

.cat-name {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.cat-desc-small {
  color: var(--ink-light);
  font-size: 0.8rem;
  font-style: italic;
}

/* ============================================================
   MENU ITEMS
   ============================================================ */
.menu-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--sand);
  gap: 14px;
  transition: background var(--t-fast) var(--ease);
}

.menu-item:last-child { border-bottom: none; }

.menu-item:hover {
  background: rgba(196, 88, 58, 0.04);
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
}

.item-info { flex: 1; }

.item-name {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.2;
}

.item-desc {
  color: var(--ink-light);
  font-size: 0.82rem;
  margin-top: 3px;
  line-height: 1.45;
  font-style: italic;
}

.item-tags {
  display: flex;
  gap: 5px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.item-allergens {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--ink-light);
  margin-top: 4px;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.tag {
  font-family: var(--font-body);
  font-size: 0.63rem;
  font-weight: 700;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 9px 7px 9px 8px / 8px 9px 7px 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tag-veg { color: #4a7c4e; background: #e8f5e9; }
.tag-gf  { color: #b26a00; background: #fff3e0; }
.tag-hot { color: #c62828; background: #fce4ec; }

.item-price {
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--terracotta);
  font-size: 1.2rem;
  white-space: nowrap;
  min-width: 54px;
  text-align: right;
  padding-top: 1px;
}

/* ============================================================
   WINE LIST
   ============================================================ */
.wine-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px dashed var(--sand);
  gap: 14px;
  transition: background var(--t-fast) var(--ease);
}

.wine-item:last-child { border-bottom: none; }

.wine-item:hover {
  background: rgba(184, 150, 62, 0.05);
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
}

.wine-info { flex: 1; }

.wine-name {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.wine-producer {
  font-size: 0.8rem;
  color: var(--ink-mid);
  margin-top: 2px;
  font-style: italic;
}

.wine-notes {
  font-size: 0.78rem;
  color: var(--ink-light);
  font-style: italic;
  margin-top: 3px;
  line-height: 1.4;
}

.wine-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.wine-price-bottle {
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--gold);
  font-size: 1.2rem;
}

.wine-price-glass {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--ink-light);
}

/* Gold theme for wine page */
.wine-page .cat-header {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 C5 0%2C 10 6%2C 15 3 C20 0%2C 25 6%2C 30 3 C35 0%2C 40 6%2C 40 3' stroke='%23B8963E' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wine-page .cat-name,
.wine-page .page-title { color: var(--gold-dk); }

.wine-page .cat-tab:hover { background: #fdf4e0; }
.wine-page .cat-tab.active {
  background: var(--gold);
  border-color: var(--gold-dk);
  box-shadow: 2px 2px 0 var(--gold-dk);
}

/* ============================================================
   SPECIAL MENUS
   ============================================================ */
.special-menu-wrapper {
  max-width: 860px;
  margin: 28px auto 0;
  padding: 0 18px 60px;
  flex: 1;
}

.special-menu-wrapper .page-header {
  margin-bottom: 20px;
}

.special-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 26px;
}

.special-tab-btn {
  flex: 1;
  padding: 12px 16px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-hand);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-mid);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
  text-align: center;
}

.special-tab-btn:hover {
  background: var(--terracotta-lt);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-sm);
}

.special-tab-btn.active {
  background: var(--terracotta);
  border-color: var(--terracotta-dk);
  color: white;
  box-shadow: var(--shadow-red);
  transform: translate(-1px, -1px);
}

.special-menu-block { display: none; }
.special-menu-block.active { display: block; }

.special-price-banner {
  background: var(--terracotta);
  color: white;
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.special-price-label  { font-family: var(--font-hand); font-size: 1rem; opacity: 0.9; }
.special-price-amount { font-family: var(--font-hand); font-size: 2rem; font-weight: 700; }
.special-price-note   { font-size: 0.75rem; opacity: 0.75; margin-top: 2px; }

.special-course {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  margin-bottom: 14px;
}

.special-course-title {
  font-family: var(--font-hand);
  font-size: 1rem;
  font-weight: 700;
  color: var(--terracotta);
  margin-bottom: 10px;
  padding-bottom: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 C5 0%2C 10 6%2C 15 3 C20 0%2C 25 6%2C 30 3 C35 0%2C 40 6%2C 40 3' stroke='%23C4583A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 40px 6px;
}

.special-dish { padding: 7px 0; border-bottom: 1px dashed var(--sand); }
.special-dish:last-child { border-bottom: none; }

.special-dish-name {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.special-dish-desc {
  color: var(--ink-light);
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 2px;
  line-height: 1.4;
}

.special-includes {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--sage-lt);
  border: 2px solid var(--sage-dk);
  border-radius: var(--r-badge);
  box-shadow: 2px 2px 0 var(--sage-dk);
}

.special-includes p {
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--sage-dk);
  line-height: 1.55;
}

/* ============================================================
   FLOATING BACK-TO-MENU BUTTON
   ============================================================ */
.fab-back {
  position: fixed;
  bottom: 24px;
  right: 18px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--terracotta);
  color: white;
  border: 2px solid var(--ink);
  border-radius: 24px 22px 24px 22px / 22px 24px 22px 24px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 18px 10px 14px;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;

  /* Hidden by default */
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease),
    box-shadow 0.15s var(--ease),
    background 0.15s var(--ease);
}

.fab-back.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fab-back:hover {
  background: var(--terracotta-dk);
  box-shadow: 5px 5px 0 var(--ink);
  transform: translate(-1px, -1px) scale(1);
}

.fab-back:active {
  transform: translate(2px, 2px) scale(0.97);
  box-shadow: 1px 1px 0 var(--ink);
}

.fab-back svg {
  flex-shrink: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #5D292B;
  color: rgba(255,255,255,0.8);
  padding: 28px 20px 16px;
  font-size: 0.82rem;
  margin-top: auto;
}

.footer-contact {
  text-align: center;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-contact-label {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--terracotta-lt);
  margin-bottom: 8px;
}

.footer-hotel-name {
  font-weight: 700;
  color: white;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.footer-address {
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}

.footer-phone {
  display: inline-block;
  color: var(--terracotta-lt);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--t-fast) var(--ease);
}

.footer-phone:hover { color: white; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-copy {
  color: rgba(255,255,255,0.35);
  font-size: 0.7rem;
}

.footer-links {
  display: flex;
  gap: 18px;
}

.footer-links a {
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
  transition: color var(--t-fast) var(--ease);
}

.footer-links a:hover { color: rgba(255,255,255,0.9); }

/* ============================================================
   PER-PAGE THEMES
   Overrides --terracotta (tabs, prices, buttons, FAB)
   and compact header background for each sub-page.
   Darker variant = next color in the sequence.
   ============================================================ */
body.theme-ristorante {
  --terracotta:    #A94848;
  --terracotta-dk: #933F40;
  --terracotta-lt: #F3DCDC;
}
body.theme-ristorante .site-header { background: #A94848; }

body.theme-pizzeria {
  --terracotta:    #933F40;
  --terracotta-dk: #7D3638;
  --terracotta-lt: #EED9D9;
}
body.theme-pizzeria .site-header { background: #933F40; }

body.theme-bar {
  --terracotta:    #7D3638;
  --terracotta-dk: #662D2F;
  --terracotta-lt: #E8D3D3;
}
body.theme-bar .site-header { background: #7D3638; }

body.theme-vini {
  --terracotta:    #662D2F;
  --terracotta-dk: #5D292B;
  --terracotta-lt: #E2CCCC;
}
body.theme-vini .site-header { background: #662D2F; }

body.theme-speciali .site-header { background: #BF5050; }

/* ============================================================
   HOME CARDS — each card uses its section's theme color
   for the title and button so index.html matches the pages
   ============================================================ */
a[href="ristorante.html"] { --terracotta: #A94848; --terracotta-dk: #933F40; }
a[href="pizzeria.html"]   { --terracotta: #933F40; --terracotta-dk: #7D3638; }
a[href="bar.html"]        { --terracotta: #7D3638; --terracotta-dk: #662D2F; }
a[href="vini.html"]       { --terracotta: #662D2F; --terracotta-dk: #5D292B; }

/* Vini card has class="card-btn gold" — override gold with its theme color */
a[href="vini.html"] .card-btn {
  background:  var(--terracotta)    !important;
  box-shadow:  2px 2px 0 var(--terracotta-dk) !important;
}
a[href="vini.html"]:hover .card-btn {
  box-shadow:  4px 4px 0 var(--terracotta-dk) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 420px) {
  .header-title        { font-size: 1.75rem; }
  .page-title          { font-size: 1.65rem; }
  .cat-name            { font-size: 1.2rem; }
  .item-name           { font-size: 1rem; }
  .item-price          { font-size: 1.1rem; }
  .special-price-amount { font-size: 1.5rem; }
  .back-btn            { font-size: 1rem; padding: 12px 14px; }
  .compact-title       { font-size: 1rem; padding: 12px 14px; }
  .card-title          { font-size: 1.3rem; }
  .card-icon           { width: 48px; height: 48px; }
  .card-icon svg       { width: 26px; height: 26px; }
}