/* =========================================================
   NSØK Patientvejledninger — Print-stylesheet til Scroll Sites
   INSTALLATION:
     Space Tools → Apps → Scroll Sites → Configure → ⋯ → Edit
     → (Site Settings → Look and feel → Customize theme)
       • CSS editor:  indsæt HELE denne fil
       • JS editor:   indsæt scriptet fra print-button.js (separat fil)
     Save → luk → Update site → Go live.
     Fejlfinding: tilføj ?disable-custom-overrides=true til site-URL
     for midlertidigt at slå CSS/JS fra.
   PRINT: Klik "Print / gem som PDF"-knappen på siden, eller Ctrl/Cmd+P.
   Testet mod: Chrome/Edge/Safari (Chrome 131+, Safari 18.2+)
   OBS: Firefox understøtter ikke @page margin-bokse (sidetal) — brug
   derfor Edge eller Chrome til print. En note gør brugeren opmærksom
   på dette i Firefox (se @-moz-document nederst i skærm-sektionen).
   ========================================================= */

/* =========================================================
   SKÆRM-STYLES (kun synlige i browseren, IKKE ved print)
   Print-knap + Firefox-advarsel.
   ========================================================= */
@media screen {

  /* Wrapper der grupperer Print + "Use with AI".
     Column-retning så et evt. Firefox-tip lander UNDER knap-rækken,
     venstrejusteret så det flugter med Print-knappen. */
  #nsok-action-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Indre række der holder de to knapper side om side */
  #nsok-action-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* Print-knappen — klar blå, lidt større tekst og ikon */
  #nsok-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 16px;
    background: #0077B6;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s ease;
  }
  #nsok-print-btn:hover {
    background: #005A8C;
  }
  #nsok-print-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
  }

  /* Firefox-tip — diskret grå tekst, ingen baggrund, direkte under Print-knappen */
  #nsok-firefox-warning {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #8a8a8a;
    line-height: 1.3;
    text-align: left;
  }

  /* Titel injiceret af print-button.js — kun til print, skjul på skærm
     (siden viser allerede sin egen titel synligt i selve artiklen) */
  #nsok-print-title {
    display: none;
  }
}

@media print {

  /* Print-knap og Firefox-note må ALDRIG komme med i selve udskriften */
  #nsok-print-btn,
  #nsok-firefox-warning {
    display: none !important;
  }

  /* ---------- 1. Sideopsætning + sidehoved/-fod ---------- */
  @page {
    size: A4;
    margin: 1.8cm 1.4cm 1.6cm 1.4cm;

    /* Sidefod venstre: dokumenttype + klinik */
    @bottom-left {
      content: "Patientvejledninger – Nordsjællands Øjenklinik";
      font-family: -apple-system, "Segoe UI", Arial, sans-serif;
      font-size: 8pt;
      color: #6b6b6b;
    }
    /* Sidefod højre: sidetal (Chrome/Edge/Safari — ikke Firefox) */
    @bottom-right {
      content: "Side " counter(page) "/" counter(pages);
      font-family: -apple-system, "Segoe UI", Arial, sans-serif;
      font-size: 8pt;
      color: #6b6b6b;
    }
    /* Sidehoved højre: klinikkens kontaktinfo */
    @top-right {
      content: "Nordsjællands Øjenklinik · tlf. 4825 4011 · www.nsok.dk";
      font-family: -apple-system, "Segoe UI", Arial, sans-serif;
      font-size: 8pt;
      color: #6b6b6b;
    }
  }

  /* ---------- 2. Skjul alt navigations-chrome ----------
     Bekræftede selectors via devtools (Scroll Sites help-center-tema):
       <a class="skip-link">
       <header data-component="header">
       <theme-navigator class="navigator">
       <div class="topbar"> indeholder <theme-breadcrumbs> + <ai-actions class="ai-actions"> ("Use with AI")
       <nav class="toc sticky" data-component="toc">
       <footer data-component="footer">
       <div id="cc-main"> (cookie-consent)
  */
  .skip-link,
  header,
  [data-component="header"],
  theme-navigator,
  .navigator,
  .topbar,
  theme-breadcrumbs,
  .breadcrumbs,
  ai-actions,
  .ai-actions,
  nav.toc,
  [data-component="toc"],
  footer,
  [data-component="footer"],
  #cc-main,
  .print-hide {
    display: none !important;
  }

  /* ---------- 3. Grundlayout ---------- */
  html, body {
    background: #fff !important;
    margin: 0;
    padding: 0;
  }

  [data-vp-component="content"],
  main,
  main.main-content,
  article,
  article#content,
  .fb-layout-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  body, p, li, td, th {
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 9.5pt;
    line-height: 1.3;
    color: #1a1a1a;
  }

  /* ---------- 4. Titel (injiceret af print-button.js) ----------
     Holdt kompakt bevidst — skal ikke fylde meget på siden. */
  #nsok-print-title {
    display: block !important;   /* overskriver @media screen display:none ved print */
    text-align: center;
    color: #0B3D6E;
    font-size: 13pt;
    font-weight: 600;
    margin: 0 0 6pt 0;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* ---------- 5. Sektionsoverskrifter ---------- */
  h2, h3, h4 {
    color: #0077B6;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10pt;
    letter-spacing: 0.02em;
    margin: 7pt 0 3pt 0;
    padding-bottom: 1.5pt;
    border-bottom: 1.25pt solid #00B4D8;
    page-break-after: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  h5, h6 {
    color: #0077B6;
    font-size: 9.5pt;
    font-weight: 700;
    margin: 5pt 0 2pt 0;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Første sektionsoverskrift efter titlen skal ikke have stor top-margin */
  #nsok-print-title + h2, #nsok-print-title + h3, #nsok-print-title + h4 { margin-top: 2pt; }

  /* ---------- 6. Brødtekst / lister ---------- */
  /* orphans/widows tvinger mindst 2 linjer sammen ved sideskift (også Firefox) */
  p {
    margin: 0 0 5pt 0;
    orphans: 2;
    widows: 2;
  }

  ul, ol {
    margin: 0 0 5pt 0;
    padding-left: 14pt;
  }
  li {
    margin-bottom: 1.5pt;
    page-break-inside: avoid;
    break-inside: avoid;   /* et enkelt punkt må ikke flækkes over to sider */
  }

  /* Undgå at blokke flækkes ved sideskift — begge syntakser for Firefox-kompatibilitet.
     OBS: Firefox har historisk svag understøttelse; store elementer kan stadig
     brydes hvis de er højere end en side. */
  ul, ol, table, figure, [data-component="panel"] {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  strong { color: #0B3D6E; }

  /* ---------- 7. Panel-bokse — bekræftet DOM-struktur via devtools:
     <div data-component="panel" role="note" data-appearance="info|note|warning|error|success">
       ::before   (nativt ikon, medfølger allerede — vi rører det ikke)
       <div class="panel-content"><p>...</p></div>
     </div>
     Vi styler kun baggrund/kant/radius på den ydre div, og lader det
     indbyggede ikon (::before) blive stående som det er. */

  [data-component="panel"] {
    border-radius: 3pt;
    margin: 4pt 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  [data-component="panel"] .panel-content {
    padding: 5pt 7pt !important;
    font-size: 9pt;
  }
  /* Fjern ekstra luft omkring afsnit inde i paneler */
  [data-component="panel"] .panel-content p:last-child { margin-bottom: 0; }
  [data-component="panel"] .panel-content h3 { margin-top: 0; }

  /* Info / note → blå boks (som blefarit-tippet i eksemplet) */
  [data-component="panel"][data-appearance="info"],
  [data-component="panel"][data-appearance="note"] {
    background: #EAF6FB !important;
    border-left: 4pt solid #0077B6 !important;
  }

  /* Warning / error → rød boks (som infektions-advarslen i eksemplet) */
  [data-component="panel"][data-appearance="warning"],
  [data-component="panel"][data-appearance="error"] {
    background: #FDECEC !important;
    border-left: 4pt solid #D64545 !important;
  }

  /* Success / tip → grøn boks, for god ordens skyld */
  [data-component="panel"][data-appearance="success"] {
    background: #EAF7EE !important;
    border-left: 4pt solid #2E9E4F !important;
  }

  /* ---------- 9. Billeder + kursiv billedtekst, centreret ---------- */
  figure, .mediaSingle, [data-type="media-single"] {
    text-align: center;
    margin: 5pt auto !important;
    page-break-inside: avoid;
  }
  figure img, .mediaSingle img, [data-type="media-single"] img {
    max-width: 65%;
    max-height: 5.5cm;   /* forhindrer at store illustrationer skubber en side ekstra */
    height: auto;
    margin: 0 auto;
  }
  figcaption, .image-caption {
    font-style: italic;
    font-size: 8pt;
    color: #555;
    text-align: center;
    margin-top: 3pt;
  }

  /* ---------- 10. Links: vis ikke URL i parentes (patientvenligt) ---------- */
  a {
    color: #0077B6;
    text-decoration: none;
  }
  a[href]::after {
    content: "";
  }

  /* ---------- 11. Tabeller (fx doseringsskemaer, ikke metadata) ---------- */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 8pt 0;
    font-size: 9.5pt;
  }
  th, td {
    border: 0.75pt solid #ccc;
    padding: 4pt 6pt;
    text-align: left;
  }
  th {
    background: #F0F7FA;
    color: #0B3D6E;
  }

  /* ---------- 12. Firefox-fallback for klinik-info ----------
     Firefox ignorerer @page margin-bokse, så header/footer-teksten
     (klinik + sidetal) mangler dér. Vi indsætter i stedet en fast
     footer nederst på hver printet side via position: fixed, som
     Firefox HAR understøttet ved print i mange år.
     @-moz-document begrænser dette til Firefox, så Edge/Chrome/Safari
     (der allerede har @page-boksene) ikke får dobbelt footer.
     OBS: Firefox kan ikke lave dynamisk "Side X af Y" via CSS, så her
     står kun klinik-info uden sidetal. */
  @-moz-document url-prefix() {
    body::after {
      content: "Patientvejledninger – Nordsjællands Øjenklinik  ·  tlf. 4825 4011  ·  www.nsok.dk";
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-family: -apple-system, "Segoe UI", Arial, sans-serif;
      font-size: 8pt;
      color: #6b6b6b;
      padding: 4pt 0;
      border-top: 0.5pt solid #ccc;
      background: #fff;
    }
    /* Giv plads så indhold ikke lander oven på den faste footer */
    body { margin-bottom: 0.9cm; }
  }
}