/* ============================================================
   CUSTOM CSS
   Site-specific styles — add custom rules here.
   Loaded after style.css and overrides.css.
   ============================================================ */

.site-info {
  display: none;
}

.menu-footer-utility-menu-container ul {
  display: flex;
  flex-wrap: wrap;
}

.menu-footer-utility-menu-container .menu-item:not(:last-of-type) {
  margin-right: 1rem;
}

.widget.widget_media_image {
  text-align: right;
}

.footer-legal-text .wp-block-paragraph:last-of-type,
.footer-logo-copy .wp-block-paragraph {
  font-size: 12px;
  font-weight: 400;
}

.footer-logo-copy {
  text-align: right;
}

.footer-logo-copy .wp-block-image {
  padding-bottom: 1rem;
}

/* ============================================================
   SIGNING FORM — status banners
   Styles the DocuSign signing form's confirmation (#signing-message)
   and error (#signing-error) states. Figma node 8429:23529.

   The form fields themselves are already styled in style.css
   ("forms" block, .signing-* and .disclosure-* rules) — do not
   duplicate that here. These rules are scoped to the two IDs so
   nothing else on the site is affected.

   OVERRIDES THE PLUGIN: priovant-patient-forms ships its own
   css/patient-forms.css which styles #signing-message as a plain
   white box (8px radius, grey border, box-shadow, centred text)
   and .signing-error as a small red notice. Both enqueue at
   priority 20 with no deps, so the theme's custom.css prints
   after it. The plugin's properties are reset explicitly below
   rather than relying on that order.

   Both divs ship with an inline style="display: none" that the
   form's JS flips to display:block on submit (see the plugin's
   js/signing-form.js). Inline styles beat external CSS, so layout
   is applied via :not([style*="display: none"]) — it matches only
   once the JS has swapped the inline value to block.

   The JS injects a bare <p> for success and plain textContent for
   errors — no heading element — so the heading rules below only
   take effect if that markup ever gains one. The banner is styled
   to read correctly either way.

   ACCESSIBILITY NOTE for whoever owns the injecting JS: these
   banners appear without a page reload, so they should carry
   role="status" and aria-live="polite" to be announced by screen
   readers. Not fixable from CSS.
   ============================================================ */

#signing-message:not([style*="display: none"]):not([style*="display:none"]),
#signing-error:not([style*="display: none"]):not([style*="display:none"]) {
  --signing-banner-icon: 80px;

  /* Grid, not flex: the JS may inject several siblings (a heading and
     a paragraph) with no wrapper element. Flex would place each in its
     own column; grid keeps the icon in column 1 and stacks every text
     child down column 2.

     !important is required here and ONLY here: the form's JS sets an
     inline style="display: block", and inline styles beat external CSS
     on specificity alone. The :not() guards above keep this from
     applying while the banner is still hidden. */
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: center;
  column-gap: 28px;
  row-gap: 2px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 250px;
  margin-bottom: 0;
  padding: 40px;
  border: 0;
  border-radius: 40px 8px 40px 8px;
  box-shadow: none;
  text-align: left;
  font-family: var(--gp-font--body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-dark-gray);
}

/* Icon tile — brand small-radius shape */
#signing-message::before,
#signing-error::before {
  content: "";
  /* Column 1, spanning every text row so it stays vertically centred
     however many children the JS injects. */
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: var(--signing-banner-icon, 80px);
  height: var(--signing-banner-icon, 80px);
  border-radius: 20px 4px 20px 4px;
  background-color: var(--signing-banner-tile, var(--color-light-blue));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 42px;
  z-index: 1;
}

#signing-message::before {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 38.5835 48.0843' fill='none' xmlns='http://www.w3.org/2000/svg'><g stroke='%2300529B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M23.8022 10.5593V1.25H5.57C3.18448 1.25 1.25 3.20506 1.25 5.61596V42.4683C1.25 44.8792 3.18448 46.8343 5.57 46.8343H33.0135C35.3991 46.8343 37.3335 44.8792 37.3335 42.4683V14.9253H28.1222C25.7367 14.9253 23.8022 12.9702 23.8022 10.5593Z' fill='none'/><path d='M23.8018 1.25L37.3331 14.9253'/><path d='M6.84785 22.0974L9.43884 24.2044L13.0272 18.3392'/><path d='M15.9638 21.2717H31.179'/><path d='M6.84785 30.5253L9.43884 32.6323L13.0272 26.7671'/><path d='M15.9638 29.6996H31.179'/><path d='M6.84785 38.9583L9.43884 41.0603L13.0272 35.1951'/><path d='M15.9638 38.1276H31.179'/></g></svg>");
}

/* Success — white card with the two-tone corner wave.
   Inverted from the earlier light-blue card: a blue tile on a blue
   card read as blue-on-blue, so the card is white and the icon tile
   carries the light blue instead (Figma 8481:23907 / 8481:23922). */
#signing-message:not([style*="display: none"]):not([style*="display:none"]) {
  background-color: var(--color-white);
}

/* Corner wave. Sized as a proportion of the card (the Figma frame is
   845px wide with a 293px wave ≈ 35%) so it scales instead of
   swallowing narrower containers. Aspect ratio is preserved via
   the 293:96 ratio baked into the clamped height. */
#signing-message::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35%;
  min-width: 160px;
  max-width: 293px;
  aspect-ratio: 293 / 96;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 293.5 95.9603' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M293.019 2.14863C181.022 -16.8127 135.318 95.9602 50.561 95.9602H293.5L293.019 2.1402V2.14863Z' fill='%2300529B'/><path opacity='0.7' d='M0 95.9603C9.69564 79.503 41.7587 26.7672 172.034 49.2273C243.335 61.5197 266.723 2.49437 293.027 2.49437V95.9519H0V95.9603Z' fill='%23358CCB'/></svg>");
}

/* Error — coral variant, no wave.
   The div carries class="signing-error" too, which the plugin
   styles as a small red notice; these reset it. */
#signing-error:not([style*="display: none"]):not([style*="display:none"]) {
  /* White card like the success banner, with the coral carried by the
     tile and a hairline border instead of a tinted background — a
     translucent wash turned muddy against the page's light blue. */
  --signing-banner-tile: rgba(242, 106, 56, 0.12);

  background: var(--color-white);
  box-shadow: inset 0 0 0 1px rgba(242, 106, 56, 0.35);
  color: var(--color-dark-gray);
  /* Errors are short single-line messages — size to content rather
     than reserving the success banner's full 250px. */
  min-height: 0;
  padding: 28px 32px;
  margin-bottom: 16px;
}

#signing-error::before {
  background-size: 40px 40px;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='24' cy='24' r='21' stroke='%23F26A38' stroke-width='3'/><path d='M24 13V27' stroke='%23F26A38' stroke-width='3.5' stroke-linecap='round'/><circle cx='24' cy='34.5' r='2.25' fill='%23F26A38'/></svg>");
}

/* Text column — sits above the wave.
   The JS may inject bare text or full markup, so this wraps
   whatever arrives without depending on a wrapper element. */
#signing-message > *,
#signing-error > * {
  grid-column: 2;
  position: relative;
  z-index: 1;
  max-width: 499px;
}

#signing-message > *:first-child,
#signing-error > *:first-child {
  margin-top: 0;
}

#signing-message > *:last-child,
#signing-error > *:last-child {
  margin-bottom: 0;
}

#signing-message h1,
#signing-message h2,
#signing-message h3,
#signing-message h4,
#signing-message strong,
#signing-message b,
#signing-error h1,
#signing-error h2,
#signing-error h3,
#signing-error h4,
#signing-error strong,
#signing-error b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--gp-font--headings);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

#signing-message h1,
#signing-message h2,
#signing-message h3,
#signing-message h4,
#signing-message strong,
#signing-message b {
  color: var(--color-deep-blue);
}

#signing-error h1,
#signing-error h2,
#signing-error h3,
#signing-error h4,
#signing-error strong,
#signing-error b {
  color: var(--color-coral);
}

/* :not(#\0) adds ID-level specificity so these beat the plugin's
   own "#signing-message p" rule without resorting to !important. */
#signing-message:not(#\0) p,
#signing-error:not(#\0) p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-dark-gray);
}

/* Mobile — stack the icon above the text */
@media (max-width: 600px) {
  #signing-message:not([style*="display: none"]):not([style*="display:none"]),
  #signing-error:not([style*="display: none"]):not([style*="display:none"]) {
    --signing-banner-icon: 60px;

    /* Single centred column: icon on row 1, text stacked beneath.
       Matches the Figma mobile variant (8481:23922). */
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    text-align: center;
    column-gap: 0;
    row-gap: 13px;
    min-height: 0;
    padding: 28px 20px;
    border-radius: 24px 8px 24px 8px;
    font-size: 16px;
  }

  #signing-message::before,
  #signing-error::before {
    grid-column: 1;
    grid-row: auto;
  }

  #signing-message > *,
  #signing-error > * {
    grid-column: 1;
    max-width: 100%;
    text-align: center;
  }

  /* Pull heading and body back to the 2px design gap — the 13px row-gap
     is meant to separate the icon from the text block, not the lines
     within it. */
  #signing-message > * + *,
  #signing-error > * + * {
    margin-top: -11px;
  }

  #signing-message::before,
  #signing-error::before {
    background-size: 24px 30px;
  }

  #signing-error::before {
    background-size: 28px 28px;
  }

  /* Wave sits lower and lighter on mobile, and the card gains bottom
     padding so the last line of text clears it rather than sitting
     on top of the artwork. */
  #signing-message::after {
    width: 70%;
    min-width: 0;
    opacity: 0.45;
  }

  #signing-message:not([style*="display: none"]):not([style*="display:none"]) {
    padding-bottom: 56px;
  }

  #signing-message h1,
  #signing-message h2,
  #signing-message h3,
  #signing-message h4,
  #signing-message strong,
  #signing-message b,
  #signing-error h1,
  #signing-error h2,
  #signing-error h3,
  #signing-error h4,
  #signing-error strong,
  #signing-error b {
    font-size: 20px;
  }

  #signing-message:not(#\0) p,
  #signing-error:not(#\0) p {
    font-size: 16px;
  }
}