/* Kalenderguiderne, der bygges på serveren (server/guidesider.js). Oveni
   den fælles guides/style.css. */

.intro { color: var(--ink-soft); margin: -16px 0 28px; max-width: 58ch; }

.trin { margin: 0; padding-left: 20px; }
.trin li + li { margin-top: 8px; }
.card .trin { margin-left: 0; }
.card h2 + .trin { margin-top: 12px; }

.callout {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg);
  font-size: 14px;
  color: var(--ink-soft);
}
.card .callout { margin-left: 0; }
.callout.warn { background: #fbeee7; color: #8a4a26; }
.callout strong { color: inherit; }

.faq { margin: 32px 0; }
.faq h2, .andre h2 { font-size: 20px; margin: 0 0 12px; }
.faq details {
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  padding: 0 18px;
}
.faq summary { cursor: pointer; font-weight: 650; padding: 14px 0; }
.faq details p { margin: 0 0 14px; color: var(--ink-soft); }

.andre { margin-top: 40px; }
.andre ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.andre a {
  display: inline-block;
  background: var(--panel);
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: .45em 1em;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.andre a:hover { color: var(--accent); }

/* Oversigten: foldbare guides. */
.guide {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}
.guide summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.guide summary::-webkit-details-marker { display: none; }
.guide .ic { font-size: 24px; flex: none; }
.guide .tx { flex: 1; }
.guide .tx strong { display: block; font-size: 16px; }
.guide .tx span { color: var(--ink-soft); font-size: 14px; }
.guide .chev { color: var(--ink-faint); font-size: 22px; transition: transform .15s; }
.guide[open] .chev { transform: rotate(90deg); }
.guide-body { padding: 0 22px 22px 60px; }
.guide-body .mere { margin: 14px 0 0; font-size: 14px; }
.guide-body .mere a { color: var(--accent); font-weight: 600; }

@media (max-width: 480px) {
  .guide-body { padding-left: 22px; }
}

/* Tegning af et afsnit fra en anden tjeneste (fx Googles "Integrer
   kalender"), hvor det rigtige felt er markeret. */
.mock {
  margin: 0 0 28px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.mock-titel { margin: 0 0 12px; font-size: 18px; font-weight: 500; color: #3c4043; }
.mock-felt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #e8eaf0;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-family: Roboto, Arial, sans-serif;
}
.mock-etiket { font-size: 12px; color: #444; }
.mock-vaerdi { font-size: 14px; color: #1f1f1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-felt.forkert { opacity: .55; }
.mock-felt.forkert .mock-vaerdi { text-decoration: line-through; text-decoration-color: rgba(201, 48, 44, .6); }
.mock-felt.rigtig { background: #e3f4ec; outline: 3px solid #37B87C; outline-offset: 2px; margin-top: 16px; }
.mock-raekke { display: flex; align-items: center; gap: 10px; }
.mock-raekke .mock-vaerdi { flex: 1; letter-spacing: .1em; }
.mock-ikon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #444; }
.mock-ikon svg { width: 18px; height: 18px; }
.mock-ikon.kopier { background: #37B87C; color: #fff; box-shadow: 0 0 0 4px rgba(55, 184, 124, .25); }
.mock-maerke { align-self: flex-start; margin-top: 6px; font-size: 12.5px; font-weight: 700; font-family: inherit; border-radius: 999px; padding: 2px 10px; }
.mock-maerke.nej { background: #fbeee7; color: #a3441f; }
.mock-maerke.ja { background: #37B87C; color: #fff; }
.mock figcaption { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }