/* ============================================================================
   M Dental — SimplyBook booking widget theme
   ----------------------------------------------------------------------------
   PASTE INTO:  SimplyBook admin -> Custom Features -> Custom CSS  (then Save)
   Applies to book.m-dental.co.uk and to the iframe embedded at
   /book/greenwich/ and /book/canada-water/.

   Site palette:
     #1B2831  navy   headings, primary buttons
     #2B5672  teal   links
     #F7C93C  gold   accents, hover
   ============================================================================ */

/* 1. The "Select" button is a <div class="btn select custom"> with a white
      colour, but the visible label is an <a> inside it which the theme colours
      #2B5672. Teal on navy is what was unreadable. The <a> needs the colour. */
.btn a,
.btn.select a,
.btn.custom a,
.btn.select.custom a {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn:hover a,
.btn.select:hover a,
.btn.select.custom:hover a {
  color: #F7C93C !important;
}

/* 2. Theme accents. The stock "minimal" theme ships a salmon accent (#CB8D75)
      on the step heading and every "read more" link. Replaced with the teal. */
.title-small,
.read-more,
a.read-more,
.sb-read-more,
.service-item .read-more {
  color: #2B5672 !important;
}

hr,
.title-small + hr,
.sb-title-line {
  border-color: #D6E0E7 !important;
}

/* 3. Headings and secondary text in the site's own colours. */
h1, h2, h3,
.title-main,
.service-item .title,
.sb-title {
  color: #1B2831 !important;
}

.copyright         { color: #2B5672 !important; }
.scroll-top-button { color: #1B2831 !important; }

/* 4. Primary buttons. Pins the navy so a theme update cannot reintroduce the
      orange gradient. */
.btn,
.btn.select,
.btn.custom,
.btn-primary {
  background-color: #1B2831 !important;
  background-image: none !important;
  border-color: #1B2831 !important;
}

.btn:hover,
.btn.select:hover,
.btn-primary:hover {
  background-color: #2B5672 !important;
  background-image: none !important;
  border-color: #2B5672 !important;
}

/* 5. Side navigation on the standalone booking page.
      SimplyBook injects the company's colours in a runtime <style> block that
      sits AFTER this custom CSS in the same stylesheet. Its rule is
          #header .nav-wrapper { background: linear-gradient(...) !important }
      which is specificity (1,1,0). Matching it exactly only ties, and the later
      rule wins — which is why a plain `#header .nav-wrapper` had no effect here.
      `html body #header div.nav-wrapper` is (1,1,3) and wins regardless of
      order. The `background` shorthand is needed too, because the theme sets
      the gradient through the shorthand. */
html body #header div.nav-wrapper,
html body #header div.nav-wrapper.clearfix,
html body #header div.nav-wrapper.menu-in,
html body #header div.nav-wrapper.active,
html body #header #sb_menu,
html body #header button.nav-trigger,
html body #header button.nav-trigger.on,
html body #header button.nav-trigger.toggle-mnu {
  background: #1B2831 !important;
  background-image: none !important;
}

/* Menu links: white on the navy panel, gold on hover. */
.nav-wrapper a,
.nav-wrapper .nav-item a,
#sb_menu a,
.nav-wrapper li a {
  color: #ffffff !important;
}

.nav-wrapper a:hover,
#sb_menu a:hover,
.nav-wrapper li a:hover {
  color: #F7C93C !important;
}

/* Menu items get a hairline divider, NOT a background. An earlier version used
   `li + li { background-color:#fff }`, which painted the second and third items
   as solid white blocks. Backgrounds are forced transparent so that cannot
   recur. */
.nav-wrapper .menu-item,
.nav-wrapper li.menu-item,
.nav-wrapper ul.nav li {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
}

.nav-wrapper .menu-item:last-child {
  border-bottom: 0 !important;
}

/* Hamburger bars only — scoped with > so it cannot reach menu content. */
.nav-trigger > span,
.nav-trigger > span::before,
.nav-trigger > span::after {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* 6. Prices and links. */
.price,
.service-price {
  color: #1B2831 !important;
  font-weight: 700 !important;
}

a       { color: #2B5672; }
a:hover { color: #1B2831; }