/*
 * Site-level corrections and components layered on top of main.css.
 *
 * Kept in a separate file on purpose: main.css is generated from web_assets/sass,
 * so anything appended there is lost on the next compile.
 * Loaded after main.css in web_layouts/master.blade.php.
 */

/* ---------------------------------------------------------------------------
 * 1. Contact card padding on small phones.
 *
 * .package-details-contact carries a flat 48px inline padding. On a 320px
 * screen that leaves the form fields 200px wide inside a 296px card, so the
 * name/email/message inputs and the submit button all render visibly narrower
 * than the card they sit in. Scale the padding down with the viewport.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 575px) {
  .package-details-contact {
    padding-inline: 20px;
    padding-block: 32px;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .package-details-contact {
    padding-inline: 32px;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Stop iOS Safari zooming the page on field focus.
 *
 * Safari auto-zooms whenever a focused control's font-size is under 16px, and
 * the page never zooms back out. Several controls (.footer-form-input at 14px,
 * the inline booking fields at 15px) trip it.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .footer-form-input,
  .contact-fields-panel .contact-field-input,
  .booking-card input,
  .ts-control input {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Guard against sideways scroll.
 *
 * Decorative shapes and GSAP transforms sit outside the layout box; a stray one
 * would otherwise widen the document and let the whole page slide horizontally.
 * ------------------------------------------------------------------------ */
html,
body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Desktop navigation visibility.
 *
 * Below 992px the hamburger takes over, so the horizontal nav must be hidden —
 * otherwise it renders as an empty white pill (its .nav-menu border) beside the
 * hamburger on tablets.
 *
 * This deliberately does not use Bootstrap's `d-none d-lg-block`: that pair only
 * works while nothing redefines `.d-none` after bootstrap.min.css, and a page
 * doing exactly that once hid this nav at every width. An explicit query keyed
 * on the element itself cannot be broken from elsewhere.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 991.98px) {
  .header-menu {
    display: none !important;
  }
}

@media screen and (min-width: 992px) {
  .header-menu {
    display: block;
  }
}


/* ---------------------------------------------------------------------------
 * 5. Contact details row.
 *
 * Built from the vocabulary the rest of the site already uses rather than a
 * card pattern of its own: the teal script eyebrow (.font-sofia, as on "Our
 * Achievements" / "Explore Our Gallery"), a Philosopher serif heading in navy,
 * and columns separated by hairlines the way the footer divides its columns.
 * No panels, no shadows.
 * ------------------------------------------------------------------------ */
.contact-cards {
  --c-navy: hsl(215, 75%, 26%);
  --c-teal: #0c8273;
  --c-line: #e3e8ef;
  --c-body: #55637a;
}

.contact-cards > [class*="col-"] {
  display: flex;
}

.contact-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 8px 30px 0;
  text-align: center;
}

/* Hairlines between columns, matching the footer's dividers. The first column
   never takes one, and they disappear once the columns stack. */
@media screen and (min-width: 768px) {
  .contact-cards > [class*="col-"] + [class*="col-"] .contact-col {
    border-inline-start: 1px solid var(--c-line);
  }
}

.contact-col__icon {
  display: block;
  margin-block-end: 22px;
  line-height: 0;
}

.contact-col__icon img {
  width: 52px;
  height: 52px;
}

.contact-col__eyebrow {
  margin: 0 0 6px;
  font-family: var(--sofia-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-teal);
}

.contact-col__title {
  margin: 0 0 20px;
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-navy);
}

.contact-col__list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-body);
}

.contact-col__list a {
  color: var(--c-body);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-col__list a:hover {
  color: var(--c-teal);
}

/* Pinned to the bottom so the three links sit on one line across the row. */
.contact-col__link {
  margin-block-start: auto;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-teal);
  text-decoration: none;
}

.contact-col__link:hover {
  color: var(--c-navy);
}

@media screen and (max-width: 767px) {
  .contact-col {
    padding: 0 12px;
    margin-block-end: 44px;
  }

  .contact-cards > [class*="col-"]:not(:last-child) .contact-col {
    padding-block-end: 44px;
    border-block-end: 1px solid var(--c-line);
    margin-block-end: 0;
  }

  a.text--white.text-uppercase.fw-semibold.tw-text-sm.hover-underline.hover-text-secondary{
    font-size: 0.775rem;
  }
}

/* ---------------------------------------------------------------------------
 * 6. Full-bleed decorative bands.
 *
 * These are 1920px-wide PNG/WebP strips dropped in at their intrinsic size, so
 * on any viewport wider than 1920 they stop short and leave a bare strip down
 * the right-hand edge. Stretching them costs nothing — they are soft gradient
 * bands and shapes, not detailed artwork.
 * ------------------------------------------------------------------------ */
.banner-bg-shape,
.counter-bg-shape,
.cta-bg-shape,
.faq-bg-shape,
.feature-bg-shape,
.service-bg-shape,
.travelor-bg-shape,
.project-bg.travelor-bg {
  width: 100%;
}

.banner-bg-shape > img,
.counter-bg-shape > img,
.cta-bg-shape > img,
.faq-bg-shape > img,
.feature-bg-shape > img,
.service-bg-shape > img,
.travelor-bg-shape > img,
.project-bg.travelor-bg > img {
  width: 100%;
  height: auto;
  /* the theme sets max-width:inherit on some of these, which caps them at the
     intrinsic 1920px and re-opens the gap */
  max-width: none;
}

/* ---------------------------------------------------------------------------
 * 7. Gallery call-to-action.
 *
 * .gallery-thumb.one carries margin-top:-215px so the first image tucks up into
 * the section above. Both .gallery-bottom and the heading block sit at z-index 1,
 * and the images come later in source order, so they painted straight over the
 * "Book Your Flight Today" button. Lift the heading block above them.
 * ------------------------------------------------------------------------ */
.gallery-area .gallery-button {
  position: relative;
  z-index: 3;
}

/* ---------------------------------------------------------------------------
 * 8. Scroll behaviour.
 *
 * main.css sets `html { scroll-behavior: smooth }`. ScrollSmoother already owns
 * scrolling, and the two then run their own easing against the same scroll
 * position — which is what makes the page fight itself after a zoom or an
 * anchor jump. Hand scrolling back to ScrollSmoother alone.
 *
 * Targeted at :root, not html: bootstrap.min.css declares
 * `@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth } }`,
 * and a plain `html` selector loses to it on specificity no matter the order.
 * ------------------------------------------------------------------------ */
:root,
html {
  scroll-behavior: auto;
}