/**
 * Contractors4Christ — Base isolation layer.
 *
 * Loaded before every other plugin stylesheet (cards.css, profile.css,
 * search.css, dashboard.css). Its only job is to stop the active theme's
 * global CSS (typography, colors, box-model, form/table/button defaults)
 * from leaking into the plugin's own UI via inheritance, so category
 * cards, the contractor profile, the find-a-contractor page, and the
 * dashboard/PWA screens look the same on every theme.
 *
 * It intentionally does NOT touch theme markup outside these containers —
 * everything here is scoped under .c4c-canvas / the plugin's own root
 * wrapper classes, so the rest of the site is untouched.
 */

:where(
    .c4c-canvas,
    .c4c-app,
    .c4c-card-grid,
    .c4c-search-app,
    .c4c-profile,
    .c4c-group-archive,
    .c4c-auth-card,
    .c4c-partner-form,
    .c4c-journey
) {
    all: initial;
    box-sizing: border-box;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #101623;
    -webkit-font-smoothing: antialiased;
}

:where(
    .c4c-canvas *,
    .c4c-app *,
    .c4c-card-grid *,
    .c4c-search-app *,
    .c4c-profile *,
    .c4c-group-archive *,
    .c4c-auth-card *,
    .c4c-partner-form *,
    .c4c-journey *
) {
    box-sizing: border-box;
    font-family: inherit;
    line-height: inherit;
}

:where(
    .c4c-canvas h1, .c4c-app h1, .c4c-card-grid h1, .c4c-search-app h1, .c4c-profile h1, .c4c-group-archive h1, .c4c-partner-form h1, .c4c-install-page h1,
    .c4c-canvas h2, .c4c-app h2, .c4c-card-grid h2, .c4c-search-app h2, .c4c-profile h2, .c4c-group-archive h2, .c4c-partner-form h2, .c4c-install-page h2,
    .c4c-canvas h3, .c4c-app h3, .c4c-card-grid h3, .c4c-search-app h3, .c4c-profile h3, .c4c-group-archive h3, .c4c-partner-form h3, .c4c-install-page h3
) {
    font-family: inherit;
    color: inherit;
    font-weight: 700;
    margin: 0 0 0.5em;
    line-height: 1.25;
}

:where(
    .c4c-canvas p, .c4c-app p, .c4c-profile p, .c4c-partner-form p, .c4c-install-page p,
    .c4c-canvas ul, .c4c-app ul, .c4c-profile ul,
    .c4c-canvas ol, .c4c-app ol, .c4c-profile ol
) {
    margin: 0 0 1em;
    padding: 0;
}

:where(.c4c-canvas a, .c4c-app a, .c4c-card-grid a, .c4c-profile a) {
    color: inherit;
    text-decoration: none;
}

/* v2.16.69: excluded radio/checkbox from the input list below — this rule's
   appearance:none plus box-model styling (border/background/padding/
   border-radius) was being applied to EVERY <input>, including type=radio
   and type=checkbox, which strips their native round-dot/checkmark
   rendering entirely and replaces it with a plain rectangular box — this
   is what actually produced the empty oval/pill-shaped "radio buttons"
   and blank full-width "checkboxes" reported on [c4c_partner_signup].
   Leaving radio/checkbox OUT of this rule means they keep their native
   browser appearance by default; dashboard.css's .c4c-radio-group /
   .c4c-checkbox-row rules size them properly and set accent-color to
   match the brand gold. */
:where(
    .c4c-canvas input:not([type="radio"]):not([type="checkbox"]), .c4c-app input:not([type="radio"]):not([type="checkbox"]), .c4c-search-app input:not([type="radio"]):not([type="checkbox"]), .c4c-profile input:not([type="radio"]):not([type="checkbox"]), .c4c-auth-card input:not([type="radio"]):not([type="checkbox"]), .c4c-partner-form input:not([type="radio"]):not([type="checkbox"]),
    .c4c-canvas select, .c4c-app select, .c4c-search-app select, .c4c-profile select, .c4c-auth-card select, .c4c-partner-form select,
    .c4c-canvas textarea, .c4c-app textarea, .c4c-search-app textarea, .c4c-profile textarea, .c4c-auth-card textarea, .c4c-partner-form textarea,
    .c4c-canvas button, .c4c-app button, .c4c-search-app button, .c4c-profile button, .c4c-auth-card button, .c4c-partner-form button
) {
    font-family: inherit;
    /* 16px, not 15px: iOS Safari auto-zooms the page whenever a focused
       input's text is under 16px, and it's also the readability floor
       for form fields. */
    font-size: 16px;
    line-height: 1.45;
    color: var(--c4c-text, inherit);
    /* Was a hardcoded #fff, which in dark mode painted a white box and
       then inherited near-white text into it — invisible typing. */
    background: var(--c4c-surface, #fff);
    border: 1px solid var(--c4c-border-strong, #d5d9e2);
    border-radius: 8px;
    padding: 9px 12px;
    margin: 0;
    box-shadow: none;
    appearance: none;
}

:where(.c4c-canvas table, .c4c-app table, .c4c-profile table) {
    border-collapse: collapse;
    width: 100%;
}

:where(.c4c-canvas img, .c4c-app img, .c4c-card-grid img, .c4c-profile img) {
    max-width: 100%;
    height: auto;
}

/* ── Canvas page chrome (used by TemplateShell::header/footer only) ── */
.c4c-canvas-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--c4c-border, #e6e9f0);
    background: var(--c4c-surface, #fff);
}

.c4c-canvas-bar__brand img {
    max-height: 36px;
    width: auto;
}

.c4c-canvas-bar__brand span {
    font-weight: 700;
    font-size: 19px;
    color: var(--c4c-text, #101623);
}

.c4c-canvas-bar__home {
    font-size: 15px;
    color: var(--c4c-text-secondary, #475062);
}

.c4c-canvas-bar__home:hover {
    color: var(--c4c-text, #101623);
}

/**
 * v2.3.3 FIX — Canvas page body background
 *
 * The canvas template (dashboard/login/register) AND the static app-shell
 * template (contractor profile, search results, category/group pages) each
 * render a bare <html><body> without a theme wrapping it — using two
 * different body classes (c4c-canvas and c4c-static-shell respectively; see
 * Frontend\TemplateShell and Frontend\AppShellRenderer). On mobile phones
 * with system dark mode on, the browser was applying its own dark
 * background to the unstyled body on BOTH — the previous fix here only
 * covered c4c-canvas, missing c4c-static-shell entirely, which is why the
 * black background kept showing up on contractor/search/category pages.
 *
 * v2.3.6 hardcoded #F8F9FB here to stop the browser's OWN system dark
 * mode from blackening these unstyled bodies.
 *
 * v2.4.6 FIX — that hardcoded !important was too broad. It fired even
 * when the app's own dark mode was deliberately switched on, so the
 * static-shell pages (search results / "Find a Contractor", category and
 * contractor-profile pages) stayed bright white while the dashboard next
 * to them went dark. Now scoped to `html:not(.c4c-dark)`: the guard
 * against uninvited system darkening is unchanged for everyone who
 * hasn't turned dark mode on, while an explicit .c4c-dark on <html>
 * (set by pwa.js / app-mode.js) is respected and paints from the tokens.
 */
html:not(.c4c-dark) body.c4c-canvas,
html:not(.c4c-dark) body.c4c-static-shell {
    background: #F8F9FB !important;
    color: #111827;
}

html.c4c-dark body.c4c-canvas,
html.c4c-dark body.c4c-static-shell {
    background: var(--c4c-bg, #0B0F17) !important;
    color: var(--c4c-text, #F3F4F6);
}

/* Prevent the system dark mode from turning the html root black on any PWA page */
html:has(body.c4c-canvas):not(.c4c-dark),
html:has(body.c4c-static-shell):not(.c4c-dark) {
    background: #F8F9FB !important;
    color-scheme: light !important; /* tells browser to use light scrollbars/inputs */
}

html.c4c-dark:has(body.c4c-canvas),
html.c4c-dark:has(body.c4c-static-shell) {
    background: var(--c4c-bg, #0B0F17) !important;
    color-scheme: dark !important;
}

/**
 * v2.5.5 FIX — the "white/light frame around a dark page" report.
 *
 * Every rule above only paints <html> when it :has() one of our two known
 * body classes. That misses two real situations: (1) any page a theme
 * still renders on its own — a themed archive/category page, a page built
 * with a page builder, anything without body.c4c-canvas/c4c-static-shell —
 * where <html> was never touched at all, and (2) the strip of canvas a
 * mobile browser shows OUTSIDE the <body> box during elastic/rubber-band
 * overscroll (iOS Safari, and Android browsers that emulate it), which is
 * painted from <html>'s own background, not the theme's body background,
 * even when body itself is correctly dark. Both show up the same way: a
 * light bar/edge around an otherwise-dark screen, exactly matching the
 * report ("dark mode changes only the section where the code is, not the
 * page color").
 *
 * This is the unconditional baseline — it doesn't require :has() support
 * or a specific body class, just the .c4c-dark class pwa.js/app-mode.js
 * already put on <html>. The more specific rules above still run for the
 * color-scheme (native scrollbar/control) signal on the two known shells;
 * this is the belt-and-suspenders floor underneath all of them.
 */
html.c4c-dark {
    background-color: var(--c4c-bg, #0B0F17) !important;
}

html:not(.c4c-dark) {
    background-color: #F8F9FB;
}

/**
 * Catch-all for THEMED pages (the ones that still render the WordPress
 * theme's own header/footer rather than a c4c shell — a logged-out
 * visitor browsing category or search pages, for example). Without this,
 * dark mode reached only the plugin's own components and left the page
 * they sit on white. Specificity of `html.c4c-dark body` (0,1,2) beats a
 * theme's `body {}` or `body.page {}` rule without needing !important,
 * so a theme that genuinely styles its own dark background can still win
 * with a more specific selector of its own.
 */
html.c4c-dark body {
    background-color: var(--c4c-bg, #0B0F17);
    color: var(--c4c-text, #F3F4F6);
}

/* Native form controls, scrollbars and date pickers everywhere. */
html.c4c-dark {
    color-scheme: dark;
}