/* slehms.dk: bog-siderne med Kontext+-videoer (sk-book.php). Design: «Slehms matematik 1-3». */
.sk-book { --sk-ink: #2F3A40; --sk-ink-soft: #55636B; --sk-sky: #E9F7FB; --sk-accent: #D9480F; --sk-g: #0B8FB0; }
.sk-book.sk-g2 { --sk-g: #D7261E; }
.sk-book.sk-g3 { --sk-g: #C2187F; }

/* Bogforsiden: mindre, så sidetallene kommer op på skærmen (var over 1000 px høj) */
.sk-book .blog-post-wrap > img.wp-post-image {
  display: block; width: auto !important; max-width: 100%; height: auto; max-height: 300px;
  margin: 0 auto; object-fit: contain;
}

/* Dato, likes, kommentarer og tags skjules på bog-siderne (data i WordPress er uændret) */
.sk-book .blog-post-wrap > .entry-header .entry-meta,
.sk-book .blog-post-wrap > .entry-header .tag-list { display: none !important; }
.sk-book .blog-post-wrap > .entry-header:not(:has(> :not(.entry-meta):not(.tag-list))) { display: none !important; }

/* «Related posts» i bunden og Meta-boksens feeds og WordPress.org skjules (Log ind bliver) */
.sk-book #related-posts { display: none !important; }
/* «Continue Reading / Next Post» og kommentarfeltet «Skriv et svar» */
.sk-book nav.post-navigation, .sk-book #comments.comments-area { display: none !important; }
.sk-book .widget_meta li:has(> a[href$="/feed/"]),
.sk-book .widget_meta li:has(> a[href^="https://wordpress.org"]) { display: none !important; }

/* Hovedet over fliserne – mørk tekst på det lyseblå kort (før: hvid tekst med for lav kontrast) */
.sk-book .sk-book-head { margin: 24px 0 8px; color: var(--sk-ink); }
.sk-book .sk-book-head p { margin: 0 0 6px; color: var(--sk-ink); }
.sk-book .sk-hand { font-family: 'Shadows Into Light', cursive; font-size: 30px; line-height: 1.1; }
.sk-book .sk-book-help { font-size: 19px; }
.sk-book .sk-find { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--sk-ink); }
.sk-book .sk-find input {
  width: 120px; min-height: 48px; padding: 6px 14px; font: 700 20px 'Titillium Web', sans-serif; color: var(--sk-ink);
  background: #fff; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(11, 60, 80, .15);
}
.sk-book .sk-find input:focus { outline: 3px solid var(--sk-accent); outline-offset: 2px; }
.sk-book .sk-find-none { font-size: 18px; font-weight: 700; background: #fff; border-radius: 12px; padding: 10px 14px; margin-top: 10px !important; }

/* Fliserne: hele flisen kan klikkes */
.sk-book ul.sk-pages {
  list-style: none !important; margin: 16px 0 8px !important; padding: 0 !important;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px;
}
/* temaets clearfix (::before/::after på lister) ville ellers blive tomme celler i gitteret */
.sk-book ul.sk-pages::before, .sk-book ul.sk-pages::after { content: none !important; display: none !important; }
.sk-book ul.sk-pages li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.sk-book ul.sk-pages li::before { display: none !important; }
.sk-book .entry-content a.sk-page {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 92px; padding: 10px 8px 12px; background: #fff; color: var(--sk-ink) !important;
  border: 3px solid var(--sk-g); border-radius: 20px; box-shadow: 0 4px 12px rgba(11, 60, 80, .16);
  text-decoration: none !important; font-family: 'Titillium Web', sans-serif; line-height: 1.1;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sk-book .entry-content a.sk-page:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11, 60, 80, .22); }
.sk-book .entry-content a.sk-page:focus-visible { outline: 3px solid var(--sk-accent); outline-offset: 3px; }
.sk-book .sk-page-l { font-size: 15px; font-weight: 400; color: var(--sk-ink-soft); }
.sk-book .sk-page-n { font-size: 30px; font-weight: 700; color: var(--sk-ink); letter-spacing: -.01em; }
.sk-book .sk-page-play {
  position: absolute; top: 7px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; background: var(--sk-g);
}
.sk-book .sk-page-n { white-space: nowrap; }

/* Sider uden video (tekst uden link i indholdet): stiplet og dæmpet, kan ikke klikkes */
.sk-book .entry-content .sk-page.sk-none {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 92px; padding: 10px 8px 12px; border-radius: 20px; line-height: 1.1;
  background: rgba(255, 255, 255, .55); border: 2px dashed rgba(47, 58, 64, .35); box-shadow: none;
  font-family: 'Titillium Web', sans-serif; color: var(--sk-ink-soft);
}
.sk-book .sk-none .sk-page-n { color: var(--sk-ink-soft); }
.sk-book .sk-page-soon { font-size: 12px; margin-top: 3px; color: var(--sk-ink-soft); }

/* Ekstra video til samme side (fx «version 2») */
.sk-book .entry-content a.sk-extra {
  display: block; margin-top: 6px; text-align: center; font-size: 15px; font-weight: 700;
  color: var(--sk-ink) !important; background: #fff; border-radius: 999px; padding: 4px 8px; text-decoration: none !important;
  border: 2px solid var(--sk-g);
}

@media (max-width: 600px) {
  .sk-book ul.sk-pages { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
  .sk-book .entry-content a.sk-page, .sk-book .entry-content .sk-page.sk-none { min-height: 80px; padding: 14px 4px 10px; }
  .sk-book .sk-page-n { font-size: 22px; }
  .sk-book .sk-page-l { font-size: 13px; }
  .sk-book .sk-page-play { top: 5px; right: 5px; width: 16px; height: 16px; font-size: 7px; }
  .sk-book .sk-hand { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .sk-book .entry-content a.sk-page { transition: none; } .sk-book .entry-content a.sk-page:hover { transform: none; } }

/* Adgangskode-formularen (det første, en elev ser) */
.sk-book .post-password-form { background: #fff; color: var(--sk-ink); border-radius: 20px; padding: 20px 22px; margin: 20px 0; box-shadow: 0 4px 12px rgba(11, 60, 80, .16); }
.sk-book .post-password-form p { color: var(--sk-ink); font-size: 18px; margin: 0 0 12px; }
.sk-book .post-password-form label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; color: var(--sk-ink); }
.sk-book .post-password-form input[type="password"] {
  min-height: 52px; padding: 8px 16px; font: 400 20px 'Titillium Web', sans-serif; border: 2px solid var(--sk-g); border-radius: 999px; min-width: 200px;
}
.sk-book .post-password-form input[type="submit"] {
  min-height: 52px; padding: 8px 26px; font: 700 19px 'Titillium Web', sans-serif; color: #fff; background: var(--sk-accent);
  border: 0; border-radius: 999px; cursor: pointer;
}