/*
Dark Mode
---------

Companion stylesheet to inc/dark-mode.php. That file inlines the custom property
definitions (`--tf-*`, one set per colour mode) plus the theme's own colour map
alongside style.css; this file picks up everywhere that map does not reach.

Every rule here is UNSCOPED and driven by those custom properties. In light mode
each property holds exactly the literal this file is replacing, so light mode
renders identically whether or not dark mode is ever switched on. That is
deliberate: it means there is only one copy of each rule, and it works in dark
mode with or without JavaScript. (One deliberate exception: the `margin-top` in
section 6.0 is a spacing fix that applies in both modes.)

Loaded after css/blocks.css (see the dependency in twentyfifteen_bespoke_dark_mode_scripts())
so the block overrides in section 3.0 win on source order.

1.0 Toggle Button
2.0 Colours the built-in schemes never covered
3.0 Blocks
4.0 Footer credit
5.0 Additional CSS mirrors
6.0 PayPal Smart Buttons
7.0 Print
*/


/**
 * 1.0 Toggle Button
 *
 * Lives as the last <li> of the primary menu (see twentyfifteen_bespoke_dark_mode_menu_item()),
 * so `.main-navigation li` supplies the separator above it and the menu's own
 * show/hide behaviour carries it on small screens.
 *
 * It is styled to read as a menu row rather than a control: no box, no left
 * inset, full-width click target, and the same vertical padding as
 * `.main-navigation a`. The icon therefore starts on the same vertical line as
 * the link text above it.
 *
 * That means undoing a lot of style.css's `button` defaults (lines 484-496 and
 * 538-566): background, uppercase, bold, the Noto Sans stack, and the 1.5em side
 * padding would all otherwise apply. Everything typographic is set to `inherit`
 * so the button tracks `.main-navigation`, which restyles its font-size at five
 * breakpoints. Only the padding has to be repeated per breakpoint, mirroring
 * `.main-navigation a` at style.css lines 669, 3026, 3676, 4288, 4964 and 5515.
 * A width sweep confirmed the button matches the links at every one of them.
 */

.color-mode-toggle-item {
	padding: 0;
}

.color-mode-toggle {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: var(--tf-link-color);
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	margin: 0;
	max-width: none;
	padding: 0.8em 0;
	text-align: left;
	text-transform: none;
	-webkit-transition: color 0.15s ease-in-out;
	transition: color 0.15s ease-in-out;
	width: 100%;
}

.color-mode-toggle:hover,
.color-mode-toggle:focus {
	background-color: transparent;
	color: var(--tf-secondary-textcolor);
	outline: 0;
}

/*
 * There is no border to signal focus any more, so keyboard users need the
 * outline the theme gives `a:focus`.
 */
.color-mode-toggle:focus-visible {
	outline: 2px solid var(--tf-border-focus-color);
}

@media screen and (min-width: 46.25em) {

	.color-mode-toggle {
		padding: 1em 0;
	}
}

@media screen and (min-width: 55em) {

	.color-mode-toggle {
		padding: 0.75em 0;
	}
}

/*
 * From here up the menu sits in the desktop sidebar, where the theme colours its
 * links with the sidebar text colour rather than the main link colour — see the
 * "Sidebar Link Color" group in twentyfifteen_bespoke_get_color_scheme_css().
 */
@media screen and (min-width: 59.6875em) {

	.color-mode-toggle {
		color: var(--tf-sidebar-textcolor);
		padding: 0.5em 0;
	}

	.color-mode-toggle:hover,
	.color-mode-toggle:focus {
		color: var(--tf-secondary-sidebar-textcolor);
	}

	.color-mode-toggle:focus-visible {
		outline-color: var(--tf-sidebar-border-focus-color);
	}
}

@media screen and (min-width: 68.75em) {

	.color-mode-toggle {
		padding: 0.4643em 0;
	}
}

@media screen and (min-width: 77.5em) {

	.color-mode-toggle {
		padding: 0.5em 0;
	}
}

.color-mode-toggle-icon {
	display: inline-block;
	vertical-align: middle;
}

.color-mode-toggle svg {
	display: block;
	height: 1.3em;
	width: 1.3em;
}

/*
 * The icon shows what clicking will do, not what is currently on: a moon in light
 * mode, a sun in dark mode.
 */
.color-mode-toggle-to-light {
	display: none;
}

@media ( prefers-color-scheme: dark ) {

	html:not([data-theme="light"]) .color-mode-toggle-to-dark {
		display: none;
	}

	html:not([data-theme="light"]) .color-mode-toggle-to-light {
		display: inline-block;
	}
}

html[data-theme="dark"] .color-mode-toggle-to-dark {
	display: none;
}

html[data-theme="dark"] .color-mode-toggle-to-light {
	display: inline-block;
}


/**
 * 2.0 Colours the built-in schemes never covered
 *
 * twentyfifteen_bespoke_get_color_scheme_css() recolours input BORDERS but never their
 * background or text: style.css leaves fields at #f7f7f7 with rgba(51,51,51,0.7)
 * text, going white on focus. That is a near-white box holding near-white text on
 * a dark background — the theme's own bundled "Dark" colour scheme has always had
 * this bug. The rest are one-off literals in style.css.
 *
 * `button` is deliberately excluded: the scheme map already repaints buttons with
 * the main text colour, and input[type="submit"] is caught by that same rule at a
 * higher specificity than the bare `input` below.
 */

input,
textarea,
select {
	background-color: var(--tf-field-background-color);
	color: var(--tf-secondary-textcolor);
}

input:focus,
textarea:focus,
select:focus {
	background-color: var(--tf-field-focus-background-color);
	color: var(--tf-textcolor);
}

select {
	border-color: var(--tf-border-color);
}

select:focus,
.dropdown-toggle:focus {
	outline-color: var(--tf-border-focus-color);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: var(--tf-secondary-textcolor);
	opacity: 0.7;
}

input::placeholder,
textarea::placeholder {
	color: var(--tf-secondary-textcolor);
	opacity: 0.7;
}

/* style.css: pre { background-color: rgba(0, 0, 0, 0.01); } */
pre {
	background-color: var(--tf-code-background-color);
}

/* style.css: mark, ins { background-color: #fff9c0; } — light text on it is unreadable. */
mark,
ins {
	background-color: var(--tf-mark-background-color);
	color: var(--tf-mark-textcolor);
}

/* style.css: .required { color: #c0392b; } */
.required {
	color: var(--tf-required-color);
}

/*
 * style.css keeps this at `.site .skip-link` with the note "must have higher
 * specificity than alternative color schemes inline styles". Match it exactly.
 */
.site .skip-link {
	background-color: var(--tf-skip-link-background-color);
	color: var(--tf-skip-link-color);
}

/*
 * A logo authored as dark artwork on an opaque light background reads as a bright
 * rectangle in dark mode. Inverting fixes the artwork but turns that background
 * black, which is its own rectangle against a #1e1e1e sidebar — so the invert is
 * paired with `mix-blend-mode: lighten`, which lets the backdrop show through
 * everywhere the inverted image is darker than it and leaves the (now light) mark
 * alone. Controlled by Customizer -> Colors -> Logo in Dark Mode.
 *
 * The link needs its own background for that to be reliable. On desktop the
 * sidebar colour comes from the fixed-position `body:before`, and js/functions.js
 * makes #sidebar itself `position: fixed` once the page is taller than the
 * sidebar — either is enough for the browser to promote the sidebar to its own
 * compositing layer, leaving the logo with nothing to blend against. Painting the
 * same colour directly behind the logo gives it a backdrop in its own layer. The
 * colour is identical to what is already there, so nothing changes in light mode.
 */
.custom-logo-link {
	background-color: var(--tf-header-background-color);
	display: inline-block;
}

.custom-logo {
	-webkit-filter: var(--tf-logo-filter);
	filter: var(--tf-logo-filter);
	mix-blend-mode: var(--tf-logo-blend-mode);
}


/**
 * 3.0 Blocks
 *
 * css/blocks.css restates the same palette as style.css but is loaded as its own
 * file, so the inline colour map cannot reach it. Restated here at identical
 * specificity, later in the cascade.
 *
 * The `has-*-color` / `has-*-background-color` palette classes are intentionally
 * left alone: those are colours an author picked for a specific block, not theme
 * chrome, and silently rewriting them would be wrong.
 */

[class^="wp-block-"] figcaption,
.wp-block-latest-comments__comment-date {
	color: var(--tf-secondary-textcolor);
}

.wp-block-quote,
.wp-block-quote:not(.is-large):not(.is-style-large),
[class^="wp-block-"] blockquote {
	border-color: var(--tf-secondary-textcolor);
}

.wp-block-quote cite,
.wp-block-quote__citation {
	color: var(--tf-textcolor);
}

.wp-block-file a.wp-block-file__button,
.wp-block-button__link {
	background-color: var(--tf-textcolor);
	color: var(--tf-box-background-color);
}

.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--tf-textcolor);
}

.wp-block-file a.wp-block-file__button:hover,
.wp-block-file a.wp-block-file__button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus {
	background-color: var(--tf-secondary-textcolor);
	color: var(--tf-box-background-color);
}

.wp-block-preformatted {
	background-color: var(--tf-code-background-color);
	border-color: var(--tf-border-color);
}

.wp-block-table th,
.wp-block-table td {
	border-color: var(--tf-border-color);
}

.wp-block-separator {
	border-color: var(--tf-border-color);
}


/**
 * 4.0 Footer credit
 *
 * Replaces the inline style="" attributes that used to sit on the credit link in
 * footer.php. Inline styles beat every stylesheet, so they could never follow the
 * colour mode. `.site-info` prefix is needed to outrank `.site-info a` in the
 * inline colour map.
 */

.site-info .site-credit-link {
	color: var(--tf-credit-color);
	font-family: "Montserrat", sans-serif;
	opacity: var(--tf-credit-opacity);
	text-decoration: none;
}

.site-info .site-credit-link:hover,
.site-info .site-credit-link:focus {
	border-bottom: 0;
	color: var(--tf-credit-color);
	opacity: 1;
}

.site-credit-accent {
	color: var(--tf-credit-accent-color);
}


/**
 * 5.0 Additional CSS mirrors
 *
 * Customizer -> Additional CSS is printed on wp_head at priority 101, after every
 * theme stylesheet, and it hard-codes several light-mode colours — most damagingly
 * `a { color: #000000; }`, which is invisible on a dark background. The theme
 * cannot edit that CSS, so each affected rule is restated here one specificity
 * step higher (an `html` prefix is enough) with a custom property whose LIGHT
 * value is the same literal Additional CSS sets.
 *
 * These are the only site-specific rules in this file. The better long-term fix is
 * to move those colours out of Additional CSS and onto the custom properties
 * directly; until then, if a rule is edited or removed there, update its mirror
 * here and its light value in twentyfifteen_bespoke_dark_mode_extra_variables().
 */

/* Additional CSS: a { color: #000000; } */
html a {
	color: var(--tf-link-color);
}

html a:hover,
html a:focus {
	color: var(--tf-secondary-textcolor);
}

/* Additional CSS: .entry-title, .post-title { color: #000000; } */
html .entry-title,
html .entry-title a,
html .post-title {
	color: var(--tf-heading-color);
}

/*
 * Additional CSS hides the post meta by painting it white on white. Dark mode has
 * to keep it hidden rather than turning it into a bright band.
 */
html .entry-footer,
html .entry-footer a,
html .entry-footer a:hover {
	background-color: var(--tf-hidden-meta-color);
	color: var(--tf-hidden-meta-color);
}

/* Additional CSS: .posted-on { color: #999999; } */
html .posted-on,
html .posted-on a {
	color: var(--tf-muted-color);
}

/* Additional CSS: .paypalPaymentButton { border: 1px solid #333; background-color: #f1f1f1; } */
html .paypalPaymentButton {
	background-color: var(--tf-panel-background-color);
	border-color: var(--tf-panel-border-color);
}

/* Additional CSS sets these with !important, so the mirror has to as well. */
html body .mc4wp-form-fields input {
	background-color: var(--tf-field-background-color) !important;
}

html body .mc4wp-form-fields input:focus {
	background-color: var(--tf-field-focus-background-color) !important;
}


/**
 * 6.0 PayPal Smart Buttons
 *
 * PayPal renders its buttons into a cross-origin iframe served from paypal.com.
 * That document's background is #ffffff (sampled), and nothing here can reach
 * inside it — verified against the live widget: `color-scheme: dark` on both the
 * container and the iframe changes nothing, and the frame is not script
 * accessible. So the white gutter between the two buttons and the strip behind
 * the "Powered by PayPal" tagline genuinely cannot be recoloured from CSS.
 *
 * What CSS can do is make that white look deliberate. In dark mode the container
 * becomes a white plate with padding and rounded corners, so the widget reads as
 * an intentional payment panel rather than a hole torn in the page. The plate is
 * exactly #ffffff so it is seamless with the iframe's own background.
 *
 * Keyed off the ID from PayPal's own documented markup, so all three pages that
 * embed a button — /session-registration/, /pop-up-yoga-registration/ and
 * /posture-session-registration/ — pick it up, as will any page added later.
 *
 * To restyle the buttons themselves, the only supported route is PayPal's SDK:
 * `paypal.Buttons({ style: { color: 'black', tagline: false } })` in each page's
 * inline script. That is page content, not theme CSS.
 */

#paypal-button-container {
	background-color: var(--tf-payment-plate-color);
	border-radius: 6px;
	padding: var(--tf-payment-plate-padding);
}

/*
 * The confirmation shown after a successful payment carries an inline
 * `border: 3px dashed black`, which all but disappears on a dark background.
 * Inline styles outrank stylesheets, so the colour needs !important to land.
 *
 * `margin-top` is a plain spacing fix and applies in both colour modes — it is
 * the one rule in this file that is not mode-dependent. It needs no !important:
 * the inline style sets margin-left and margin-right but never margin-top, and
 * the cascade resolves per property, not per shorthand.
 */
#paypal-success-message {
	border-color: var(--tf-payment-outline-color) !important;
	margin-top: 2em;
}


/**
 * 7.0 Print
 */

@media print {

	.color-mode-toggle-item {
		display: none !important;
	}
}