/* One interaction pattern for actions. Animate the control, never its label. */
:root {
  --button-motion: 180ms cubic-bezier(.2,.7,.2,1);
  --button-shadow: 0 5px 16px rgb(0 0 0 / .18);
  --button-edge: 0 0 0 1px rgb(192 154 59 / .45);
  --button-inset-block: .75rem;
  --button-inset-inline: 1.25rem;
}
/* Padding belongs to the control and stays the same on hover and focus. */
:root :is(.button-primary, .button-secondary, .header-cta, .inner-action,
  .mobile-fixed-cta, .inner-mobile-cta, .diagnostic-form button,
  .inner-site .button-primary, .inner-site .tier-card a) {
  min-height: 48px;
  max-width: 100%;
  padding: var(--button-inset-block) var(--button-inset-inline);
  gap: .75rem;
  line-height: 1.4;
  white-space: normal;
}
:root :is(.icon-button, .language-link, .inner-site .inner-theme-toggle,
  .inner-site .inner-language) {
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 42px;
  min-height: 42px;
  padding: .5rem;
  line-height: 1;
}
:root :is(.desktop-nav a, .mobile-nav a, .inner-nav a,
  .inner-mobile-menu summary, .site-footer nav a, .inner-footer nav a) {
  min-height: 44px;
  padding: .5rem .625rem;
}
:root :is(.desktop-nav, .inner-nav) { gap: .25rem; }
:root[data-theme="light"] {
  --button-shadow: 0 5px 16px rgb(0 0 0 / .12);
}
:root :is(button, summary, input[type="submit"], input[type="button"], [role="button"],
  .button-primary, .button-secondary, .header-cta, .icon-button, .language-link,
  .inner-action, .inner-theme-toggle, .inner-language, .inner-mobile-menu summary,
  .mobile-fixed-cta, .inner-mobile-cta, .admin-secondary, .admin-google-button,
  .desktop-nav a, .mobile-nav a, .inner-nav a) {
  transition: translate var(--button-motion), box-shadow var(--button-motion),
    border-color var(--button-motion);
}
:root :is(.desktop-nav a, .mobile-nav a, .inner-nav a, .inner-language) {
  display: inline-flex;
  align-items: center;
}

/* Fixed foreground/background pairs also override older contextual link rules. */
:root[data-theme] :is(.button-primary, .header-cta, .mobile-fixed-cta, .inner-mobile-cta) {
  color: #050505 !important;
  background: var(--gold-fill, #c09a3b) !important;
  border-color: var(--gold-fill, #c09a3b) !important;
  filter: none !important;
}
:root[data-theme] :is(.button-primary, .header-cta, .mobile-fixed-cta, .inner-mobile-cta) * {
  color: inherit !important;
}
:root[data-theme] :is(.button-secondary, .icon-button, .language-link,
  .inner-action, .inner-theme-toggle, .inner-language),
:root[data-theme] .inner-site :is(.button-secondary, .inner-action,
  .inner-theme-toggle, .inner-language) {
  color: var(--text) !important;
  background: transparent !important;
}
:root[data-theme] :is(.desktop-nav, .mobile-nav) a,
:root[data-theme] .inner-site .inner-header .inner-nav a {
  color: var(--text) !important;
}

@media (hover: hover) and (pointer: fine) {
  :root :is(button, summary, input[type="submit"], input[type="button"], [role="button"],
    .button-primary, .button-secondary, .header-cta, .icon-button, .language-link,
    .inner-action, .inner-theme-toggle, .inner-language, .inner-mobile-menu summary,
    .mobile-fixed-cta, .inner-mobile-cta, .admin-secondary, .admin-google-button,
    .desktop-nav a, .mobile-nav a, .inner-nav a):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -2px;
    box-shadow: var(--button-edge), var(--button-shadow);
  }
}
:root :is(button, summary, input[type="submit"], input[type="button"], [role="button"],
  .button-primary, .button-secondary, .header-cta, .icon-button, .language-link,
  .inner-action, .inner-theme-toggle, .inner-language, .inner-mobile-menu summary,
  .mobile-fixed-cta, .inner-mobile-cta, .admin-secondary, .admin-google-button,
  .desktop-nav a, .mobile-nav a, .inner-nav a):focus-visible {
  outline: 2px solid var(--focus, #c09a3b);
  outline-offset: 4px;
  box-shadow: var(--button-edge), var(--button-shadow);
}
:root :is(button, summary, input[type="submit"], input[type="button"], [role="button"],
  .button-primary, .button-secondary, .header-cta, .icon-button, .language-link,
  .inner-action, .inner-theme-toggle, .inner-language, .inner-mobile-menu summary,
  .mobile-fixed-cta, .inner-mobile-cta, .admin-secondary, .admin-google-button,
  .desktop-nav a, .mobile-nav a, .inner-nav a):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 0;
  box-shadow: var(--button-edge);
}
/* Bottom actions retain their position and use the same edge and shadow. */
:root :is(.mobile-fixed-cta, .inner-mobile-cta):is(:hover, :active) { translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  :root :is(button, summary, input[type="submit"], input[type="button"], [role="button"],
    .button-primary, .button-secondary, .header-cta, .icon-button, .language-link,
    .inner-action, .inner-theme-toggle, .inner-language, .inner-mobile-menu summary,
    .mobile-fixed-cta, .inner-mobile-cta, .admin-secondary, .admin-google-button,
    .desktop-nav a, .mobile-nav a, .inner-nav a) {
    transition: none;
    translate: none !important;
  }
}
