/*
Theme Name: Indium
Theme URI: https://github.com/wpgaurav/indium
Author: Gaurav Tiwari
Author URI: https://gauravtiwari.org
Description: A block theme for artists and illustrators, in cut paper and big type. Indium is element 49, a soft metal named for the indigo line in its spectrum and soft enough to cut with a knife, and the theme is for people who make things by cutting, pasting, and drawing. It sets headlines in Bricolage Grotesque and notes in Caveat, tears the edges of its colored bands, tilts stickers, tapes prints to the page, and ships portfolio grids, an artwork kit, exhibitions, commissions, prints, and complete pages. Six designs, three heading presets, core blocks only, and no JavaScript of its own.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indium
Tags: blog, portfolio, grid-layout, one-column, three-columns, wide-blocks, 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
*/

/*
 * Nearly every style in Indium lives in theme.json or in a block style
 * variation under styles/. This file carries only what theme.json cannot say:
 * the focus ring, the condensed headlines, the bands that restyle whatever
 * sits inside them and tear their own edges, the collage hero's shapes, form
 * controls, and a few element defaults. Styles for a single block live in
 * assets/css/blocks and load only on pages where that block renders.
 */

/* Page values captured once. The bands below redefine the palette's custom
   properties for everything inside them, so they read the page's own colors
   from here. Text on the brand color is the page's paper, never white,
   because a dark design's brand is light. */
:root {
	--indium-brand: var(--wp--preset--color--primary);
	--indium-page: var(--wp--preset--color--base);
	--indium-night: var(--wp--preset--color--night);
	--indium-on-brand: var(--indium-page);
	--indium-sheet: #fffdf8;
	--indium-edge: 0.875rem;
	--indium-torn-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V7L5 4 11 8 18 3 23 6 31 2 37 7 44 4 50 6 58 1 63 5 70 3 76 7 84 2 89 5 96 3 102 7 109 4 115 6 120 7V14Z'/%3E%3C/svg%3E");
	--indium-torn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0V7L5 10 11 6 18 11 23 8 31 12 37 7 44 10 50 8 58 13 63 9 70 11 76 7 84 12 89 9 96 11 102 7 109 10 115 8 120 7V0Z'/%3E%3C/svg%3E");
	--indium-burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='100,50 83.3,63.8 85.4,85.4 63.8,83.3 50,100 36.2,83.3 14.6,85.4 16.7,63.8 0,50 16.7,36.2 14.6,14.6 36.2,16.7 50,0 63.8,16.7 85.4,14.6 83.3,36.2'/%3E%3C/svg%3E");
	--indium-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 61,38 97,38 68,59 79,93 50,72 21,93 32,59 3,38 39,38'/%3E%3C/svg%3E");
	--indium-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
	--indium-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A trace of paper grain on the page. It darkens by a few percent at most,
   so it never changes a contrast measurement. */
body {
	background-image: var(--indium-grain);
	background-size: 10rem 10rem;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Focus. A solid ring in the ink color with a soft brand halo. Ink is the
   heading color, so the ring follows every band's swap and stays visible on
   paper, indigo, and night alike, and in forced-colors mode. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation a:focus-visible {
	border-radius: var(--wp--preset--border-radius--xs);
	box-shadow: var(--wp--custom--ring);
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.wp-block-button__link:focus-visible {
	border-radius: var(--wp--preset--border-radius--full);
}

/* The header stacks above the page, so the phone menu it opens is never
   covered by a section further down. */
.wp-site-blocks > header.wp-block-template-part {
	position: relative;
	z-index: 50;
}

/* The footer sits at the bottom of the window on short pages, such as a 404
   or an empty search, instead of floating above a blank strip. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

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

/* Full-width bands built from patterns sit flush against each other inside
   post content too, so a page reads as one collage. */
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Headlines are narrowed, as if set on a poster. The Wide heading preset
   points headings at a family whose face only declares full width, so the
   browser holds it at 100 percent. */
:where(h1, h2, h3, .wp-block-post-title, .wp-block-query-title, .wp-block-site-title, .wp-block-pullquote p) {
	font-stretch: var(--wp--custom--heading--stretch, 78%);
}

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

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

/* Underlines are part of the look: a soft 2px line under links in running
   text that turns into a tomato scribble on hover. */
a {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

a:where(:not(.wp-element-button)) {
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	transition: color var(--wp--custom--transition--fast), text-decoration-color var(--wp--custom--transition--fast);
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-style: wavy;
}

::selection {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--indium-night);
}

/* A highlighted phrase in a headline sits on a swipe of marker, sun by
   default. Select the words in the editor and use Highlight; pick Ink as the
   text color, and the swipe does the rest. A dark design, and the ink band,
   swap the swipe for a deep brand tone, because light text on sun would lose
   its contrast. */
:is(h1, h2, h3, .wp-block-post-title) mark {
	--indium-swipe: var(--wp--custom--mark--swipe, var(--wp--preset--color--accent-2));
	background-image: linear-gradient(transparent 58%, var(--indium-swipe) 58%, var(--indium-swipe) 90%, transparent 90%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: 0.06em;
}

/* Inline code in running text. Code blocks are styled in theme.json. */
:where(p, li, td, th, figcaption, dd, .wp-block-details summary) code,
:where(p, li, td, th, figcaption, dd) kbd {
	background-color: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--contrast-3);
	border-radius: var(--wp--preset--border-radius--xs);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.86em;
	padding: 0.0625rem 0.375rem;
}

.wp-block-code code {
	background: none;
	border: 0;
	padding: 0;
}

/* Torn bands. Every colored band is a sheet of paper, so its top and bottom
   edges are torn: the band is masked by a jagged strip at each edge and a
   plain block between them. Keep a band's padding at 60 or more, because
   anything inside the edge strips is cut away with the paper. */
:is(.is-style-section-ink, .is-style-section-indigo, .is-style-section-tomato, .is-style-section-sun, .is-style-section-bubblegum, .is-style-section-mint) {
	-webkit-mask:
		var(--indium-torn-top) top left / 7.5rem var(--indium-edge) repeat-x,
		linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--indium-edge) + 2px) no-repeat,
		var(--indium-torn-bottom) bottom left / 7.5rem var(--indium-edge) repeat-x;
	mask:
		var(--indium-torn-top) top left / 7.5rem var(--indium-edge) repeat-x,
		linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--indium-edge) + 2px) no-repeat,
		var(--indium-torn-bottom) bottom left / 7.5rem var(--indium-edge) repeat-x;
	position: relative;
}

/* Paper bands and the sticky note: tomato, sun, bubblegum, and mint. Text on
   every paper is the night color, which is dark in every design, and muted
   text is night mixed at 88 percent. Buttons turn night with light text.
   Rather than restyle each block, the band redefines the palette. */
:is(.is-style-section-tomato, .is-style-section-sun, .is-style-section-bubblegum, .is-style-section-mint, .is-style-note) {
	--wp--preset--color--base: color-mix(in srgb, #fff 55%, var(--indium-paper));
	--wp--preset--color--base-2: color-mix(in srgb, #fff 35%, var(--indium-paper));
	--wp--preset--color--base-3: color-mix(in srgb, #fff 20%, var(--indium-paper));
	--wp--preset--color--contrast: var(--indium-night);
	--wp--preset--color--body: var(--indium-night);
	--wp--preset--color--contrast-2: color-mix(in srgb, var(--indium-night) 88%, var(--indium-paper));
	--wp--preset--color--contrast-3: color-mix(in srgb, var(--indium-night) 35%, var(--indium-paper));
	--wp--preset--color--primary: var(--indium-night);
	--wp--preset--color--primary-strong: var(--indium-night);
	--wp--preset--color--primary-tint: color-mix(in srgb, #fff 45%, var(--indium-paper));
	--indium-on-brand: var(--indium-sheet);
	background-color: var(--indium-paper);
	color: var(--indium-night);
}

.is-style-section-tomato {
	--indium-paper: var(--wp--preset--color--accent);
}

:is(.is-style-section-sun, .is-style-note) {
	--indium-paper: var(--wp--preset--color--accent-2);
}

.is-style-section-bubblegum {
	--indium-paper: var(--wp--preset--color--accent-3);
}

.is-style-section-mint {
	--indium-paper: var(--wp--preset--color--accent-4);
}

/* The ink band: a sheet of night paper. The palette turns light inside it,
   links take the brand mixed toward white, and buttons keep the brand. */
.is-style-section-ink {
	--wp--preset--color--base: color-mix(in srgb, #fff 7%, transparent);
	--wp--preset--color--base-2: color-mix(in srgb, #fff 5%, transparent);
	--wp--preset--color--base-3: color-mix(in srgb, #fff 10%, transparent);
	--wp--preset--color--contrast: color-mix(in srgb, #fff 94%, var(--indium-night));
	--wp--preset--color--body: color-mix(in srgb, #fff 86%, var(--indium-night));
	--wp--preset--color--contrast-2: color-mix(in srgb, #fff 72%, var(--indium-night));
	--wp--preset--color--contrast-3: color-mix(in srgb, #fff 18%, transparent);
	--wp--preset--color--primary-strong: color-mix(in srgb, var(--indium-brand) 45%, #fff);
	--wp--preset--color--primary-tint: color-mix(in srgb, var(--indium-brand) 25%, transparent);
	--wp--custom--mark--swipe: color-mix(in srgb, var(--indium-brand) 60%, var(--indium-night));
	background-color: var(--indium-night);
	color: var(--wp--preset--color--body);
}

/* The indigo band: a sheet of brand paper. Text is the page's paper color,
   and buttons flip to paper with brand text. */
.is-style-section-indigo {
	--wp--preset--color--base: color-mix(in srgb, var(--indium-page) 12%, transparent);
	--wp--preset--color--base-2: color-mix(in srgb, var(--indium-page) 8%, transparent);
	--wp--preset--color--base-3: color-mix(in srgb, var(--indium-page) 16%, transparent);
	--wp--preset--color--contrast: var(--indium-page);
	--wp--preset--color--body: var(--indium-page);
	--wp--preset--color--contrast-2: color-mix(in srgb, var(--indium-page) 94%, var(--indium-brand));
	--wp--preset--color--contrast-3: color-mix(in srgb, var(--indium-page) 35%, transparent);
	--wp--preset--color--primary: var(--indium-page);
	--wp--preset--color--primary-strong: var(--indium-page);
	--wp--preset--color--primary-tint: color-mix(in srgb, var(--indium-page) 18%, transparent);
	--indium-on-brand: var(--indium-brand);
	background-color: var(--indium-brand);
	color: var(--wp--preset--color--body);
}

/* The collage hero: two big cut shapes behind the content, a tomato circle
   high on the right and a sun burst low on the left, kept to the corners so
   text never sits on them. */
.is-style-section-collage {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.is-style-section-collage::before,
.is-style-section-collage::after {
	aspect-ratio: 1;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.is-style-section-collage::before {
	background-color: var(--wp--preset--color--accent);
	border-radius: 50%;
	right: clamp(-9rem, -8vw, -4rem);
	top: clamp(-9rem, -8vw, -4rem);
	width: clamp(12rem, 30vw, 26rem);
}

.is-style-section-collage::after {
	background-color: var(--wp--preset--color--accent-2);
	bottom: clamp(-10rem, -9vw, -5rem);
	left: clamp(-7rem, -5.5vw, -3rem);
	-webkit-mask: var(--indium-burst) center / contain no-repeat;
	mask: var(--indium-burst) center / contain no-repeat;
	rotate: -12deg;
	width: clamp(8rem, 16vw, 14rem);
}

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

/* Form controls. The schema has no input element, so these live here. The
   border mixes ink into the page at 62 percent, which holds 3:1 against the
   page in every design, including the mid-tone Kraft ground. */
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: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast) 62%, var(--wp--preset--color--base));
	border-radius: var(--wp--preset--border-radius--sm);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	padding: 0.5625rem 0.75rem;
	transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--custom--ring);
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 0;
}

textarea {
	width: 100%;
}

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

/* The default separator is a 100px stub in block themes. Here a separator
   is a 2px ink line the width of its container. */
.wp-block-separator {
	border-bottom: 0;
	border-top-width: 2px;
	opacity: 1;
}

.wp-block-separator:not(.is-style-dots):not(.is-style-squiggle) {
	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;
}

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

@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;
	}

	:is(.is-style-section-ink, .is-style-section-indigo, .is-style-section-tomato, .is-style-section-sun, .is-style-section-bubblegum, .is-style-section-mint, .is-style-section-collage) {
		background: none !important;
		-webkit-mask: none !important;
		mask: none !important;
	}

	.is-style-section-collage::before,
	.is-style-section-collage::after {
		display: none;
	}
}