/* Responsive behaviour for the Vulnary site.
 *
 * The design is a fixed 1440px canvas with no breakpoints, so everything here
 * is new work rather than a port. Above 1440px this file must have no effect
 * at all - the pixel parity gate asserts that on every one of the 17 pages.
 *
 * Every rule is !important because the markup styles each element with an
 * inline style attribute, which outranks any stylesheet selector. That is a
 * consequence of the source format, not a preference: without it these rules
 * would parse and then do nothing.
 */

/* Tablet landscape and below: release the fixed canvas. */
@media (max-width: 1439px) {
  .v-shell { width: 100% !important; max-width: 100% !important; }
  img, svg, video { max-width: 100% !important; }

  /* A hard pixel width becomes a maximum, so the element shrinks with the
   * column instead of pushing the page wider than the screen. */
  .v-fixedw { max-width: 100% !important; }

  /* flex:none means "never shrink", which is safe on a fixed 1440px canvas and
   * wrong on anything narrower - it is what pushed the footer's button row off
   * the right edge of a phone. Allowing these to shrink, and to shrink below
   * their content width, is what lets a row wrap at all. */
  .v-noshrink { flex-shrink: 1 !important; min-width: 0 !important; }
  .v-flex, .v-row { max-width: 100% !important; }
  .v-flex > *, .v-row > * { min-width: 0 !important; }

  /* Decorative artwork is positioned outside its box on purpose (right:-90px
   * and similar) and is meant to bleed. On a narrow screen that bleed becomes
   * a horizontal scrollbar, so the page shell clips it. This is the backstop
   * after the real layout fixes above, not a substitute for them. */
  .v-shell { overflow-x: clip !important; }
}

/* Tablet: thin the page gutters and halve the widest grids. */
@media (max-width: 1023px) {
  .v-pad {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .v-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .v-flex { flex-wrap: wrap !important; }
  /* Asymmetric two-column layouts (content beside a fixed-width panel) stack
   * rather than squeeze, since the fixed side has no room left to give. */
  .v-grid.v-grid-split { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Phone: single column throughout, and rows become stacks. */
@media (max-width: 767px) {
  .v-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .v-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .v-row, .v-flex {
    flex-wrap: wrap !important;
  }
  .v-row { gap: 18px !important; }

  /* Buttons keep their shape but give back the generous desktop padding, so
   * two of them fit side by side rather than forcing a horizontal scroll. */
  .v-noshrink > span, .v-flex:not(.v-nav) > a > span {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* flex:1 means flex-basis:0, so items divide the line and never wrap - they
   * just squeeze until their contents spill out. Sizing them to their content
   * instead is what lets flex-wrap above actually take effect and stack them. */
  .v-flex > *, .v-row > * { flex-basis: auto !important; }
  /* The header is the one row that must not wrap: it becomes logo plus a
   * toggle, with the links moving into a panel below. */
  .v-header { flex-wrap: nowrap !important; }
  body { -webkit-text-size-adjust: 100%; }
}

/* Navigation toggle.
 *
 * Hidden entirely above the phone breakpoint so the desktop header is
 * untouched. The button is real - not a checkbox hack - so it is reachable by
 * keyboard and announces its state to a screen reader.
 */
.v-navtoggle { display: none; }

@media (max-width: 767px) {
  .v-navtoggle {
    display: block !important;
    font: 600 13px 'Chakra Petch', sans-serif;
    letter-spacing: 2px;
    color: #16255E;
    background: transparent;
    border: 1px solid #C9D4EA;
    padding: 10px 14px;
    cursor: pointer;
  }
  .v-nav {
    display: none !important;
    position: absolute !important;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #fff;
    border-bottom: 1px solid #131E45;
    padding: 8px 20px 18px;
    z-index: 40;
  }
  .v-nav[data-open="true"] { display: flex !important; }
  .v-nav a, .v-nav > span { width: 100%; }
  .v-nav span {
    border-left: 0 !important;
    padding: 14px 0 !important;
    display: block !important;
    /* The header CTA carries a desktop margin-left that would indent it out
     * of line with the links above it once the nav is a vertical stack. */
    margin-left: 0 !important;
  }
  /* The current page renders as a bare span rather than a link, so both forms
   * have to be flush with the panel's own padding or the list looks ragged. */
  .v-nav > span, .v-nav > a > span { padding-left: 0 !important; padding-right: 0 !important; }
  .v-header { position: relative !important; }
}