/* =========================================================================
   oer-zoom-fix.css
   WCAG 1.4.4 (Resize Text 200%) remediation for https://oer.lib.polyu.edu.hk
   Text containers must wrap or scroll instead of clipping or spilling over
   sibling UI. Link after PolyU_OER.css. Rules that must beat page-level
   inline <style> blocks use !important.
   ========================================================================= */

/* 1. Carousel cards (POLYU OER / FEATURED OER / AI OER / related items).
      .card.featured_oer_box { max-height: 500px } + .h-10 { height:100% }
      cap each card so enlarged titles/authors are cropped and spill past
      the row's overflow:hidden row into the next section. Lift the cap and
      let cards grow; long words break instead of forcing width. */
.card.featured_oer_box { max-height: none !important; }
.featured_oer_box .card-body { overflow-wrap: break-word; word-break: break-word; }
.featured_oer_box [name="oer_author"] { overflow-wrap: break-word; }

/* 2. Discipline tiles ("OER BY POLYU DISCIPLINES"): the label is an absolute
      overlay with height:100% inside an overflow:hidden 1:1 tile, so longer
      or enlarged labels are cut (e.g. "Computer and Mathematical Sciences").
      The label's flex utility makes its text non-wrapping; render it as a
      normal block, break long words, and let the overlay scroll internally
      if the wrapped label still exceeds the tile. Bottom-alignment of the
      label is dropped in favour of no content loss. */
.discipline_icon_text {
  display: block !important;
  line-height: 1.3 !important;
  overflow: auto !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* 3. "OER BY POLYU DISCIPLINES" mega menu: fixed 580px panel with nowrap
      pills. Let pills wrap inside the panel and give the panel a scroll
      fallback so it never overlaps the content below. */
.floating-collapse-menu { max-height: 85vh; overflow: auto; }
.discipline-pill { white-space: normal !important; max-width: 100%; }

/* 4. Buttons: Bootstrap .btn is white-space:nowrap, which overflows
      sidebars (work page "View Resource", "Export To Resource List") and
      the navbar pill ("What is OER?") once text is enlarged. Buttons may
      wrap their label instead. */
.btn { white-space: normal; overflow-wrap: break-word; }
.btn.my-2.my-sm-0 { white-space: normal; overflow-wrap: break-word; }
/* 4b. Navbar collapse may wrap (so the "What is OER?" form can drop to its
      own line inside the viewport) and its button's inline 15 % side padding
      is reduced to 1rem so the label is not squeezed when it wraps. */
.navbar .navbar-collapse { flex-wrap: wrap; }
.navbar form.form-inline { max-width: 100%; }
nav form.form-inline .btn.my-2.my-sm-0 { padding-left: 1rem !important; padding-right: 1rem !important; }

/* 5. Footer links use nowrap and overlap each other / are cut. */
.footer_text, .footer_text_end { white-space: normal !important; overflow-wrap: break-word; }

/* 6. Work page "License" panel: long tokens such as
      "Attribution-NonCommercial-NoDerivatives" spill over the panel border. */
.item_license { max-width: 100%; }
.item_license dd, .item_license dd a { overflow-wrap: anywhere; word-break: break-word; }

/* 7. Home banner caption box: long titles wrap inside the box. */
.swiper-desc-box { overflow-wrap: break-word; }

/* 8. Work page "You may also be interested in" bar: the "VIEW MORE" link is
      floated right inside a fixed-height paragraph; when the text wraps at
      200% the float escapes the box. Contain the float so the bar grows. */
#interested_item { display: flow-root; overflow-wrap: break-word; }