/* Temporarily hide the Store buttons site-wide */
#bttk_advertisement_widget-4,
#bttk_advertisement_widget-6,
#bttk_advertisement_widget-8,
#bttk_advertisement_widget-11 {
  display: none !important;
}

/* ======================================================
   Logo cross-fade
   Two stacked <img> elements (.logo-large & .logo-small)
   share identical position/size. On shrink the large fades
   out and the small fades in via CSS opacity transition.
   ====================================================== */

/* Both logos: shared positioning comes from the per-breakpoint
   rules below (they target #site-branding-wrapper img which
   matches both). Add the opacity transition on top. */
#site-branding-wrapper .logo-large,
#site-branding-wrapper .logo-small {
  transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
              width 0.45s cubic-bezier(0.4,0,0.2,1),
              left 0.45s cubic-bezier(0.4,0,0.2,1),
              top 0.45s cubic-bezier(0.4,0,0.2,1),
              padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Default state: large visible, small hidden */
#site-branding-wrapper .logo-large {
  opacity: 1 !important;
}
#site-branding-wrapper .logo-small {
  opacity: 0 !important;
  pointer-events: none;
}

/* Shrunk state: large hidden, small visible */
#site-branding-wrapper.shrink .logo-large {
  opacity: 0 !important;
  pointer-events: none;
}
#site-branding-wrapper.shrink .logo-small {
  opacity: 1 !important;
  pointer-events: auto;
}

/* ======================================================
   Smooth logo scroll transition overrides
   The DB custom CSS switches position:fixed → position:relative
   on mobile/tablet, which can't be transitioned and causes a
   jarring jump. Fix: keep position:fixed in both states and
   only animate width/top/left (all GPU-friendly).
   ====================================================== */

/* Phones */
@media only screen and (max-width: 767px) {
  /* HOME — large state */
  #site-branding-wrapper img {
    position: fixed !important;
    width: 20%;
    left: 15%;
    top: 35px;
    margin-top: 0 !important;
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                left 0.45s cubic-bezier(0.4,0,0.2,1),
                top 0.45s cubic-bezier(0.4,0,0.2,1),
                padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
    will-change: opacity, width, left, top;
  }
  /* HOME — shrunk state */
  #site-branding-wrapper.shrink img {
    position: fixed !important;
    width: 40px;
    left: 0% !important;
    top: 0% !important;
    padding: 4px;
    margin-top: 0 !important;
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                left 0.45s cubic-bezier(0.4,0,0.2,1),
                top 0.45s cubic-bezier(0.4,0,0.2,1),
                padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
  }
  /* NOT-HOME — large state */
  body:not(.home) #site-branding-wrapper img {
    position: fixed !important;
    width: 95px;
    left: 0%;
    top: 0;
    padding: 4px;
    margin-top: 0 !important;
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                left 0.45s cubic-bezier(0.4,0,0.2,1),
                top 0.45s cubic-bezier(0.4,0,0.2,1),
                padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
  }
  /* NOT-HOME — shrunk state */
  body:not(.home) #site-branding-wrapper.shrink img {
    position: fixed !important;
    width: 40px;
    left: 0% !important;
    top: 0% !important;
    padding: 4px;
    margin-top: 0 !important;
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                left 0.45s cubic-bezier(0.4,0,0.2,1),
                top 0.45s cubic-bezier(0.4,0,0.2,1),
                padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
  }
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* HOME — large state */
  #site-branding-wrapper img {
    position: fixed !important;
    width: 21%;
    left: 13%;
    top: 35px;
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                left 0.45s cubic-bezier(0.4,0,0.2,1),
                top 0.45s cubic-bezier(0.4,0,0.2,1),
                padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
    will-change: opacity, width, left, top;
  }
  /* HOME — shrunk state */
  #site-branding-wrapper.shrink img {
    position: fixed !important;
    width: 40px;
    left: 0% !important;
    top: 0% !important;
    padding: 4px;
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                left 0.45s cubic-bezier(0.4,0,0.2,1),
                top 0.45s cubic-bezier(0.4,0,0.2,1),
                padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
  }
  /* NOT-HOME — large state */
  body:not(.home) #site-branding-wrapper img {
    position: fixed !important;
    width: 90px;
    left: 0%;
    top: 0;
    padding: 4px;
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                left 0.45s cubic-bezier(0.4,0,0.2,1),
                top 0.45s cubic-bezier(0.4,0,0.2,1),
                padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
  }
  /* NOT-HOME — shrunk state */
  body:not(.home) #site-branding-wrapper.shrink img {
    position: fixed !important;
    width: 40px;
    left: 0% !important;
    top: 0% !important;
    padding: 4px;
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                left 0.45s cubic-bezier(0.4,0,0.2,1),
                top 0.45s cubic-bezier(0.4,0,0.2,1),
                padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
  }
}

/* Desktop */
@media only screen and (min-width: 1025px) {
  /* Override DB top: 70px → 55px for large logo (HOME only, non-shrunk) */
  .home #site-branding-wrapper:not(.shrink) img {
    top: 55px !important;
  }
  /* NOT-HOME — large: pin to top-left */
  body:not(.home) #site-branding-wrapper img {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding: 4px;
  }
  /* NOT-HOME — shrunk: pin to top-left */
  body:not(.home) #site-branding-wrapper.shrink img {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding: 4px;
  }
  /* Shared transitions */
  #site-branding-wrapper img,
  #site-branding-wrapper.shrink img,
  body:not(.home) #site-branding-wrapper img,
  body:not(.home) #site-branding-wrapper.shrink img {
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                left 0.45s cubic-bezier(0.4,0,0.2,1),
                top 0.45s cubic-bezier(0.4,0,0.2,1),
                margin-top 0.45s cubic-bezier(0.4,0,0.2,1),
                padding 0.45s cubic-bezier(0.4,0,0.2,1) !important;
    will-change: opacity, width, left, top, margin-top;
  }
}

/* Mobile menu toggle - light mode active state */
html:not(.ra-dark-mode) .toggle-btn {
  background-color: #F16022 !important;
}

html:not(.ra-dark-mode) .toggle-btn.active {
  background-color: #F16022 !important;
}

html:not(.ra-dark-mode) .responsive-nav,
html:not(.ra-dark-mode) .responsive-nav .main-navigation,
html:not(.ra-dark-mode) .primary-menu-list,
html:not(.ra-dark-mode) .main-menu-modal,
html:not(.ra-dark-mode) .mobile-menu,
html:not(.ra-dark-mode) .responsive-nav .main-navigation .nav-menu,
html:not(.ra-dark-mode) .responsive-nav .main-navigation ul .sub-menu,
html:not(.ra-dark-mode) .main-navigation ul .sub-menu {
  background-color: #F16022 !important;
}

html:not(.ra-dark-mode) .responsive-nav .search-form,
html:not(.ra-dark-mode) .responsive-nav .search-form .search-field {
  background-color: #F16022 !important;
}

/* Light mode: remove banner dim overlays */
html:not(.ra-dark-mode) .banner:not(.slider-two) .entry-header {
  background: transparent !important;
}

html:not(.ra-dark-mode) .banner .wp-custom-header::before,
html:not(.ra-dark-mode) .video-banner #wp-custom-header::before {
  background: transparent !important;
}

/* Dark mode: remove banner dim overlays */
html.ra-dark-mode .banner:not(.slider-two) .entry-header {
  background: transparent !important;
}

html.ra-dark-mode .banner .wp-custom-header::before,
html.ra-dark-mode .video-banner #wp-custom-header::before {
  background: transparent !important;
}

/* ======================================================
   Admin Bar offset fixes
   WordPress admin bar: 32px on desktop (>782px),
                        46px on mobile (≤782px).
   Header (sticky) and logo (fixed) need top offsets
   so they don't hide behind the admin bar.
   ====================================================== */

/* --- Sticky header: push below admin bar --- */
.admin-bar .site-header.header-one {
    top: 32px !important;
}
@media only screen and (max-width: 782px) {
    .admin-bar .site-header.header-one {
        top: 46px !important;
    }
}

/* --- Logo offsets: Phones (≤767px) — admin bar 46px --- */
@media only screen and (max-width: 767px) {
    /* HOME — large (35 + 46 = 81) */
    .admin-bar #site-branding-wrapper img {
        top: 81px !important;
    }
    /* HOME — shrunk */
    .admin-bar #site-branding-wrapper.shrink img {
        top: 46px !important;
    }
    /* NOT-HOME — large */
    body.admin-bar:not(.home) #site-branding-wrapper img {
        top: 46px !important;
    }
    /* NOT-HOME — shrunk */
    body.admin-bar:not(.home) #site-branding-wrapper.shrink img {
        top: 46px !important;
    }
}

/* --- Logo offsets: Tablet 783–1024px — admin bar 32px --- */
@media only screen and (min-width: 783px) and (max-width: 1024px) {
    /* HOME — large (35 + 32 = 67) */
    .admin-bar #site-branding-wrapper img {
        top: 67px !important;
    }
    /* HOME — shrunk */
    .admin-bar #site-branding-wrapper.shrink img {
        top: 32px !important;
    }
    /* NOT-HOME — large */
    body.admin-bar:not(.home) #site-branding-wrapper img {
        top: 32px !important;
    }
    /* NOT-HOME — shrunk */
    body.admin-bar:not(.home) #site-branding-wrapper.shrink img {
        top: 32px !important;
    }
}

/* --- Logo offsets: Tablet 768–782px — admin bar 46px --- */
@media only screen and (min-width: 768px) and (max-width: 782px) {
    /* HOME — large (35 + 46 = 81) */
    .admin-bar #site-branding-wrapper img {
        top: 81px !important;
    }
    /* HOME — shrunk */
    .admin-bar #site-branding-wrapper.shrink img {
        top: 46px !important;
    }
    /* NOT-HOME — large */
    body.admin-bar:not(.home) #site-branding-wrapper img {
        top: 46px !important;
    }
    /* NOT-HOME — shrunk */
    body.admin-bar:not(.home) #site-branding-wrapper.shrink img {
        top: 46px !important;
    }
}

/* --- Logo offsets: Desktop (≥1025px) — admin bar 32px --- */
@media only screen and (min-width: 1025px) {
    /* HOME — large (55 + 32 = 87) */
    .home.admin-bar #site-branding-wrapper:not(.shrink) img {
        top: 87px !important;
    }
    /* HOME — shrunk */
    .home.admin-bar #site-branding-wrapper.shrink img {
        top: 32px !important;
    }
    /* NOT-HOME — large */
    body.admin-bar:not(.home) #site-branding-wrapper img {
        top: 32px !important;
    }
    /* NOT-HOME — shrunk */
    body.admin-bar:not(.home) #site-branding-wrapper.shrink img {
        top: 32px !important;
    }
    /* Store buttons */
    .admin-bar #bttk_advertisement_widget-6,
    .admin-bar #bttk_advertisement_widget-8 {
        top: 32px !important;
    }
}

/* ======================================================
   Non-home page header: match menu bar background
   DB CSS sets this to orange; override to the same
   semi-transparent dark as the sticky header bar.
   ====================================================== */
body:not(.home) .site-content > .page-header {
  background-color: #f16022 !important;
}
html.ra-dark-mode body:not(.home) .site-content > .page-header {
  background-color: rgba(15, 23, 42, 0.97) !important;
}

/* Match non-home header bar to its page title panel */
body:not(.home) .site-header {
  background-color: #f16022 !important;
}
html.ra-dark-mode body:not(.home) .site-header {
  background-color: rgba(15, 23, 42, 0.97) !important;
}

body:not(.home) .top-bar,
body:not(.home) .breadcrumb-wrapper {
  background-color: #f16022 !important;
  color: #fff !important;
}

body:not(.home) .breadcrumb-wrapper a,
body:not(.home) .breadcrumb-wrapper .separator,
body:not(.home) .breadcrumb-wrapper .current {
  color: #fff !important;
}

body:not(.home) .breadcrumb-wrapper a:hover {
  color: #ffe1d2 !important;
}

html.ra-dark-mode body:not(.home) .top-bar,
html.ra-dark-mode body:not(.home) .breadcrumb-wrapper {
  background-color: rgba(15, 23, 42, 0.97) !important;
  color: #fff !important;
}

html.ra-dark-mode body:not(.home) .breadcrumb-wrapper a,
html.ra-dark-mode body:not(.home) .breadcrumb-wrapper .separator,
html.ra-dark-mode body:not(.home) .breadcrumb-wrapper .current {
  color: #fff !important;
}

/* Dark mode posts: use true black panels */
html.ra-dark-mode .site-main article,
html.ra-dark-mode .site-main .post,
html.ra-dark-mode .site-main .page,
html.ra-dark-mode .site-main article .entry-content,
html.ra-dark-mode .site-main article .entry-summary {
  background-color: #000 !important;
}

/* Phone screenshot position override (DB has left:30%) */
#media_image-5 img {
    left: 40% !important;
}

/* Dark mode: recolor Follow Us underline for contrast */
html.ra-dark-mode #bttk_image_text_widget-2 .widget-title::after {
  background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.268 7.604"><path fill="%23f16022" d="M55.162,0h0a9.129,9.129,0,0,1,6.8,3.073A7,7,0,0,0,67.17,5.44a7,7,0,0,0,5.208-2.367A9.129,9.129,0,0,1,79.182,0h0a9.133,9.133,0,0,1,6.8,3.073,1.082,1.082,0,1,1-1.6,1.455,6.98,6.98,0,0,0-5.2-2.368h0a7.007,7.007,0,0,0-5.208,2.368A9.139,9.139,0,0,1,67.169,7.6a9.14,9.14,0,0,1-6.805-3.075,6.989,6.989,0,0,0-5.2-2.368h-.005a7,7,0,0,0-5.21,2.368A9.142,9.142,0,0,1,43.144,7.6a9.14,9.14,0,0,1-6.805-3.075,7.069,7.069,0,0,0-10.42,0A9.149,9.149,0,0,1,19.109,7.6h0A9.145,9.145,0,0,1,12.3,4.528,6.984,6.984,0,0,0,7.092,2.16h0A7,7,0,0,0,1.882,4.528a1.081,1.081,0,1,1-1.6-1.455A9.137,9.137,0,0,1,7.09,0h0A9.145,9.145,0,0,1,13.9,3.073a6.985,6.985,0,0,0,5.2,2.367h0a7.012,7.012,0,0,0,5.213-2.367,9.275,9.275,0,0,1,13.612,0,7.01,7.01,0,0,0,5.21,2.367,7,7,0,0,0,5.21-2.367A9.146,9.146,0,0,1,55.162,0"></path></svg>') !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

html.ra-dark-mode #bttk_image_text_widget-2 .widget-title span {
  background: #000 !important;
}

/* Give Follow Us CTA buttons a raised pill look */
#bttk_image_text_widget-2 .btn-readmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.65rem 1.65rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #f16022;
  color: #fff !important;
  border: none;
  box-shadow: 0 12px 24px rgba(241, 96, 34, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(0);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  text-decoration: none !important;
}

#bttk_image_text_widget-2 .btn-readmore:hover,
#bttk_image_text_widget-2 .btn-readmore:focus-visible {
  background: #ff7a40;
  box-shadow: 0 18px 30px rgba(241, 96, 34, 0.45), 0 6px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

#bttk_image_text_widget-2 .btn-readmore:active {
  transform: translateY(1px);
  box-shadow: 0 8px 14px rgba(241, 96, 34, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
}

html.ra-dark-mode #bttk_image_text_widget-2 .btn-readmore {
  background: #ff9154;
  color: #111 !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html.ra-dark-mode #bttk_image_text_widget-2 .btn-readmore:hover,
html.ra-dark-mode #bttk_image_text_widget-2 .btn-readmore:focus-visible {
  background: #ffb07e;
}