/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.turbo-progress-bar {
  height: 3px;
  background-color: #d99400;
}

/* Native-app feel: lock zoom, keep the pull-down/overscroll area consistent,
   and suppress tap flash. */
html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
  scrollbar-width: none;
  background-color: #fdf7f7;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  overscroll-behavior-x: none;
  background-color: #fdf7f7;
}

.cookie-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  padding: 16px;
}

.cookie-consent__card {
  box-sizing: border-box;
  width: min(720px, 100%);
  margin-inline: auto;
  padding: 22px;
  border: 1px solid #f4e1d8;
  border-radius: 18px;
  background: #fdf7f7;
  box-shadow: 0 12px 40px rgba(18, 31, 70, 0.18);
}

.cookie-consent__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cookie-consent__button {
  min-height: 42px;
  padding: 0 22px;
  border-radius: 12px;
}

@media (min-width: 640px) {
  .cookie-consent {
    padding: 32px;
  }

  .cookie-consent__actions {
    flex-direction: row;
    gap: 12px;
  }
}

.site-toggle-arrow {
  transform: rotate(-90deg);
}

.site-toggle-arrow.is-open {
  transform: rotate(0deg);
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS auto-zoom when focusing inputs (happens if font-size < 16px) */
input,
textarea,
select {
  font-size: 16px;
}

/* Hero video: background-image holds the poster so there's no flicker between
   the native `poster` attribute and the first decoded video frame on mobile.
   The poster URL is supplied as a CSS variable inline on the element, and we
   switch between portrait and landscape via media query. */
.hero-video {
  background-color: #000;
  background-image: var(--hero-poster-portrait);
  background-size: cover;
  background-position: center;
}

@media (min-width: 768px) {
  .hero-video {
    background-image: var(--hero-poster-landscape);
  }
}