/* Small fit-and-finish corrections; preserve the approved layout and theme. */
main > section .section-heading .eyebrow {
  display: block;
  margin-bottom: 12px;
}
main > section .section-heading h2 {
  display: block;
  max-width: 100%;
  margin-inline: auto;
  text-wrap: balance;
}
main > section .section-heading p:not(.eyebrow) {
  max-width: 680px;
  line-height: 1.65;
}

/* Keep all three booking actions on a common baseline. */
#packages .package-card { display: flex; flex-direction: column; }
#packages .package-slideshow { flex: none; }
#packages .package-body { display: flex; flex-direction: column; flex: 1; }
#packages .package-body .package-foot {
  margin-top: auto !important;
  padding-top: 10px;
}

/* Give the wide resort photograph a little more room, with no distortion. */
#about.drh-why .why-hero-card { grid-template-rows: auto 1fr; }
#about.drh-why .why-hero-media {
  height: clamp(260px, 25vw, 350px);
  min-height: 0;
}
#about.drh-why .why-hero-media img { object-fit: cover; object-position: center; }
#about.drh-why .why-hero-media .why-slide { min-height: 0; }
.activity-slide img { display: block; object-fit: cover; }
.activity-overlay h3 { font-size: clamp(20px, 1.8vw, 27px); line-height: 1.2; }

/* Consistent caption baselines and aligned route-card actions. */
.photo-gallery .gallery-item { display: flex; flex-direction: column; }
.photo-gallery .gallery-item img { flex: none; }
.photo-gallery .gallery-item figcaption { flex: 1; display: grid; place-items: center; }
.photo-gallery .gallery-item:first-child { grid-column: 1 / -1; overflow: hidden; }
.photo-gallery .gallery-item:first-child img { height: clamp(300px, 33vw, 440px); aspect-ratio: auto; }
.photo-gallery .gallery-item:first-child figcaption {
  position: absolute;
  inset: auto 0 0;
  display: block;
  padding: 56px 24px 20px;
  background: linear-gradient(transparent, rgba(7, 21, 16, .75));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
#reach .reach-card { display: flex; flex-direction: column; }
#reach .reach-content { display: flex; flex-direction: column; flex: 1; }
#reach .reach-content .btn { margin-top: auto; }

@media (min-width: 901px) and (max-width: 1199px) {
  .top-nav .nav-links { gap: 3px; }
  .top-nav .nav-links a { padding-inline: 6px !important; font-size: 12px !important; }
}

@media (max-width: 640px) {
  /* Retain the same panels, with an even 12px mobile gutter. */
  .site-header .top-nav,
  .site-header .hero,
  .site-header .moving-notice,
  main > section.wrap,
  .site-footer.wrap { width: calc(100% - 24px) !important; margin-inline: auto; }
  main > section .section-heading h2 { max-width: 100% !important; }
  main > section .section-heading { padding-inline: 14px; }
  #about.drh-why .why-hero-media { height: auto; aspect-ratio: 3 / 2; }
  #packages .package-points { gap: 6px; }
  #reach .reach-content .btn { width: 100%; }
  .photo-gallery .gallery-item:first-child img { height: 260px; }
  .photo-gallery .gallery-item:first-child figcaption { padding: 45px 16px 14px; font-size: 15px; text-align: left; }
  .photo-showcase .photo-feature img[width="1920"][height="1080"],
  .photo-gallery .gallery-item img[width="1920"][height="1080"] {
    animation: widePhotoPhonePan 18s ease-in-out alternate infinite;
  }
  .footer-info a,
  .footer-icon-link span { overflow-wrap: anywhere; }
}
@keyframes widePhotoPhonePan {
  from { object-position: left center; }
  to { object-position: right center; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .photo-showcase .photo-feature img[width="1920"][height="1080"],
  .photo-gallery .gallery-item img[width="1920"][height="1080"] { animation: none; }
}
@media (max-width: 380px) {
  .photo-gallery .gallery-item:first-child { grid-column: 1; }
}

/* Resort selector: one tab per property, rooms swap in the panel below. */
.resort-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}
.resort-tab {
  flex: 1 1 200px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(232, 243, 255, 0.18));
  color: #1f3148;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-soft);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.resort-tab strong {
  font-size: 16px;
  font-weight: 800;
}
.resort-tab span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.resort-tab:hover {
  transform: translateY(-1px);
}
.resort-tab.is-active {
  background: linear-gradient(135deg, rgba(29, 107, 63, 0.94), rgba(47, 151, 95, 0.9));
  border-color: rgba(255, 255, 255, 0.18);
}
.resort-tab.is-active strong,
.resort-tab.is-active span {
  color: #fff;
}
.resort-tab:focus-visible {
  outline: 3px solid #c48b18;
  outline-offset: 3px;
}
.resort-panels {
  display: grid;
  gap: 14px;
}
.package-grid[hidden],
.resort-panel[hidden] {
  display: none !important;
}
.package-resort {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29, 107, 63, 0.18);
  background: rgba(29, 107, 63, 0.1);
  color: #1d6b3f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .resort-tab {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Full-page link shown at the end of each home section. */
.fullview-row {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* Standalone section pages (Packages, Meals, ...). */
.subpage-main {
  padding-top: 8px;
  padding-bottom: 32px;
}
.subpage-main > section:first-child {
  margin-top: 0;
}

/* Resort directory cards on the Resorts page: three per row. */
#packages.resort-directory .package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#packages.resort-directory .package-body h3:first-child {
  margin-top: 10px;
}
@media (max-width: 1100px) {
  #packages.resort-directory .package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  #packages.resort-directory .package-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Sections that end with two links. */
.fullview-row .btn + .btn {
  margin-left: 10px;
}

/* ==========================================================================
   Header + footer gradient treatment (matched to dandeliraftinghub.com)
   ========================================================================== */
:root {
  --drh-grad-header: linear-gradient(118deg, #2B0715 0%, #4A0F26 24%, #6B1A3A 48%, #8C5A24 74%, #3B0A20 100%);
  --drh-grad-footer: linear-gradient(160deg, #4A0F26 0%, #3B0A20 52%, #210612 100%);
  --drh-ivory: #F8F3EA;
  --drh-gold: #D5B97A;
}

/* Contact strip sitting directly above the navigation bar. */
.site-header { padding-top: 0 !important; }
.site-strip { display: block; }
.site-strip__inner {
  width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 18px;
  background: #2B0715;
  border: 1px solid rgba(201, 161, 91, .30);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  color: rgba(248, 243, 234, .82);
  font-size: 12.5px;
  line-height: 1.4;
}
.site-strip__item { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: inherit; text-decoration: none; }
.site-strip__place { min-width: 0; }
.site-strip__group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
a.site-strip__item { transition: color .2s ease; }
a.site-strip__item:hover,
a.site-strip__item:focus-visible { color: var(--drh-gold); }
.site-strip__icon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Navigation bar carries the header gradient. */
.site-header .top-nav {
  margin-top: 0 !important;
  background: var(--drh-grad-header) !important;
  background-size: 220% 100% !important;
  animation: drhHeaderDrift 18s ease-in-out infinite !important;
  border: 1px solid rgba(201, 161, 91, .30) !important;
  border-top-color: rgba(201, 161, 91, .20) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 16px 34px rgba(43, 7, 21, .30), inset 0 1px 0 rgba(255, 241, 205, .10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-header .top-nav.is-scrolled {
  background: var(--drh-grad-header) !important;
  background-size: 220% 100% !important;
  border-color: rgba(201, 161, 91, .34) !important;
  box-shadow: 0 14px 36px rgba(43, 7, 21, .38), inset 0 1px 0 rgba(255, 241, 205, .10) !important;
}
@keyframes drhHeaderDrift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Logo + links legible on the dark bar. */
.site-header .brand-logo { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)) !important; }
.site-header .nav-links a,
.site-header .nav-links li:first-child a { color: rgba(248, 243, 234, .88) !important; }
.site-header .nav-links li:first-child a { color: var(--drh-gold) !important; }
.site-header .nav-links a:hover,
.site-header .nav-links a:focus-visible { background: rgba(255, 255, 255, .09) !important; color: #fff !important; }
.site-header .nav-links a::after{display:none!important;content:none!important;height:0!important;}
.site-header .mobile-nav-toggle span { background: var(--drh-ivory) !important; }
#siteNav.mobile-nav-open .mobile-nav-toggle span { background: var(--drh-gold) !important; }

/* Footer gradient band. */
.site-footer {
  margin-top: 32px !important;
  padding: 24px 22px 100px !important;
  background: var(--drh-grad-footer) !important;
  border: 1px solid rgba(201, 161, 91, .24) !important;
  border-radius: 28px !important;
  box-shadow: 0 22px 46px rgba(43, 7, 21, .22), inset 0 1px 0 rgba(255, 241, 205, .08) !important;
  color: var(--drh-ivory);
}
.site-footer .glass-panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)) !important;
  border-color: rgba(201, 161, 91, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 241, 205, .08) !important;
}
.site-footer .footer-col p,
.site-footer .footer-col li,
.site-footer .footer-col span { color: rgba(255, 244, 219, .82) !important; }
.site-footer .footer-col a { color: rgba(255, 244, 219, .85) !important; }
.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible { color: #ffd878 !important; }

@media (max-width: 900px) {
  .site-strip__inner { font-size: 12px; padding: 6px 14px; gap: 10px; }
  .site-strip__group { gap: 14px; }
}
@media (max-width: 720px) {
  .site-strip__inner { flex-wrap: wrap; justify-content: center; text-align: center; gap: 4px 14px; }
  .site-strip__email { display: none; }
}
@media (max-width: 640px) {
  .site-strip__inner { width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .top-nav { animation: none !important; }
}

/* Back-to-top: pinned bottom-right, themed to match the header/footer. */
.scroll-top {
  right: 20px !important;
  bottom: 20px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  z-index: 262 !important;
  background: var(--drh-grad-header) !important;
  border: 1px solid rgba(201, 161, 91, .45) !important;
  color: var(--drh-gold) !important;
  box-shadow: 0 12px 26px rgba(43, 7, 21, .34), inset 0 1px 0 rgba(255, 241, 205, .14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.scroll-top svg { display: block; width: 18px; height: 18px; }
.scroll-top:hover,
.scroll-top:focus-visible {
  color: #fff !important;
  border-color: rgba(213, 185, 122, .70) !important;
  transform: translateY(-2px) !important;
}
@media (max-width: 640px) {
  .scroll-top { right: 14px !important; bottom: 14px !important; width: 40px !important; height: 40px !important; }
}

/* Dandeli travel blog cards (home section + blog listing). */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.blog-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}
.blog-card:hover { transform: translateY(-3px); }
.blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.blog-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
}
.blog-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.blog-tag {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29, 107, 63, 0.18);
  background: rgba(29, 107, 63, 0.1);
  color: #1d6b3f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blog-card-body h3 { font-size: 19px; line-height: 1.3; margin: 0; }
.blog-card-body p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.blog-date { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: #c48b18; }

/* Blog listing + single article rhythm. */
.blog-listing { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.blog-article-body { line-height: 1.8; color: #333; }
.blog-article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-article-body h2, .blog-article-body h3 { margin: 22px 0 10px; }
.blog-article-body p { margin: 0 0 14px; }
.blog-empty { padding: 24px 4px; color: var(--muted); }
.blog-meta { color: #c48b18; font-weight: 600; font-size: 14px; }

/* Dynamic hero resort label: shows the resort currently on screen. */
.hero-resort-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 240, 195, .5);
  background: rgba(255, 250, 233, .14);
  color: #fff1c7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  transition: background .25s ease, border-color .25s ease;
}
.hero-resort-label::after { content: "\2192"; font-size: 13px; letter-spacing: 0; }
.hero-resort-label:hover { background: rgba(255, 250, 233, .26); border-color: rgba(255, 240, 195, .8); }
.hero-resort-label.is-hidden { display: none !important; }

/* Contact / enquiry form */
.inquiry-card {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 28px;
  padding: 30px;
  border-radius: 22px;
  background: #fffdf7;
  border: 1px solid rgba(220, 185, 100, .35);
  box-shadow: 0 16px 40px rgba(6, 18, 12, .10);
}
.inquiry-copy .eyebrow { display: block; margin: 0 0 8px; color: #c48b18; font-weight: 700; letter-spacing: .16em; font-size: 11px; text-transform: uppercase; }
.inquiry-copy h3 { margin: 0 0 10px; color: #2c2014; font-size: 25px; line-height: 1.2; }
.inquiry-copy p { margin: 0; color: #5b4a30; line-height: 1.65; }
.inquiry-form { display: flex; flex-direction: column; gap: 12px; }
.inquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inquiry-field { display: block; font-size: 12px; color: #4a3209; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.inquiry-field > span { display: block; margin-bottom: 6px; }
.inquiry-form input,
.inquiry-form textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(220, 185, 100, .4);
  background: rgba(255, 254, 248, .9);
  font-size: 16px;
  font-family: inherit;
  color: #2c2014;
  font-weight: 500;
  box-sizing: border-box;
  min-height: 48px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.inquiry-form textarea { min-height: 120px; resize: vertical; }
.inquiry-form input:focus,
.inquiry-form textarea:focus { outline: none; border-color: #d99b1f; background: #fff; box-shadow: 0 0 0 3px rgba(217, 155, 31, .18); }
.inquiry-actions { display: flex; margin-top: 2px; }
.inquiry-status { margin: 0; font-size: 14px; font-weight: 600; color: #5b4a30; }
.inquiry-status.is-error { color: #b3261e; }
.inquiry-status.is-success { color: #1a7f37; }
@media (max-width: 800px) {
  .inquiry-card { grid-template-columns: 1fr; padding: 22px; gap: 18px; }
  .inquiry-row { grid-template-columns: 1fr; }
}


/* ---------- Front-end pagination ---------- */
.site-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 34px 0 6px; }
.site-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid rgba(196,139,24,.45); border-radius: 10px; background: rgba(255,255,255,.85); color: #4a3a22; font-weight: 600; font-size: 15px; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.site-page-btn:hover { background: #c48b18; border-color: #c48b18; color: #fff; }
.site-page-btn.is-active { background: #c48b18; border-color: #c48b18; color: #fff; box-shadow: 0 6px 16px rgba(196,139,24,.35); }
.site-page-btn.is-disabled { opacity: .45; pointer-events: none; }

/* ==========================================================================
   Mobile (<=640px): full-bleed header nav + single-column footer
   ========================================================================== */
@media (max-width: 640px) {
  /* Nav must be edge-to-edge like desktop, not inset by a gutter. */
  .site-header .top-nav.full-width {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 0 0 18px 18px !important;
  }

  /* Footer: one clean column, comfortable tap targets, consistent gutters. */
  footer.site-footer {
    width: calc(100% - 24px) !important;
    margin: 26px auto 20px !important;
    padding: 32px 18px 30px !important;
    border-radius: 22px !important;
  }
  footer.site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  footer.site-footer .footer-col:first-child p {
    max-width: none;
    margin-inline: 0;
    padding-top: 0;
  }
  footer.site-footer .footer-col:first-child p::before { display: none; }
  footer.site-footer .footer-tagline { max-width: none !important; }
  footer.site-footer .footer-col h4 {
    font-size: 13px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
  }
  footer.site-footer .footer-col ul { gap: 6px !important; }
  footer.site-footer .footer-links a {
    display: block;
    padding: 8px 0;
    font-size: 15px;
  }
  footer.site-footer .footer-contact .footer-contact-link {
    padding: 8px 0;
    font-size: 14.5px;
  }
  footer.site-footer .footer-contact .footer-contact-link span {
    overflow-wrap: anywhere;
  }
  footer.site-footer .footer-bottom {
    margin-top: 30px !important;
    padding-top: 18px !important;
  }
  footer.site-footer .footer-policy-links {
    gap: 8px 22px;
    font-size: 13.5px;
  }
  footer.site-footer .footer-copyright {
    font-size: 12.5px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   Burgundy gradient for every button / CTA
   ========================================================================== */
.btn,
.btn-accent,
.btn-dark,
.a-btn,
.login-btn,
.float-btn {
  background: linear-gradient(135deg, #8b1c3b 0%, #5a1627 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.btn-accent:hover,
.btn-accent:focus-visible,
.btn:hover,
.btn:focus-visible {
  background: linear-gradient(135deg, #a02549 0%, #6b1d2f 100%) !important;
  color: #fff !important;
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #5a1627 !important;
  border: 1px solid rgba(90, 22, 39, 0.35) !important;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(90, 22, 39, 0.08) !important;
}
.a-btn-ghost {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #5a1627 !important;
  border: 1px solid rgba(90, 22, 39, 0.35) !important;
}
.a-btn-danger {
  background: linear-gradient(135deg, #d7263d 0%, #a01025 100%) !important;
  color: #fff !important;
}

/* ==========================================================================
   Tablet + mobile: hamburger navigation, close button pinned to the top
   ========================================================================== */
@media (max-width: 1100px) {
  .site-header .top-nav {
    grid-template-columns: 1fr auto !important;
  }

  .site-header .mobile-nav-toggle {
    display: inline-flex !important;
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    justify-self: end;
  }

  .site-header .top-nav .nav-links,
  .site-header .top-nav .nav-actions {
    display: none !important;
  }

  .site-header #siteNav.mobile-nav-open .nav-links {
    display: grid !important;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 8px;
    padding: 12px;
    margin-top: 8px;
    border-radius: 14px;
    border: 1px solid rgba(201, 161, 91, 0.30);
    background: rgba(43, 7, 21, 0.96);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
  }

  .site-header #siteNav.mobile-nav-open .nav-actions {
    display: grid !important;
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 8px;
  }

  .site-header #siteNav.mobile-nav-open .nav-actions .btn {
    width: 100%;
  }

  /* Keep the close (X) button on the top row, never below the links. */
  .site-header #siteNav.mobile-nav-open .mobile-nav-toggle {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    justify-self: end;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .site-header #siteNav.mobile-nav-open .nav-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Footer on phones: brand row, then Quick Links + Explore side by side, then Contact. */
@media (max-width: 640px) {
  footer.site-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 18px !important;
  }

  footer.site-footer .footer-grid > .footer-brand {
    grid-column: 1 / -1;
  }

  footer.site-footer .footer-grid > .footer-contact {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Edge-to-edge header + footer, white hamburger, bigger logo
   ========================================================================== */

/* Contact strip sits flush: no rounded top, full width. */
.site-header .site-strip__inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding-inline: clamp(16px, 4vw, 48px) !important;
}

/* Nav bar: full width, no rounded corners on any side. */
.site-header .top-nav,
.site-header .top-nav.full-width {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Hamburger (closed) and the close (X) icon: white. */
.site-header .mobile-nav-toggle span,
.site-header #siteNav.mobile-nav-open .mobile-nav-toggle span {
  background: #fff !important;
}

/* Bigger navigation logo on mobile + tablet. */
@media (max-width: 1100px) {
  .site-header .brand-logo {
    height: 46px !important;
    max-width: 132px !important;
  }
}

/* Footer band: full width, square corners (no rounded bottom). */
.site-footer,
footer.site-footer,
footer.site-footer.wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

/* Let the footer content stretch to the full band. */
.site-footer .footer-grid,
.site-footer .footer-bottom {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   DARK THEME — whole site main content
   ========================================================================== */
:root {
  --bg-0: #150608;
  --bg-1: #210b13;
  --text: #f4ece2;
  --muted: #c6b3a9;
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);
  --glass-white: rgba(255, 255, 255, 0.055);
  --glass-white-2: rgba(255, 255, 255, 0.03);
  --glass-blue: rgba(255, 255, 255, 0.035);
  --glass-green: rgba(255, 255, 255, 0.035);
  --glass-warm: rgba(255, 255, 255, 0.035);
  --shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 22px 46px rgba(0, 0, 0, 0.45);
}

body {
  background:
    radial-gradient(900px 560px at 5% 5%, rgba(139, 28, 59, 0.30), transparent 62%),
    radial-gradient(920px 580px at 95% 6%, rgba(90, 22, 39, 0.36), transparent 64%),
    radial-gradient(900px 640px at 50% 98%, rgba(140, 90, 36, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1)) !important;
  color: var(--text) !important;
}

/* Panels, cards and section headers become dark glass. */
.section-shell,
.glass-panel,
.glass-panel.warm,
.glass-chip,
.section-heading {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)) !important;
  border-color: rgba(213, 185, 122, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 36px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
}

/* Headings stay bright; body copy goes muted. */
main h1, main h2, main h3, main h4, main h5,
.section-heading h2, .section-heading h3,
.why-card h4, .activity-card h3, .reach-content h3,
.blog-content h3, .package-body h3, .meal-card h3,
.testimonial-head h4, .faq-question span:first-child {
  color: #f8f1e6 !important;
}
main p, main li, main small, main label, main figcaption,
.section-heading p, .package-text, .package-meta, .checkin-note,
.tariff-row span, .why-card p, .activity-card p, .blog-content p,
.blog-date, .reach-content p, .testimonial-card > p:last-child,
.testimonial-head p, .trust-item p, .faq-answer p, .package-foot small,
.photo-count, .blog-empty, .resort-tab span {
  color: var(--muted) !important;
}
.eyebrow { color: #d9b86a !important; }
.text-link, .blog-meta { color: #e9c877 !important; }

/* Light chips / pills / rows inside cards. */
.package-points span,
.tariff-row,
.feature-list li,
.faq-icon,
.chip,
.resort-tab,
.photo-filters button,
.photo-gallery .gallery-item {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--text) !important;
}
.tariff-row strong, .package-foot strong { color: #f8f1e6 !important; }
.package-points span { color: #e7dccf !important; }
.chip.active,
.resort-tab.is-active,
.photo-filters button[aria-pressed='true'] {
  background: linear-gradient(135deg, #8b1c3b, #5a1627) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.badge {
  background: linear-gradient(135deg, #d5b97a, #c39a4e) !important;
  color: #2c2014 !important;
  border-color: transparent !important;
}
.rating-tag {
  background: rgba(29, 107, 63, 0.35) !important;
  color: #bdf0cf !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.faq-icon { color: #f8f1e6 !important; }
.photo-gallery .gallery-item figcaption { color: var(--muted) !important; }

/* Why-Us section + cards (hardcoded cream). */
#about.drh-why {
  background:
    radial-gradient(620px 360px at 15% 0%, rgba(139, 28, 59, 0.28), transparent 70%),
    radial-gradient(520px 320px at 100% 100%, rgba(140, 90, 36, 0.16), transparent 70%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  border-color: rgba(213, 185, 122, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 42px rgba(0, 0, 0, 0.35) !important;
}
#about.drh-why .why-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)) !important;
  border-color: rgba(213, 185, 122, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 28px rgba(0, 0, 0, 0.32) !important;
}
#about.drh-why .why-card h4 { color: #f8f1e6 !important; }
#about.drh-why .why-card p { color: var(--muted) !important; }

/* Reach cards (hardcoded cream). */
#reach .reach-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)) !important;
  border-color: rgba(213, 185, 122, 0.18) !important;
}

/* Meal cards (hardcoded cream). */
.meal-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 226, 160, 0.05)) !important;
  border-color: rgba(213, 185, 122, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 28px rgba(0, 0, 0, 0.30) !important;
}
.meal-card h3 { color: #f8f1e6 !important; }
.meal-card p { color: var(--muted) !important; }
.meal-card::before { border-color: rgba(213, 185, 122, 0.18) !important; }

/* Inquiry / contact form (hardcoded cream). */
.inquiry-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(213, 185, 122, 0.20) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}
.inquiry-copy h3 { color: #f8f1e6 !important; }
.inquiry-copy p, .inquiry-field, .inquiry-field > span, .inquiry-status { color: var(--muted) !important; }
.inquiry-form input,
.inquiry-form textarea,
main input, main textarea, main select {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--text) !important;
}
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: rgba(244, 236, 226, 0.45) !important; }
.inquiry-form input:focus,
.inquiry-form textarea:focus {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: #d9b86a !important;
}

/* Marquee notice bar. */
.moving-notice {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(213, 185, 122, 0.18) !important;
}
.moving-notice-track span { color: var(--muted) !important; }

/* ==========================================================================
   CONTRAST CORRECTIONS
   The dark-theme pass forces bright cream text on headings everywhere; on
   the few light/cream/golden surfaces below that produced unreadable text.
   Restore dark ink on those surfaces (and on hover/active/selected states).
   ========================================================================== */

/* Activity carousel overlay: light cream glass panel -> dark ink. */
main .activity-overlay {
  color: #2c2014 !important;
}
main .activity-overlay h3,
main .activity-slide .activity-overlay h3 {
  color: #2c2014 !important;
  text-shadow: none !important;
}
main .activity-overlay .badge,
main .activity-overlay small,
main .activity-overlay span {
  color: #2c2014 !important;
  text-shadow: none !important;
}

/* FAQ active +/x icon: gold gradient chip -> dark glyph for legibility. */
.faq-item.active .faq-icon {
  color: #3a2606 !important;
  background: linear-gradient(145deg, #d7a231, #f0c757) !important;
}

/* Native form controls in the dark theme: keep the open dropdown list
   readable (dark surface, light text) instead of system-white + cream. */
main select,
main input,
main textarea {
  color: var(--text) !important;
}
main select option,
main select optgroup,
select option {
  background-color: #241016 !important;
  color: #f6efe6 !important;
}
main select:hover,
main select:focus {
  border-color: #d9b86a !important;
}
main select option:checked,
main select option:hover {
  background-color: #8b1c3b !important;
  color: #fff !important;
}

/* Pagination: gold hover/active states need dark ink, not white. */
.site-page-btn:hover,
.site-page-btn:focus-visible,
.site-page-btn.is-active {
  background: #d7a231 !important;
  border-color: #d7a231 !important;
  color: #2c2014 !important;
}

/* Carousel arrows sit on the light cream overlay: dark ink. */
main .carousel-btn {
  color: #6f4709 !important;
  text-shadow: none !important;
}

/* ==========================================================================
   READABILITY PASS 2  (final, authoritative)
   The content sections/cards render on warm CREAM & GOLD surfaces, but the
   dark-theme pass forces bright cream text -> cream-on-cream (invisible).
   Here we force deep-ink text on every light surface and dark-ink on gold
   accents, while dark areas (hero, header, footer, overlays) keep bright
   text and gain a soft shadow for legibility over photography.
   ========================================================================== */

/* ---- Headings on light surfaces: deep ink ---- */
.section-shell h1, .section-shell h2, .section-shell h3, .section-shell h4, .section-shell h5,
.section-heading h2, .section-heading h3,
.package-card h3, .price-card strong, .why-card h4, .blog-content h3,
.reach-content h3, .meal-card h3, .reel-feature h3,
.contact-section h3, .faq-question span:first-child {
  color: #241c12 !important;
}

/* ---- Body copy on light surfaces: dark warm grey ---- */
.section-shell p, .section-shell li, .section-shell small, .section-shell label, .section-shell figcaption,
.section-heading p, .package-text, .package-meta, .package-resort, .package-foot small,
.tariff-row span, .tariff-row strong, .why-card p, .blog-content p, .blog-date, .reach-content p,
.meal-card p, .faq-answer p, .contact-section p, .contact-section span, .contact-section label,
.checkin-note, .photo-count, .blog-empty, .reel-feature p, .reel-feature span, .reel-feature small,
.package-points span, .testimonial-card > p:last-child {
  color: #54432f !important;
}

/* ---- Eyebrows / meta links on light: brand-dark gold ---- */
.eyebrow { color: #8a5b0d !important; }
.text-link, .blog-meta { color: #8a5b0d !important; }

/* ---- Badges (gold pill) -> dark ink (beat .media-wrap .badge / #packages .badge) ---- */
.badge, .badge.badge, .media-wrap .badge.badge, .package-slideshow .badge.badge, #packages .badge.badge {
  background: linear-gradient(135deg, #e6c05a, #c48b18) !important;
  color: #241c12 !important;
  border-color: transparent !important;
}

/* ---- Meal time chip (gold) -> dark ink ---- */
.meal-card .meal-eyebrow.meal-eyebrow, .meal-eyebrow {
  background: linear-gradient(135deg, #e6c05a, #c48b18) !important;
  color: #241c12 !important;
  border-color: transparent !important;
}

/* ---- FAQ ---- */
.faq-question { background: rgba(255, 255, 255, 0.55) !important; color: #241c12 !important; }
.faq-question span:first-child { color: #241c12 !important; }
.faq-item.active .faq-question { background: linear-gradient(135deg, #e6c05a, #c48b18) !important; color: #241c12 !important; }
.faq-item.active .faq-question span:first-child { color: #241c12 !important; }
.faq-item.active .faq-icon { color: #241c12 !important; }

/* ---- Gallery filters / resort tabs / reel choices (gold chips) ---- */
.resort-tab, .photo-filters button, .photo-feature, .reel-choice {
  background: rgba(255, 255, 255, 0.55) !important;
  color: #3a2c1c !important;
  border-color: rgba(138, 91, 13, 0.28) !important;
}
.resort-tab span, .reel-choice small, .reel-choice-action { color: inherit !important; }
.resort-tab.is-active, .photo-filters button[aria-pressed='true'],
.photo-feature.is-active, .reel-choice.is-active {
  background: linear-gradient(135deg, #e6c05a, #c48b18) !important;
  color: #241c12 !important;
  border-color: transparent !important;
}

/* ---- Nav "Book Now" (style.css hardcodes #ffffff !important) -> dark ink ---- */
.nav-actions .btn-accent.btn-accent, .nav-actions .nav-booknow-text.nav-booknow-text,
#cta-nav-booknow, #cta-nav-booknow .nav-booknow-text, .nav-booknow-text.nav-booknow-text {
  color: #241c12 !important;
}

/* ---- Hero price card (light card inside hero) ---- */
.hero .price-card .label.label, .hero .price-card small.small,
.price-card .label.label, .price-card small.small { color: #6b5434 !important; }

/* ---- Hero text over photography: keep bright, add legibility shadow ---- */
.hero-copy .hero-kicker, .hero-copy h1, .hero-copy .hero-lead,
.hero-side p, .hero-side .pill {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55) !important;
}
.hero-side { background: linear-gradient(135deg, rgba(36, 18, 24, 0.80), rgba(22, 10, 15, 0.66)) !important; }
.hero .pill, .hero-side .pill, .pill.rating, .pill.muted, .hero-collage-plus {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #f6efe6 !important;
  border-color: rgba(213, 185, 122, 0.42) !important;
}

/* ---- Why-Us section: go fully dark, keep bright text (mid-tone bg was murky) ---- */
#about.drh-why { background: linear-gradient(145deg, #3a2128, #241219) !important; border-color: rgba(213, 185, 122, 0.22) !important; }
#about.drh-why .why-hero-content { background: transparent !important; }
#about.drh-why h1, #about.drh-why h2, #about.drh-why h3, #about.drh-why h4 { color: #f6efe6 !important; }
#about.drh-why p, #about.drh-why small, #about.drh-why span { color: #d9cbb8 !important; }
#about.drh-why .eyebrow { color: #e9c877 !important; }
#about.drh-why .why-card,
#about.drh-why .why-hero-card { background: #2a1620 !important; border-color: rgba(213, 185, 122, 0.22) !important; }

/* ==========================================================================
   READABILITY PASS 3 — residual light-surface text fixes
   ========================================================================== */

/* Announcement marquee (renders on a light bar) */
.moving-notice .moving-notice-track span { color: #54432f !important; }
.moving-notice .notice-label, .notice-label { color: #8a5b0d !important; }

/* Gallery captions (light) vs gallery counters (dark section) */
.gallery-item figcaption, .photo-gallery .gallery-item figcaption { color: #54432f !important; }
.photo-count { color: #d9cbb8 !important; }

/* Showcase gold filter chips -> dark ink */
.photo-showcase .photo-feature { background: linear-gradient(135deg, #e6c05a, #c48b18) !important; color: #241c12 !important; border-color: transparent !important; }
.photo-showcase .photo-feature span { color: inherit !important; }
.photo-showcase .photo-feature.is-active { background: linear-gradient(135deg, #d7a231, #a4730f) !important; color: #241c12 !important; }

/* Resort tabs (packages) */
.resort-tabs .resort-tab { background: rgba(255, 255, 255, 0.14) !important; color: #f6efe6 !important; border-color: rgba(213, 185, 122, 0.40) !important; }
.resort-tabs .resort-tab strong, .resort-tabs .resort-tab span { color: inherit !important; }
.resort-tabs .resort-tab.is-active, .resort-tabs .resort-tab.is-active strong { background: linear-gradient(135deg, #e6c05a, #c48b18) !important; color: #241c12 !important; border-color: transparent !important; }

/* Package green resort tag */
.package-resort { color: #eafff2 !important; background: rgba(29, 107, 63, 0.92) !important; }

/* Tariff "/pp" */
.tariff-row small, .tariff-row strong small { color: #6b5434 !important; }

/* Blog tag over photo */
.blog-tag { background: rgba(46, 125, 50, 0.92) !important; color: #eafff2 !important; }

/* Hero price card -> opaque dark (its own text rules already set light) */
.hero-meta .price-card.price-card { background: #2a1620 !important; border-color: rgba(213, 185, 122, 0.28) !important; }

/* Force correct hero text colours over photography */
.hero-copy .hero-kicker { color: #e9c877 !important; }
.hero-copy h1, .hero-copy .hero-title { color: #f8f1e6 !important; }
.hero-copy .hero-lead, .hero-side p { color: #f1e6d2 !important; }

/* ==========================================================================
   READABILITY PASS 4 — keep light cards light (dark ink), fix hero widgets
   ========================================================================== */

/* Why cards: light cream with dark ink (the section panel stays dark) */
#about.drh-why .why-card,
#about.drh-why .why-hero-card { background: #fff7ea !important; border-color: rgba(138, 91, 13, 0.22) !important; }
#about.drh-why .why-card h1, #about.drh-why .why-card h2, #about.drh-why .why-card h3, #about.drh-why .why-card h4,
#about.drh-why .why-hero-card h1, #about.drh-why .why-hero-card h2, #about.drh-why .why-hero-card h3, #about.drh-why .why-hero-card h4 { color: #241c12 !important; }
#about.drh-why .why-card p, #about.drh-why .why-hero-card p,
#about.drh-why .why-card small, #about.drh-why .why-hero-card small { color: #54432f !important; }
#about.drh-why .why-card .eyebrow, #about.drh-why .why-hero-card .eyebrow { color: #8a5b0d !important; }

/* Hero price card -> opaque light cream with dark ink */
.hero-meta .price-card.price-card { background: #fff7ea !important; border-color: rgba(138, 91, 13, 0.22) !important; }
.hero-meta .price-card .label, .hero-meta .price-card small { color: #6b5434 !important; }
.hero-meta .price-card strong { color: #241c12 !important; }

/* Hero side pills (light pill + cream text) -> dark chip + cream text */
.hero-side .pill.pill, .hero-side-top .pill.pill { background: rgba(255, 255, 255, 0.16) !important; color: #f6efe6 !important; border-color: rgba(213, 185, 122, 0.42) !important; }

/* Hero "Chat with Us" button */
.hero-side .btn-dark.btn-dark { background: linear-gradient(135deg, #e6c05a, #c48b18) !important; color: #241c12 !important; border-color: transparent !important; }

/* Resort tabs: light inactive (dark ink), gold active (dark ink) */
.resort-tabs .resort-tab, .resort-tabs .resort-tab strong, .resort-tabs .resort-tab span { color: #3a2c1c !important; }
.resort-tabs .resort-tab { background: rgba(255, 255, 255, 0.62) !important; border-color: rgba(138, 91, 13, 0.28) !important; }
.resort-tabs .resort-tab.is-active, .resort-tabs .resort-tab.is-active strong, .resort-tabs .resort-tab.is-active span { background: linear-gradient(135deg, #e6c05a, #c48b18) !important; color: #241c12 !important; border-color: transparent !important; }

/* ==========================================================================
   READABILITY PASS 5 — hero glass panels & pills (clear-photo hero)
   ========================================================================== */

/* Darken the hero content glass so bright text pops over the photo */
.hero-refined .hero-copy,
.hero-refined .hero-side {
  background: linear-gradient(125deg, rgba(16, 26, 22, 0.62), rgba(9, 18, 15, 0.80)) !important;
  border-color: rgba(255, 250, 226, 0.32) !important;
}

/* Hero pills: opaque dark chip + cream text */
.hero-refined .hero-side .pill,
.hero-side .pill.pill,
.pill.rating,
.pill.muted {
  background: rgba(20, 10, 14, 0.55) !important;
  color: #f6efe6 !important;
  border-color: rgba(213, 185, 122, 0.45) !important;
}

/* Hero is also a .section-shell: keep its headings bright (not dark ink) */
.hero.section-shell h1, .hero.section-shell h2, .hero.section-shell h3,
.hero.section-shell h4, .hero.section-shell h5,
.hero-refined .hero-side h3 { color: #f8f1e6 !important; }

/* ==========================================================================
   READABILITY PASS 6 — "smoke white" text on dark surfaces
   ========================================================================== */

/* Hero: lighter glass + soft-white text over the photo */
.hero-refined .hero-copy,
.hero-refined .hero-side {
  background: linear-gradient(125deg, rgba(26, 34, 30, 0.38), rgba(12, 20, 17, 0.58)) !important;
}
.hero-copy .hero-kicker { color: rgba(255, 255, 255, 0.80) !important; }
.hero-refined .hero-copy h1, .hero-refined .hero-copy .hero-title,
.hero-copy h1, .hero-copy .hero-title { color: #ffffff !important; }
.hero-copy .hero-lead,
.hero-side p,
.hero-refined .hero-side p { color: rgba(255, 255, 255, 0.90) !important; }
.hero-refined .hero-side h3,
.hero.section-shell h3 { color: #ffffff !important; }

/* Hero pills: dark smoke chip + white text */
.hero-refined .hero-side .pill,
.hero-side .pill.pill,
.pill.rating,
.pill.muted {
  background: rgba(15, 10, 12, 0.42) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
}

/* #about.drh-why (dark panel): smoke-white text */
#about.drh-why h1, #about.drh-why h2, #about.drh-why h3, #about.drh-why h4 { color: #ffffff !important; }
#about.drh-why p, #about.drh-why li, #about.drh-why small { color: rgba(255, 255, 255, 0.82) !important; }
#about.drh-why .eyebrow { color: rgba(255, 255, 255, 0.72) !important; }

/* Footer: smoke-white text */
footer.site-footer .footer-col p, footer.site-footer .footer-col li, footer.site-footer .footer-col span,
footer.site-footer .footer-tagline, footer.site-footer .footer-contact-link span,
footer.site-footer .footer-copyright { color: rgba(255, 255, 255, 0.82) !important; }
footer.site-footer .footer-col a, footer.site-footer .footer-links a { color: rgba(255, 255, 255, 0.85) !important; }
footer.site-footer .footer-col h4, footer.site-footer .footer-col strong, footer.site-footer .footer-brand-link,
footer.site-footer .footer-parent-details strong { color: #ffffff !important; }
footer.site-footer .footer-parent-details address { color: rgba(255, 255, 255, 0.72) !important; }

/* ---- Native select safety (dark list) ---- */
main select { color: #241c12 !important; background: #ffffff !important; }
main select option { background: #241016 !important; color: #f6efe6 !important; }

/* ==========================================================================
   THEME: DARK BACKGROUND + SMOKE-WHITE TEXT + GOLD ACCENTS
   ========================================================================== */
:root {
  --bg-0: #0a0b0d;
  --bg-1: #0e1013;
  --text: #f5f5f4;
  --muted: rgba(245, 245, 244, 0.66);
  --line: rgba(201, 162, 75, 0.26);
  --line-soft: rgba(255, 255, 255, 0.09);
  --glass-white: rgba(255, 255, 255, 0.05);
  --glass-white-2: rgba(255, 255, 255, 0.03);
  --glass-blue: rgba(201, 162, 75, 0.06);
  --glass-green: rgba(201, 162, 75, 0.06);
  --glass-warm: rgba(201, 162, 75, 0.06);
  --accent: #c9a24b;
  --accent-dark: #a97e28;
  --green: #c9a24b;
  --green-2: #d8b45e;
  --blue: #c9a24b;
  --gold: #c9a24b;
  --drh-grad-header: linear-gradient(118deg, #0c0d10 0%, #17181c 50%, #0c0d10 100%);
  --drh-grad-footer: linear-gradient(160deg, #101113 0%, #0a0b0d 100%);
  --drh-ivory: #f5f5f4;
  --drh-gold: #c9a24b;
}

html, body { background: #0a0b0d !important; }
body {
  color: var(--text) !important;
  background:
    radial-gradient(900px 560px at 6% 4%, rgba(201, 162, 75, 0.10), transparent 62%),
    radial-gradient(900px 640px at 95% 9%, rgba(201, 162, 75, 0.06), transparent 64%),
    linear-gradient(180deg, #0a0b0d, #0e1013) !important;
  animation: none !important;
}

/* Contact strip + header bar -> dark with gold edges */
.site-strip__inner { background: #0e0f12 !important; border-color: rgba(201, 162, 75, 0.28) !important; color: rgba(245, 245, 244, 0.82) !important; }
.site-header .nav-links a, .site-header .nav-links li:first-child a { color: rgba(245, 245, 244, 0.88) !important; }
.site-header .nav-links a:hover, .site-header .nav-links a:focus-visible { color: #ffffff !important; background: rgba(201, 162, 75, 0.14) !important; }

/* Containers -> dark glass with gold edge */
main > section, main > div, main section, main .wrap,
.section-shell, .listing-section, .meal-section, .adventure-section, .blog-section,
.reach-section, .faq-section, .contact-section, .gallery-block, .photo-showcase,
.fullview-row, .drh-reels, .glass-panel, .glass-panel.warm, .glass-chip, .section-heading {
  background-color: #101216 !important;
  background-image: linear-gradient(135deg, #14161a, #0d0f12) !important;
  border-color: rgba(201, 162, 75, 0.20) !important;
}

/* Cards / chips -> dark glass + gold edge */
.package-card, .meal-card, .blog-card, .gallery-card, .reach-card, .activity-card,
.testimonial-card, .faq-item, .price-card, .why-card, .why-hero-card,
.photo-feature, .tariff-rows, .tariff-row, .why-stats div, .compare-card, .media-wrap,
.package-body, .meal-body, .blog-content, .reach-content, .faq-list,
.package-resort, .blog-tag, .meal-eyebrow, .badge, .eyebrow,
.hero .price-card.price-card, .hero-meta .price-card.price-card,
.photo-showcase .photo-feature, .resort-tabs .resort-tab,
.hero-refined .hero-side .pill, .hero-side .pill.pill, .pill.rating, .pill.muted {
  background-color: #171a1f !important;
  background-image: none !important;
  border-color: rgba(201, 162, 75, 0.22) !important;
}

/* #about.drh-why cards (id specificity) */
#about.drh-why .why-card, #about.drh-why .why-hero-card,
#about.drh-why .why-hero-media, #about.drh-why .why-stats div {
  background-color: #171a1f !important;
  background-image: none !important;
  border-color: rgba(201, 162, 75, 0.20) !important;
}

/* Text -> smoke white */
main h1, main h2, main h3, main h4, main h5, main h6,
.section-heading h2, .section-heading h3, .section-heading h4,
.package-body h3, .meal-card h3, .blog-content h3, .reach-content h3,
.why-card h4, .why-hero-content h3, .activity-card h3, .testimonial-head h4,
.faq-question span:first-child, .hero-copy h1, .hero-side h3, .price-card strong,
.site-footer .footer-col h4, .contact-section h3,
#about.drh-why h1, #about.drh-why h2, #about.drh-why h3, #about.drh-why h4,
#about.drh-why .why-card h1, #about.drh-why .why-card h2, #about.drh-why .why-card h3, #about.drh-why .why-card h4,
#about.drh-why .why-hero-card h1, #about.drh-why .why-hero-card h2, #about.drh-why .why-hero-card h3, #about.drh-why .why-hero-card h4,
#packages .package-body h3, #reach .reach-content h3, #contact .cta-copy h2,
#about .compare-card h3, #about .feature-list strong,
#packages .package-foot strong, #packages .tariff-row strong,
#about.drh-why .why-hero-content h3, #about.drh-why .why-stats strong {
  color: #ffffff !important;
}

main p, main li, main small, main label, main figcaption, main span, main div,
main a, main strong, main em, main b,
.section-heading p, .package-text, .package-meta, .blog-meta, .reach-content p,
.why-card p, .meal-card p, .blog-content p, .faq-answer p, .cta-copy p,
.site-footer .footer-col p, .site-footer .footer-col li, .site-footer .footer-col a,
.site-footer .footer-tagline, .site-footer .footer-contact-link span, address,
#about.drh-why p, #about.drh-why li, #about.drh-why small,
#about.drh-why .why-card p, #about.drh-why .why-hero-card p,
#packages .package-meta, #packages .package-text, #packages .package-foot small,
#packages .tariff-row span, #reach .reach-content p, #faq .faq-answer p,
#about .feature-list li, #about .feature-list span,
#about.drh-why .why-hero-content p:not(.eyebrow), #about.drh-why .why-stats span {
  color: rgba(245, 245, 244, 0.78) !important;
}

/* Small labels -> bright smoke white (no gold text) */
.eyebrow, .meal-eyebrow, .blog-tag, .package-resort, .badge,
.why-num, .why-stats strong, .hero-kicker, .price-card .label, .price-card small,
#about.drh-why .why-num, #about.drh-why .why-stats strong, #about.drh-why .eyebrow,
#packages .badge, #packages .package-meta {
  color: rgba(245, 245, 244, 0.86) !important;
}

/* Gold accents: buttons, active states, dividers */
.btn, .btn-accent, .btn-dark, .btn-ghost, .cta-actions .btn, .package-foot .btn,
.reach-content .btn, .package-foot.stacked .btn, .nav-booknow, .nav-actions .btn-accent,
#cta-nav-booknow, #cta-hero-chatwithus, .fullview-row .btn, .hero-cta-desktop, .btn-primary,
.hero-refined .hero-side .btn, .hero-refined .hero-cta-desktop,
.filter-chips button.is-active, .photo-filters button.is-active,
.resort-tabs .resort-tab.is-active, .photo-showcase .photo-feature.is-active {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, rgba(201, 162, 75, 0.26), rgba(201, 162, 75, 0.10)) !important;
  border: 1px solid rgba(201, 162, 75, 0.55) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 24px rgba(0, 0, 0, 0.35) !important;
  text-shadow: none !important;
}
.btn:hover, .btn-accent:hover, .btn-dark:hover, .btn-ghost:hover, .cta-actions .btn:hover,
.package-foot .btn:hover, .reach-content .btn:hover, .nav-booknow:hover, .fullview-row .btn:hover,
.hero-cta-desktop:hover, .hero-refined .hero-side .btn:hover,
.filter-chips button:hover, .photo-filters button:hover,
.resort-tabs .resort-tab:hover, .resort-tabs .resort-tab.is-active:hover,
.photo-showcase .photo-feature:hover, .photo-showcase .photo-feature.is-active:hover {
  background-image: linear-gradient(135deg, rgba(201, 162, 75, 0.45), rgba(201, 162, 75, 0.22)) !important;
  border-color: #d8b45e !important;
  color: #ffffff !important;
}

/* Avatar + circular accents -> gold */
.avatar { background: linear-gradient(135deg, #d8b45e, #a97e28) !important; color: #ffffff !important; }

/* Form controls -> dark */
main select, main input, main textarea { background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; border-color: rgba(201, 162, 75, 0.35) !important; }
main select option { background: #0e1013 !important; color: #ffffff !important; }
main ::placeholder { color: rgba(255, 255, 255, 0.5) !important; }

/* ---- id-specificity fixups (style.css #id !important rules) ---- */
#packages .badge, #packages .media-wrap .badge, .media-wrap .badge,
#packages .package-foot .btn, #packages .package-foot.stacked .btn,
#packages .media-wrap .btn, #reach .reach-content .btn,
#contact .cta-actions .btn, #faq .faq-item .btn {
  background-color: #14110a !important;
  background-image: linear-gradient(135deg, rgba(201, 162, 75, 0.28), rgba(201, 162, 75, 0.10)) !important;
  border: 1px solid rgba(201, 162, 75, 0.55) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Why-section text + cards on the homepage */
#about.drh-why .why-num, #about.drh-why .why-card h4, #about.drh-why .why-card strong { color: #ffffff !important; }
#about.drh-why .why-card h4.gold, #about.drh-why .gold { color: #ffffff !important; }

/* Footer text -> cool smoke white */
footer.site-footer, .site-footer .footer-col, .site-footer .footer-brand-link { color: rgba(245, 245, 244, 0.82) !important; }


/* ==========================================================================
   DARK THEME — legacy light-mode overrides (final)
   ========================================================================== */
.section-shell h1,.section-shell h2,.section-shell h3,.section-shell h4,.section-shell h5,.section-heading h2,.section-heading h3,.package-card h3,.price-card strong,.why-card h4,.blog-content h3,.reach-content h3,.meal-card h3,.reel-feature h3,.contact-section h3,.faq-question span:first-child{color:#fff!important}
.section-shell p,.section-shell li,.section-shell small,.section-shell label,.section-shell figcaption,.section-heading p,.package-text,.package-meta,.package-resort,.package-foot small,.tariff-row span,.tariff-row strong,.why-card p,.blog-content p,.blog-date,.reach-content p,.meal-card p,.faq-answer p,.contact-section p,.contact-section span,.contact-section label,.checkin-note,.photo-count,.blog-empty,.reel-feature p,.reel-feature span,.reel-feature small,.package-points span,.testimonial-card>p:last-child{color:rgba(245,245,244,.78)!important}
.eyebrow,.text-link,.blog-meta{color:rgba(245,245,244,.72)!important}
.badge,.badge.badge,.media-wrap .badge.badge,.package-slideshow .badge.badge,#packages .badge.badge,.meal-card .meal-eyebrow.meal-eyebrow,.meal-eyebrow{background:linear-gradient(135deg,rgba(201,162,75,.30),rgba(201,162,75,.10))!important;color:#fff!important;border-color:rgba(201,162,75,.55)!important}
.faq-question{background:#171a1f!important;color:#fff!important}
.faq-question span:first-child{color:#fff!important}
.faq-item.active .faq-question{background:linear-gradient(135deg,rgba(201,162,75,.30),rgba(201,162,75,.12))!important;color:#fff!important}
.faq-item.active .faq-question span:first-child,.faq-item.active .faq-icon{color:#fff!important}
.resort-tab,.photo-filters button,.photo-feature,.reel-choice{background:#171a1f!important;color:#fff!important;border-color:rgba(201,162,75,.30)!important}
.resort-tab.is-active,.photo-filters button[aria-pressed=true],.photo-feature.is-active,.reel-choice.is-active{background:linear-gradient(135deg,rgba(201,162,75,.40),rgba(201,162,75,.16))!important;color:#fff!important;border-color:rgba(201,162,75,.6)!important}
.nav-actions .btn-accent.btn-accent,.nav-actions .nav-booknow-text.nav-booknow-text,#cta-nav-booknow,#cta-nav-booknow .nav-booknow-text,.nav-booknow-text.nav-booknow-text{color:#fff!important}
.hero .price-card .label.label,.hero .price-card small.small,.price-card .label.label,.price-card small.small{color:rgba(245,245,244,.72)!important}
.moving-notice .moving-notice-track span,.notice-label{color:rgba(245,245,244,.78)!important}
.gallery-item figcaption,.photo-gallery .gallery-item figcaption{color:rgba(245,245,244,.78)!important}
.photo-count{color:rgba(245,245,244,.78)!important}
.photo-showcase .photo-feature,.photo-showcase .photo-feature span{color:#fff!important}
.photo-showcase .photo-feature{background:#171a1f!important;border-color:rgba(201,162,75,.3)!important}
.photo-showcase .photo-feature.is-active{background:linear-gradient(135deg,rgba(201,162,75,.4),rgba(201,162,75,.16))!important;color:#fff!important}
.resort-tabs .resort-tab,.resort-tabs .resort-tab strong,.resort-tabs .resort-tab span{color:#fff!important}
.resort-tabs .resort-tab{background:#171a1f!important;border-color:rgba(201,162,75,.3)!important}
.resort-tabs .resort-tab.is-active,.resort-tabs .resort-tab.is-active strong,.resort-tabs .resort-tab.is-active span{background:linear-gradient(135deg,rgba(201,162,75,.4),rgba(201,162,75,.16))!important;color:#fff!important}
.package-resort{color:#fff!important;background:linear-gradient(135deg,rgba(201,162,75,.30),rgba(201,162,75,.10))!important}
.blog-tag{background:linear-gradient(135deg,rgba(201,162,75,.30),rgba(201,162,75,.10))!important;color:#fff!important}
.tariff-row small,.tariff-row strong small{color:rgba(245,245,244,.72)!important}
.hero-meta .price-card.price-card{background:#171a1f!important;border-color:rgba(201,162,75,.28)!important}
.hero-meta .price-card .label,.hero-meta .price-card small{color:rgba(245,245,244,.72)!important}
.hero-meta .price-card strong{color:#fff!important}
.hero-copy .hero-kicker{color:rgba(245,245,244,.80)!important}
.hero-copy h1,.hero-copy .hero-title{color:#fff!important}
.hero-copy .hero-lead,.hero-side p{color:rgba(245,245,244,.90)!important}
.hero .pill,.hero-side .pill,.pill.rating,.pill.muted,.hero-collage-plus,.hero-side .pill.pill,.hero-side-top .pill.pill{background:#171a1f!important;color:#fff!important;border-color:rgba(201,162,75,.35)!important}
#about.drh-why{background:linear-gradient(145deg,#14161a,#0e1013)!important;border-color:rgba(201,162,75,.22)!important}
#about.drh-why h1,#about.drh-why h2,#about.drh-why h3,#about.drh-why h4{color:#fff!important}
#about.drh-why p,#about.drh-why small,#about.drh-why span{color:rgba(245,245,244,.78)!important}
#about.drh-why .eyebrow{color:rgba(245,245,244,.72)!important}
#about.drh-why .why-card,#about.drh-why .why-hero-card{background:#171a1f!important;border-color:rgba(201,162,75,.22)!important}
#about.drh-why .why-card h1,#about.drh-why .why-card h2,#about.drh-why .why-card h3,#about.drh-why .why-card h4,#about.drh-why .why-hero-card h1,#about.drh-why .why-hero-card h2,#about.drh-why .why-hero-card h3,#about.drh-why .why-hero-card h4{color:#fff!important}
#about.drh-why .why-card p,#about.drh-why .why-hero-card p,#about.drh-why .why-card small,#about.drh-why .why-hero-card small{color:rgba(245,245,244,.78)!important}
#about.drh-why .why-card .eyebrow,#about.drh-why .why-hero-card .eyebrow{color:rgba(245,245,244,.72)!important}
.hero-side .btn-dark.btn-dark{background:linear-gradient(135deg,rgba(201,162,75,.30),rgba(201,162,75,.12))!important;color:#fff!important;border-color:rgba(201,162,75,.55)!important}
#reels button.reel-choice{background:#171a1f!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 15px rgba(0,0,0,.35)!important}
#reels button.reel-choice[aria-pressed=true]{background:linear-gradient(135deg,rgba(201,162,75,.40),rgba(201,162,75,.16))!important;box-shadow:inset 0 0 0 1px rgba(201,162,75,.6),0 6px 15px rgba(0,0,0,.35)!important;border-color:rgba(201,162,75,.6)!important}
#reels .reel-choice small,#reels .reel-choice-action{color:rgba(245,245,244,.72)!important}
#reels .reel-choice strong{color:#fff!important}

/* Luxury palette + button contrast + clean text */
:root {
  --drh-primary: #123B32;
  --drh-deep: #0B211D;
  --drh-gold: #C9A24B;
  --drh-gold-hover: #E0C477;
  --drh-ivory: #F7F3EA;
  --drh-text-secondary: #C8D2CC;
}
.btn-accent, .btn-accent.pulse-cta, .nav-actions .btn-accent {
  background: linear-gradient(135deg, var(--drh-gold), var(--drh-gold-hover)) !important;
  color:#fff!important;
  border-color: rgba(255,255,255,.25) !important;
}
.btn-ghost, .btn-dark {
  color: var(--drh-ivory) !important;
}
.site-header .nav-links a::after,
.site-header .top-nav .nav-links a::after,
.nav-links a::after{display:none!important;content:none!important;height:0!important;}

/* LUXURY FIX: Forest Green + Champagne Gold + Clean Text */
:root{--lux-primary:#123B32;--lux-deep:#0B211D;--lux-gold:#C9A24B;--lux-goldh:#E0C477;--lux-ivory:#F7F3EA;--lux-sec:#C8D2CC}
.site-header .top-nav{background:linear-gradient(118deg,#0B211D 0%,#123B32 50%,#0B211D 100%)!important}
.btn-accent,.btn-accent.pulse-cta,.nav-actions .btn-accent{background:linear-gradient(135deg,var(--lux-gold),var(--lux-goldh))!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important}
body,.site-footer{color:var(--lux-ivory)}
h1,h2,h3,h4,h5,h6{color:var(--lux-ivory)!important;text-decoration:none!important;border-bottom:none!important}
p,li,span,label,a{color:inherit;text-decoration:none!important}
.nav-links a::after,.footer-dark-panel h4::after{display:none!important}.section-heading{border-bottom:none!important}
a{text-decoration:none!important}

/* CLEAN TEXT: remove any background strip / box behind text labels */
.eyebrow,.section-tag,.hero-kicker,.hero-resort-label,.meal-eyebrow,.badge,
.package-resort,.pill,.chip,.why-num,.blog-tag,.rating-tag,.tag,
.package-points span,.feature-list li,.tariff-row,.photo-count,.notice-label,
.section-heading{border:none!important;box-shadow:none!important}
.eyebrow,.section-tag,.hero-kicker,.hero-resort-label,.meal-eyebrow,.badge,
.package-resort,.pill,.chip,.blog-tag,.rating-tag,.tag,.package-points span,
.feature-list li,.notice-label,.photo-count{
  background:none!important;background-color:transparent!important;background-image:none!important;padding:0!important;color:#f5f5f4!important;
}

/* CLEAN TEXT 2: hero pills + any remaining text chips -> no strip */
.hero .pill, .hero .pill.rating, .hero .pill.muted, .hero-side .pill, .hero-side .pill.pill,
.hero-side-top .pill, .hero-copy .pill, .pill.rating, .pill.muted,
.hero-meta .pill, .hero-refined .pill {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #f5f5f4 !important;
}

/* CLEAN TEXT 3: strip gradients from labels (high specificity match) */
.badge.badge, .eyebrow.eyebrow, .meal-eyebrow.meal-eyebrow, .package-resort.package-resort,
.pill.pill, .chip.chip, .blog-tag.blog-tag, .rating-tag.rating-tag, .tag.tag,
.media-wrap .badge.badge, .package-slideshow .badge.badge, #packages .badge.badge,
#packages .media-wrap .badge.badge, #about.drh-why .why-num,
#about.drh-why .why-num.why-num, .meal-card .meal-eyebrow.meal-eyebrow,
.package-points span, .feature-list li {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #f5f5f4 !important;
}

/* CLEAN TEXT: resort-tab children -> no strip */
.resort-tabs .resort-tab strong, .resort-tabs .resort-tab span,
.resort-tabs .resort-tab.is-active strong, .resort-tabs .resort-tab.is-active span,
.resort-tab strong, .resort-tab span, .resort-tab.is-active strong, .resort-tab.is-active span {
  background: none !important; background-image: none !important;
  background-color: transparent !important; border: none !important; box-shadow: none !important; color: #ffffff !important;
}

/* CLEAN TEXT: blog pagination -> dark, no white strip */
.site-page-btn, .site-page-btn.is-disabled, .pagination a, .page-numbers a {
  background: rgba(255,255,255,.06) !important;
  background-image: none !important;
  border: 1px solid rgba(201,162,75,.35) !important;
  color: #f5f5f4 !important;
}
.site-page-btn.is-active, .pagination .is-active, .page-numbers .current {
  background: linear-gradient(135deg,#C9A24B,#E0C477) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Accessibility on dark theme: readable "Important Notes" label */
.moving-notice .notice-label { color: #C9A24B !important; }

/* Accessibility on dark theme: ghost/secondary buttons as subtle dark with gold border.
   High-specificity selector list to beat the light-theme button catch-all in style.css. */
.btn-ghost,
.btn.btn-ghost,
.nav-actions .btn-ghost,
.hero-side .btn-ghost,
.section-heading .btn-ghost,
.package-foot .btn-ghost,
#packages .package-foot .btn-ghost,
.reach-content .btn-ghost,
#reach .reach-content .btn-ghost,
.cta-actions .btn-ghost,
#contact .cta-actions .btn-ghost {
  background: rgba(255,255,255,.06) !important;
  background-image: none !important;
  color: #F7F3EA !important;
  border: 1px solid rgba(201,162,75,.42) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: rgba(255,255,255,.12) !important;
  color: #E0C477 !important;
  border-color: rgba(201,162,75,.72) !important;
}

/* Accessibility on dark theme: primary gold buttons -> smoke-white text (all contexts) */
.btn-accent,
.btn.btn-accent,
.nav-actions .btn-accent,
.hero-side .btn-accent,
.section-heading .btn-accent,
.reach-content .btn-accent,
.cta-actions .btn-accent,
#contact .cta-actions .btn-accent {
  background: linear-gradient(135deg,#C9A24B,#E0C477) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.25) !important;
  text-shadow: none !important;
}

/* Remove decorative heading underline strips in all section contexts */
.section-heading,
#about .section-heading,
#reach .section-heading,
#faq .section-heading,
#about.drh-why .section-heading,
.listing-section .section-heading {
  border-bottom: none !important;
}