/* =========================================================
   Al Quadrifoglio B&B - foglio di stile comune (IT / EN / DE)
   Stile volutamente semplice, "fatto in casa", responsive.
   ========================================================= */

:root{
  --green:#2f7d34;
  --green-dark:#1f5c24;
  --brown:#7a4a23;
  --cream:#fdf6e3;
  --paper:#fffdf7;
  --text:#262220;
  --link:#0645ad;
  --cta:#e08e1f;
  --cta-dark:#a8650a;
  --row:#f3ecd2;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6;
}

h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--green-dark);
  margin:0 0 .5em;
}
h1{font-size:2rem;}
h2{font-size:1.5rem; border-bottom:2px dashed var(--brown); padding-bottom:.25em;}
h3{font-size:1.1rem; color:var(--brown);}

p{margin:0 0 1em;}
a{color:var(--link);}
img{max-width:100%; height:auto;}

.wrap{
  max-width:940px;
  margin:0 auto;
  background:var(--paper);
  border-left:4px solid var(--green);
  border-right:4px solid var(--green);
  box-shadow:0 0 0 1px rgba(0,0,0,.05);
}

/* ----- top sticky bar ----- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--green); color:#fff;
  border-bottom:4px solid var(--green-dark);
  display:flex; align-items:center; gap:12px;
  padding:8px 16px; flex-wrap:wrap;
}
.topbar .brand{display:flex; align-items:center; gap:8px; font-weight:bold; font-size:1.05rem; color:#fff; text-decoration:none;}
.topbar .brand img{width:26px; height:26px;}
.topbar .spacer{flex:1;}
.langbar{display:flex; align-items:center; gap:6px; font-size:.85rem;}
.langbar img{width:18px; height:12px; border:1px solid #fff; vertical-align:middle;}
.langbar a, .langbar span{color:#fff; text-decoration:none;}
.langbar a:hover{text-decoration:underline;}
.langbar .current{font-weight:bold; text-decoration:underline;}

/* ----- hero band ----- */
.hero{
  background:#eef4e3;
  border-bottom:3px solid var(--brown);
  padding:28px 24px;
  text-align:center;
}
.hero .tagline{font-style:italic; color:var(--brown); margin-bottom:.6em;}
.hero address{
  font-style:normal; font-size:.92rem; color:var(--text); margin-bottom:1em;
}
.hero address a{color:var(--link);}

/* ----- CTA button ----- */
.btn-book{
  display:inline-block;
  background:var(--cta);
  border:3px solid var(--cta-dark);
  color:#3a2400;
  font-weight:bold;
  padding:12px 26px;
  box-shadow:4px 4px 0 var(--cta-dark);
  text-decoration:none;
  font-size:1.05rem;
}
.btn-book:hover{background:var(--cta-dark); color:#fff;}
.btn-book.small{padding:6px 14px; font-size:.85rem; box-shadow:2px 2px 0 var(--cta-dark);}

/* ----- tab-style nav ----- */
nav.tabs{
  background:#eee6c8;
  border-bottom:2px dashed var(--brown);
  padding:8px 16px;
  text-align:center;
  font-size:.92rem;
}
nav.tabs a{margin:0 8px; text-decoration:underline; white-space:nowrap;}

/* ----- sections ----- */
main section{padding:26px 28px;}
main section + section{border-top:2px dashed #cdbf8c;}

.center{text-align:center;}

/* ----- photos ----- */
.photo{
  border:5px solid #fff;
  outline:1px solid #ccc;
  box-shadow:3px 3px 6px rgba(0,0,0,.25);
  max-width:280px;
  margin:0 0 10px;
  display:block;
}
.photo-cap{font-size:.78rem; color:var(--brown); text-align:center; margin-top:-6px;}
.float-left{float:left; margin:0 20px 12px 0;}
.float-right{float:right; margin:0 0 12px 20px;}
.clearfix::after{content:""; display:block; clear:both;}

/* ----- room cards ----- */
.room-grid{display:flex; flex-wrap:wrap; gap:20px; margin-top:10px;}
.room-card{
  flex:1 1 220px;
  background:#fbf3da;
  border:2px solid var(--brown);
  padding:14px;
}
.room-card h3{margin-top:0;}

/* ----- price table ----- */
table.prices{width:100%; border-collapse:collapse; margin:14px 0;}
table.prices th, table.prices td{border:2px solid var(--brown); padding:8px 10px; text-align:left; vertical-align:top;}
table.prices th{background:var(--green); color:#fff; font-size:.85rem;}
table.prices tr:nth-child(even){background:var(--row);}
.price-note{font-size:.85rem; color:var(--brown); font-style:italic;}

/* ----- info list ----- */
ul.info-list{padding-left:6px; list-style:none;}
ul.info-list li{margin-bottom:10px; padding-left:26px; position:relative;}
ul.info-list li::before{content:"\1F340"; position:absolute; left:0; top:0;}

/* ----- map ----- */
.map-frame{border:3px solid var(--brown); width:100%; height:340px;}

/* ----- footer ----- */
footer{
  background:#eee6c8;
  border-top:3px solid var(--green);
  text-align:center;
  padding:16px;
  font-size:.82rem;
}
footer .legal{margin-top:8px; font-weight:bold;}

/* ----- responsive ----- */
@media (max-width:680px){
  .wrap{border-left:0; border-right:0;}
  .float-left, .float-right{float:none; margin:0 auto 14px; max-width:90%;}
  .room-grid{flex-direction:column;}
  .topbar{justify-content:center; text-align:center;}
  .topbar .spacer{display:none;}
  h1{font-size:1.6rem;}
  h2{font-size:1.25rem;}
  main section{padding:20px 16px;}
}