/* Home page (index.html) — 1:1 clone of https://delectabledilemmas.com/home.
   Desktop values first, <=767px overrides in the media query at the bottom. */

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../assets/fonts/home-fa-solid-900.woff2") format("woff2");
}

main {
  --h-w: min(1150px, calc(100% - 20px));
  --h-blue: #6fa7cc;
  --h-ink: var(--dd-ink, #2c2c2c);
  --h-card: #f8f7f2;
  display: block;
}
main p, main h1, main h2 { margin: 0; }
main h1, main h2, main p { text-align: center; }
main a, main a:hover { text-decoration: none; }
.h-mobile { display: none !important; }

/* ---------- Hero ---------- */
.h-hero {
  position: relative;
  background: url("../assets/img/home-hero-stockyards.webp") 50% 50% / cover fixed;
  color: #fff;
}
.h-hero__top { height: 183px; }
.h-hero__body {
  display: grid;
  grid-template-columns: 285fr 873fr 272fr;
  padding: 20px 5px;
  background: rgba(0,0,0,.4);
}
.h-hero__content { grid-column: 2; padding: 0 5px; }
.h-hero__h1 { font: 700 40px/52px var(--dd-font-serif); letter-spacing: 2px; color: #fff; }
.h-hero__big { font: 700 70px/91px var(--dd-font-serif); letter-spacing: 1px; padding: 0 10px 15px; color: #fff; }
.h-hero__sub { font: 600 30px/39px var(--dd-font-serif); letter-spacing: 1px; padding: 15px 10px 10px; color: #fff; }
.h-hero__h1, .h-hero__big, .h-hero__sub { text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35); } /* lifts the white text off the grey sky */
.h-hero__sub span { font-size: 28px; }
.h-hero__btn { display: table; margin: 40px auto; box-sizing: border-box; }
.h-hero__btn:hover { color: var(--dd-red-text); }
.h-hero__now {
  background: #a32626; color: #fff; border: 1px solid #fff; padding: 10px;
  font-size: 18px; box-shadow: 0 0 5px 3.6px rgba(255,255,255,.23);
}

/* ---------- Badges ---------- */
.h-badges { background: var(--dd-cream, #f6f2ea); padding: 20px 0; }
.h-badges__col { width: var(--h-w); margin: 0 auto; color: var(--h-ink); }
.h-badges__h { font: 600 34px/44.2px var(--dd-font-serif); padding-top: 10px; }
.h-badges__row {
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 5px;
}
.h-badges__item { grid-row: 1; padding: 20px 15px; display: flex; justify-content: center; }
.h-badges__item img { display: block; width: 198px; height: 198px; border-radius: 0; }
.h-badges__item--a { grid-column: 2; }
.h-badges__item--b { grid-column: 3; align-self: start; margin-top: 19px; padding: 10px; }
.h-badges__item--c { grid-column: 4; }
.h-badges__item--b img { width: 166px; height: 200px; }
.h-badges__tag { font: 600 22px/28.6px var(--dd-font-serif); padding-bottom: 10px; }
.h-badges__sub { font: 600 18px/23.4px var(--dd-font-serif); padding-bottom: 10px; }
.h-badges__tag { font-weight: 400; }
.h-badges__tag strong { font-weight: 700; }

/* ---------- Imagine Your Day ---------- */
.h-imagine { background: #fff; padding: 10px 0; color: var(--h-ink); }
.h-imagine > * { width: var(--h-w); margin-left: auto; margin-right: auto; }
.h-imagine__h { font: 600 34px/44.2px var(--dd-font-serif); padding: 10px 0; margin-top: 10px; }
.h-imagine__item { padding: 10px 0; }
.h-imagine__item:last-child { padding-bottom: 20px; }
.h-imagine__t { font: 600 22px/28.6px var(--dd-font-serif); }
.h-imagine__d { font: 400 18px/23.4px var(--dd-font-serif); }
.h-k { color: #000; }

/* ---------- A great day / Why ---------- */
.h-great, .h-why { background: var(--dd-cream, #f6f2ea); color: var(--h-ink); }
.h-great { padding-bottom: 10px; }
.h-great > * { width: var(--h-w); margin-left: auto; margin-right: auto; }
.h-great__h { font: 600 34px/44.2px var(--dd-font-serif); padding: 20px 0 10px; }
.h-great__lead { width: 680px !important; max-width: var(--h-w); font: 500 22px/28.6px var(--dd-font-serif); padding: 10px 0 20px; }
.h-great__trio p { font: 600 22px/28.6px var(--dd-font-serif); }
.h-great__trio p:nth-child(2) { margin: 10px 0; }
.h-great__trio p:last-child { padding-bottom: 10px; }
.h-great__end { width: 680px !important; max-width: var(--h-w); padding: 10px 0; }
.h-great__end p { font: 600 22px/28.6px var(--dd-font-serif); }
.h-great__end p + p { padding-top: 10px; }

.h-why { padding-bottom: 10px; }
.h-why > * { width: var(--h-w); margin-left: auto; margin-right: auto; }
.h-why__rule { padding: 10px 0; }
.h-why__rule div { width: 75%; margin: 0 auto; border-top: 1px solid #cbd5e0; }
.h-why__kicker { font: italic 400 18px/23.4px var(--dd-font-serif); color: #6b6b6b; padding: 10px 0; }
.h-why__h { font: 600 34px/44.2px var(--dd-font-serif); padding: 10px 0; margin-bottom: 20px; }
.h-icons { display: grid; grid-template-columns: repeat(3, 1fr); width: min(1170px, 100%) !important; padding: 10px 5px; box-sizing: border-box; }
.h-icon { padding: 10px 5px; }
.h-icon:nth-child(2) { padding-left: 40px; padding-right: 40px; }
.h-icon__g { height: 53px; padding-top: 10px; box-sizing: content-box; line-height: 52px; font-size: 40px; color: var(--h-blue); }
.h-icon__g::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal; font-size: inherit; line-height: inherit; color: inherit; }
.h-icon__g--walking::before { content: "\f554"; }
.h-icon__g--puzzle::before { content: "\f12e"; }
.h-icon__g--check::before { content: "\f00c"; }
.h-icon__g--cal::before { content: "\f073"; }
.h-icon__g--phone::before { content: "\f3cd"; }
.h-icon__t { font: 600 22px/28.6px var(--dd-font-serif); padding-top: 10px; }
.h-icon__d { font: 400 18px/23.4px var(--dd-font-serif); padding: 10px 0; }

/* ---------- How It Works ---------- */
.h-how { background: #fff; color: var(--h-ink); }
.h-how__h { font: 600 34px/44.2px var(--dd-font-serif); padding: 30px 0 10px; width: var(--h-w); margin: 0 auto; }
.h-icons--how { margin: 0 auto; padding-top: 10px; padding-bottom: 0; }
.h-icons--how .h-icon__g { height: 58.4px; line-height: 57.2px; font-size: 44px; }
.h-how__cta { padding: 0 0 20px; text-align: center; }
.h-pill { background: #a32626; color: #fff; border: 2px solid #fff; border-radius: 50px; padding: 10px 20px; box-sizing: border-box; text-transform: none; }
.h-pill:hover { color: #fff; }
.h-pill--book { font-size: 24px; font-weight: 400; }
.h-pill--faq { font-size: 18px; font-weight: 500; border-width: 1px; border-radius: 100px; padding: 16px 32px; }

/* ---------- Newsletter ---------- */
.h-news { background: #f8f7f2; padding: 48px 16px 52px; /* more room now that it sits between the carousel and "More Adventures" */ color: var(--h-ink); }
.h-news__h { font: 600 34px/44.2px var(--dd-font-serif); }
.h-news__sub { font: 400 18px/23.4px var(--dd-font-serif); margin-top: -5px; padding: 0 10px; }
.h-news__form { width: 466px; max-width: calc(100% - 22px); margin: 16px auto 0; }
.h-news__field { position: relative; }
.h-news__icon { position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; color: #667085; }
.h-news__field input {
  display: block; width: 100%; height: 42px; box-sizing: border-box; padding: 8px 8px 8px 36px;
  font: 400 16px var(--dd-font-serif); color: #101828; background: #fff;
  border: 1px solid #d0d5dd; border-radius: 6px; box-shadow: 0 1px 2px rgba(16,24,40,.05); outline: none;
}
.h-news__field input::placeholder { color: #667085; opacity: 1; }
.h-news__btn {
  display: block; width: 150px; height: 44px; margin: 10px auto 0; padding: 0; cursor: pointer;
  font: 400 15px var(--dd-font-serif); color: #fff; background: #a32626; border: 0; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}

/* ---------- What Guests Are Saying ---------- */
.h-saying { color: var(--h-ink); }
.h-saying > * { width: var(--h-w); margin-left: auto; margin-right: auto; }
.h-saying__h { font: 600 34px/44.2px var(--dd-font-serif); padding-top: 10px; }
.h-saying__rating { font: 400 18px/23.4px var(--dd-font-serif); padding: 10px 0; margin-bottom: 10px; }
.h-saying__rating::before { content: "\f005"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 18px; color: var(--h-blue); margin-right: 5px; }

.h-reviews { padding-top: 20px; }
.h-reviews__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 545px)); column-gap: 20px;
  width: min(1130px, calc(100% - 40px)); margin: 0 auto; padding: 10px 0;
}
.h-reviews__row--2 { column-gap: 40px; margin-top: 20px; }
.h-reviews__row--3 { display: none; }
.h-card {
  background: var(--h-card); border-radius: 10px; padding: 10px 20px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; color: #000;
}
.h-stars { display: flex; gap: 4px; justify-content: center; line-height: 1; }
.h-stars span { color: var(--h-blue); font-size: 36px; }
.h-card p { font: 400 20px/26px var(--dd-font-serif); color: #000; }
.h-card .h-card__quote { font-weight: 700; }
.h-card__who { padding: 10px 0; }
.h-reviews__foot { width: var(--h-w); margin: 0 auto; padding: 20px 0 15px; color: var(--h-ink); }
.h-reviews__foot p { font: 400 16px/20.8px var(--dd-font-serif); padding: 10px 0; }
.h-reviews__foot p strong { font-weight: 700; }
.h-reviews__foot .h-reviews__grey { color: #6b6b6b; }

/* ---------- Built for Time Together ---------- */
.h-built { background: var(--dd-cream, #f6f2ea); padding-top: 10px; padding-bottom: 10px; color: var(--h-ink); }
.h-built > * { width: var(--h-w); margin-left: auto; margin-right: auto; }
.h-built__h { font: 600 32px/41.6px var(--dd-font-serif); padding-top: 10px; margin-top: 34px; margin-bottom: 24px; }
.h-auds { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 5px; box-sizing: border-box; }
.h-aud { padding: 10px 5px; }
.h-aud__title { font: 700 28px/36.4px var(--dd-font-serif); margin: 0; text-align: center; }
.h-aud__lead, .h-aud__quote { padding: 10px 0; }
.h-aud__lead p, .h-aud__quote p { font: 400 18px/23.4px var(--dd-font-serif); }
.h-aud__lead strong { font-weight: 700; }
.h-aud__img { height: 220px; display: flex; align-items: center; justify-content: center; }
.h-aud__img img { display: block; height: 200px; width: auto; border-radius: 0; }
.h-built__foot { font: 400 16px/20.8px var(--dd-font-serif); padding: 10px 0 5px; }
.h-built__foot strong { font-weight: 700; }

/* ---------- Carousel ---------- */
.h-carousel { position: relative; box-sizing: border-box; margin-top: 19px; padding: 10px; }
.h-carousel__track { display: flex; overflow: hidden; }
.h-carousel__slide { flex: 0 0 100%; aspect-ratio: 1130 / 675; }
.h-carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.h-carousel__arrows { position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.h-carousel__arrows button { pointer-events: auto; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.h-carousel__arrows svg { display: block; width: 40px; height: 40px; }
.h-carousel__dots { position: absolute; left: 10px; right: 10px; bottom: 30px; display: flex; justify-content: center; gap: 8px; }
.h-carousel__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #000; cursor: pointer; }
.h-carousel__dots button.is-active { background: #fff; }

/* ---------- More Adventures ---------- */
.h-more { background: var(--dd-cream, #f6f2ea); padding: 48px 0 40px; color: var(--h-ink); }
.h-more > * { width: var(--h-w); margin-left: auto; margin-right: auto; }
.h-more__h { font: 400 32px/41.6px var(--dd-font-serif); }
.h-more__h strong { font-weight: 700; }
.h-more__p { font: 400 18px/23.4px var(--dd-font-serif); }
.h-more__q { font: 400 18px/23.4px var(--dd-font-serif); padding-bottom: 10px; margin-top: 20px; }
.h-more .h-pill--faq { display: table; width: auto; margin: 0 auto; }

/* ---------- Olive band (home only) ---------- */
.h-band { background: var(--dd-khaki, #dccfb0); }
.h-band__in { background: rgba(0,0,0,.5); padding: 35px 0 40px; text-align: center; }
.h-band__h { font: italic 300 21px/27.3px var(--dd-font-serif); color: #fff; padding: 10px 0; }
.h-band__btn { padding: 10px; box-sizing: border-box; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  main { --h-w: calc(100% - 40px); }
  .h-desktop { display: none !important; }
  .h-mobile { display: block !important; }

  .h-hero__top { height: 126px; background: rgba(0,0,0,.5); }
  .h-hero__body { display: block; padding: 20px 10px; }
  .h-hero__content { padding: 0; }
  .h-hero__h1 { font-size: 28px; line-height: 36.4px; }
  .h-hero__big { font-size: 38px; line-height: 49.4px; }
  .h-hero__sub { font-size: 22px; line-height: 28.6px; }
  .h-hero__now { display: table !important; margin: 0 auto; }

  .h-badges { padding: 20px 10px; }
  .h-badges__col { width: auto; }
  .h-badges__h { font-size: 30px; line-height: 39px; }
  .h-badges__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 12px; padding: 10px; }
  .h-badges__item, .h-badges__item--b { padding: 10px; margin-top: 0; flex: 0 0 159px; box-sizing: border-box; }
  .h-badges__item img { width: 139px; height: 139px; }
  .h-badges__item--b { flex-basis: 200px; }
  .h-badges__item--b img { width: 180px; height: 217px; }
  .h-saying__h { max-width: 300px; }

  .h-imagine { padding: 0 0 30px; }
  .h-imagine__item { padding: 10px 0 0; }
  .h-imagine__item:last-child { padding-bottom: 0; }

  .h-great__h { font-size: 26px; line-height: 33.8px; }
  .h-great__lead { width: var(--h-w) !important; font-size: 18px; line-height: 23.4px; padding: 0 0 15px; }
  .h-great__trio p { font-size: 20px; line-height: 26px; }
  .h-great__end { width: var(--h-w) !important; padding: 0 0 10px; }
  .h-great__end p { font-size: 18px; line-height: 23.4px; }
  .h-great__end p + p { padding-top: 0; }

  .h-why { padding: 10px 0; }
  .h-why__rule { display: none; }
  .h-why__h { margin-bottom: 10px; }
  .h-icon:nth-child(3) .h-icon__t { padding-top: 5px; }
  .h-icon:nth-child(3) .h-icon__d { padding-top: 10px; }
  .h-icons--how .h-icon:nth-child(3) .h-icon__t { padding-top: 10px; }
  .h-how__cta { padding: 10px 0 30px; }
  .h-icons { grid-template-columns: 1fr; width: var(--h-w) !important; padding: 0 0 10px; }
  .h-icon, .h-icon:nth-child(2) { padding: 0; }
  .h-icon__g { padding-top: 0; }
  .h-icon__d { padding: 5px 0 10px; }
  .h-icons--how { margin: 0 auto; padding-top: 10px; padding-bottom: 0; }
  .h-icons--how .h-icon { padding: 0 0 10px; }
  .h-icons--how .h-icon__g { padding-top: 10px; height: 58px; }
  .h-icons--how .h-icon__d { padding: 10px 0; }
  .h-pill--book { font-size: 18px; }
  .h-pill--faq { padding: 10px 20px; }

  .h-news__h { font-size: 30px; line-height: 39px; }
  .h-news__sub { padding: 0 20px; }

  .h-saying { padding: 10px 0; }
  .h-saying__rating { padding: 20px 0; margin-bottom: 0; }
  .h-reviews { padding: 19px 0 10px; }
  .h-reviews__row, .h-reviews__row--2 { display: block; width: calc(100% - 40px); padding: 0; margin: 0 auto; }
  .h-reviews__row--3 { display: block; }
  .h-card { margin-bottom: 5px; padding: 0 10px; justify-content: flex-start; }
  .h-reviews__row--3 .h-card { margin-bottom: 10px; }
  .h-reviews__row--3 .h-card__quote, .h-reviews__row--3 .h-card__body { padding: 10px 0; }
  .h-reviews__foot { padding: 0 0 15px; }

  .h-built { padding: 0; }
  .h-built__h { font-size: 30px; line-height: 39px; margin: 10px auto 0; }
  .h-auds { grid-template-columns: 1fr; padding: 0; }
  .h-aud { padding: 10px 0; }
  .h-aud__title { font-size: 26px; line-height: 33.8px; }
  .h-carousel { width: calc(100% - 20px); margin: 20px auto 0; }
  .h-carousel__slide { aspect-ratio: 350 / 300; }

  .h-more { padding: 40px 0 30px; }
  .h-more__q { margin-top: 10px; }

  .h-band__in { padding: 10px 0 40px; }
  .h-band__h { line-height: 31.5px; }
  .h-band__btn { font-size: 18px; }
}

/* iPhone tap targets: the 10px dots get a larger invisible hit area */
.h-carousel__dots button { position: relative; }
.h-carousel__dots button::after { content: ""; position: absolute; inset: -12px -4px; }