/* Layout container for the Cookie Audit tool */
.cookie-audit-layout {
    max-width: 900px;
}

/* Keep table from expanding; wrap cell contents instead */
.cookie-table {
  width: 100%;
  table-layout: fixed;
}

/* Body cells: allow wrapping anywhere so long tokens don't widen table */
.cookie-table td {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

/* Header cells: default = DO NOT wrap single-word headings */
.cookie-table th {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  vertical-align: bottom;
}

/* Allow specific headings to wrap (HttpOnly / SameSite, and any 2-word headings if you choose) */
.cookie-table th.th-wrap {
  white-space: normal !important;
}

/* Let <code> wrap in body cells */
.cookie-table td code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: inline-block;
  max-width: 100%;
}

/* ✅ Mobile: turn the table into stacked "cards" */
@media (max-width: 576px) {
  .cookie-table {
    table-layout: auto;
  }

  .cookie-table thead {
    display: none;
  }

  .cookie-table,
  .cookie-table tbody,
  .cookie-table tr,
  .cookie-table td {
    display: block;
    width: 100%;
  }

  .cookie-table tr {
    border: 1px solid var(--bs-border-color, rgba(255,255,255,.2));
    border-radius: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bs-body-bg, transparent);
  }

  .cookie-table td {
    border: 0 !important;
    padding: 0.35rem 0 !important;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
  }

  .cookie-table td::before {
    content: attr(data-label);
    font-weight: 600;
    flex: 0 0 7.5rem;
    max-width: 7.5rem;
    opacity: 0.9;
  }

  .cookie-table td code {
    max-width: 100%;
  }
}

/* =========================================================
   EMBEDDED (inside iframe): ONE vertical scrollbar only
   - Disable page scrolling
   - Make results/cards area the only scroll region
   ========================================================= */

/* Kill page/body scrolling when embedded */
html.embedded,
html.embedded body {
  height: 100%;
  overflow: hidden !important; /* important: prevent second scrollbar */
}

/* Use a header + scrollable results layout */
html.embedded .cookie-audit-main {
  height: 100vh;
}

html.embedded .cookie-audit-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}

html.embedded .cookie-audit-header {
  flex: 0 0 auto;
}

/* This is the ONE scrollbar you want (scroll through the cards/results) */
html.embedded .cookie-audit-results {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 6px; /* prevents scrollbar overlay */
}

/* Hide footer/GitHub section inside the iframe */
html.embedded .cookie-audit-footer {
  display: none !important;
}

/* Hide base template nav/footer inside the iframe to avoid extra height */
html.embedded .navbar,
html.embedded footer,
html.embedded .footer,
html.embedded .fixed-bottom {
  display: none !important;
  position: static !important;
}

/* Force the “table → cards” layout when embedded (even on desktop) */
html.embedded .cookie-table thead {
  display: none;
}

html.embedded .cookie-table {
  table-layout: auto;
}

html.embedded .cookie-table,
html.embedded .cookie-table tbody,
html.embedded .cookie-table tr,
html.embedded .cookie-table td {
  display: block;
  width: 100%;
}

html.embedded .cookie-table tr {
  border: 1px solid var(--bs-border-color, rgba(255,255,255,.2));
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--bs-body-bg, transparent);
}

html.embedded .cookie-table td {
  border: 0 !important;
  padding: 0.35rem 0 !important;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
}

html.embedded .cookie-table td::before {
  content: attr(data-label);
  font-weight: 600;
  flex: 0 0 7.5rem;
  max-width: 7.5rem;
  opacity: 0.9;
}

html.embedded .cookie-table td > * {
  min-width: 0;
}