/* CMS and legal page dark mode. Rich widgets reuse homepage-dark.css. */
html.puppy-dark body.cms-page-view {
    color-scheme: dark;
    color: var(--puppy-dark-text);
    background: var(--puppy-dark-bg);
}

html.puppy-dark body.cms-page-view :where(
    .page-wrapper,
    .page-main,
    .page-main > .columns,
    .page-main > .columns > .column.main
) {
    color: var(--puppy-dark-text);
    background-color: var(--puppy-dark-bg) !important;
}

html.puppy-dark body.cms-page-view #maincontent :where(
    .page-title-wrapper,
    .category-cms,
    .category-cms.seo,
    .column.main > .seo,
    .page-content-inner
) {
    color: var(--puppy-dark-text-muted);
    background-color: transparent !important;
}

html.puppy-dark body.cms-page-view #maincontent :where(
    .category-cms,
    .column.main > .seo,
    .page-content-inner
) :where(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--puppy-dark-text) !important;
}

html.puppy-dark body.cms-page-view #maincontent :where(
    .category-cms,
    .column.main > .seo,
    .page-content-inner
) :where(p, li, dt, dd, figcaption) {
    color: var(--puppy-dark-text-muted) !important;
}

html.puppy-dark body.cms-page-view #maincontent :where(
    .category-cms,
    .column.main > .seo,
    .page-content-inner
) a:not(.action) {
    color: var(--puppy-dark-accent);
}

html.puppy-dark body.cms-page-view #maincontent :where(
    .category-cms,
    .column.main > .seo,
    .page-content-inner
) a:not(.action):hover,
html.puppy-dark body.cms-page-view #maincontent :where(
    .category-cms,
    .column.main > .seo,
    .page-content-inner
) a:not(.action):focus-visible {
    color: #79d8d1;
}

html.puppy-dark body.cms-page-view #maincontent :where(hr, .line-separator) {
    border-color: var(--puppy-dark-border-soft) !important;
    opacity: 0.72;
}

html.puppy-dark body.cms-page-view #maincontent :where(
    .category-cms,
    .page-content-inner
) :where(blockquote, .tips) {
    color: var(--puppy-dark-text-muted);
    border: 1px solid var(--puppy-dark-border-soft);
    border-left: 4px solid var(--puppy-dark-accent-deep);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--puppy-dark-surface-raised), var(--puppy-dark-surface)) !important;
    box-shadow: 0 14px 28px rgba(2, 8, 9, 0.15);
}

html.puppy-dark body.cms-page-view #maincontent :where(
    .category-cms,
    .page-content-inner
) :where(table, th, td) {
    color: var(--puppy-dark-text-muted);
    border-color: var(--puppy-dark-border-soft) !important;
}

html.puppy-dark body.cms-page-view #maincontent :where(
    .category-cms,
    .page-content-inner
) table {
    background: var(--puppy-dark-surface) !important;
}

html.puppy-dark body.cms-page-view #maincontent :where(
    .category-cms,
    .page-content-inner
) :where(th, thead td) {
    color: var(--puppy-dark-text);
    background: var(--puppy-dark-surface-raised) !important;
}

html.puppy-dark body.cms-page-view #maincontent :where(input, select, textarea) {
    color: var(--puppy-dark-text) !important;
    border-color: var(--puppy-dark-border) !important;
    background: var(--puppy-dark-surface) !important;
    box-shadow: none;
}

html.puppy-dark body.cms-page-view #maincontent :where(input, textarea)::placeholder {
    color: var(--puppy-dark-text-subtle) !important;
    opacity: 1;
}

html.puppy-dark body.cms-page-view #maincontent :where(input, select, textarea):focus {
    border-color: var(--puppy-dark-accent) !important;
    box-shadow: 0 0 0 3px var(--puppy-dark-accent-soft) !important;
}

/* Optional CMS hero stored in the page SEO field. */
html.puppy-dark body.cms-page-view .page-wrapper > .homepage-main-slider {
    isolation: isolate;
    color: var(--puppy-dark-text);
    border-top: 1px solid var(--puppy-dark-border-soft);
    border-bottom: 1px solid var(--puppy-dark-border-soft);
    background-color: #263334 !important;
    background-blend-mode: multiply;
    box-shadow: 0 20px 42px rgba(2, 8, 9, 0.22);
}

html.puppy-dark body.cms-page-view .page-wrapper > .homepage-main-slider :where(
    .slider-text,
    .slider-text .title,
    h1,
    h2,
    strong
) {
    color: var(--puppy-dark-text) !important;
}

html.puppy-dark body.cms-page-view .page-wrapper > .homepage-main-slider :where(
    .slider-content,
    p
) {
    color: #d2dddb !important;
}

html.puppy-dark body.cms-page-view #maincontent .category-cms .homepage-designs-container {
    border-color: var(--puppy-dark-border-soft);
}

html.puppy-dark body.cms-page-view #maincontent .category-cms .homepage-designs-container :where(
    h2,
    h3,
    h4,
    strong
) {
    color: var(--puppy-dark-text) !important;
}

html.puppy-dark body.cms-page-view #maincontent .category-cms .homepage-designs-container :where(p, li) {
    color: var(--puppy-dark-text-muted) !important;
}

/* Legal pages use a sticky information menu followed by raw CMS headings and text. */
html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .column.main > :where(h1, h2, h3, h4, h5, h6),
html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .column.main > :where(h1, h2, h3, h4, h5, h6) strong {
    color: var(--puppy-dark-text) !important;
}

html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .column.main > :where(p, ul, ol, dl),
html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .column.main > :where(p, ul, ol, dl) :where(li, dt, dd) {
    color: var(--puppy-dark-text-muted) !important;
}

html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .column.main > :where(p, ul, ol, dl) a {
    color: var(--puppy-dark-accent) !important;
}

html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .column.main > :where(p, ul, ol, dl) a:hover,
html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .column.main > :where(p, ul, ol, dl) a:focus-visible {
    color: #79d8d1 !important;
}

html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .title {
    color: var(--puppy-dark-text) !important;
}

html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .sideMenu {
    color: var(--puppy-dark-text-muted);
    border-color: var(--puppy-dark-border-soft) !important;
    background:
        radial-gradient(circle at 10% 0, rgba(53, 183, 176, 0.12), transparent 38%),
        linear-gradient(180deg, var(--puppy-dark-surface-raised), var(--puppy-dark-surface)) !important;
    box-shadow: 0 18px 34px rgba(2, 8, 9, 0.22) !important;
}

html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .sideMenu .sideMenuTitle {
    color: var(--puppy-dark-text-subtle) !important;
}

html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .sideMenu :where(hr, li) {
    border-color: var(--puppy-dark-border-soft) !important;
}

html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .sideMenu a {
    color: var(--puppy-dark-text-muted) !important;
    border-radius: 8px;
}

html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .sideMenu a:hover,
html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .sideMenu a:focus-visible,
html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .sideMenu a.active,
html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .sideMenu a[aria-current="page"] {
    color: var(--puppy-dark-accent) !important;
    background: var(--puppy-dark-accent-soft);
}

@media (max-width: 980px) {
    html.puppy-dark body.cms-page-view #maincontent .category-cms {
        padding-inline: 10px;
    }

    html.puppy-dark body.cms-page-view.page-layout-legal-page #maincontent .sidebar.sidebar-additional .sideMenu {
        padding: 18px 20px;
    }
}