/* =========================================================
   Péter Balikó — folha de estilo partilhada
   (base + menu lateral, usada por todas as páginas)
   ========================================================= */

:root{
  --bg-main: #EAE3D3;
  --bg-sidebar: #DCD0B4;
  --wood: #6B4A32;
  --wood-dark: #4A3220;
  --ink: #2E2A22;
  --ink-soft: #57503F;
  --accent-sun: #C77B3E;
  --hairline: rgba(46,42,34,0.15);
  --card-bg: #F2ECDE;
  --green: #6E9A6E;
  --red: #B65C4A;
  --neutral: #A69A7E;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg-main);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.65;
}
h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:400; color: var(--wood-dark); }
a{ color: inherit; }
button{ font-family: inherit; }

/* ---------- layout + sidebar ---------- */
.layout{ display:flex; min-height:100vh; }

.sidebar{
  width:260px; flex-shrink:0; background: var(--bg-sidebar);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px 32px; position:sticky; top:0; height:100vh;
  border-right:1px solid var(--hairline); z-index: 20;
}
.brand{ font-family:'Fraunces', serif; font-size:1.15rem; font-weight:500; color:var(--wood-dark); margin-bottom:56px; text-decoration:none; display:block; }
.nav{ display:flex; flex-direction:column; gap:22px; }
.nav a{ text-decoration:none; color:var(--ink-soft); font-size:0.98rem; position:relative; width:fit-content; transition: color .2s ease; }
.nav a:hover{ color: var(--wood-dark); }
.nav a.active{ color: var(--wood-dark); font-weight:500; }
.nav a.active::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background: var(--accent-sun); }

.nav-item-sub{ display:flex; flex-direction:column; gap:12px; }
.nav-item-sub a.sub{ font-size:0.85rem; padding-left:16px; color: var(--ink-soft); opacity:.85; }
.nav-item-sub a.sub::before{ content:"→ "; opacity:0.6; }
.nav-item-sub a.sub.active{ color: var(--wood-dark); font-weight:500; opacity:1; }

.sidebar-bottom{ display:flex; flex-direction:column; gap:18px; }
.socials{ display:none; }
.lang-select{ display:flex; gap:9px; }
.lang-select .flag{ cursor:pointer; background:none; border:none; padding:0; line-height:0; border-radius:2px; overflow:hidden; opacity:0.5; filter:grayscale(60%); transition: opacity .2s ease, filter .2s ease; }
.lang-select .flag:hover{ opacity:0.8; }
.lang-select .flag.active{ opacity:1; filter:grayscale(0%); box-shadow: 0 0 0 2px var(--accent-sun); }
.flag-svg{ width:22px; height:15px; display:block; border-radius:2px; }

/* ---------- shared page chrome ---------- */
.main{ flex:1; min-width:0; }
.eyebrow{ font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-sun); margin-bottom:14px; }

/* ---------- fixed contact button (all pages except Início) ---------- */
.contact-fab{
  position: fixed; right: 36px; bottom: 36px; z-index: 50;
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(120deg, var(--wood-dark), var(--wood));
  color:#F2ECDE; border:none; border-radius: 999px;
  padding: 14px 22px 14px 18px; font-size:0.92rem; font-weight:500;
  box-shadow: 0 10px 28px rgba(74,50,32,0.32); cursor:pointer;
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-fab:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(74,50,32,0.4); }
.contact-fab svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- contact modal ---------- */
.contact-modal-backdrop{
  position:fixed; inset:0; background: rgba(46,42,34,0.55);
  display:none; align-items:center; justify-content:center; z-index:100; padding:24px;
}
.contact-modal-backdrop.open{ display:flex; }
.contact-modal{
  background: var(--card-bg); border-radius:8px; padding:40px 40px 32px;
  max-width: 460px; width:100%; box-shadow: 0 30px 70px rgba(0,0,0,0.35);
  position:relative;
}
.contact-modal h2{ font-size:1.5rem; margin:0 0 8px; }
.contact-modal p.sub{ color:var(--ink-soft); font-size:0.9rem; margin:0 0 24px; }
.contact-modal .close-btn{
  position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--hairline); background:transparent; color:var(--ink-soft);
  cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center;
}
.contact-modal form{ display:flex; flex-direction:column; gap:14px; }
.contact-modal label{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:4px; display:block; }
.contact-modal input, .contact-modal textarea{
  width:100%; padding:11px 13px; border-radius:5px; border:1px solid var(--hairline);
  background:#fff; font-family:'Inter',sans-serif; font-size:0.92rem; color:var(--ink);
}
.contact-modal textarea{ resize:vertical; min-height:100px; }
.contact-modal button[type="submit"]{
  margin-top:6px; background: linear-gradient(120deg, var(--wood-dark), var(--wood));
  color:#F2ECDE; border:none; border-radius:6px; padding:13px 20px; font-size:0.95rem;
  font-weight:500; cursor:pointer;
}
.contact-modal .form-note{ font-size:0.78rem; color:var(--ink-soft); margin-top:10px; }

@media (max-width: 860px){
  .layout{ flex-direction:column; }
  .sidebar{ position:relative; height:auto; flex-direction:row; flex-wrap:wrap; width:100%; padding: 24px 20px; }
  .sidebar-bottom{ flex-direction: row; align-items:center; gap: 24px; margin-left:auto; }
  .nav{ flex-direction:row; flex-wrap:wrap; gap:16px; }
  .brand{ margin-bottom:0; margin-right:24px; }
  .contact-fab{ right:20px; bottom:20px; padding:12px 18px 12px 14px; }
}