/*
Theme Name: Xenon
Theme URI: https://github.com/wpgaurav/xenon
Author: Gaurav Tiwari
Author URI: https://gauravtiwari.org
Description: A block theme for studio portfolios: photographers, designers, architects, and small studios. Xenon is the gas inside a camera flash, and the theme has the same job: light the work, then get out of the way. It opens on a dark gallery ground with oversized condensed type and mono captions, ships five designs from Darkroom to White Cube, and builds every template and pattern from core blocks with no JavaScript of its own.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.0
Update URI: https://gauravtiwari.org/product/xenon/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xenon
Tags: portfolio, photography, one-column, two-columns, grid-layout, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, style-variations, sticky-post, template-editing, threaded-comments, translation-ready, wide-blocks
*/

/*
 * Nearly every style in Xenon lives in theme.json or in a block style
 * variation under styles/. This file carries only what theme.json cannot say.
 * Styles for a single block live in assets/css/blocks and load only on pages
 * where that block renders.
 */

/* Focus. theme.json has no :focus-visible state, so the ring lives here. It
   reads the primary preset, so every design gets its own ring. */
:root {
	--xenon-focus-ring: var(--wp--preset--color--primary, currentColor);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--xenon-focus-ring);
	outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-offset: 0;
}

/* Template sections sit flush. WordPress applies the root block gap between
   header, main, and footer too, which only ever shows up as a stray band
   above a full-bleed section. Every template sets its own rhythm instead. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Underlines. theme.json can switch an underline on but cannot place it, and
   the default sits on the descenders. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Flash section: one inverted band, like the frame when the strobe fires.
   Rather than restyle every block inside it, the band swaps the palette's
   custom properties, so headings, links, buttons, captions, and any color a
   pattern picked from the palette all invert together. The raw page colors
   are captured at the root first, which is what makes the swap possible.
   The accent moves halfway toward the page color so it still reads on the
   inverted ground. */
:root {
	--xenon-ink: var(--wp--preset--color--contrast);
	--xenon-paper: var(--wp--preset--color--base);
	--xenon-accent: var(--wp--preset--color--primary);
}

.is-style-section-flash {
	--wp--preset--color--base: var(--xenon-ink);
	--wp--preset--color--base-2: color-mix(in srgb, var(--xenon-ink) 90%, var(--xenon-paper));
	--wp--preset--color--contrast: var(--xenon-paper);
	--wp--preset--color--contrast-2: color-mix(in srgb, var(--xenon-paper) 74%, var(--xenon-ink));
	--wp--preset--color--contrast-3: color-mix(in srgb, var(--xenon-paper) 24%, var(--xenon-ink));
	--wp--preset--color--primary: color-mix(in srgb, var(--xenon-accent) 40%, var(--xenon-paper));
	--wp--preset--color--primary-tint: color-mix(in srgb, var(--xenon-accent) 18%, var(--xenon-ink));
	background-color: var(--xenon-ink);
	color: var(--xenon-paper);
}

/* Core injects the skip link for block themes. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--contrast);
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	padding: 0.875rem 1.375rem;
	text-decoration: none;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
}

/* Form controls. The schema has no input element, so these live here. The
   border mixes the text color at 55 percent, which keeps it at 3:1 or better
   against the page in every design, as WCAG 1.4.11 asks. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	padding: 0.75rem 0.875rem;
}

textarea {
	width: 100%;
}

::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 64%, transparent);
	opacity: 1;
}

/* Tables divide with one hairline per row. No vertical lines, no outer box.
   Two classes plus :is() outrank core's table borders. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table table :is(td, th) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--contrast-3);
	font-variant-numeric: tabular-nums;
	padding: 0.75rem 1.5rem 0.75rem 0;
	text-align: left;
	vertical-align: top;
}

.wp-block-table table :is(td, th):last-child {
	padding-right: 0;
}

/* Core rules a table's head and foot with 3px lines, the only heavy lines
   in a hairline design. The cells' own hairlines take over. */
.wp-block-table :is(thead, tfoot) {
	border: 0;
}

.wp-block-table table thead :is(td, th) {
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--fragment-mono);
	font-weight: 400;
	white-space: nowrap;
}

/* The default separator is a 100px stub in block themes. Here a separator
   is a hairline the width of its container, which is how the whole theme
   divides things. */
.wp-block-separator {
	border-bottom: 0;
	border-top-width: 1px;
	opacity: 1;
}

.wp-block-separator:not(.is-style-dots) {
	width: 100%;
}

/* Long words and URLs inside narrow columns. */
.wp-block-post-content,
.wp-block-post-excerpt,
.wp-block-post-title {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
.wp-block-post-title,
.wp-block-site-title {
	text-wrap: balance;
}

p,
li,
figcaption {
	text-wrap: pretty;
}

img,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

/* Photographs are the point. Nothing rounds them unless the editor asks. */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover {
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.wp-block-template-part[class*="header"],
	.wp-block-template-part[class*="footer"],
	.wp-block-navigation,
	.wp-block-search,
	.wp-block-post-comments-form,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}
}