/* bands.css — the ONLY hand-written stylesheet in this build.
 *
 * Everything else under /styles/ is Duda's own cascade, ported byte-for-byte
 * with nothing rewritten but the asset URLs. This file exists because Duda
 * serves three separate documents and we serve one, so the parts that are
 * present in only one of those documents need to be switched by width.
 *
 * It lives OUTSIDE /styles/ on purpose: port-css.mjs wipes that directory on
 * every run, which silently deleted this file once and left all three device
 * headers rendering at every width.
 *
 * The bands match the ported CSS bands exactly:
 *   mobile <= 767    tablet 768..1023 (the 960px canvas lands here)    desktop >= 1024
 */

/* A band wrapper must not create a box of its own, or it would change the
 * layout of the region it wraps. display:contents makes it transparent to
 * layout while still being a switchable node. */
[data-gm-band] { display: contents; }

@media (max-width: 767px) {
  [data-gm-band="desktop"], [data-gm-band="tablet"] { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  [data-gm-band="desktop"], [data-gm-band="mobile"] { display: none; }
}
@media (min-width: 1024px) {
  [data-gm-band="tablet"], [data-gm-band="mobile"] { display: none; }
}

/* #iscrollBody exists only in the desktop document, where
 * .dmBodyNoIscroll #iscrollBody{overflow-x:hidden} is what stops an
 * overhanging section from stretching the document (gotcha 14). The tablet
 * and mobile documents have no such element, so outside the desktop band it
 * must add neither a box nor a containing block. */
@media (max-width: 1023px) {
  #iscrollBody { display: contents; }
}

/* The inner .site_content wrapper exists only in the tablet and mobile
 * documents, where it is the element the push-content drawer translates.
 * On desktop the header, content and footer are direct children of
 * #site_content, so the extra node must not exist as a box there. */
@media (min-width: 1024px) {
  [data-gm-inner] { display: contents; }
}