/* The site's dark look, laid over Blocksy by redefining its palette and type variables (colors from ss-tokens.css).
 * Done here rather than in the Customizer so it's versioned and deploys like code; the Customizer's own palette
 * is still the light original. Blocksy resolves its other color variables on :root, so a look is chosen there:
 * checkout keeps the light original until it's restyled and tested on its own (hq/projects/site-refactor.md).
 * Blocksy palette roles: 1 links and buttons, 2 hover and the active menu item, 3 text, 4 headings (and, by default,
 * the dropdown menus' background), 5 borders, 6 soft fills, 7 page, 8 cards. */

html:root:not(:has(body.woocommerce-checkout)){color-scheme:dark;
  --theme-palette-color-1:var(--ss-accent); --theme-palette-color-2:var(--ss-accent);
  --theme-palette-color-3:var(--ss-text-2); --theme-palette-color-4:var(--ss-text);
  --theme-palette-color-5:var(--ss-line-2); --theme-palette-color-6:var(--ss-bg-2);
  --theme-palette-color-7:var(--ss-bg); --theme-palette-color-8:var(--ss-bg-3);
  --theme-link-initial-color:var(--ss-accent); --theme-link-hover-color:var(--ss-accent-2);
  --theme-button-text-initial-color:var(--ss-accent-ink); --theme-button-text-hover-color:var(--ss-accent-ink);
  --theme-button-background-hover-color:var(--ss-accent-2)}
html:root{--theme-font-family:var(--ss-body); --theme-font-size:16px}
html:root:not(:has(body.woocommerce-checkout)) body{background:var(--ss-bg)}
html:root body{font-family:var(--ss-body)}
html:root body :is(h1,h2,h3,h4,h5,h6){font-family:var(--ss-head);letter-spacing:-.005em}
html:root body :is(.button,button,input[type=submit],.wp-element-button){font-family:var(--ss-body);border-radius:var(--ss-r)}
/* Small caps labels need air in Barlow (hq/brand.md: caps with wide letter spacing) */
html:root body header [data-id=menu] > ul > li > .ct-menu-link{font-size:12.5px;font-weight:600;letter-spacing:.08em}
html:root body :is(.ct-breadcrumbs,.woocommerce-result-count,.products .entry-meta,.product_meta,.woocommerce-tabs .wc-tabs,.ct-module-title){letter-spacing:.07em}
html:root:not(:has(body.woocommerce-checkout)) body :is(input,select,textarea){color-scheme:dark}

/* Pieces that don't follow the palette */
html:root body header .sub-menu{--dropdown-background-color:var(--ss-bg-3)}
html:root:not(:has(body.woocommerce-checkout)) .woocommerce-product-attributes tr:nth-child(2n) :is(th,td){background:var(--ss-bg-2)}
html:root body .wpcf7 :is(input:not([type=submit],[type=checkbox],[type=radio],[type=file]),select,textarea){
  background:var(--ss-bg-3);color:var(--ss-text);border:1px solid var(--ss-line-2);border-radius:var(--ss-r);font:16px/1.4 var(--ss-body)}
html:root body .wpcf7 :is(input,textarea)::placeholder{color:var(--ss-text-3)}
/* WPBakery buttons: its own orange and yellow swatches, made the brand gold */
html:root body a.vc_general.vc_btn3[class]{background:var(--ss-accent);background-image:none;color:var(--ss-accent-ink);border:1px solid var(--ss-accent);border-radius:var(--ss-r);box-shadow:none;text-shadow:none;font-family:var(--ss-body);font-weight:600}
html:root body a.vc_general.vc_btn3[class]:is(:hover,:focus){background:var(--ss-accent-2);border-color:var(--ss-accent-2);color:var(--ss-accent-ink)}
html:root body a.vc_general.vc_btn3[class].vc_btn3-style-outline{background:transparent;color:var(--ss-accent)}
html:root body a.vc_general.vc_btn3[class].vc_btn3-style-outline:is(:hover,:focus){background:var(--ss-accent);color:var(--ss-accent-ink)}
html:root body a.vc_general.vc_btn3[class] .vc_btn3-icon{color:inherit}
/* "Log in to see this page" note on My Account (theme/woocommerce/myaccount/form-login.php) */
.ss-login-note{margin:0 0 20px;padding:14px 18px;border:1px solid var(--theme-palette-color-5);border-left:3px solid var(--ss-accent);border-radius:var(--ss-r);background:var(--theme-palette-color-6);color:var(--theme-palette-color-4);font-weight:600}
.ss-login-note p{margin:0}
/* Product photos are shot on white. On the dark pages they sit on one warm light tile instead, and multiply blends
 * the white into it, so they read as a set rather than glaring squares. Dark photos are unchanged. Interim, until
 * the shoot gives a consistent backdrop. */
html:root:not(:has(body.woocommerce-checkout)) :is(.products .product .ct-media-container,.woocommerce-product-gallery .ct-media-container,.woocommerce-product-gallery__image){background:#e4e0d8;border-radius:var(--ss-r)}
html:root:not(:has(body.woocommerce-checkout)) :is(.products .product .ct-media-container,.woocommerce-product-gallery .ct-media-container,.woocommerce-product-gallery__image) img{mix-blend-mode:multiply}
/* [important] note boxes (Code Snippets "Important Text Shortcode"; their pale yellow lives in the "Misc CSS" snippet) */
html:root body .important_block{background:var(--theme-palette-color-6);color:var(--theme-palette-color-4);border:1px solid var(--theme-palette-color-5);border-left:3px solid var(--ss-accent);border-radius:var(--ss-r);padding:14px 18px;font-weight:600}
/* WPBakery rows and columns with a fill color set in the page (their own rules carry !important) */
html:root body .entry-content :is(.vc_row-has-fill,.vc_column-inner[class*=vc_custom_]){background-color:var(--ss-bg-2)!important}

/* Manuals and support articles: dark page, light reading column (body class ss-paper, set in functions.php;
 * .ssm-paper is the Manual template's column, see inc/manual.php).
 * Support's index pages (the ones with child pages) stay dark. */
.ss-paper .entry-content,.ssm-paper{color-scheme:light;background:var(--ss-paper);color:var(--ss-paper-ink-2);
  padding:clamp(20px,4vw,48px);border-radius:var(--ss-r);
  --theme-text-color:var(--ss-paper-ink-2); --theme-headings-color:var(--ss-paper-ink);
  --theme-palette-color-1:#a86c00; --theme-palette-color-2:#c98200;
  --theme-palette-color-3:var(--ss-paper-ink-2); --theme-palette-color-4:var(--ss-paper-ink);
  --theme-palette-color-5:var(--ss-paper-line); --theme-palette-color-6:var(--ss-paper-3);
  --theme-palette-color-7:var(--ss-paper); --theme-palette-color-8:var(--ss-paper-2);
  --theme-link-initial-color:#a86c00; --theme-link-hover-color:#c98200;
  --theme-button-text-initial-color:#fff; --theme-button-text-hover-color:#fff}
.ss-paper .entry-content :is(h1,h2,h3,h4,h5,h6),.ssm-paper :is(h1,h2,h3,h4,h5,h6){color:var(--ss-paper-ink)}
.ss-paper .entry-content :is(input,select,textarea),.ssm-paper :is(input,select,textarea){color-scheme:light}