/* ==========================================================
   Leaf House – layout & contrast fixes (loaded last)
   ========================================================== */

/* ---------- NAVIGATION ---------- */
header .de-flex { align-items: center; gap: 16px; }
header .de-flex-col { flex-shrink: 0; }
header .de-flex-col.header-col-mid { flex: 1 1 auto; min-width: 0; justify-content: center; }

/* remove the "1 —, 2 —" counters */
#mainmenu > li::before { content: none !important; display: none !important; }

#mainmenu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
#mainmenu > li {
  float: none;
  display: block;
  margin: 0;
  padding: 0 14px;
}
#mainmenu > li > a { padding-top: 28px; padding-bottom: 28px; line-height: 1.2; }
header.smaller #mainmenu > li > a { padding-top: 22px; padding-bottom: 22px; }
#mainmenu > li.has-child > a { padding-right: 4px; }

/* dropdown arrow: always readable */
#mainmenu > li.has-child:after { color: rgba(255,255,255,.85); }
header.smaller.scroll-light #mainmenu > li.has-child:after,
header.header-light #mainmenu > li.has-child:after { color: #222; }

/* top-level link colours on transparent / scrolled header */
header.transparent:not(.smaller) #mainmenu > li > a { color: #fff; }
header.smaller.scroll-light #mainmenu > li > a { color: #111; }
header.smaller.scroll-light #mainmenu > li > a:hover,
header.transparent #mainmenu > li > a:hover { color: var(--primary-color); }
header.smaller:not(.scroll-light) { background: #0b0b0b; }

/* anniversary pill */
#mainmenu a.anniversary-nav {
  background: var(--primary-color);
  color: #0b0b0b !important;
  padding: 7px 14px !important;
  border-radius: 30px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#mainmenu a.anniversary-nav:hover { filter: brightness(1.08); color: #0b0b0b !important; }

@media (min-width: 993px) {
/* dropdown panels: dark text on white, white text on hover colour */
#mainmenu li ul:not(.mega) { background: #fff; min-width: 190px; height: auto; padding: 6px 0; }
#mainmenu li li a { color: #222 !important; padding: 9px 16px; white-space: nowrap; border-bottom: 0; }
#mainmenu li li a:hover,
#mainmenu li li:hover > a { background: var(--primary-color); color: #0b0b0b !important; }

/* mega menu (Batteries) */
#mainmenu ul.mega { background: #fff; height: auto; border: 0; white-space: normal; }
#mainmenu ul.mega, #mainmenu ul.mega p { color: #444; }
#mainmenu ul.mega h4 { color: #111; font-size: 15px; line-height: 1.35; }
#mainmenu ul.mega a { color: inherit; padding: 0; display: block; }
#mainmenu ul.mega .bg-grey { background: #f2f4f2; }

}

/* CTA button in header */
.menu_side_area { display: flex; align-items: center; gap: 12px; }
.menu_side_area .btn-line {
  white-space: nowrap;
  line-height: 1.3;
  padding: 10px 24px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.menu_side_area .btn-line:hover { background: var(--primary-color); border-color: var(--primary-color); color: #0b0b0b; }
header.smaller.scroll-light .menu_side_area .btn-line { color: #111; border-color: rgba(0,0,0,.4); }
header.smaller.scroll-light .menu_side_area .btn-line:hover { color: #0b0b0b; border-color: var(--primary-color); }

/* logo */
#logo img { width: auto; max-height: 64px; height: auto !important; object-fit: contain; }
#logo .logo-main, #logo .logo-mobile { display: inline-block; }
header.smaller.scroll-light #logo .logo-main { display: none; }
header.smaller.scroll-light #logo .logo-scroll { display: inline-block; }
header:not(.smaller) #logo .logo-scroll { display: none; }
#logo .logo-mobile { display: none; }

/* tablet: shrink spacing so one row still fits */
@media (max-width: 1280px) and (min-width: 993px) {
  #mainmenu > li { padding: 0 9px; }
  #mainmenu > li > a { font-size: 14px; }
  .menu_side_area .btn-line { padding: 9px 16px; font-size: 14px; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 992px) {
  header .de-flex { gap: 8px; }
  #logo img { max-height: 48px; }
  #mainmenu { display: block; white-space: normal; }
  #mainmenu > li { float: none; display: block; padding: 0; }
  #mainmenu > li > a { padding: 14px 18px; display: block; text-align: left; color: #fff !important; }
  #mainmenu a.anniversary-nav { margin: 8px 18px; display: inline-flex; padding: 8px 16px !important; }
  #mainmenu li li a { color: #fff !important; }
  .menu_side_area .btn-line { display: none; }
}


/* sticky header: keep the logo inside the 64px bar */
header.smaller #logo img { max-height: 46px; }
header.smaller #logo { display: flex; align-items: center; }

/* ==========================================================
   COLOUR / CONTRAST
   brand green #71ca00 is a light colour: use DARK text on it,
   and a deeper green when green text sits on a LIGHT background
   ========================================================== */
:root {
  --on-primary: #0b0b0b;
  --primary-text: #3f7a00;      /* 5.2:1 on white */
  --muted-text: #5b6168;        /* 6:1 on white   */
}

/* 1. text that sits ON the brand green */
.bg-color, .bg-color h1, .bg-color h2, .bg-color h3, .bg-color h4, .bg-color h5, .bg-color h6,
.bg-color p, .bg-color span, .bg-color a, .bg-color div, .bg-color i,
section.bg-color, section.bg-color .text-light, .bg-color.text-light,
.bg-id-color, .btn-main, a.btn-main, a.btn-main:visited, a.btn-main:focus, a.btn-main:active,
input[type=button].btn-main, .btn-id, .btn-rsvp, .badge.bg-color, .ribbon,
.nav-pills .nav-link.active, #filters a.selected, .date-post, .widget_tags li a {
  color: var(--on-primary) !important;
}
a.btn-main:hover { color: var(--on-primary) !important; filter: brightness(1.07); }
ol.ol-style-1 li::before { color: var(--on-primary); font-weight: 700; }
.d-item-txt { color: inherit; }
section.bg-color .d-item-txt, .bg-color .de-marquee-list-1 .d-item-txt { color: var(--on-primary); }

/* 2. green TEXT on light backgrounds -> deeper green */
.id-color, span.id-color, a.id-color, h1.id-color, h2.id-color, h3.id-color, h4.id-color, h5.id-color, h6.id-color {
  color: var(--primary-text);
}
/* ...but keep the bright green on dark surfaces */
.dark-scheme .id-color, .section-dark .id-color, .text-light .id-color, .bg-dark .id-color,
.bg-dark-1 .id-color, .bg-dark-2 .id-color, .bg-dark-3 .id-color, footer .id-color,
header .id-color, .swiper .id-color, .de-marquee-list .id-color, .sw-caption .id-color,
.bg-color-2 .id-color, .box-fx .id-color { color: var(--primary-color); }

/* 3. breadcrumb */
.crumb, .crumb li { color: var(--muted-text); }
.crumb li a { color: var(--primary-text); font-weight: 600; }
.crumb li.active { color: #222; font-weight: 600; }
.text-light .crumb li a, #subheader.text-light .crumb li a { color: #fff; }

/* 4. faint grey / half-opacity text */
.op-5, .op-6 { opacity: .75 !important; }
.sw-caption .op-5 { opacity: .8 !important; }
p, .text-gray, .de_count { color: var(--muted-text); }
.text-light p, .section-dark p, .dark-scheme p, footer p, .bg-dark p, .bg-dark-1 p,
.text-light .text-gray, .text-light .de_count, .section-dark .de_count { color: rgba(255,255,255,.82); }

/* 5. NEW badge in the mega menu */
#mainmenu ul.mega .bg-color { color: var(--on-primary) !important; background: var(--primary-color); }

/* 6. keyboard focus */
a:focus-visible, button:focus-visible, .btn-main:focus-visible, .btn-line:focus-visible {
  outline: 2px solid var(--primary-color); outline-offset: 3px;
}

/* testimonial surnames + counters: lift faint half-opacity text */
.de-testimonial span, .testimonial-author span, .de_testi span, blockquote + div span, .de_count { opacity: 1 !important; }
.de_count { color: #4a5057; }

/* ---------- regression guards & remaining spots ---------- */
/* dark buttons keep light text */
.btn-main.bg-dark, a.btn-main.bg-dark,
a.btn-main.bg-dark:hover { color: #fff !important; }
a.btn-main.bg-dark:hover { background: var(--primary-color) !important; color: var(--on-primary) !important; }

/* active anniversary link must stay dark on its green pill */
#mainmenu li a.anniversary-nav.active, #mainmenu li a.anniversary-nav.active span { color: var(--on-primary) !important; }

/* timeline year chips on green */
.de-timeline-year, .de-timeline .de-timeline-year { color: var(--on-primary) !important; }

/* ---------- offers page: dark theme text ---------- */
.anniversary-page h1, .anniversary-page h2, .anniversary-page h3,
.anniversary-page h4, .anniversary-page h5, .anniversary-page h6 { color: #f6f8f3; }
.anniversary-page p { color: #c9d3c5; }
.anniversary-page a:not(.ann-btn):not(.btn-main) { color: inherit; }
.anniversary-page .id-color { color: var(--primary-color); }
.anniversary-page .ann-eyebrow, .anniversary-page .ann-kicker { color: #c6ff85; }
.anniversary-page .ann-price-old, .anniversary-page .ann-card-foot,
.anniversary-page .ann-card-desc, .anniversary-page .ann-card-label { color: #b9c4b6; }

/* logo: one consistent size on every page (beats the inline 100x100) */
#logo img { height: 56px !important; width: auto !important; max-height: none; }
header.smaller #logo img { height: 46px !important; }
header.header-dark { background: #151515; }
@media (max-width: 992px) { #logo img { height: 44px !important; } }

/* offers page: dark page must run edge to edge (template #content adds 90px white padding) */
main#content.anniversary-page { padding: 0; background: #080c08; }

/* captions that sit on top of photos / videos: dark scrim so white text always reads */
.img-with-cap .d-overlay { background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 55%) !important; }
.img-with-cap .d-title { font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
span.absolute.text-light, span.absolute.text-light.fw-600 { text-shadow: 0 1px 8px rgba(0,0,0,.75); }
.hover .absolute.text-light, .de-gallery .absolute.text-light { text-shadow: 0 1px 8px rgba(0,0,0,.75); }

/* ---------- mobile menu ---------- */
@media (max-width: 992px) {
  #mainmenu { position: fixed; left: 0; right: 0; top: 70px; width: 100%; height: calc(100% - 70px);
              padding: 10px 20px 100px !important; margin: 0; background: #151515; overflow-y: auto; display: block; }
  #mainmenu > li { position: relative; width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
  #mainmenu li ul, #mainmenu li ul:not(.mega) { background: transparent; border: 0; padding: 0; min-width: 0; width: 100%; }
  header.header-mobile #mainmenu li ul { height: 0; }
  #mainmenu li li { padding-left: 16px; }
  #mainmenu li li a { color: #fff !important; background: none !important; padding: 10px 0 !important; }
  #mainmenu > li > span { top: 0; right: 0; margin-top: 6px; }
  #mainmenu ul.mega { display: none; }
}
@media (max-width: 992px) {
  .header-col-mid #mainmenu { left: 0 !important; width: 100% !important; }
  #mainmenu > li > span { margin-top: 0; }
}