/* Topbar. Syv anchor-punkter er for mange til mobil, så under 1120px er
 * navigationen en <details>-menu: samme mekanik som FAQ og priskortene.
 * Menuen er lukket ved load, så toppen tåler et screenshot.
 *
 * Breakpointet er ved implementeringen flyttet fra 767px til 1119px, som
 * handoff'en foreskriver: syv punkter à 16px + det tolinjede wordmark kræver
 * ca. 1120px. Prototypen satte den geometri via JS i båndet 768-1119px. */
.topbar__logo{display:flex;align-items:center;gap:var(--space-3)}
.topbar__avatar{width:40px;height:40px;border-radius:50%;flex:none;background:repeating-linear-gradient(135deg,#EDE7DC 0 8px,#E2DACB 8px 16px)}
.menu{position:relative}
.menu>summary{display:none}
.menu__panel{display:contents}
@media (max-width:1119px){
  .menu>summary{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--border-strong);border-radius:var(--radius);font-size:20px;line-height:1;cursor:pointer;list-style:none}
  .menu>summary::-webkit-details-marker{display:none}
  .menu>summary::after{content:"☰"}
  .menu[open]>summary::after{content:"✕"}
  .menu>summary:focus-visible{outline:2px solid var(--focus-on-light);outline-offset:2px}
  .menu__panel{display:block;position:absolute;right:0;top:calc(100% + 8px);z-index:10;min-width:min(78vw,320px);background:var(--ink-0);border:1px solid var(--border-soft);border-radius:16px;box-shadow:0 20px 40px rgba(20,57,42,.14);padding:var(--space-2)}
  .menu__panel .nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .menu__panel .nav a{display:block;padding:14px var(--space-4);min-height:48px;font-size:var(--text-base);border-radius:10px}
  .menu__panel .nav a:hover{background:var(--surface-sand)}
}
/* Community-boks */
.community{background:var(--sun-700);color:var(--ink-0)}
.community p{color:var(--fg)}
.community__inner{max-width:var(--content-max);margin:0 auto;padding:var(--space-12) var(--space-4);display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.community p{margin:0;font-size:var(--text-h3);line-height:1.35;max-width:34ch;text-wrap:pretty}
@media (min-width:768px){.community__inner{padding:var(--space-16) var(--space-6)}}
/* Tekst + billede */
.textmedia{background:var(--surface-light);color:var(--text-on-light)}
.textmedia--sand{background:var(--surface-sand)}
.textmedia__inner{max-width:var(--content-max);margin:0 auto;padding:var(--space-12) var(--space-4);display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:center}
.textmedia h2{margin:0 0 var(--space-6);font-family:var(--font-heading);font-size:var(--text-h2);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--heading-tracking,0)}
.textmedia p{margin:0 0 var(--space-4);font-size:var(--text-base);line-height:var(--leading-body);max-width:var(--measure)}
.textmedia p:last-child{margin-bottom:0}
.textmedia ul{margin:0 0 var(--space-4);padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.textmedia li{position:relative;padding-left:22px;font-size:var(--text-base);line-height:1.45}
.textmedia li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--cta-on-light)}
.textmedia__media{position:relative;aspect-ratio:4/5;border-radius:var(--radius);background:repeating-linear-gradient(135deg,#EDE7DC 0 14px,#E2DACB 14px 28px)}
.textmedia__media::after{content:attr(data-label);position:absolute;left:16px;bottom:16px;font:400 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;color:#4E574F}
@media (min-width:768px){
  .textmedia__inner{grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:var(--space-16);padding:var(--space-24) var(--space-6)}
  .textmedia--flip .textmedia__body{order:2}
  .textmedia--flip .textmedia__media{order:1}
}
/* Citatblok */
.quotes{background:var(--surface-deep);color:#EAF3EC}
.quotes__inner{max-width:var(--content-max);margin:0 auto;padding:var(--space-12) var(--space-4)}
.quotes h2{margin:0 0 var(--space-8);font-family:var(--font-heading);font-size:var(--text-h2);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--heading-tracking,0)}
.quotes__grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:stretch}
.quote{display:flex;flex-direction:column;gap:var(--space-4);background:var(--ink-0);border:1px solid var(--border-soft);border-radius:20px;padding:var(--space-6)}
.quote{border-top:4px solid var(--gold-500)}
.quote blockquote{margin:0;flex:1;color:var(--text-on-light);font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
.quote--dialogue{background:var(--surface-deep-card);border-color:#2E5544;color:#EAF3EC}
.quote--dialogue .dialogue dd{color:#EAF3EC}
.quote__rubric{margin:0;font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--sun-300)}
.dialogue{display:flex;flex-direction:column;gap:var(--space-4);margin:0}
.dialogue div{display:grid;grid-template-columns:1fr;gap:var(--space-1)}
.dialogue dt{font-size:var(--text-sm);font-weight:var(--weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-300)}
.dialogue dd{margin:0;font-size:var(--text-base);line-height:1.45}
.dialogue .dialogue__answer dd{font-size:21px;line-height:1.35;font-weight:var(--weight-medium)}
.quotes__media{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;margin-bottom:var(--space-8);background:repeating-linear-gradient(135deg,#EDE7DC 0 14px,#E2DACB 14px 28px)}
.quotes__media::after{content:attr(data-label);position:absolute;left:16px;bottom:16px;font:400 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;color:#4E574F}
@media (min-width:768px){
  .quotes__inner{padding:var(--space-24) var(--space-6)}
  .quotes__media{aspect-ratio:auto;height:420px}
  .quotes__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
  .quote{padding:var(--space-8)}
}
/* Footer */
.footer{background:var(--surface-deep);color:#EAF3EC;border-top:4px solid var(--sun-500)}
.footer__inner{max-width:var(--content-max);margin:0 auto;padding:var(--space-12) var(--space-4);display:grid;grid-template-columns:1fr;gap:var(--space-8)}
.footer dl{margin:0;display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--text-sm);line-height:1.5}
.footer dt{font-weight:var(--weight-bold)}
.footer dd{margin:0}
.footer__social{display:flex;gap:var(--space-3);list-style:none;margin:0;padding:0}
.footer__social a{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 var(--space-4);border:1px solid #2E5544;border-radius:6px;background:var(--surface-deep-card);color:#EAF3EC;font-size:var(--text-sm);text-decoration:none}
.footer__social a:hover{border-color:var(--green-300);color:var(--green-300)}
@media (min-width:768px){
  .footer__inner{grid-template-columns:minmax(0,1fr) auto;align-items:start;padding:var(--space-16) var(--space-6)}
  .footer__cta{justify-self:end;display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-end}
}