/* HHXOpgaver 3.0 — design system
   Navy/lime palette inspired by bold.dk, built on top of the existing
   Bootstrap 4 base rather than replacing it, so older pages keep working
   while pages are migrated to this look one at a time. */

/* Lato, self-hosted (was loaded from fonts.googleapis.com): latin + latin-ext, 400/700/900. Lato is licensed under the SIL Open Font License 1.1 */
@font-face{ font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/lato/lato-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/lato/lato-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/lato/lato-700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/lato/lato-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/lato/lato-900-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/lato/lato-900-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --hhx-navy: #141d26;
  --hhx-navy-2: #1c2733;
  --hhx-navy-3: #2a333e;
  --hhx-bg: #f4f5f2;
  --hhx-white: #ffffff;
  --hhx-ink: #12181f;
  --hhx-ink-soft: #5b6570;
  --hhx-border: #e7e8e4;
  --hhx-accent: #c6f135;
  --hhx-red: #e0393e;
}

body.hhx3{
  background: var(--hhx-bg);
  color: var(--hhx-ink);
  font-family: 'Lato', system-ui, sans-serif;
}

/* ---------- Navigation ---------- */
.hhx3-nav{
  background: var(--hhx-navy);
  padding: 0 24px;
  min-height: 64px;
}
.hhx3-nav .navbar-brand{
  font-size: 20px;
  font-weight: 900;
  color: var(--hhx-white) !important;
  letter-spacing: -0.02em;
}
.hhx3-nav .navbar-brand .accent{ color: var(--hhx-accent); }
.hhx3-nav .nav-link{
  color: #d7dbe0 !important;
  font-weight: 700;
  font-size: 15px;
}
.hhx3-nav .nav-link:hover{ color: var(--hhx-white) !important; }
.hhx3-nav .dropdown-menu{
  background: var(--hhx-navy-2);
  border: 1px solid var(--hhx-navy-3);
}
.hhx3-nav .dropdown-item{ color: #d7dbe0; }
.hhx3-nav .dropdown-divider{ border-top-color: var(--hhx-navy-3); }
.hhx3-nav .dropdown-item:hover{ background: var(--hhx-navy-3); color: var(--hhx-white); }
.hhx3-point-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hhx-navy-2);
  padding: 6px 12px;
  border-radius: 100px;
  color: var(--hhx-white);
  font-weight: 700;
  font-size: 13px;
}

/* ---------- Buttons ---------- */
.hhx3-btn-accent{
  background: var(--hhx-accent);
  color: var(--hhx-navy);
  font-weight: 800;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
}
.hhx3-btn-accent:hover{ color: var(--hhx-navy); background: #b6df2f; }
.hhx3-btn-red{
  background: #c62f34;
  color: var(--hhx-white);
  font-weight: 800;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
}
.hhx3-btn-red:hover{ color: var(--hhx-white); background: #a92529; }
.hhx3-btn-outline{
  background: transparent;
  border: 2px solid var(--hhx-accent);
  color: var(--hhx-navy);
  font-weight: 800;
  border-radius: 8px;
  padding: 9px 22px;
}
/* on a dark card (.hhx3-cta-card.dark) the button's own navy text was invisible against the navy
   background behind it — confirmed on skoletaske.php's "Se historik" button (a real, empty-looking box) */
.hhx3-cta-card.dark .hhx3-btn-outline{ color: var(--hhx-white); }
.hhx3-cta-card.dark .hhx3-btn-outline:hover{ color: var(--hhx-navy); background: var(--hhx-accent); }

/* ---------- Hero ---------- */
.hhx3-hero{
  background: linear-gradient(180deg, var(--hhx-navy) 0%, var(--hhx-navy-2) 100%);
  padding: 56px 24px 48px;
  text-align: center;
}
.hhx3-hero h1{
  color: var(--hhx-white);
  font-weight: 900;
  font-size: 38px;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.hhx3-hero p{
  color: #aab3bd;
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto 20px;
}
.hhx3-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(198,241,53,0.12);
  border: 1px solid rgba(198,241,53,0.35);
  padding: 6px 14px;
  border-radius: 100px;
  color: var(--hhx-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.hhx3-search{
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hhx-white);
  border-radius: 12px;
  padding: 6px 6px 6px 18px;
}
.hhx3-search input{
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  padding: 10px 0;
}
.hhx3-search svg{ flex-shrink: 0; color: #889199; }

.hhx3-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.hhx3-chip{
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid var(--hhx-navy-3);
  color: #d7dbe0;
  background: transparent;
  text-decoration: none;
}
.hhx3-chip:hover{ color: var(--hhx-white); border-color: var(--hhx-accent); text-decoration: none; }
.hhx3-chip.active{
  background: var(--hhx-accent);
  color: var(--hhx-navy);
  border-color: var(--hhx-accent);
}

/* ---------- Sections ---------- */
.hhx3-section{ padding: 48px 24px; max-width: 1200px; margin: 0 auto; }
@media (max-width: 600px){ .hhx3-section{ padding: 30px 16px; } }
.hhx3-section-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}
.hhx3-section-head h2{
  font-size: 24px;
  font-weight: 900;
  color: var(--hhx-navy);
  margin: 0;
}
.hhx3-section-head a{
  font-size: 14px;
  font-weight: 700;
  color: var(--hhx-navy);
  border-bottom: 2px solid var(--hhx-accent);
  text-decoration: none;
}

/* ---------- Assignment cards ---------- */
.hhx3-card-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px){ .hhx3-card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .hhx3-card-grid{ grid-template-columns: 1fr; } }

.hhx3-card{
  background: var(--hhx-white);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hhx-border);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hhx3-card:hover{
  color: inherit;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20,29,38,0.08);
}
.hhx3-card-media{
  height: 100px;
  background: var(--hhx-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhx3-card-body{ padding: 16px; }
.hhx3-card-tag{
  display: inline-block;
  background: #f0f1ec;
  color: #3a4552;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
}
.hhx3-card-title{
  margin: 10px 0 8px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--hhx-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hhx3-card-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.hhx3-card-meta span:first-child{ font-size: 12px; color: #5b6570; }
.hhx3-price-pill{
  background: var(--hhx-accent);
  color: var(--hhx-navy);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

/* ---------- Subject tiles ---------- */
.hhx3-tile-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){ .hhx3-tile-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 600px){ .hhx3-tile-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hhx3-tile{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--hhx-white);
  border: 1px solid var(--hhx-border);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--hhx-navy);
  font-weight: 700;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hhx3-tile:hover{
  color: var(--hhx-navy);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20,29,38,0.08);
}
.hhx3-tile-icon{
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--hhx-navy);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---------- Point CTA band ---------- */
.hhx3-cta-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 700px){ .hhx3-cta-grid{ grid-template-columns: 1fr; } }
.hhx3-cta-card{
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hhx3-cta-card.dark{ background: var(--hhx-navy); }
.hhx3-cta-card.light{ background: var(--hhx-white); border: 1px solid var(--hhx-border); }
.hhx3-cta-card h3{ font-size: 20px; font-weight: 900; margin: 0; }
.hhx3-cta-card.dark h3{ color: var(--hhx-white); }
.hhx3-cta-card.light h3{ color: var(--hhx-navy); }
.hhx3-cta-card p{ font-size: 14px; line-height: 1.6; margin: 0; max-width: 380px; }
.hhx3-cta-card.dark p{ color: #aab3bd; }
.hhx3-cta-card.light p{ color: var(--hhx-ink-soft); }
.hhx3-cta-eyebrow{
  display: inline-block;
  width: fit-content;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 100px;
  text-transform: uppercase;
}
.hhx3-cta-card.dark .hhx3-cta-eyebrow{ background: rgba(198,241,53,0.12); color: var(--hhx-accent); }
.hhx3-cta-card.light .hhx3-cta-eyebrow{ background: #f0f1ec; color: #3a4552; }

/* ---------- Footer ---------- */
.hhx3-footer{ background: var(--hhx-navy); padding: 44px 24px 24px; }
.hhx3-footer-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hhx-navy-3);
}
@media (max-width: 700px){ .hhx3-footer-grid{ grid-template-columns: 1fr 1fr; } }
.hhx3-footer h4{
  font-size: 19px; font-weight: 900; color: var(--hhx-white); margin-bottom: 8px;
}
.hhx3-footer h4 .accent{ color: var(--hhx-accent); }
.hhx3-footer p{ font-size: 13px; line-height: 1.6; color: #889199; max-width: 260px; }
.hhx3-footer-col-title{
  font-size: 12px; font-weight: 800; color: #9aa4ae;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px;
}
.hhx3-footer a{ font-size: 13px; color: #d7dbe0; display: block; margin-bottom: 9px; text-decoration: none; }
.hhx3-footer a:hover{ color: var(--hhx-white); }
.hhx3-footer-bottom{ max-width: 1200px; margin: 0 auto; padding-top: 18px; font-size: 12px; color: #9aa4ae; }

/* ---------- Pagination (used by paging.php) ---------- */
.hhx3-section .pagination{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  justify-content: center;
}
.hhx3-section .pagination li a{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--hhx-white);
  border: 1px solid var(--hhx-border);
  color: var(--hhx-navy);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.hhx3-section .pagination li a:hover{ border-color: var(--hhx-accent); text-decoration: none; }
.hhx3-section .pagination li.active a{
  background: var(--hhx-navy);
  border-color: var(--hhx-navy);
  color: var(--hhx-white);
}

/* ---------- Articles / guides (artikler.php, artikel.php) ---------- */
.hhx3-article{ max-width: 740px; margin: 0 auto; }
.hhx3-article h1{ font-size: 32px; font-weight: 900; line-height: 1.2; color: var(--hhx-navy); margin-bottom: 10px; }
.hhx3-article-meta{ font-size: 13px; color: var(--hhx-ink-soft); margin-bottom: 22px; }
.hhx3-article-meta span + span::before{ content: "·"; margin: 0 8px; }
.hhx3-article-body{ font-size: 17px; line-height: 1.7; color: var(--hhx-ink); }
.hhx3-article-body h2{ font-size: 24px; font-weight: 900; margin: 32px 0 10px; color: var(--hhx-navy); }
.hhx3-article-body h3{ font-size: 19px; font-weight: 900; margin: 24px 0 8px; color: var(--hhx-navy); }
.hhx3-article-body p, .hhx3-article-body ul, .hhx3-article-body ol, .hhx3-article-body table, .hhx3-article-body blockquote{ margin-bottom: 16px; }
.hhx3-article-body a{ color: var(--hhx-navy); text-decoration: underline; text-decoration-color: var(--hhx-accent); text-decoration-thickness: 2px; }
.hhx3-article-body img{ max-width: 100%; height: auto; border-radius: 10px; }
.hhx3-article-body blockquote{ border-left: 4px solid var(--hhx-accent); padding: 4px 0 4px 16px; color: var(--hhx-ink-soft); }
.hhx3-article-body table{ width: 100%; border-collapse: collapse; font-size: 15px; }
.hhx3-article-body th, .hhx3-article-body td{ border: 1px solid var(--hhx-border); padding: 8px 10px; text-align: left; }
.hhx3-sponsor-box{
  border: 1px solid #d9dc9a; background: #f7f9e3; border-radius: 12px;
  padding: 12px 16px; font-size: 14px; color: #3c4207; margin-bottom: 22px;
}
.hhx3-sponsor-box strong{ text-transform: uppercase; letter-spacing: .04em; font-size: 12px; margin-right: 6px; }
.hhx3-source-note{ font-size: 14px; color: var(--hhx-ink-soft); border-top: 1px solid var(--hhx-border); padding-top: 14px; margin-top: 28px; }
.hhx3-pill-sponsored{
  display: inline-block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  background: #f7f9e3; color: #3c4207; border: 1px solid #d9dc9a; border-radius: 100px; padding: 2px 9px; margin-left: 6px;
}
.hhx3-article-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.hhx3-article-card{
  display: flex; flex-direction: column; background: var(--hhx-white); border: 1px solid var(--hhx-border);
  border-radius: 14px; padding: 20px; text-decoration: none; color: inherit;
}
.hhx3-article-card:hover{ border-color: var(--hhx-navy); text-decoration: none; color: inherit; }
.hhx3-article-card h2, .hhx3-article-card h3{ font-size: 19px; font-weight: 900; color: var(--hhx-navy); margin: 8px 0; }
.hhx3-article-card p{ font-size: 14px; color: var(--hhx-ink-soft); margin: 0 0 12px; flex: 1; }
.hhx3-article-card .hhx3-article-meta{ margin: 0; }
.hhx3-article-more{ margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hhx-border); }
.hhx3-article-more h2{ font-size: 18px; font-weight: 900; margin-bottom: 10px; }
.hhx3-article-more ul{ padding-left: 18px; margin-bottom: 14px; }

/* featured image of an article: full column width above the text; thumbnail on the overview cards */
.hhx3-article-hero{ display:block; width:100%; max-height:420px; object-fit:cover; border-radius:12px; margin:0 0 24px; }
.hhx3-article-thumb{ display:block; width:100%; height:160px; object-fit:cover; border-radius:10px; margin:0 0 12px; }

/* accessibility: contrast and structure */
.hhx3-nav .nav-link.hhx3-btn-accent, .hhx3-nav .nav-link.hhx3-btn-accent:hover{ color: var(--hhx-navy) !important; }
.hhx3-footer-brand{ font-size: 19px; font-weight: 900; color: var(--hhx-white); margin-bottom: 8px; }
.hhx3-footer-brand .accent{ color: var(--hhx-accent); }
.hhx3-card-meta span:first-child{ color: #5f6a74; }
.hhx3-section-head h1{ font-size: 24px; font-weight: 900; color: var(--hhx-navy); }
.hhx3-section-head h1 small, .hhx3-section-head h2 small{ color: #5f6a74 !important; }
.alert a, .hhx3-auth-card label a{ text-decoration: underline; }
/* consent checkboxes sit inside a flex label next to their text; without flex-shrink:0
   the box itself gets squeezed down (to ~13px) by long label text or a narrow viewport,
   which is what a small touch-target actually was here. */
body.hhx3 label input[type=checkbox]{ width: 20px; height: 20px; flex-shrink: 0; }

/* contrast fixes (WCAG AA) */
.hhx3-section .hhx3-chip:not(.active){ color: var(--hhx-navy); border-color: #c9cdc4; }
.hhx3-section .hhx3-chip:not(.active):hover{ color: var(--hhx-navy); border-color: #7a9c1e; }
.hhx3-footer-grid > div{ color: #aab3bd; }
body.hhx3 .text-success{ color: #1e7e34 !important; }
body.hhx3 .text-muted{ color: #5b6570 !important; }
body.hhx3 .list-group-item > a{ color: #2a6496; }
.hhx3-auth-card .hhx3-auth-back a{ color: #5b6570; }
.hhx3-search svg{ color: #5f6a74; }
body.hhx3 .alert a, body.hhx3 .card-body a:not(.btn):not([class]), body.hhx3 .hhx3-auth-card a:not([class]){ color: #1f5a8e; }
body.hhx3 .card-body a:not(.btn):not([class]), .hhx3-auth-links a, .hhx3-auth-card p a{ text-decoration: underline; }

/* FAQ accordion (/faq) */
.hhx3-faq-list{ display:flex; flex-direction:column; gap:10px; max-width:760px; }
.hhx3-faq-item{ border:1px solid var(--hhx-border); border-radius:12px; padding:16px 20px; background:var(--hhx-white); }
.hhx3-faq-item summary{ cursor:pointer; font-weight:800; font-size:16px; color:var(--hhx-navy); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.hhx3-faq-item summary::-webkit-details-marker{ display:none; }
.hhx3-faq-item summary::after{ content:"+"; font-size:22px; font-weight:400; color:#5f6a74; flex-shrink:0; }
.hhx3-faq-item[open] summary::after{ content:"−"; }
.hhx3-faq-item[open] summary{ margin-bottom:10px; }
.hhx3-faq-answer{ color:#3a4148; font-size:15px; line-height:1.6; }
.hhx3-faq-answer p{ margin:0 0 10px; }
.hhx3-faq-answer p:last-child{ margin-bottom:0; }

/* a plain-text link with no class inherits Bootstrap's default blue, which fails contrast on a white ground.
   Scoped to flowing text, not the whole page: the footer and other components set their own link color. */
.hhx3-section a:not([class]), .card-body a:not([class]), .alert a:not([class]){ color:#1f5a8e; text-decoration:underline; }
.hhx3-section a:not([class]):hover, .card-body a:not([class]):hover, .alert a:not([class]):hover{ color:#15426b; }

/* tag pills (opgave.php, artikel.php, faq.php) and the /tag and /tags pages */
.hhx3-tag-pill{
  display:inline-block; font-size:12px; font-weight:700; color:var(--hhx-navy);
  background:#f0f1ec; border:1px solid var(--hhx-border); border-radius:100px;
  padding:4px 12px; text-decoration:none;
}
.hhx3-tag-pill:hover{ background:var(--hhx-accent); border-color:var(--hhx-accent); color:var(--hhx-navy); text-decoration:none; }
.hhx3-tag-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.hhx3-tag-cloud .hhx3-tag-pill{ font-size:14px; padding:7px 16px; }
.hhx3-tag-result-group{ margin-bottom:32px; }
.hhx3-tag-result-group h2{ font-size:18px; font-weight:900; color:var(--hhx-navy); margin-bottom:12px; }
.hhx3-tag-result-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.hhx3-tag-result-list li{ border-bottom:1px solid var(--hhx-border); }
.hhx3-tag-result-list a{ display:block; padding:12px 4px; color:var(--hhx-navy); text-decoration:none; font-weight:700; }
.hhx3-tag-result-list a:hover{ text-decoration:underline; }
.hhx3-tag-result-list .subtitle{ display:block; font-size:13px; font-weight:400; color:#5f6a74; margin-top:2px; }

/* Konkurrencer (/konkurrencer): banner, campaign cards, "deltaget i" list */
.kon-banner-wrap{ padding: 14px 24px 14px; max-width: 1200px; margin: 0 auto; }
.kon-banner{ display:flex; align-items:center; gap:12px; background:#f6fbe0; border:1px solid #dcec9c; border-radius:14px; padding:10px 16px; color:var(--hhx-navy); }
.kon-banner svg{ flex-shrink:0; color:#5c7a12; }
.kon-banner-text{ flex:1; font-size:15px; min-width:0; }
.kon-banner-text a{ font-weight:900; color:var(--hhx-navy); text-decoration:underline; text-decoration-color:var(--hhx-accent); text-decoration-thickness:2px; }
.kon-banner form{ margin:0; }
.kon-banner-close{ flex-shrink:0; background:none; border:0; color:#5b6570; font-size:14px; padding:10px 6px; min-height:40px; cursor:pointer; }
.kon-banner-close:hover{ color:var(--hhx-navy); text-decoration:underline; }
.kon-page{ max-width:900px; }
.kon-head{ text-align:center; margin-bottom:32px; }
.kon-pill{ display:inline-block; background:#f0f1ec; color:#3a4552; font-size:13px; font-weight:800; border-radius:100px; padding:6px 16px; margin-bottom:14px; }
.kon-head h1{ font-size:32px; font-weight:900; color:var(--hhx-navy); margin:0 0 10px; }
.kon-head p{ max-width:560px; margin:0 auto; color:var(--hhx-ink-soft); }
.kon-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
.kon-card{ display:flex; flex-direction:column; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:16px; overflow:hidden; }
.kon-media{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1 / 1; background:#f4f5f2; overflow:hidden; }
.kon-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
.kon-media-empty{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--hhx-navy); }
.kon-body{ padding:20px 22px 4px; flex:1; }
.kon-body h2{ font-size:20px; font-weight:900; line-height:1.25; color:var(--hhx-navy); margin:0 0 8px; }
.kon-body p{ font-size:15px; line-height:1.55; color:var(--hhx-ink-soft); margin:0 0 14px; }
.kon-points{ display:flex; align-items:center; gap:8px; font-weight:900; color:var(--hhx-navy); }
.kon-coin{ color:#7a9c1e; flex-shrink:0; }
.kon-left{ margin-left:auto; font-size:12px; font-weight:400; color:#5f6a74; }
.kon-actions{ padding:16px 22px 12px; }
.kon-actions .hhx3-btn-outline{ display:block; text-align:center; width:100%; }
.kon-actions form{ margin:0; }
.kon-skip, .kon-linkbtn{ background:none; border:0; color:#5b6570; font-size:14px; cursor:pointer; }
.kon-skip{ display:block; width:100%; min-height:44px; margin-top:4px; }
.kon-skip:hover, .kon-linkbtn:hover{ color:var(--hhx-navy); text-decoration:underline; }
.kon-linkbtn{ padding:0; color:#1f5a8e; text-decoration:underline; }
.kon-skipped{ margin:18px 0 0; font-size:14px; color:#5b6570; text-align:center; }
.kon-note{ margin:28px 0 0; padding:16px 20px; text-align:center; font-size:15px; color:#3a4552; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; }
.kon-note a{ color:#1f5a8e; text-decoration:underline; }
.kon-sub{ font-size:20px; font-weight:900; color:var(--hhx-navy); margin:40px 0 4px; padding-top:28px; border-top:1px solid var(--hhx-border); }
.kon-sub-note{ font-size:13px; color:#5b6570; margin:0 0 12px; }
.kon-list{ display:flex; flex-direction:column; gap:10px; }
.kon-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:12px; padding:14px 18px; }
.kon-row-title{ font-weight:700; color:var(--hhx-navy); }
.kon-again{ display:inline-block; padding:10px 4px; margin-left:6px; font-size:13px; font-weight:400; color:#1f5a8e; text-decoration:underline; }
.kon-row-meta{ display:flex; align-items:center; gap:14px; font-size:14px; }
.kon-ok{ color:#1e7e34; }
.kon-status{ color:#5b6570; }
.kon-date{ font-size:13px; color:#5f6a74; }
@media (max-width: 700px){
  .kon-grid{ grid-template-columns:1fr; }
  .kon-head h1{ font-size:26px; }
}

/* Konkurrence: samtykkeside ("Lige et øjeblik inden du fortsætter") og interne links */
.kon-go{ max-width:600px; margin:0 auto; }
.kon-go-offer{ text-align:center; font-size:15px; color:#3a4552; margin:0 0 16px; }
.kon-go-card{ background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:16px; padding:28px 28px 24px; text-align:center; }
.kon-go-icon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#fdf1c8; color:#a15c00; margin-bottom:14px; }
.kon-go-card h2{ font-size:20px; font-weight:900; color:var(--hhx-navy); margin:0 0 10px; text-wrap:balance; }
.kon-go-card p{ font-size:15px; line-height:1.6; color:#3a4552; margin:0 0 16px; padding-bottom:16px; border-bottom:1px solid var(--hhx-border); }
.kon-go-card ul{ list-style:none; margin:0; padding:0; text-align:left; display:inline-block; }
.kon-go-card li{ position:relative; padding-left:18px; font-size:15px; color:#3a4552; margin:8px 0; }
.kon-go-card li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:#d98a00; }
.kon-go-legal{ margin:16px 0; padding:14px 18px; text-align:center; font-size:13px; line-height:1.55; color:#4a5560; background:#fafaf7; border:1px solid var(--hhx-border); border-radius:12px; }
.kon-go-form{ margin:0 0 14px; }
.kon-go-btn{ display:block; width:100%; padding:16px 22px; font-size:16px; border-radius:12px; cursor:pointer; }
.kon-go-alt{ text-align:center; font-size:14px; color:#5b6570; margin:0; }
.kon-go-alt a{ color:#1f5a8e; font-weight:700; text-decoration:underline; }
.kon-ways-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-top:14px; }
.kon-way{ display:block; padding:16px 18px; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:12px; color:var(--hhx-navy); text-decoration:none; }
.kon-way:hover{ border-color:var(--hhx-navy); color:var(--hhx-navy); text-decoration:none; }
.kon-way strong{ display:block; font-weight:900; margin-bottom:4px; }
.kon-way span{ font-size:13px; line-height:1.45; color:#5b6570; }
.kon-ways .kon-sub{ margin-top:36px; }
.kon-way-group{ font-size:15px; font-weight:800; color:var(--hhx-navy); margin:26px 0 0; }

/* Profil: Skoletasken (nøgletal, abonnement, uploads, point) og Slet min profil */
.prof-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:20px; }
.prof-stat{ display:flex; flex-direction:column; gap:2px; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; padding:18px 20px; }
.prof-stat-label{ font-size:13px; color:var(--hhx-ink-soft); }
.prof-stat-num{ font-size:30px; font-weight:900; line-height:1.15; color:var(--hhx-navy); }
.prof-stat-num small{ font-size:14px; font-weight:400; color:var(--hhx-ink-soft); }
.prof-stat-date{ font-size:22px; padding-top:6px; }
.prof-stat a{ font-size:14px; color:#1f5a8e; margin-top:2px; }
.prof-card{ background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; padding:22px 24px; }
.prof-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.prof-card-head h2{ font-size:20px; font-weight:900; color:var(--hhx-navy); margin:0; }
.prof-badge{ font-size:12px; font-weight:800; background:#f0f1ec; color:#3a4552; border-radius:100px; padding:4px 12px; }
.prof-badge-ok{ background:#e3f5c8; color:#2c5f0f; }
.prof-dl{ display:grid; grid-template-columns:max-content 1fr; gap:6px 24px; margin:0 0 14px; font-size:15px; }
.prof-dl dt{ font-weight:400; color:var(--hhx-ink-soft); }
.prof-dl dd{ margin:0; color:var(--hhx-navy); }
.prof-muted{ color:var(--hhx-ink-soft); font-size:15px; margin:0 0 14px; }
.prof-muted a, .prof-foot a, .prof-link{ color:#1f5a8e; text-decoration:underline; }
.prof-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.prof-actions form{ margin:0; }
.prof-actions .hhx3-btn-outline, .prof-actions .hhx3-btn-accent{ min-height:44px; display:inline-flex; align-items:center; cursor:pointer; }
.prof-list{ background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; overflow:hidden; }
.prof-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 20px; border-bottom:1px solid var(--hhx-border); }
.prof-row:last-child{ border-bottom:0; }
.prof-row-title{ font-weight:700; color:var(--hhx-navy); }
.prof-row-title a{ color:var(--hhx-navy); }
.prof-row-sub{ font-size:12px; color:#5f6a74; margin-top:2px; }
.prof-row-side{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:14px; }
.prof-status{ font-weight:700; }
.prof-pos{ color:#1e7e34; }
.prof-neg{ color:#a12a2e; }
.prof-zero{ color:#5f6a74; }
.prof-foot{ margin:24px 0 0; font-size:14px; color:var(--hhx-ink-soft); }
.prof-account{ background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; padding:22px 24px; margin-top:16px; }
.prof-account h2{ font-size:18px; font-weight:900; color:var(--hhx-navy); margin:0 0 10px; }
.prof-danger-link{ font-size:14px; color:#5b6570; text-decoration:underline; }
.del-list{ margin:0 0 16px; padding-left:20px; color:#3a4552; }
.del-list li{ margin:6px 0; }
.del-box{ background:#fafaf7; border:1px solid var(--hhx-border); border-radius:12px; padding:16px 20px; margin:0 0 18px; }
.del-box h2{ font-size:16px; font-weight:900; color:var(--hhx-navy); margin:0 0 6px; }
.del-box p{ margin:0; font-size:14px; color:#3a4552; line-height:1.55; }
@media (max-width: 900px){ .prof-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px){ .prof-stat-num{ font-size:26px; } .prof-dl{ grid-template-columns:1fr; gap:0; } .prof-dl dd{ margin-bottom:8px; } }

/* Opgavesiden: piller, indledning, saldo ved download, redaktørens vurdering, kortenes meta */
.opg-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.opg-pill{ display:inline-block; background:#f0f1ec; color:#3a4552; font-size:13px; font-weight:700; border-radius:100px; padding:6px 14px; }
.opg-pill-grade{ background:#e3f5c8; color:#2c5f0f; }
.opg-intro{ font-size:15px; line-height:1.65; color:#3a4552; margin:0 0 16px; }
.opg-intro strong{ color:var(--hhx-navy); }
.opg-balance{ font-size:13px; text-align:center; margin-top:10px; color:#5b6570; }
.opg-balance-ok::before{ content:"\2713\00a0"; color:#1e7e34; font-weight:900; }
.opg-short{ background:#fff6e0; border:1px solid #f0d99a; border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.5; color:#5a3f00; }
.opg-short-links{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.opg-short-links a{ text-align:center; color:#1f5a8e; text-decoration:underline; }
.opg-short-links a.hhx3-btn-accent{ color:var(--hhx-navy); text-decoration:none; }
.opg-card-meta{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; color:#5b6570; min-height:24px; }
.opg-card-grade{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:24px; padding:0 8px; border-radius:100px; background:#e3f5c8; color:#2c5f0f; font-weight:900; font-size:13px; }
.edi{ margin-top:18px; background:#fafaf7; border:1px solid var(--hhx-border); border-radius:14px; padding:22px 24px; }
.edi-head{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; color:var(--hhx-navy); margin:0 0 16px; }
.edi-head svg{ color:#2e7d1a; }
.edi-main{ display:flex; gap:20px; align-items:flex-start; }
.edi-score{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; min-width:96px; }
.edi-num{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:#2e7d1a; color:#fff; font-size:26px; font-weight:900; }
.edi-label{ font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:#5b6570; font-weight:700; text-align:center; }
.edi-quote{ font-size:17px; line-height:1.6; font-style:italic; color:#2a333e; margin:0; }
.edi-list{ list-style:none; margin:18px 0 0; padding:0; border-top:1px solid var(--hhx-border); }
.edi-list li{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--hhx-border); color:#2a333e; }
.edi-list li:last-child{ border-bottom:0; }
.edi-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:26px; padding:0 8px; border-radius:8px; background:#2e7d1a; color:#fff; font-weight:900; font-size:14px; }
.edi-note{ margin:14px 0 0; font-size:12px; color:#5f6a74; line-height:1.5; }
@media (max-width: 700px){ .edi{ padding:18px; } .edi-main{ flex-direction:column; align-items:flex-start; } }
.opg-layout > div{ min-width:0; }
@media (max-width: 800px){ .opg-layout{ grid-template-columns:1fr !important; gap:20px !important; } }

/* Upload i tre trin (tilfoj_opgave.php) */
.up-steps{ display:flex; list-style:none; margin:22px 0 26px; padding:0; }
.up-step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.up-step::before{ content:""; position:absolute; top:19px; left:-50%; width:100%; height:3px; background:#e0e2dc; z-index:0; }
.up-step:first-child::before{ display:none; }
.up-step-done::before, .up-step-now::before{ background:var(--hhx-accent); }
.up-step-dot{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--hhx-white); border:2px solid #d3d6cf; font-weight:900; color:#5b6570; }
.up-step-now .up-step-dot{ background:var(--hhx-navy); border-color:var(--hhx-navy); color:var(--hhx-accent); }
.up-step-done .up-step-dot{ background:var(--hhx-accent); border-color:var(--hhx-accent); color:var(--hhx-navy); }
.up-step-label{ font-size:13px; color:#5f6a74; }
.up-step-now .up-step-label{ color:var(--hhx-navy); font-weight:800; }
.up-card{ background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:16px; padding:26px 28px; }
.up-kicker{ font-size:12px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:#1f5a8e; }
.up-h2{ font-size:22px; font-weight:900; color:var(--hhx-navy); margin:4px 0 8px; }
.up-hint{ font-size:14px; color:#5b6570; margin:0 0 18px; line-height:1.55; }
.up-fine{ font-size:12px; color:#5f6a74; margin:8px 0 16px; line-height:1.5; }
.up-label{ font-size:13px; font-weight:700; color:#5b6570; display:block; margin-bottom:6px; }
.up-drop{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; border:2px dashed #c9ccc4; border-radius:14px; padding:44px 20px; cursor:pointer; background:#fafaf7; margin-bottom:10px; }
.up-drop:hover, .up-drop:focus-within, .up-drop-over{ border-color:#7a9c1e; background:#f6fbe0; }
.up-drop-title{ font-weight:800; font-size:17px; color:var(--hhx-navy); word-break:break-word; }
.up-drop-sub{ font-size:14px; color:#5f6a74; }
.up-file{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.up-error{ background:#fdecec; border:1px solid #f3c2c4; color:#8a1f24; border-radius:10px; padding:12px 16px; font-weight:700; font-size:14px; margin-bottom:14px; }
.up-error a{ color:#8a1f24; text-decoration:underline; }
.up-progress{ margin:6px 0 16px; }
.up-progress progress{ width:100%; height:10px; border-radius:6px; }
.up-progress-steps{ list-style:none; margin:12px 0 0; padding:0; font-size:14px; color:#5b6570; }
.up-progress-steps li{ display:flex; align-items:center; gap:10px; margin:6px 0; }
.ps-dot{ width:16px; height:16px; border-radius:50%; border:2px solid #cfd3cb; flex-shrink:0; }
.ps-active{ color:var(--hhx-navy); font-weight:700; }
.ps-active .ps-dot{ border-color:#1f5a8e; border-top-color:transparent; animation:up-spin 0.9s linear infinite; }
.ps-done{ color:#1e7e34; }
.ps-done .ps-dot{ background:#1e7e34; border-color:#1e7e34; }
@keyframes up-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ps-active .ps-dot{ animation:none; } }
.up-alt{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; background:#fafaf7; border:1px solid var(--hhx-border); border-radius:14px; padding:16px 20px; margin-bottom:18px; }
.up-alt strong{ display:block; color:var(--hhx-navy); }
.up-alt span{ font-size:14px; color:#5b6570; }
.up-alt-links{ display:flex; gap:10px; flex-wrap:wrap; }
.up-alt-links .hhx3-btn-outline{ min-height:44px; display:inline-flex; align-items:center; }
.up-file-ok{ display:flex; align-items:flex-start; gap:10px; background:#f0f1ec; border:1px solid var(--hhx-border); border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:14px; }
.up-file-ok svg{ flex-shrink:0; margin-top:2px; }
.up-grid3{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; margin-bottom:16px; }
.up-linkbtn{ background:none; border:0; padding:8px 0; color:#5b6570; font-size:14px; text-decoration:underline; cursor:pointer; min-height:40px; }
.up-summary{ display:grid; grid-template-columns:max-content 1fr; gap:10px 22px; margin:0 0 18px; font-size:15px; }
.up-summary dt{ color:var(--hhx-ink-soft); font-weight:400; }
.up-summary dd{ margin:0; color:var(--hhx-navy); word-break:break-word; }
.up-muted{ color:#5f6a74; font-size:13px; }
.up-desc{ line-height:1.55; color:#2a333e; }
.up-check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#3a4552; margin:0 0 14px; }
.up-check input{ margin-top:3px; }
.up-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
.up-back{ color:#5b6570; text-decoration:underline; font-size:14px; }
@media (max-width: 600px){ .up-grid3{ grid-template-columns:1fr; } .up-summary{ grid-template-columns:1fr; gap:2px; } .up-summary dd{ margin-bottom:10px; } .up-card{ padding:20px 18px; } .up-drop{ padding:34px 14px; } }

/* upload: school year / type / wish row */
.up-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.up-bonus{ background:#f3f9e6; border:1px solid #d5e8a8; border-radius:10px; padding:14px 16px; }
.up-bonus-line{ font-size:14px; font-weight:700; color:#2e5d0a; margin-bottom:10px; }
@media (max-width: 600px){ .up-grid2{ grid-template-columns:1fr; } }

/* wish list (oensker.php) and school-year badges */
.wish-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.wish-item{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 16px; border:1px solid #e2e5df; border-radius:12px; background:#fff; }
.wish-title{ font-weight:800; color:#141d26; }
.wish-note{ font-size:13px; color:#5b6570; margin-top:2px; }
.wish-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.wish-bonus{ font-weight:900; color:#2e5d0a; background:#eaf6cf; border-radius:999px; padding:4px 10px; font-size:13px; white-space:nowrap; }
@media (max-width: 600px){ .wish-item{ flex-direction:column; align-items:flex-start; } .wish-cta{ width:100%; justify-content:space-between; } }
.hhx3-new-badge{ display:inline-block; background:#eaf6cf; color:#2e5d0a; font-weight:800; font-size:11px; letter-spacing:.02em; padding:2px 8px; border-radius:999px; }

/* assignment rating */
.opg-rate{ margin-top:14px; padding-top:14px; border-top:1px solid #e7e8e4; }
.opg-rate-set{ border:0; padding:0; margin:0 0 10px; }
.opg-rate-set legend{ font-size:13px; font-weight:700; color:#5b6570; padding:0; margin-bottom:8px; }
.opg-rate-row{ display:flex; gap:6px; flex-wrap:wrap; }
.opg-rate-opt{ position:relative; cursor:pointer; }
.opg-rate-opt input{ position:absolute; opacity:0; inset:0; }
.opg-rate-opt span{ display:inline-block; padding:8px 11px; border:1px solid #cfd4cc; border-radius:10px; font-weight:800; font-size:14px; background:#fff; color:#141d26; min-width:44px; text-align:center; }
.opg-rate-opt input:checked + span{ background:#141d26; color:#c6f135; border-color:#141d26; }
.opg-rate-opt input:focus-visible + span{ outline:3px solid #2e7d1a; outline-offset:2px; }

/* phone: title first in the assignment card; member-since date fits its tile */
.opg-card-title-m{ display:none; }
@media (max-width: 800px){ .opg-card-title-m{ display:block; padding:16px 18px 4px; font-size:18px; font-weight:900; line-height:1.25; color:#141d26; overflow-wrap:anywhere; } }
@media (max-width: 480px){ .prof-stat-date{ font-size:17px; } }

/* inline icons (replace the FontAwesome kit) */
.hhx3-ico{ display:inline-block; vertical-align:-2px; flex-shrink:0; }

/* small text inside headings must keep enough contrast (Bootstrap makes it #777) */
h1 small, h2 small, h3 small, .h1 small, .h2 small{ color:#5f6a74; }

/* category links on the older assignment cards: Bootstrap's blue is too light on white */
.card .text-primary{ color:#0b4f9e !important; }

/* older page templates: Bootstrap's blue (#428bca) fails contrast on white/grey */
.btn-primary, .btn-primary:focus{ background-color:#1f5fa8; border-color:#1a5090; color:#fff; }
.btn-primary:hover{ background-color:#1a5090; border-color:#164477; color:#fff; }
.bg-light a, .list-unstyled a{ color:#0b4f9e; }

/* the CTA cards use h2 (h1 > h2 order); same look as before */
.hhx3-cta-card h2{ font-size: 20px; font-weight: 900; margin: 0; }
/* footer: "1.g · 2.g · 3.g" on one line */
.hhx3-footer .hhx3-footer-inline a{ display:inline; margin-bottom:0; }
.hhx3-cta-card.dark h2{ color: var(--hhx-white); }


/* book landing page (boeger.php) */
.bk-hero{ background:#fff; border:1px solid #e7e8e4; border-radius:14px; padding:26px 26px 22px; margin-bottom:28px; }
.bk-cover{ float:right; width:150px; height:auto; aspect-ratio:3/4; object-fit:cover; margin:0 0 12px 22px; border-radius:6px; border:1px solid #e7e8e4; box-shadow:0 4px 14px rgba(20,29,38,.12); }
.bk-hero::after{ content:''; display:block; clear:both; }
.bk-hero h1{ font-size:30px; font-weight:900; color:#141d26; margin:0 0 8px; line-height:1.15; }
.bk-intro{ font-size:17px; color:#3b4652; margin:0 0 16px; max-width:640px; }
.bk-meta{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:8px 24px; }
.bk-meta li span{ display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#5f6a74; }
.bk-meta li strong{ font-size:15px; color:#141d26; }
.bk-meta a{ color:#141d26; }
.bk-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.bk-cta a{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; }
.bk-note{ font-size:13px; color:#5f6a74; margin:14px 0 0; max-width:680px; line-height:1.5; }
.bk-about, .bk-steps, .bk-share, .bk-terms{ margin:0 0 28px; }
.bk-about h2, .bk-steps h2, .bk-share h2, .bk-terms h2{ font-size:20px; font-weight:900; color:#141d26; margin:0 0 10px; }
.bk-text{ background:#fff; border:1px solid #e7e8e4; border-radius:14px; padding:20px 22px; line-height:1.65; color:#2a333e; }
.bk-text > :last-child{ margin-bottom:0; }
.bk-steps ol{ margin:0; padding:20px 22px 14px 42px; background:#fff; border:1px solid #e7e8e4; border-radius:14px; color:#3b4652; line-height:1.65; }
.bk-steps li{ margin-bottom:6px; }
.bk-share{ margin-top:32px; padding:20px 22px; background:#f3f9e6; border:1px solid #d5e8a8; border-radius:14px; }
.bk-share p{ margin:0 0 12px; color:#3b4652; }
@media (max-width: 600px){ .bk-cover{ float:none; display:block; margin:0 auto 16px; width:120px; } .bk-hero{ padding:20px 16px; } .bk-hero h1{ font-size:25px; } .bk-cta a{ width:100%; } }
/* ---------- Mobil: kompakt topbjælke og chips, der scroller sidelæns i én række ---------- */
@media (max-width: 767.98px){
  .hhx3-nav{ padding: 0 12px; flex-wrap: wrap; }
  .hhx3-nav .navbar-brand{ order: 1; margin-right: 0; }
  .hhx3-nav .navbar-right{ order: 2; margin-left: auto; }
  .hhx3-nav .navbar-toggler{ order: 3; margin-left: 8px; }
  .hhx3-nav .navbar-collapse{ order: 4; flex-basis: 100%; }
  .hhx3-nav .navbar-right .navbar-nav{ flex-direction: row; gap: 4px !important; }
  .hhx3-nav .navbar-right .nav-link{ padding-left: 8px; padding-right: 8px; font-size: 14px; white-space: nowrap; }
  .hhx3-nav .navbar-right .nav-link.hhx3-btn-accent{ padding: 7px 12px !important; font-size: 13px !important; }
  .hhx3-nav .navbar-right .hhx3-ico{ display: none; }
}
@media (max-width: 700px){
  .hhx3-hero{ padding: 24px 24px 20px !important; }
  .hhx3-chips{
    position: relative; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    margin: 14px -24px 0; padding: 2px 24px 6px; gap: 8px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 32px), transparent 100%);
  }
  .hhx3-chips::-webkit-scrollbar{ display: none; }
  .hhx3-chip{ flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; padding: 8px 16px; }
  .hhx3-section .hhx3-chips{ margin: 0; padding: 2px 0 6px; }
}
@media (max-width: 360px){
  .hhx3-nav .navbar-brand{ font-size: 17px; }
  .hhx3-nav .navbar-right .nav-link{ padding-left: 5px; padding-right: 5px; font-size: 13px; }
  .hhx3-nav .navbar-right .nav-link.hhx3-btn-accent{ padding: 6px 9px !important; font-size: 12px !important; }
  .hhx3-nav .navbar-toggler{ margin-left: 4px; padding: 4px 8px; }
}

/* ---------- Tekst- og fagsider (generelt.php, fag.php) ---------- */
.pg-crumbs{ font-size:13px; color:#5f6a74; margin:0 0 16px; }
.pg-crumbs a{ color:#5f6a74; text-decoration:underline; }
.pg-head{ margin:0 0 22px; }
.pg-head h1{ font-size:32px; font-weight:900; color:#141d26; margin:0 0 8px; line-height:1.15; letter-spacing:-0.01em; }
.pg-head h1 small{ font-size:16px; font-weight:400; color:#5f6a74; letter-spacing:0; white-space:nowrap; }
.pg-lead{ font-size:17px; color:#3b4652; margin:0 0 16px; max-width:720px; line-height:1.5; }
.pg-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.pg-cta a{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; }
.pg-layout{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:32px; align-items:start; }
.pg-main{ min-width:0; }
.pg-prose{ background:#fff; border:1px solid #e7e8e4; border-radius:14px; padding:24px 26px; line-height:1.65; color:#2a333e; font-size:16px; overflow-wrap:anywhere; }
.pg-card{ margin:0 0 28px; }
.pg-prose > :first-child{ margin-top:0; } .pg-prose > :last-child{ margin-bottom:0; }
.pg-prose h1, .pg-prose h2, .pg-prose h3, .pg-prose h4{ color:#141d26; font-weight:900; line-height:1.25; margin:1.6em 0 .5em; }
.pg-prose h1{ font-size:24px; } .pg-prose h2{ font-size:21px; } .pg-prose h3{ font-size:18px; } .pg-prose h4{ font-size:16px; }
.pg-prose p, .pg-prose ul, .pg-prose ol{ margin:0 0 1em; }
.pg-prose ul, .pg-prose ol{ padding-left:22px; } .pg-prose li{ margin-bottom:.35em; }
.pg-prose a{ color:#1f5fa8; text-decoration:underline; }
.pg-prose img{ max-width:100%; height:auto; border-radius:8px; }
.pg-prose table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:0 0 1em; }
.pg-prose td, .pg-prose th{ border:1px solid #e7e8e4; padding:6px 10px; }
.pg-updated{ font-size:13px; color:#5f6a74; margin:12px 2px 0; }
.pg-side{ position:sticky; top:84px; }
.pg-side h2{ font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#5f6a74; margin:0 0 10px; }
.pg-nav{ list-style:none; margin:0; padding:0; background:#fff; border:1px solid #e7e8e4; border-radius:14px; overflow:hidden; }
.pg-nav li + li{ border-top:1px solid #eeefeb; }
.pg-nav a{ display:block; padding:11px 16px; color:#141d26; font-weight:700; font-size:14px; text-decoration:none; }
.pg-nav a:hover{ background:#f6f7f2; }
.pg-nav a.active{ background:#f3f9e6; box-shadow:inset 3px 0 0 #7a9c1e; }
.pg-block{ margin:0 0 30px; }
.pg-block h2{ font-size:20px; font-weight:900; color:#141d26; margin:0 0 12px; }
.pg-chips{ justify-content:flex-start; margin-top:0; }
.pg-links{ margin:0; padding-left:20px; line-height:1.8; }
.pg-more{ margin:22px 0 0; text-align:center; }
@media (max-width: 800px){
  .pg-layout{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .pg-side{ position:static; }
  .pg-head h1{ font-size:26px; }
  .pg-prose{ padding:18px 16px; }
  .pg-cta a{ width:100%; }
}
.pg-toc{ background:#f3f9e6; border:1px solid #d5e8a8; border-radius:14px; padding:16px 20px; margin:0 0 20px; }
.pg-toc-h{ font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#4a6210; margin:0 0 8px; }
.pg-toc ol{ margin:0; padding-left:20px; columns:2; column-gap:32px; font-size:14px; line-height:1.9; }
.pg-toc a{ color:#141d26; }
.pg-prose h2[id]{ scroll-margin-top:84px; }
@media (max-width: 800px){ .pg-toc ol{ columns:1; } }
.pg-terms{ list-style:none; margin:0; padding:0; columns:3; column-gap:24px; }
.pg-terms li{ break-inside:avoid; margin:0 0 8px; }
.pg-terms a{ display:block; padding:10px 14px; background:#fff; border:1px solid #e7e8e4; border-radius:10px; color:#141d26; font-weight:700; text-decoration:none; }
.pg-terms a:hover{ border-color:#7a9c1e; }
@media (max-width: 800px){ .pg-terms{ columns:2; } }
@media (max-width: 480px){ .pg-terms{ columns:1; } }
.hhx3-section .pg-nav a, .hhx3-section .pg-terms a{ color:#141d26; text-decoration:none; }
.opg-help-h{ font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#5f6a74; margin:14px 0 8px; }

/* ---------- Ordbog: A-Å-oversigt (ordbog.php) ---------- */
.ord-az{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 24px; position:sticky; top:0; z-index:5; background:#f4f4f1; padding:10px 0; }
.ord-az a, .ord-az span{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 6px; border-radius:8px; font-size:13px; font-weight:800; }
.ord-az a{ color:#141d26; background:#fff; border:1px solid #e7e8e4; text-decoration:none; }
.ord-az a:hover, .ord-az a:focus-visible{ border-color:#7a9c1e; background:#f3f9e6; }
.ord-az a.ord-az-all{ background:#141d26; color:#fff; border-color:#141d26; padding:0 12px; }
.ord-az a.ord-az-all:hover{ background:#1f2b38; }
.ord-az span{ color:#c3c6bf; }
.ord-letter{ display:flex; gap:22px; padding:22px 0; border-top:1px solid #e7e8e4; scroll-margin-top:70px; }
.ord-letter:first-child{ border-top:none; padding-top:0; }
.ord-letter-mark{ flex:0 0 auto; width:44px; font-size:32px; font-weight:900; color:#c6f135; -webkit-text-stroke:1.5px #141d26; line-height:1; }
.ord-letter-list{ flex:1; list-style:none; margin:0; padding:0; columns:3; column-gap:28px; }
.ord-letter-list li{ break-inside:avoid; margin:0 0 10px; }
.ord-letter-list a{ color:#141d26; font-weight:700; text-decoration:none; }
.ord-letter-list a:hover{ text-decoration:underline; color:#1f5fa8; }
@media (max-width: 700px){
  .ord-letter{ gap:14px; }
  .ord-letter-mark{ width:32px; font-size:24px; }
  .ord-letter-list{ columns:2; }
}
@media (max-width: 460px){ .ord-letter-list{ columns:1; } }
.ord-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#4a6210; margin:0 0 6px; }
.ord-related{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:16px; }
.ord-related-h{ font-size:13px; font-weight:800; color:#5f6a74; }

/* ---------- Admin-indsatte tekstblokke (Formel/Boks), i alle brødtekstområder ---------- */
.pg-prose .def-formel, .hhx3-article-body .def-formel, .bk-text .def-formel,
.pg-prose .def-boks, .hhx3-article-body .def-boks, .bk-text .def-boks{
  border-radius:10px; padding:16px 20px; margin:0 0 18px;
}
.pg-prose .def-formel:last-child, .hhx3-article-body .def-formel:last-child, .bk-text .def-formel:last-child,
.pg-prose .def-boks:last-child, .hhx3-article-body .def-boks:last-child, .bk-text .def-boks:last-child{ margin-bottom:0; }
.def-formel{ background:#f3f6f0; border-left:4px solid #7a9c1e; }
.def-formel::before{ content:"Formel"; display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#5f6a74; margin-bottom:6px; }
.def-formel p{ margin:0 !important; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size:15.5px; font-weight:600; color:#141d26; overflow-wrap:anywhere; }
.def-boks{ background:#eef5fb; border-left:4px solid #1f5fa8; }
.def-boks p{ margin:0 !important; font-size:15px; color:#233042; line-height:1.6; }

/* ---------- Bøger, krydslinket fra ordbogsbegreber (ordbog.php) ---------- */
.ord-books{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.ord-book{ display:flex; flex-direction:column; gap:3px; background:#fff; border:1px solid #e7e8e4; border-radius:10px; padding:14px 16px; text-decoration:none; }
.ord-book:hover{ border-color:#7a9c1e; }
.ord-book-title{ font-weight:800; color:#141d26; font-size:15px; }
.ord-book-pub{ font-size:12px; color:#5f6a74; }
.ord-book-cta{ font-size:13px; font-weight:700; color:#1f5fa8; margin-top:6px; }

/* generelt/annoncering: åbne nøgletal (objects/site_stats.php) */
.tal-box{ margin:28px 0; padding:22px 24px; background:var(--hhx-bg, #f6f7f9); border:1px solid var(--hhx-border); border-radius:16px; }
.tal-box h2, .tal-box h3{ margin-top:0; }
.tal-intro{ color:var(--hhx-ink-soft); margin:0 0 4px; }
.tal-table{ width:100%; max-width:480px; border-collapse:collapse; margin:8px 0 4px; font-variant-numeric:tabular-nums; }
.tal-table th, .tal-table td{ padding:8px 10px; border-bottom:1px solid var(--hhx-border); text-align:left; }
.tal-table th:last-child, .tal-table td:last-child{ text-align:right; }
.tal-note{ margin:14px 0 0; font-size:14px; color:var(--hhx-ink-soft); }
@media (max-width: 640px){ .tal-box .prof-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* soeg: forslag fra ordbog og guides, tomt resultat */
.soeg-hits{ margin:0 0 20px; }
.soeg-hits p{ margin:0 0 8px; }
.soeg-empty{ max-width:640px; }
.soeg-empty ul{ padding-left:20px; }

/* boeger: samme overskriftsstørrelse til "Opgaver der bruger denne bog" som til de øvrige afsnit på siden */
.hhx3-section-head#opgaver h2{ font-size:20px; }

/* skoletaske: pointoverblik og faner */
.tk-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; padding:20px 24px; margin:16px 0 20px; }
.tk-top .prof-stat-label{ display:block; }
.tk-top .prof-stat-num{ display:block; }
.tk-split{ display:block; font-size:13px; color:var(--hhx-ink-soft); margin-top:2px; }
.tk-top-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.tk-tabs ul{ list-style:none; margin:0 0 4px; padding:0; display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--hhx-border); }
.tk-tabs a{ display:block; padding:10px 16px; font-weight:700; color:#5b6570; border-bottom:3px solid transparent; margin-bottom:-1px; text-decoration:none; }
.tk-tabs a:hover{ color:var(--hhx-navy); }
.tk-tabs a.active{ color:var(--hhx-navy); border-bottom-color:var(--hhx-accent); }
@media (max-width: 600px){ .tk-tabs ul{ flex-wrap:nowrap; overflow-x:auto; } .tk-tabs a{ white-space:nowrap; } .tk-top-actions a{ flex:1; text-align:center; } }
.prof-row-reason{ font-size:13px; color:#5b6570; margin-top:6px; max-width:560px; }

/* bibliotek: filtre og resultatliste */
.bib-h1{ font-size:30px; font-weight:900; color:#141d26; margin:0 0 6px; }
.bib-intro{ color:#5b6570; max-width:680px; margin:0 0 18px; }
.bib-form{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px 14px; align-items:end; background:#fff; border:1px solid #e7e8e4; border-radius:14px; padding:18px 20px; margin-bottom:18px; }
.bib-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.bib-field-q{ grid-column:1 / -1; }
.bib-field label{ font-size:12px; font-weight:700; color:#5b6570; text-transform:uppercase; letter-spacing:.04em; }
.bib-field input, .bib-field select{ min-height:44px; border:1px solid #cfd3cb; border-radius:10px; padding:8px 12px; font-size:15px; background:#fff; color:#141d26; width:100%; }
.bib-field input:focus-visible, .bib-field select:focus-visible{ outline:2px solid #7a9c1e; outline-offset:1px; }
.bib-actions{ display:flex; align-items:center; gap:14px; }
.bib-reset{ color:#1f5a8e; text-decoration:underline; font-size:14px; }
.bib-count{ font-size:15px; color:#3b4652; margin:0 0 10px; }
.bib-chips{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.bib-empty{ max-width:640px; }
.bib-empty ul{ padding-left:20px; }
#bib.htmx-swapping #bib-results{ opacity:.5; transition:opacity 120ms ease; }
.htmx-request #bib-results{ opacity:.6; }
@media (prefers-reduced-motion: reduce){ #bib.htmx-swapping #bib-results, .htmx-request #bib-results{ transition:none; } }
@media (max-width: 600px){ .bib-form{ padding:14px; } .bib-actions{ grid-column:1 / -1; } }

/* boeger: oversigt som kort med omslag */
.bk-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:18px; }
.bk-card{ position:relative; display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid #e7e8e4; border-radius:14px; padding:18px; transition:box-shadow .15s ease, border-color .15s ease; }
.bk-card:hover{ border-color:#c9cdc4; box-shadow:0 6px 18px rgba(20,29,38,.08); }
.bk-card:focus-within{ outline:2px solid #7a9c1e; outline-offset:2px; }
.bk-card-cover{ flex:0 0 96px; width:96px; height:128px; object-fit:cover; border-radius:6px; border:1px solid #e7e8e4; background:#141d26; }
.bk-card-body{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.bk-card-title{ font-size:17px; font-weight:900; line-height:1.25; margin:0; overflow-wrap:break-word; word-break:normal; hyphens:auto; -webkit-hyphens:auto; }
.bk-card-a{ color:#141d26; text-decoration:none; }
.bk-card-a::after{ content:''; position:absolute; inset:0; border-radius:14px; }   /* the whole card is the link */
.bk-card-a:focus-visible{ outline:none; }
.bk-card-meta{ font-size:13px; color:#5f6a74; margin:0; }
.bk-card-count{ margin:2px 0 0; }
.bk-card-count span{ display:inline-block; font-size:13px; font-weight:800; background:#e3f5c8; color:#2c5f0f; border-radius:100px; padding:4px 12px; }
.bk-card-count-none span{ background:#f0f1ec; color:#5b6570; }
.bk-card-intro{ font-size:14px; color:#3b4652; line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width: 600px){ .bk-grid{ grid-template-columns:1fr; } .bk-card{ padding:14px; gap:14px; } .bk-card-cover{ flex-basis:80px; width:80px; height:107px; } }
@media (prefers-reduced-motion: reduce){ .bk-card{ transition:none; } }
.prof-sub{ margin-top:18px; padding-top:16px; border-top:1px solid var(--hhx-border); }
.prof-sub h3{ font-size:16px; font-weight:900; color:var(--hhx-navy); margin:0 0 6px; }

/* forsiden: "Hvad er HHX Opgaver?" som læsbar tekstboks */
.home-about{ background:#fff; border:1px solid #e7e8e4; border-radius:14px; padding:24px 28px; max-width:900px; }
.home-about h2{ font-size:22px; font-weight:900; color:#141d26; margin:0 0 12px; }
.home-about p{ font-size:16px; line-height:1.65; color:#2a333e; margin:0 0 10px; }
.home-about p:last-child{ margin-bottom:0; }
@media (max-width: 600px){ .home-about{ padding:18px 16px; } }

/* ---------- Artikler: magazine front and article page ---------- */
.mag-kicker{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--hhx-ink-soft); margin-bottom:10px; }
.mag-kicker a{ color:inherit; text-decoration:none; }
.mag-kicker a:hover{ text-decoration:underline; }
.mag-kicker > span:first-child:not(.hhx3-pill-sponsored)::before{ content:""; display:inline-block; width:18px; height:4px; border-radius:2px; background:var(--hhx-accent); margin-right:8px; vertical-align:middle; }
.mag-kicker .hhx3-pill-sponsored{ margin-left:0; }
.mag-by{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:13px; color:var(--hhx-ink-soft); }
.mag-by strong{ color:var(--hhx-ink); font-weight:900; }
.mag-by span + span::before{ content:"·"; margin-right:12px; }
.mag-media{ position:relative; overflow:hidden; background:var(--hhx-navy); aspect-ratio:16 / 10; }
.mag-media img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mag-ph{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px 20px; background:linear-gradient(150deg, var(--hhx-navy-2) 0%, var(--hhx-navy) 70%); }
.mag-ph::before{ content:""; position:absolute; left:20px; top:20px; width:44px; height:6px; border-radius:3px; background:var(--hhx-accent); }
.mag-ph span{ font-size:clamp(22px, 3.2vw, 38px); font-weight:900; line-height:1.05; letter-spacing:-.01em; color:rgba(255,255,255,.88); overflow-wrap:anywhere; }

.mag-lead{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:18px; overflow:hidden; color:inherit; text-decoration:none; margin-bottom:28px; }
.mag-lead:hover{ color:inherit; text-decoration:none; border-color:var(--hhx-navy); }
.mag-lead:hover .mag-media img{ transform:scale(1.03); }
.mag-lead .mag-media{ aspect-ratio:auto; min-height:340px; }
.mag-lead-body{ display:flex; flex-direction:column; justify-content:center; padding:36px 40px; }
.mag-lead-body h2{ font-size:clamp(26px, 3vw, 36px); line-height:1.15; font-weight:900; color:var(--hhx-navy); margin:0 0 14px; text-wrap:balance; }
.mag-lead-body p{ font-size:17px; line-height:1.6; color:var(--hhx-ink-soft); margin:0 0 18px; }
.mag-more{ margin-top:20px; font-weight:900; color:var(--hhx-navy); border-bottom:3px solid var(--hhx-accent); align-self:flex-start; padding-bottom:2px; }
.mag-lead:hover .mag-more{ border-bottom-color:var(--hhx-navy); }

.mag-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:24px; }
.mag-card{ display:flex; flex-direction:column; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:16px; overflow:hidden; color:inherit; text-decoration:none; }
.mag-card:hover{ color:inherit; text-decoration:none; border-color:var(--hhx-navy); }
.mag-card:hover .mag-media img{ transform:scale(1.04); }
.mag-card-body{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; }
.mag-card-body h2{ font-size:21px; line-height:1.25; font-weight:900; color:var(--hhx-navy); margin:0 0 8px; text-wrap:balance; }
.mag-card-body p{ font-size:15px; line-height:1.55; color:var(--hhx-ink-soft); margin:0 0 16px; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

@media (max-width: 820px){
  .mag-lead{ grid-template-columns:minmax(0, 1fr); }
  .mag-lead .mag-media{ aspect-ratio:16 / 10; min-height:0; }
  .mag-lead-body{ padding:24px 22px 26px; }
}
@media (prefers-reduced-motion: reduce){
  .mag-media img{ transition:none; }
  .mag-lead:hover .mag-media img, .mag-card:hover .mag-media img{ transform:none; }
}

/* an article (not a guide): wider frame, a real headline, standfirst, byline, hero picture and a reading column */
.hhx3-article--mag{ max-width:980px; }
.hhx3-article--mag > *{ max-width:700px; margin-left:auto; margin-right:auto; }
.hhx3-article--mag > .hhx3-article-hero{ max-width:980px; max-height:540px; border-radius:16px; margin-top:6px; margin-bottom:34px; }
.hhx3-article--mag h1{ font-size:clamp(32px, 5vw, 48px); line-height:1.1; letter-spacing:-.015em; margin-bottom:16px; text-wrap:balance; }
.mag-standfirst{ font-size:clamp(18px, 2.2vw, 21px); line-height:1.5; color:var(--hhx-ink-soft); margin:0 auto 22px; }
.hhx3-article--mag .hhx3-article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; border-top:1px solid var(--hhx-border); border-bottom:1px solid var(--hhx-border); padding:12px 0; margin-bottom:28px; }
.mag-avatar{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--hhx-navy); color:var(--hhx-accent); font-size:13px; font-weight:900; margin-right:8px; vertical-align:middle; }
.hhx3-article--mag .hhx3-article-body{ font-size:18px; line-height:1.75; }
.hhx3-article--mag .hhx3-article-body > p:first-child{ font-size:20px; line-height:1.65; }
.hhx3-article--mag .hhx3-article-body blockquote{ font-size:23px; line-height:1.4; font-weight:700; color:var(--hhx-navy); border-left:5px solid var(--hhx-accent); padding:6px 0 6px 22px; margin:30px 0; }
.hhx3-article--mag .hhx3-article-body h2{ font-size:28px; margin-top:42px; }

/* article extras: table of contents, copy link, author box, previous/next, related cards */
.mag-toc{ background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:12px; padding:16px 20px; margin-bottom:28px; }
.mag-toc strong{ display:block; font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--hhx-ink-soft); margin-bottom:8px; }
.mag-toc ol{ margin:0; padding-left:20px; }
.mag-toc li{ margin:4px 0; }
.mag-toc a{ color:var(--hhx-navy); }
.hhx3-article-body h2[id]{ scroll-margin-top:84px; }
.mag-share{ margin:26px auto 0; font-size:14px; }
.mag-copy{ background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:100px; padding:7px 16px; font-weight:700; color:var(--hhx-navy); cursor:pointer; }
.mag-copy:hover{ border-color:var(--hhx-navy); }
.mag-copy:focus-visible{ outline:3px solid var(--hhx-accent); outline-offset:2px; }
#mag-copied{ margin-left:10px; color:#1e7e34; font-weight:700; }
.mag-author{ display:flex; gap:16px; align-items:flex-start; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; padding:18px 20px; margin-top:30px; }
.mag-author p{ margin:4px 0 0; font-size:14px; color:var(--hhx-ink-soft); line-height:1.55; }
.mag-avatar-lg{ width:46px; height:46px; font-size:19px; margin-right:0; flex:none; }
.mag-adjacent{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; }
.mag-adjacent a{ display:flex; flex-direction:column; gap:4px; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:12px; padding:14px 18px; color:var(--hhx-navy); text-decoration:none; font-weight:900; line-height:1.3; }
.mag-adjacent a:hover{ border-color:var(--hhx-navy); }
.mag-adjacent small{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--hhx-ink-soft); font-weight:900; }
.mag-adj-next{ text-align:right; grid-column:2; }
.mag-more-wrap{ max-width:980px !important; }
.mag-grid-3{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); margin-bottom:14px; }
.mag-grid-3 .mag-card-body{ padding:14px 16px 16px; }
.mag-grid-3 .mag-card-body h3{ font-size:17px; line-height:1.3; font-weight:900; color:var(--hhx-navy); margin:0 0 8px; }
@media (max-width: 600px){
  .mag-adjacent{ grid-template-columns:1fr; }
  .mag-adj-next{ grid-column:auto; }
}

/* author page */
.mag-profile{ display:flex; gap:24px; align-items:flex-start; margin-bottom:32px; }
.mag-profile h1{ font-size:clamp(28px, 4vw, 38px); font-weight:900; line-height:1.15; margin:0 0 10px; color:var(--hhx-navy); }
.mag-profile-bio{ font-size:17px; line-height:1.6; color:var(--hhx-ink); max-width:680px; margin:0 0 10px; }
.mag-profile-meta{ font-size:14px; color:var(--hhx-ink-soft); margin:0; }
.mag-avatar-xl{ width:84px; height:84px; font-size:36px; margin-right:0; flex:none; }
.mag-author a{ color:var(--hhx-navy); }
@media (max-width: 600px){ .mag-profile{ flex-direction:column; gap:14px; } }

/* an image in the text with a caption: the image, a line break and a small line of text in the same paragraph */
.hhx3-article-body p:has(> img), .pg-prose p:has(> img){ text-align:center; }
.hhx3-article-body p:has(> img) img, .pg-prose p:has(> img) img{ display:block; margin:0 auto 8px; }
.hhx3-article-body p:has(> img) small, .pg-prose p:has(> img) small{ display:block; font-size:13px; line-height:1.4; color:var(--hhx-ink-soft); }
.hhx3-article--mag .hhx3-article-body p:has(> img){ max-width:860px; margin-left:auto; margin-right:auto; }

/* the "page not found" page */
.nf-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; margin-bottom:18px; }
.nf-block{ background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; padding:20px 22px; margin-bottom:20px; }
.nf-cols .nf-block{ margin-bottom:0; }
.nf-block h2{ font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--hhx-ink-soft); margin:0 0 12px; }
.nf-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.nf-list a{ color:var(--hhx-navy); }
.nf-kind{ font-size:11px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--hhx-ink-soft); margin-left:6px; }
.nf-report{ font-size:14px; color:var(--hhx-ink-soft); text-align:center; margin-top:8px; }

/* HHXOpgaver.dk i tal: figures with icons, bars and columns */
.tal-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin:20px 0 18px; }
.tal-kpi{ display:flex; flex-direction:column; gap:2px; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; padding:16px 18px; }
.tal-ico{ color:var(--hhx-navy); background:var(--hhx-accent); border-radius:10px; padding:7px; box-sizing:content-box; width:22px; height:22px; margin-bottom:8px; align-self:flex-start; }
.tal-kpi-num{ font-size:30px; font-weight:900; line-height:1.1; color:var(--hhx-navy); font-variant-numeric:tabular-nums; }
.tal-kpi-label{ font-size:14px; color:var(--hhx-ink-soft); }
.tal-kpi-sub{ font-size:12px; font-weight:700; color:#3b6b00; margin-top:4px; }
.tal-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-bottom:6px; }
.tal-card{ background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:14px; padding:18px 20px; }
.tal-card h3{ font-size:15px; font-weight:900; margin:0 0 14px; color:var(--hhx-navy); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.tal-total{ font-size:12px; font-weight:700; color:var(--hhx-ink-soft); }
.tal-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tal-bars li{ display:grid; grid-template-columns:minmax(90px, 32%) minmax(0, 1fr) 132px; gap:10px; align-items:center; font-size:14px; }
.tal-bar-label{ color:var(--hhx-ink); overflow-wrap:anywhere; }
.tal-bar-track{ height:12px; background:#eceee8; border-radius:6px; overflow:hidden; }
.tal-bar-fill{ display:block; height:100%; background:var(--hhx-navy); border-radius:6px; }
.tal-bar-val{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--hhx-navy); white-space:nowrap; }
.tal-share{ font-weight:400; color:var(--hhx-ink-soft); font-size:12px; }
.tal-cols{ display:flex; align-items:flex-end; gap:6px; height:170px; padding-top:18px; }
.tal-col{ flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
.tal-col-bar{ display:block; width:100%; background:var(--hhx-navy); border-radius:5px 5px 0 0; min-height:0; }
.tal-col-top{ background:#3b6b00; }
.tal-col-val{ font-size:11px; font-weight:700; color:var(--hhx-navy); font-variant-numeric:tabular-nums; height:14px; }
.tal-col-label{ font-size:11px; color:var(--hhx-ink-soft); text-transform:uppercase; letter-spacing:.03em; }
@media (max-width: 760px){
  .tal-grid{ grid-template-columns:minmax(0, 1fr); }
  .tal-bars li{ grid-template-columns:minmax(80px, 38%) minmax(0, 1fr); }
  .tal-bar-val{ grid-column:2; }
}

/* assignment cards: the subject in its own colour, the grade, a few lines of text */
.opg-card{ display:flex; flex-direction:column; gap:8px; background:var(--hhx-white); border:1px solid var(--hhx-border); border-left:5px solid var(--fag, var(--hhx-navy)); border-radius:14px; padding:16px 18px 14px; text-decoration:none; color:inherit; min-width:0; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.opg-card:hover{ text-decoration:none; color:inherit; border-color:var(--hhx-navy); border-left-color:var(--fag, var(--hhx-navy)); box-shadow:0 6px 18px rgba(20,29,38,.08); transform:translateY(-1px); }
.opg-card:focus-visible{ outline:3px solid var(--hhx-accent); outline-offset:2px; }
.opg-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.opg-card-fag{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:#3a4552; }
.opg-card-fag::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--fag, var(--hhx-navy)); flex:none; }
.opg-card-gr{ font-size:12px; font-weight:900; color:#2c5f0f; background:#e3f5c8; border-radius:100px; padding:3px 10px; white-space:nowrap; }
.opg-card-title{ font-size:17px; font-weight:900; line-height:1.3; color:var(--hhx-navy); overflow-wrap:anywhere; text-wrap:balance; }
.opg-card-excerpt{ font-size:14px; line-height:1.5; color:#4d5762; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.opg-card-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px; font-size:13px; color:#5b6570; }
.opg-card-foot > span:first-child{ font-weight:700; }
@media (max-width: 600px){
  .opg-card{ gap:6px; padding:13px 14px 12px; }
  .opg-card-excerpt{ -webkit-line-clamp:1; font-size:13px; }
  .opg-card-title{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){ .opg-card{ transition:none; } .opg-card:hover{ transform:none; } }

/* the assignment page on a phone: title and facts first, then the download card, then the text */
@media (max-width: 800px){
  .opg-layout{ display:flex !important; flex-direction:column; align-items:stretch !important; gap:16px !important; }
  .opg-side, .opg-main{ display:contents; }
  .opg-main > *{ order:3; }
  .opg-main > .opg-h1, .opg-main > .opg-pills, .opg-main > .opg-intro{ order:1; }
  .opg-side > *{ order:2; }
  .opg-h1{ font-size:24px !important; margin-bottom:0 !important; }
  .opg-side .hhx3-card-media{ height:64px !important; flex-direction:row !important; gap:12px !important; }
  .opg-side .hhx3-card-media svg{ width:30px; height:30px; }
}

/* the subject buttons as one row that scrolls (script: libs/js/chips_scroll.js); without the script they wrap as before */
.hhx3-chips-scroll-wrap{ position:relative; max-width:1100px; margin:18px auto 0; }
.hhx3-chips-scroll-wrap .hhx3-chips{ margin-top:0; }
.hhx3-chips-scroll-wrap.is-scroll .hhx3-chips-scroll{
  flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding:2px 44px 6px; margin:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.hhx3-chips-scroll-wrap.is-scroll .hhx3-chips-scroll::-webkit-scrollbar{ display:none; }
.hhx3-chips-scroll-wrap.is-scroll .hhx3-chip{ flex:0 0 auto; white-space:nowrap; }
.chips-arrow{ display:none; position:absolute; top:calc(50% - 3px); transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid var(--hhx-navy-3); background:var(--hhx-navy-2); color:#fff; font-size:22px; line-height:1; cursor:pointer; align-items:center; justify-content:center; padding:0 0 3px; }
.hhx3-chips-scroll-wrap.is-scroll .chips-arrow:not([hidden]){ display:inline-flex; }
.chips-arrow:hover{ border-color:var(--hhx-accent); }
.chips-arrow:focus-visible{ outline:3px solid var(--hhx-accent); outline-offset:2px; }
.chips-prev{ left:0; }
.chips-next{ right:0; }
@media (max-width: 700px){
  .hhx3-chips-scroll-wrap{ margin-left:-24px; margin-right:-24px; }
  .hhx3-chips-scroll-wrap .chips-arrow{ display:none !important; }
  .hhx3-chips-scroll-wrap.is-scroll .hhx3-chips-scroll{ padding-left:24px; padding-right:24px; }
}

/* the long text on a subject page: folded, with the whole text still in the page */
.pg-fold{ position:relative; }
.pg-fold.is-folded .pg-prose{ max-height:10.5em; overflow:hidden; position:relative; }
.pg-fold.is-folded .pg-prose::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5em; background:linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events:none; }
.pg-fold-btn{ display:block; margin:10px auto 26px; background:var(--hhx-white); border:1px solid var(--hhx-border); border-radius:100px; padding:8px 20px; font-weight:800; color:var(--hhx-navy); cursor:pointer; }
.pg-fold-btn:hover{ border-color:var(--hhx-navy); }
.pg-fold-btn:focus-visible{ outline:3px solid var(--hhx-accent); outline-offset:2px; }

/* sign-up: visible labels, rules that tick off, the consents grouped, the benefits beside the form on a wide screen */
.hhx3-auth-wrap{ display:flex; align-items:center; justify-content:center; gap:56px; width:100%; max-width:1000px; }
.hhx3-auth-aside{ display:none; color:#e4e8ec; max-width:360px; }
.hhx3-auth-aside h2{ font-size:26px; font-weight:900; line-height:1.2; color:#fff; margin:0 0 18px; }
.hhx3-auth-aside ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.hhx3-auth-aside li{ position:relative; padding-left:30px; font-size:16px; line-height:1.5; color:#c9d0d7; }
.hhx3-auth-aside li::before{ content:"✓"; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--hhx-accent); color:var(--hhx-navy); font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.hhx3-auth-aside strong{ color:#fff; }
@media (min-width: 980px){ .hhx3-auth-aside{ display:block; flex:0 1 360px; } .hhx3-auth-wrap .hhx3-auth-card{ flex:0 0 460px; } }
.hhx3-auth-card .reg-field{ margin-bottom:12px; }
.hhx3-auth-card .reg-field label{ display:block; font-size:13px; font-weight:800; color:var(--hhx-navy); margin-bottom:5px; }
.hhx3-auth-card .reg-field .form-control{ margin-bottom:0; }
.reg-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 460px){ .reg-row{ grid-template-columns:1fr; gap:0; } }
.reg-rules{ list-style:none; margin:-4px 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.reg-rules li{ font-size:12px; font-weight:700; color:#5b6570; background:#f0f1ec; border-radius:100px; padding:3px 10px 3px 9px; }
.reg-rules li::before{ content:"○"; margin-right:5px; }
.reg-rules li.ok{ background:#e3f5c8; color:#2c5f0f; }
.reg-rules li.ok::before{ content:"✓"; }
.reg-show{ display:flex; align-items:center; gap:8px; font-size:13px; color:#5b6570; margin:2px 0 12px; cursor:pointer; }
.reg-consents{ border:1px solid var(--hhx-border); border-radius:12px; padding:12px 14px 6px; margin:4px 0 12px; min-width:0; }
.reg-consents legend{ float:none; width:auto; font-size:12px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:#5b6570; padding:0 6px; margin:0 0 4px; border:0; }
.reg-check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.45; color:#3a4552; margin:0 0 10px; cursor:pointer; }
.reg-check input{ flex:none; width:18px; height:18px; margin:2px 0 0; }
.reg-optional{ background:#f6f7f3; border-radius:12px; padding:12px 14px 4px; margin-bottom:16px; }
.reg-optional .reg-check{ font-size:13px; color:#5b6570; }

/* Skoletasken on a phone: the buttons next to the points fit, and the tab strip shows that it scrolls */
.tk-top-actions a{ white-space:nowrap; }
@media (max-width: 600px){
  .tk-top-actions{ width:100%; flex-wrap:nowrap; }
  .tk-top-actions a{ padding-left:12px; padding-right:12px; }
  .tk-tabs{ position:relative; }
  .tk-tabs ul{ scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%); mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%); padding-right:36px; }
  .tk-tabs ul::-webkit-scrollbar{ display:none; }
}

/* headings inside a book text (admin-written HTML): the site's own weight and size */
.bk-text h2, .bk-text h3{ font-weight:900; color:var(--hhx-navy); line-height:1.25; margin:22px 0 8px; }
.bk-text h2{ font-size:19px; }
.bk-text h3{ font-size:16px; }
.bk-text > :first-child{ margin-top:0; }

/* the fixed download bar on the assignment page (phone only; opgave.php shows it when the real button is out of sight) */
.opg-bar{ display:none; }
@media (max-width: 800px){
  .opg-bar:not([hidden]){ display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:50; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--hhx-navy); box-shadow:0 -4px 18px rgba(20,29,38,.25); }
  .opg-bar-txt{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
  .opg-bar-txt strong{ color:#fff; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .opg-bar-txt span{ color:#c9d0d7; font-size:12px; }
  .opg-bar .hhx3-btn-accent{ flex:0 0 auto; white-space:nowrap; }
  body.has-opg-bar{ padding-bottom:72px; }
}

/* the home page: figures and promises under the search field, and the three steps */
.home-figures{ list-style:none; margin:26px auto 0; padding:18px 0 0; max-width:900px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px 20px; border-top:1px solid var(--hhx-navy-3); }
.home-figures li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
.home-figures strong{ font-size:30px; font-weight:900; line-height:1.1; color:var(--hhx-accent); font-variant-numeric:tabular-nums; }
.home-figures span{ font-size:13px; line-height:1.35; color:#c9d0d7; max-width:170px; }
.home-free{ list-style:none; margin:18px auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; }
.home-free li{ position:relative; padding-left:22px; font-size:14px; font-weight:700; color:#fff; }
.home-free li::before{ content:""; position:absolute; left:0; top:3px; width:14px; height:14px; border-radius:50%; background:var(--hhx-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.5' fill='none' stroke='%23141d26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.home-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.home-steps li{ background:#fff; border:1px solid var(--hhx-border); border-radius:14px; padding:22px 22px 20px; }
.home-step-n{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--hhx-navy); color:var(--hhx-accent); font-weight:900; margin-bottom:12px; }
.home-steps h3{ font-size:19px; font-weight:900; color:var(--hhx-navy); margin:0 0 6px; }
.home-steps p{ font-size:15px; line-height:1.55; color:#2a333e; margin:0; }
@media (max-width: 700px){
  .home-figures{ grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:20px; }
  .home-figures strong{ font-size:26px; }
  .home-free{ flex-direction:column; align-items:flex-start; width:fit-content; gap:8px; }
  .home-steps{ grid-template-columns:1fr; gap:12px; }
  .home-steps li{ padding:18px; }
}

/* /bidrag: upload an assignment for points */
.bid-hero{ padding-bottom:44px; }
.bid-hero p{ max-width:620px; }
.bid-hero p strong{ color:#fff; }
.bid-cta{ display:inline-block; min-height:48px; padding:13px 28px; font-size:16px; }
.hhx3-hero p.bid-note{ margin:14px auto 0; font-size:14px; color:#c9d0d7; }
.bid-note a{ color:var(--hhx-accent); text-decoration:underline; }
.bid-bonus{ background:#fff; border:1px solid var(--hhx-border); border-radius:14px; padding:22px 24px; max-width:760px; }
.bid-bonus p{ margin:0 0 14px; color:#2a333e; line-height:1.55; }
.bid-bonus-list{ list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px 24px; }
.bid-bonus-list li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--hhx-border); font-size:15px; color:#2a333e; }
.bid-bonus-list strong{ color:var(--hhx-navy); background:var(--hhx-accent); border-radius:20px; padding:1px 10px; font-size:13px; white-space:nowrap; align-self:center; }
.bid-bonus .bid-bonus-wish{ margin:0; font-size:15px; }
.bid-rules{ background:#fff; border:1px solid var(--hhx-border); border-radius:14px; padding:20px 24px; max-width:760px; }
.bid-rules ul{ margin:0; padding-left:20px; }
.bid-rules li{ margin:0 0 9px; line-height:1.55; color:#2a333e; }
.bid-rules li:last-child{ margin-bottom:0; }
.bid-final{ background:var(--hhx-navy); border-radius:14px; padding:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.bid-final h2{ color:#fff; font-size:22px; font-weight:900; margin:0 0 6px; }
.bid-final p{ color:#c9d0d7; margin:0; max-width:520px; line-height:1.55; }
.bid-final a:not(.hhx3-btn-accent){ color:var(--hhx-accent); text-decoration:underline; }
.bid-final .hhx3-btn-accent{ flex-shrink:0; }
@media (max-width: 600px){
  .bid-hero{ padding-bottom:32px; }
  .bid-bonus, .bid-rules{ padding:18px 16px; }
  .bid-final{ padding:22px 18px; }
  .bid-final .hhx3-btn-accent{ width:100%; text-align:center; }
}

/* /eksamen and /1g */
.lnd-hero{ padding-bottom:44px; }
.lnd-hero p{ max-width:640px; }
.lnd-cta{ display:inline-block; min-height:48px; padding:13px 28px; font-size:16px; }
.lnd-chips{ justify-content:flex-start; margin-top:0; }
.lnd-count{ margin-left:4px; font-size:12px; font-weight:700; color:#5b6570; font-variant-numeric:tabular-nums; }
@media (max-width: 600px){ .lnd-hero{ padding-bottom:32px; } }
.lnd-jump{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.lnd-subject{ margin:0 0 36px; scroll-margin-top:80px; }
.lnd-subject:last-child{ margin-bottom:0; }
.bib-ways p, .soeg-hits p{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; }
.bib-ways .hhx3-chip, .soeg-hits .hhx3-chip{ margin:0; }

/* the filters of /bibliotek and /soeg behind a button on a phone (libs/js/bibliotek.js opens and closes them; without the script they show) */
.bib-toggle{ display:none; }
.bib-filters{ display:contents; }
@media (max-width: 700px){
  .bib-toggle{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:46px; padding:8px 14px; border:1px solid #cfd3cb; border-radius:10px; background:#fff; font-size:15px; font-weight:700; color:#141d26; cursor:pointer; text-align:left; }
  .bib-toggle::after{ content:""; flex:0 0 auto; width:9px; height:9px; border-right:2px solid #5b6570; border-bottom:2px solid #5b6570; transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; }
  .bib-form.is-open .bib-toggle::after{ transform:rotate(-135deg) translateY(-2px); }
  .bib-toggle:focus-visible{ outline:2px solid #7a9c1e; outline-offset:1px; }
  .bib-toggle-n{ display:inline-block; min-width:22px; padding:1px 7px; margin-left:6px; border-radius:100px; background:var(--hhx-accent); color:var(--hhx-navy); font-size:13px; text-align:center; }
  .bib-form .bib-filters{ display:none; grid-column:1 / -1; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px 14px; align-items:end; }
  .bib-form.is-open .bib-filters{ display:grid; }
  .bib-form .bib-filters .bib-actions{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion: reduce){ .bib-toggle::after{ transition:none; } }

/* the assignment page: who it suits, what the file contains, and the marks for what is in it */
.opg-fit{ margin:-6px 0 14px; font-size:15px; font-weight:700; color:#2a333e; }
.opg-pill-has{ background:#e3f5c8; color:#2c5f0f; }
.opg-outline{ background:#fff; border:1px solid #e7e8e4; border-radius:14px; padding:18px 22px; margin:0 0 16px; }
.opg-outline h2{ font-size:18px; font-weight:900; color:#141d26; margin:0; }
.opg-outline-note{ font-size:13px; color:#5b6570; margin:2px 0 10px; }
.opg-outline ol{ margin:0; padding-left:22px; color:#2a333e; line-height:1.55; }
.opg-outline li{ margin:0 0 3px; overflow-wrap:anywhere; }
.opg-outline details{ margin-top:8px; }
.opg-outline summary{ cursor:pointer; font-size:14px; font-weight:700; color:#1f5a8e; }
.opg-outline summary:focus-visible{ outline:2px solid #7a9c1e; outline-offset:2px; border-radius:4px; }
@media (max-width: 800px){
  .opg-main > .opg-fit{ order:1; }
  .opg-outline{ padding:14px 16px; }
}

/* the blurred pages of an assignment (admin_panel/preview_edit.php makes them) */
.opg-prev{ margin:0 0 16px; }
.opg-prev h2{ font-size:18px; font-weight:900; color:#141d26; margin:0 0 8px; }
.opg-prev-row{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 2px 10px; -webkit-overflow-scrolling:touch; }
.opg-prev-row figure{ margin:0; flex:0 0 auto; scroll-snap-align:start; }
.opg-prev-row img{ display:block; width:170px; height:auto; border:1px solid #e7e8e4; border-radius:6px; background:#fff; box-shadow:0 3px 10px rgba(20,29,38,.10); }
.opg-prev-note{ font-size:13px; color:#5b6570; margin:0; line-height:1.45; }
@media (max-width: 800px){ .opg-main > .opg-prev{ order:1; } .opg-prev-row img{ width:140px; } }

/* a small picture on the cards (the first page of the preview, or a neutral graphic for the file type) and in the assignment page's side card */
.opg-card{ flex-direction:row; gap:14px; }
.opg-card-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.opg-card-media{ flex:0 0 auto; width:64px; height:auto; max-height:92px; align-self:flex-start; margin-top:2px; object-fit:cover; object-position:top; border:1px solid var(--hhx-border); border-radius:6px; background:#fff; }
.opg-card-media.is-ph{ border:0; border-radius:0; background:none; }
@media (max-width: 600px){ .opg-card{ gap:10px; } .opg-card-main{ gap:6px; } .opg-card-media{ width:52px; max-height:74px; } }
/* a real preview (the blurred first page) is the best reason to click, so it gets more room than the neutral file-type graphic */
.opg-card-media:not(.is-ph){ width:92px; max-height:130px; margin-top:0; border-radius:5px; box-shadow:0 3px 10px rgba(20,29,38,.14); transition:transform .15s ease, box-shadow .15s ease; }
.opg-card:hover .opg-card-media:not(.is-ph), .opg-card:focus-visible .opg-card-media:not(.is-ph){ transform:translateY(-2px) rotate(-1deg); box-shadow:0 6px 16px rgba(20,29,38,.2); }
@media (max-width: 600px){ .opg-card-media:not(.is-ph){ width:76px; max-height:108px; } }
@media (prefers-reduced-motion: reduce){ .opg-card-media:not(.is-ph){ transition:none; } .opg-card:hover .opg-card-media:not(.is-ph){ transform:none; } }
.opg-side .hhx3-card-media{ height:auto !important; padding:14px 0; }
.opg-side-img{ height:112px; width:auto; object-fit:cover; object-position:top; border:1px solid var(--hhx-border); border-radius:6px; background:#fff; box-shadow:0 2px 8px rgba(20,29,38,.10); }
.opg-side-img.is-ph{ border:0; border-radius:0; box-shadow:none; background:none; }
@media (max-width: 800px){ .opg-side .hhx3-card-media{ padding:10px 0; } .opg-side-img{ height:72px; } }

/* the lightbox for the blurred pages (libs/js/opg_preview.js) */
.opg-prev-btn{ display:block; cursor:zoom-in; border-radius:6px; }
.opg-prev-btn:focus-visible{ outline:3px solid var(--hhx-accent); outline-offset:2px; }
.opg-prev-btn:hover img{ box-shadow:0 6px 16px rgba(20,29,38,.18); }
html.opg-lb-open{ overflow:hidden; }
.opg-lb{ border:0; padding:0; background:transparent; width:100vw; max-width:100vw; height:100vh; max-height:100vh; margin:0; color:#fff; }
.opg-lb::backdrop{ background:rgba(20,29,38,.86); }
.opg-lb-box{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; padding:56px 12px 20px; }
.opg-lb-fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; }
.opg-lb-img{ display:block; max-width:min(86vw, 640px); max-height:76vh; width:auto; height:auto; background:#fff; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.45); }
.opg-lb-fig figcaption{ font-size:14px; color:#e7e8e4; text-align:center; max-width:90vw; }
.opg-lb-nav, .opg-lb-x{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:30px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 3px; }
.opg-lb-nav:hover:not(:disabled), .opg-lb-x:hover{ background:rgba(255,255,255,.28); }
.opg-lb-nav:disabled{ opacity:.3; cursor:default; }
.opg-lb-nav:focus-visible, .opg-lb-x:focus-visible{ outline:3px solid var(--hhx-accent); outline-offset:2px; }
.opg-lb-x{ position:absolute; top:10px; right:12px; font-size:28px; }
@media (max-width: 600px){
  .opg-lb-box{ gap:4px; padding:56px 6px 16px; }
  .opg-lb-nav{ width:38px; height:38px; font-size:26px; }
  .opg-lb-img{ max-width:calc(100vw - 100px); }
}

/* forgot / reset password: icon, title, steps and notes inside the sign-in card */
.auth-icon{ width:60px; height:60px; border-radius:50%; background:#edf9cf; color:#41610c; display:flex; align-items:center; justify-content:center; margin:6px auto 14px; }
.auth-icon-warn{ background:#fdf0d5; color:#8a5a00; }
.auth-icon-ok{ background:var(--hhx-accent); color:var(--hhx-navy); }
.auth-title{ font-family:inherit; font-size:22px; font-weight:900; line-height:1.25; color:var(--hhx-navy); text-align:center; margin:0 0 8px; }
.auth-lead{ font-size:14px; line-height:1.6; color:#3a4552; text-align:center; margin:0 0 18px; overflow-wrap:anywhere; }
.auth-lead strong{ color:var(--hhx-navy); }
.auth-steps{ list-style:none; counter-reset:authstep; margin:0 0 16px; padding:14px 16px; background:#f5f6f1; border-radius:12px; display:flex; flex-direction:column; gap:10px; }
.auth-steps li{ counter-increment:authstep; position:relative; padding-left:34px; font-size:14px; line-height:1.5; color:#3a4552; }
.auth-steps li::before{ content:counter(authstep); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:var(--hhx-navy); color:#fff; font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.auth-note{ font-size:13px; line-height:1.55; color:#5b6570; margin:0 0 16px; }
.auth-resend{ margin:0 0 4px; }
.auth-resend .hhx3-btn-outline:disabled{ opacity:.6; cursor:not-allowed; }
.hhx3-auth-card .form-control[aria-invalid="true"]{ border-color:#b3261e; }

/* the built-in "I am not a robot" check (libs/js/altcha-lite.js): a quiet box that fills in by itself */
.hhx-altcha-box{ display:flex; align-items:center; gap:10px; border:1px solid var(--hhx-border); border-radius:10px; background:#f7f8f4; padding:10px 12px; font-size:13px; color:#3a4552; min-height:44px; }
.hhx-altcha-mark{ flex:0 0 20px; width:20px; height:20px; border-radius:50%; border:2px solid #aab3bd; box-sizing:border-box; }
.hhx-altcha-box[data-state="working"] .hhx-altcha-mark{ border-color:#c9cdc4; border-top-color:var(--hhx-navy); animation:hhx-spin .8s linear infinite; }
.hhx-altcha-box[data-state="done"] .hhx-altcha-mark{ background:var(--hhx-accent); border-color:#7a9c1e; position:relative; }
.hhx-altcha-box[data-state="done"] .hhx-altcha-mark::after{ content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--hhx-navy); border-width:0 2px 2px 0; transform:rotate(45deg); }
.hhx-altcha-box[data-state="error"]{ border-color:#b3261e; color:#8a1c16; } .hhx-altcha-box[data-state="error"] .hhx-altcha-mark{ border-color:#b3261e; }
.hhx-altcha-missing, .hhx-altcha-noscript{ font-size:13px; color:#8a1c16; margin:0 0 12px; }
@keyframes hhx-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .hhx-altcha-box[data-state="working"] .hhx-altcha-mark{ animation:none; } }

/* ---- glossary (ordbog): hub, subject pages and term pages ---- */
.ord-wrap .pg-crumbs{ margin-bottom:14px; }
.ord-layout{ grid-template-columns:minmax(0,1fr) 270px; }
.ord-hero{ display:flex; gap:20px; align-items:center; justify-content:space-between; }
.ord-hero-hugo{ flex:0 0 auto; }
.ord-eyebrow a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ord-alias{ font-size:14px; color:#5f6a74; margin:0; }
.ord-search{ position:relative; margin:4px 0 18px; }
.ord-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#5f6a74; pointer-events:none; }
.ord-search input{ width:100%; min-height:48px; border:1px solid #d5d9d0; border-radius:12px; padding:10px 14px 10px 44px; font-size:16px; background:#fff; }
.ord-search input:focus{ outline:3px solid #c6f135; outline-offset:0; border-color:#7a9c1e; }
.ord-cards{ list-style:none; margin:0 0 8px; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.ord-cards li[hidden]{ display:none; }
.ord-card{ display:flex; flex-direction:column; gap:6px; height:100%; background:#fff; border:1px solid #e7e8e4; border-radius:12px; padding:14px 16px; text-decoration:none; color:#141d26; transition:border-color .15s, transform .15s; }
.ord-card:hover, .ord-card:focus-visible{ border-color:#7a9c1e; transform:translateY(-1px); }
.ord-card-title{ font-weight:900; font-size:17px; line-height:1.25; }
.ord-card-text{ font-size:14px; line-height:1.5; color:#4a5560; }
.ord-cards-small{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.ord-none{ display:flex; align-items:center; gap:14px; background:#fff; border:1px dashed #c9cdc4; border-radius:12px; padding:16px 18px; margin:8px 0 18px; }
.ord-none p{ margin:0; font-size:15px; }
.ord-visited{ margin:0 0 18px; } .ord-visited:not(.ord-article .ord-visited){ margin-top:-6px; }
.ord-offer{ font-size:13px; color:#5f6a74; margin:0; }
.ord-link-btn{ background:none; border:0; padding:0; font:inherit; font-size:13px; font-weight:700; color:#1f5a8e; text-decoration:underline; cursor:pointer; }
.ord-short{ display:flex; gap:16px; align-items:center; background:#f3f9e0; border:1px solid #d3e79b; border-radius:16px; padding:18px 20px; margin:0 0 20px; }
.ord-short-hugo{ flex:0 0 auto; }
.ord-short-label{ font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#4f6a12; margin:0 0 4px; }
.ord-short-text{ font-size:20px; line-height:1.4; font-weight:700; color:#141d26; margin:0; }
.ord-jump{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.ord-jump a{ font-size:13px; font-weight:700; color:#141d26; background:#fff; border:1px solid #e7e8e4; border-radius:100px; padding:5px 13px; text-decoration:none; }
.ord-jump a:hover, .ord-jump a:focus-visible{ border-color:#7a9c1e; background:#f3f9e6; }
.ord-sec{ margin:0 0 30px; scroll-margin-top:70px; }
.ord-h2{ font-size:21px; font-weight:900; line-height:1.25; color:#141d26; margin:0 0 12px; }
.ord-sec-lead{ font-size:15px; color:#4a5560; margin:-4px 0 14px; }
.ord-callout{ border-radius:14px; padding:18px 20px; font-size:16px; line-height:1.65; color:#2a333e; }
.ord-callout p{ margin:0 0 .8em; } .ord-callout p:last-child{ margin-bottom:0; }
.ord-example{ background:#fff; border:1px solid #e7e8e4; border-left:5px solid #c6f135; }
.ord-tip{ display:flex; gap:16px; align-items:flex-start; background:#141d26; color:#e4e8ec; }
.ord-tip strong{ color:#fff; }
.ord-tip-hugo{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#c6f135; }
.ord-tip-text{ flex:1; min-width:0; }
.ord-errors{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ord-errors li{ position:relative; background:#fff; border:1px solid #e7e8e4; border-radius:12px; padding:12px 16px 12px 44px; font-size:16px; line-height:1.55; color:#2a333e; }
.ord-errors li::before{ content:"!"; position:absolute; left:14px; top:12px; width:22px; height:22px; border-radius:50%; background:#fdf0d5; color:#8a5a00; font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:center; }
.ord-opg{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.ord-prevnext{ display:flex; gap:12px; margin:0 0 20px; }
.ord-prevnext a{ flex:1; display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid #e7e8e4; border-radius:12px; padding:12px 16px; text-decoration:none; color:#141d26; font-weight:800; }
.ord-prevnext a span{ font-size:12px; font-weight:700; color:#5f6a74; } .ord-prevnext .ord-next{ text-align:right; }
.ord-prevnext a:hover{ border-color:#7a9c1e; }
.ord-meta{ font-size:13px; color:#5f6a74; border-top:1px solid #e7e8e4; padding-top:14px; }
.ord-side .pg-nav a{ display:flex; justify-content:space-between; gap:8px; }
.ord-n{ font-size:12px; font-weight:700; color:#5f6a74; }
.ord-side-hugo{ display:flex; gap:10px; align-items:center; margin-top:22px; background:#fff; border:1px solid #e7e8e4; border-radius:12px; padding:12px; font-size:13px; line-height:1.45; }
.ord-side-hugo p{ margin:0; }
@media (max-width: 880px){
	.ord-layout{ grid-template-columns:1fr; }
	.ord-side{ order:2; }
	.ord-hero-hugo{ display:none; }
	.ord-short-text{ font-size:18px; }
	.ord-tip{ flex-direction:column; gap:8px; }
	.ord-tip-hugo{ flex-direction:row; gap:8px; }
	.ord-prevnext{ flex-direction:column; } .ord-prevnext .ord-next{ text-align:left; }
}
@media (prefers-reduced-motion: reduce){ .ord-card{ transition:none; } .ord-card:hover{ transform:none; } }

/* ---- text pages (generelt): date and reading time under the title, a readable line length, a help box at the end, and a print version ---- */
.pg-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:13px; color:#5f6a74; margin:0; }
.pg-meta span + span::before{ content:"·"; margin-right:14px; }
.pg-print{ margin-left:auto; background:none; border:1px solid #d5d9d0; border-radius:100px; padding:4px 14px; font:inherit; font-size:13px; font-weight:700; color:#141d26; cursor:pointer; }
.pg-print:hover, .pg-print:focus-visible{ border-color:#7a9c1e; background:#f3f9e6; }
.pg-prose > p, .pg-prose > ul, .pg-prose > ol, .pg-prose > h2, .pg-prose > h3, .pg-prose > h4, .pg-prose > blockquote{ max-width:72ch; }
.pg-prose h2{ padding-top:.4em; border-top:1px solid #eeefeb; } .pg-prose > h2:first-child{ border-top:0; padding-top:0; }
.pg-prose h3{ margin-top:1.4em; }
.pg-toc ol{ list-style:decimal; }
.pg-help{ display:flex; align-items:center; gap:16px; background:#f3f9e0; border:1px solid #d3e79b; border-radius:16px; padding:16px 20px; margin:20px 0 0; }
.pg-help-hugo{ flex:0 0 auto; display:flex; }
.pg-help > div{ flex:1; min-width:0; font-size:15px; line-height:1.45; color:#2a333e; }
.pg-help > div strong{ display:block; font-size:17px; color:#141d26; }
.pg-help .hhx3-btn-accent{ flex:0 0 auto; }
@media (max-width: 600px){
	.pg-help{ flex-wrap:wrap; } .pg-help > div{ flex-basis:calc(100% - 76px); } .pg-help .hhx3-btn-accent{ width:100%; text-align:center; }
	.pg-print{ margin-left:0; }
}
@media print{
	.pg-side, .pg-toc, .pg-print, .pg-help, .pg-crumbs, #cc-main, .hhx3-nav, .hhx3-footer{ display:none !important; }
	.pg-layout{ display:block; } .pg-prose{ border:0; padding:0; }
	.pg-prose a::after{ content:" (" attr(href) ")"; font-size:.85em; word-break:break-all; }
}

/* the glossary terms an assignment is about, right under its intro */
.opg-terms{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; }
.opg-terms-h{ font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#5f6a74; margin-right:4px; }

/* front page: the glossary section; subject page: questions about the subject */
.home-ordbog{ display:flex; gap:22px; align-items:center; background:#f3f9e0; border:1px solid #d3e79b; border-radius:18px; padding:24px 28px; }
.home-ordbog-hugo{ flex:0 0 auto; display:flex; }
.home-ordbog-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.home-ordbog-body h2{ font-size:24px; font-weight:900; color:#141d26; margin:0; }
.home-ordbog-body p{ margin:0; font-size:16px; color:#2a333e; max-width:60ch; }
@media (max-width: 640px){ .home-ordbog{ flex-direction:column; align-items:stretch; padding:20px 18px; } .home-ordbog-hugo svg{ width:64px; height:64px; } .home-ordbog-body{ max-width:100%; } .home-ordbog-body .hhx3-chips{ max-width:100%; } }
.fag-q{ background:#fff; border:1px solid #e7e8e4; border-radius:12px; margin:0 0 8px; }
.fag-q summary{ cursor:pointer; padding:14px 18px; font-weight:800; font-size:16px; color:#141d26; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.fag-q summary::-webkit-details-marker{ display:none; }
.fag-q summary::after{ content:"+"; font-size:20px; line-height:1; color:#5f6a74; }
.fag-q[open] summary::after{ content:"–"; }
.fag-q summary:focus-visible{ outline:3px solid #c6f135; outline-offset:2px; border-radius:12px; }
.fag-q p{ margin:0; padding:0 18px 16px; font-size:15.5px; line-height:1.6; color:#2a333e; max-width:72ch; }

/* guides and articles: the correction line under the text */
.art-trust{ font-size:13.5px; color:#5f6a74; margin:18px 0 0; }

/* an approved title line under an assignment's title (card and page) */
.opg-card-sub{ display:block; font-size:14px; font-weight:700; color:#3b4652; line-height:1.35; }
.opg-sub{ font-size:17px; font-weight:700; color:#3b4652; margin:-6px 0 14px; line-height:1.4; }

/* text pages: the "Kort fortalt" box above the text */
.pg-kort{ display:flex; gap:16px; align-items:flex-start; background:#f3f9e0; border:1px solid #d3e79b; border-radius:16px; padding:18px 20px; margin:0 0 20px; }
.pg-kort-hugo{ flex:0 0 auto; display:flex; }
.pg-kort h2{ font-size:18px; font-weight:900; color:#141d26; margin:0 0 8px; }
.pg-kort ul{ margin:0 0 8px; padding-left:20px; font-size:16px; line-height:1.55; color:#2a333e; }
.pg-kort li{ margin-bottom:4px; }
.pg-kort-note{ margin:0; font-size:13px; color:#5f6a74; }
@media (max-width: 600px){ .pg-kort{ flex-direction:column; gap:8px; padding:16px; } }
@media print{ .pg-kort-hugo{ display:none; } }

/* the guide that belongs to a type of assignment (DHO, SRO, exam sets), under the intro of its page */
.type-guide{ margin:-8px 0 20px; }
.type-guide a{ display:inline-block; background:#f3f9e0; border:1px solid #d3e79b; border-radius:100px; padding:8px 16px; font-size:15px; color:#141d26; text-decoration:none; }
.type-guide a:hover, .type-guide a:focus-visible{ border-color:#7a9c1e; }

/* tools (/vaerktoejer): the calculators */
.vt-form{ background:#fff; border:1px solid #e7e8e4; border-radius:14px; padding:18px 20px; margin:0 0 18px; }
.vt-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px 18px; }
.vt-field label{ display:block; font-size:13px; font-weight:800; color:#141d26; margin-bottom:4px; }
.vt-opt{ font-weight:400; color:#5f6a74; }
.vt-field input, .vt-field select, .vt-row input, .vt-row select{ width:100%; min-height:44px; border:1px solid #d5d9d0; border-radius:10px; padding:8px 12px; font-size:16px; background:#fff; }
.vt-field input:focus, .vt-field select:focus, .vt-row input:focus, .vt-row select:focus{ outline:3px solid #c6f135; border-color:#7a9c1e; }
.vt-field[hidden]{ display:none; }
.vt-inp{ display:flex; align-items:center; gap:8px; } .vt-inp span{ font-size:14px; color:#5f6a74; min-width:2.5em; }
.vt-rowhead{ display:grid; grid-template-columns:1fr 1fr 44px; gap:10px; font-size:13px; font-weight:800; margin-bottom:6px; }
.vt-row{ display:grid; grid-template-columns:1fr 1fr 44px; gap:10px; margin-bottom:8px; }
.vt-x{ min-height:44px; border:1px solid #d5d9d0; border-radius:10px; background:#fff; font-size:20px; cursor:pointer; }
.vt-result{ background:#f3f9e0; border:1px solid #d3e79b; border-radius:16px; padding:18px 20px; margin:0 0 26px; }
.vt-res{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; margin:0; align-items:baseline; }
.vt-res dt{ font-size:15px; font-weight:700; color:#2a333e; } .vt-res dd{ margin:0; font-size:17px; text-align:right; font-variant-numeric:tabular-nums; }
.vt-big{ font-size:22px !important; font-weight:900; color:#141d26; }
.vt-hint{ font-size:13.5px; color:#5f6a74; margin:10px 0 0; max-width:70ch; }
.vt-cite{ background:#fff; border:1px solid #e7e8e4; border-radius:10px; padding:12px 14px; font-size:16px; line-height:1.5; margin:0 0 10px; overflow-wrap:anywhere; }
@media (max-width: 520px){ .vt-res{ grid-template-columns:1fr; } .vt-res dd{ text-align:left; margin-bottom:6px; } }