@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/cormorant-var.woff2") format("woff2");}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/ebgaramond-var.woff2") format("woff2");}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;src:url("fonts/ebgaramond-italic-var.woff2") format("woff2");}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/jost-var.woff2") format("woff2");}


/* ============================================================
   Kungsladugårds Egnahemsförening
   Ett papper, en spalt, en accent. Luft före allt. Inga ramar.

   Läsbarhet är satt före allt annat i den här versionen:
   stor text, hög kontrast (kontrollerad mot WCAG 2.2),
   stora klickytor och tydlig fokusmarkering.
   ============================================================ */

:root{
  --paper:#F3ECD9;              /* Pappersgult */
  --ink:#23201A;                /* Bläck — 13.8:1 mot papper (AAA) */
  --ockra:#D29B3C;              /* Accent. Endast dekor — aldrig text. */
  --ink-soft:#514D44;           /* Sekundär text — 7.1:1 mot papper (AAA) */
  --hairline:rgba(35,32,26,.20);
  --focus:#23201A;

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --grotesk:"Jost","Helvetica Neue",Arial,sans-serif;
  --wrap:760px;
  --tap:48px;                   /* minsta klickyta */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:20px;line-height:1.75;font-weight:400;
}
img,video{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- rubriker ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0}
h1{font-size:clamp(34px,6vw,46px);margin:0 0 14px}
/* Förstasidans mening sätts som löpande text, inte som rubrik.
   Samma storlek och snitt som ingressen på övriga sidor. */
h1.som-text{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.65;
  margin:0 0 20px}
h2{font-size:clamp(27px,4vw,32px);margin:44px 0 12px}
h3{font-size:23px;margin:32px 0 8px}
p{margin:0 0 20px}
p.lead{font-size:23px;line-height:1.65}
strong{font-weight:600}

/* ---------- länkar ---------- */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ockra);
  text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible{outline:3px solid var(--focus);outline-offset:3px;
  background:rgba(210,155,60,.22);text-decoration:none}

/* ---------- etiketter (grotesk, bara korta ord) ---------- */
.eyebrow{font-family:var(--grotesk);font-size:14px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}

/* ---------- hjälpklasser ---------- */
.skip{position:absolute;left:16px;top:-80px;z-index:200;background:var(--ink);
  color:var(--paper);padding:14px 20px;font-family:var(--grotesk);font-size:17px;
  text-decoration:none;border-radius:3px}
.skip:focus{top:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- topprad + en (1) popup-meny ---------- */
.topbar{position:relative;z-index:100}
.topbar .inner{max-width:var(--wrap);margin:0 auto;padding:12px 24px;
  display:flex;justify-content:flex-end}
details.meny{position:relative}
details.meny>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6em;
  min-height:var(--tap);padding:10px 16px;
  font-family:var(--grotesk);font-size:17px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);
  border:2px solid var(--ink);border-radius:3px;background:transparent}
details.meny>summary::-webkit-details-marker{display:none}
details.meny>summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.meny-ikon{display:inline-block;width:20px;height:2px;background:currentColor;
  position:relative}
.meny-ikon::before,.meny-ikon::after{content:"";position:absolute;left:0;width:20px;
  height:2px;background:currentColor}
.meny-ikon::before{top:-7px}.meny-ikon::after{top:7px}
details.meny[open] .meny-ikon{background:transparent}
details.meny[open] .meny-ikon::before{top:0;transform:rotate(45deg)}
details.meny[open] .meny-ikon::after{top:0;transform:rotate(-45deg)}
.meny-panel{position:absolute;right:0;top:calc(100% + 10px);
  min-width:290px;max-width:calc(100vw - 32px);background:var(--paper);
  border:2px solid var(--ink);border-radius:3px;
  box-shadow:0 16px 40px rgba(35,32,26,.20);padding:8px 0}
.meny-panel ul{list-style:none;margin:0;padding:0}
.meny-panel a{display:block;text-decoration:none;color:var(--ink);
  font-family:var(--grotesk);font-size:18px;line-height:1.35;
  padding:15px 24px;min-height:var(--tap)}
.meny-panel a:hover{background:rgba(210,155,60,.22)}
.meny-panel a[aria-current="page"]{font-weight:600;
  box-shadow:inset 4px 0 0 var(--ockra)}
.meny-panel a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;
  background:rgba(210,155,60,.22)}

/* ---------- masthead ---------- */
.masthead{text-align:center;padding:30px 24px 46px}
.masthead.stor{padding:44px 24px 52px}
.brand{display:block;text-decoration:none;color:var(--ink)}
.brand:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.brand .emblem{display:block;margin:0 auto 18px;width:clamp(92px,14vw,120px);
  height:auto;color:var(--ink)}
.masthead.stor .brand .emblem{width:clamp(128px,20vw,170px);margin-bottom:24px}
.brand .wordmark{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(30px,6vw,40px);line-height:1.08}
.founded{font-family:var(--grotesk);font-size:15px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-soft);margin:16px 0 0}

/* ---------- sektioner ---------- */
main section{padding:44px 0}
main section:first-of-type{padding-top:6px}
main section + section{border-top:1px solid var(--hairline)}

/* ---------- hjälte / hälsning ---------- */
figure.foto{margin:30px 0 0}
figure.foto figcaption{font-family:var(--serif);font-style:italic;font-size:18px;
  line-height:1.55;color:var(--ink-soft);margin-top:14px}
.signatur{margin-top:26px}
.signatur .namn{font-family:var(--display);font-size:26px;font-weight:600;
  display:block;line-height:1.2}
.signatur .roll{font-family:var(--grotesk);font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:5px}

/* ---------- listor ---------- */
ul.prosa,ol.prosa{margin:0 0 22px;padding-left:26px}
ul.prosa li,ol.prosa li{margin:0 0 12px}

/* ---------- faktarad ---------- */
dl.fakta{margin:26px 0}
dl.fakta>div{padding:14px 0;border-bottom:1px solid var(--hairline)}
dl.fakta dt{font-family:var(--grotesk);font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
dl.fakta dd{margin:0}
@media (min-width:600px){
  dl.fakta>div{display:flex;gap:24px}
  dl.fakta dt{flex:0 0 11rem;margin:0;padding-top:.3rem}
  dl.fakta dd{flex:1}
}

/* ---------- knappar ---------- */
.knapp{display:inline-block;font-family:var(--grotesk);font-size:18px;font-weight:500;
  letter-spacing:.06em;min-height:var(--tap);padding:14px 26px;border-radius:3px;
  border:2px solid var(--ink);color:var(--ink);background:transparent;
  text-decoration:none;cursor:pointer;line-height:1.3}
.knapp:hover{background:rgba(210,155,60,.22)}
.knapp:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.knapp.stark{background:var(--ockra);border-color:var(--ockra)}
.knapp.stark:hover{filter:brightness(.94)}

/* ---------- redaktionell anteckning ---------- */
.att-fylla{border-left:4px solid var(--ockra);padding:4px 0 4px 20px;margin:24px 0}
.att-fylla .etikett{font-family:var(--grotesk);font-size:14px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:block;
  margin-bottom:6px}
.att-fylla p{color:var(--ink-soft);font-style:italic;margin:0 0 8px}
.att-fylla p:last-child{margin-bottom:0}

/* ============================================================
   FORMULÄR — stort, tydligt, lätt att träffa
   ============================================================ */
form.bidra{margin-top:8px}
.falt{margin:0 0 30px}
.falt label{display:block;font-family:var(--grotesk);font-size:18px;font-weight:500;
  margin-bottom:8px;color:var(--ink)}
.falt .hjalp{display:block;font-size:18px;line-height:1.55;color:var(--ink-soft);
  margin-bottom:10px}
.falt input[type=text],.falt input[type=email],.falt textarea,.falt input[type=file]{
  width:100%;font-family:var(--serif);font-size:20px;line-height:1.5;
  color:var(--ink);background:#FBF7EC;
  border:2px solid var(--ink);border-radius:3px;padding:14px 16px;min-height:var(--tap)}
.falt textarea{min-height:220px;resize:vertical}
.falt input[type=file]{background:transparent;padding:12px;font-family:var(--grotesk);
  font-size:17px}
.falt input:focus-visible,.falt textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px}
.falt .kravmarke{color:var(--ink-soft);font-weight:400}

.samtycke{display:flex;gap:16px;align-items:flex-start;margin:0 0 30px}
.samtycke input[type=checkbox]{
  width:30px;height:30px;min-width:30px;margin:4px 0 0;accent-color:#23201A;cursor:pointer}
.samtycke input[type=checkbox]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.samtycke label{font-size:19px;line-height:1.6;cursor:pointer}

/* honungsfälla mot skräppost — dold för människor, inte för robotar */
.honung{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.formfel{border-left:4px solid var(--ink);padding:4px 0 4px 20px;margin:0 0 30px}
.formfel h2{margin:0 0 8px;font-size:23px}
.formfel ul{margin:0;padding-left:24px}

/* ---------- filrader som växer ---------- */
#filfalt input[type="file"]{margin-bottom:10px}
#filfalt input[type="file"]:last-child{margin-bottom:0}

/* ---------- uppladdning: hur långt det gått ---------- */
.uppladdning{margin:0 0 26px}
.uppladdning-rubrik{font-family:var(--grotesk);font-size:16px;color:var(--ink);
  margin:0 0 12px}
.uppladdning-rad{display:flex;align-items:center;gap:14px;margin:0 0 12px;
  font-family:var(--grotesk);font-size:16px}
.uppladdning-namn{flex:0 1 40%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink)}
.uppladdning-stapel{flex:1 1 auto;height:14px;background:rgba(35,32,26,.14);
  border-radius:2px;overflow:hidden}
.uppladdning-fyllnad{display:block;height:100%;width:0;background:var(--ockra);
  transition:width .25s ease}
.uppladdning-tal{flex:0 0 5.5rem;text-align:right;color:var(--ink-soft)}
@media (max-width:560px){
  .uppladdning-rad{flex-wrap:wrap}
  .uppladdning-namn{flex:1 1 100%}
}

/* ---------- frisen (en enda, ovanför sidfoten) ---------- */
.fris{display:block;width:100%;height:34px}

/* ---------- sidfot ---------- */
.sidfot{text-align:center;padding:44px 0 70px}
.sidfot .kolofon{font-family:var(--grotesk);font-size:17px;line-height:1.7;
  color:var(--ink);margin:0}

/* ---------- inställningar hos användaren respekteras ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;
    scroll-behavior:auto!important}
}
@media (prefers-contrast:more){
  :root{--ink-soft:#23201A;--hairline:rgba(35,32,26,.5)}
}

/* ---------- små skärmar ---------- */
@media (max-width:560px){
  body{font-size:19px}
  .wrap{padding:0 20px}
  main section{padding:36px 0}
  h2{margin-top:36px}
  .meny-panel{min-width:260px}
}

/* ---------- utskrift ---------- */
@media print{
  .topbar,.fris,.skip{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  a{text-decoration:underline}
}