/*
Theme Name: Dentalist Child
Theme URI: https://dentalist.cmsmasters.net/
Description: Child theme for Dentalist. Put all custom CSS, template overrides, and PHP here so that updating the parent theme never overwrites your work.
Template: dentalist
Version: 1.0.0
Requires PHP: 7.4
Text Domain: dentalist-child
*/

/* ---------------------------------------------------------------------------
   Custom CSS goes below.

   Dentalist is driven almost entirely by CSS custom properties, so prefer
   overriding a variable over writing new rules — it keeps you consistent with
   the rest of the theme and survives design changes:

     :root {
       --cmsmasters-colors-primary: #0d7f8c;
     }

   The full list of ~3,170 variables is in:
     dentalist/theme-config/assets/css/default-vars.css

   Better still: most of these are editable in Elementor under
   Site Settings → Theme Settings, which writes the same variables.
   Only drop to CSS here when no control exists.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Header — dark navy, matching the lost build at dental.innvobiz.com.
   The theme exposes its header styling as CSS custom properties, so these
   override the kit defaults without touching the parent theme.
--------------------------------------------------------------------------- */
:root {
  --cmsmasters-header-mid-container-bg-color: #0A2232;
  --cmsmasters-header-mid-nav-title-item-normal-colors-color: #FFFFFF;
  --cmsmasters-header-mid-nav-title-item-hover-colors-color: var(--cmsmasters-colors-primary);
  --cmsmasters-header-mid-nav-title-item-current-colors-color: var(--cmsmasters-colors-primary);
  --cmsmasters-header-mid-info-colors-text: #FFFFFF;
  --cmsmasters-header-mid-info-colors-link: #FFFFFF;
  --cmsmasters-header-mid-html-colors-text: #FFFFFF;
  --cmsmasters-header-mid-nav-burger-button-normal-colors-color: #FFFFFF;
}

/* The supplied logo is dark on light; the navy header needs a light version.
   Until a proper white logo file exists, invert it — and add a soft shadow,
   because over the hero photograph the header is transparent and a pure white
   logo disappears against the bright parts of the image. */
.cmsmasters_header .cmsmasters-header-mid-logo__img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 7px rgba(10, 34, 50, .6));
}
/* once the header is solid navy the shadow is no longer needed */
body.gdc-scrolled .cmsmasters_header .cmsmasters-header-mid-logo__img {
  filter: brightness(0) invert(1);
}

/* Hero: the headline sits over a photograph, so it needs its own scale and
   a shadow for legibility rather than inheriting the light-background H1. */
.cmsmasters-content .elementor-element > .e-con-inner > .elementor-widget-heading h1,
.elementor-widget-heading h1.elementor-heading-title {
  text-shadow: 0 1px 24px rgba(10, 34, 50, .35);
}

/* The recording's site had five top-level items; the later content document
   adds four more. Tighten the nav so all nine fit on one line at desktop
   rather than dropping pages the client asked for. */
@media (min-width: 1025px) {
  :root {
    --cmsmasters-header-mid-nav-title-item-gap: 14px;
    --cmsmasters-header-mid-nav-title-item-font-size: 12px;
    --cmsmasters-header-mid-nav-title-item-letter-spacing: 0.4px;
  }
  .cmsmasters_header .cmsmasters-nav > li > a { white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   Services mega-menu — three columns, as on the lost build.

   The theme already renders Services > category > treatment as nested <ul>s
   and shows the panel on hover; this only changes the panel's geometry and
   lifts the third level into view. No JavaScript, and the theme keeps control
   of when the panel opens.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* static so the panel can span the header rather than the menu item */
  .cmsmasters-menu__list > li.gdc-mega { position: static; }

  /* Anchor the panel to the header row, not to the nav <ul>.
     The <ul> is position:relative and starts after the logo, so its centre
     sits well right of the viewport's — centring a 1100px panel inside it put
     its right edge 83px off-screen at 1440. Making the nav and the list static
     hands the containing block to .cmsmasters-header-mid__outer, which is
     centred in the page. Ordinary dropdowns are unaffected: they anchor to
     their own <li>, which stays position:relative. */
  .cmsmasters-header-mid-menu__nav,
  .cmsmasters-header-mid-menu__list { position: static; }

  .cmsmasters-menu__list > li.gdc-mega > .sub-menu {
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(860px, calc(100vw - 48px));
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 2px 30px;
    padding: 30px 34px 26px;
  }

  /* column heading */
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu > li { position: static; width: auto; }
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu > li > a {
    font-weight: 600;
    padding-left: 0;
    padding-right: 0;
  }
  /* the caret belongs to a hover dropdown; these columns are always open */
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu > li > a .cmsmasters-child-indicator {
    display: none;
  }

  /* third level: always visible, stacked under its heading, no panel chrome */
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu > li > .sub-menu {
    position: static;
    display: block;
    opacity: 1;
    /* inherit, NOT visible: a child can override a hidden parent, so
       `visible` here left the closed panel's links invisible but still
       hoverable — moving the mouse across the hero opened the menu. */
    visibility: inherit;
    transform: none;
    width: auto;
    min-width: 0;
    margin: 4px 0 18px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu > li > .sub-menu > li > a {
    padding-left: 0;
    padding-right: 0;
    opacity: .82;
  }
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu > li > .sub-menu > li > a:hover { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Cookie banner buttons.

   The theme styles every <button> on the site, and depending on stylesheet
   order it can beat the plugin's own rules — which leaves white text on a
   white pill and the labels invisible. Pin them here so the result does not
   depend on which stylesheet lands last.

   Accept and Decline are deliberately given equal visual weight: under UK
   PECR/GDPR refusing must be as easy as accepting.
--------------------------------------------------------------------------- */
#cookie-notice #cn-accept-cookie,
#cookie-notice #cn-refuse-cookie,
#cookie-notice #cn-more-info,
#cookie-notice .cn-button:not(.cn-button-custom) {
  display: inline-block !important;
  padding: 10px 24px !important;
  margin: 0 4px !important;
  border: 1px solid transparent !important;
  border-radius: 50px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Accept — solid accent. Dark ink, not white: white on #00B2FF measures
   2.38:1, well under the 4.5:1 WCAG AA minimum. Navy on the same cyan is
   about 6.9:1. */
#cookie-notice #cn-accept-cookie {
  background-color: var(--cmsmasters-colors-primary, #00B2FF) !important;
  color: #0A2232 !important;
}
#cookie-notice #cn-accept-cookie:hover {
  background-color: #FFFFFF !important;
  color: #0A2232 !important;
}

/* Decline — equal weight, inverted so it is just as easy to find */
#cookie-notice #cn-refuse-cookie {
  background-color: #FFFFFF !important;
  color: #0A2232 !important;
}
#cookie-notice #cn-refuse-cookie:hover {
  background-color: rgba(255, 255, 255, .82) !important;
  color: #0A2232 !important;
}

/* Privacy policy — secondary, clearly not one of the two choices */
#cookie-notice #cn-more-info {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .55) !important;
}
#cookie-notice #cn-more-info:hover {
  background-color: rgba(255, 255, 255, .14) !important;
}

#cookie-notice .cookie-notice-container { padding: 16px 20px !important; }
#cookie-notice #cn-notice-text { color: #FFFFFF !important; }

/* keyboard users must be able to see where they are */
#cookie-notice button:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 2px !important;
}

@media (max-width: 767px) {
  #cookie-notice #cn-accept-cookie,
  #cookie-notice #cn-refuse-cookie,
  #cookie-notice #cn-more-info { margin: 6px 4px !important; }
}

/* The theme gives every <button> a ::before layer — solid white, inset 0,
   z-index:-1 — as the base for its hover wipe (::after holds the accent).
   On the cookie banner that white layer sits over the button's own
   background, so the Accept button never showed its colour and the
   "Privacy policy" label (white text) vanished into it entirely.
   Remove both layers here and let background-color do the work. */
#cookie-notice #cn-accept-cookie::before,
#cookie-notice #cn-accept-cookie::after,
#cookie-notice #cn-refuse-cookie::before,
#cookie-notice #cn-refuse-cookie::after,
#cookie-notice #cn-more-info::before,
#cookie-notice #cn-more-info::after,
#cookie-notice .cn-button::before,
#cookie-notice .cn-button::after {
  display: none !important;
  content: none !important;
}

/* ---------------------------------------------------------------------------
   Button contrast.

   The brand cyan (#00B2FF) is too light to carry white text: white on cyan
   measures 2.38:1, against a WCAG AA minimum of 4.5:1 for normal text. The
   same navy already used for body copy measures 6.84:1 on that cyan, and
   16.31:1 on white — so navy is safe everywhere cyan or white is the ground.

   The brand colour itself is untouched; only the text on top changes.
--------------------------------------------------------------------------- */

/* Theme buttons: the hover state was the failing one (white on cyan). */
:root {
  --cmsmasters-button-hover-colors-color: #0A2232;
}

/* Elementor buttons that take the accent background but were left with the
   default white label. Low specificity on purpose: any button given an
   explicit colour in Elementor emits a higher-specificity rule and still wins,
   which keeps the white labels on the dark hero and carousel intact. */
.elementor-button,
.elementor-button-link {
  color: #0A2232;
}

/* Carousel arrows: the theme's white ::before covers them, leaving white
   chevrons on a white disc. Same overlay problem as the cookie banner. */
.gdc-arrow::before,
.gdc-arrow::after {
  display: none !important;
  content: none !important;
}

/* ---------------------------------------------------------------------------
   Top of page, matching the lost build.

   1. Top bar: navy, white text, small.
   2. Header sits transparent over the hero photograph and fades to solid navy
      once the page scrolls — the theme adds .cmsmasters-sticky-header-active
      (or we add .gdc-scrolled) once past the hero.
   3. Primary buttons use the teal-to-cyan gradient from the recording.
--------------------------------------------------------------------------- */

/* --- 1. top bar --- */
.cmsmasters-header-top {
  background-color: #0A2232;
  position: relative;
  z-index: 3;
}
.cmsmasters-header-top,
.cmsmasters-header-top a {
  color: #FFFFFF;
  font-size: 13px;
}
.cmsmasters-header-top a:hover { color: var(--cmsmasters-colors-primary, #00B2FF); }
.cmsmasters-header-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
}
.cmsmasters-header-top-info__item + .cmsmasters-header-top-info__item { margin-left: 22px; }
.cmsmasters-header-top-info__item-icon { margin-right: 7px; opacity: .8; }

/* --- 2. transparent header over the hero, navy once scrolled --- */
@media (min-width: 1025px) {
  body.home .cmsmasters_header {
    position: absolute;
    left: 0;
    right: 0;
    /* Must sit above the hero's scrim (.gdc-hero::after, z-index 0). Without
       this the header is z-index:auto, the hero comes later in the document,
       and its scrim paints straight over the logo. The nav survived only
       because the theme gives it its own stacking context. */
    z-index: 20;
    background: transparent;
    transition: background-color .35s ease, box-shadow .35s ease;
  }
  body.home .cmsmasters_header .cmsmasters-header-mid {
    background-color: transparent !important;
  }
  /* once scrolled past the hero */
  body.home.gdc-scrolled .cmsmasters_header,
  body.home.gdc-scrolled .cmsmasters_header .cmsmasters-header-mid {
    background-color: #0A2232 !important;
    box-shadow: 0 2px 18px rgba(10, 34, 50, .22);
  }
  /* The header is taken out of flow so the photograph runs behind it, so the
     hero needs to reserve that height or the nav lands on the headline.
     --gdc-header-h is measured at runtime (see functions.php) because the
     header's height changes with the top bar and the breakpoint. */
  body.home .gdc-hero {
    margin-top: 0;
    padding-top: calc(var(--gdc-header-h, 150px) + 40px) !important;
  }
}

/* --- 3. gradient primary buttons ---
   The theme sets background-image from --cmsmasters-button-*-bg-image at a
   higher specificity than a bare .elementor-button rule, so this needs both
   the extra specificity and !important. */
.elementor-widget-button .elementor-button:not(.gdc-ghost),
.elementor-button:not(.gdc-ghost),
#cookie-notice #cn-accept-cookie {
  background-image: linear-gradient(90deg, #00E0C6 0%, #00B2FF 100%) !important;
}
/* buttons that are deliberately outline-only keep a flat background */
.gdc-slide__btn,
.gdc-arrow,
#cookie-notice #cn-refuse-cookie,
#cookie-notice #cn-more-info {
  background-image: none !important;
}
/* keep the ghost/outline buttons flat */
.gdc-slide__btn,
.gdc-arrow { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  body.home .cmsmasters_header { transition: none; }
}

/* A transparent header over a photograph only works if the top of the image
   is dark enough to carry white type. The hero's own overlay is flat, so add
   a gradient scrim behind the header band specifically.
   Elementor uses ::before on containers for the background overlay, so this
   takes ::after. */
body.home .gdc-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--gdc-header-h, 150px) + 80px);
  background: linear-gradient(to bottom, rgba(10, 34, 50, .78) 0%, rgba(10, 34, 50, .35) 55%, rgba(10, 34, 50, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
/* keep the hero's own content above the scrim */
body.home .gdc-hero > .e-con-inner,
body.home .gdc-hero > .elementor-element { position: relative; z-index: 1; }

/* The theme constrains the logo only at desktop widths. Below 1025px the
   2560px source scales to max-width:100% and renders ~335x212 on a phone,
   swallowing the whole header. Cap it by height so the aspect ratio holds. */
@media (max-width: 1024px) {
  .cmsmasters_header .cmsmasters-header-mid-logo__img,
  .cmsmasters_header .cmsmasters-header-mid-logo img {
    max-height: 58px;
    width: auto;
    height: auto;
  }
  .cmsmasters_header .cmsmasters-header-mid-logo { max-width: 170px; }
}
@media (max-width: 480px) {
  .cmsmasters_header .cmsmasters-header-mid-logo__img,
  .cmsmasters_header .cmsmasters-header-mid-logo img { max-height: 48px; }
}

/* ---- mobile header ------------------------------------------------------
   Two theme behaviours to correct below 1025px:
   1. the header-mid inner is display:block, so the logo and burger stack
      vertically instead of sitting on one row;
   2. the top bar's __outer is display:none — the theme collapses it behind a
      toggle. The recording shows the address bar visible on the phone, so
      bring it back.
------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cmsmasters-header-mid__outer > div,
  .cmsmasters-header-mid__inner {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .cmsmasters-header-mid-logo { flex: none; margin: 0; }
  .cmsmasters-header-mid__content-wrap {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .cmsmasters-header-top__outer { display: block !important; }
  .cmsmasters-header-top__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    padding: 8px 0;
  }
  .cmsmasters-header-top,
  .cmsmasters-header-top a { font-size: 11px; }
  .cmsmasters-header-top-info__list { flex-wrap: wrap; justify-content: center; }
  .cmsmasters-header-top-info__item + .cmsmasters-header-top-info__item { margin-left: 14px; }
}

/* On a phone the theme stacks the top-bar items, which pushed the bar to
   208px tall. The recording shows a single compact line with the address
   only, so keep the first info item and drop the rest — the phone number is
   already a tap target in the off-canvas menu and the footer. */
@media (max-width: 1024px) {
  .cmsmasters-header-top__inner {
    flex-wrap: nowrap;
    justify-content: center;
    padding: 7px 0;
    gap: 0;
  }
  .cmsmasters-header-top-info__list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
  }
  .cmsmasters-header-top-info__item:not(:first-child) { display: none; }
  .cmsmasters-header-top-info__item + .cmsmasters-header-top-info__item { margin-left: 0; }
  .cmsmasters-header-top-social { display: none; }
  .cmsmasters-header-top-info__item-text { white-space: nowrap; }
}
@media (max-width: 420px) {
  .cmsmasters-header-top, .cmsmasters-header-top a { font-size: 10px; }
}

/* Compact the mobile top bar to a single ~40px line. The theme pads __outer
   by 20px and renders a toggle control (the stray divider line) for the
   collapsed state — neither is wanted now the bar is always visible. */
@media (max-width: 1024px) {
  .cmsmasters-header-top__outer { padding: 4px 20px !important; }
  .cmsmasters-header-top__inner { padding: 2px 0 !important; min-height: 0; }
  .cmsmasters-header-top-toggle { display: none !important; }
  .cmsmasters-header-top-info,
  .cmsmasters-header-top-info__list,
  .cmsmasters-header-top-info__item,
  .cmsmasters-header-top-info__item-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .cmsmasters-header-top-info__item-inner { align-items: center; }
}

/* .cmsmasters-header-top-info__item::before is the divider between info
   items. Only one item is shown on mobile, so it renders as a stray line. */
@media (max-width: 1024px) {
  .cmsmasters-header-top-info__item::before { display: none !important; content: none !important; }
}

/* ===========================================================================
   RESPONSIVE TYPOGRAPHY AND SPACING — ports a scale the theme never applies.

   theme-config.php defines a full responsive type scale, but gates it behind:

       if ( '' === Utils::get_active_kit() || ! did_action( 'elementor/loaded' ) )

   i.e. it only loads when Elementor is NOT running or no kit is active. With
   Elementor active — the normal case for this theme — it never loads, and the
   Elementor kit sets no responsive sizes of its own. The result is desktop
   type on phones: h1 at 68px and h2 at 56px on a 375px screen.

   Values below are the theme's own, copied verbatim from theme-config.php.
=========================================================================== */

@media only screen and (max-width: 1024px) {
  :root {
    --e-global-typography-h1-font-size: 62px;
    --e-global-typography-h2-font-size: 48px;
    --e-global-typography-h3-font-size: 36px;
    --e-global-typography-h4-font-size: 24px;
    --e-global-typography-h5-font-size: 19px;
    --e-global-typography-h6-font-size: 12px;
    --e-global-typography-text-font-size: 16px;
    --e-global-typography-small-font-size: 14px;
    --e-global-typography-meta-font-size: 13px;
    --e-global-typography-taxonomy-font-size: 11px;
    --e-global-typography-button-font-size: 15px;
    --e-global-typography-accent-font-size: 15px;
    --e-global-typography-tertiary-font-size: 14px;
    --e-global-typography-blockquote-font-size: 26px;
  }

  body {
    --cmsmasters-main-content-padding-top: 80px;
    --cmsmasters-main-content-padding-bottom: 80px;
    --cmsmasters-single-meta-second-box-margin-bottom: 50px;
    --cmsmasters-single-media-box-margin-bottom: 80px;
    --cmsmasters-single-comments-box-margin-top: 80px;
    --cmsmasters-single-comments-items-hor-gap: 30px;
    --cmsmasters-single-nav-box-margin-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --e-global-typography-h1-font-size: 44px;
    --e-global-typography-h2-font-size: 36px;
    --e-global-typography-h3-font-size: 26px;
    --e-global-typography-h4-font-size: 20px;
    --e-global-typography-h5-font-size: 16px;
    --e-global-typography-h6-font-size: 10px;
    --e-global-typography-text-font-size: 15px;
    --e-global-typography-small-font-size: 13px;
    --e-global-typography-meta-font-size: 12px;
    --e-global-typography-taxonomy-font-size: 10px;
    --e-global-typography-button-font-size: 14px;
    --e-global-typography-accent-font-size: 14px;
    --e-global-typography-tertiary-font-size: 13px;
    --e-global-typography-blockquote-font-size: 20px;
  }

  body {
    --cmsmasters-archive-compact-media-width: 100%;
    --cmsmasters-archive-media-box-margin-right: 0;
    --cmsmasters-archive-media-box-margin-bottom: 40px;
    --cmsmasters-search-compact-media-width: 100%;
    --cmsmasters-search-media-box-margin-right: 0;
    --cmsmasters-search-media-box-margin-bottom: 40px;
    --cmsmasters-main-content-padding-top: 56px;
    --cmsmasters-main-content-padding-bottom: 56px;
  }
}

/* The page-title band keeps its desktop padding on every screen —
   150px top / 100px bottom, so ~400px of empty band before any content on a
   phone. Scale it with the viewport. */
@media only screen and (max-width: 1024px) {
  .cmsmasters-heading__inner {
    padding-top: 90px !important;
    padding-bottom: 60px !important;
  }
}
@media only screen and (max-width: 767px) {
  .cmsmasters-heading__inner {
    padding-top: 56px !important;
    padding-bottom: 40px !important;
  }
  /* the main content band too — the kit sets 120px on :root */
  .cmsmasters-main,
  .cmsmasters-main__inner {
    --cmsmasters-main-content-padding-top: 48px;
    --cmsmasters-main-content-padding-bottom: 48px;
  }
}

/* On a phone the consent banner was filling ~42% of the viewport. Tighten the
   text and keep all three controls on one row so it stays a banner rather
   than a takeover. */
@media (max-width: 767px) {
  #cookie-notice .cookie-notice-container { padding: 12px 14px !important; }
  #cookie-notice #cn-notice-text {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    display: block;
    margin-bottom: 10px;
  }
  #cookie-notice .cn-button-group,
  #cookie-notice #cn-notice-buttons {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
  }
  #cookie-notice #cn-accept-cookie,
  #cookie-notice #cn-refuse-cookie,
  #cookie-notice #cn-more-info {
    padding: 11px 12px !important;
    margin: 0 !important;
    min-height: 40px;            /* comfortable tap target */
    font-size: 10.5px !important;
    letter-spacing: .04em !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   Measure on full-width text pages.

   Removing the sidebar put every treatment page into the fullwidth layout,
   which stretched body copy to 1280px — about 200 characters per line, where
   comfortable reading is 65-75. Constrain the prose, but leave Elementor-built
   pages alone: they manage their own widths.
--------------------------------------------------------------------------- */
.cmsmasters-content-layout-fullwidth .cmsmasters-content > h2,
.cmsmasters-content-layout-fullwidth .cmsmasters-content > h3,
.cmsmasters-content-layout-fullwidth .cmsmasters-content > h4,
.cmsmasters-content-layout-fullwidth .cmsmasters-content > p,
.cmsmasters-content-layout-fullwidth .cmsmasters-content > ul,
.cmsmasters-content-layout-fullwidth .cmsmasters-content > ol,
.cmsmasters-content-layout-fullwidth .cmsmasters-content > dl,
.cmsmasters-content-layout-fullwidth .cmsmasters-content > blockquote {
  /* ~770px matches the column width the theme gave this content when the
     sidebar was present, which lands around 70-75 characters per line. */
  max-width: 770px;
  margin-left: auto;
  margin-right: auto;
}

/* the lead image can run a little wider than the text */
.cmsmasters-content-layout-fullwidth .cmsmasters-content > .page-lead-image {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* Elementor-built pages need no opt-out: the measure rules above target only
   DIRECT children of .cmsmasters-content, and Elementor content sits inside
   .cmsmasters-content > .elementor, so it is never matched.

   An earlier version of this block used `.elementor * { max-width: none }`,
   which also destroyed the browser default `img { max-width: 100% }` and let
   a 1024px photo overflow its 556px column and run underneath the contact
   form. Do not reintroduce a universal max-width reset here. */

/* Ordinary dropdowns are wider than the label that opens them, and
   left-aligning them makes the panel hang to the right. Centre them under
   their parent instead. The mega-menu is excluded — it spans the header. */
@media (min-width: 1025px) {
  .cmsmasters-menu__list > li:not(.gdc-mega) > .sub-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------------------
   Forminator submit button.

   The theme's white ::before overlay sits on it (same cause as the cookie
   banner and the carousel arrows), leaving a flat white box with no edge.
   The recording shows a light, bordered, uppercase button — kept here, with
   the pill radius used everywhere else on this site.
--------------------------------------------------------------------------- */
.forminator-ui .forminator-button-submit::before,
.forminator-ui .forminator-button-submit::after {
  display: none !important;
  content: none !important;
}

.forminator-ui .forminator-button-submit {
  background: #FFFFFF !important;
  color: #0A2232 !important;
  border: 1px solid rgba(10, 34, 50, .28) !important;
  border-radius: 50px !important;
  padding: 14px 34px !important;
  min-height: 48px;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.forminator-ui .forminator-button-submit:hover {
  background: #0A2232 !important;
  color: #FFFFFF !important;
  border-color: #0A2232 !important;
}
.forminator-ui .forminator-button-submit:focus-visible {
  outline: 2px solid var(--cmsmasters-colors-primary, #00B2FF);
  outline-offset: 2px;
}

/* Field labels and inputs, matching the recording's lighter treatment */
.forminator-ui .forminator-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px !important;
}
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui select,
.forminator-ui textarea {
  border-radius: 4px !important;
  min-height: 48px;
}

/* The uppercase/tracking treatment above is for short field labels only.
   text-transform inherits, so the GDPR consent sentence and its privacy-policy
   link picked it up too — a paragraph of legal text set in tracked caps. Reset
   them, and give the link a colour that passes AA on the section's light grey
   (the theme's cyan link colour measured 2.22:1 there). */
.forminator-ui .forminator-checkbox,
.forminator-ui .forminator-checkbox *,
.forminator-ui .forminator-description {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  line-height: 1.5;
}
.forminator-ui .forminator-checkbox a {
  color: #0A6E96 !important;          /* 5.31:1 on #F5F5F5 */
  text-decoration: underline;
}
.forminator-ui .forminator-checkbox a:hover { color: #0A2232 !important; }

/* The time field carries an extra sub-label row (HOUR / MINUTE) that the date
   field does not, so its selects drop below the date input and the two columns
   stop lining up. Hide the redundant sub-labels — "Preferred time" above two
   selects already reads as hour and minute — and let the selects share the
   column evenly. */
/* The Hour/Minute sub-labels are plain `label.forminator-label` (not a --sub
   variant); the outer "Preferred time" is a `span` with the same class, so the
   element type is what separates them. Hide the sub-labels from sight but keep
   them for screen readers — the selects are only labelled by these. */
.forminator-ui .forminator-field-time label.forminator-label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.forminator-ui .forminator-field-time .forminator-row,
.forminator-ui .forminator-field-time > .forminator-field {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.forminator-ui .forminator-field-time .forminator-col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 !important;
}
/* Forminator's grid pulls the inner row out by -15px each side to cancel the
   column gutters. With those gutters zeroed above, that bleed would push the
   two selects past the field's edge and out of line with the date beside it. */
.forminator-ui .forminator-field-time .forminator-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.forminator-ui .forminator-field-time select { width: 100%; }

/* Match the select2 controls to the date input beside them, so the Preferred
   date / Preferred time pair sits on one line. */
.forminator-ui .forminator-field-time .select2-container,
.forminator-ui .forminator-field-time .select2-selection,
.forminator-ui .forminator-input.forminator-datepicker {
  height: 48px !important;
  min-height: 48px !important;
}
.forminator-ui .forminator-field-time .select2-selection__rendered,
.forminator-ui .forminator-field-time .select2-selection__arrow {
  line-height: 46px !important;
  height: 46px !important;
}

/* One control height across the whole form. The theme's own input height wins
   over a plain min-height, so this has to be explicit. Textareas are excluded —
   they size to their rows. */
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="number"],
.forminator-ui input[type="url"],
.forminator-ui .forminator-input {
  height: 48px !important;
  min-height: 48px !important;
}
.forminator-ui textarea.forminator-textarea {
  height: auto !important;
  min-height: 120px !important;
}


/* ---------------------------------------------------------------------------
   Services mega-menu and header, matched to the recording (2026-10-13)

   Differences the recording shows against what was built:
     - panel is WHITE with near-square corners, not #F7F7F7 with a 25px radius
     - every label is sentence case, not small caps
     - there are no rules between items; an underline is a hover state
     - the header stays pinned to the top while the page scrolls, and the
       top bar collapses once it does
--------------------------------------------------------------------------- */

@media (min-width: 1025px) {

  /* --- panel chrome --- */
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu {
    background-color: #FFFFFF;
    border-radius: 4px;
    border: 0;
    box-shadow: 0 18px 44px rgba(10, 34, 50, .16);
    /* The theme sets margin-top:30px on every sub-menu. Under a fixed header
       that is a 30px dead zone between the nav item and the panel — the
       pointer leaves both on the way down and the menu closes. The recording
       has the panel flush against the header. */
    margin-top: 0;
  }

  /* --- labels: sentence case, as on screen in the recording ---
     The theme sets the nav's case and size from CSS custom properties
     (`.cmsmasters-header-mid .cmsmasters-menu__list > li > a span` reads
     --cmsmasters-header-mid-nav-*-text-transform). Out-specifying that rule
     loses — it is (0,3,3) — and fighting it would be working against the
     theme's own mechanism, so set the variables instead. These can later be
     moved into Site Settings > Header > Navigation Title Item if the client
     wants them editable in the Elementor UI. */
  .cmsmasters-menu__list > li.gdc-mega .cmsmasters-menu__item {
    line-height: 1.45;
  }

  /* column heading */
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu > li > a .cmsmasters-menu__item {
    color: #0A2232;
    font-weight: 500;
  }
  /* treatment */
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu > li > .sub-menu > li > a .cmsmasters-menu__item {
    color: #5A6570;
    font-weight: 400;
  }

  /* The theme puts a rule under every sub-menu item. The recording has none —
     the only lines in it are under the item the cursor is on and under that
     column's heading. */
  .cmsmasters-menu__list > li.gdc-mega .sub-menu > li { border: 0 !important; }

  .cmsmasters-menu__list > li.gdc-mega .sub-menu > li > a {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .cmsmasters-menu__list > li.gdc-mega .sub-menu > li > a .cmsmasters-menu__item {
    display: inline;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
  }
  /* hovering an item underlines it; hovering anywhere in a column underlines
     that column's heading — which is what the recording's frame shows, with
     two lines visible at once */
  .cmsmasters-menu__list > li.gdc-mega .sub-menu > li > a:hover .cmsmasters-menu__item,
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu > li:hover > a .cmsmasters-menu__item {
    color: #0A2232;
    border-bottom-color: rgba(10, 34, 50, .35);
  }

}

/* Nav typography, matched to the recording: sentence case throughout, not the
   theme's small caps. Set through the theme's own variables (see above). */
:root {
  /* top-level items: Home, Services, Dental Implants, Book an Appointment */
  --cmsmasters-header-mid-nav-title-item-text-transform: none;
  --cmsmasters-header-mid-nav-title-item-font-size: 15px;
  --cmsmasters-header-mid-nav-title-item-letter-spacing: 0px;
  /* dropdown and mega-menu items */
  --cmsmasters-header-mid-nav-dropdown-item-text-transform: none;
  --cmsmasters-header-mid-nav-dropdown-item-font-size: 14px;
  --cmsmasters-header-mid-nav-dropdown-item-letter-spacing: 0px;
}

/* ---------------------------------------------------------------------------
   Sticky header.

   In the recording the header stays pinned to the top of the window while the
   page scrolls: transparent over the hero at the very top, then solid navy
   with the top bar collapsed away from the first scroll onward.

   It was previously `position: absolute` on the home page only, which pinned
   it over the hero but let it scroll away like any other content.
--------------------------------------------------------------------------- */
.cmsmasters_header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color .35s ease, box-shadow .35s ease;
}
/* keep clear of the WordPress admin bar when one is showing */
body.admin-bar .cmsmasters_header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .cmsmasters_header { top: 46px; }
}

/* Fixed takes the header out of flow. The home hero already reserves
   --gdc-header-h (see the hero padding rule above); every other page has to
   reserve it on the body or the page title lands behind the nav. */
body:not(.home) {
  padding-top: var(--gdc-header-h, 150px);
}

/* Solid navy once scrolled — and on inner pages, which never have a hero to
   be transparent over. */
body.gdc-scrolled .cmsmasters_header,
body.gdc-scrolled .cmsmasters_header .cmsmasters-header-mid,
body:not(.home) .cmsmasters_header,
body:not(.home) .cmsmasters_header .cmsmasters-header-mid {
  background-color: #0A2232 !important;
}
body.gdc-scrolled .cmsmasters_header {
  box-shadow: 0 2px 18px rgba(10, 34, 50, .22);
}

/* The top bar collapses once the page scrolls, as in the recording — the
   scrolled frames show only the logo/nav row. max-height rather than height
   so it can animate without the real height being known. */
.cmsmasters-header-top {
  overflow: hidden;
  max-height: 140px;
  transition: max-height .3s ease, opacity .25s ease;
}
body.gdc-scrolled .cmsmasters-header-top {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cmsmasters_header,
  .cmsmasters-header-top { transition: none; }
}

/* ---------------------------------------------------------------------------
   Compact the fixed header on tablet and phone.

   A fixed header costs its height on every screen, permanently. On a 375x812
   phone this one measured 187px — 23% of the viewport — because the theme
   carries two stacked `margin-top: 30px` (one on the content wrap, one on the
   burger) that only make sense when those items stack under the logo on
   desktop. In the mobile flex row they are dead space.

   Result: 111px unscrolled, 75px once the top bar collapses.
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cmsmasters-header-mid__content-wrap,
  .cmsmasters-header-mid__add-content {
    margin-top: 0 !important;
  }
  .cmsmasters-header-mid__outer {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* the burger stays a 44px+ tap target */
  .cmsmasters-header-mid__add-content { min-height: 44px; }
}

/* Everything inside the mega panel shows and hides with the panel itself.
   The theme also sets visibility on items, and any descendant left
   `visible` inside the closed panel stays hit-testable — the menu then
   opens whenever the pointer passes the empty space beneath the header. */
@media (min-width: 1025px) {
  .cmsmasters-menu__list > li.gdc-mega > .sub-menu * {
    visibility: inherit !important;
  }
}

/* ---------------------------------------------------------------------------
   Ordinary dropdowns (About Ghaffar Dental), matched to the Services panel.

   They kept the theme's look: a 30px gap below the label (margin-top:30px),
   items with zero padding so the text sat on the panel's left edge, a grey
   panel with 25px corners, and a rule under every item. Now: flush with the
   bottom of the header, white, 4px corners, padded items, no rules — the same
   language as the mega-menu.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .cmsmasters-header-mid-menu__list > li:not(.gdc-mega) > .sub-menu {
    /* sit on the header's bottom edge, like the Services panel */
    top: calc(100% + 20px);
    margin-top: 0 !important;
    min-width: 230px;
    padding: 12px 0;
    background-color: #FFFFFF;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 18px 44px rgba(10, 34, 50, .16);
  }
  .cmsmasters-header-mid-menu__list > li:not(.gdc-mega) > .sub-menu > li {
    border: 0 !important;
  }
  .cmsmasters-header-mid-menu__list > li:not(.gdc-mega) > .sub-menu > li > a {
    padding: 10px 24px;
    white-space: nowrap;
  }
  .cmsmasters-header-mid-menu__list > li:not(.gdc-mega) > .sub-menu .cmsmasters-menu__item {
    color: #5A6570;
    transition: color .18s ease;
  }
  .cmsmasters-header-mid-menu__list > li:not(.gdc-mega) > .sub-menu > li > a:hover .cmsmasters-menu__item {
    color: #0A2232;
  }

  /* Hover bridge. Both kinds of panel start at the bottom of the header, 20px
     below their label, and that strip belongs to neither the label nor the
     panel — a pointer moving slowly down through it drops :hover and the
     menu closes. A transparent band above each panel keeps the hover alive.
     It inherits the panel's visibility, so a closed panel's bridge cannot be
     hovered (the bug fixed earlier today). */
  .cmsmasters-header-mid-menu__list > li > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    height: 20px;
  }
}

/* ---------------------------------------------------------------------------
   Appointment form colours, pinned.

   Forminator writes a per-form stylesheet into uploads/forminator/<id>_<hash>/
   and caches it. The cached copy this design was approved against has no
   colour rules; a FRESH copy — which any form edit in wp-admin, a Forminator
   update, or a move to a new server triggers — adds Forminator's defaults:
   grey #EDEDED fields, #777771 borders and labels. The live site would have
   looked different from the approved one. These rules make the look
   independent of that cache.

   Validation states are deliberately left to Forminator (fields inside
   .forminator-has_error keep their red), so errors still show.
--------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-field:not(.forminator-has_error) .forminator-input,
.forminator-ui.forminator-custom-form .forminator-field:not(.forminator-has_error) .forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-field:not(.forminator-has_error) .select2-selection,
.forminator-ui.forminator-custom-form .forminator-field:not(.forminator-has_error) .forminator-is_hover .forminator-input,
.forminator-ui.forminator-custom-form .forminator-field.forminator-is_hover:not(.forminator-has_error) .forminator-input,
.forminator-ui.forminator-custom-form .forminator-field.forminator-is_filled:not(.forminator-has_error) .forminator-input {
  background-color: #FFFFFF !important;
  border: 1px solid #DFE4E1 !important;
  border-radius: 4px !important;
  color: #666B68 !important;
  box-shadow: none !important;
}
.forminator-ui.forminator-custom-form .forminator-input::placeholder,
.forminator-ui.forminator-custom-form .forminator-textarea::placeholder { color: #666B68 !important; opacity: 1; }
.forminator-ui.forminator-custom-form .select2-selection__rendered,
.forminator-ui.forminator-custom-form .select2-selection__placeholder { color: #666B68 !important; }
.forminator-ui.forminator-custom-form .select2-selection__arrow,
.forminator-ui.forminator-custom-form .forminator-input-with-icon [class*="forminator-icon"] { color: #666B68 !important; }

/* keyboard focus: a visible ring in the site's accessible blue */
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus,
.forminator-ui.forminator-custom-form .select2-container--focus .select2-selection,
.forminator-ui.forminator-custom-form .select2-container--open .select2-selection {
  border-color: #0A6E96 !important;
  outline: 2px solid rgba(10, 110, 150, .25) !important;
  outline-offset: 0;
}

/* labels — "Preferred time" is a <span>, the rest are <label>; both navy */
.forminator-ui.forminator-custom-form .forminator-label { color: #0A2232 !important; }
.forminator-ui.forminator-custom-form .forminator-description { color: #666B68 !important; }
.forminator-ui.forminator-custom-form .forminator-checkbox,
.forminator-ui.forminator-custom-form .forminator-checkbox__label { color: #0A2232 !important; }

/* the consent tick box: white with a border strong enough to see (4.8:1) */
.forminator-ui.forminator-custom-form .forminator-checkbox .forminator-checkbox-box {
  background-color: #FFFFFF !important;
  border: 1px solid #777771 !important;
  border-radius: 3px !important;
}
.forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box {
  background-color: #0A6E96 !important;
  border-color: #0A6E96 !important;
  color: #FFFFFF !important;
}

/* Validation errors win over the pinned colours above. (The name field nests a
   second .forminator-field inside the one that carries .forminator-has_error,
   so the :not() guard alone did not catch it.) Red is darkened from
   Forminator's #E51919 so the message passes AA on the section's #F5F5F5. */
/* (.forminator-has_error is doubled on purpose: both this and the neutral rule
   are !important, so the more specific wins, and the neutral rule's :not()
   counts as a class.) */
.forminator-ui.forminator-custom-form .forminator-has_error.forminator-has_error .forminator-input,
.forminator-ui.forminator-custom-form .forminator-has_error.forminator-has_error .forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-has_error.forminator-has_error .select2-selection,
.forminator-ui.forminator-custom-form .forminator-has_error.forminator-has_error .forminator-checkbox-box {
  border-color: #C0161C !important;
}
.forminator-ui.forminator-custom-form .forminator-error-message {
  color: #C0161C !important;
}

/* ===========================================================================
   Full-site audit fixes (2026-10-14)
   =========================================================================== */

/* --- 1. Link colour: readable on light backgrounds ------------------------
   The theme's link colour is the brand cyan #00B2FF, which measures 2.38:1 on
   white (AA needs 4.5:1), and its hover grey #A5AEA8 is worse. Body text
   links, breadcrumbs and footer links move to #0A6E96 (5.6:1 on white, 5.3:1
   on #F5F5F5) with navy on hover. The top bar and the menu sit on navy, where
   cyan reads well, so their variables are left alone. */
:root {
  --cmsmasters-link-colors-normal: #0A6E96;
  --cmsmasters-link-colors-hover: #0A2232;
  --cmsmasters-colors-link: #0A6E96;
  --cmsmasters-breadcrumbs-colors-link: #0A6E96;
  --cmsmasters-footer-html-colors-link: #0A6E96;
  --cmsmasters-footer-info-colors-link: #0A6E96;
  --cmsmasters-sidebar-widgets-colors-link: #0A6E96;
  --cmsmasters-blockquote-colors-link: #0A6E96;
  --cmsmasters-table-colors-link: #0A6E96;
}
/* Elementor icon lists (Contact Us details) take the global primary colour */
.elementor-widget-icon-list a .elementor-icon-list-text,
.elementor-widget-icon-list a .elementor-icon-list-icon i,
.elementor-widget-icon-list a .elementor-icon-list-icon svg {
  color: #0A6E96 !important;
  fill: #0A6E96 !important;
}
.elementor-widget-icon-list a:hover .elementor-icon-list-text { color: #0A2232 !important; }

/* --- 2. The hero glow belongs to the hero only ----------------------------
   The headline shadow (for white text over the photograph) was matched by
   every Elementor H1 and blurred dark headings on white elsewhere. */
.elementor-widget-heading .elementor-heading-title { text-shadow: none; }
.gdc-hero .elementor-widget-heading .elementor-heading-title {
  text-shadow: 0 1px 24px rgba(10, 34, 50, .35);
}

/* --- 3. Side margins on Elementor pages, tablet and phone -----------------
   The Elementor sections were built with 0 side padding: on desktop the
   1280px boxed width provides the margin, but below it headings and text ran
   to the very edge of the screen while the header and footer kept 20px. */
@media (max-width: 1024px) {
  .elementor > .e-con {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}
@media (max-width: 767px) {
  .elementor > .e-con {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* --- 4. Lead photographs: one shape, centred ------------------------------
   Portrait photos rendered at their natural width, left of centre and up to
   ~1000px tall, while landscape ones filled the width. One 16:9 frame,
   cropped to fill, centred over the text. */
.page-lead-image { text-align: center; }
.page-lead-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
}

/* --- 5. Bullets inside the text column ------------------------------------
   List bullets hung outside the prose column; on a phone that put them 4px
   from the screen edge. */
.cmsmasters-content-layout-fullwidth .cmsmasters-content > ul,
.cmsmasters-content-layout-fullwidth .cmsmasters-content > ol {
  padding-left: 1.4em;
}

/* --- 6. Carousel: full width without running under the scrollbar ---------- */
.gdc-trackwrap {
  width: calc(100vw - var(--gdc-sbw, 0px)) !important;
  margin-left: calc(50% - 50vw + var(--gdc-sbw, 0px) / 2) !important;
}

/* --- 7. Nothing under ~11px; dots big enough to tap -----------------------
   Carousel eyebrows and buttons computed to 10.3px on tablet and phone, the
   phone top-bar address to 10px. */
.gdc-slide__eyebrow,
.gdc-slide__btn { font-size: 12px !important; }
@media (max-width: 767px) {
  .cmsmasters-header-top,
  .cmsmasters-header-top a,
  .cmsmasters-header-top-info__item-text { font-size: 11px !important; }
}
.elementor-widget-text-editor cite { font-size: 11px; }
/* The dots were 9px targets. A transparent border makes each one a 24px
   target while the visible dot stays the same size (inner radius = 12 - 7). */
.gdc-dots { gap: 0 !important; }
.gdc-dot {
  box-sizing: border-box !important;
  width: 24px !important;
  height: 24px !important;
  border: 7px solid transparent !important;
  border-radius: 12px !important;
  background-clip: padding-box !important;
}
.gdc-dot.is-active { width: 40px !important; }

/* --- 8. Meet the Team: placeholders for patients vs. editors ---------------
   The amber "To be supplied" notes are the client's to-do list: visible when
   logged in to WordPress, hidden from patients. Elementor's grey mountain
   placeholder becomes a calm branded tile until real photographs arrive. */
body:not(.logged-in) .gdc-to-supply { display: none !important; }
.elementor-widget-image.gdc-portrait-pending img { display: none !important; }
.elementor-widget-image.gdc-portrait-pending {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: #EEF3F6 url("../../uploads/2026/10/ghaffar-logo.png") center / 34% auto no-repeat;
}

/* --- 9. Navy buttons need white text ---------------------------------------
   "Call 01254 485431" on Meet the Team was navy on navy. */
.gdc-btn-dark .elementor-button {
  background-image: none !important;
  background-color: #0A2232 !important;
  border-color: #0A2232 !important;
  color: #FFFFFF !important;
}
.gdc-btn-dark .elementor-button:hover,
.gdc-btn-dark .elementor-button:focus-visible { background-color: #16405C !important; }

/* --- 10. Search results ---------------------------------------------------
   Even thumbnails (portrait photos made rows three times taller), and no
   author/date line on pages — "October 12, 2026" means nothing on a
   treatment page. */
.cmsmasters-search-post-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cmsmasters-search-post.type-page .cmsmasters-search-post-meta_second { display: none; }

/* --- 11. Hub pages: cards for the pages beneath (see functions.php) ------- */
.gdc-hub {
  max-width: 1040px;
  margin: 56px auto 0;
}
.gdc-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.gdc-hub--1 .gdc-hub__grid,
.gdc-hub--2 .gdc-hub__grid,
.gdc-hub--4 .gdc-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .gdc-hub__grid,
  .gdc-hub--1 .gdc-hub__grid,
  .gdc-hub--2 .gdc-hub__grid,
  .gdc-hub--4 .gdc-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 600px) {
  .gdc-hub { margin-top: 36px; }
  .gdc-hub__grid,
  .gdc-hub--1 .gdc-hub__grid,
  .gdc-hub--2 .gdc-hub__grid,
  .gdc-hub--4 .gdc-hub__grid { grid-template-columns: minmax(0, 1fr); }
}
.gdc-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E3E9EC;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.gdc-card:hover { box-shadow: 0 14px 34px rgba(10, 34, 50, .12); transform: translateY(-2px); }
.gdc-card__media { display: block; }
.gdc-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gdc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.gdc-card__title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
}
.gdc-card__title a { color: #0A2232; text-decoration: none; }
.gdc-card__title a:hover { color: #0A6E96; }
.gdc-card__text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #666B68;
}
.gdc-card__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.gdc-card__list li { margin: 0; border-top: 1px solid #EEF2F4; }
.gdc-card__list li:last-child { border-bottom: 1px solid #EEF2F4; }
.gdc-card__list a {
  display: block;
  padding: 9px 0;          /* a 40px tap target per treatment */
  font-size: 15px;
  color: #0A6E96;
  text-decoration: none;
}
.gdc-card__list a:hover { color: #0A2232; }
.gdc-card__more {
  margin-top: auto;
  align-self: flex-start;
  padding: 11px 22px;
  border: 1px solid rgba(10, 34, 50, .28);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0A2232;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gdc-card__more:hover { background: #0A2232; border-color: #0A2232; color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) {
  .gdc-card, .gdc-card:hover { transition: none; transform: none; }
}

/* --- 12. Breadcrumb links: a 24px tap target on phones (were 15px tall) --- */
@media (max-width: 767px) {
  .cmsmasters-breadcrumbs a,
  .cmsmasters-breadcrumbs__wrap a {
    display: inline-block;
    padding: 5px 0;
  }
}
/* the quote attribution on Meet the Team computed to 10px */
.elementor cite,
.elementor .elementor-blockquote__author { font-size: 11px !important; }

/* --- 13. Mobile menu ------------------------------------------------------
   The burger menu's items sat flush against the screen edge (logo above sits
   20px in), and were still in capitals though the desktop menu was changed to
   sentence case to match the recording — the burger menu reads its own
   variables. */
:root {
  --cmsmasters-header-mid-nav-burger-title-item-text-transform: none;
  --cmsmasters-header-mid-nav-burger-title-item-letter-spacing: 0px;
  --cmsmasters-header-mid-nav-burger-dropdown-item-text-transform: none;
  --cmsmasters-header-mid-nav-burger-dropdown-item-letter-spacing: 0px;
}
@media (max-width: 1024px) {
  .cmsmasters-header-mid-menu .cmsmasters-menu__list > li > a {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .cmsmasters-header-mid-menu .cmsmasters-menu__list .sub-menu > li > a {
    padding-left: 36px !important;
    padding-right: 20px !important;
  }
  .cmsmasters-header-mid-menu .cmsmasters-menu__list .sub-menu .sub-menu > li > a {
    padding-left: 52px !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .cmsmasters-header-mid-menu .cmsmasters-menu__list > li > a { padding-left: 30px !important; padding-right: 30px !important; }
}

/* The burger button took its colour from the link variable changed in (1).
   Keep the brand cyan, with a navy icon: white on cyan is 2.4:1, navy 6.8:1 —
   the same pairing as the site's other cyan buttons. */
.cmsmasters-header-mid-burger-menu-button__toggle { background-color: #00B2FF !important; }
.cmsmasters-header-mid-burger-menu-button__toggle i,
.cmsmasters-header-mid-burger-menu-button__toggle [class*="icon"] { color: #0A2232 !important; }
.gdc-card__media--blank {
  aspect-ratio: 4 / 3;
  background: #EEF3F6 url("../../uploads/2026/10/ghaffar-logo.png") center / 34% auto no-repeat;
}

/* --- 14. Placeholder social icons ------------------------------------------
   The practice has no social profiles yet, so the top-bar icons point at "/"
   and opened the home page in a new tab. Hide any that still point there;
   they reappear by themselves once real URLs are entered in
   Site Settings > Header > Top. */
.cmsmasters-header-top-social__item:has(> a[href="/"]) { display: none !important; }
.cmsmasters-header-top-social__item > a[href="/"] { display: none !important; }

/* --- 15. Privacy Policy (and any other plain page) --------------------------
   Tables and the editor-only notes need the same measure as the prose. */
.cmsmasters-content-layout-fullwidth .cmsmasters-content > table,
.cmsmasters-content-layout-fullwidth .cmsmasters-content > .gdc-to-supply {
  max-width: 770px;
  margin-left: auto;
  margin-right: auto;
}
.cmsmasters-content > table { width: 100%; border-collapse: collapse; margin-bottom: 28px; font-size: 15px; }
.cmsmasters-content > table th,
.cmsmasters-content > table td { padding: 10px 12px; border: 1px solid #DFE4E1; text-align: left; vertical-align: top; }
.cmsmasters-content > table th { background: #F5F7F8; color: #0A2232; font-weight: 600; }
.cmsmasters-content > table code { font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .cmsmasters-content > table { display: block; overflow-x: auto; }
}
/* editor-only note in page content (hidden from visitors by rule 8) */
.cmsmasters-content > .gdc-to-supply {
  padding: 16px 20px;
  border-left: 3px solid #D0A215;
  background: #FBF6E7;
  color: #6B5411;
  margin-bottom: 28px;
}
.cmsmasters-content > .gdc-to-supply p,
.cmsmasters-content > .gdc-to-supply li { color: #6B5411; }
.cmsmasters-content > .gdc-to-supply ol { padding-left: 1.3em; margin: 8px 0; }
/* Section headings on the Privacy Policy: the theme's 56px H2 is right for a
   page headline, far too heavy for thirteen sections of a legal page. */
body.page-id-3 .cmsmasters-content > h2 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  margin-top: 44px;
  margin-bottom: 14px;
}
body.page-id-3 .cmsmasters-content > h3 {
  font-size: clamp(20px, 2.2vw, 23px);
  line-height: 1.3;
  margin-top: 26px;
  margin-bottom: 10px;
}
/* keep cookie names whole rather than breaking them into fragments */
.cmsmasters-content > table code { white-space: nowrap; overflow-wrap: normal; font-size: 12.5px; }
/* On phones a four-column table crushes its text to one word per line.
   Stack each row as a block, labelling every value from its data-label. */
@media (max-width: 600px) {
  .cmsmasters-content > table.gdc-stack-table { display: block; overflow: visible; border: 0; }
  .gdc-stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gdc-stack-table tbody, .gdc-stack-table tr, .gdc-stack-table td { display: block; }
  .gdc-stack-table tr { border: 1px solid #DFE4E1; border-radius: 4px; padding: 6px 16px; margin-bottom: 14px; }
  .cmsmasters-content > table.gdc-stack-table td { border: 0; padding: 8px 0; }
  .gdc-stack-table td + td { border-top: 1px solid #EEF2F4 !important; }
  .gdc-stack-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0A2232;
  }
}

/* --- 16. Click-to-load map panel (see functions.php) ----------------------- */
.gdc-map {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 32px 24px;
  box-sizing: border-box;
  background: #EEF3F6;
  border-radius: 4px;
  text-align: center;
}
.gdc-map__inner { max-width: 460px; }
.gdc-map__pin { color: #0A6E96; margin-bottom: 10px; }
.gdc-map__address { margin: 0 0 6px; font-size: 18px; color: #0A2232; }
.gdc-map__note { margin: 0 0 22px; font-size: 14px; color: #666B68; }
.gdc-map__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
/* theme styles every <button>: reset its padding and its ::before/::after layers */
.gdc-map__show::before,
.gdc-map__show::after { display: none !important; content: none !important; }
.gdc-map__show {
  padding: 13px 30px !important;
  border: 1px solid #0A2232 !important;
  border-radius: 50px !important;
  background: #0A2232 !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  cursor: pointer;
}
.gdc-map__show:hover { background: #16405C !important; border-color: #16405C !important; }
.gdc-map__show:focus-visible { outline: 2px solid #0A6E96; outline-offset: 3px; }
.gdc-map__open {
  padding: 12px 6px;
  font-size: 14px;
  color: #0A6E96;
  text-decoration: underline;
}
.gdc-map__open:hover { color: #0A2232; }
/* Elementor's map widget sets line-height:0 on its wrapper (to remove the gap
   under an iframe); the panel's text inherited it and the lines overlapped. */
.gdc-map, .gdc-map p { line-height: 1.5; }
.gdc-map__actions a, .gdc-map__actions button { line-height: 1.2; }