/**
 * The theme's own pages, in the dark theme (docs/SPEC-dark-theme.md §18, P5).
 *
 * Loaded only on a page `Theme::site_surface()` calls `site`: an editorial page or post, the blog
 * and its archives, search and the 404, plus Quform's contact form. Never on the store, the
 * hook pages or the games, and only with the switch on, after gw-theme.css, which already gives
 * every themed page the card, the body text and the headings.
 *
 * What is left is what the Imagely theme paints that the layer does not reach: the page behind
 * the card, captions, the post meta line, post navigation, pagination, the comment, search and
 * Quform fields, the footer widget area. The theme's LINKS are not restated: it paints them a
 * mid grey (#888) that is 5:1 on the dark card and, for the light theme, 3.5:1 on white; changing
 * them to the shared blue would change every link in the light theme, which is not this
 * release's to do (spec §18 lists it as a decision for the owner).
 *
 * Every rule is `html :where(body.gw-site-page) ...`, one type selector above the theme's own
 * (the discipline gw-theme.css explains at length): it beats the theme and loses to a rule that
 * already beats the theme on purpose. In the light theme each token sits within a few levels of
 * the colour it replaces, so no rule is scoped to dark and none can drift from its twin.
 */

/* The page behind the card: the theme's #fafafa in light, the platform's near-black in dark. */
html body.gw-themed.gw-site-page { background-color: var(--gwd-page); }

/* Captions under an image. The theme's #555 is 7.5:1 on white and 2.4:1 on a dark card. */
html :where(body.gw-site-page) figcaption,
html :where(body.gw-site-page) .wp-element-caption,
html :where(body.gw-site-page) .wp-caption-text { color: var(--gwd-text2); }

/* The line under a post's title (date, category, comments): the theme's #777 is 4.5:1 on white,
   so this is the shared muted grey, which clears 4.5:1 on the card in both themes. */
html :where(body.gw-site-page) ul.meta,
html :where(body.gw-site-page) ul.meta li,
html :where(body.gw-site-page) ul.meta a { color: var(--gwd-muted); }

/* Previous / next post. The theme names the title with four classes (`.single nav.post-navigation .nav-links .title`, where `.single` is
   the BODY's class), so this does too, on the body: `:where(body.gw-site-page).single` is one compound selector, not a descendant. */
html :where(body.gw-site-page).single nav.post-navigation,
html :where(body.gw-site-page).single nav.post-navigation .nav-previous { border-color: var(--gwd-line-soft); }
html :where(body.gw-site-page).single nav.post-navigation .nav-links .title { color: var(--gwd-ink); }

/* A link's hover colour. The theme's Customizer paints every `a:hover` black, which is 1.1:1 on the dark card and is seen only
   by a visitor who points at a link, so no static check ever finds it. Scoped to the page's content and its footer widgets: the
   header bar is near-black in both themes and has hover rules of its own. */
html :where(body.gw-site-page) #main a:hover,
html :where(body.gw-site-page) #footer-widgets .footer-box a:hover { color: var(--gwd-ink); }

/* The hairlines the theme draws between a post's parts and between entries are #f1f1f1 (and #e9e9e9 in search results), which
   are bright rules on a dark card. Each is named the way the theme names it, with the body classes it leans on (`.single`,
   `.search-results`), because a lower-specificity colour does not move them. They are `--gwd-line-soft` in both themes: in the
   light theme that is #e8e3da for #f1f1f1, a hair darker and warmer. */
html :where(body.gw-site-page).single .entry-title,
html :where(body.gw-site-page) #related-posts,
html :where(body.gw-site-page) #comments,
html :where(body.gw-site-page) .blog-entry,
html :where(body.gw-site-page) .blog-entry.overlay-entry,
html :where(body.gw-site-page) .content-area,
html :where(body.gw-site-page).search-results article { border-color: var(--gwd-line-soft); }

/* Pagination: the number links, and the current page as the primary button inverts. */
html :where(body.gw-site-page) .reactr-pagination .page-numbers:not(.current) { color: var(--gwd-text2); border-color: var(--gwd-line-soft); }
/* The theme's Customizer writes the current page's colours `!important` (#f1f1f1 on #222), so this has to as well. */
html :where(body.gw-site-page) .reactr-pagination .page-numbers.current {
  color: var(--gwd-btn-fg) !important; background-color: var(--gwd-btn-bg) !important; border-color: var(--gwd-btn-bg);
}

/* Inline code: the theme's #2080ad is 4.4:1 on white and 4.1:1 on the dark card; the shared info blue is 9.1:1 on white and 9.2:1 on dark. */
html :where(body.gw-site-page) code { color: var(--gwd-info-fg); }

/* Widget titles are classed (the theme paints them black), so the heading rule in gw-theme.css does not reach them. The footer's
   are written with the footer's id, and so are its links (#555), so these name it too. */
html :where(body.gw-site-page) .widget-title,
html :where(body.gw-site-page) #footer-widgets .footer-box .widget-title { color: var(--gwd-ink); }
/* ...and the 3px bar beside each is the Customizer's #000, which is a bar nobody can see on a dark card. */
html :where(body.gw-site-page) .widget-title { border-left-color: var(--gwd-ink); }
html :where(body.gw-site-page) #footer-widgets a,
html :where(body.gw-site-page) #footer-widgets .footer-box a { color: var(--gwd-text2); }
/* The footer widget area is a white band in the theme. */
html :where(body.gw-site-page) #footer-widgets { background-color: var(--gwd-surface); }

/* Fields: the comment form, the search box and Quform's. The theme writes `#333` on a transparent
   field with a #ddd edge (1.6:1 against the card, under the 3:1 WCAG 1.4.11 asks of a control),
   which is unreadable on a dark card. The fields take the tokens, as the members' fields did in P4. */
html :where(body.gw-site-page) #commentform :is(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"], [type="hidden"]), textarea),
html :where(body.gw-site-page) .searchform input:not([type="submit"], [type="button"]),
html :where(body.gw-site-page) .search-form input:not([type="submit"], [type="button"]),
html :where(body.gw-site-page) .quform :is(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"], [type="hidden"]), textarea, select) {
  color: var(--gwd-ink); background-color: var(--gwd-field); border-color: var(--gwd-edge);
}
html :where(body.gw-site-page) :is(#commentform, .searchform, .search-form, .quform) :is(input, textarea)::placeholder { color: var(--gwd-muted); opacity: 1; }
/* Quform's own focus rule is three classes (.quform .quform-field-text:focus), so this names one more than it needs. */
html :where(body.gw-site-page) .quform .quform-input :is(input, textarea, select):focus { border-color: var(--gwd-link); }

/* Quform: the required asterisk is a hard #cc0101, and the overlay that covers the form while it
   sends is a white sheet over a dark card. */
html :where(body.gw-site-page) .quform .quform-label-text .quform-required { color: var(--gwd-bad-fg); }
html :where(body.gw-site-page) .quform .quform-loading-overlay { background-color: var(--gwd-surface); }