/* ============================================================================
   JOHNS GO KERALA — HOME PAGE STYLES  (assets/css/pages/home.css)
   ----------------------------------------------------------------------------
   Loaded ONLY by views/home.blade.php via @push('styles').

   NAMESPACE CONTRACT (keep this file conflict-free):
     .home-hero            -> hero slider section (was generic `.hero`)
     .home-hero__slides    -> slides track        (was `.hero-slides`)
     .home-hero__slide     -> one slide           (was `.hero-slide` / template `.hero-slide`)
     .home-hero__content   -> content column      (was generic `.hero-content`)
     .home-hero__title     -> hero h1             (was `.hero-heading` + generic `.hero h1`)
     .home-hero__search    -> search form         (was `.hero-search-wrapper`)
     .home-hero__search-field -> one select field (was `.hero-search-field`)
     .home-hero__search-btn   -> submit button    (was `.hero-search-btn`)
     .home-about__heading  -> About section h2    (was `.about-main-heading`)

   RULES FOR FUTURE SECTIONS:
     - Never style generic names (.hero, .title, .content, .container, .btn, h1, p...).
     - Give every new section its own block name: .home-tours__*, .about-team__*, etc.
     - Page-specific CSS goes in assets/css/pages/<page>.css, loaded via @push('styles').
     - Shared components (buttons, cards, sliders) belong in main.css only.
   ============================================================================ */

/* =========================================================
   BASE HERO STRUCTURE  (.home-hero)
   Merged from: main.css "Somans" hero block + former inline
   <style> block in home.blade.php — de-duplicated.
========================================================= */
.home-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #0000; /* preserved from the original rule; all children set their own color */
}

/* Background slides */
.home-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; /* was inherited from template .hero-slide — kept so slides never tile */
  opacity: 0;
  z-index: 0;
  transition: opacity 1.5s ease;
}
.home-hero__slide.active {
  opacity: 1;
}

/* Dark overlay above the slides, below the content (toggle by .active class only) */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.08) 35%,
    rgba(0, 0, 0, 0.05) 65%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

/* Bottom cloud/mist fade (was .hero::after in the inline style block) */
.home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* avoids a hairline gap with the section below */
  height: 220px;
  pointer-events: none;
  z-index: 5; /* above slides/overlay, below the text content */
  background:
    radial-gradient(ellipse 40% 60% at 15% 90%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 35% 55% at 45% 100%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 40% 60% at 75% 90%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 35% 55% at 100% 95%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 1) 100%);
}

/* Content column (z-index 10 wins over the mist layer, as before) */
.home-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero heading — typography previously split across generic `.hero h1`
   (family/weight/color/shadow) and `.hero .hero-heading` (sizes) is now
   consolidated here. Global h1 rules from main.css still apply untouched. */
.home-hero__title {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  line-height: 0.95;
  margin-bottom: 15px;
  color: #ffffff;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.18);
  font-size: 84px;
}

/* =========================================================
   HERO SEARCH BAR  (.home-hero__search)

   Uses real <select> elements on purpose. The theme's nice-select
   plugin replaces a <select> with a positioned <ul>, which (a) is cut
   off by this pill-shaped bar's overflow:hidden and (b) leaves the real
   field display:none, so the browser's `required` check can never focus
   it and the form submits nothing. The opt-out lives in
   assets/js/main.js — keep the class name in sync.
========================================================= */
.home-hero__search {
  width: min(820px, 92%);
  height: 62px;
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
  max-width: 100%;
}

.home-hero__search-field {
  position: relative; /* anchors the icon, chevron + the dividers */
  flex: 1 1 0;
  min-width: 0; /* lets the fields shrink instead of overflowing */
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  transition: background-color 0.25s ease;
}
/* A touched field reads as active before the visitor opens its list */
.home-hero__search-field:hover {
  background: #faf7f4;
}
.home-hero__search-field:focus-within {
  background: #fdf4ef;
  box-shadow: inset 0 -3px 0 -1px var(--theme, #fa6741);
}

/* Leading icon: states what the field is for without reading its label */
.home-hero__search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--theme, #fa6741);
  pointer-events: none;
  z-index: 2;
}

/* Chevron drawn on the wrapper: it cannot be clipped, does not shift
   with the selected option's text length, and never doubles up. */
.home-hero__search-field::before {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid #4a4a4a;
  border-bottom: 1.5px solid #4a4a4a;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 2;
}

/* Separator line between adjacent fields */
.home-hero__search-field:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 17px;
  bottom: 17px;
  width: 1px;
  background: #d2d2d2;
}

.home-hero__search-select {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  color: #2f2f2f;
  padding: 0 34px 0 46px; /* left clears the leading icon, right the chevron */
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Firefox keeps a dashed inner ring even with appearance:none */
.home-hero__search-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #2f2f2f;
}
/* An unanswered field reads as a prompt rather than as a chosen value */
.home-hero__search-select.is-placeholder {
  color: #8b8f96;
}
.home-hero__search-select option {
  background: #ffffff;
  color: #2f2f2f;
  font-size: 14px;
}

.home-hero__search-btn {
  width: 220px;
  height: 100%;
  flex: 0 0 auto;
  border: none;
  border-radius: 0; /* the bar's own radius shapes the right edge */
  background: linear-gradient(90deg, #ff3f24, #ff8a1d);
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.3s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.home-hero__search-btn-icon {
  font-size: 16px;
  /* keeps the label optically centred when the icon sits beside it */
  transform: translateY(-1px);
}
.home-hero__search-btn:hover {
  filter: brightness(0.94);
}
.home-hero__search-btn:focus-visible {
  outline: 2px solid #1b1b1b;
  outline-offset: -4px;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   Desktop-first cascade, identical values to the previous setup.
========================================================= */

/* ===== LARGE DESKTOP / WIDE MONITORS (min-width: 1441px) ===== */
@media (min-width: 1441px) {
  .home-hero { min-height: 720px; padding: 160px 0 100px; }
  .home-hero__content { margin-top: 30px; }
  .home-hero__search { width: min(880px, 90%); height: 66px; }
  .home-hero__search-btn { width: 240px; font-size: 18px; }
  .home-hero__search-field::before { right: 26px; }
}

/* ===== STANDARD DESKTOP (1025px - 1440px) ===== */
@media (min-width: 1025px) and (max-width: 1440px) {
  .home-hero { min-height: 660px; padding: 140px 0 90px; }
}

/* ===== TABLET LANDSCAPE (max-width: 1024px) =====
   Still one row: three fields plus the button fit comfortably down to
   roughly 768px before the bar has to stack. */
@media (max-width: 1024px) {
  .home-hero { min-height: 600px; height: auto; padding: 120px 0 80px; }
  .home-hero__content { margin-top: 20px; }
  .home-hero__search { width: min(720px, 94%); height: 56px; }
  .home-hero__search-select { font-size: 14px; padding: 0 30px 0 42px; }
  .home-hero__search-icon { left: 18px; font-size: 13px; }
  .home-hero__search-field::before { right: 18px; }
  .home-hero__search-btn { width: 150px; font-size: 15px; }
}

/* ===== TABLET PORTRAIT / LARGE PHONE (max-width: 900px) ===== */
@media (max-width: 900px) {
  .home-hero { min-height: 650px; height: auto; padding: 130px 20px 70px; }
  .home-hero__content { margin-top: 25px; }
  .home-hero__title { font-size: 52px; }
  .home-hero__search { width: min(680px, 94%); height: 54px; }
  .home-hero__search-select { font-size: 13.5px; padding: 0 28px 0 40px; }
  .home-hero__search-icon { left: 16px; font-size: 12.5px; }
  .home-hero__search-field::before { right: 16px; }
  .home-hero__search-field:not(:last-child)::after { top: 14px; bottom: 14px; }
  .home-hero__search-btn { width: 130px; font-size: 14px; }
}

/* ===== MOBILE (max-width: 767px) =====
   One control per row. The browser's own picker takes over on phones, so
   a stacked card reads far better than a squeezed single row. */
@media (max-width: 767px) {
  .home-hero { min-height: 620px; height: auto; padding: 110px 16px 60px; }
  .home-hero__content { margin-top: 20px; }
  .home-hero__title { font-size: 40px; }
  .home-hero__search {
    width: 100%;
    max-width: 420px;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
    padding: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }
  .home-hero__search-field {
    width: 100%;
    height: 52px;
    flex: 0 0 auto;
    border-bottom: 1px solid #ececec;
  }
  .home-hero__search-field:last-of-type { border-bottom: none; }
  /* Vertical dividers make no sense once the fields are stacked */
  .home-hero__search-field::after { display: none; }
  .home-hero__search-select { font-size: 14px; padding: 0 30px 0 40px; }
  .home-hero__search-field::before { right: 20px; }
  .home-hero__search-icon { left: 16px; }
  .home-hero__search-btn {
    width: 100%;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 14px;
    font-size: 15px;
    margin-top: 6px;
  }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
  .home-hero { min-height: 580px; padding: 100px 12px 50px; }
  .home-hero__content { margin-top: 15px; }
  .home-hero__title { font-size: 34px; }
  .home-hero__search { border-radius: 16px; padding: 5px; }
  .home-hero__search-field { height: 48px; }
  .home-hero__search-select { font-size: 13px; padding: 0 28px 0 36px; }
  .home-hero__search-field::before { right: 18px; }
  .home-hero__search-icon { left: 14px; font-size: 12px; }
  .home-hero__search-btn { height: 46px; font-size: 14px; border-radius: 12px; }
}

/* ===== EXTRA SMALL MOBILE (max-width: 360px) ===== */
@media (max-width: 360px) {
  .home-hero { min-height: 560px; padding: 95px 10px 45px; }
  .home-hero__title { font-size: 30px; }
  .home-hero__search-field { height: 46px; }
  .home-hero__search-select { font-size: 12.5px; }
  .home-hero__search-btn { height: 44px; font-size: 13px; }
}

/* ===== MICRO / ULTRA-NARROW DEVICES (max-width: 320px) ===== */
@media (max-width: 320px) {
  .home-hero { padding: 85px 8px 40px; }
  .home-hero__title { font-size: 26px; }
  .home-hero__search { padding: 4px; }
  .home-hero__search-field { height: 44px; }
  .home-hero__search-select { font-size: 11.5px; padding: 0 24px 0 12px; }
  .home-hero__search-btn { height: 42px; font-size: 12.5px; }
}

/* ===== SHORT-HEIGHT LANDSCAPE (phones turned sideways) =====
   Vertical space is the scarce resource here, so the bar collapses back
   into a single row no matter how narrow the viewport is. */
@media (max-height: 520px) and (orientation: landscape) {
  .home-hero { min-height: 420px; padding: 70px 16px 40px; }
  .home-hero__content { margin-top: 10px; }
  .home-hero__search {
    flex-direction: row;
    width: min(660px, 96%);
    max-width: none;
    height: 46px;
    padding: 0;
    border-radius: 999px;
  }
  .home-hero__search-field {
    width: auto;
    height: 46px;
    flex: 1 1 0;
    border-bottom: none;
  }
  .home-hero__search-field:not(:last-child)::after { display: block; top: 10px; bottom: 10px; }
  .home-hero__search-select { font-size: 13px; padding: 0 26px 0 14px; }
  .home-hero__search-field::before { right: 14px; }
  .home-hero__search-btn {
    width: 110px;
    height: 46px;
    border-radius: 0;
    font-size: 13px;
    margin-top: 0;
  }
}

/* ===== TOUCH-DEVICE TAP TARGET SAFEGUARD ===== */
@media (hover: none) and (pointer: coarse) {
  .home-hero__search-field,
  .home-hero__search-btn {
    min-height: 44px; /* WCAG/Apple minimum tap target */
  }
}

/* ===== REDUCED MOTION PREFERENCE ===== */
@media (prefers-reduced-motion: reduce) {
  .home-hero__search-btn { transition: none; }
  .home-hero__search-btn:hover { transform: none; }
}

/* =========================================================
   ABOUT SECTION (home page) — heading font
   Was `.about-main-heading` in the inline style block.
========================================================= */
.home-about__heading {
  font-family: "Playfair Display", serif;
  font-weight: 600;
}