/* =========================================================================
   Adjustments layered on top of the design stylesheet.

   style.css is kept exactly as exported from the HTML build, so a new export
   can be dropped straight in. Everything here is either markup WordPress or a
   plugin adds that the static build did not have, or a design adjustment made
   after handover (block spacing, mega-menu rows).
   ========================================================================= */

/* ---- Contact Form 7 ---------------------------------------------------- */

/* CF7 wraps every control in a <span>. The theme's layout expects the control
   itself to be the child, so the wrapper is made transparent to layout and
   inherits the sizing rules that were written for the input. */
.wpcf7-form-control-wrap { display: block; }

/* .newsletter is a flex row; the wrapper is now the flex item, not the input. */
.newsletter .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; }
.newsletter .newsletter__input { width: 100%; }

/* The .wpcf7 <div> must not interrupt the spacing rules that target the form. */
.wpcf7 { display: contents; }

/* Validation messages reuse the note styling already in the design. */
.enquiry .wpcf7-response-output,
.enquiry .wpcf7-not-valid-tip {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  color: #FFB3AB;
  text-align: center;
}

/* Holds the same reserved line the static .enquiry__note did, so the panel does
   not jump when a message appears. */
.enquiry .wpcf7-response-output { min-height: 20px; }

.newsletter .wpcf7-response-output {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  font-size: 13px;
  color: var(--navy-700);
}

.newsletter .wpcf7-not-valid-tip {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 10px 0 0;
  font-size: 13px;
  color: #C0392B;
}

.wpcf7-form.sent .wpcf7-response-output { color: var(--navy-700); }

/* The spinner is a flex child of .newsletter, where it would otherwise claim a
   44px gap and shorten the input. It is taken out of flow and shown under the
   row instead, beside where the status message appears. */
.wpcf7-spinner { margin: 0 0 0 10px; vertical-align: middle; }
.newsletter .wpcf7-spinner {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 8px 0 0;
}

/* CF7's hidden field container must not take up a grid slot. */
.wpcf7 .hidden-fields-container,
.wpcf7 .screen-reader-response { display: none; }



/* ---- Core / editor markup --------------------------------------------- */

/* WordPress writes width/height attributes on every image it renders. Those
   attributes are presentational hints for the CSS width/height properties, so
   on the cards the design sizes with `aspect-ratio` and an implicit auto height
   (.industry__media, .reason__media, .how__media, .solution-card__media …) the
   hint won and the images rendered at their full intrinsic height.

   Restoring height:auto hands sizing back to aspect-ratio. Every rule in
   style.css that genuinely needs a fixed height sets it through a class
   selector, so those all still beat this one. */
img { height: auto; }


.article-body img,
.article-body iframe { max-width: 100%; height: auto; }

.article-body figure { margin: 32px 0; }

.article-body figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-600);
}

/* SVG attachments have no intrinsic pixel size, so WordPress would otherwise
   emit width="0" height="0". pws_svg_image_src() drops those attributes and the
   design stylesheet already sizes every one of these images, so nothing is
   overridden here. */

/* The admin bar offsets the sticky header for logged-in users. */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}


/* ---- Block spacing ----------------------------------------------------- */

/* .lede has top padding only, and .split / .capabilities start flush with no
   top spacing of their own, so any page that stacks them (Claims: lede → split)
   ran the photo straight into the paragraph. The static build had the same 0px
   gap; it just never showed because claims-role.jpg was missing.

   This reuses the rule the design already applies after .page-intro
   (70px desktop, 48px at ≤991px) so every block order an editor can build in
   the page builder gets the same breathing room. */
.lede + .split,
.lede + .capabilities,
.page-intro + .capabilities { margin-top: 70px; }

@media (max-width: 991px) {
  .lede + .split,
  .lede + .capabilities,
  .page-intro + .capabilities { margin-top: 48px; }
}


/* ---- Mega menu --------------------------------------------------------- */

/* Tighter link rows in the dropdown panels: 13px → 8px top and bottom, so each
   row is 44px instead of 54px. Only the vertical padding is set, which leaves
   the mobile drawer's own `8px 0 8px 16px` indent and the 6px hover nudge
   untouched. */
.mega__list a {
  padding-top: 8px;
  padding-bottom: 8px;
}


/* ---- "What makes us different" band ------------------------------------ */

/* The feature-icon row normally separates the copy from the video, using its
   own 62px margin (48px at ≤991px). When a band has no icons — the home page's
   "Claims Advocacy When It Matters Most" — the video sat flush under the last
   paragraph. The static build had the same 0px gap. The video now takes the
   icon row's spacing whenever it follows the copy directly. */
.difference__top + .video { margin-top: 62px; }

@media (max-width: 991px) {
  .difference__top + .video { margin-top: 48px; }
}


/* The page you are on, inside a dropdown / accordion panel. The walker already
   marks it .is-active; the design just had no style for it. */
.mega__list a.is-active { color: var(--primary); font-weight: 500; }


/* ---- Full-screen mobile menu ------------------------------------------- */

/* Layout, top to bottom: a bar with the logo and a close button, the menu
   (scrolls on its own; Insurance and Reinsurance open as accordions), then a
   footer with phone, email and the call to action. The top bar, footer and
   accordion buttons only exist on mobile — on desktop the nav renders exactly
   as before. */
.nav__mhead,
.nav__mfoot,
.nav__toggle { display: none; }

html.nav-open,
html.nav-open body { overflow: hidden; }

@media (max-width: 991px) {

  .nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    border-top: 0;
    box-shadow: none;
    background: var(--white);
    transform: translateY(12px);
  }
  /* Visibility switches on instantly when opening (it still fades out on
     close), otherwise the close button is not focusable on the first frame. */
  .nav.is-open {
    transform: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s;
  }

  /* Logged-in editors: sit below the WordPress toolbar. */
  body.admin-bar .nav { top: 32px; height: calc(100dvh - 32px); }

  /* Top bar — same height, logo size and button position as the header, so
     the burger appears to turn into the close button in place. */
  .nav__mhead {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    padding: 0 var(--gutter);
    border-bottom: 1px solid var(--line);
  }
  .nav__mlogo img { height: 52px; width: auto; }
  .nav__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-900);
    cursor: pointer;
  }
  .nav__close svg { width: 26px; height: 26px; }

  /* Menu */
  .nav__mbody {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px var(--gutter) 24px;
  }
  .nav__list { gap: 0; }
  .nav__item + .nav__item { border-top: 1px solid var(--line); }
  /* .nav--wide is the design's desktop sizing hook (16px, 15px at ≤1200px); it
     has to be matched here or plain links render smaller than the accordion
     rows. */
  .nav__link,
  .nav--wide .nav__link { padding: 16px 0; font-size: 20px; }

  /* Parents: the link is swapped for the accordion button. The section's
     overview page stays reachable through "View … Details" in the panel. */
  .nav__item--has-menu > .nav__link { display: none; }
  .nav__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 20px;
    color: var(--ink-900);
    text-align: left;
    cursor: pointer;
  }
  .nav__toggle.is-active { color: var(--navy-800); font-weight: 500; }
  .nav__toggle .nav__chev { display: block; width: 14px; height: 8px; }
  .nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

  /* Accordion panel — animates open by growing its grid row from 0fr to 1fr. */
  .mega {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
  }
  .mega > .mega__inner { min-height: 0; overflow: hidden; }
  .nav__item.is-expanded .mega { grid-template-rows: 1fr; }
  .mega__body { padding: 0 0 16px; }
  .mega__list a { padding: 10px 0 10px 16px; font-size: 16px; }
  .mega__cta { margin: 8px 0 0 16px; }

  /* Footer */
  .nav__mfoot {
    display: block;
    flex: none;
    padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--grey-50);
  }
  .nav__mlabel {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-600);
  }
  .nav__mcontact {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
  }
  .nav__mcontact a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: var(--ink-900);
    word-break: break-word;
  }
  .nav__mcontact svg { flex: none; width: 20px; height: 20px; color: var(--primary); }
  .nav__mcta { display: flex; width: 100%; height: 52px; justify-content: center; }
}

@media (max-width: 782px) {
  body.admin-bar .nav { top: 46px; height: calc(100dvh - 46px); }
}

/* Short screens — phones in landscape. With the top bar and footer pinned,
   a 390px-tall screen left only ~80px for the menu. Here the whole overlay
   scrolls as one column instead, the footer follows the menu, and the top bar
   stays stuck so the close button is always in reach. */
@media (max-width: 991px) and (max-height: 600px) {
  .nav { overflow-y: auto; overscroll-behavior: contain; }
  .nav__mhead { position: sticky; top: 0; z-index: 1; background: var(--white); }
  .nav__mbody { flex: none; overflow: visible; }
}


/* ---- Article byline ---------------------------------------------------- */

/* Company byline: the logo replaces the round portrait, so it is shown in full
   rather than cropped to a circle. */
.author__avatar--logo {
  width: auto;
  height: 40px;
  max-width: 120px;
  border-radius: 0;
  object-fit: contain;
}

.author__email { margin: 3px 0 0; font-size: 13px; }
.author__email a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }


/* ---- Contact cards ----------------------------------------------------- */

/* Labelled addresses ("Get a quote:", "General enquiries:") — the label sits on
   its own line above its address, with the pairs spaced apart so they read as
   two groups rather than four loose lines. */
.contact-card__eyebrow {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-400);
}
.contact-card__detail > .contact-card__eyebrow:first-child { margin-top: 0; }


/* ---- Footer sign-off band ---------------------------------------------- */

/* The band read as loud as the pages above it: the heading was 48px — the same
   size as a page H1 and a section title — and the two email labels were 20px,
   the same size and weight as the addresses themselves. Inside the footer the
   next step down was 16px, so there was nothing between 48 and 16.

   This sets a proper step (34 → 16 → 14), makes the labels quieter than the
   addresses they introduce, and lets the heading wrap instead of being pinned
   to one line. Sizes are all in this one block if they need tuning. */
.footer__heading {
  font-size: 34px;
  line-height: 1.25;
  white-space: normal;
}

.footer--wide .footer__emails { gap: 12px 40px; margin-top: 20px; }

.footer--wide .footer__emails span { font-size: 15px; color: var(--ink-400); }
.footer--wide .footer__emails a {
  font-size: 17px;
  color: var(--ink-900);
  text-decoration-color: rgba(14, 23, 38, .25);
  text-underline-offset: 4px;
}
.footer--wide .footer__emails a:hover { text-decoration-color: currentColor; }

.footer__logo img { height: 72px; }

@media (max-width: 1200px) { .footer__heading { font-size: 30px; } }
@media (max-width: 991px)  { .footer__heading { font-size: 26px; } }
@media (max-width: 640px)  { .footer__heading { font-size: 22px; } }


/* ---- FAQ block --------------------------------------------------------- */

/* Questions grouped by product, each group labelled, with the standing
   disclaimer underneath. Rows use the same hairline dividers and navy accents
   as the rest of the design. */
/* Matches the section rhythm above and below. The --sp-section token already
   steps down from 96px to 64px at ≤991px, so one rule covers both. */
.faq { padding: var(--sp-section) 0; }

.faq__intro {
  max-width: 760px;
  margin: 0 auto 10px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-600);
}

.faq-group { margin-top: 44px; }

.faq-group__title {
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy-700);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy-800);
}

.faq-list { margin: 0; padding: 0; list-style: none; }
.faq-item { border-bottom: 1px solid var(--line); }

.faq-item__q {
  display: flex;
  width: 100%;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.faq-item__q:hover { color: var(--primary); }

.faq-item__q .nav__chev {
  flex: none;
  width: 13px;
  height: 8px;
  margin-top: 8px;
  color: var(--navy-700);
  transition: transform .3s var(--ease);
}
.faq-item__q[aria-expanded="true"] { color: var(--navy-800); }
.faq-item__q[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

/* Answers open by growing their grid row from 0fr to 1fr. */
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__inner { min-height: 0; overflow: hidden; }
.faq-item__inner > p {
  margin: 0 0 18px;
  padding-right: 40px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-600);
}

.faq__disclaimer {
  margin-top: 48px;
  padding: 26px 30px;
  border-radius: var(--radius-sm);
  background: var(--grey-50);
}
.faq__disclaimer p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-600);
}
.faq__disclaimer p:last-child { margin-bottom: 0; }
.faq__disclaimer a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.faq__sources { margin-top: 26px; }
.faq__sources-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.faq__sources ul { margin: 0; padding-left: 20px; }
.faq__sources li {
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-600);
}

@media (max-width: 640px) {
  .faq-group__title { font-size: 19px; }
  .faq-item__q { font-size: 17px; gap: 16px; padding: 17px 0; }
  .faq-item__inner > p { padding-right: 0; }
  .faq__disclaimer { padding: 22px 20px; }
}


/* ---- Article format ---------------------------------------------------- */

/* Matches the Word template PWS write to: a product kicker above the title,
   a highlighted closing call to action, then the standing disclaimer, source
   and company sign-off. */
.article-kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.article-body .article-cta {
  margin: 38px 0 0;
  padding: 22px 26px;
  border-left: 3px solid var(--navy-700);
  background: var(--grey-50);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--navy-800);
}

.article-foot {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.article-foot p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-400);
}
.article-foot a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.article-foot__sign { margin-bottom: 0; color: var(--ink-600); }


/* ---- Thank-you / confirmation screen ----------------------------------- */

/* Stands alone with no banner above it, so it carries its own top spacing and
   is centred as a single focused column. */
.thanks {
  padding: clamp(56px, 9vw, 104px) 0 var(--sp-section);
  background: linear-gradient(180deg, var(--grey-50) 0%, var(--white) 62%);
  text-align: center;
}

.thanks__head { max-width: 680px; margin: 0 auto; }

.thanks__mark {
  display: inline-flex;
  width: 72px;
  height: 72px;
  margin-bottom: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(14, 23, 38, .10);
  color: var(--primary);
}
.thanks__mark svg { width: 44px; height: 44px; }

.thanks__title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink-900);
}

.thanks__lede {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-600);
}

/* What happens next */
.thanks__next { margin-top: clamp(44px, 6vw, 68px); }

.thanks__next-label {
  margin: 0 0 26px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.thanks__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.thanks-step {
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.thanks-step__num {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--primary);
}

.thanks-step__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
}

.thanks-step__text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-600); }

/* Contact fallback */
.thanks__contact { margin-top: clamp(40px, 5vw, 56px); }

.thanks__contact-label { margin: 0 0 14px; font-size: 16px; color: var(--ink-600); }

.thanks__contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  justify-content: center;
  margin: 0;
}
.thanks__contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-900);
}
.thanks__contact-links a:hover { color: var(--primary); }
.thanks__contact-links svg { width: 19px; height: 19px; color: var(--primary); }

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: clamp(36px, 5vw, 52px);
}

@media (max-width: 860px) {
  .thanks__steps { grid-template-columns: 1fr; max-width: 520px; }
  .thanks-step { padding: 22px 20px 24px; }
}

@media (max-width: 640px) {
  .thanks__lede { font-size: 17px; }
  .thanks__mark { width: 62px; height: 62px; margin-bottom: 20px; }
  .thanks__mark svg { width: 38px; height: 38px; }
  .thanks__actions .btn { width: 100%; justify-content: center; }
}