/* ============================================================
   Turismo Cáceres — convivencia con Enfold
   ------------------------------------------------------------
   Ajustes para que los elementos del tema padre (columnas,
   botones, textos, blog, formularios) hablen el idioma
   tipográfico y cromático del diseño Fusion, y para que las
   secciones a sangre del tema hijo no queden encajonadas en el
   contenedor central de Enfold.
   ============================================================ */

/* --- El hueco de la cabecera de Enfold ---------------------- */

/* Enfold reserva sitio para SU cabecera fija con
      .html_header_top.html_header_sticky #main { padding-top: 88px }
   (enfold/css/layout.css). Esa cabecera aquí no existe: la del
   diseño es fija y translúcida, y el contenido debe pasar por
   debajo, no quedar empujado. Cada bloque del diseño ya trae su
   propio espaciado superior (la cabecera de página interior, por
   ejemplo, lleva 140px).

   Se gana por especificidad, sin !important: se añaden html y
   body a los selectores de Enfold. Están cubiertas también sus
   variantes de logotipo grande y de menú inferior. */

html.html_header_top.html_header_sticky body.tc-theme #main,
html.html_header_top.html_header_sticky.html_large body.tc-theme #main,
html.html_header_top.html_header_sticky.html_bottom_nav_header body.tc-theme #main,
html.html_header_top.html_header_sticky.html_large.html_bottom_nav_header body.tc-theme #main {
  padding-top: 0;
}

/* Enfold tiene otro juego de reglas para cuando se activa SU barra
   superior, y ésas llevan dos ID (`#top #main`), así que hay que
   igualarlas o volvería el hueco al activar esa opción. */
html.html_header_top.html_header_topbar_active.html_header_sticky body#top.tc-theme #main,
html.html_header_top.html_header_topbar_active.html_header_sticky.html_large body#top.tc-theme #main,
html.html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header body#top.tc-theme #main,
html.html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header body#top.tc-theme #main,
html.html_top_nav_header.html_header_top.html_header_sticky body#top.tc-theme #wrap_all #main {
  padding-top: 0;
}

/* --- Lo pegajoso (position: sticky) ------------------------- */

/* Enfold recorta #wrap_all con overflow:hidden, y <html> y <body> con
   overflow-x:hidden, para que nada a todo el ancho provoque desplazamiento
   lateral. Eso anula cualquier position:sticky de dentro: el lateral de las
   fichas y la barra de pasos del cuaderno se iban con la página. Un elemento
   con overflow:hidden es un contenedor de desplazamiento, y lo pegajoso se
   pega a él, que no se desplaza. overflow:clip recorta igual sin serlo. El
   hidden se queda delante como respaldo para los navegadores sin clip.

   Fuera quedan los bloqueos de desplazamiento, que sí necesitan hidden: el
   menú y el buscador abiertos (tc-header.css) y el lateral de la ficha en
   panel (tc-fichas.css). */

html.responsive:not(.aside-open),
html.responsive body#top:not(.aside-open):not(.menu-open):not(.search-open),
html.responsive body#top #wrap_all {
  overflow: visible;
  overflow-x: hidden;
  overflow-x: clip;
}

/* --- Listas de navegación ----------------------------------- */

/* El diseño parte de un reset global, pero Enfold añade márgenes e
   indentado a toda lista (`ul { margin-left: 7px }`). Estas reglas
   dejan sin margen las listas de navegación, que son rejillas y
   columnas, no listas de lectura. */
.site-header ul,
.site-header ol,
.mobile-nav ul,
.search-overlay ul,
.site-footer ul,
.tc-theme .main-nav,
.tc-theme .dropdown ul,
.tc-theme .mega-group ul,
.tc-theme .mobile-nav-list,
.tc-theme .m-sub,
.tc-theme .f-nav,
.tc-theme .lang-dropdown ul,
.tc-theme .f-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header li,
.mobile-nav li,
.site-footer li {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
}

/* La banda cronológica NO entra en esos dos resets, y es a propósito.
   Su <ol> se centra con `margin: 0 auto` y sus <li> llevan el relleno que
   deja sitio al punto de la línea (`padding: 34px 20px 0 0`). Al meterla en
   el reset genérico, el `margin: 0` le quitaba el centrado —en pantallas
   anchas la rejilla, limitada a 1200 px, se quedaba pegada a la izquierda— y
   el `padding: 0` juntaba las columnas y subía el año encima de la línea.

   No hace falta reset: las reglas de Enfold para listas son
   `ol { list-style: decimal; margin-left: 15px }`, de especificidad de
   elemento, y las del diseño llevan clase, así que ganan solas. */

/* --- Contenido escrito en el editor ------------------------- */

/* El reset del diseño se carga después de Enfold, así que también
   alcanza al texto escrito en el editor o en un bloque de texto del
   constructor. Aquí se le devuelve su espaciado, acotado a los
   elementos SIN clase: los del diseño siempre llevan la suya. */
.tc-theme .entry-content-wrapper p:not([class]) { margin: 0 0 1em; }

.tc-theme .entry-content-wrapper ul:not([class]),
.tc-theme .entry-content-wrapper ol:not([class]) { margin: 0 0 1em 1.5em; }

.tc-theme .entry-content-wrapper ul:not([class]) { list-style: disc outside; }
.tc-theme .entry-content-wrapper ol:not([class]) { list-style: decimal outside; }

.tc-theme .entry-content-wrapper ul:not([class]) li,
.tc-theme .entry-content-wrapper ol:not([class]) li { margin-bottom: 0.35em; }

.tc-theme .entry-content-wrapper blockquote:not([class]) {
  margin: 1.5em 0;
  padding-left: 1.2em;
  border-left: 2px solid var(--gold);
  font-family: var(--font-head);
  font-size: 19px;
  color: var(--mid);
}

.tc-theme .entry-content-wrapper h1:not([class]),
.tc-theme .entry-content-wrapper h2:not([class]),
.tc-theme .entry-content-wrapper h3:not([class]),
.tc-theme .entry-content-wrapper h4:not([class]) { margin: 1.4em 0 0.5em; }

/* --- Titulares dentro del contenido de Enfold --------------- */

/* Enfold pone en mayúsculas y con 1 px de espaciado los h1 y h2 del contenido
   de las páginas («.template-page .entry-content-wrapper h1, h2», en su
   layout.css). El diseño no. Afecta a lo que va dentro de sus columnas y
   secciones —la cabecera de sección mediana, el texto de un bloque de Enfold—,
   no a los elementos del tema a todo el ancho, que quedan fuera de ese
   contenedor. Solo esas dos propiedades: el color y la tipografía los pone cada
   componente.

   Historia: aquí había un bloque «Tipografía y color base» escrito como
   «.tc-theme #top …». Como tc-theme es una clase del propio <body>, que es
   #top, ese selector no casaba con nada y nunca se aplicó. Al corregirlo
   (2.2.1) resultó que, de aplicarse, rompía el diseño: su «color: var(--dark)»
   en todos los titulares apagaba los blancos sobre fotografía (portada,
   cabeceras, bandas, boletín…), su tipografía pisaba los títulos del pie, y el
   fondo transparente anulaba los colores de las secciones de Enfold. Se ha
   quitado y en su lugar va solo esta corrección. */
#top .template-page .entry-content-wrapper h1,
#top .template-page .entry-content-wrapper h2 {
  text-transform: none;
  letter-spacing: normal;
}

/* Enlaces del contenido: subrayado fino en dorado al pasar. */
.tc-theme .entry-content-wrapper a:not(.avia-button):not(.tc-no-underline) {
  color: var(--gold-dk);
}

.tc-theme .entry-content-wrapper a:not(.avia-button):hover {
  color: var(--gold);
}

/* --- Secciones a sangre del tema hijo ----------------------- */

/* Los elementos propios ya se declaran «fullwidth», así que Enfold
   los saca del contenedor. Estas reglas retiran los restos de
   espaciado que su envoltorio deja alrededor. */
.tc-theme .container_wrap > .container > .template-page > .entry-content-wrapper > .hero,
.tc-theme .container_wrap > .container > .template-page > .entry-content-wrapper > .page-hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* Enfold añade márgenes inferiores a los elementos del constructor;
   las secciones del diseño ya traen su propio ritmo vertical. */
.tc-theme .hero,
.tc-theme .page-hero,
.tc-theme .intro-band,
.tc-theme .experiences,
.tc-theme .editorial,
.tc-theme .timeline-band,
.tc-theme .destinos,
.tc-theme .gastro,
.tc-theme .events,
.tc-theme .plan-cta,
.tc-theme .newsletter,
.tc-theme .page-intro,
.tc-theme .resources,
.tc-theme .detail,
.tc-theme .related,
.tc-theme .event-meta {
  margin: 0;
}

/* El contenedor de Enfold no debe recortar los desplegables ni los
   grafismos de fondo que asoman de sus secciones. */
.tc-theme #main .container_wrap {
  overflow: visible;
}

/* --- Botones de Enfold con el estilo del diseño ------------- */

#top.tc-theme .avia-button {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  padding: 16px 30px;
  background: var(--gold);
  color: var(--dark);
  text-shadow: none;
  transition: background 0.35s ease;
}

#top.tc-theme .avia-button:hover {
  background: var(--gold-hi);
  color: var(--dark);
}

/* --- Formularios -------------------------------------------- */

#top.tc-theme .avia_ajax_form input[type="text"],
#top.tc-theme .avia_ajax_form input[type="email"],
#top.tc-theme .avia_ajax_form textarea,
#top.tc-theme .avia_ajax_form select {
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: #fff;
  color: var(--dark);
}

#top.tc-theme .avia_ajax_form input:focus,
#top.tc-theme .avia_ajax_form textarea:focus {
  border-color: var(--gold);
  outline: none;
}

/* --- Enfold: elementos que conviven con los del diseño ------ */

/* Etiquetas de categoría, migas y metadatos del blog de Enfold. */
#top.tc-theme .post-meta-infos,
#top.tc-theme .blog-categories,
#top.tc-theme .breadcrumb-trail {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* La barra de administración no debe empujar la cabecera fija. */
.tc-theme.admin-bar .site-header { top: 32px; }
.tc-theme.admin-bar .top-strip { top: 32px; }
.tc-theme.admin-bar .site-header.scrolled { top: calc(32px + var(--strip-h)); }

@media screen and (max-width: 782px) {
  .tc-theme.admin-bar .site-header,
  .tc-theme.admin-bar .top-strip { top: 46px; }
  .tc-theme.admin-bar .site-header.scrolled { top: calc(46px + var(--strip-h)); }
}

/* --- Campos de formulario del diseño ------------------------ */

/* Enfold estiliza todos los campos con `#top input[type="…"]`, y un ID gana a
   cualquier número de clases. Por eso las reglas del diseño que tocan un
   campo van también prefijadas con `#top` —el envoltorio es el propio <body>
   de Enfold, así que está siempre—.

   Queda una declaración que el diseño no contradice en ningún sitio y que por
   tanto sobrevivía: el `margin-bottom: 20px` con el que Enfold separa los
   campos de un formulario clásico. En el diseño los campos van dentro de
   contenedores flex que ya reparten el espacio, y ese margen los descolgaba.
   Aquí se quita en los del diseño, sin tocar los de Enfold ni los de ningún
   plugin. */

#top .search-field input,
#top .newsletter-form input,
#top .nl-field input,
#top .nl-embed input,
#top .blog-search input,
#top .search-input-row input,
#top .filter-field select,
#top .sort select,
#top .site-footer .widget select {
  margin-bottom: 0;
}

/* El desplegable de ordenación va sin recuadro y en línea con el rótulo que
   lleva al lado, así que tampoco quiere el relleno de 8 × 6 px de Enfold: el
   diseño lo deja en el del navegador. */
#top .sort select {
  padding: 0;
}


/* --- Detrás de una sección de Enfold ------------------------ */

/* Enfold hace flotar sus secciones de color («.avia-section { float: left;
   width: 100% }») y cuenta con que lo siguiente sea otra sección suya, que
   limpia el flotado. Un elemento del tema detrás de una sección empezaba a su
   misma altura, por debajo de ella: el listado de alojamientos arrancaba junto
   a la introducción, sus 64 px de relleno superior quedaban tapados por ella y
   los filtros salían pegados al borde del contenedor crema. */
#main > .avia-section ~ :not(.avia-section) {
  clear: both;
}