/* Hand-written overrides for this migration (www.clubsolvolleyball.com, Duda FLEX).
 * Outside site/public/styles/ on purpose: tools/port-css.mjs wipes that directory on
 * every run (gotcha 49). The rules below are the fleet toolkit's; the census in this
 * header is THIS site's, measured 2026-10-02 over generated/served-by-device (21 served
 * documents) and generated/live/dom (21 post-JS captures): 7 pages, three-way device
 * fork (desktop != tablet != mobile on 7 of 7), dmtemplateid FlexHeader on all three
 * bands, no blog, no accordion, no popup trigger. Rules whose subject this site does not
 * have (.mg-blog-hidden, .mg-acc-open, .gy-legal-row, the FLEX popup host) match nothing
 * here and cost nothing; they stay so the shared runtime has its styles if a subject is
 * ever added. */

/* The honeypot: off-screen, not display:none — bots skip obviously hidden fields, and
 * taking it out of flow costs no layout (phase 8; gotcha 49's invented-class rule). */
.mg-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Withheld blog cards (none on this site). Repeated class behind #dm to beat Duda's
 * per-widget display:block!important (gotcha 70). */
#dm .mg-blog-hidden.mg-blog-hidden.mg-blog-hidden {
  display: none !important;
}
#dm .postArticle:not(.mg-blog-hidden):has(+ .postArticle.mg-blog-hidden) {
  padding-bottom: 0 !important;
}

/* Band gates: emit every device variant, hide the inactive ones (gotcha 70). Hide only
 * the INACTIVE bands; `revert` would fall back past the author cascade. */
@media (max-width: 767px) {
  #dm .mg-only-d.mg-only-d.mg-only-d,
  #dm .mg-only-t.mg-only-t.mg-only-t {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  #dm .mg-only-d.mg-only-d.mg-only-d,
  #dm .mg-only-m.mg-only-m.mg-only-m {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  #dm .mg-only-t.mg-only-t.mg-only-t,
  #dm .mg-only-m.mg-only-m.mg-only-m {
    display: none !important;
  }
}

/* Accordion open state driven by runtime.js (no accordion on this site). */
#dm .mg-acc-open.mg-acc-open.mg-acc-open {
  max-height: 2000px;
}

/* Generated legal pages (tools/build-legal-pages.mjs). NOT used on this site: its
 * /terms-and-conditions and /privacy-policy are the client's own Duda pages, ported. */
#dm .gy-legal-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px 80px;
  box-sizing: border-box;
}
#dm .gy-legal-row h2 {
  margin: 36px 0 12px;
}
#dm .gy-legal-row p {
  margin: 0 0 14px;
}
#dm .gy-legal-row ul {
  margin: 0 0 14px;
  padding-left: 1.4em;
  list-style: disc;
}
#dm .gy-legal-row li {
  margin: 0 0 4px;
}
@media (max-width: 767px) {
  #dm .gy-legal-row {
    padding: 40px 16px 60px;
  }
}

/* FLEX click-popup host (gotcha 105). This site has no link_type="popup" trigger
 * (0 of 21 served documents), so runtime.js's opener returns at its first line. */
#flex-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.533);
}
#flex-runtime-popup-container {
  position: fixed;
  inset: 0;
  z-index: 201;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

/* ---- Pre-launch review, 2026-10-09 ------------------------------------------------
 * 404 page. Live styles its 404 from a <style> block inside the body, which the port
 * did not carry, so the page rendered as bare text pinned to the left edge. The rules
 * below are that block, scoped to #error-container. */
#dm #error-container {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 120px;
  background: #fff;
  color: #bababa;
  text-align: center;
  overflow: hidden;
}
@media (max-width: 767px) {
  #dm #error-container {
    padding-top: 60px;
  }
}
#dm #error-container .four-o-four {
  font-family: 'Oswald', sans-serif;
  font-size: 130px;
  text-align: center;
  line-height: 130px;
  color: #000;
}
#dm #error-container .lean {
  display: inline-block;
  transform: rotate(15deg) translate(-5px, -4px);
}
#dm #error-container .description {
  font-size: 22px;
  margin: 45px 0;
  color: #000;
}
#dm #error-container .back-button {
  display: inline-block;
  width: 184px;
  height: 37px;
  margin-bottom: 20px;
  background: #898989;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 37px;
  border-radius: 2px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

/* /about had no call to action. The button is the site's own "Contact Us" button
 * (the /programs one, 280x50); its wrapper is an added FLEX child, so it needs its own
 * box and order or it stretches to the group and jumps above the copy. */
#dm .gy-cta-wrap {
  order: 999;
  width: 280px;
  max-width: 100%;
  height: 50px;
  min-height: 50px;
  margin-top: 24px;
  flex: 0 0 auto;
}
#dm .gy-cta-wrap a.gy-cta {
  width: 100%;
  height: 100%;
  margin: 0;
}