/*!
 * erwb-print.css — English Refresher print stylesheet
 * Serves every lesson-unit page on englishrefresher.com:
 *   .erlp  teacher lesson plans
 *   .erwb  student workbooks + listening sections
 *   .errd  reading pages
 *   .er-rl reading pages (older scope, bare child class names)
 *
 * Deployed to: /wp-content/uploads/erwb-print.css
 * Canonical source: website\Website Lesson Units\_ENGINE\erwb-print.css
 *
 * EVERYTHING lives inside the single @media print block below. Nothing in this
 * file may affect screen rendering — that is verified by a before/after
 * screenshot diff, not by inspection.
 *
 * Declarations use !important throughout. The <link> to this file sits beside
 * the fragment's Google Fonts link, which puts it BEFORE the fragment's own
 * <style>, so equal-specificity rules would otherwise lose.
 *
 * Companion: erwb-print.js opens every <details> before printing. Chrome does
 * not render collapsed <details> content at all, so CSS alone cannot recover
 * the teacher stage plans and scripts.
 */

/* ------------------------------------------------------------------
   SCREEN — the print button only.
   This is the one thing in this file that renders on screen. It is scoped
   strictly to [data-er-print], an attribute that exists nowhere in the site
   before this build, so it cannot alter any existing page. The button is
   hidden again inside the @media print block below. Every declaration carries
   !important and every state is named: Astra styles bare <button> elements and
   forces its own colour on :hover, which otherwise wins.
   ------------------------------------------------------------------ */
/* `display` is deliberately NOT in the multi-state group below. A state
   selector like [data-er-print]:focus is (0,2,0) and would outrank the
   (0,1,0) `display:none` in the print block - and the button IS focused at
   print time when the reader printed BY CLICKING IT, which is the normal
   path. The button then printed on the page. Keep display on the bare
   attribute selector only, and hide it at matching specificity in print. */
[data-er-print],
[data-er-print]:link,
[data-er-print]:visited,
[data-er-print]:hover,
[data-er-print]:focus,
[data-er-print]:active,
[data-er-print]:focus-visible {
  font: 600 13px/1 'DM Sans', system-ui, sans-serif !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  color: #fff !important;
  padding: 8px 15px !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  min-height: 34px !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #fff !important;
}
[data-er-print] { display: inline-flex !important; background: rgba(255,255,255,.12) !important; }
[data-er-print]:hover,
[data-er-print]:focus,
[data-er-print]:active { background: rgba(255,255,255,.22) !important; }
[data-er-print]:focus-visible { outline: 2px solid #F5C842 !important; outline-offset: 2px !important; }

@media print {

  /* ---------------------------------------------------------------
     A. Site chrome — the WordPress page around the pasted fragment
     --------------------------------------------------------------- */
  #masthead, .site-header, .ast-above-header, .ast-below-header,
  .ast-main-header-wrap, .main-header-bar, .ast-mobile-header-wrap,
  #colophon, .site-footer, .ast-small-footer, .footer-adv,
  #ast-scroll-top, .ast-scroll-to-top-wrap,
  .elementor-location-header, .elementor-location-footer,
  .cmplz-cookiebanner, .cmplz-manage-consent, #cmplz-manage-consent,
  #wpadminbar, .ast-breadcrumbs-wrapper, .breadcrumb,
  .entry-header, .post-navigation, .comments-area,
  .ast-sidebar-container, #secondary {
    display: none !important;
  }

  /* The wrappers WordPress puts around the pasted widget. Astra's separate-
     container style frames the article as a bordered card and Elementor's own
     wrappers can carry a border too. A border on a box that spans several
     sheets draws its side rules down EVERY page, so two nested wrappers print
     a double bar down both margins - which is what the live lesson plan did.
     Strip the frames, not just the spacing. */
  html, body, #page, #content, #primary, main, article,
  .site-content, .ast-container, .ast-article-single, .ast-article-post,
  .entry-content, .ast-separate-container .ast-article-single,
  .elementor, .elementor-section-wrap, .elementor-section, .elementor-container,
  .elementor-column, .elementor-column-wrap, .elementor-widget,
  .elementor-widget-wrap, .elementor-widget-container, .elementor-element {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    float: none !important;
  }

  @page { size: A4; margin: 15mm; }

  /* ---------------------------------------------------------------
     B. Ink-light base — white ground, black text, hairline rules
     --------------------------------------------------------------- */
  .erlp, .erwb, .errd, .er-rl {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt !important;
    line-height: 1.45 !important;
  }

  /* Ink-light means ink-light everywhere. Two failures this catches, both seen
     in the first render pass:
       - panel fills (mint can-do boxes, cream cards) survive `background-image:none`
         because they are background-COLOR;
       - a dark card whose text is white goes INVISIBLE once its fill is removed.
         The teacher pages' featured-reading card printed as a blank box.
     So: strip every background and force every colour to black, then hand a few
     deliberately-muted elements their grey back further down. */
  .erlp *, .erwb *, .errd *, .er-rl * {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-fill-color: currentColor;
    transition: none !important;
    animation: none !important;
  }

  /* Decorative pseudo-element glows and gradient washes */
  .erlp *::before, .erlp *::after,
  .erwb *::before, .erwb *::after,
  .errd *::before, .errd *::after,
  .er-rl *::before, .er-rl *::after {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Inline emphasis carries its own colour token in most fragments, and those
     rules outrank the `.scope *` reset on specificity. Name them directly. */
  .erlp b, .erlp strong, .erlp em, .erlp i, .erlp a, .erlp span, .erlp code,
  .erwb b, .erwb strong, .erwb em, .erwb i, .erwb a, .erwb span, .erwb code,
  .errd b, .errd strong, .errd em, .errd i, .errd a, .errd span, .errd code,
  .er-rl b, .er-rl strong, .er-rl em, .er-rl i, .er-rl a, .er-rl span, .er-rl code {
    color: #000 !important;
  }
  .errd mark, .er-rl mark { background: none !important; color: #000 !important; font-weight: 600 !important; }

  /* Rules and separators print grey, not gold. Declared here so the explicit
     black borders further down (tick boxes, answer lines, session rules) still
     win - they are all later and more specific. */
  .erlp *, .erwb *, .errd *, .er-rl *, hr { border-color: #999 !important; }

  /* Secondary text keeps a lighter grey so hierarchy survives on paper */
  .erlp-lead, .erlp-note, .erlp-eyebrow, .erlp-kicker, .erlp-stage-time,
  .erwb-instr, .erwb-eyebrow, .erwb-sub,
  .errd-eyebrow, .errd-sourcenote, .errd-fig figcaption, .errd-figph figcaption,
  .er-rl .kicker, .er-rl .h2-sub, .er-rl-fig .brief {
    color: #555 !important;
  }

  .erlp-wrap, .erwb-wrap, .errd-wrap, .er-rl .wrap {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .erlp-sec, .er-rl section { padding: 10pt 0 !important; }

  /* Heroes flatten into a plain title block */
  .erlp-hero, .erwb-hero, .errd-hero, .er-rl-hero {
    background: #fff !important;
    color: #000 !important;
    padding: 0 0 8pt !important;
    border-bottom: 2px solid #000 !important;
    margin-bottom: 14pt !important;
    text-align: left !important;
    overflow: visible !important;
  }
  .erlp-hero::after, .errd-hero::after, .er-rl-hero .glow { display: none !important; }

  .erlp-hero h1, .erwb-hero h1, .errd-hero h1, .er-rl-hero h1 {
    color: #000 !important;
    font-size: 20pt !important;
    line-height: 1.15 !important;
    margin: 0 0 4pt !important;
  }
  .er-rl-hero h1 em { color: #000 !important; }
  .erlp-hero p, .erwb-hero p, .errd-hero .standfirst, .er-rl-hero .lead {
    color: #333 !important;
    font-size: 10pt !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .erlp-eyebrow, .erwb-eyebrow, .errd-eyebrow, .er-rl-hero .eb {
    color: #555 !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 8pt !important;
    margin-bottom: 4pt !important;
  }
  .erlp-chip, .erwb-pill, .errd-chip, .er-rl-hero .chip {
    background: none !important;
    border: 1px solid #999 !important;
    color: #000 !important;
    font-size: 8.5pt !important;
    padding: 2pt 6pt !important;
  }
  .erlp-chip strong { color: #000 !important; }

  /* Headings and panels */
  .erlp h2, .erlp h3, .erlp h4,
  .erwb h2, .erwb h3, .erwb h4,
  .errd h2, .errd h3, .errd h4,
  .er-rl .h2, .er-rl h3 {
    color: #000 !important;
  }
  .erlp h2, .errd-article h2, .er-rl .h2 { font-size: 14pt !important; }
  .erlp h3, .er-rl-read h3 { font-size: 12pt !important; }
  .er-rl .h2, .er-rl .kicker, .er-rl .h2-sub { text-align: left !important; }

  /* A full box is only for blocks that reliably fit on one page. A border on a
     tall container that spans several sheets draws its side rules down EVERY
     page, and nesting two of them prints a double bar down both margins. */
  .erlp-card, .erlp-gram, .erlp-callout, .erlp-note,
  .erlp-model, .erlp-feature, .erlp-gcard, .erlp-ex,
  .erwb-audio-box, .erwb-modelbox, .erwb-instr, .erwb-reading,
  .errd-preread, .errd-glossary,
  .er-rl .card, .er-rl .q, .er-rl-fig {
    background: #fff !important;
    border: 1px solid #999 !important;
    border-radius: 0 !important;
    color: #000 !important;
  }
  .erlp-body > .erlp-sec:nth-of-type(even),
  .erlp-body > .erlp-sec:nth-of-type(even) .erlp-card,
  .erlp-body > .erlp-sec:nth-of-type(even) .erlp-gram { background: #fff !important; }

  /* Tall containers: a rule above, never a frame around */
  .erlp-stage, .erlp-script, .erwb-task, .er-rl-read .part {
    border: 0 !important;
    border-top: 1px solid #999 !important;
    border-radius: 0 !important;
    background: #fff !important;
    padding: 8pt 0 0 !important;
    margin: 10pt 0 0 !important;
  }
  .erlp-session {
    border: 0 !important;
    border-bottom: 1.5pt solid #000 !important;
    padding: 12pt 0 3pt !important;
    margin: 0 0 6pt !important;
    font-size: 13pt !important;
  }
  .errd-pull { border: 0 !important; border-left: 3pt solid #000 !important; padding-left: 10pt !important; }

  .erlp-tag, .erwb-sub, .erlp-kicker, .erwb-num, .er-rl .kicker {
    background: none !important;
    color: #000 !important;
    border: 0 !important;
    padding: 0 !important;
  }
  .erwb-task-head { background: #fff !important; border-bottom: 1px solid #000 !important; }

  .erlp-ftable, .erlp table, .erwb table, .errd table, .er-rl table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  .erlp-ftable td, .erlp td, .erlp th,
  .erwb td, .erwb th, .errd td, .errd th, .er-rl td, .er-rl th {
    border: 1px solid #999 !important;
    padding: 4pt 6pt !important;
    font-size: 9.5pt !important;
  }

  /* Images stay, but bounded so a figure cannot own a whole sheet. `width:auto`
     with a max-height leaves the image narrower than its container, so the
     figure box must centre it rather than framing a band of white. */
  .errd-fig img, .erlp img, .erwb img, .er-rl img {
    max-height: 90mm !important;
    width: auto !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
  }
  .errd-fig, .er-rl-fig, .erwb figure {
    border: 0 !important;
    text-align: center !important;
    overflow: visible !important;
  }
  .er-rl-fig .slot { aspect-ratio: auto !important; padding: 0 !important; }

  /* Body copy that carries a colour token of its own outranks the scope reset */
  .er-rl-read p, .er-rl-read .lead-p, .er-rl-read h3 .n,
  .errd-article p, .errd-article p.lead, .errd-article strong,
  .erlp-ex b, .erlp-cando li b, .erwb-qt b, .erwb-q b {
    color: #000 !important;
  }

  /* Links print as plain text — a printed URL is noise */
  .erlp a, .erwb a, .errd a, .er-rl a {
    color: #000 !important;
    text-decoration: none !important;
  }

  /* ---------------------------------------------------------------
     C. Break control — the fix for the reported symptom
     --------------------------------------------------------------- */
  /* `break-inside: avoid` belongs ONLY on blocks shorter than a page. Put it on
     a tall one and the whole block is shunted to the next sheet, leaving half a
     page blank - which is what made this lesson plan run to 11 pages. */
  .erwb-fc, .erwb-audio-box, .erwb-q, .erwb-order, .erwb-sort,
  .erlp-gcard, .erlp-callout, .erlp-model, .erlp-ex,
  .errd-fig, .errd-figph, .errd-preread, .errd-pull,
  .er-rl .card, .er-rl .q, .er-rl-fig,
  tr, figure, blockquote, li {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Tall containers must be free to split, or they waste a sheet each */
  .erlp-stage, .erlp-script, .erlp-sec, .erlp-body, .erwb-task, .erwb-task-body,
  .erlp-card, .erlp-gram,
  .errd-article, .er-rl section, .er-rl-read .part, table, .erlp-grid2 {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  h1, h2, h3, h4,
  .erwb-task-head, .erlp-stage-head, .erwb-sub, .erlp-kicker, .er-rl .kicker {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  .erlp p, .erlp li, .erwb p, .erwb li, .errd p, .errd li, .er-rl p, .er-rl li {
    orphans: 3 !important;
    widows: 3 !important;
  }

  /* A drop cap that splits across a page break looks broken */
  .errd-drop::first-letter { float: none !important; font-size: inherit !important; padding: 0 !important; color: #000 !important; }

  /* ---------------------------------------------------------------
     D. Blank-worksheet transform — .erwb / .errd / .er-rl ONLY.
        Teacher pages are deliberately exempt: an answer key is the
        point of a lesson plan.
     --------------------------------------------------------------- */

  /* Interactive controls and machine feedback never print */
  .erwb-btn, .erwb-check, .erwb-reset, .erwb-ghost, .erwb-gold,
  .erwb-progress, .erwb-scorecard, .erwb-fb, .erwb-result, .erwb-toggle,
  .erwb-wc, .erwb-final, .erwb-nav, .erwb-readlink,
  .er-rl .btn, .er-rl .scorebar, .er-rl .fb, .er-rl .result, .er-rl .again,
  .er-rl-cta, .er-rl-game,
  audio, video, [data-erwb="score"], [data-erwb="reset-all"],
  [data-erwb="reset-orders"], [data-erwb="shuffle"] {
    display: none !important;
  }

  /* Typed answers do not print — this is a blank handout */
  .erwb input[type="text"], .errd input[type="text"], .er-rl input[type="text"],
  .erwb-fill input {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-width: 3.5cm !important;
    max-width: 100% !important;
    height: 18pt !important;
  }
  /* The placeholder carries the task hint ("-ing verb", "one word") and is
     worth keeping on paper. It shows only when the field is empty, which is
     the blank-worksheet case. */
  .erwb-fill input::placeholder { color: #666 !important; -webkit-text-fill-color: #666 !important; opacity: 1 !important; }

  /* Radios become tick boxes */
  .erwb-opt, .errd .erwb-opt {
    background: #fff !important;
    border: 0 !important;
    padding: 2pt 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 6pt !important;
  }
  .erwb-opt.sel, .erwb-opt.correct, .erwb-opt.incorrect {
    background: #fff !important;
    border: 0 !important;
  }
  .erwb-opt input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 4mm !important;
    height: 4mm !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: #fff !important;
    flex: none !important;
    margin-top: 1.5pt !important;
  }
  /* .er-rl options are <button> elements, not radios */
  .er-rl .opt {
    background: #fff !important;
    border: 0 !important;
    padding: 2pt 0 2pt 7mm !important;
    position: relative !important;
    transform: none !important;
    font-size: 10pt !important;
    color: #000 !important;
  }
  .er-rl .opt::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 3pt !important;
    width: 4mm !important;
    height: 4mm !important;
    border: 1px solid #000 !important;
  }

  /* Ordering tasks: the answer strip prints as an empty ruled slot,
     the pool prints as a word bank */
  .erwb-answer {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    min-height: 12mm !important;
    padding: 0 !important;
  }
  .erwb-answer .erwb-chip { display: none !important; }
  .erwb-answer:empty::before, .erwb-answer::before {
    content: attr(data-ph) !important;
    color: #666 !important;
    font-size: 8.5pt !important;
  }
  .erwb-pool, .erwb-sort-pool {
    border: 1px solid #999 !important;
    padding: 5pt !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4pt !important;
  }
  .erwb-chip, .erwb-stoken {
    background: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    color: #000 !important;
    padding: 2pt 5pt !important;
    font-size: 9.5pt !important;
    min-height: 0 !important;
  }
  .erwb-chip::before { content: none !important; }

  /* Sorting bins print empty and labelled */
  .erwb-bin { border: 1px solid #000 !important; background: #fff !important; border-radius: 0 !important; }
  .erwb-bin-drop { min-height: 18mm !important; background: #fff !important; }
  .erwb-bin-drop .erwb-stoken { display: none !important; }

  /* Free writing gets ruled lines instead of a textarea */
  .erwb-write {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background: repeating-linear-gradient(#fff 0, #fff 9mm, #000 9mm, #000 9.15mm) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: 74mm !important;
    min-height: 0 !important;
    padding: 0 !important;
    resize: none !important;
  }

  /* Flashcards print with both faces showing — a paper flashcard that only
     shows the front is useless */
  .erwb-fc { border: 1px solid #999 !important; background: #fff !important; }
  .erwb-fc-front, .erwb-fc-back { background: #fff !important; color: #000 !important; }
  .erwb-fc-grid { display: block !important; }

  /* ---------------------------------------------------------------
     E. Teacher pages — everything prints, including answer keys
     --------------------------------------------------------------- */
  .erlp-akey, .erlp-script, .erlp-script-body, .erlp-stage-body {
    display: block !important;
    background: #fff !important;
    color: #000 !important;
  }
  .erlp-caret { display: none !important; }
  .erlp-btn, .erlp-cta, .erlp-games .erlp-btn { display: none !important; }
  .erlp .right { color: #000 !important; }
  .erlp .wrong { color: #000 !important; text-decoration: line-through !important; }
  .erlp-audio { display: none !important; }

  /* <details> are forced open by erwb-print.js; make sure nothing in the
     fragment's own CSS re-hides the body once it is open */
  details[open] > *, details > summary { display: block !important; }

  /* The print button, at every state. See the note on the screen block above:
     matching each state here is what keeps a focused button off the paper. */
  [data-er-print],
  [data-er-print]:link,
  [data-er-print]:visited,
  [data-er-print]:hover,
  [data-er-print]:focus,
  [data-er-print]:active,
  [data-er-print]:focus-visible {
    display: none !important;
  }
}