/* Shared chrome + global base for the delectabledilemmas.com clone.
   Owned by the chrome agent. Page agents: do not edit; see CHROME.md. */

:root {
  --dd-font-serif: "EB Garamond", Georgia, serif;
  --dd-font-sans: Roboto, Inter, system-ui, sans-serif;
  --dd-ink: #2c2c2c;
  --dd-red: #a32626;
  --dd-red-text: #fff6ee;
  --dd-cream: #f6f2ea;       /* home page section bg */
  --dd-cream-faq: #f4eedc;   /* faq page section bg */
  --dd-khaki: #dccfb0;       /* home pre-footer band bg (image behind it makes it read olive) */
  --dd-footer-bg: #2c2c2c;
  --dd-footer-rule: #cbd5e0;
  --dd-footer-addr: #f2fff5;
  --dd-container: 1170px;
  --dd-footer-font: var(--dd-font-serif);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--dd-font-serif);
  color: var(--dd-ink);
  background: #fff;
  line-height: normal;
}
img { max-width: 100%; height: auto; }

/* Footer font differs per page on live (inherited page font): set one class on <body> */
body.dd-footer-inter   { --dd-footer-font: Inter, system-ui, sans-serif; }

.container {
  width: 100%;
  max-width: var(--dd-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 5px;
  padding-right: 5px;
}

/* ---------- Buttons ---------- */
.dd-btn {
  display: inline-block;
  font-family: var(--dd-font-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 50px;
  transition: .2s;
}
.dd-btn:hover { text-decoration: none; animation: dd-elevate .2s forwards; }
@keyframes dd-elevate {
  from { box-shadow: 0 0 0 0 transparent; transform: translateY(0); }
  to   { box-shadow: 0 8px 5px -5px #00000040; transform: translateY(-10px); }
}
/* red pill: "BOOK YOUR TOUR ->" */
.dd-btn--red {
  padding: 20px 40px;
  background: var(--dd-red);
  color: var(--dd-red-text);
  border: 1px solid #fff;
  animation: dd-pulse 2s infinite ease-in-out;
}
.dd-btn--red:hover { color: var(--dd-red-text); }
.dd-btn--arrow::after { content: "\2192"; margin-left: 5px; font-weight: 700; }
@keyframes dd-pulse {
  0%   { box-shadow: 0 0 #fff0; }
  25%  { box-shadow: 0 0 2.5px 1px #ffffff40; }
  50%  { box-shadow: 0 0 5px 2px #ffffff80; }
  85%  { box-shadow: 0 0 5px 5px #fff0; }
  100% { box-shadow: 0 0 #fff0; }
}
/* white outline: "RESERVE YOUR DAY" */
.dd-btn--outline {
  padding: 10px;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  font-size: 24px;
  font-weight: 700;
  text-transform: none;
}
.dd-btn--outline:hover { color: #fff; }

/* ---------- Header ---------- */
.dd-header {
  position: relative;
  z-index: 9999;
  width: 100%;
  background-color: #555;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed; /* live: fixed cover layer sized to the viewport, so the photo scales with the window */
}
.dd-header--faq {
  background-image: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url("../assets/img/banner-stockyards.jpg");
}
.dd-header--tours {
  background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("../assets/img/banner-tours.webp");
  padding: 0 5px;
}
.dd-header--about {
  background-image: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url("../assets/img/banner-about.webp");
}
.dd-header--blog {
  background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("../assets/img/banner-stockyards.jpg");
  height: 126px;
  padding: 10px 20px;
}
/* home: no banner of its own. The header takes zero height in flow and its nav floats over the top of the
   next element (the hero), so the hero starts directly under the preview banner. */
.dd-header--home { height: 0; background: none; }
.dd-header--home .dd-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, .5);
  padding: 10px 5px;
}

.dd-nav, .dd-nav * { box-sizing: border-box; }
.dd-nav {
  position: relative;
  width: 100%;
  font-family: "EB Garamond", Georgia, serif;
}
.dd-nav__inner {
  width: 100%;
  min-height: 150px;
  padding: 18px 28px 18px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.dd-logo-link { display: block; flex-shrink: 0; line-height: 0; }
.dd-logo { display: block; width: 145px; height: auto; max-width: none; object-fit: contain; }

.dd-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 34px;
  margin: 48px 0 0 0;
  padding: 0;
  list-style: none;
}
.dd-menu li { margin: 0; padding: 0; }
.dd-menu a {
  color: #fff;
  text-decoration: none;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.dd-menu a:hover { opacity: .75; text-decoration: none; }

.dd-toggle {
  display: none;
  width: 42px; height: 42px;
  padding: 8px;
  margin: 12px 0 0 0;
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.dd-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: #fff;
  transition: transform .25s ease, opacity .25s ease;
}
.dd-nav.is-open .dd-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.dd-nav.is-open .dd-toggle span:nth-child(2) { opacity: 0; }
.dd-nav.is-open .dd-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* blog desktop geometry (blog uses live's native nav, so sizes differ slightly) */
.dd-header--blog .dd-nav__inner { min-height: 0; height: 106px; padding: 3px; align-items: center; }
.dd-header--blog .dd-logo { width: 128px; height: 100px; object-fit: fill; }
.dd-header--blog .dd-menu { margin: 0; gap: 0; }
.dd-header--blog .dd-menu li { margin-left: 19px; }
.dd-header--blog .dd-menu a { display: block; padding: 8px 6px; line-height: 22.1px; border-radius: 2px; }

@media screen and (min-width: 768px) and (max-width: 1100px) {
  .dd-nav__inner { min-height: 130px; padding: 16px 24px; }
  .dd-logo { width: 125px; }
  .dd-menu { gap: 22px; margin-top: 42px; }
  .dd-menu a { font-size: 16px; }
}

@media screen and (max-width: 767px) {
  .dd-nav__inner { min-height: 95px; padding: 12px 18px; align-items: flex-start; }
  .dd-logo { width: 85px; }
  .dd-toggle { display: flex; }
  .dd-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0 20px;
    background: rgba(0, 0, 0, .85);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease, visibility .25s ease, padding .35s ease;
  }
  .dd-nav.is-open .dd-menu {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    padding-top: 12px;
    padding-bottom: 18px;
  }
  .dd-menu li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.18); }
  .dd-menu li:last-child { border-bottom: none; }
  .dd-menu a { display: block; width: 100%; padding: 15px 4px; font-size: 17px; line-height: 1; }

  .dd-header--tours { padding: 0; }

  /* home + blog use live's native GHL menu: small bars, full-screen dim overlay when open */
  .dd-header--home .dd-nav { background: transparent; padding: 0; }
  .dd-header--home .dd-nav__inner { min-height: 0; padding: 23px 13px; }
  .dd-header--home .dd-logo { width: 89px; height: 90px; object-fit: fill; }
  .dd-header--blog { padding: 0; }
  .dd-header--blog .dd-nav__inner { height: 126px; padding: 13px; align-items: flex-start; }
  .dd-header--blog .dd-logo { width: 102px; height: 100px; object-fit: fill; }

  .dd-header--home .dd-toggle, .dd-header--blog .dd-toggle {
    position: relative;
    z-index: 2;
    width: 21px; height: 38px;
    padding: 8px 0 8px 6px;
    gap: 3px;
    align-items: flex-start;
  }
  .dd-header--home .dd-toggle { margin-top: 26px; }
  .dd-header--blog .dd-toggle { margin-top: 18px; }
  .dd-header--home .dd-toggle span, .dd-header--blog .dd-toggle span { width: 15px; height: 2px; }
  .dd-header--home .dd-nav.is-open .dd-toggle span:nth-child(1),
  .dd-header--blog .dd-nav.is-open .dd-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .dd-header--home .dd-nav.is-open .dd-toggle span:nth-child(3),
  .dd-header--blog .dd-nav.is-open .dd-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .dd-header--home .dd-menu, .dd-header--blog .dd-menu {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100vh;
    max-height: none;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 71px 50px 0 0;
    background: rgba(0, 0, 0, .5);
  }
  .dd-header--home .dd-nav.is-open .dd-menu, .dd-header--blog .dd-nav.is-open .dd-menu {
    max-height: none;
    padding: 71px 50px 0 0;
  }
  .dd-header--home .dd-menu li, .dd-header--blog .dd-menu li { width: auto; margin: 0; border: none; }
  .dd-header--home .dd-menu a, .dd-header--blog .dd-menu a { width: auto; padding: 17px 0; line-height: 22.1px; }
}

/* ---------- Footer ---------- */
.dd-footer {
  background: var(--dd-footer-bg);
  color: #fff;
  padding: 20px 0;
  font-family: var(--dd-footer-font);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}
.dd-footer a { color: #fff; text-decoration: none; }
.dd-footer a:hover { text-decoration: none; }
.dd-footer__inner { max-width: 1170px; margin: 0 auto; }

.dd-footer__links { display: flex; padding: 10px 5px 20px; }
.dd-footer__links > div { flex: 1 1 0; padding: 10px 5px; text-align: center; }
.dd-footer__links a {
  display: inline-block;
  padding: 0 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
}

.dd-footer__info { display: flex; padding: 10px 5px; }
.dd-footer__col { flex: 1 1 0; padding: 10px 5px; display: flex; flex-direction: column; justify-content: center; }
.dd-footer__img { padding: 10px; text-align: center; line-height: 0; }
.dd-footer__img img { display: inline-block; width: 150px; max-width: 100%; height: auto; }
.dd-footer__addr .dd-footer__addr-h { margin: 0 0 10px; font-size: 17px; font-weight: 600; line-height: 22.1px; text-align: left; color: #fff; font-family: inherit; }
.dd-footer__addr p { margin: 0; font-size: 16px; line-height: 20.8px; text-align: left; color: var(--dd-footer-addr); }
.dd-footer__addr a { color: var(--dd-footer-addr); }

.dd-footer__legal { max-width: 819px; margin: 0 auto; padding: 10px 5px 25px; text-align: center; }
.dd-footer__legal p { margin: 0; color: #fff; }
.dd-footer__legal .dd-footer__copy { margin-top: 10px; font-size: 16px; line-height: 20.8px; }
.dd-footer__rule { margin: 0; padding: 10px 0 15px; border: 0; }
.dd-footer__rule::before { content: ""; display: block; border-top: 1px solid var(--dd-footer-rule); }
.dd-footer__legal .dd-footer__rights { font-size: 14px; line-height: 18.2px; }

/* Inter pages (all but home/about) have taller line boxes on live */
body.dd-footer-inter .dd-footer__legal .dd-footer__copy { min-height: 22px; }

@media screen and (max-width: 767px) {
  .dd-footer { padding: 0; }
  .dd-footer__links { flex-direction: column; padding: 10px; }
  .dd-footer__links > div { padding: 10px 0; }
  /* Live's mobile footer metrics differ per page (page-level font size). Keyed off the
     per-page body class (dd-page-*; index.html gets dd-page-home). Default (faq): 16px links. */
  body.dd-footer-inter .dd-footer__links a { font-size: 16px; line-height: 21px; }
  body.dd-page-blog .dd-footer__links a { font-size: 19px; line-height: 23px; }
  body.dd-page-blog .dd-footer__links > div { padding: 11px 0; }
  body.dd-page-tours .dd-footer__links a,
  body.dd-page-contact-us .dd-footer__links a { font-size: 18px; line-height: 21px; }
  body.dd-page-tours .dd-footer__links > div,
  body.dd-page-contact-us .dd-footer__links > div { padding: 11px 0; }
  body.dd-page-tours .dd-footer__addr .dd-footer__addr-h,
  body.dd-page-contact-us .dd-footer__addr .dd-footer__addr-h { line-height: 17.85px; }
  .dd-footer__info { flex-direction: column; padding: 0 10px; }
  .dd-footer__col { padding: 0; }
  .dd-footer__col--logo { padding-bottom: 10px; }
  .dd-footer__col--addr { padding-top: 10px; }
  .dd-footer__img { padding: 0; }
  .dd-footer__addr .dd-footer__addr-h, .dd-footer__addr p { text-align: center; }
  .dd-footer__legal { padding: 0 10px 25px; }
}

/* ---------- Preview banner: one short line on phones ---------- */
@media screen and (max-width: 767px) {
  .preview-banner {
    font-size: 11px;
    line-height: 1.4;
    padding: 3px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* iOS Safari doesn't support background-attachment: fixed (live's banners and heroes use it): the photo
   paints blank or blown up to the whole element. Touch devices and narrow screens scroll the photo instead. */
@media (hover: none), (max-width: 1024px) {
  *, *::before, *::after { background-attachment: scroll !important; }
}

/* iPhone tap targets: grow the hit area of the small menu button without changing how it looks */
.dd-toggle { position: relative; }
.dd-toggle::after { content: ""; position: absolute; inset: -6px -12px; }