iframe {
  width: 100%;
  height: calc((512px / 16) * 9);
}

@media (max-width: 480px) {

}

@media (max-width: 512px) {
  iframe {
    height: calc((100vw / 16) * 9);
  }
}

@media (max-width: 736px) {

}

@media (max-width: 980px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 1680px) {

}

/* Logo redondo en paginas internas.
   El #intro se imprime tambien fuera de la portada, pero solo con el logo.
   Al no haber texto debajo, el justify-content: flex-end del tema dejaria el
   logo pegado al borde inferior; centrado queda como en la portada.
   El resto del comportamiento (logo en texto del header oculto hasta que el
   JS marca #intro como .hidden al hacer scroll) lo aporta el CSS del tema. */
#wrapper #intro.intro-solo-logo {
  justify-content: center;
}

/* TEMP Video Centers horizontally */
.videoWrapper {
  display: flex;
  justify-content: center!important;  /* Centers horizontally */
  align-items: center!important;     /* Centers vertically */
  margin: 0 auto!important;
}

#player-controls {
  display: flex;
  justify-content: center!important;  /* Centers horizontally */
  align-items: center!important;     /* Centers vertically */
  margin: 0 auto!important;
}

/* Video embeds -------------------------------------------------------------
   Put an embed inside <div class="videoWrapper">. The wrapper holds the 16:9
   ratio and the iframe fills it, so the page needs no inline styles.
   These rules outrank the plain `iframe` rule above by specificity, so that
   rule is left alone for any iframe used outside a wrapper.                  */
.videoWrapper {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0 auto;
}

.videoWrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* On desktop the theme wraps the text in a narrow centred column, which leaves
   the video small with wide margins either side. Pull the wrapper out to the
   edges of section.post so the video fills that area, while the text keeps its
   normal margins. The theme pads the section in three steps, so match them.
   Delete these three blocks to keep the video inside the text column.         */
@media (min-width: 981px) {
  .post .videoWrapper {
    width: calc(100% + 8vw) !important;
    max-width: none !important;
    margin-left: -4vw !important;
    margin-right: 0 !important;
  }
}

/* Menus desplegables de paginas hijas -------------------------------------
   El tema recorta #nav (overflow:hidden y height:4rem) y le da el mismo
   z-index que #main, que va despues en el DOM y por tanto lo taparia. Con
   .has-dropdowns se liberan las dos cosas para que la lista flotante se vea
   por encima del contenido. Solo se aplica cuando hay algun desplegable.     */
#nav.has-dropdowns {
  overflow: visible;
  z-index: 5;
}

ul.dropdown {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.has-dropdown.open > ul.dropdown {
  display: block;
}

li.has-dropdown > a.dropdown-toggle {
  cursor: pointer;
}

/* Caret dibujado con bordes para no depender de la fuente de iconos. */
.dropdown-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5em;
  vertical-align: middle;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.35em solid currentColor;
  -moz-transition: -moz-transform 0.2s ease;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.has-dropdown.open > a > .dropdown-caret {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* Escritorio: lista flotante bajo el padre. A partir de 981px el tema
   mantiene los enlaces dentro de #nav.                                      */
@media screen and (min-width: 981px) {
  #nav ul.links li.has-dropdown {
    position: relative;
  }

  #nav ul.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background: #1e252d;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
    z-index: 10;
  }

  /* El nav vive al fondo de la cabecera: si no hay hueco debajo, la lista se
     abre hacia arriba. La clase la pone user.js al abrir y al hacer scroll. */
  #nav li.has-dropdown.drop-up > ul.dropdown {
    top: auto;
    bottom: 100%;
  }

  #nav ul.dropdown li {
    display: block;
    padding-left: 0;
    border-top: solid 1px rgba(255, 255, 255, 0.12);
  }

  #nav ul.dropdown li:first-child {
    border-top: 0;
  }

  /* El tema colorea #nav ul.links li.active a con #1e252d, y ese selector
     alcanza tambien a los enlaces anidados del desplegable. Al visitar una
     hija el padre queda .active, asi que el hermano inactivo heredaba el
     mismo #1e252d del fondo y desaparecia. Se fija el color base en blanco
     para todos los enlaces del desplegable. */
  #nav ul.links ul.dropdown li a {
    display: block;
    padding: 0.75rem 2rem;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    color: #ffffff;
  }

  /* El rojo se reserva para el hover, igual que en el resto del menu. El tema
     fuerza color: inherit !important en su propio :hover, asi que hace falta
     !important aqui para ganarle. */
  #nav ul.links ul.dropdown li a:hover {
    color: #d80000 !important;
    background-color: rgba(255, 255, 255, 0.1);
  }

  /* La hija actual se marca solo con el fondo, sin rojo. El color base de
     arriba ya gana por especificidad a #nav ul.links li.active a del tema,
     asi que no hace falta forzarlo con !important (eso bloquearia el hover). */
  #nav ul.links ul.dropdown li.active {
    background-color: rgba(255, 255, 255, 0.15);
  }
}

/* Movil: el tema mueve los enlaces de #nav a #navPanel y oculta #nav, asi
   que el desplegable pasa a ser un acordeon y los hijos se ven debajo del
   padre, dentro del flujo del panel.                                        */
@media screen and (max-width: 980px) {
  #navPanel .links li.has-dropdown > a.dropdown-toggle {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
  }

  #navPanel ul.dropdown {
    position: static;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
  }

  #navPanel ul.dropdown li {
    border-top: 0;
    padding-left: 0;
  }

  #navPanel ul.dropdown li a {
    padding: 0.5rem 0 0.5rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #212931;
  }

  /* Rojo solo en hover, como en el resto del menu; el panel movil tiene fondo
     blanco, por eso el color base es el oscuro del propio panel. */
  #navPanel ul.dropdown li a:hover {
    color: #d80000 !important;
  }

  /* Sin rojo en la hija actual ni en los enlaces visitados. */
  #navPanel ul.dropdown li.active a,
  #navPanel ul.dropdown li a:visited,
  #navPanel ul.dropdown li.active a:visited {
    color: #212931;
  }
}