/* ============================================================
   The Holidave — Landing Page Styles
   File: /css/landing-page.css  (child theme)
   Prefix: thd-  — zero conflict with any theme or plugin
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   FONT AWESOME — guaranteed load
   Ensures all fas/fab icons render regardless of theme/Elementor
══════════════════════════════════════════════════════════════ */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

/* ══════════════════════════════════════════════════════════════
   FULL-WIDTH FIX
   Havezic / JegKit theme wraps page content in containers.
   These rules break out of the container so the landing page
   spans 100% viewport width.
══════════════════════════════════════════════════════════════ */

/* Remove padding/max-width from common parent theme wrappers */
.page-template-front-page .site-content,
.page-template-front-page .content-area,
.page-template-front-page .entry-content,
.page-template-front-page .jeg_content,
.page-template-front-page .jeg_main,
.page-template-front-page .jeg_section,
.page-template-front-page article.page,
.page-template-front-page .post-content,
.page-template-front-page main#primary {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Remove any container restrictions that wrap .thd-page */
.page-template-front-page .jeg_wrapper,
.page-template-front-page .jeg_outer_content,
.page-template-front-page #content,
.page-template-front-page .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* thd-page itself must be full viewport width */
.thd-page {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  overflow-x: hidden !important;
  position: relative !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO — responsive image
══════════════════════════════════════════════════════════════ */
.thd-hero {
  height: 550px;
  max-height: 550px;
}
.thd-hero-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  max-width: none !important;
}
@media (max-width: 900px) {
  .thd-hero { height: 380px !important; max-height: 380px !important; }
}
@media (max-width: 640px) {
  .thd-hero { height: 260px !important; max-height: 260px !important; }
  .thd-hero-img img { object-position: center top !important; }
}

/* ══════════════════════════════════════════════════════════════
   STATS ICONS — force visibility
══════════════════════════════════════════════════════════════ */
.thd-stat-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}
.thd-stat-icon i,
.thd-stat-icon .fas,
.thd-stat-icon .fab,
.thd-stat-icon .far {
  font-size: 18px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════
   DESTINATION CARDS — all same height, no meta line, no link cursor
══════════════════════════════════════════════════════════════ */
.thd-dest-card { position: relative !important; cursor: default !important; }

.thd-dc-img {
  width: 100% !important;
  height: 280px !important;        /* increased size */
  position: relative !important;
  overflow: hidden !important;
}

/* all cards equal height */
.thd-dest-card.thd-large .thd-dc-img {
  height: 280px !important;
}

.thd-dc-overlay { display: none !important; }

.thd-dc-meta { display: none !important; }  /* hide packages count + price */

.thd-dc-body {
  position: static !important;
  padding: 0.85rem 1rem 1rem !important;
  background: #fff !important;
}

.thd-dc-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.25 !important;
  display: block !important;
  text-shadow: none !important;
}

.thd-dc-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 4 !important;
  background: #FB5B32 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
}

/* Destination gradient backgrounds (when no image) */
.thd-dc-bali     { background: linear-gradient(145deg,#3ecf99,#0a5b66) !important; }
.thd-dc-paris    { background: linear-gradient(145deg,#c5dff8,#4e8ec4) !important; }
.thd-dc-japan    { background: linear-gradient(145deg,#fce4ec,#BC002D) !important; }
.thd-dc-dubai    { background: linear-gradient(145deg,#fff3cd,#EF9F27) !important; }
.thd-dc-maldives { background: linear-gradient(145deg,#a8e8f0,#006994) !important; }
.thd-dc-uk       { background: linear-gradient(145deg,#c5d5ff,#012169) !important; }
.thd-dc-aus      { background: linear-gradient(145deg,#d4eaff,#003580) !important; }

/* Package card gradient backgrounds (when no image) */
.thd-pkg-bali     { background: linear-gradient(145deg,#3ecf99,#0a5b66) !important; }
.thd-pkg-paris    { background: linear-gradient(145deg,#c5dff8,#4e8ec4) !important; }
.thd-pkg-maldives { background: linear-gradient(145deg,#a8e8f0,#006994) !important; }
.thd-pkg-tokyo    { background: linear-gradient(145deg,#fce4ec,#BC002D) !important; }
.thd-pkg-dubai    { background: linear-gradient(145deg,#fff3cd,#EF9F27) !important; }
.thd-pkg-greece   { background: linear-gradient(145deg,#e8d5f0,#2e4aa3) !important; }

/* Package image */
.thd-pkg-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  max-width: none !important;
}

/* ══════════════════════════════════════════════════════════════
   HOW IT WORKS — connector line
══════════════════════════════════════════════════════════════ */
a.thd-pkg-card {
  display: flex !important;
  flex-direction: column !important;
  color: #111111 !important;
  text-decoration: none !important;
}
a.thd-pkg-card:hover   { color: #111111 !important; }
a.thd-pkg-card:visited { color: #111111 !important; }

/* ══════════════════════════════════════════════════════════════
   FORM PERKS — 2 col × 2 row grid
══════════════════════════════════════════════════════════════ */
.thd-form-perks {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 2rem !important;
}
@media (max-width: 640px) {
  .thd-form-perks { grid-template-columns: 1fr !important; }
  .thd-form-inner { padding: 3rem 1rem !important; gap: 2rem !important; }
  .thd-form-right { padding: 1.5rem !important; min-height: unset !important; }
  .thd-wa-cta { width: 100% !important; justify-content: center !important; }
}
══════════════════════════════════════════════════════════════ */
.thd-how-grid { position: relative; }
.thd-how-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(12.5% + 16px);
  right: calc(12.5% + 16px);
  height: 2px;
  background: repeating-linear-gradient(
    90deg, #E3F2F4 0, #E3F2F4 8px, transparent 8px, transparent 16px
  );
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 900px) { .thd-how-grid::before { display: none; } }

/* ══════════════════════════════════════════════════════════════
   HOVER TRANSITIONS
══════════════════════════════════════════════════════════════ */
.thd-dest-card       { transition: transform .22s ease, box-shadow .22s ease; }
.thd-pkg-card        { transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease; }
.thd-why-card        { transition: transform .20s ease, box-shadow .20s ease; }
.thd-srv-card        { transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease; }
.thd-btn-primary     { transition: background .15s ease; }
.thd-btn-ghost       { transition: border-color .15s ease, background .15s ease; }
.thd-btn-teal        { transition: background .15s ease; }
.thd-btn-book        { transition: background .15s ease; }
.thd-btn-itin        { transition: background .15s ease, color .15s ease; }
.thd-btn-white       { transition: background .15s ease; }
.thd-btn-outline     { transition: border-color .15s ease, background .15s ease; }
.thd-vc-card         { transition: background .20s ease; }
.thd-srv-card .thd-srv-link i { transition: transform .20s ease; }
.thd-srv-card:hover .thd-srv-link i { transform: translateX(4px); }
.thd-dest-card:hover { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(0,0,0,.16); }
.thd-pkg-card:hover  { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,0,0,.14); }

/* ══════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════ */
@media print {
  .thd-hero-btns, .thd-trust, .thd-dest-cta,
  .thd-visa-btns, .thd-form-wrap, .thd-pkg-btns { display: none !important; }
  .thd-page { background: #fff !important; }
}