/* Teglgaardsparken – centerparken.dk
   Farverne er taget fra velkomstskiltet: den malede gavl, bladene og
   paradisfuglblomsterne. Ret dem her, så slår de igennem på hele sitet. */

:root {
  --ink:      #23271F;
  --forest:   #383D36;
  --leaf:     #4F6B39;
  --flame:    #C24C15;
  --paper:    #FAF9F5;
  --stone:    #EFEDE4;
  --line:     #DCD9CD;
  --muted:    #666B5F;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

  --bredde: 1080px;
  --tekstbredde: 40rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
}

.indhold {
  width: 100%;
  max-width: var(--bredde);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- typografi ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: normal;
  line-height: 1.25;
  margin: 0;
}

h1 { font-size: 2.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; max-width: var(--tekstbredde); }

a { color: var(--leaf); text-underline-offset: 3px; }
a:hover { color: var(--flame); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--flame);
  outline-offset: 3px;
  border-radius: 2px;
}

.springover {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 10;
}
.springover:focus { left: 0; }

/* ---------- toplinje ---------- */

.top {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.top .indhold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.navn {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.navn .maerke { margin-right: 12px; }

.maerke {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--forest);
  flex: none;
  position: relative;
}
.maerke::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--flame);
}

.top nav { display: flex; }
.top nav a + a { margin-left: 26px; }

.top nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}
.top nav a:hover,
.top nav a[aria-current="page"] { color: var(--ink); }
.top nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--flame); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--forest);
  min-height: 470px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 22, 16, 0.90) 0%, rgba(18, 22, 16, 0.72) 28%, rgba(18, 22, 16, 0.34) 60%, rgba(18, 22, 16, 0.08) 100%);
}

.hero .indhold {
  position: relative;
  z-index: 1;
  padding-top: 90px;
  padding-bottom: 44px;
}

.hero h1 { color: #FBFAF6; max-width: 18ch; text-shadow: 0 1px 12px rgba(10,14,8,0.5); }

.hero p {
  color: #D5DBCB;
  margin: 14px 0 0;
  font-size: 1rem;
  text-shadow: 0 1px 10px rgba(10,14,8,0.6);
}

/* ---------- nøgletal ---------- */

.fakta {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.fakta ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.fakta li {
  padding: 22px 0;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.fakta li:first-child { border-left: 0; padding-left: 0; }

.fakta b {
  display: block;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.4rem;
}

.fakta span { color: var(--muted); font-size: 0.9rem; }

/* ---------- sektioner ---------- */

section { padding: 56px 0; }
section.baand { background: var(--stone); }

.leder {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--forest);
}

.todelt {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.todelt figure { margin: 0; }
.todelt img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.todelt figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }

/* ---------- dokumentliste ---------- */

.dokumenter {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 44rem;
}

.dokumenter li { border-bottom: 1px solid var(--line); }

.dokumenter a {
  display: flex;
  align-items: baseline;
  padding: 16px 4px;
  text-decoration: none;
  color: var(--ink);
}
.dokumenter a:hover { background: rgba(79, 107, 57, 0.06); color: var(--ink); }
.dokumenter a:hover .titel { text-decoration: underline; }

.dokumenter .titel { flex: 1; padding-right: 16px; }
.dokumenter .maerkat + .detalje { margin-left: 12px; }
.dokumenter .detalje { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

.dokumenter .maerkat {
  margin-left: auto;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--flame);
  border: 1px solid var(--flame);
  border-radius: 2px;
  padding: 1px 7px;
  white-space: nowrap;
}

.aarstal {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 40px 0 6px;
  color: var(--forest);
}
.aarstal:first-of-type { margin-top: 0; }

/* ---------- praktisk ---------- */

.praktisk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 32px 40px;
  margin-top: 8px;
}
.praktisk h3 { margin-bottom: 4px; }
.praktisk p { margin: 0; font-size: 0.97rem; color: #3F443B; }

/* ---------- bestyrelse ---------- */

.bestyrelse {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  max-width: 46rem;
}

.bestyrelse li {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 18px 20px;
}
section.baand .bestyrelse li { background: #fff; }

.bestyrelse .rolle { font-family: var(--serif); font-size: 1.1rem; }
.bestyrelse .person { color: var(--muted); font-size: 0.95rem; }

/* ---------- bund ---------- */

footer {
  background: var(--forest);
  color: #C7CFBE;
  padding: 40px 0;
  font-size: 0.92rem;
}
footer .indhold {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
footer .indhold > div { padding-right: 20px; }
footer a { color: #E7E4D8; }
footer a:hover { color: #fff; }
footer p { margin: 0; max-width: none; }

/* ---------- små skærme ---------- */

@media (max-width: 760px) {
  body { font-size: 16px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  section { padding: 40px 0; }
  .hero { min-height: 340px; }
  .hero .indhold { padding-top: 64px; }
  .todelt { grid-template-columns: 1fr; gap: 28px; }
  .fakta ul { grid-template-columns: 1fr; }
  .fakta li { border-left: 0; padding: 14px 0; border-top: 1px solid var(--line); padding-left: 0; }
  .fakta li:first-child { border-top: 0; }
  .dokumenter a { flex-wrap: wrap; gap: 4px 12px; }
  .top .indhold { min-height: 0; }
  .top nav { flex-wrap: wrap; }
  .top nav a + a { margin-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .top nav, .hero::after { display: none; }
  body { background: #fff; font-size: 12pt; }
}

/* ---------- sidehoved på undersider ---------- */

.sidehoved {
  padding: 52px 0 34px;
  border-bottom: 1px solid var(--line);
}
.sidehoved h1 { font-size: 2.4rem; }
.sidehoved .leder { margin-top: 14px; }

/* ---------- genvejskort ---------- */

.kort {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.kort a {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--leaf);
  border-radius: 0;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--ink);
}
.kort a:hover { border-left-color: var(--flame); background: #fff; }
.kort a:hover h3 { text-decoration: underline; }
.kort h3 { margin-bottom: 6px; }
.kort p { margin: 0; font-size: 0.95rem; color: var(--muted); max-width: none; }

/* ---------- oplysninger (definitionsliste) ---------- */

.oplysninger { margin: 18px 0 0; max-width: 42rem; }

.oplysninger > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.oplysninger > div:first-child { border-top: 1px solid var(--line); }

.oplysninger dt { flex: 0 0 15rem; color: var(--muted); font-size: 0.95rem; }
.oplysninger dd { margin: 0; flex: 1; min-width: 12rem; }

/* ---------- punktlister ---------- */

.punkter { max-width: var(--tekstbredde); padding-left: 1.2rem; margin: 0 0 1rem; }
.punkter li { margin-bottom: 5px; }

.fremhaevet {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--forest);
}

.note { font-size: 0.9rem; color: var(--muted); margin-top: 18px; }
.note code { background: rgba(0,0,0,0.05); padding: 1px 5px; font-size: 0.9em; }

/* ---------- billedgalleri ---------- */

.galleri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.galleri img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
  background: var(--stone);
}

/* ---------- bestyrelsen ---------- */

.personer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  max-width: 56rem;
}

.personer li { display: flex; align-items: center; }
.personer img { margin-right: 16px; }

.personer img,
.personer .portraet-tom {
  width: 84px;
  height: 84px;
  object-fit: cover;
  flex: none;
  border-radius: 50%;
  background: var(--stone);
}

/* Cirkel uden foto, så navnene flugter uanset om der er et portræt */
.personer .portraet-tom {
  display: block;
  position: relative;
  margin-right: 16px;
}
.personer .portraet-tom::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: #DCDACE;
}

.person-navn { display: block; font-family: var(--serif); font-size: 1.2rem; }
.personer .rolle { display: block; color: var(--muted); font-size: 0.95rem; }

/* ---------- ledig bolig ---------- */

.bolig .pris {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--forest);
  margin: 28px 0 4px;
}

/* ---------- bund, to spalter ---------- */

footer .indhold > div { min-width: 200px; }
footer b { font-weight: normal; color: #E7E4D8; }

@media (max-width: 760px) {
  .sidehoved { padding: 34px 0 26px; }
  .sidehoved h1 { font-size: 1.9rem; }
  .oplysninger dt { flex: 1 0 100%; }
  .galleri img { height: 170px; }
}

/* ---------- mobilmenu ---------- */

/* Knappen er skjult på brede skærme og vises kun, når JavaScript virker. */
.burger { display: none; }

.burger {
  align-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  min-height: 44px;
}

.burger .streger,
.burger .streger::before,
.burger .streger::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
}

.burger .streger { position: relative; margin-right: 9px; }

.burger .streger::before,
.burger .streger::after {
  content: "";
  position: absolute;
  left: 0;
}
.burger .streger::before { top: -7px; }
.burger .streger::after  { top: 7px; }

/* Den midterste streg toner ud og trækker sig sammen.
   De to ydre glider ind mod midten og drejer til et kryds.
   Lidt forsinkelse på drejningen, så bevægelsen læses som to trin. */
.burger .streger {
  transition: background-color 0.12s ease;
}
.burger .streger::before,
.burger .streger::after {
  transition: top 0.16s ease, transform 0.2s ease 0.1s;
}

/* Midterstregen skjules ved at gøre den gennemsigtig — ikke med opacity,
   for opacity på .streger ville også skjule de to pseudo-elementer inde i den,
   og så forsvinder hele ikonet. */
.burger[aria-expanded="true"] .streger {
  background-color: transparent;
}
.burger[aria-expanded="true"] .streger::before {
  top: 0;
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] .streger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Når menuen lukkes, sker drejningen først og glidningen bagefter. */
.burger[aria-expanded="false"] .streger::before,
.burger[aria-expanded="false"] .streger::after {
  transition: top 0.16s ease 0.1s, transform 0.2s ease;
}

@media (max-width: 760px) {
  .js .burger { display: flex; }

  .top .indhold { flex-wrap: wrap; }
  .top .navn { flex: 1; font-size: 1.1rem; min-width: 0; }
  .top .maerke { width: 28px; height: 28px; }
  .top .maerke::after { inset: 9px; }

  .js .top nav { display: none; }

  .js .top nav.aaben {
    display: block;
    flex-basis: 100%;
    margin-top: 12px;
    border-top: 1px solid var(--line);
  }

  .js .top nav.aaben a {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
    color: var(--ink);
  }
  .js .top nav.aaben a + a { margin-left: 0; }
  .js .top nav.aaben a:last-child { border-bottom: 0; }
  .js .top nav.aaben a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--flame);
    padding-left: 13px;
  }
}