/* Site fixes layered on top of the Divi export.
   Loaded last on every page so these win without editing Divi's generated CSS. */

/* ---- Buttons -------------------------------------------------------------
   The theme's global custom CSS sets `.et_pb_button{background-color:inherit!important}`,
   which wipes out each button's designed blue background and leaves white text on a
   white/cream section (invisible). Restore a solid blue that also meets WCAG AA (5:1). */
body #page-container .et_pb_section a.et_pb_button.et_pb_button_0_tb_header,
body #page-container .et_pb_section a.et_pb_button.et_pb_button_0_tb_body,
body #page-container .et_pb_section a.et_pb_button.et_pb_button_0_tb_footer,
body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_0,
body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_1,
body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_2 {
  background-color: #1976ad !important;
  border-color: #1976ad !important;
  color: #fff !important;
}
body #page-container .et_pb_section a.et_pb_button.et_pb_button_0_tb_header:hover,
body #page-container .et_pb_section a.et_pb_button.et_pb_button_0_tb_body:hover,
body #page-container .et_pb_section a.et_pb_button.et_pb_button_0_tb_footer:hover,
body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_0:hover,
body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_1:hover,
body.home #page-container .et_pb_section a.et_pb_button.et_pb_button_2:hover {
  background-color: #145f8c !important;
  border-color: #145f8c !important;
}
/* "See More" links in the services carousel: #3f97d5 on cream is 3:1; deepen to 4.8:1. */
body.home #page-container .et_pb_section .et_pb_group_carousel a.et_pb_button {
  color: #1b72ad !important;
}

/* ---- Mobile and tablet (Divi switches to the hamburger menu below 981px) --- */
@media (max-width: 980px) {
  /* Hamburger icon was the header's own yellow (#fdd85d) and therefore invisible. */
  .et_pb_menu .mobile_menu_bar::before { color: #0d6ea3 !important; }


  /* Never allow sideways scrolling (the services-carousel arrow sat up to 8px past
     the screen edge). `clip` only cuts the x axis, so vertical overlaps still work. */
  body, .et_pb_section { overflow-x: clip; }

  /* Long words in contact details (the e-mail address) wrap instead of overflowing. */
  .et_pb_blurb .et_pb_module_header,
  .et_pb_blurb_description { overflow-wrap: anywhere; }

  /* Comfortable tap targets for small text links (min 24px, ideally ~44px). */
  .et-l--footer .et_pb_text a,
  .et_pb_blurb .et_pb_module_header a,
  .et_pb_blurb_description a {
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  /* On tablets Divi blew the logo up to 224-295px wide, making the header 250-300px tall
     (a third of the screen). Use the desktop logo size instead. */
  .et-l--header .et_pb_menu_inner_container > .et_pb_menu__logo-wrap { width: auto !important; }
  /* The phone number + "Book now" wrap below the logo: close the 40px gap and stop the
     button touching the bottom edge of the yellow bar. */
  .et-l--header .et_pb_row_0_tb_header { row-gap: 4px !important; padding-bottom: 16px !important; }
  .et-l--header .et_pb_menu__logo,
  .et-l--header .et_pb_menu__logo img {
    width: 170px !important;
    max-width: none !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  /* Logo shrank to ~105px wide (36% of the header), making its name and qualifications
     unreadable. The header is already 100px tall, so a 150px-wide logo fits it. */
  .et-l--header .et_pb_menu_inner_container > .et_pb_menu__logo-wrap {
    width: auto !important;
    flex-shrink: 0;
  }
  .et-l--header .et_pb_menu__logo,
  .et-l--header .et_pb_menu__logo img {
    width: 150px !important;
    max-width: none !important;
    height: auto !important;
  }
  /* Service-page titles (e.g. "ADULT NEURODIVERGENT COACHING") ran off the screen at 45px. */
  .et-l--body .et_pb_heading_0_tb_body .et_pb_module_header {
    font-size: clamp(28px, 8.5vw, 45px) !important;
    line-height: 1.1 !important;
    overflow-wrap: break-word;
  }
  h1, h2, h3 { overflow-wrap: break-word; }
}

/* ---- Sticky header -----------------------------------------------------------
   Divi pinned the header with script-library-sticky-elements.js (35 KB, and the single
   biggest main-thread cost on every page load). Native CSS sticky does the same job. */
header.et-l--header {
  position: sticky;
  top: 0;
  z-index: 99999;
}

/* ---- Services carousel before its script runs ----------------------------------------
   Divi's carousel script (now loaded after first paint) switches "slides to show" per
   breakpoint: 3 desktop / 2 tablet / 1 phone. Mirror that in CSS so the carousel already
   has its final layout before the script arrives (otherwise it jumps = layout shift). */
@media (max-width: 980px) {
  .et_pb_group_carousel.et_pb_group_carousel_slides_3 .et_pb_group_carousel_slide { flex: 0 0 50%; }
}
@media (max-width: 767px) {
  .et_pb_group_carousel.et_pb_group_carousel_slides_3 .et_pb_group_carousel_slide { flex: 0 0 100%; }
}
/* The carousel script inserts clone slides and moves the track with a 200 ms slide when it
   initialises; arriving after first paint, that showed a brief flash of the last slide.
   Only animate the track while the visitor is using the carousel (hover/tap/focus). */
.et_pb_group_carousel:not(:hover):not(:focus-within) .et_pb_group_carousel_track { transition: none !important; }
/* Clones are inserted a frame before the track is translated; keep them out of the layout
   until then so the visible slide never changes during initialisation. */
.et_pb_group_carousel_track:not([style*="translate"]) > .et_pb_group_carousel_clone { display: none; }

/* ---- Accessibility -------------------------------------------------------------------- */
/* Visually hidden text (e.g. "See more" → "See more about grief counselling" for screen readers). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Contact-form submit: white on #2394cc was 3.4:1; same blue as the other buttons (5:1). */
.wpcf7-form .wpcf7-submit { background-color: #1976ad !important; border-color: #1976ad !important; color: #fff !important; }
.wpcf7-form .wpcf7-submit:hover { background-color: #145f8c !important; }
/* "See more" links in both services carousels (#259ed7 / #3f97d5 were ~3:1). */
body #page-container .et_pb_section .et_pb_group_carousel a.et_pb_button { color: #1b72ad !important; }

/* ---- Mobile menu: collapsible submenus (js/mobile-menu.js) ---------------------------- */
.et_mobile_menu .menu-item-has-children > .sub-menu { display: none !important; }
.et_mobile_menu .menu-item-has-children.submenu-open > .sub-menu { display: block !important; }
.et_mobile_menu .menu-item-has-children > a { position: relative; padding-right: 48px !important; }
.et_mobile_menu .menu-item-has-children > a::after {
  content: "3";                       /* ETmodules down-arrow glyph */
  font-family: ETmodules; font-size: 24px; font-weight: 400; line-height: 1;
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  transition: transform .2s ease;
}
.et_mobile_menu .menu-item-has-children.submenu-open > a::after { transform: translateY(-50%) rotate(180deg); }
/* Divi caps the phone menu module at 450px, which cut off the open Services list; the header is
   sticky, so let the dropdown scroll within the screen instead. */
@media (max-width: 980px) {
  .et-l--header .et_pb_menu_0_tb_header.et_pb_menu { max-height: none !important; }
  .et_mobile_menu { max-height: calc(100vh - 110px) !important; max-height: calc(100dvh - 110px) !important; overflow-y: auto; overscroll-behavior: contain; }
}