/* =========================================================
   FLOW HAPPENS — BASE STYLES
   Shared across every page: variables, reset, typography,
   buttons, navigation (incl. mobile menu) and footer.
   ========================================================= */

:root{
  --ink:#2E2B27;
  --cream:#FAF6EF;
  --petrol:#1F4A4E;
  --terracotta:#C68563;
  --graytext:#8A8177;
  --line:rgba(46,43,39,0.12);

  /* Shared breakpoint reference (used in comments, actual values are hardcoded in media queries) */
  --bp-nav:820px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Familjen Grotesk',sans-serif;
  margin:0;
  letter-spacing:-0.01em;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

.container{ max-width:1080px; margin:0 auto; padding:0 28px; }
section{ padding:96px 0; }
@media (max-width:640px){ section{ padding:64px 0; } }

/* -------------------- BUTTONS -------------------- */
.btn{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:14px;
  padding:12px 24px;
  border-radius:30px;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.btn-primary{ background:var(--terracotta); color:var(--ink); }
.btn-primary:hover{ opacity:0.9; }
.btn-ghost{ background:transparent; border:1.5px solid currentColor; color:inherit; }
.btn-outline{ background:transparent; border:1.5px solid var(--ink); color:var(--ink); }

/* -------------------- FH MARK (reused everywhere) -------------------- */
.fh-mark{ position:relative; flex-shrink:0; }
.fh-mark span{ position:absolute; font-weight:700; line-height:1; font-family:'Familjen Grotesk',sans-serif; }

/* -------------------- NAV -------------------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,239,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.navrow{
  max-width:1080px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.navlogo{
  display:flex; align-items:center; gap:10px;
  font-family:'Familjen Grotesk',sans-serif; font-weight:700; font-size:19px;
  text-decoration:none; color:var(--ink);
}
.navmark{ width:34px; height:34px; border-radius:8px; background:var(--petrol); }
.navmark span:first-child{ font-size:21px; top:2px; left:3px; color:var(--terracotta); transform:rotate(-4deg); }
.navmark span:last-child{ font-size:24px; top:4px; left:11px; color:var(--cream); transform:rotate(3deg); }

/* Desktop links (visible >= 820px) */
.navlinks{ display:flex; align-items:center; gap:28px; font-size:14px; font-weight:500; }
.navlinks a{ text-decoration:none; opacity:0.8; }
.navlinks a:hover{ opacity:1; }
.navcta{ display:none; }

/* Hamburger button (visible < 820px) */
.navtoggle{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; background:none; border:none; cursor:pointer;
  padding:0;
}
.navtoggle span{
  display:block; width:22px; height:2px; background:var(--ink);
  position:relative; transition:transform 0.2s ease, opacity 0.2s ease;
}
.navtoggle span::before, .navtoggle span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink);
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.navtoggle span::before{ top:-7px; }
.navtoggle span::after{ top:7px; }
.navtoggle[aria-expanded="true"] span{ background:transparent; }
.navtoggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

/* Mobile dropdown panel */
.navmobile{
  display:none;
  flex-direction:column;
  gap:4px;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  padding:8px 28px 24px;
}
.navmobile.open{ display:flex; }
.navmobile a{
  text-decoration:none; color:var(--ink); font-size:16px; font-weight:500;
  padding:14px 4px; border-bottom:1px solid var(--line);
}
.navmobile a:last-of-type{ border-bottom:none; }
.navmobile .btn{ margin-top:14px; text-align:center; }

@media (min-width:820px){
  .navcta{ display:inline-block; }
  .navtoggle{ display:none; }
  .navmobile{ display:none !important; } /* desktop never shows the mobile panel */
}
@media (max-width:819px){
  .navlinks{ display:none; }
}

/* -------------------- LANGUAGE SWITCH -------------------- */
.langswitch{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.langswitch button{
  background:none; border:none; cursor:pointer; padding:4px 2px;
  color:var(--graytext); font-family:'Inter',sans-serif; font-weight:600; font-size:13px;
}
.langswitch button.active{ color:var(--ink); }
.langswitch .sep{ color:var(--line); font-weight:400; }

.navmobile .langswitch{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:15px; }
.navmobile .langswitch button{ font-size:15px; }

/* -------------------- SHARED ANNOTATION (design-review notes only, remove before launch) -------------------- */
.annot{
  background:#fff8ef; border:1px dashed #d8c39c; border-radius:12px;
  padding:14px 18px; font-size:12.5px; color:#7a6a45;
  margin:16px auto 0; max-width:640px; text-align:center;
}

/* -------------------- FOOTER -------------------- */
footer{
  background:var(--ink); color:rgba(250,246,239,0.6);
  padding:40px 28px; text-align:center; font-size:13px;
}
.footer-mark{
  width:40px; height:40px; border-radius:9px;
  border:2px solid rgba(250,246,239,0.5);
  margin:0 auto 16px;
}
.footer-mark span:first-child{ font-size:26px; top:3px; left:3px; color:var(--terracotta); transform:rotate(-4deg); }
.footer-mark span:last-child{ font-size:29px; top:5px; left:10px; color:var(--cream); transform:rotate(3deg); }

.footer-social{ display:flex; justify-content:center; gap:18px; margin-top:18px; }
.footer-social a{ color:rgba(250,246,239,0.6); display:inline-flex; }
.footer-social a:hover{ color:var(--cream); }