/* Responsive header overrides for the static mentocreate mirror.
   Source of truth: project root. Deployed copy: site/assets/responsive-header.css
   (both must stay identical, like lightbox.css/js).

   The captured Wix desktop header is a mesh: every comp sits in grid cell 1/1
   and is placed with a fixed `left` + `margin-left`. The two columns
   (comp-k35t0s1x / comp-k35t1y80) are flex-sized, so they shrink with the
   window while the offsets do not. Measured: the logo occupies x 387-615 in a
   left column that is only 495px wide at a 1100px window, so from ~1230px down
   the logo slides over the login button and then the menu, and the section's
   min-width:980px makes everything overflow below that.

   There are two breakpoints, because two different things collide at two
   different widths.

   1680px — the `www.mentocreate.com` watermark is centred on the page, so its
   left edge sits at (100vw - 450) / 2 while the logo stays put at x 387-615.
   Measured: they touch at exactly 1680 and overlap by 84px at 1512 and 120px
   at 1440, and the watermark starts crossing the menu too from ~1600 down. So
   from 1679px the watermark drops onto its own centred line under the header
   strip. The title / logo / menu row is untouched.

   1280px — below this the logo itself starts riding over the menu, so the
   whole header becomes a centred vertical stack: title, logo, watermark, menu,
   instagram, rule. */

/* The Wix members-area login bar is dead in this static mirror (no members
   backend) — hide it at every width. */
#comp-mic12e5p {
  display: none !important;
}

/* ===== 1680px: lift the watermark off the logo and menu ===== */
@media (max-width: 1679px) {
  #SITE_HEADER,
  #SITE_HEADER > div,
  #SITE_HEADER > div > div,
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent"],
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
    height: auto !important;
  }

  /* section, watermark and rule stack instead of sharing one grid cell */
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  #SITE_HEADER #comp-k35t0rzx {
    width: 100% !important;
    margin: 0 !important;
  }
  #SITE_HEADER #comp-mq54ut2i {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    height: auto !important;
    margin: 6px 0 14px !important;
    align-self: center !important;
    text-align: center !important;
  }
  #SITE_HEADER #comp-mq54ut2i h2,
  #SITE_HEADER #comp-mq54ut2i span {
    text-align: center !important;
  }
  #SITE_HEADER #comp-k1g6uxhv {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: calc(100% - 100px) !important;
    margin: 0 !important;
    align-self: center !important;
  }
}

/* ===== 1280px: the logo starts hitting the menu — stack everything ===== */
@media (max-width: 1279px) {
  /* ---- let the header shrink below its captured minimum ---- */
  #SITE_HEADER,
  #SITE_HEADER ._c_gnD,
  #SITE_HEADER #comp-k35t0rzx {
    min-width: 0 !important;
  }

  /* ---- heights become content-driven all the way down ---- */
  #SITE_HEADER #comp-k35t0rzx,
  #SITE_HEADER [data-testid="columns"],
  #SITE_HEADER #comp-k35t0s1x,
  #SITE_HEADER #comp-k35t1y80,
  #SITE_HEADER [data-mesh-id="comp-k35t0s1xinlineContent"],
  #SITE_HEADER [data-mesh-id="comp-k35t0s1xinlineContent-gridContainer"],
  #SITE_HEADER [data-mesh-id="comp-k35t1y80inlineContent"],
  #SITE_HEADER [data-mesh-id="comp-k35t1y80inlineContent-gridContainer"] {
    height: auto !important;
  }

  /* ---- the two former columns stack ---- */
  #SITE_HEADER [data-testid="columns"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  #SITE_HEADER #comp-k35t0s1x,
  #SITE_HEADER #comp-k35t1y80 {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  #SITE_HEADER [data-mesh-id="comp-k35t0s1xinlineContent"],
  #SITE_HEADER [data-mesh-id="comp-k35t1y80inlineContent"] {
    width: 100% !important;
  }

  /* ---- replace each mesh grid with a centered column flow ---- */
  #SITE_HEADER [data-mesh-id="comp-k35t0s1xinlineContent-gridContainer"],
  #SITE_HEADER [data-mesh-id="comp-k35t1y80inlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* drop the captured pixel offsets from every placed comp. Wix sets
     `align-self: start` on each one, which in a column flex pins it to the
     left edge and beats align-items — so it has to be overridden per comp. */
  #SITE_HEADER #comp-k1g6voor,
  #SITE_HEADER #comp-mnf6gf42,
  #SITE_HEADER #comp-l5tdb3mu,
  #SITE_HEADER #comp-k1g6u60p,
  #SITE_HEADER #comp-mq54ut2i,
  #SITE_HEADER #comp-k1g6uxhv {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: center !important;
  }

  /* ---- 1. "Menka and Tom" ---- */
  #SITE_HEADER #comp-k1g6voor {
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    margin: 14px 0 0 !important;
    text-align: center !important;
  }
  #SITE_HEADER #comp-k1g6voor p,
  #SITE_HEADER #comp-k1g6voor span {
    text-align: center !important;
  }
  #SITE_HEADER #comp-k1g6voor .font_0,
  #SITE_HEADER #comp-k1g6voor span {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }

  /* ---- 2. logo (captured 228x133) ---- */
  #SITE_HEADER #comp-mnf6gf42 {
    width: 150px !important;
    height: auto !important;
    margin: 8px 0 0 !important;
  }
  #SITE_HEADER #comp-mnf6gf42 [data-testid="linkElement"],
  #SITE_HEADER #comp-mnf6gf42 img {
    width: 100% !important;
    height: auto !important;
  }

  /* ---- 3. watermark URLs (overlays the logo on desktop; own line here) ---- */
  #SITE_HEADER #comp-mq54ut2i {
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    height: auto !important;
    margin: 4px 0 12px !important;
    text-align: center !important;
  }
  #SITE_HEADER #comp-mq54ut2i h2,
  #SITE_HEADER #comp-mq54ut2i span {
    text-align: center !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* ---- 4. menu: centered, wraps onto as many rows as it needs ---- */
  #SITE_HEADER #comp-l5tdb3mu {
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    margin: 10px 0 0 !important;
  }
  #SITE_HEADER #comp-l5tdb3mu nav {
    width: 100% !important;
    height: auto !important;
  }
  #SITE_HEADER #comp-l5tdb3mu nav > ul {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #SITE_HEADER #comp-l5tdb3mu nav > ul > li {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* ---- 5. instagram icon ---- */
  #SITE_HEADER #comp-k1g6u60p {
    width: 31px !important;
    height: 31px !important;
    margin: 12px 0 14px !important;
  }
  #SITE_HEADER #comp-k1g6u60p ul {
    position: static !important;
  }

  /* ---- 6. rule under the header ---- */
  #SITE_HEADER #comp-k1g6uxhv {
    width: calc(100% - 32px) !important;
    margin: 0 0 6px !important;
  }
}

/* Below 980px the whole desktop page is clamped by Wix's site min-width
   (#site-root, the page background, and each section). Release it so the
   header — and the gallery, which scales proportionally — keep tracking the
   window instead of forcing a horizontal scrollbar. */
@media (max-width: 979px) {
  #site-root,
  [id^="pageBackground"],
  #masterPage,
  section[id^="comp-"] {
    min-width: 0 !important;
  }
  /* `._c_gnD` is Wix's 980px min-width strut and `.wixui-page` the page
     wrapper; both carry a hard width:980px, not just a minimum. */
  ._c_gnD,
  .wixui-page {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 900px) {
  #SITE_HEADER #comp-k1g6voor .font_0,
  #SITE_HEADER #comp-k1g6voor span {
    font-size: 28px !important;
  }
  #SITE_HEADER #comp-mnf6gf42 {
    width: 120px !important;
  }
  #SITE_HEADER #comp-mq54ut2i h2,
  #SITE_HEADER #comp-mq54ut2i span {
    font-size: 18px !important;
  }
}