/* =====================================================================
   Dark mode + theme toggle
   Loaded after timberland.css (registered right after it in _layout.twig).

   How it works: an inline script in <head> sets data-theme="light|dark"
   on <html> before the page paints (saved choice, else the device setting).

   Dark rules use :where(html[data-theme="dark"]) as the prefix. :where()
   adds no specificity, so each override has the SAME weight as the rule it
   replaces in timberland.css and wins only because this file loads later.
   That keeps hover states, .white text, etc. in timberland.css working.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Theme toggle (both themes)
   --------------------------------------------------------------------- */

.theme-toggle {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}


/* Desktop: icon button between the menu and the search icon */
.theme-toggle--desktop {
  float: left;
  position: relative;
  width: 44px;
  height: 52px;
  margin-top: 38px;
  margin-left: 5px;
  padding: 0;
  font-size: 18px;
  line-height: 52px;
  border-radius: 2px;
}
.theme-toggle--desktop:hover { background: rgba(255, 255, 255, .12); }
.theme-toggle--desktop[aria-pressed="true"] { color: #dea14b; }  /* gold moon when dark, like the mobile switch */

/* Mobile: full-width row at the bottom of the open menu */
.theme-toggle--menu { display: none; }

@media (max-width: 991px) {
  .theme-toggle--desktop { display: none; }

  .theme-toggle--menu {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 25px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    background-color: rgba(0, 0, 0, .25);
    font-size: 15px;
    line-height: 17px;
    text-align: left;
  }
  .theme-toggle--menu .fa { width: 18px; text-align: center; font-size: 16px; }

  .theme-toggle__switch {
    position: relative;
    flex: none;
    margin-left: auto;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .3);
    transition: background .2s;
  }
  .theme-toggle__switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
  }
  .theme-toggle[aria-pressed="true"] .theme-toggle__switch { background: #dea14b; }
  .theme-toggle[aria-pressed="true"] .theme-toggle__switch::after { transform: translateX(18px); }
}


/* ---------------------------------------------------------------------
   Dark palette (tweak here)
   --------------------------------------------------------------------- */

html[data-theme="dark"] {
  --dk-bg:         #15181b;  /* page */
  --dk-surface:    #1d2226;  /* cream/gray panels, cards */
  --dk-surface-2:  #262c31;  /* inputs, hover rows, frames */
  --dk-border:     #343b42;  /* replaces #eee / #cecece / #e6e2d8 lines */
  --dk-text:       #c5cbd2;  /* body copy */
  --dk-muted:      #9ba4af;  /* meta, captions */
  --dk-heading:    #e8ebee;
  --dk-link:       #6fc4e0;
  --dk-link-hover: #a3dbee;
  --dk-teal-text:  #7cc6de;  /* replaces dark-teal text (#044d64, #0c3f52, #036b8c) */
  --dk-tan:        #cbbb92;  /* h3 */
  --dk-nav:        #0c3a49;  /* navbar, mobile menu */
  --dk-deep:       #0b2c37;  /* footer */
  --dk-pill:       #17506a;  /* tag / button pills that were #0c3f52 */
  background: var(--dk-bg);
}


/* ---------------------------------------------------------------------
   Base type
   --------------------------------------------------------------------- */

:where(html[data-theme="dark"]) body { background-color: var(--dk-bg); color: var(--dk-text); }

:where(html[data-theme="dark"]) h1,
:where(html[data-theme="dark"]) h4,
:where(html[data-theme="dark"]) h5,
:where(html[data-theme="dark"]) h6 { color: var(--dk-heading); }
:where(html[data-theme="dark"]) h2 { color: var(--dk-teal-text); }
:where(html[data-theme="dark"]) h3 { color: var(--dk-tan); }
:where(html[data-theme="dark"]) .inner h1,
:where(html[data-theme="dark"]) h4.orange,
:where(html[data-theme="dark"]) .text-block-3 { color: var(--dk-teal-text); }

:where(html[data-theme="dark"]) a { color: var(--dk-link); }

:where(html[data-theme="dark"]) ul,
:where(html[data-theme="dark"]) ol,
:where(html[data-theme="dark"]) blockquote { color: var(--dk-text); }
:where(html[data-theme="dark"]) blockquote,
:where(html[data-theme="dark"]) .block-quote { border-left-color: var(--dk-border); }

:where(html[data-theme="dark"]) .content-wrapper,
:where(html[data-theme="dark"]) .content-wrapper p,
:where(html[data-theme="dark"]) .content-wrapper li { color: var(--dk-text); }

/* .content-wrapper p above outranks these by source order, so restate them */
:where(html[data-theme="dark"]) .bullet-point-box p,
:where(html[data-theme="dark"]) .announcebar p,
:where(html[data-theme="dark"]) .announcebar a { color: #fff; }
:where(html[data-theme="dark"]) .footer .bullet-point-box a { color: #f4dfc2; }

:where(html[data-theme="dark"]) .h3,
:where(html[data-theme="dark"]) .title.black,
:where(html[data-theme="dark"]) .title.small.black,
:where(html[data-theme="dark"]) .overviewGrid h3,
:where(html[data-theme="dark"]) .mini-title.dark,
:where(html[data-theme="dark"]) .dark,
:where(html[data-theme="dark"]) .page-subtitle-box,
:where(html[data-theme="dark"]) .entry-meta .eventdate,
:where(html[data-theme="dark"]) ul.share-buttons li a,
:where(html[data-theme="dark"]) #sermonList th { color: var(--dk-heading); }

:where(html[data-theme="dark"]) .paragraph,
:where(html[data-theme="dark"]) .intro-feature-text-box p,
:where(html[data-theme="dark"]) .verse-header-box,
:where(html[data-theme="dark"]) .read-more-box,
:where(html[data-theme="dark"]) .info-box,
:where(html[data-theme="dark"]) .media-box,
:where(html[data-theme="dark"]) .block-quote,
:where(html[data-theme="dark"]) .breadcrumbs,
:where(html[data-theme="dark"]) .breadcrumbs li,
:where(html[data-theme="dark"]) .breadlink,
:where(html[data-theme="dark"]) .entry-meta .month,
:where(html[data-theme="dark"]) .entry-meta .year,
:where(html[data-theme="dark"]) .entryAuthor,
:where(html[data-theme="dark"]) .end-date,
:where(html[data-theme="dark"]) .to,
:where(html[data-theme="dark"]) .shareLabel,
:where(html[data-theme="dark"]) .bibleReadings p,
:where(html[data-theme="dark"]) .newsNotes p,
:where(html[data-theme="dark"]) .bulletinFile a,
:where(html[data-theme="dark"]) .pager a { color: var(--dk-muted); }

:where(html[data-theme="dark"]) .mini-title,
:where(html[data-theme="dark"]) .teamtitle,
:where(html[data-theme="dark"]) .teacher,
:where(html[data-theme="dark"]) .scripture,
:where(html[data-theme="dark"]) .downloadLink a,
:where(html[data-theme="dark"]) #mc_embed_signup label { color: var(--dk-link); }

:where(html[data-theme="dark"]) .visitIntro p { color: var(--dk-teal-text); }

@media (max-width: 767px) {
  :where(html[data-theme="dark"]) .big-title-box h1 { color: var(--dk-teal-text); }
}


/* ---------------------------------------------------------------------
   Panels and backgrounds
   --------------------------------------------------------------------- */

:where(html[data-theme="dark"]) .sermonWrap,
:where(html[data-theme="dark"]) .contact-form,
:where(html[data-theme="dark"]) .visitorForm,
:where(html[data-theme="dark"]) .related,
:where(html[data-theme="dark"]) .bibleReadings,
:where(html[data-theme="dark"]) .newsNotes,
:where(html[data-theme="dark"]) .content-section.white-smoke,
:where(html[data-theme="dark"]) .call-to-action,
:where(html[data-theme="dark"]) .number,
:where(html[data-theme="dark"]) .success-message,
:where(html[data-theme="dark"]) .flex-wrapper.author,
:where(html[data-theme="dark"]) .empty-state,
:where(html[data-theme="dark"]) .shaded,
:where(html[data-theme="dark"]) .ministry-preview-text,
:where(html[data-theme="dark"]) .credits,
:where(html[data-theme="dark"]) .tab-pane,
:where(html[data-theme="dark"]) .tabs-menu,
:where(html[data-theme="dark"]) .sorting_1,
:where(html[data-theme="dark"]) .sorting_asc,
:where(html[data-theme="dark"]) .sorting_desc { background: var(--dk-surface); }

:where(html[data-theme="dark"]) .content-section.alt { background-color: #1b4a5a; color: var(--dk-heading); }

:where(html[data-theme="dark"]) .bulletinFile a:hover,
:where(html[data-theme="dark"]) .linkBlock:hover { background: var(--dk-surface-2); }

:where(html[data-theme="dark"]) .tab-link,
:where(html[data-theme="dark"]) .full-time-tag { background-color: var(--dk-surface-2); color: var(--dk-muted); }
:where(html[data-theme="dark"]) .tab-link.w--current { background-color: var(--dk-surface); color: var(--dk-heading); }

:where(html[data-theme="dark"]) .overviewGrid .w-col a { border-top-color: transparent; border-bottom-color: transparent; }
:where(html[data-theme="dark"]) .overviewGrid .w-col a:hover { background: var(--dk-surface); border-top-color: var(--dk-border); border-bottom-color: var(--dk-border); }

/* Photo frames and thick cream borders */
:where(html[data-theme="dark"]) .picture-frame-1,
:where(html[data-theme="dark"]) .picture-frame-2,
:where(html[data-theme="dark"]) .picture-frame-3,
:where(html[data-theme="dark"]) .picture-frame-4,
:where(html[data-theme="dark"]) .picture-frame-5,
:where(html[data-theme="dark"]) .picture-frame-6,
:where(html[data-theme="dark"]) .picture-frame-7,
:where(html[data-theme="dark"]) .picture-frame-8 { border-color: var(--dk-surface-2); background-color: var(--dk-surface-2); }

:where(html[data-theme="dark"]) .boxed-background-2,
:where(html[data-theme="dark"]) .boxed-background-3,
:where(html[data-theme="dark"]) .boxed-background-4,
:where(html[data-theme="dark"]) .picture-circle-box-1,
:where(html[data-theme="dark"]) .image-2,
:where(html[data-theme="dark"]) .teamlink img.image-2,
:where(html[data-theme="dark"]) .teacherWrap .teacherPic img,
:where(html[data-theme="dark"]) .speakerPhoto { border-color: var(--dk-surface-2); }
:where(html[data-theme="dark"]) .speaker-picture-box { border-color: var(--dk-border); }


/* ---------------------------------------------------------------------
   Divider lines (#eee family)
   --------------------------------------------------------------------- */

:where(html[data-theme="dark"]) .title-box.bottom-divider,
:where(html[data-theme="dark"]) .title-box.bottom-line,
:where(html[data-theme="dark"]) .intro-feature-box-1,
:where(html[data-theme="dark"]) .intro-feature-box-2,
:where(html[data-theme="dark"]) .intro-line,
:where(html[data-theme="dark"]) .feature-box-1,
:where(html[data-theme="dark"]) .feature-box-2,
:where(html[data-theme="dark"]) .feature-box-3,
:where(html[data-theme="dark"]) .feature-box-4,
:where(html[data-theme="dark"]) .feature-box-5,
:where(html[data-theme="dark"]) .feature-box-6,
:where(html[data-theme="dark"]) .feature-box-7,
:where(html[data-theme="dark"]) .feature-box-8,
:where(html[data-theme="dark"]) .feature-box-9,
:where(html[data-theme="dark"]) .text-filed,
:where(html[data-theme="dark"]) .text-area,
:where(html[data-theme="dark"]) .message-description-box,
:where(html[data-theme="dark"]) .media-container,
:where(html[data-theme="dark"]) .row,
:where(html[data-theme="dark"]) .read-more-container,
:where(html[data-theme="dark"]) .info-details-box,
:where(html[data-theme="dark"]) .bottom-divider-line,
:where(html[data-theme="dark"]) .sharethis-inline-share-buttons,
:where(html[data-theme="dark"]) .entry.event,
:where(html[data-theme="dark"]) #sermonList tr { border-color: var(--dk-border); }


/* ---------------------------------------------------------------------
   Forms and search
   --------------------------------------------------------------------- */

:where(html[data-theme="dark"]) input[type="text"],
:where(html[data-theme="dark"]) input[type="email"],
:where(html[data-theme="dark"]) input[type="tel"],
:where(html[data-theme="dark"]) input[type="search"],
:where(html[data-theme="dark"]) input[type="url"],
:where(html[data-theme="dark"]) input[type="number"],
:where(html[data-theme="dark"]) input[type="password"],
:where(html[data-theme="dark"]) textarea,
:where(html[data-theme="dark"]) select,
:where(html[data-theme="dark"]) .w-input,
:where(html[data-theme="dark"]) .w-select,
:where(html[data-theme="dark"]) .form-control {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
  border-color: var(--dk-border);
}

:where(html[data-theme="dark"]) .search input { color: var(--dk-text); }

/* Header search box (expands white by default) */
:where(html[data-theme="dark"]) .sb-search-input { color: var(--dk-text); }
:where(html[data-theme="dark"]) .sb-search .sb-search-input { background: transparent; } /* closed state; beats the generic input rule above */
:where(html[data-theme="dark"]) .sb-search.sb-search-open .sb-search-input { background: var(--dk-surface-2); }

/* Footer search box */
:where(html[data-theme="dark"]) .sb-search-foot .sb-search-input { background: #134555; }
:where(html[data-theme="dark"]) .sb-search-foot .sb-search-input::-webkit-input-placeholder { color: #8fc9dc; }
:where(html[data-theme="dark"]) .sb-search-foot .sb-search-input::placeholder { color: #8fc9dc; }


/* ---------------------------------------------------------------------
   Header, navigation, social band, footer
   --------------------------------------------------------------------- */

:where(html[data-theme="dark"]) .navbar { background-color: rgba(12, 58, 73, .9); }
:where(html[data-theme="dark"]) .inner .navbar { background-color: var(--dk-nav); }
@media (max-width: 767px) {
  :where(html[data-theme="dark"]) .navbar { background-color: var(--dk-nav); }
}

/* Mobile open menu (Webflow collapse at 991px) */
:where(html[data-theme="dark"]) .w--nav-menu-open { background: var(--dk-nav); }
@media (max-width: 991px) {
  :where(html[data-theme="dark"]) li ul li a.dropdown-nav-link,
  :where(html[data-theme="dark"]) li a.highlighted { background: #1a4f62; }
  :where(html[data-theme="dark"]) li a.highlighted:hover,
  :where(html[data-theme="dark"]) li ul li a.dropdown-nav-link:hover { background: #236a83; }
}

/* SmartMenus (sm-mint2.css) */
:where(html[data-theme="dark"]) .sm-mint li { border-top-color: rgba(255, 255, 255, .15); }
:where(html[data-theme="dark"]) .sm-mint ul { background: var(--dk-surface); }
@media (min-width: 768px) {
  :where(html[data-theme="dark"]) .sm-mint a.highlighted { background: var(--dk-surface); color: var(--dk-heading); }
  :where(html[data-theme="dark"]) .sm-mint ul { background: var(--dk-surface); }
  :where(html[data-theme="dark"]) .sm-mint ul a,
  :where(html[data-theme="dark"]) .sm-mint ul a:hover,
  :where(html[data-theme="dark"]) .sm-mint ul a:focus,
  :where(html[data-theme="dark"]) .sm-mint ul a:active,
  :where(html[data-theme="dark"]) .sm-mint ul a.highlighted { color: var(--dk-text); }
  :where(html[data-theme="dark"]) .sm-mint ul a:hover,
  :where(html[data-theme="dark"]) .sm-mint ul a:focus,
  :where(html[data-theme="dark"]) .sm-mint ul a:active,
  :where(html[data-theme="dark"]) .sm-mint ul a.highlighted { background: #2b7d9b; color: #fff; }
  :where(html[data-theme="dark"]) .sm-mint span.scroll-up,
  :where(html[data-theme="dark"]) .sm-mint span.scroll-down { background: var(--dk-surface); }
}

:where(html[data-theme="dark"]) .socialWrap { background: #0f2f3a; }
:where(html[data-theme="dark"]) .socialWrap li a { color: #1f6f8b; }
:where(html[data-theme="dark"]) .socialWrap li a:hover { color: #4ca7ca; }

:where(html[data-theme="dark"]) .footer { background-color: var(--dk-deep); }


/* ---------------------------------------------------------------------
   Older sermon / event bits
   --------------------------------------------------------------------- */

:where(html[data-theme="dark"]) .tags a { background: var(--dk-pill); }
:where(html[data-theme="dark"]) .audiojsZ .loadedZ { background: #555; }

/* DataTables (jquery.dataTables.css), if still in use */
:where(html[data-theme="dark"]) table.dataTable tbody tr { background-color: transparent; }
:where(html[data-theme="dark"]) table.dataTable.stripe tbody tr.odd,
:where(html[data-theme="dark"]) table.dataTable.display tbody tr.odd { background-color: var(--dk-surface); }
:where(html[data-theme="dark"]) table.dataTable.display tbody tr.odd > .sorting_1,
:where(html[data-theme="dark"]) table.dataTable.display tbody tr.even > .sorting_1 { background-color: var(--dk-surface-2); }


/* ---------------------------------------------------------------------
   Sermon detail page
   --------------------------------------------------------------------- */

:where(html[data-theme="dark"]) .sermon-head { border-bottom-color: var(--dk-border); }
:where(html[data-theme="dark"]) .sermonWrap .sermon-head h1 { color: var(--dk-teal-text); }
:where(html[data-theme="dark"]) .sermon-speaker { color: var(--dk-heading); }
:where(html[data-theme="dark"]) .sermon-speaker img { box-shadow: 0 0 0 3px var(--dk-bg), 0 0 0 4px var(--dk-border); }

:where(html[data-theme="dark"]) .sermon-facts,
:where(html[data-theme="dark"]) .sermon-facts .scripture,
:where(html[data-theme="dark"]) .sermon-tags__label,
:where(html[data-theme="dark"]) .sermon-lead { color: var(--dk-text); }
:where(html[data-theme="dark"]) .sermon-facts .fa,
:where(html[data-theme="dark"]) .sermon-facts .scripture a,
:where(html[data-theme="dark"]) .sermon-link .fa,
:where(html[data-theme="dark"]) .sermon-transcript__toggle { color: var(--dk-link); }

:where(html[data-theme="dark"]) .sermon-link { border-color: var(--dk-border); background: var(--dk-surface); color: var(--dk-heading); }
:where(html[data-theme="dark"]) .sermon-link:hover,
:where(html[data-theme="dark"]) .sermon-link:focus-visible { background: var(--dk-surface-2); border-color: var(--dk-link); color: var(--dk-heading); }
:where(html[data-theme="dark"]) .sermon-link--youtube { border-color: #6b3a3a; }
:where(html[data-theme="dark"]) .sermon-link--youtube .fa { color: #ef6b6b; }
:where(html[data-theme="dark"]) .sermon-link--youtube:hover,
:where(html[data-theme="dark"]) .sermon-link--youtube:focus-visible { background: #2a1d1f; border-color: #ef6b6b; }

:where(html[data-theme="dark"]) .sermon-tags a { background: var(--dk-pill); }

:where(html[data-theme="dark"]) .sermon-transcript { border-color: var(--dk-border); background: var(--dk-surface); }
:where(html[data-theme="dark"]) .sermon-transcript__title { color: var(--dk-teal-text); }
:where(html[data-theme="dark"]) .sermon-transcript__hint { color: var(--dk-muted); }
:where(html[data-theme="dark"]) .sermon-transcript__body { border-top-color: var(--dk-border); color: var(--dk-text); }
:where(html[data-theme="dark"]) .sermon-transcript .transcript-note { background: var(--dk-surface-2); color: var(--dk-text); }


/* ---------------------------------------------------------------------
   Sermon index page
   --------------------------------------------------------------------- */

:where(html[data-theme="dark"]) .sermon-search input { border-color: var(--dk-border); color: var(--dk-text); background: var(--dk-surface-2); }
:where(html[data-theme="dark"]) .sermon-search button { background: var(--dk-pill); }
:where(html[data-theme="dark"]) .sermon-search button:hover,
:where(html[data-theme="dark"]) .sermon-search button:focus-visible { background: #1e6684; }

:where(html[data-theme="dark"]) .sermon-table thead th { border-bottom-color: #2b6f87; color: var(--dk-text); }
:where(html[data-theme="dark"]) .sermon-table td { border-bottom-color: var(--dk-border); color: var(--dk-text); }
:where(html[data-theme="dark"]) .sermon-table tbody tr:not(.sermon-table__month):hover td { background: var(--dk-surface); }
:where(html[data-theme="dark"]) .sermon-table__month th { border-bottom-color: var(--dk-border); color: var(--dk-teal-text); }
:where(html[data-theme="dark"]) .sermon-table__link,
:where(html[data-theme="dark"]) .sermon-series a { color: var(--dk-link); }
:where(html[data-theme="dark"]) .sermon-table a.rtBibleRef:hover { color: var(--dk-link-hover); }

:where(html[data-theme="dark"]) .sermon-pager a,
:where(html[data-theme="dark"]) .sermon-pager span[aria-current],
:where(html[data-theme="dark"]) .sermon-pager__step { color: var(--dk-heading); }
:where(html[data-theme="dark"]) .sermon-pager a:hover,
:where(html[data-theme="dark"]) .sermon-pager a:focus-visible { background: var(--dk-surface); }
:where(html[data-theme="dark"]) .sermon-pager span[aria-current] { background: var(--dk-pill); color: #fff; }
:where(html[data-theme="dark"]) .sermon-pager__step { border-color: var(--dk-border); }
:where(html[data-theme="dark"]) .sermon-pager__step.is-disabled { color: #5d646d; border-color: var(--dk-border); }

:where(html[data-theme="dark"]) .sermon-index .sermon-side-title { color: var(--dk-teal-text); }
:where(html[data-theme="dark"]) .sermon-series li { border-bottom-color: var(--dk-border); }
:where(html[data-theme="dark"]) .sermon-topics__count { color: var(--dk-muted); }
:where(html[data-theme="dark"]) .sermon-topics__toggle { color: var(--dk-link); }
:where(html[data-theme="dark"]) .sermon-topics__list a { border-color: var(--dk-border); color: var(--dk-text); }
:where(html[data-theme="dark"]) .sermon-topics__list a:hover,
:where(html[data-theme="dark"]) .sermon-topics__list a:focus-visible { background: var(--dk-pill); border-color: var(--dk-pill); color: #fff; }

@media (max-width: 991px) {
  :where(html[data-theme="dark"]) .sermon-index__side { border-top-color: #2b6f87; }
}
@media (max-width: 767px) {
  :where(html[data-theme="dark"]) .sermon-index__browse a { color: var(--dk-link); }
  :where(html[data-theme="dark"]) .sermon-table__date,
  :where(html[data-theme="dark"]) .sermon-table__sub { color: var(--dk-muted); }
}