/* Future Innovation Academy - stil.css */
@font-face{font-family:'Cormorant';src:url('typsnitt/cormorant-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant';src:url('typsnitt/cormorant-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'InterF';src:url('typsnitt/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'InterF';src:url('typsnitt/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Caveat';src:url('typsnitt/caveat-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Playfair';src:url('typsnitt/playfair-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --green:#1C5A33; --green-dark:#123D22; --gold:#C2982B; --gold-deep:#A27C1E;
  --ink:#22312a; --muted:#5a6b5c; --cream:#F6F3EA; --line:#e7e0cf;
  --menu-h:93px; --foot-h:44px;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0; overflow-x:hidden}
body{font-family:'InterF',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.7; min-height:100dvh;
  display:flex; flex-direction:column; padding-top:var(--menu-h);}
h1,h2{font-family:'Cormorant',Georgia,"Times New Roman",serif; color:var(--green); font-weight:600; letter-spacing:.2px; line-height:1.15;}
a{color:var(--green)}

/* fixed background (desktop), starts BELOW the menu */
.bg-fast{position:fixed; top:var(--menu-h); left:0; right:0; bottom:0; z-index:-1;
  background:url('bilder/bakgrund.jpg') center top / cover no-repeat;}
.bg-mobil{display:none}

/* slim fixed header */
header{position:fixed; top:0; left:0; right:0; height:var(--menu-h); z-index:50;
  background:#fff; border-top:3px solid var(--gold); box-shadow:0 1px 8px rgba(18,61,34,.12);
  display:flex; align-items:center; gap:clamp(14px,2vw,24px); padding:0 clamp(14px,3vw,28px);}
.brand{display:flex; align-items:center}
.brand img{height:80px; width:auto; display:block}
/* packed nav to the right of the logo – buttons wrap naturally, thin gold line between each */
nav#huvudmeny{display:flex; flex-wrap:wrap; align-content:center; align-items:center;
  row-gap:6px; column-gap:0; max-width:760px}
nav#huvudmeny a{font-size:13px; font-weight:500; color:var(--green-dark); text-decoration:none;
  white-space:nowrap; padding:3px 14px; border-right:1px solid var(--gold); line-height:1.5;}
nav#huvudmeny a:last-child{border-right:none}
nav#huvudmeny a:hover,nav#huvudmeny a.active{color:var(--green)}
.rightbar{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.lang{display:flex; gap:3px}
.lang button{font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.5px; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:3px 8px; cursor:pointer;}
.lang button:hover{color:var(--green); border-color:var(--green)}
.lang button.active{color:#fff; background:var(--green); border-color:var(--green)}
.btn-member{display:inline-block; text-decoration:none; font-weight:500; font-size:12.5px; white-space:nowrap;
  color:#fff; background:var(--gold); border:1.5px solid var(--gold); border-radius:999px; padding:6px 15px; cursor:pointer;}
.btn-member:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:#fff}
.btn-member.big{font-size:15px; padding:11px 26px; margin-top:18px}
.menu-toggle{display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:8px}
.menu-toggle span{width:24px; height:2px; background:var(--green-dark); display:block}

/* ---- front page hero ---- */
main.home{position:relative; flex:1 0 auto;
  min-height:calc(100dvh - var(--menu-h) - var(--foot-h));
  background:url('bilder/bakgrund.jpg') center top / cover no-repeat;}
.hero-welcome{position:absolute; top:clamp(16px,3vh,24px); left:clamp(14px,3vw,28px);
  display:inline-block; background:rgba(246,243,234,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border-top:3px solid rgba(194,152,43,.9); border-radius:14px;
  padding:clamp(10px,1.6vw,14px) clamp(16px,2.4vw,22px);}
.hero-welcome .welcome{margin:0; font-family:'Playfair',Georgia,serif; font-weight:700; line-height:1.14;
  font-size:clamp(1.6rem,3.6vw,2.6rem);}
.hero-welcome .welcome .ln{display:table; -webkit-background-clip:text; background-clip:text; color:transparent;
  background-image:linear-gradient(90deg,#123D22 0%,#C2982B 100%);}

/* ---- inner pages ---- */
main{flex:1 0 auto; display:flex; flex-direction:column; align-items:center;
  min-height:calc(100dvh - var(--menu-h) - var(--foot-h));
  padding:clamp(26px,4vw,52px) clamp(16px,4vw,40px) clamp(40px,7vh,84px);}
.wrap{width:100%; max-width:760px}
/* translucent cards – background shines through, text stays readable */
.card{background:rgba(255,255,255,.70); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5); border-radius:22px;
  padding:clamp(26px,4vw,44px); box-shadow:0 8px 30px rgba(18,61,34,.22);}
.card.topline{border-top:4px solid var(--gold)}
.card h1{font-size:clamp(1.8rem,4vw,2.5rem); margin:0 0 .5rem; color:var(--green-dark)}
.card h2{font-size:clamp(1.3rem,3vw,1.7rem); margin:1.4rem 0 .4rem; color:var(--green-dark)}
.card p{margin:0 0 1rem; font-size:1.02rem; color:#1f2d24}
.card p:last-child{margin-bottom:0}
ul.purpose{margin:.2rem 0 1rem; padding-left:1.1rem}
ul.purpose li{margin:.3rem 0; color:#1f2d24}
ul.purpose li::marker{color:var(--gold-deep)}
dl.details{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem; margin:1.3rem 0 0;
  border-top:1px solid rgba(18,61,34,.18); padding-top:1.2rem; font-size:.98rem}
dl.details dt{color:var(--green-dark); font-weight:500}
dl.details dd{margin:0; color:#1f2d24}

/* form */
#medlem-form{display:flex; flex-direction:column; gap:14px; margin-top:8px}
#medlem-form[hidden]{display:none}
.tier{font-size:1.05rem}
.tier b{color:var(--gold-deep)}
#medlem-form label{display:block; font-size:.95rem; color:var(--green-dark)}
#medlem-form label em{color:var(--muted); font-style:normal; font-size:.85em}
#medlem-form input[type=text],#medlem-form input[type=email]{
  width:100%; margin-top:6px; font-family:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:11px 13px;}
#medlem-form input:focus{outline:2px solid var(--gold); border-color:var(--gold)}
.hint{color:var(--muted); font-size:.9rem; margin:0}
fieldset.sig{border:1px solid rgba(18,61,34,.2); border-radius:12px; padding:14px; margin:4px 0}
fieldset.sig legend{color:var(--green-dark); font-weight:500; padding:0 6px}
.sig-tabs{display:flex; gap:6px; margin-bottom:8px}
.sig-tabs button{font-family:inherit; font-size:13px; border:1px solid var(--line); background:#fff;
  border-radius:999px; padding:5px 14px; cursor:pointer; color:var(--muted)}
.sig-tabs button.active{background:var(--green); color:#fff; border-color:var(--green)}
#sig-canvas{width:100%; max-width:600px; height:180px; border:1px dashed var(--line); border-radius:10px;
  background:#fff; touch-action:none; display:block}
#sig-type{font-family:'Caveat',cursive; font-size:2.2rem; color:var(--ink); border:1px dashed var(--line);
  border-radius:10px; padding:10px 14px; background:#fff}
.sig-clear{align-self:flex-start; margin-top:8px; font-family:inherit; font-size:13px; background:none;
  border:0; color:var(--muted); cursor:pointer; text-decoration:underline}
.form-error{color:#9e2b2b; background:#fbeceb; border:1px solid #e9c6c3; border-radius:10px;
  padding:10px 13px; margin:0; font-size:.95rem}
.cf-turnstile{margin:4px 0}
#tack{text-align:center}
#tack h2{font-size:1.8rem}
.mnr{font-size:1.1rem}
.mnr b{color:var(--gold-deep); font-size:1.3rem}

/* slim footer – one row, dark green */
footer{flex-shrink:0; height:var(--foot-h); background:var(--green-dark); color:#dfe8dd;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 clamp(14px,3vw,26px); font-size:12.5px;}
footer .fname{color:#fff; font-family:'Cormorant',serif; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
footer .legal{white-space:nowrap}
footer .legal a{color:#c7d4c4; text-decoration:none}
footer .legal a:hover{color:#fff; text-decoration:underline}
footer .legal .sep{color:#53705a; margin:0 8px}

/* ---- mobile ---- */
@media (max-width:860px){
  .bg-fast{display:none}
  .bg-mobil{display:block; width:100%; max-width:100%; height:auto; margin:0}
  main{min-height:0; padding-top:18px}
  main.home{min-height:calc(100dvh - var(--menu-h) - var(--foot-h));
    background:url('bilder/bakgrund-mobil.jpg') center top / cover no-repeat;}
  header{height:var(--menu-h); row-gap:8px; flex-wrap:wrap; align-content:center}
  .menu-toggle{display:flex; order:1; margin-left:auto}
  .brand img{height:66px}
  .hero-welcome{max-width:calc(100vw - 28px)}
  .rightbar{display:none; order:3; width:100%; flex-direction:row; align-items:center;
    justify-content:flex-start; gap:12px; flex-wrap:wrap; margin-left:0}
  nav#huvudmeny{display:none; order:4; width:100%; max-width:none; flex-direction:column; row-gap:0; margin:6px 0 2px}
  header.menu-open{height:auto; padding-bottom:10px; align-items:flex-start}
  header.menu-open .brand{padding-top:4px}
  header.menu-open .rightbar{display:flex}
  header.menu-open nav#huvudmeny{display:flex}
  nav#huvudmeny a{padding:10px 2px; border-right:0; border-bottom:1px solid var(--line)}
  nav#huvudmeny a:last-child{border-bottom:0}
  footer{height:auto; min-height:var(--foot-h); flex-wrap:wrap; justify-content:center; gap:2px 10px; padding:8px 14px; text-align:center}
  footer .fname{white-space:normal}
}