/* vota.wapa.tv — page styles
   Hand-written replacement for the Elementor/WordPress stylesheets.
   Geometry reproduces the original exactly; see README for the values
   this was derived from. */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: #00339E;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Stage: full-bleed background section ------------------------------- */

.stage {
  position: relative;
  background-color: #0052C2;
  background-image: url("img/wapa-bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Fill the viewport on tablet and up, and centre the content within it. Uses
   min-height rather than a fixed height so that when the content is taller
   than the viewport the stage grows and the page scrolls, instead of the
   content overflowing past the top edge. */
@media (min-width: 768px) {
  .stage {
    display: flex;
    align-items: center;
    min-height: 100vh;
  }
  .stage__inner { width: 100%; }
}

.stage__inner {
  display: flex;
  align-items: center;
  max-width: 1140px;
  margin-inline: auto;
  position: relative;
}

@media (max-width: 1024px) { .stage__inner { max-width: 1024px; } }
@media (max-width: 767px)  { .stage__inner { max-width: 767px; } }

/* --- Content stack ------------------------------------------------------ */

.stack {
  width: 100%;
  padding: 10px;
}

/* Each row is padded like the original's nested column gutters. */
.row {
  padding: 10px;
  text-align: center;
}

.row--logo { padding-bottom: 25px; } /* 10px gutter + 15px image margin */

.logo {
  width: 90%;
  max-width: 211px;
  height: auto;
  vertical-align: middle;
}

/* --- Poll ---------------------------------------------------------------- */

.poll {
  margin-bottom: 20px;
  background-color: #C3C3C3;
  border: 4px solid #3E3E3E;
  border-radius: 15px;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* display: block keeps the iframe off the text baseline; as an inline element
   it would sit on a line box and leave a ~6px gap showing the shell colour. */
.poll iframe {
  display: block;
  width: 100%;
  min-height: 480px;
  border: 0;
}

/* --- Ads ----------------------------------------------------------------- */

.ad-slot { display: inline-block; }

.ad-leaderboard { max-width: 970px; }

/* Toggled by transitional() on the out-of-page ad wrapper. */
.hide { display: none !important; }