/* Worksheet Watermark & Universal Branding Stylesheet */
.cp-preview-watermark-container {
  position: relative !important;
}

/* Diagonal Semi-Transparent Watermark for Free / Guest Users */
.cp-free-watermark-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

.cp-free-watermark-text {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  color: rgba(11, 75, 78, 0.085);
  transform: rotate(-30deg);
  white-space: nowrap;
  letter-spacing: 4px;
  text-transform: uppercase;
  border: 4px dashed rgba(11, 75, 78, 0.07);
  padding: 18px 48px;
  border-radius: 20px;
}

/* Prevent nested duplicate watermarks and brand headers */
.cp-preview-watermark-container .cp-preview-watermark-container .cp-universal-brand-header,
.cp-preview-watermark-container .cp-preview-watermark-container .cp-free-watermark-overlay,
.cp-preview-watermark-container .cp-print-quad .cp-universal-brand-header,
.cp-preview-watermark-container .cp-print-quad .cp-free-watermark-overlay {
  display: none !important;
}

/* Universal Brand Header Strip for Interactive Worksheets */
.cp-universal-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid #0b4b4e;
  width: 100%;
  box-sizing: border-box;
}

.cp-brand-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-brand-logo-img {
  max-height: 42px;
  max-width: 140px;
  object-fit: contain;
  vertical-align: middle;
}

.cp-brand-text {
  font-family: 'Fredoka', cursive, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #0b4b4e;
}

.cp-brand-right-badge {
  font-size: 0.78rem;
  font-weight: 800;
  background: #0b4b4e;
  color: #ffffff;
  padding: 3px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Accessibility & Layout Modes */
.cp-accessible-dyslexia,
.cp-accessible-dyslexia * {
  letter-spacing: 0.05em !important;
  line-height: 1.65 !important;
  word-spacing: 0.12em !important;
}
.cp-accessible-large {
  font-size: 1.14em !important;
}
.cp-accessible-large .ws-interactive-q-card {
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
}
.cp-accessible-contrast {
  color: #000000 !important;
  background: #ffffff !important;
}
.cp-accessible-contrast * {
  border-color: #000000 !important;
  color: #000000 !important;
}

/* Universal Pedagogical SEO & FAQ Section */
.studio-seo-section {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 48px 24px;
  width: 100%;
  box-sizing: border-box;
}
.seo-container { max-width: 1200px; margin: 0 auto; }
.seo-grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start; }
.seo-sub-badge {
  font-size: 11px;
  font-weight: 800;
  color: #0b4b4e;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.seo-heading { font-size: 26px; font-weight: 800; color: #0f172a; margin: 8px 0 14px; line-height: 1.3; }
.seo-intro { font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 24px; }
.seo-feature-list { display: flex; flex-direction: column; gap: 20px; }
.seo-feature-item { display: flex; gap: 14px; }
.seo-feat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.seo-feature-item h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: #0f172a; }
.seo-feature-item p { margin: 0; font-size: 13px; color: #64748b; line-height: 1.5; }

/* FAQ Card */
.faq-accordion-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
}
.faq-card-title { margin: 0 0 16px; font-size: 16px; font-weight: 800; color: #0f172a; }
.faq-item {
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 0;
}
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-question {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  outline: none;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "+";
  font-size: 16px;
  color: #0b4b4e;
  font-weight: 800;
}
details[open] .faq-question::after {
  content: "–";
}
.faq-answer {
  padding-top: 8px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .seo-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   UNIVERSAL GOLD-STANDARD SIDEBAR PEDAGOGICAL / GOLDEN RULE CARD
   Matches the Picture Vocabulary and Reading Comprehension reference standards
   ========================================================================== */
.sidebar-info-card,
.sidebar-pedagogical-card {
  background: linear-gradient(135deg, #fffdf5 0%, #fef9c3 100%) !important;
  border: 1.5px solid #f59e0b !important;
  border-radius: 12px !important;
  padding: 13px 15px !important;
  margin: 16px 0 !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.08) !important;
}
.sidebar-info-card .info-card-header,
.sidebar-pedagogical-card .info-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  color: #92400e !important;
  font-size: 12px !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.sidebar-info-card .info-icon,
.sidebar-pedagogical-card .info-icon {
  font-size: 16px !important;
}
.sidebar-info-card p,
.sidebar-pedagogical-card p {
  margin: 0 !important;
  color: #78350f !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

/* Strict Print Rules: Preserve branding and watermark on physical print & print-to-PDF */
@media print {
  .studio-seo-section { display: none !important; }
  @page {
    size: A4 portrait;
    margin: 8mm 10mm 8mm 10mm;
  }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Completely suppress all website chrome, navigation, headers, footers, sidebars */
  header, footer, nav, aside,
  .dx-header, .dx-footer, .site-header, .site-footer,
  #scrollProgress, #searchDrawer, #searchOverlay, .menu-btn, .mobile-nav,
  /* All tool top header banners */
  .hw-header, .rc-header, .mz-header, .ws-header, .sdk-header, .cbn-header,
  .dtd-header, .ms-header, .fc-header, .pc-header, .lt-header, .wl-header,
  .ck-header, .mp-header, .og-header, .wst-header, .clk-header, .mc-header,
  [class*="-header"]:not([class*="-sheet-header"]):not(.cp-universal-brand-header):not(#sheetBrandDisplay),
  /* All sidebars & settings panels */
  .hw-panel, .rc-panel, .mz-panel, .ws-panel, .sdk-panel, .cbn-panel,
  .dtd-panel, .ms-panel, .fc-panel, .pc-panel, .lt-panel, .wl-panel,
  .ck-panel, .mp-panel, .og-panel, .og-sidebar, .wst-panel, .clk-panel, .mc-panel,
  [class*="-panel"],
  [class*="-sidebar"],
  /* All category pills & toolbars */
  .hw-preview-toolbar, .rc-toolbar, .mz-toolbar, .ws-toolbar, .sdk-toolbar,
  .cbn-toolbar, .dtd-toolbar, .ms-toolbar, .fc-toolbar, .pc-toolbar,
  .lt-preview-toolbar, .wl-preview-toolbar, .ck-preview-toolbar, .mp-preview-toolbar,
  .og-toolbar, .og-preview-toolbar, .og-progress-container,
  [class*="-preview-pane"] > div:first-child:not([class*="-sheet"]):not(.cp-universal-brand-header),
  [class*="-preview-card"] > .og-preview-toolbar,
  .hw-pill, .rc-pill, .mz-pill, .ws-pill, .sdk-pill, .cbn-pill,
  .dtd-pill, .ms-pill, .fc-pill, .pc-pill, .lt-pill, .wl-pill,
  .ck-pill, .mp-pill, .og-pill,
  [class*="-pill"],
  [class*="-toolbar"],
  /* Buttons, links, inputs */
  button, input, select, textarea,
  .btn, .btn-dx, .btn-tool, .btn-chip-action, .btn-recent-print, .hw-btn-chip,
  .diff-remix-bar, .preview-toolbar, .preview-page-switcher,
  .conversational-editor-card, .library-bridge-box, .presets-container,
  .ai-studio-hero, #previewQuotaMask, #quotaOverlay, .modal-overlay,
  .cp-custom-branding-widget,
  a[href*="ai-worksheet-studio"],
  a[href*="/ai-worksheet-studio"],
  a[href*="tools-overview"],
  .back-link,
  .skip {
    display: none !important;
  }

  /* Reset outer wrapper containers so they don't produce extra heights/margins */
  .hw-root, .rc-root, .mz-root, .ws-root, .sdk-root, .cbn-root,
  .dtd-root, .ms-root, .fc-root, .pc-root, .wst-root, .lt-root,
  .clk-root, .mc-root, .ai-studio-root, .wl-root, .ck-root, .mp-root, .og-root,
  .hw-container, .rc-container, .mz-container, .ws-container, .sdk-container,
  .cbn-container, .dtd-container, .ms-container, .fc-container, .pc-container,
  .wst-container, .lt-container, .clk-container, .mc-container, .dx-wrap,
  .wl-container, .ck-container, .mp-container, .og-container,
  .hw-grid, .rc-grid, .mz-grid, .ws-grid, .sdk-grid, .cbn-grid,
  .dtd-grid, .ms-grid, .fc-grid, .pc-grid, .wst-grid, .lt-grid,
  .clk-grid, .mc-grid, .wl-grid, .ck-grid, .mp-grid, .og-grid,
  .hw-preview-pane, .rc-preview-pane, .mz-preview-pane, .ws-preview-pane,
  .sdk-preview-pane, .cbn-preview-pane, .dtd-preview-pane, .ms-preview-pane,
  .fc-preview-pane, .pc-preview-pane, .wst-preview-pane, .lt-preview-pane,
  .clk-preview-pane, .mc-preview-pane, .wl-preview-pane, .ck-preview-pane,
  .mp-preview-pane, .og-preview-card, .paper-preview-viewport {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    float: none !important;
    overflow: visible !important;
  }

  .hw-sheet, .rc-sheet, .mz-sheet, .ws-sheet, .sdk-sheet, .cbn-sheet,
  .dtd-sheet, .ms-sheet, .fc-sheet, .pc-sheet, .wst-sheet, .lt-sheet,
  .clk-sheet, .mc-sheet, .ck-sheet, .mp-sheet, .wl-sheet, .a4-sheet,
  .og-stage-outline-only {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 4mm 6mm !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .cpz-sheet-paper .cp-universal-brand-header,
  .cpz-sheet-paper .cp-free-watermark-overlay,
  .cp-preview-watermark-container .cp-preview-watermark-container .cp-universal-brand-header,
  .cp-preview-watermark-container .cp-preview-watermark-container .cp-free-watermark-overlay,
  .cp-preview-watermark-container .cp-print-quad .cp-universal-brand-header,
  .cp-preview-watermark-container .cp-print-quad .cp-free-watermark-overlay {
    display: none !important;
  }

  .cp-preview-watermark-container {
    position: relative !important;
  }
  
  .cp-free-watermark-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cp-free-watermark-text {
    color: rgba(11, 75, 78, 0.09) !important;
    border-color: rgba(11, 75, 78, 0.08) !important;
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cp-universal-brand-header {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1.5px dashed #cbd5e1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  .cp-brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    visibility: visible !important;
  }

  .cp-brand-logo-img,
  img.cp-brand-logo-img {
    visibility: visible !important;
    display: inline-block !important;
    max-height: 42px !important;
    max-width: 140px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cp-brand-text {
    visibility: visible !important;
    display: inline-block !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0b4b4e !important;
    font-family: 'Fredoka', cursive, sans-serif !important;
    vertical-align: middle !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cp-brand-right-badge {
    visibility: visible !important;
    display: inline-block !important;
    background: #0b4b4e !important;
    color: #ffffff !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #sheetBrandDisplay {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1.5px dashed #cbd5e1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #sheetBrandDisplay img,
  #sheetBrandDisplay .sheet-brand-logo-img {
    visibility: visible !important;
    display: inline-block !important;
    max-height: 42px !important;
    max-width: 140px !important;
    object-fit: contain !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #sheetBrandDisplay .sheet-brand-title {
    visibility: visible !important;
    display: inline-block !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0b4b4e !important;
    font-family: 'Fredoka', cursive, sans-serif !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ==========================================================================
     UNIVERSAL 3-COLUMN STUDIO MULTI-PAGE PRINT PAGINATION ENGINE
     Ensures all 310+ learning studios paginate naturally across multiple pages
     and prevents height clipping / truncation on print and PDF export.
     ========================================================================== */
  /* Suppress all studio UI chrome, sidebars, navigation & quota overlays */
  .studio-header,
  .studio-sidebar,
  #setupSidebar,
  #customSidebar,
  #mobileTabsBar,
  .custom-nav-tabs,
  .mobile-bottom-tabs,
  .ai-quota-mask,
  #aiQuotaMask,
  #previewQuotaMask,
  #quotaOverlay {
    display: none !important;
  }

  /* Reset outer parent wrappers so they do not clip height or pagination */
  .app-container,
  .studio-body,
  .studio-preview-wrapper {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
    float: none !important;
  }

  /* Worksheet Printable Sheet Container */
  #worksheetSheet,
  .sheet-paper {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 8mm 10mm !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
    visibility: visible !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  #worksheetSheet *,
  .sheet-paper * {
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Protect worksheet brand bar, headers and titles from accidental suppression */
  #worksheetSheet .sheet-brand-bar,
  #worksheetSheet #sheetBrandBar,
  #worksheetSheet .sheet-header,
  #worksheetSheet .sheet-title,
  #worksheetSheet .sheet-subtitle,
  #worksheetSheet .sheet-meta-block,
  #worksheetSheet .sheet-printable-footer,
  #worksheetSheet #sheetPrintableFooter,
  .sheet-paper .sheet-brand-bar,
  .sheet-paper #sheetBrandBar,
  .sheet-paper .sheet-header,
  .sheet-paper .sheet-title,
  .sheet-paper .sheet-subtitle,
  .sheet-paper .sheet-meta-block,
  .sheet-paper .sheet-printable-footer,
  .sheet-paper #sheetPrintableFooter {
    display: flex !important;
    visibility: visible !important;
  }

  #worksheetSheet .sheet-title-block,
  .sheet-paper .sheet-title-block {
    display: block !important;
    visibility: visible !important;
  }

  /* Individual question cards & exercises avoid breaking across page boundaries */
  .sheet-section,
  .sheet-q-item,
  .exercise-card,
  .problem-card,
  .problem-row,
  .grid-card,
  .puzzle-card,
  .hw-line-block,
  .hw-row-block,
  .rc-passage-card,
  .rc-vocab-box,
  .rc-extension-section {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Teacher Answer Key: Starts cleanly on a fresh printed page */
  #answerKeyBlock,
  .answer-key-section,
  .answer-key-box {
    display: block !important;
    page-break-before: always !important;
    break-before: page !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 2px solid #0f172a !important;
  }
}