/* additions to the frozen copy (scripts/cleanup.py) */

/* YouTube "click to play" (assets/js/youtube.js): preview image until a click */
.yt { position: relative; width: 100%; margin: 10px auto; background: #000 center / cover no-repeat; cursor: pointer; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border: 0; border-radius: 12px; background: #e1251b; cursor: pointer; }
.yt-play::after { content: ""; position: absolute; top: 14px; left: 27px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }

/* embeds that no longer exist */
.video-gone { margin: 10px 0; color: #666; }

/* phones (viewport tag added 2026-11): the Drupal theme was a fixed 980px page; below 960px it
   becomes one fluid column (phones and tablets, below 960px). Desktop is untouched. */
@media only screen and (max-width: 959px) {
  body { overflow-x: hidden; }
  .container, .container .columns, .container .column { width: auto !important; max-width: 100%; float: none; margin-left: 0; margin-right: 0; }
  #wrapper.container { margin: 0 10px; }
  #container { padding-bottom: 40px; }
  img, iframe, video, embed, object { max-width: 100%; height: auto; }
  .yt { max-width: 100% !important; }
  .content table { display: block; max-width: 100%; overflow-x: auto; }
  .content p, .content ul, .content div { max-width: 100%; }
  p[style*="width"], div[style*="width"], p[style*="padding-left"] { width: auto !important; padding-left: 0 !important; }
  .sub-title, span[style*="width"] { width: auto !important; max-width: 100%; }
  #main .content { overflow-wrap: anywhere; }
  /* the two "cloud" pages (/diversiteit/leren-in-diversiteit, -voor-): links placed on a fixed 853px
     picture; the box scrolls sideways instead of misplacing them */
  .page-node-240 .node .content, .page-node-275 .node .content { overflow-x: auto; }
  .page-node-240 .node img, .page-node-275 .node img { max-width: none; }
  /* header: logo, search, menu stacked */
  #header { height: auto; padding-bottom: 12px; }
  #header #logo { margin-top: 12px; }
  #header #logo img { width: 150px; height: auto; }
  #header ul.menu { margin-top: 10px; overflow: hidden; }
  #header ul.menu li { margin-bottom: 6px; }
  #header #block-search-form { float: none; margin-top: 10px; }
  #header #block-search-form .form-type-textfield { width: auto; }
  #header input[type="text"] { width: 150px; }
  /* blue band + page */
  #slideshow, .front #slideshow, .page-oefeningen #slideshow { height: auto; }
  .not-front #slideshow { height: 70px; }
  #slideshow #wrapper { height: auto; }
  #slideshow p { width: auto !important; }
  #slideshow .illustration { display: none; }
  .front #slideshow { padding-bottom: 60px; }
  #main, .not-front #main { margin-top: -50px; }
  .not-front #main #content { padding: 20px 14px; }
  #breadcrumb { position: static; margin: 0 0 12px; color: #555; }
  #breadcrumb a { color: #5997b8; }
  .not-front #breadcrumb { position: absolute; margin: -44px 0 0 0; color: #fff; }
  .not-front #breadcrumb a { color: #fff; }
  #body { width: auto; }
  .front #main .region { padding: 14px 0; }
  /* front: theme tiles (slider) and three columns */
  #main .themes { margin: 0 8px; }
  .bx-window { width: auto !important; height: auto !important; overflow: visible !important; }
  #main .themes, #main ul.themes { width: auto !important; left: 0 !important; position: static !important; }
  #main ul.themes li.theme { float: none !important; width: auto !important; margin-bottom: 10px; }
  #main ul.themes li.theme:not(.bx-child) { display: none; }  /* bxSlider's looping clones */
  #main .themes .theme_btn .content { margin-right: 0; position: relative; }
  #main .themes .content .title { width: auto; left: 0; right: 0; }
  .bx-wrapper .bx-prev, .bx-wrapper .bx-next { display: none !important; }
  .front #main .content .column, .front #main .columns { width: auto; }
  .front #main .six.columns, .front #main .five.columns, .front #main .four.columns { padding: 0 10px; }
  .exercise, .button, .highlight { margin-right: 10px; }
  .image_full_width img, .node img { max-width: 100%; height: auto; }
  /* footer logos */
  footer#footer .columns, footer#footer .column { float: none; }
  footer#footer img { max-width: 100%; height: auto; }
  .popup { width: auto; max-width: 260px; }
}