/**
 * SEO content pages with inline hero search (e.g. /flights/cheap-flights-to-california).
 * Reuses homepage search-dock styling via fm-homepage-hero.css comma selectors.
 * This file covers SEO hero band + layout only — not the homepage.
 */

.fm-seo-content-page {
  --fm-homepage-container-max: 1280px;
  --fm-homepage-gutter: 24px;
}

@media (max-width: 640px) {
  .fm-seo-content-page {
    --fm-homepage-gutter: 12px;
  }
}

.fm-seo-content-page .fm-seo-hero {
  position: relative;
  overflow: visible;
  background-color: #1e3a8a;
  background-image: url('/images/homepage/hero-ocean.png');
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 1.25rem 0 1.5rem;
}

.fm-seo-content-page .fm-seo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(15, 23, 42, 0.82) 0%,
    rgba(30, 58, 138, 0.72) 38%,
    rgba(37, 99, 235, 0.58) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.fm-seo-content-page .fm-seo-hero-inner {
  position: relative;
  z-index: 1;
  width: min(var(--fm-homepage-container-max), calc(100% - (2 * var(--fm-homepage-gutter))));
  max-width: var(--fm-homepage-container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.fm-seo-content-page .fm-seo-breadcrumb {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}

.fm-seo-content-page .fm-seo-breadcrumb a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
}

.fm-seo-content-page .fm-seo-breadcrumb a:hover {
  text-decoration: underline;
}

.fm-seo-content-page .fm-seo-hero-title {
  margin: 0 0 1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.375rem, 4.5vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(15, 23, 42, 0.55);
}

.fm-seo-content-page .fm-seo-search-wrap {
  width: 100%;
  margin-top: 0.25rem;
  overflow: visible;
}

.fm-seo-content-page .fm-seo-body {
  background: #f8fafc;
  padding: 2rem 0 2.5rem;
}

.fm-seo-content-page .fm-seo-prose {
  width: min(var(--fm-homepage-container-max), calc(100% - (2 * var(--fm-homepage-gutter))));
  max-width: var(--fm-homepage-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .fm-seo-content-page .fm-seo-hero {
    padding: 0.75rem 0 1rem;
  }

  .fm-seo-content-page .fm-seo-hero-title {
    font-size: clamp(1.25rem, 5.5vw, 1.625rem);
    margin-bottom: 0.875rem;
  }
}

body.fm-has-bottom-bar .fm-seo-content-page .fm-seo-search-wrap .home-search-dock {
  padding-bottom: 12px;
}

/**
 * Bridge: reuse fm-homepage-hero.css search-dock rules via #hero-section.fm-homepage-hero
 * inside SEO pages. Neutralize homepage-only hero band styles on this wrapper only.
 */
.fm-seo-content-page #hero-section.fm-seo-widget-bridge.fm-homepage-hero {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible;
}

.fm-seo-content-page #hero-section.fm-seo-widget-bridge .fm-homepage-hero__overlap-stage {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Inactive service tab on dark SEO hero (symmetric with inactive Hotels tab) */
.fm-seo-content-page #hero-section.fm-seo-widget-bridge .home-search-dock .fms-service-tabs #tab-flights.modern-tab-btn:not(.fms-tab-active) {
  background: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 767px) {
  body.fm-has-bottom-bar .fm-seo-content-page #hero-section.fm-seo-widget-bridge.fm-homepage-hero {
    padding-bottom: calc(var(--fm-bottom-nav-total, 72px) + 16px) !important;
  }
}