/**
 * Dash Horizon client-area presentation layer (Twenty-One base).
 * Prefer dashhorizon-*.css for tokens, header, footer, components.
 * This file holds residual page-level tweaks only — no body-wide colour force.
 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Quattrocento+Sans:wght@400;700&display=swap");

html {
  font-size: 15px;
}

body.dh-theme,
body.primary-bg-color.dh-theme {
  font-family: "Quattrocento Sans", "Poppins", sans-serif;
  /* Colour comes from dashhorizon-core.css — do not !important force on body */
}

body.dh-theme h1,
body.dh-theme h2,
body.dh-theme h3,
body.dh-theme h4,
body.dh-theme h5 {
  font-family: "Poppins", sans-serif;
}

/* Ensure legacy header/footer stay hidden when website chrome is active */
body.dh-theme #header.header.dh-legacy-header,
body.dh-theme #header.header[hidden] {
  display: none !important;
}

body.dh-theme #footer.footer:not(.dhds-footer) {
  display: none !important;
}

/* Dropdown stacking: content below header layer */
body.dh-theme #main-body,
body.dh-theme .primary-content,
body.dh-theme .master-breadcrumb {
  position: relative;
  z-index: var(--z-base, 1);
  overflow: visible !important;
}

body.dh-theme .dhx-header {
  z-index: var(--z-header, 1000);
}

body.dh-theme .dhx-dropdown {
  z-index: var(--z-dropdown, 1100);
}

/* Announcement excerpts — readable on dark cards */
body.dh-theme .announcements .card,
body.dh-theme .announcement-single,
body.dh-theme .announcement {
  background: var(--dh-bg-panel, rgba(7, 17, 31, 0.92)) !important;
  color: var(--dh-text-secondary, #d8e9ff) !important;
}

body.dh-theme .announcements .card-body,
body.dh-theme .announcements .card-text,
body.dh-theme .announcement p {
  color: var(--dh-text-secondary, #d8e9ff) !important;
}

/* Domain search residual */
body.dh-theme .home-domain-search .btn,
body.dh-theme #frmDomainHomepage .btn {
  min-height: 48px;
}

/* Focus visibility for interactive cards */
body.dh-theme .card a:focus-visible,
body.dh-theme .btn:focus-visible {
  outline: none;
  box-shadow: var(--dh-focus);
}