/* Centrumdoktorn public site. Own stylesheet; no third-party requests, no web-font service.
   Every colour and the base font size live in the :root block below, so a theme preset is just
   a different set of values for these custom properties. */
:root {
  --page-bg: #f7f6f1;
  --box-bg: #ffffff;
  --ink: #444444;
  --muted: #5f5f5f;
  --accent: #d62647;
  --accent-ink: #ffffff;
  --accent-soft: #f7f6f1;
  --heading: #003366;
  --line: #e2e0d8;
  --focus: #003366;
  --focus-on-accent: #ffffff;
  --skip-bg: #003366;
  --skip-ink: #ffffff;
  --nav-hover: rgb(0 0 0 / 0.18);
  --nav-current: rgb(0 0 0 / 0.28);
  --shadow: rgb(100 100 100 / 0.3);
  --base-size: 106.25%;
  --base-size-small: 100%;
  --font: "Open Sans", Helvetica, Arial, sans-serif;
}


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

html { font-size: var(--base-size); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font, "Open Sans", Helvetica, Arial, sans-serif);
  line-height: 1.7;
  color: var(--ink);
  background: var(--page-bg);
}

a { color: var(--ink); text-underline-offset: 0.15em; }
a:hover { color: var(--accent); text-decoration-thickness: 0.15em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

h1 { font-size: 1.9rem; line-height: 1.25; font-weight: 400; margin: 0 0 1rem; }
h2 { font-size: 1.4rem; line-height: 1.3; font-weight: 400; margin: 1.75rem 0 0.5rem; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 1.5rem 0 0.5rem; }
.content > :first-child { margin-top: 0; }
.content img { max-width: 100%; height: auto; }
/* Picture sizes, text sizes and the other formatting the editor can write: one allow-listed class each, nothing else */
.content img.img-liten { width: 33%; }
.content img.img-mellan { width: 60%; }
.content img.img-stor { width: 100%; }
.content .txt-liten { font-size: 0.85em; }
.content .txt-stor { font-size: 1.35em; }
.content .txt-center { text-align: center; }
.content u { text-decoration: underline; }
.content hr { margin: 1.5rem 0; border: 0; border-top: 2px solid var(--line); }
.content blockquote { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); background: var(--accent-soft); }
.content blockquote > :last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
  .content img.img-liten { width: 50%; }
  .content img.img-mellan { width: 80%; }
  .content .txt-stor { font-size: 1.2em; }
}
/* The Hem photo from the old site is stretched vertically (768×1024). Shown 768 tall instead of 1024, as Regian asked.
   Uploads get random names, so a replacement photo is shown at its own proportions again. */
.content img[src^="/bilder/hem.jpg"] { aspect-ratio: 1 / 1; object-fit: fill; }
.content a { color: var(--heading); }
.content a:hover { color: var(--accent); }
p { margin: 0 0 1rem; }

.post-date {
  display: block; margin: 0 0 0.5rem; padding: 0;
  background: none; color: var(--muted); font-size: 1rem; font-weight: 400;
}

.news-item { padding: 0 0 1.5rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--line); }
.news-item h2 { margin-top: 0; }
.news-item .content > :last-child { margin-bottom: 0; }

.pager { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 1rem; }

.back { margin-top: 2rem; }
.updated { margin: 2rem 0 0; font-size: 1rem; color: var(--muted); }
.back + .updated { margin-top: 0.5rem; }

/* Links are comfortable to tap (44 px). */
.pager a, .back a, .news-item h2 a { display: inline-flex; align-items: center; min-height: 2.75rem; }

@media (max-width: 40rem) {
  html { font-size: var(--base-size-small); }
  h1 { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* "Visa e-postadress" */
.reveal p { margin: 0 0 0.5rem; }
.reveal-button {
  min-height: 2.75rem; padding: 0.35rem 1rem; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--accent-ink); background: var(--accent); border: 2px solid var(--accent); border-radius: 0.3rem;
}
.reveal-button:hover { background: var(--nav-hover); }
.reveal-button[disabled] { cursor: progress; opacity: 0.8; }
.reveal-error { color: var(--ink); font-weight: 700; }

/* The quiet line by "Visa e-postadress" and the button inside running text (the privacy page, only under the Modern theme) */
.reveal-note { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--muted); }
.reveal-inline .reveal-button { min-height: 2.5rem; vertical-align: baseline; }
.privacy .content p { margin: 0 0 1rem; }