/* Clarity refinement — enqueue after signature.css and contact-refinement.css.
   Preserve Poppins, navy/cream/gold, media geometry, sticky panels and drawers.
   NAVIGATION CONTRACT: CSS switches only the menu at 1440px; full desktop
   navigation starts at 1441px. Existing open/data-open interactions are retained.
   Only the header navigation changes breakpoint; the panel remains unchanged. */

/* High-contrast header copy; gold remains an accent or navy-text surface. */
.site-header,
.site-header .service-wordmark,
.site-header nav,
.site-header .dew-menu a,
.site-header nav > a:not(.nav-contact) {
  color: var(--navy, #142b49);
}
.site-header .dew-menu a:hover,
.site-header nav > a:not(.nav-contact):hover {
  color: var(--royal-navy, #203f67);
}
.site-header .dew-menu .nav-contact a {
  color: var(--navy, #142b49);
}
.site-header .dew-menu .nav-contact:hover a {
  color: var(--white, #ffffff);
}
.site-header nav :focus-visible {
  outline: 3px solid var(--navy, #142b49);
  outline-offset: 4px;
}

/* Eight items get clear rules between links and generous gaps, not smaller type.
   Support WordPress list items and the mirror's direct-anchor navigation. */
@media (min-width: 1441px) {
  .site-header {
    gap: 28px;
  }
  .site-header nav,
  .site-header .dew-menu {
    --dew-menu-gap: clamp(28px, 2.15vw, 36px);
    column-gap: var(--dew-menu-gap);
    align-items: center;
    flex-wrap: nowrap;
  }
  .site-header .dew-menu > li,
  .site-header nav > a {
    position: relative;
  }
  .site-header .dew-menu > li + li::before,
  .site-header nav > a + a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--dew-menu-gap) * -0.5);
    width: 1px;
    height: 24px;
    background: var(--gold, #b89a63);
    transform: translateY(-50%);
    pointer-events: none;
  }
  .site-header .dew-menu a,
  .site-header nav > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 8px;
    font-size: 13px;
    line-height: 1.6;
    white-space: nowrap;
  }
  .site-header .dew-menu .nav-contact a,
  .site-header nav > a.nav-contact {
    padding: 14px 20px;
    font-weight: 700;
  }
  .site-header nav > a:not(.nav-contact)::after {
    left: 8px;
  }
  .site-header nav > a:not(.nav-contact):hover::after,
  .site-header nav > a:not(.nav-contact)[aria-current]::after {
    right: 8px;
  }
}

/* Extend only the existing menu pattern to tablet/small-desktop widths.
   The open/data-open hooks match existing JS; no contact/sticky rules change. */
@media (min-width: 1121px) and (max-width: 1280px) {
  :root {
    --dew-header-height: 92px;
  }
}
@media (max-width: 1280px) {
  .site-header .service-brand {
    width: 245px;
    max-width: calc(100% - 72px);
    flex: 0 1 245px;
  }
}
@media (max-width: 1440px) {
  .site-header .menu-toggle {
    display: none;
  }
  html.js-navigation .site-header .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 48px;
    height: 48px;
  }
  .site-header .menu-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--navy);
  }
  .site-header nav {
    display: flex;
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 0;
    padding: 16px 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white, #ffffff);
    border: 0;
    box-shadow: none;
    font-size: 15px;
  }
  html.js-navigation .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100dvh - var(--dew-sticky-height) - 12px);
    margin: 0;
    padding: 20px var(--dew-gutter, 24px) 24px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    border-bottom: 1px solid var(--line, #d5dfe6);
    box-shadow: 0 16px 28px #142b4912;
  }
  html.js-navigation .site-header nav.open,
  html.js-navigation .site-header nav[data-open="true"] {
    display: flex;
  }
  .site-header .dew-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .site-header .dew-menu > li,
  .site-header nav > a {
    position: relative;
    min-width: 0;
  }
  .site-header .dew-menu > li + li::before,
  .site-header nav > a + a::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line, #d5dfe6);
    pointer-events: none;
  }
  .site-header .dew-menu a,
  .site-header nav > a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 14px 10px;
    font-size: 15px;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .site-header nav > a + a {
    margin-top: 16px;
  }
  .site-header .dew-menu .nav-contact {
    margin-top: 8px;
  }
  .site-header nav > a.nav-contact {
    margin-top: 24px;
  }
  .site-header .dew-menu > li.nav-contact::before,
  .site-header nav > a.nav-contact::before {
    top: -12px;
  }
  .site-header .dew-menu .nav-contact a,
  .site-header nav > a.nav-contact {
    padding: 14px 18px;
    font-weight: 700;
  }
  html:not(.js-navigation) .site-header {
    position: relative;
    top: auto;
    height: auto;
    flex-wrap: wrap;
    gap: 16px;
    padding-block: 20px;
  }
  html:not(.js-navigation) .site-header nav {
    display: flex;
    position: static;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* Measured reading rhythm: 28px heading-to-copy, 24px between paragraphs.
   Direct-child selectors avoid form labels, portrait captions and player UI.
   Reset only the next block's existing top margin to avoid doubled gaps. */
.section-block > .eyebrow,
.page-intro .container > .eyebrow {
  margin-bottom: 18px;
}
.section-block > h2 {
  margin-bottom: 28px;
}
.section-block > h2 + :is(p, div, ul, ol, article, blockquote) {
  margin-top: 0;
}
.section-block > h2 + .lead {
  margin-top: 0;
}
.section-block > p + p {
  margin-top: 24px;
}
.section-block > p + :is(.text-link, .button) {
  margin-top: 24px;
}
.section-block > p + p > :is(.text-link, .button):only-child {
  margin-top: 0;
}
.section-block
  > p
  + :is(
    .legal-context,
    .service-columns,
    .expertise-list,
    .report-definitions,
    .publications,
    .qualification-row,
    .compact-list,
    .steps,
    .checklist,
    .fee-list,
    .document-links
  ) {
  margin-top: 32px;
}
.section-block
  > :is(
    .legal-context,
    .service-columns,
    .expertise-list,
    .report-definitions,
    .publications,
    .qualification-row,
    .compact-list,
    .steps,
    .checklist,
    .fee-list
  )
  + p {
  margin-top: 28px;
}
.section-block
  :is(
    .legal-context,
    .service-columns,
    .expertise-list,
    .report-definitions,
    .publications,
    .qualification-row,
    .compact-list,
    .steps,
    .fee-list
  )
  h3
  + p {
  margin-top: 12px;
}
.section-block
  :is(
    .legal-context,
    .service-columns,
    .expertise-list,
    .report-definitions,
    .publications,
    .qualification-row,
    .compact-list,
    .steps,
    .fee-list
  )
  p
  + p {
  margin-top: 18px;
}
.section-block .publications article {
  padding-block: 28px;
}
.page-intro .container > h1 {
  margin-bottom: 28px;
}
.page-intro .container > h1 + p {
  margin-top: 0;
}
.terms-section > h2 {
  margin-bottom: 24px;
}
.terms-section > h2 + p {
  margin-top: 0;
}
.terms-section > p + p {
  margin-top: 24px;
}
.education-detail > h2 {
  margin-bottom: 16px;
}
.education-detail .education-description > p {
  margin-bottom: 20px;
}
.education-detail .education-description > p:last-child {
  margin-bottom: 0;
}
.education-context > p + p {
  margin-top: 24px;
}

/* About: two unmistakable, whole-card external links. The visible destination
   labels come from the existing HTML; CSS adds no duplicated link copy.
   Gutenberg may wrap either the links or their contents in paragraph nodes. */
.professional-sites .professional-link-list,
.professional-sites .professional-link-list > p {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}
.professional-sites .professional-link-list {
  margin-top: 0;
}
.professional-sites .professional-link-list > p {
  grid-column: 1 / -1;
  margin: 0;
}
.professional-sites
  .professional-link-list
  > p:has(> .professional-link:only-child) {
  display: flex;
  grid-column: auto;
}
.professional-sites .professional-link,
.professional-sites .professional-link:hover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  height: 100%;
  padding: 26px;
  background: var(--cream, #faf9f5);
  color: var(--navy, #142b49);
  border: 1px solid var(--line, #d5dfe6);
  border-top: 3px solid var(--gold, #b89a63);
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}
.professional-sites .professional-link > p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  width: 100%;
  margin: 0;
  color: inherit;
}
.professional-sites .professional-link strong {
  display: block;
  color: var(--navy, #142b49);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
.professional-sites .professional-link > span:not(.external-label),
.professional-sites .professional-link > p > span:not(.external-label) {
  display: block;
  color: var(--slate, #526982);
  font-size: 15px;
  line-height: 1.85;
}
.professional-sites .professional-link .external-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-height: 44px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--royal-navy, #203f67);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  text-decoration: underline;
  text-decoration-color: var(--royal-navy, #203f67);
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.professional-sites .professional-link .external-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 8px;
  background: var(--gold, #b89a63);
  color: var(--navy, #142b49);
  border: 1px solid var(--gold, #b89a63);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.professional-sites .professional-link:hover {
  background: var(--pale-blue, #edf2f6);
  border-color: var(--royal-navy, #203f67);
  border-top-color: var(--gold, #b89a63);
}
.professional-sites .professional-link:focus-visible {
  outline: 3px solid var(--navy, #142b49);
  outline-offset: 4px;
  background: var(--pale-blue, #edf2f6);
}

/* Footer: brand | contact | one settings-backed examination address.
   The shared Gutenberg footer spans the two right columns; its contacts
   have their own grid. Never clone, hide or truncate the address/map. */
.footer-top {
  display: grid;
  grid-template-columns: minmax(200px, 245px) repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 28px;
  padding-block: clamp(40px, 4.5vw, 64px);
}
.footer-top > .brand {
  width: 100%;
  max-width: 245px;
  margin: 0;
}
.footer-top > .footer-content,
.footer-top > .wp-block-group.footer-content {
  /* Sole !important: beats wordpress.css's display:block!important. */
  display: grid !important;
  grid-column: 2 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
}
.footer-content .dew-footer-contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 28px 40px;
}
.footer-content .dew-footer-contacts > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 12px;
}
.footer-content .dew-footer-contacts .eyebrow {
  margin: 0 0 4px;
}
.footer-content .dew-footer-contacts .big-phone,
.footer-content .dew-footer-contacts .email-address {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  color: var(--navy, #142b49);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.footer-content .dew-footer-contacts .email-address {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.footer-content .dew-footer-contacts address {
  margin: 0;
  color: var(--navy, #142b49);
  font-size: 14px;
  font-style: normal;
  line-height: 1.85;
}
.footer-content .dew-footer-contacts .examination-location > p {
  margin: 0;
  color: var(--slate, #526982);
  font-size: 13px;
  line-height: 1.8;
}
.footer-content .dew-footer-contacts .mini-map {
  max-width: 100%;
}
.footer-content .dew-footer-contacts .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 16px;
  color: var(--royal-navy, #203f67);
  font-size: 13px;
}
.footer-top > .footer-content > p {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line, #d5dfe6);
  color: var(--slate, #526982);
  font-size: 13px;
  line-height: 1.85;
}
.footer-bottom .footer-menu {
  gap: 12px 28px;
}

@media (max-width: 1000px) {
  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-top > .brand {
    grid-column: 1 / -1;
  }
  .footer-top > .footer-content {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .professional-sites .professional-link-list,
  .professional-sites .professional-link-list > p {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 620px) {
  .section-block > h2,
  .page-intro .container > h1 {
    margin-bottom: 24px;
  }
  .section-block > p + p,
  .terms-section > p + p,
  .education-context > p + p {
    margin-top: 20px;
  }
  .section-block .publications article {
    padding-block: 24px;
  }
  .professional-sites .professional-link,
  .professional-sites .professional-link:hover {
    padding: 22px 20px;
  }
  .professional-sites .professional-link strong {
    font-size: 19px;
  }
  .footer-top,
  .footer-content .dew-footer-contacts {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-top {
    gap: 28px;
  }
  .footer-content .dew-footer-contacts {
    gap: 32px;
  }
  .footer-top > .brand,
  .footer-top > .footer-content {
    grid-column: 1;
  }
  .footer-bottom .footer-menu {
    gap: 8px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .professional-sites .professional-link {
    transition: none;
  }
}

/* The persistent top-strip Enquire already opens the same form. On narrow
   screens omit the floating duplicate rather than covering photographs. */
@media (max-width: 1280px) {
  a.mobile-request,
  .no-sidebar a.mobile-request,
  html:not(.js-navigation) a.mobile-request {
    display: none;
  }
}

/* Gutenberg adds wp-block-group, increasing the base selector specificity.
   Reset that same selector at the breakpoint so it cannot create an implicit
   second column beside the brand on phone/tablet. */
@media (max-width: 1000px) {
  .footer-top > .wp-block-group.footer-content {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .footer-top > .brand {
    grid-row: auto;
  }
}