/* Daly & Black brand palette. Shared by every local page.
   Keep original page typography; the guide applies to colors and surfaces only.
   Semantic error/success colors remain functional. */
body,
body.home {
  --db-blue: #283954;
  --db-blue-rgb: 40 57 84;
  --db-off-white: #edebeb;
  --db-yellow: #f4bc41;
  /* Existing navigation gold-to-amber finish, shared by selected actions. */
  --db-gold-warm: #ef9e25;
  --db-gold-gradient: linear-gradient(135deg, var(--db-yellow), var(--db-gold-warm));
  --db-gold-form-gradient: linear-gradient(
    180deg,
    var(--db-yellow) 0%,
    var(--db-yellow) 16%,
    var(--db-gold-warm) 100%
  );
  --wp--preset--color--primary: var(--db-blue);
  --wp--preset--color--secondary: var(--db-blue);
  --wp--preset--color--secondary-alt: var(--db-blue);
  --wp--preset--color--background: var(--db-off-white);
  --wp--preset--color--foreground: var(--db-blue);
  --wp--preset--color--tertiary: var(--db-yellow);
  --wp--preset--color--orange: var(--db-yellow);
  --wp--preset--gradient--dark-blue-gradient: linear-gradient(var(--db-blue), var(--db-blue));
  --wp--preset--gradient--yellow-gradient: linear-gradient(var(--db-yellow), var(--db-yellow));
  background-color: var(--db-off-white);
}

/* Theme utility classes predate the brand tokens; cover their rendered surfaces. */
body .bg-secondary,
body .bg-secondary\/100,
body .bg-secondary-alt,
body .bg-primary,
body .bg-content-gradient,
body .header.header-scrolled,
body.single-db_team header.header {
  background-color: var(--db-blue);
  background-image: none;
}
body .text-secondary,
body .text-secondary-alt,
body .local-menu-back {
  color: var(--db-blue);
}
body .bg-white {
  background-color: var(--db-off-white);
}
body .from-tertiary,
body .from-orange,
body .to-orange {
  --tw-gradient-from: var(--db-yellow);
  --tw-gradient-to: var(--db-yellow);
}
body .from-secondary,
body .from-primary {
  --tw-gradient-from: var(--db-blue);
  --tw-gradient-to: rgb(var(--db-blue-rgb) / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body .to-secondary,
body .to-primary {
  --tw-gradient-to: var(--db-blue);
}
body .after\:from-secondary::after {
  --tw-gradient-from: var(--db-blue);
  --tw-gradient-to: var(--db-blue);
}
body:not(.home) :is(#content, #colophon) .gform_wrapper .gform_footer .gform_button {
  background: var(--db-blue);
  color: #fff;
}
body
  :is(#content, #colophon)
  .gform_wrapper
  .gform_body
  .gform_fields
  .gfield
  :is(input, select, textarea):focus {
  border-color: var(--db-yellow);
}
body .wp-block-button__link:not(.is-style-outline .wp-block-button__link),
body .local-chat-button,
body #menu-button,
.home .practice-card[data-disclosure]::before {
  background-image: none;
}
body .local-chat-button,
body #menu-button {
  background-color: var(--db-yellow);
  background-image: var(--db-gold-gradient);
  color: var(--db-blue);
}
.home .practice-card[data-disclosure]::before {
  background-color: var(--db-yellow);
}
.home .practice-card[data-disclosure] .practice-card-body {
  background: rgb(var(--db-blue-rgb) / 98%);
}
.home .practice-card[data-disclosure] .practice-card-image::after {
  background: linear-gradient(
    180deg,
    rgb(var(--db-blue-rgb) / 20%),
    transparent 35%,
    rgb(var(--db-blue-rgb) / 95%)
  );
}
.home .hero-block > .wp-block-cover__background {
  background: var(--db-blue) !important;
}

/* Yellow remains an accent; large highlighted faces use the approved off-white. */
body .has-yellow-gradient-gradient-background {
  background: var(--db-off-white) !important;
  color: var(--db-blue);
  border: 1px solid var(--db-yellow);
}
/* The second promise is the gold backing revealed from behind the blue card. */
.home .why-promise--gold {
  background: var(--db-yellow);
  background-image: var(--db-gold-gradient);
  border-color: var(--db-yellow);
}
.home #content .why-secondary-links a,
.home #homepage-contact :is(input:not([type="checkbox"]):not([type="submit"]), select, textarea) {
  background-color: var(--db-off-white);
}
.home #content .why-secondary-links a:hover,
.home #content .why-secondary-links a:focus-visible {
  background-color: var(--db-yellow);
}

/* Local accessibility/contact panels use the approved palette. */
body .local-utility-panel {
  background: var(--db-off-white);
  color: var(--db-blue);
}
body .local-utility-panel h2,
body .local-utility-note {
  color: var(--db-blue);
}
body .local-utility-action,
body .local-accessibility-button {
  background: var(--db-blue);
  color: #fff;
}
/* A constant edge stays visible against navy without changing the hit area. */
body .local-accessibility-button {
  outline: 1px solid var(--db-yellow);
  outline-offset: 0;
}
body .local-accessibility-button:focus-visible {
  outline: 3px solid var(--db-yellow);
  outline-offset: 4px;
}
body .local-accessibility-panel [aria-pressed="true"] {
  border-color: var(--db-blue);
  background: var(--db-blue);
  color: #fff;
}

/* Tablet utilities sit beside the centered 420px quick-action dock.
   Align the 48px control with the 70px dock and keep a 12px horizontal gap. */
@media (min-width: 768px) and (max-width: 1279px) {
  html body .local-accessibility-button[aria-controls="local-accessibility-panel"] {
    inset: auto auto calc(max(12px, env(safe-area-inset-bottom)) + 11px) calc(50% - 270px);
    transform: none;
  }
  html body #local-accessibility-panel {
    inset: auto auto calc(max(12px, env(safe-area-inset-bottom)) + 75px) calc(50% - 270px);
    max-height: calc(100dvh - max(12px, env(safe-area-inset-bottom)) - 91px);
    overflow-y: auto;
    transform: none;
  }
}
body :focus-visible {
  outline-color: var(--db-yellow);
}

/* Keep the approved white lockup on blue when the mobile drawer is open. */
@media (min-width: 1280px) {
  body #off-canvas-menu {
    background-color: transparent;
  }
}
@media (max-width: 1279px) {
  body #off-canvas-menu > div:first-child {
    background: var(--db-blue);
  }
  body.mmenu-open #off-canvas-menu .custom-logo-link {
    display: block;
  }
  body #off-canvas-menu #close-button {
    color: #fff;
  }
}

/* Filled primary actions share the finish. Outline and text links keep their roles. */
body
  #page
  #content
  :is(
    .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
    .why-primary-link,
    .about-button,
    .cr-primary
  ) {
  background-image: var(--db-gold-gradient);
}
.home #page #content .why-secondary-links a:is(:hover, :focus-visible) {
  background-image: var(--db-gold-gradient);
}

/* The same gold finish carries through the angled layers behind cards and media. */
body
  #page
  :is(#content, #colophon)
  :is(
    .is-style-image,
    .practice-card[data-disclosure],
    .news-card-sheet,
    .home-contact-photo,
    .about-story-photo,
    .about-film-play,
    .about-team-frame
  )::before {
  background-image: var(--db-gold-gradient);
}

/* Sitewide chat invitation and first-open/loading shell. The conversation loads on intent. */
body .local-chat-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  isolation: isolate;
  width: 64px;
  min-width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font-family: proxima-nova, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 24px rgb(11 28 47 / 24%);
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms;
}
body .local-chat-button::before {
  position: absolute;
  z-index: -1;
  inset: -1px;
  border: 2px solid rgb(244 188 65 / 80%);
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
}
body .local-chat-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgb(11 28 47 / 32%);
}
body .local-chat-button:active {
  transform: scale(0.97);
}
body .local-chat-button:focus-visible {
  outline: 2px solid var(--db-off-white);
  outline-offset: 4px;
}
.db-chat-launcher-symbol {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.db-chat-launcher-symbol svg {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  transition:
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms;
}
.db-chat-launcher-close {
  opacity: 0;
  transform: rotate(-65deg) scale(0.7);
}
.local-chat-button[aria-expanded="true"] .db-chat-launcher-chat {
  opacity: 0;
  transform: rotate(65deg) scale(0.7);
}
.local-chat-button[aria-expanded="true"] .db-chat-launcher-close {
  opacity: 1;
  transform: none;
}
/* Keep the dock layout; the ring surrounds the Chat icon and label together. */
body .db-mobile-dock > li > [data-chat-open] {
  position: relative;
  isolation: isolate;
  gap: 3px;
}
body .db-mobile-dock > li > [data-chat-open] svg {
  width: 24px;
  height: 24px;
}
body .db-mobile-dock > li > [data-chat-open]::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 52px;
  height: 52px;
  margin: auto;
  border: 1.5px solid rgb(244 188 65 / 80%);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
}
/* Connect the invitation hover/focus to its launcher without moving the popup. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(.local-reduce-motion) .local-chat-button:is(:hover, :focus-visible):not(:active),
  body:not(.local-reduce-motion):has(
      > .db-chat-invite:not([hidden]):not([inert]):is(:hover, :focus-within)
    )
    .local-chat-button:not(:active) {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 28px rgb(11 28 47 / 32%);
  }
  body:not(.local-reduce-motion) .db-mobile-dock > li > [data-chat-open] svg {
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  body:not(.local-reduce-motion):has(
      > .db-chat-invite:not([hidden]):not([inert]):is(:hover, :focus-within)
    )
    .db-mobile-dock
    > li
    > [data-chat-open]
    svg {
    transform: scale(1.12);
  }
}
@keyframes db-chat-ring {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  12% {
    opacity: 0.75;
    transform: scale(1.04);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.local-reduce-motion) .local-chat-button::before,
  body:not(.local-reduce-motion) .db-mobile-dock > li > [data-chat-open]::before {
    animation: db-chat-ring 2.8s ease-out infinite;
  }
}
body .local-chat-button[aria-expanded="true"]::before,
body .db-mobile-dock > li > [data-chat-open][aria-expanded="true"]::before {
  animation: none;
  opacity: 0;
}
#local-chat-panel.local-utility-panel {
  right: 20px;
  bottom: calc(104px + var(--chat-keyboard-offset, 0px));
  width: min(420px, calc(100vw - 32px));
  height: min(680px, calc(var(--chat-viewport-height, 100dvh) - 128px));
  min-height: 0;
  padding: 24px;
  border: 0;
  border-radius: 16px;
  color: var(--db-blue);
  background: var(--db-off-white);
  box-shadow: 0 24px 64px rgb(9 23 39 / 38%);
  font-family: proxima-nova, ui-sans-serif, system-ui, sans-serif;
  transform-origin: bottom right;
}
#local-chat-panel.local-utility-panel[hidden] {
  display: none;
}
#local-chat-panel > .local-panel-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  top: 14px;
  right: 14px;
  color: var(--db-blue);
}
#local-chat-panel > h2 {
  max-width: 10ch;
  margin: 24px 0;
  color: var(--db-blue);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
}
#local-chat-panel .local-chat-load-status {
  color: #526176;
  font-size: 16px;
}
#local-chat-panel > .local-utility-action {
  color: var(--db-blue);
  background: var(--db-gold-gradient);
}
@media (max-width: 1279px) {
  body .local-chat-button {
    display: none;
  }
}
@media (max-width: 575px) {
  #local-chat-panel.local-utility-panel {
    width: calc(100vw - 24px);
    right: 12px;
  }
}
@media (max-height: 520px) {
  #local-chat-panel.local-utility-panel {
    height: calc(var(--chat-viewport-height, 100dvh) - 24px);
    bottom: calc(12px + var(--chat-keyboard-offset, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  body .local-chat-button,
  .db-chat-launcher-symbol svg {
    transition: none;
  }
}
body.local-reduce-motion .local-chat-button,
body.local-reduce-motion .db-chat-launcher-symbol svg {
  transition: none;
}
@media print {
  #local-chat-panel,
  body .local-chat-button {
    display: none !important;
  }
}

/* Invitation layer 101 sits above the existing floating controls (100), below dialogs. */
.db-chat-invite {
  --chat-invite-surface: var(--db-off-white);
  --chat-invite-edge: rgb(40 57 84 / 16%);
  position: fixed;
  z-index: 101;
  width: min(264px, calc(100vw - 32px));
  border: 1px solid var(--chat-invite-edge);
  border-radius: 16px;
  color: var(--db-blue);
  background: var(--chat-invite-surface);
  box-shadow: 0 12px 32px rgb(9 23 39 / 30%);
  font-family: proxima-nova, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  transform-origin: var(--chat-invite-tail, 50%) calc(100% + 10px);
}
.db-chat-invite[hidden] {
  display: none;
}
.db-chat-invite::after {
  position: absolute;
  left: calc(var(--chat-invite-tail, 50%) - 7px);
  bottom: -8px;
  width: 14px;
  height: 14px;
  border: solid var(--chat-invite-edge);
  border-width: 0 1px 1px 0;
  border-radius: 0 0 2px;
  content: "";
  pointer-events: none;
  background: var(--chat-invite-surface);
  transform: rotate(45deg);
}
.db-chat-invite button {
  font: inherit;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.db-chat-invite-open {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 80px;
  padding: 17px 48px 17px 18px;
  border-radius: inherit;
  text-align: left;
}
.db-chat-invite-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.db-chat-invite-action {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--db-blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.db-chat-invite-action svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.db-chat-invite-open:hover .db-chat-invite-action svg {
  transform: translate(2px, -2px);
}
.db-chat-invite .db-chat-invite-dismiss {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color 180ms;
}
.db-chat-invite-dismiss svg {
  width: 18px;
  height: 18px;
}
.db-chat-invite .db-chat-invite-dismiss:hover {
  background: rgb(40 57 84 / 8%);
}
.db-chat-invite button:focus-visible {
  outline: 2px solid var(--db-blue);
  outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
  .db-chat-invite svg,
  .db-chat-invite button {
    transition: none;
  }
}
body.local-reduce-motion .db-chat-invite svg,
body.local-reduce-motion .db-chat-invite button {
  transition: none;
}
@media print {
  .db-chat-invite {
    display: none !important;
  }
}
