/*
 * PDI UI system v1.0
 * Shared visual and interaction layer for the portable PDI PHP package.
 * Loaded after page, header, and layout styles to standardize common controls
 * without changing page content, PHP logic, routes, or integrations.
 */

:root {
  --pdi-primary-blue: #233c98;
  --pdi-deep-navy: #071f3d;
  --pdi-secondary-navy: #0a2540;
  --pdi-cta-blue: #0b6bcb;
  --pdi-cta-hover: #084e98;
  --pdi-text-grey: #334155;
  --pdi-medium-grey: #51607a;
  --pdi-light-grey: #f5f8fc;
  --pdi-border-grey: #e2e8f2;
  --pdi-footer-grey: #303030;
  --pdi-white: #ffffff;
  --pdi-orange: #f5a619;
  --pdi-success: #06663f;
  --pdi-warning: #f59e0b;
  --pdi-error: #e11d48;

  --pdi-container: 1320px;
  --pdi-gutter: clamp(16px, 3vw, 28px);
  --pdi-radius-sm: 8px;
  --pdi-radius-md: 12px;
  --pdi-radius-lg: 18px;
  --pdi-shadow-sm: 0 4px 14px rgba(7, 31, 61, 0.08);
  --pdi-shadow-md: 0 14px 34px rgba(7, 31, 61, 0.13);
  --pdi-shadow-lg: 0 24px 60px rgba(7, 31, 61, 0.17);
  --pdi-focus-ring: 0 0 0 3px rgba(245, 166, 25, 0.42);
  --pdi-transition-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
  --pdi-transition: 220ms cubic-bezier(0.2, 0, 0, 1);
  --pdi-gradient-primary: linear-gradient(135deg, #233c98 0%, #0b6bcb 100%);
  --pdi-gradient-navy: linear-gradient(135deg, #071f3d 0%, #233c98 100%);
  --pdi-gradient-soft: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  color: var(--pdi-text-grey);
  background-color: var(--pdi-white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

main,
.body-container,
.body-container-wrapper {
  isolation: isolate;
}

main :where(.row, .row-fluid, .d-flex, .cards, .grid) > *,
.body-container :where(.row, .row-fluid, .d-flex, .cards, .grid) > * {
  min-width: 0;
}

main :where(img, svg, video, canvas),
.body-container :where(img, svg, video, canvas) {
  max-width: 100%;
}

main img,
.body-container img {
  height: auto;
}

main :where(h1, h2, h3, h4, h5, h6),
.body-container :where(h1, h2, h3, h4, h5, h6) {
  color: var(--pdi-deep-navy);
  text-wrap: balance;
  scroll-margin-top: 118px;
}

main :where(p, li),
.body-container :where(p, li) {
  text-wrap: pretty;
}

main :where(a:not([class]), .content a:not([class]), .txt-content a:not([class])) {
  color: var(--pdi-cta-blue);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--pdi-transition-fast), text-decoration-color var(--pdi-transition-fast);
}

main :where(a:not([class]), .content a:not([class]), .txt-content a:not([class])):hover {
  color: var(--pdi-cta-hover);
}

/* A visible, consistent focus treatment for keyboard users. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--pdi-orange) !important;
  outline-offset: 3px !important;
}

:where(button, input, select, textarea, summary, a[href]) {
  -webkit-tap-highlight-color: rgba(35, 60, 152, 0.16);
}

/* Shared buttons and CTAs. Existing component-specific dimensions remain. */
:where(
  .btn,
  .cta-button,
  .cta_button,
  .sbtn,
  .sfx-btn,
  .dg-btn,
  .addr-btn,
  .secondry-button,
  .pdi-form-submit,
  .hs-button,
  input[type="submit"],
  button[type="submit"]
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--pdi-radius-sm);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  vertical-align: middle;
  cursor: pointer;
  transition:
    color var(--pdi-transition),
    background-color var(--pdi-transition),
    border-color var(--pdi-transition),
    box-shadow var(--pdi-transition),
    transform var(--pdi-transition);
}

:where(
  .btn--primary,
  .btn-primary,
  .dg-btn-primary,
  .cta-button,
  .cta_button,
  .sfx-btn,
  .pdi-form-submit,
  .hs-button.primary,
  form input[type="submit"],
  form button[type="submit"]
) {
  color: var(--pdi-white) !important;
  border-color: var(--pdi-cta-blue) !important;
  background: var(--pdi-gradient-primary) !important;
  box-shadow: 0 8px 20px rgba(11, 107, 203, 0.22);
}

:where(
  .btn--primary,
  .btn-primary,
  .dg-btn-primary,
  .cta-button,
  .cta_button,
  .sfx-btn,
  .pdi-form-submit,
  .hs-button.primary,
  form input[type="submit"],
  form button[type="submit"]
):is(:hover, :focus-visible) {
  color: var(--pdi-white) !important;
  border-color: var(--pdi-cta-hover) !important;
  background: linear-gradient(135deg, #1e368a 0%, #084e98 100%) !important;
  box-shadow: 0 12px 26px rgba(8, 78, 152, 0.28);
  transform: translateY(-2px);
}

:where(.btn--ghost, .btn-ghost, .secondry-button) {
  color: var(--pdi-primary-blue) !important;
  border-color: var(--pdi-primary-blue) !important;
  background: var(--pdi-white) !important;
}

:where(.btn--ghost, .btn-ghost, .secondry-button):is(:hover, :focus-visible) {
  color: var(--pdi-white) !important;
  border-color: var(--pdi-primary-blue) !important;
  background: var(--pdi-primary-blue) !important;
  box-shadow: var(--pdi-shadow-sm);
  transform: translateY(-1px);
}

:where(button, input[type="submit"], input[type="button"], .btn, .cta-button)[disabled],
:where(button, input[type="submit"], input[type="button"], .btn, .cta-button)[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.58 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Reusable card surfaces. No margin changes, so hover does not move siblings. */
:where(
  .card,
  .dg-card,
  .scope-card,
  .sfx-card,
  .sfx-fitcard,
  .sfx-lcard,
  .scard,
  .item_wrap,
  .icon-box,
  .text-content-box,
  .contact-item,
  .fact,
  .step,
  .box-quote,
  .privacy-contact__card,
  .pdi-thank-you__card
) {
  border-radius: var(--pdi-radius-md);
  transition:
    border-color var(--pdi-transition),
    box-shadow var(--pdi-transition),
    transform var(--pdi-transition),
    background-color var(--pdi-transition);
  transform: translateZ(0);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .card,
    .dg-card,
    .scope-card,
    .sfx-card,
    .sfx-fitcard,
    .sfx-lcard,
    .scard,
    .item_wrap,
    .icon-box,
    .text-content-box,
    .contact-item,
    .fact,
    .step,
    .box-quote,
    .privacy-contact__card,
    .pdi-thank-you__card
  ):hover {
    border-color: rgba(35, 60, 152, 0.28);
    box-shadow: var(--pdi-shadow-md);
    transform: translateY(-3px);
  }

  main a:has(> img):hover img,
  .body-container a:has(> img):hover img {
    transform: scale(1.015);
  }
}

main a:has(> img) img,
.body-container a:has(> img) img {
  transition: transform var(--pdi-transition), filter var(--pdi-transition);
}

/* Subtle approved gradients for soft and featured areas. */
:where(.section--soft, .soft-section) {
  background: var(--pdi-gradient-soft);
}

:where(.cta-box, .ctabox, .sfx-cosell-cta) {
  border-radius: var(--pdi-radius-lg);
}

/* Forms: consistent size, alignment, focus, and status colors. */
form :where(label, legend) {
  color: var(--pdi-secondary-navy);
  font-weight: 650;
}

form :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select,
  textarea
) {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  color: var(--pdi-deep-navy);
  background: var(--pdi-white);
  border: 1px solid #aab6c8;
  border-radius: var(--pdi-radius-sm);
  box-shadow: 0 1px 2px rgba(7, 31, 61, 0.03);
  font: inherit;
  transition: border-color var(--pdi-transition-fast), box-shadow var(--pdi-transition-fast), background-color var(--pdi-transition-fast);
}

form textarea {
  min-height: 128px;
  resize: vertical;
}

form :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select,
  textarea
):hover {
  border-color: var(--pdi-medium-grey);
}

form :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select,
  textarea
):focus {
  border-color: var(--pdi-cta-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(11, 107, 203, 0.18) !important;
}

form :where(input, select, textarea)::placeholder {
  color: #68758a;
  opacity: 1;
}

form :where(input, select, textarea):user-invalid {
  border-color: var(--pdi-error) !important;
}

:where(.wpcf7-not-valid-tip, .pdi-form-alert--error, .error, .field-error) {
  color: #9f1239;
}

:where(.wpcf7 form.sent .wpcf7-response-output, .pdi-form-alert--status, .success, .form-success) {
  border-color: rgba(6, 102, 63, 0.35);
  background: #effaf5;
  color: var(--pdi-success);
}

/* Accordions and native details controls. */
main details,
.body-container details {
  margin-block: 12px;
  border: 1px solid var(--pdi-border-grey);
  border-radius: var(--pdi-radius-md);
  background: var(--pdi-white);
  box-shadow: 0 2px 8px rgba(7, 31, 61, 0.04);
  overflow: clip;
  transition: border-color var(--pdi-transition), box-shadow var(--pdi-transition);
}

main details[open],
.body-container details[open] {
  border-color: rgba(35, 60, 152, 0.3);
  box-shadow: var(--pdi-shadow-sm);
}

main summary,
.body-container summary {
  min-height: 48px;
  padding: 14px 48px 14px 18px;
  color: var(--pdi-deep-navy);
  font-weight: 700;
  cursor: pointer;
  position: relative;
  list-style: none;
  transition: color var(--pdi-transition-fast), background-color var(--pdi-transition-fast);
}

main summary::-webkit-details-marker,
.body-container summary::-webkit-details-marker {
  display: none;
}

main summary::after,
.body-container summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--pdi-primary-blue);
  font-size: 22px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform var(--pdi-transition);
}

main details[open] > summary::after,
.body-container details[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
}

main summary:is(:hover, :focus-visible),
.body-container summary:is(:hover, :focus-visible) {
  background: var(--pdi-light-grey);
  color: var(--pdi-primary-blue);
}

main details > :not(summary),
.body-container details > :not(summary) {
  margin-inline: 18px;
}

/* Tabs and tab-like navigation. */
:where([role="tablist"], .tabs, .tab-list) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--pdi-border-grey);
}

:where([role="tab"], .tab) {
  min-height: 44px;
  color: var(--pdi-medium-grey);
  border-radius: var(--pdi-radius-sm) var(--pdi-radius-sm) 0 0;
  transition: color var(--pdi-transition-fast), background-color var(--pdi-transition-fast), box-shadow var(--pdi-transition-fast);
}

:where([role="tab"][aria-selected="true"], .tab.active, .tab.is-active) {
  color: var(--pdi-primary-blue);
  background: var(--pdi-light-grey);
  box-shadow: inset 0 -3px 0 var(--pdi-primary-blue);
}

/* Responsive table wrapper inserted by pdi-ui-system.js. */
.pdi-table-scroll {
  width: 100%;
  max-width: 100%;
  margin-block: 20px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--pdi-border-grey);
  border-radius: var(--pdi-radius-md);
  background: var(--pdi-white);
  box-shadow: var(--pdi-shadow-sm);
}

.pdi-table-scroll:focus-visible {
  outline: 3px solid var(--pdi-orange);
  outline-offset: 3px;
}

.pdi-table-scroll > table {
  width: 100%;
  min-width: 640px;
  margin: 0 !important;
  border-collapse: collapse;
}

.pdi-table-scroll :where(th, td) {
  padding: 13px 16px;
  border-bottom: 1px solid var(--pdi-border-grey);
  text-align: left;
  vertical-align: top;
}

.pdi-table-scroll th {
  color: var(--pdi-deep-navy);
  background: var(--pdi-light-grey);
  font-weight: 750;
}

.pdi-table-scroll tbody tr:last-child > * {
  border-bottom: 0;
}

.pdi-table-scroll tbody tr {
  transition: background-color var(--pdi-transition-fast);
}

.pdi-table-scroll tbody tr:hover {
  background: #f9fbfe;
}

/* Shared header refinements; preserve the existing logo and menu geometry. */
#pdi-common-header .pdi-site-header {
  border-bottom: 1px solid rgba(226, 232, 242, 0.86) !important;
  transition: box-shadow var(--pdi-transition), border-color var(--pdi-transition), background-color var(--pdi-transition) !important;
}

#pdi-common-header.pdi-is-scrolled .pdi-site-header {
  border-bottom-color: var(--pdi-border-grey) !important;
  box-shadow: 0 8px 28px rgba(7, 31, 61, 0.09) !important;
}

#pdi-common-header .pdi-nav__top-link,
#pdi-common-header .pdi-nav__toggle--top {
  position: relative !important;
  transition: color var(--pdi-transition-fast), background-color var(--pdi-transition-fast) !important;
}

#pdi-common-header .pdi-nav__top-link::after,
#pdi-common-header .pdi-nav__toggle--top::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 0;
  left: 1px;
  height: 3px;
  border-radius: 999px;
  background: var(--pdi-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--pdi-transition);
  pointer-events: none;
}

#pdi-common-header .pdi-nav__top-link:is(:hover, :focus-visible)::after,
#pdi-common-header .pdi-nav__toggle--top:is(:hover, :focus-visible)::after,
#pdi-common-header .pdi-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

#pdi-common-header .pdi-nav__submenu {
  background-clip: padding-box !important;
  border: 2px solid var(--pdi-orange) !important;
  border-top-width: 4px !important;
  border-radius: 10px !important;
  box-shadow: var(--pdi-shadow-lg), inset 0 0 0 1px rgba(245, 166, 25, 0.16) !important;
}

#pdi-common-header .pdi-nav__item--dropdown:hover > .pdi-nav__submenu,
#pdi-common-header .pdi-nav__item--dropdown:focus-within > .pdi-nav__submenu,
#pdi-common-header .pdi-nav__item--dropdown.is-open > .pdi-nav__submenu {
  animation: pdi-menu-enter var(--pdi-transition-fast) both;
}

#pdi-common-header .pdi-nav__submenu :where(a, .pdi-nav__toggle, .pdi-nav__link-row) {
  transition: color var(--pdi-transition-fast), background-color var(--pdi-transition-fast) !important;
}

@keyframes pdi-menu-enter {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shared footer refinements. */
#pdi-common-footer .pdi-site-footer {
  background: var(--pdi-footer-grey) !important;
}

#pdi-common-footer .pdi-site-footer__links a,
#pdi-common-footer .pdi-site-footer__social a {
  transition: color var(--pdi-transition-fast), transform var(--pdi-transition-fast) !important;
}

@media (hover: hover) and (pointer: fine) {
  #pdi-common-footer .pdi-site-footer__links a:hover {
    transform: translateX(3px);
  }

  #pdi-common-footer .pdi-site-footer__social a:hover {
    transform: translateY(-2px);
  }
}

/* Keep interactive controls usable and unclipped on smaller screens. */
@media (max-width: 1024px) {
  :root {
    --pdi-gutter: 20px;
  }

  :where(.cta-row, .cta, .ctabox, .cta-box) :where(.btn, .cta-button, .sfx-btn) {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 767px) {
  :root {
    --pdi-gutter: 16px;
    --pdi-radius-lg: 14px;
  }

  main :where(h1, h2, h3),
  .body-container :where(h1, h2, h3) {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  :where(.btn, .cta-button, .cta_button, .sfx-btn, .dg-btn, .pdi-form-submit) {
    min-height: 46px;
  }

  form :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    select,
    textarea
  ) {
    font-size: 16px; /* prevents unwanted iOS form zoom */
  }

  .pdi-table-scroll > table {
    min-width: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  :where(
    .btn,
    .cta-button,
    .cta_button,
    .sfx-btn,
    .dg-btn,
    .card,
    .dg-card,
    .scope-card,
    .sfx-card,
    .scard,
    .item_wrap,
    .icon-box,
    .text-content-box,
    .contact-item,
    .fact,
    .step,
    .box-quote
  ):is(:hover, :focus-visible) {
    transform: none !important;
  }
}


/* Header-to-content rhythm: keep the first page section close to the global
 * navigation without changing spacing between later sections. */
@media (min-width: 768px) {
  main > section:first-of-type:is(.hero, .dg-hero, .pdi-contact-hero, .privacy-hero, .ph),
  main > .body-container:first-child > .row-fluid-wrapper:first-child .dnd-section:first-child,
  .body-wrapper > main:first-of-type .body-container:first-child > .row-fluid-wrapper:first-child .dnd-section:first-child,
  #dnd_area-module-2.banner-with-form,
  #dnd_area-module-2.banner-video,
  #widget_1740066729284.general-main,
  #widget_1740389926632.banner-video {
    padding-top: clamp(24px, 2.25vw, 38px) !important;
  }
}

@media (max-width: 767px) {
  main > section:first-of-type:is(.hero, .dg-hero, .pdi-contact-hero, .privacy-hero, .ph),
  main > .body-container:first-child > .row-fluid-wrapper:first-child .dnd-section:first-child,
  .body-wrapper > main:first-of-type .body-container:first-child > .row-fluid-wrapper:first-child .dnd-section:first-child,
  #dnd_area-module-2.banner-with-form,
  #dnd_area-module-2.banner-video,
  #widget_1740066729284.general-main,
  #widget_1740389926632.banner-video {
    padding-top: 18px !important;
  }
}