/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:#111;
  --card:#1a1a1a;
  --text:#ffffff;
  --muted:#d6d6d6;

  /* Italienska färger */
  --italy-red:#b11226;
  --italy-green:#1f7a3a;
  --italy-white:#ffffff;

  --brand: var(--italy-red);
  --accent: var(--italy-green);

  --line: rgba(255,255,255,.15);
}

html{ scroll-behavior: smooth; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a{ color: inherit; text-decoration: none; }
.container{ width: min(1100px, 92%); margin: 0 auto; }

.section{ padding: 3.5rem 0; }

.small{ font-size: .9rem; }
.muted{ color: var(--muted); }

h1, h2, h3{ letter-spacing: .3px; }

/* ---------- Header (site-header används bara för include-yta) ---------- */
.site-header{
  position: relative;
  z-index: 60;
}

/* (Topbar-regler kan ligga kvar även om header.html är tomt) */
.topbar-transparent{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar-inner{
  display:flex;
  gap: .6rem;
  align-items:center;
  justify-content:center;
  padding: .75rem 0;
  color: rgba(255,255,255,.78);
  flex-wrap: wrap;
  font-size: .95rem;
}
.topbar-sep{ opacity: .6; }
.topbar-phone{
  color: #fff;
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.35);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .8rem 1.05rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  gap:.5rem;
  font-weight: 650;
}

.btn-primary{
  background: linear-gradient(135deg, var(--brand), #7a0f1c);
  border-color: rgba(255,255,255,.15);
}
.btn-primary:hover{ filter: brightness(1.05); }

.btn-ghost{
  background: rgba(255,255,255,.04);
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

.phone-btn{
  border-color: rgba(31,122,58,.6);
  background: rgba(31,122,58,.15);
}
.phone-btn:hover{ background: rgba(31,122,58,.25); }

/* White phone icon (mask) */
.icon-phone{
  width: 18px;
  height: 18px;
  display: inline-block;
  background-color: #fff;

  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V21a1 1 0 01-1 1C10.07 22 2 13.93 2 3a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.59a1 1 0 01-.25 1.01l-2.2 2.19z'/>\
</svg>") center / contain no-repeat;

  mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V21a1 1 0 01-1 1C10.07 22 2 13.93 2 3a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.59a1 1 0 01-.25 1.01l-2.2 2.19z'/>\
</svg>") center / contain no-repeat;
}

/* ---------- Hero (video background) ---------- */
.hero{
  position: relative;
  display: flex;
}

.hero-video{
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0 0 3.5rem;
}

.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 18% 30%, rgba(31,122,58,.25), transparent 60%),
    radial-gradient(900px 420px at 82% 30%, rgba(177,18,38,.22), transparent 60%),
    linear-gradient(to top, rgba(15,15,18,.92), rgba(15,15,18,.45), rgba(15,15,18,.70));
}

.hero-bg{ z-index: 0; }
.hero-overlay{ z-index: 1; }

.hero-hours-top{ z-index: 4; }
.hero-logo{ z-index: 3; }
.hero-content{ z-index: 2; }

.hero-content{
  position: relative;
  z-index: 2;
}

.hero h1{
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1rem;
  letter-spacing: .2px;
}

.hero-lead{
  max-width: 56ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.hero-actions{
  display:flex;
  gap:.8rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}

/* Hero logo (FIXAD - låg fel tidigare) */
.hero-logo{
  position: absolute;
  top: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

.hero-logo img{
  height: 230px;
  width: auto;
  opacity: .95;
}

@media (max-width: 600px){
  .hero-logo img{
    height: 60px;
  }
}

/* Fallback om användaren föredrar mindre rörelse */
@media (prefers-reduced-motion: reduce){
  .hero-bg{ display:none; }
  .hero-video{
    background-image: url("../assets/images/hero/hero-poster.jpg");
    background-size: cover;
    background-position: center;
  }
}

/* ---------- Cards / Layout ---------- */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
}

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.2rem;
}
.card h2, .card h3{ margin-bottom: .4rem; }

.callout{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

/* ---------- Split ---------- */
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}

.list{
  list-style:none;
  margin-top: .8rem;
}
.list li{
  display:flex;
  justify-content:space-between;
  padding: .6rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}

/* ---------- Menu section simple blocks (för index.html) ---------- */
.menu-simple{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 900px){
  .menu-simple{ grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 2rem 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-meta{ text-align:right; }
@media (max-width: 700px){
  .footer-meta{ text-align:left; }
}

/* ---------- Contact Section (Light) ---------- */
.contact-section{
  background: #ffffff;
  color: #111;
  border-top: none;
}

.contact{
  text-align: center;
}

.contact h2{
  margin-bottom: 1.8rem;
  color: #111;
}

.contact-card{
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 22px;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.contact-phone{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #111;
}
.contact-phone:hover{ opacity: .8; }

.phone-number{ letter-spacing: .3px; }

.contact-label{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #666;
}
.contact-text{
  font-size: 1rem;
  color: #111;
}

.contact-hours{
  list-style: none;
  margin-top: .6rem;
}
.contact-hours li{
  display: flex;
  justify-content: space-between;
  padding: .45rem 0;
  border-bottom: 1px dashed #ddd;
  font-size: .95rem;
}
.contact-hours li:last-child{ border-bottom: none; }

/* Make phone icon black in contact section */
.contact-section .icon-phone{
  background-color: #111;
}

/* ---------- Menu Section (Light) ---------- */
.menu-section{
  background: #ffffff;
  color: #111;
  border-top: none;
}

.menu-section .container{
  text-align: center;
}

.menu-section h2{
  margin-bottom: 1.2rem;
  color: #111;
}

.menu-section .muted{
  color: #555;
  max-width: 520px;
  margin: 0 auto;
}

/* Menu cards should be light inside menu section */
.menu-section .card{
  background: #ffffff;
  border: 1px solid #e6e6e6;
}
.menu-section .list li{
  border-bottom: 1px dashed #ddd;
  color: #111;
}

/* ---------- Section Divider (Italian, White Band) ---------- */
.section-divider{
  position: relative;
  height: 70px;   /* ← MER LUFT */
  background: #fff;
}

.section-divider::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;    /* ← LÄNGRE LINJE */
  height: 3px;     /* ← TJOCKARE LINJE */
  background: linear-gradient(
    90deg,
    transparent,
    var(--italy-green),
    var(--italy-white),
    var(--italy-red),
    transparent
  );
  opacity: .9;
}

/* ---------- Footer (Dark, Clean) ---------- */
.site-footer{
  background: #0f0f0f;
  padding: 3.5rem 0 3rem;
  overflow: hidden;

  /* Fade-in startläge */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}

.site-footer.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.footer-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.footer-top{
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding-bottom: .15rem;
}
.footer-top:hover{
  color: rgba(255,255,255,.9);
  border-bottom-color: rgba(255,255,255,.45);
}

/* Större logga */
.footer-logo{
  height: 95px;   /* ← ändra här för storlek */
  width: auto;
  opacity: .95;
}

@media (max-width: 600px){
  .footer-logo{ height: 78px; }
}

.footer-copy{
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  letter-spacing: .02em;
}

/* Renderad meny inne i vita MENY-sektionen */
#menuRoot{
  margin-top: 1.5rem;
  text-align: left;   /* även om rubriken är centrerad */
}

.menu-category{
  margin-bottom: 2rem;
}

.menu-title{
  font-size: 1.2rem;
  margin: 1.2rem 0 .7rem 0;
  color: #111;
}

/* listan/korten */
.menu-list{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  overflow: hidden;
}

.menu-item{
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.menu-item:last-child{ border-bottom: 0; }

.menu-item-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
}

.menu-item h3{
  font-size: 1.02rem;
  color: #111;
}

.menu-item .muted{
  color:#555;
}

.price{
  font-weight: 800;
  color:#111;
}

/* ---------- Menu UI (Tabs + 2-column grid) ---------- */
.menu-root{
  margin-top: 1.4rem;
  text-align: left; /* även om rubriken är centrerad */
}

/* Tabs */
.menu-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-top: 1.2rem;
}

.menu-tab{
  border: 1px solid #e6e6e6;
  background: #fff;
  color: #111;
  border-radius: 999px;
  padding: .55rem .85rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, border-color .2s ease, background .2s ease;
}

.menu-tab:hover{
  transform: translateY(-1px);
  border-color: #d7d7d7;
  background: #fafafa;
}

.menu-tab.active{
  border-color: rgba(31,122,58,.45);
  background: rgba(31,122,58,.08);
}

.tab-ico{
  font-size: 1rem;
  line-height: 1;
}

.tab-text{
  font-size: .95rem;
}

/* Category title */
.menu-category-head{
  display: flex;
  justify-content: center;
  margin: 1.2rem 0 1rem;
}

.menu-category-title{
  font-size: 1.15rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #111;
}

/* 2-column grid (two “boxes”) */
.menu-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 900px){
  .menu-grid{ grid-template-columns: 1fr; }
}

/* Individual dish card */
.menu-card{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  padding: 1rem 1.05rem;
}

.menu-card-top{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.menu-card-title{
  font-size: 1.02rem;
  color: #111;
}

.menu-card-price{
  font-weight: 900;
  color: #111;
  white-space: nowrap;
  font-size: .95rem;
}

.menu-card-desc{
  margin-top: .35rem;
  color: #555;
  font-size: .95rem;
}

/* Tags in light mode */
.menu-tags{
  margin-top: .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.menu-tag{
  font-size: .78rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid #e3e3e3;
  background: #f7f7f7;
  color: #444;
}

/* Fix CTA button in light menu */
.menu-cta{
  margin-top: 1.4rem;
  display: flex;
  justify-content: center;
}

/* Menu typography */
.menu-section h2,
.menu-category-title,
.menu-card-title,
.menu-card-price{
  font-family: "Playfair Display", serif;
}

.menu-card-desc{
  font-family: "Playfair Display", serif;
  font-weight: 400;
}

.hero-hours{
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  letter-spacing: .02em;
  margin: 0;
}

.contact-map a{
  display: inline-block;
  margin-top: .5rem;
  color: #111;
  border-bottom: 1px solid #ddd;
}
.contact-map a:hover{
  border-bottom-color: #999;
}

.menu-tag.is-popular{
  border-color: rgba(177,18,38,.35);
  background: rgba(177,18,38,.08);
  color: #7a0f1c;
  font-weight: 800;
}

.menu-note{
  margin-top: 1.2rem;
  text-align: center;
  color: #666;
  font-size: .9rem;
}

.menu-card-right{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Populär-tag i titel */
.menu-card-title{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.menu-card-title .title-tag{
  font-size: .72rem;
  padding: .12rem .45rem;
}

/* Öppet idag – ovanför loggan */
.hero-hours-top{
  position: absolute;
  top: 1rem;                 /* justera vid behov */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;

  color: rgba(255,255,255,.85);
  font-size: .95rem;
  letter-spacing: .02em;
}

.menu-category-note{
  font-size: .8rem;
  font-weight: 500;
  margin-left: .4rem;
  color: #555;
  text-transform: none;
  letter-spacing: normal;
}