/* print_v3.css — fixes for Details visibility + Social card layout */

/* Page */
@page { size: A4 portrait; margin: 12mm; }
html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { background:#fff !important; color:#111827; font-size:11pt; line-height:1.45; }

/* Hide interactive UI */
.menu,
#backToTop,
.notice:not(.ok),
.tools-panel,
.reveal,
.reveal-btn,
.overlay {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

/* Header */
.preheader { position: static !important; background:#fff !important; border:0 !important; margin-bottom: 6mm; }
.preheader .wrap { padding: 0 !important; }

/* Cards */
.card { background:#fff !important; box-shadow:none !important; border:0 !important; padding:0 !important; margin-bottom: 8mm !important; }
.card, .row, .minirow { break-inside: avoid !important; }

/*
  FIX #1: In print preview some browsers still apply the mobile breakpoint
  (max-width:860px), which hides .card-body--collapsible via display:none.
  Force all collapsible card bodies to be visible in print.
*/
.card--collapsible-mobile .card-body--collapsible {
  display: block !important;
}
.card--collapsible-mobile .card-head::after {
  content: "" !important;
  display: none !important;
}

/* Ensure <details> accordions print expanded */
details.section {
  border: 0.5pt solid #e5e7eb !important;
  border-radius: 6px !important;
  overflow: visible !important;
  page-break-inside: avoid !important;
}
details.section summary {
  font-weight: 800 !important;
  padding: 6px 8px !important;
  border-bottom: 0.5pt solid #e5e7eb !important;
}
details.section summary::after { content:"" !important; display:none !important; }
/* If closed, still show content */
details.section:not([open]) > :not(summary) { display:block !important; }

/* Rows */
.minirow, .row {
  display: grid !important;
  grid-template-columns: 38% 62% !important;
  gap: 6px 10px !important;
  border-bottom: 0.5pt solid #e5e7eb !important;
  background: #fff !important;
  border-radius: 0 !important;
  padding: 6px 4px !important;
  page-break-inside: avoid !important;
}
.row label, .minirow label { font-size: 9pt !important; color:#374151 !important; margin:0 !important; align-self:start !important; }
.row .val, .minirow .val { font-weight: 600 !important; color:#111827 !important; word-break: break-word !important; }

/* Links: show URL after text */
a[href^="http"]:after {
  content: " (" attr(href) ")";
  font-weight: 400;
  font-size: 8pt;
  color: #6b7280;
  word-break: break-all;
}

/* FIX #2: Social card print layout */
#socialCard .card-head { display:none !important; }
#socialCard .card-body { padding: 0 !important; }

/* Match actual markup: .social-row, .social-left, .social-icons */
#socialCard .social-row {
  display: grid !important;
  grid-template-columns: 220px 1fr !important; /* 200px logo + spacing */
  gap: 10px 14px !important;
  align-items: start !important;
}

#socialCard .social-left {
  display: block !important;
}
#socialCard #socialLogo {
  width: 200px !important;
  max-width: 200px !important;
  height: auto !important;
  max-height: 60mm !important;
  object-fit: contain !important;
}

/* Show links as a vertical list */
#socialCard .social-icons {
  display: block !important;
  text-align: left !important;
}
#socialCard .social-icons a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 2mm 0 !important;
  text-decoration: none !important;
}
#socialCard .social-icons a svg { flex: 0 0 auto !important; }

/* For social icons, print the URL on its own line (avoid long inline parentheses) */
#socialCard .social-icons a[href^="http"]:after {
  content: "\A" attr(href) !important;
  white-space: pre-wrap !important;
  font-weight: 400 !important;
  font-size: 8pt !important;
  color: #6b7280 !important;
  word-break: break-all !important;
}