/* Responsive layout for small screens (<= 768px).
   The desktop Muse layout (>= 768px) is intentionally left untouched.
   This file is shared by all main pages via <link> so the rules live in one place.
   It only contains overrides; selectors that don't exist on a given page simply do nothing. */

@media only screen and (max-width: 768px) {

  /* ---------- Page shell (every page) ---------- */
  #page {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 24px !important;
  }
  .css_verticalspacer .verticalspacer { order: 9; height: 0 !important; min-height: 0 !important; }

  /* ---------- Shared header elements (the content pages + welcome share these) ---------- */
  #menuu869 {
    order: 2;
    float: none !important; display: block !important; position: relative !important;
    left: 0 !important; right: auto !important; top: 0 !important;
    width: 100% !important; max-width: 260px !important; height: auto !important;
    margin: 16px auto 0 !important; min-height: 0 !important;
  }
  #menuu869 .MenuItemContainer,
  #menuu869 .MenuItem,
  #menuu869 .MenuItemLabel {
    float: none !important; display: block !important; position: relative !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; max-width: 100% !important;
    margin-right: 0 !important; min-height: 0 !important; text-align: center !important;
  }
  #u1110 { /* small palette logo */
    order: 1;
    float: none !important; display: block !important; position: relative !important;
    left: 0 !important; right: auto !important; top: 0 !important;
    width: 30% !important; max-width: 120px !important;
    margin: 8px auto 14px !important; min-height: 0 !important;
  }
  #u1123-4 { /* "Een kleurrijk palet" brand heading */
    order: 3;
    float: none !important; display: block !important; position: relative !important;
    left: 0 !important; right: auto !important; top: 0 !important;
    width: 100% !important; max-width: 100% !important; min-height: 0 !important;
    text-align: center !important; font-size: 40px !important; line-height: 46px !important;
    margin: 12px auto 6px !important;
  }
  #u1123-4 p { font-size: 40px !important; line-height: 46px !important; }

  /* ========== Welcome page (index.html) ========== */
  #pu736 { display: flex; flex-direction: column; align-items: center; width: 100%; }
  #u736 { display: none !important; }
  #u2999-4 { /* "Welkom bij" */
    order: 1; float: none !important; position: relative !important;
    left: 0 !important; width: auto !important; margin: 18px 0 0 !important;
    text-align: center; font-size: 20px; line-height: 26px;
  }
  #u1638-4 { /* big "Een kleurrijk palet" */
    order: 2; float: none !important; position: relative !important;
    left: 0 !important; width: 100% !important; min-height: 0 !important;
    margin: 6px 0 0 !important; text-align: center; font-size: 38px; line-height: 44px;
  }
  #u1644 { /* palette image */
    order: 3; float: none !important; position: relative !important;
    left: 0 !important; width: 55% !important; max-width: 220px; margin: 18px auto 0 !important;
  }
  #menuu2588 {
    order: 4; float: none !important; position: relative !important;
    left: 0 !important; width: 100% !important; max-width: 260px; height: auto !important;
    margin: 22px auto 0 !important;
  }
  #menuu2588 .MenuItemContainer,
  #menuu2588 .MenuItem,
  #menuu2588 .MenuItemLabel {
    float: none !important; position: relative !important; left: 0 !important;
    width: 100% !important; margin-right: 0 !important; text-align: center !important;
  }
  #u1641-4 { /* "Praktijk voor beeldende therapie in Groningen" */
    float: none !important; position: relative !important; left: 0 !important;
    width: 100% !important; min-height: 0 !important; margin: 18px auto 0 !important;
    text-align: center; font-size: 24px; line-height: 30px;
  }

  /* ========== Flat content page (wat-is-beeldende-therapie.html) ========== */
  #u1130 { display: none !important; }
  #u1136-25, #u1139 {
    float: none !important; display: block !important; position: relative !important;
    left: 0 !important; right: auto !important; top: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important; min-height: 0 !important;
  }
  #u1136-25 { order: 4; width: 100% !important; max-width: 100% !important; margin-top: 22px !important; }
  #u1139 { order: 5; width: 55% !important; max-width: 150px !important; margin: 18px auto 0 !important; }
  #u3087 { display: none !important; } /* decorative magnifier icon */

  /* ========== Two-column content pages (#pu1110 / #pu1123-4) ========== */
  #pu1110, #pu1123-4 {
    float: none !important; display: block !important; position: relative !important;
    left: 0 !important; right: auto !important; top: 0 !important;
    width: 100% !important; max-width: 100% !important; margin: 0 auto !important; min-height: 0 !important;
  }
  #pu1110 .colelem, #pu1110 .grpelem,
  #pu1123-4 .colelem, #pu1123-4 .grpelem {
    float: none !important; display: block !important; position: relative !important;
    left: 0 !important; right: auto !important; top: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important; min-height: 0 !important;
  }
  #pu1110 #u1110 { margin: 8px auto 14px !important; }   /* re-center logo inside the column */
  #pu1110 #menuu869 { margin: 16px auto 0 !important; }  /* re-center menu inside the column */
  #pu1110 > .colelem:not(#u1110):not(#menuu869) { width: 100% !important; max-width: 100% !important; margin-top: 16px !important; }
  #pu1110 .clip_frame.grpelem { width: 55% !important; max-width: 150px !important; margin: 14px auto 0 !important; }
  #pu1110 .clip_frame.grpelem:has(img[src*="vergrootglas"]) { display: none !important; }
  #pu1110 img[src*="vergrootglas"] { display: none !important; }
  #pu1123-4 .colelem, #pu1123-4 .grpelem { width: 100% !important; max-width: 100% !important; }
  #pu1123-4 img { max-width: 100% !important; height: auto !important; }
}