/*
 * Campervan Norway · franja del código de bienvenida arriba de todas las
 * páginas (cvn_promo_topbar(), inc/promo.php; la pinta inc/header.php). La de
 * campervansweden.com y motorhomenorway.com, con los colores de Campervan
 * Norway: el verde casi negro del logo y de los textos (#1a2b29), con la
 * etiqueta en el naranja de los botones. Solo se carga con la campaña activa.
 *
 * La cabecera de la web (.site-header) no es fija ni se pega: va con
 * position: absolute arriba del <body> (que es relative), encima de la
 * ilustración del hero, y se va con el scroll. La franja va antes, en el flujo:
 * baja la página entera su alto (--promo-bar-h) y la cabecera baja lo mismo
 * (top), así que cabecera, menú móvil, banderas y hero quedan como sin ella,
 * una franja más abajo, y al hacer scroll se van con ella. Por eso aquí no hace
 * falta el --promo-offset de Campervan Sweden, cuya cabecera es fija.
 */

/* Alto de la franja: 52 px; en móvil, 46 (abajo, con la forma móvil). */
:root {
  --promo-bar-h: 52px;
}

.cvn-topbar ~ .site-header {
  top: var(--promo-bar-h);
}

/* Reserva en el móvil: assets/js/booking.js deja el alto de la cabecera con un
   hueco (.mobile-header-spacer) al principio de #page, antes de la franja, para
   que la ilustración empiece debajo de la barra blanca. La franja va arriba,
   encima del hueco, y el contenido baja lo que mide; si el hueco pasa a ir
   detrás de la franja, estas reglas no se aplican y no hace falta nada. */
.mobile-header-spacer ~ .cvn-topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.mobile-header-spacer ~ .site-content-contain {
  margin-top: var(--promo-bar-h);
}

/* Portada, páginas de flota y landings en escritorio: el hero mide el alto de
   la ventana (style.css). Con la franja, lo que queda, para que la primera
   pantalla siga siendo el hero entero, con la flecha de abajo. */
@media only screen and (min-width: 992px) {
  .cvn-topbar ~ .site-content-contain .page-home .hero-home.hero {
    height: calc(100vh - var(--promo-bar-h));
  }
}

/* Cabin, la letra de la web (el menú, «BOOK»). Va por encima de lo que se
   coloca con position: absolute arriba del <body>, como el <h1> oculto de la
   reserva (h1.book-page-title, que queda tapado, como antes por la cabecera). */
.cvn-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  height: var(--promo-bar-h);
  padding: 0 16px;
  overflow: hidden;
  background: #1a2b29;
  color: #fff;
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

.cvn-topbar__welcome {
  padding: 5px 11px;
  border-radius: 999px;
  background: #f37720;
  color: #1a2b29;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cvn-topbar__headline {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cvn-topbar__headline--short,
.cvn-topbar__headline--tiny {
  display: none;
}

/* El código, un botón que lo copia (assets/js/promo-topbar.js), con el borde
   discontinuo de un cupón. Los colores, con más peso que los de button y
   button:hover de style.css. */
.cvn-topbar .cvn-topbar__code-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  height: 33px;
  margin: 0 2px;
  padding: 0 10px;
  border: 1.5px dashed #1a2b29;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  color: #1a2b29;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}

.cvn-topbar .cvn-topbar__code-btn:hover,
.cvn-topbar .cvn-topbar__code-btn:focus {
  background: #fff1e6;
  color: #1a2b29;
}

.cvn-topbar .cvn-topbar__code-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.cvn-topbar__code-label {
  color: #5a6b69;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cvn-topbar__code {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Copiar y tick en la misma celda (promo-topbar.js pone .is-copied 2 s al copiar). */
.cvn-topbar__icons {
  display: inline-grid;
  width: 15px;
  height: 15px;
}

.cvn-topbar__icons svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

.cvn-topbar__copy-icon {
  transition: opacity .2s, transform .25s;
}

.cvn-topbar__check-icon {
  opacity: 0;
  color: #16a34a;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: opacity .15s, stroke-dashoffset 0s .2s;
}

.cvn-topbar .cvn-topbar__code-btn.is-copied {
  border-color: #16a34a;
}

.cvn-topbar__code-btn.is-copied .cvn-topbar__copy-icon {
  opacity: 0;
  transform: scale(.3) rotate(-25deg);
}

.cvn-topbar__code-btn.is-copied .cvn-topbar__check-icon {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity .1s .1s, stroke-dashoffset .35s ease-out .12s;
}

.cvn-topbar__code.is-copied {
  animation: cvnTopbarCode .7s ease-out;
}

@keyframes cvnTopbarCode {
  0% { transform: none; }
  30% { transform: translateY(-3px) scale(1.06); color: #16a34a; }
  60% { transform: none; color: #16a34a; }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cvn-topbar__code.is-copied {
    animation: none;
  }
}

.cvn-topbar__note {
  font-size: 14px;
  opacity: .85;
}

/* Cortes: el ancho que necesita el idioma más largo en cada forma, medido
   con los 7 idiomas (el italiano y el francés, los más largos; el código
   CAMPERNORWAY350 es más largo que los de Campervan Sweden y Motorhome Norway,
   así que los cortes son más anchos). Todo: 1248 px. Sin la nota: 1108 (el
   corte es el de la cabecera, que ahí pasa al menú móvil). Sin «Welcome
   offer»: 910. Titular corto: 676. En la forma móvil, el corto: 534; solo el
   descuento: 360 a 15 px, 325 a 14 y 295 a 13. */
@media (max-width: 1260px) {
  .cvn-topbar__note {
    display: none;
  }
}

@media (max-width: 1120px) {
  .cvn-topbar__welcome {
    display: none;
  }
}

/* Tablet: el titular corto. */
@media (max-width: 920px) {
  .cvn-topbar__headline {
    font-size: 18px;
  }

  .cvn-topbar__headline--long {
    display: none;
  }

  .cvn-topbar__headline--short {
    display: inline;
  }
}

/* Móvil (y tablet estrecha): más pequeño y el código sin la etiqueta. */
@media (max-width: 700px) {
  :root {
    --promo-bar-h: 46px;
  }

  .cvn-topbar {
    gap: 10px;
    padding: 0 12px;
  }

  .cvn-topbar__headline {
    font-size: 15px;
  }

  .cvn-topbar .cvn-topbar__code-btn {
    gap: 6px;
    height: 30px;
    padding: 0 8px;
  }

  .cvn-topbar__code-label {
    display: none;
  }

  .cvn-topbar__code {
    font-size: 15px;
  }

  .cvn-topbar__icons {
    width: 14px;
    height: 14px;
  }
}

/* Móviles: solo el descuento, con el código. */
@media (max-width: 540px) {
  .cvn-topbar__headline--short {
    display: none;
  }

  .cvn-topbar__headline--tiny {
    display: inline;
  }
}

/* Móviles estrechos (360 px): letra algo más pequeña y sin espaciado. */
@media (max-width: 400px) {
  .cvn-topbar {
    gap: 8px;
    padding: 0 10px;
  }

  .cvn-topbar__headline,
  .cvn-topbar__code {
    font-size: 14px;
    letter-spacing: 0;
  }
}

@media (max-width: 340px) {
  .cvn-topbar {
    gap: 6px;
    padding: 0 8px;
  }

  .cvn-topbar__headline,
  .cvn-topbar__code {
    font-size: 13px;
  }

  .cvn-topbar .cvn-topbar__code-btn {
    gap: 5px;
    padding: 0 6px;
  }
}