/* ==========================================================================
   ETS Luxury Travel — app layer
   --------------------------------------------------------------------------
   site.css is compiled Tailwind output and must not be edited by hand: it is
   regenerated from the HTML on every build. This file holds the small amount
   of hand-written CSS the design needs:

     * accessibility fixes (skip link, focus rings, reduced motion)
     * mobile typographic corrections for fixed display sizes
     * interactive states driven by assets/js/site.js
     * modal / lightbox / toast chrome
     * print rules

   Load order matters: this file is linked after site.css, so a selector of
   equal specificity here wins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accessibility
   -------------------------------------------------------------------------- */

/* Out of the flow and off-screen until focused; without `position: fixed`
   this anchor sits in normal flow above the header and shifts every page down
   by one line. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 400;
  padding: 12px 20px;
  border-radius: 999px;
  background: #0b2a3c;
  color: #ffffff;
  font-family: Figtree, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(11, 42, 60, 0.24);
  transform: translateY(calc(-100% - 24px));
  transition: transform 160ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #ffffff;
  outline-offset: -6px;
  color: #ffffff;
}

/* One consistent keyboard ring. Pointer users are unaffected because of
   :focus-visible, and the rule is deliberately low-specificity so component
   styles can still override it. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #0a6178;
  outline-offset: 2px;
  border-radius: 4px;
}

/* The fixed 80px header would otherwise cover the top of a linked section. */
html {
  scroll-padding-top: 104px;
}

[hidden] {
  display: none !important;
}

/* Links with no destination are rendered as spans by the build. They must not
   look or behave like something clickable. */
[data-inert] {
  cursor: default;
}

[data-inert] * {
  cursor: default;
}

/* Screen-reader-only helper for status messages that have no visual slot. */
.ets-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Mobile typography
   --------------------------------------------------------------------------
   Four screens hard-code a 56px display heading (the desktop h1). At 390px
   that wraps every title onto three or four lines and pushes the form below
   the fold, so it steps down to the 36/40 mobile h1 from the design system. */
@media (max-width: 639px) {
  h1[class~="text-[56px]"] {
    font-size: 36px !important;
    line-height: 40px !important;
    letter-spacing: -0.01em !important;
  }

  /* The listing header is the only one that sets its wordmark to the 28px h3.
     At 390px that pushes the account avatar past the right edge, so the
     wordmark steps down to the design system's mobile h3 (22/28). */
  header a[class~="text-h3"] {
    font-size: 22px;
    line-height: 28px;
  }

  /* Footer social names are plain text separated by bullets. Four names plus
     three bullets are wider than a 320px screen, so they wrap instead of
     pushing the page sideways. */
  footer .flex.items-center.gap-space-md {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Contact form segmented control: three pills cannot fit the 224px content
     box of a 320px phone, so they wrap and share the row. */
  #contact-form .flex.items-center.gap-2.p-1 {
    flex-wrap: wrap;
    width: 100%;
    border-radius: 16px;
  }

  #contact-form .flex.items-center.gap-2.p-1 > button {
    flex: 1 1 auto;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* The header account avatar is decorative. Below 360px the wordmark and the
   Register button already fill the bar, so it is the first thing to go. */
@media (max-width: 359px) {
  header .w-8.h-8 {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. Interactive states (set by site.js)
   -------------------------------------------------------------------------- */

/* Filter drawer choices */
[data-action="drawer-choice"].is-active {
  background: #0a6178;
  border-color: #0a6178;
  color: #ffffff;
  font-weight: 600;
}

/* List / map toggle */
[data-action="view-list"].is-active,
[data-action="view-map"].is-active {
  background: #ffffff;
  color: #0b2a3c;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 42, 60, 0.14);
}

/* Week ribbon selection */
[data-action="select-week"] {
  position: relative;
}

[data-action="select-week"].is-selected {
  outline: 2px solid #0b2a3c;
  outline-offset: 1px;
  transform: translateY(-2px) scaleY(1.35);
  z-index: 5;
}

/* Selected map pin */
[data-action="map-pin"].is-active {
  background: #0a6178;
  border-color: #0a6178;
  color: #ffffff;
}

/* Highlight used when a map pin scrolls you to a listing. */
.is-flash {
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(10, 97, 120, 0.55);
  transition: box-shadow 300ms ease;
}

/* Filters that match nothing. */
.ets-empty {
  grid-column: 1 / -1;
  padding: 48px 16px;
  border: 1px dashed #d5dee3;
  border-radius: 12px;
  background: #ffffff;
  color: #4b6272;
  font-family: Figtree, sans-serif;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
}

.ets-empty strong {
  color: #0b2a3c;
}

/* --------------------------------------------------------------------------
   4. Form validation
   -------------------------------------------------------------------------- */

.field-error {
  margin-top: 6px;
  color: #b42318;
  font-family: Figtree, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

[aria-invalid="true"] {
  border-color: #b42318 !important;
  box-shadow: 0 0 0 1px #b42318 !important;
}

/* --------------------------------------------------------------------------
   5. Toast
   -------------------------------------------------------------------------- */

.ets-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 500;
  width: max-content;
  max-width: min(92vw, 440px);
  padding: 14px 20px;
  border-radius: 12px;
  background: #0b2a3c;
  color: #ffffff;
  font-family: Figtree, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(11, 42, 60, 0.28);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.ets-toast[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   6. Modal + lightbox
   -------------------------------------------------------------------------- */

.ets-modal {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ets-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 42, 60, 0.56);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ets-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 540px;
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 26px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(11, 42, 60, 0.32);
}

.ets-modal--wide .ets-modal__panel {
  max-width: 940px;
}

.ets-modal__title {
  margin: 0;
  padding-right: 40px;
  color: #0b2a3c;
  font-family: "Bricolage Grotesque", Figtree, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}

.ets-modal__body {
  color: #0b2a3c;
  font-family: Figtree, sans-serif;
  font-size: 16px;
  line-height: 26px;
}

.ets-modal__body p {
  margin: 0 0 12px;
}

.ets-modal__body p:last-child {
  margin-bottom: 0;
}

.ets-modal__body dl {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 10px 16px;
  margin: 0;
}

.ets-modal__body dt {
  color: #4b6272;
  font-size: 14px;
  line-height: 20px;
}

.ets-modal__body dd {
  margin: 0;
  font-weight: 500;
}

.ets-modal__body textarea {
  width: 100%;
  min-height: 130px;
  padding: 12px 14px;
  border: 1px solid #7a909e;
  border-radius: 12px;
  color: #0b2a3c;
  font-family: Figtree, sans-serif;
  font-size: 16px;
  line-height: 24px;
  resize: vertical;
}

.ets-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ets-modal__actions button {
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-family: Figtree, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.ets-btn-primary {
  background: #0a6178;
  color: #ffffff;
}

.ets-btn-primary:hover {
  background: #084d60;
}

.ets-btn-quiet {
  background: #e8f1f4;
  color: #0b2a3c;
}

.ets-btn-quiet:hover {
  background: #d5dee3;
}

.ets-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f7;
  color: #0b2a3c;
  cursor: pointer;
}

.ets-modal__close:hover {
  background: #e8f1f4;
}

.ets-modal__close .material-symbols-outlined {
  font-size: 20px;
}

/* Lightbox */
.ets-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border-radius: 8px;
  background: #0b2a3c;
  overflow: hidden;
}

.ets-lightbox__stage img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(64vh, 560px);
  object-fit: contain;
}

.ets-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0b2a3c;
  cursor: pointer;
}

.ets-lightbox__nav:hover {
  background: #ffffff;
}

.ets-lightbox__nav--prev {
  left: 12px;
}

.ets-lightbox__nav--next {
  right: 12px;
}

.ets-lightbox__caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #4b6272;
  font-family: Figtree, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

/* when the lightbox is open the page behind it must not scroll */
body.ets-scroll-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. Print
   -------------------------------------------------------------------------- */

@media print {
  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .skip-link,
  header,
  footer,
  .ets-toast,
  .ets-modal,
  [data-action],
  [data-inert],
  button {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
  }

  main * {
    box-shadow: none !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    color: #4b6272;
  }

  .rounded-\[20px\],
  .rounded-2xl {
    break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   8. Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}