/*
Theme Name: INDZARA
Theme URI: https://indzara.com/
Author: INDZARA
Description: Shared base design for indzara.com, following the landing design (navy and blue, Poppins and Inter). A block theme: colors, fonts and spacing live in theme.json, the header and footer are the theme blocks in blocks/, page layouts in templates/. Replaces Elementor and Page Builder Framework.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.17.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indzara
*/

/* Most styling is in theme.json, and the header, menu, footer and buttons are in
   assets/css/site.css. This file holds what's left: page structure and WooCommerce. */

/* Header, main and footer sit flush against each other, and the footer stays at the
   bottom of the window on short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

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

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- content
   The page system: every page runs full width (header, coloured bands, footer edge to
   edge), reading text sits in a centred column of comfortable line length (--reading),
   and things meant to be looked at (screenshots, videos, galleries, product and post
   grids, app showcases) are wider (the theme's content width, 1200px). */

:root {
	--reading: 720px;
}

/* Links in running text: no underline, as on the current site. */
a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

.entry-content a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

/* Reading pages (mostly text: policies, terms, notes) get the centred reading column.
   Showcase pages (with columns, grids, galleries or videos) keep one wide, aligned width. */
.page .wp-block-post-content:not(:has(> :is(.wp-block-columns, .wp-block-gallery, .wp-block-embed, .card-grid, .post-grid-wrap, .wp-block-group.is-style-card))) > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, .wp-block-quote, .wp-block-details, .wp-block-preformatted, .wp-block-table) {
	max-width: var(--reading);
}

/* Pages: a tinted section (the Card style on a top-level group, e.g. a section that had a
   background in Elementor) becomes a full-width band; its content stays in place. */
.page .wp-block-post-content > .wp-block-group.is-style-card {
	border-radius: 0;
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface);
	clip-path: inset(0 -100vmax);
	padding-inline: 0;
	padding-block: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------- posts
   templates/single.html is the one structure for every post, laid out like a Wikipedia
   article: a full-width header band (category, title, summary, byline, cover image), then
   three columns. Left: Contents (blocks/post-toc), which follows the reader down the page.
   Middle: the article, the author's sign-off, the category's "after" section and the
   conversation. Right: the reader's appearance choices (blocks/post-appearance), the
   category's sidebar (or "Templates in this post") and INDZARA's ad, which stays in view.
   Below 1240px Contents moves above the article; below 900px the right column moves under
   it. Readers' choices are data-text and data-width on <html>. */

:root {
	--post-wrap: 1400px;
	--post-toc: clamp(210px, 17vw, 250px);
	--post-rail: clamp(270px, 21vw, 300px);
	--post-gap: clamp(28px, 3vw, 44px);
	--post-text: 1.0625rem;
	--post-top: calc(var(--hh, 76px) + 20px);
}

html[data-text="small"] {
	--post-text: 0.9375rem;
}

html[data-text="large"] {
	--post-text: 1.1875rem;
}

html[data-width="wide"] {
	--post-wrap: 100%;
}

.post-hero,
.post-layout__wrap {
	padding-inline: var(--wp--style--root--padding-left, 20px) var(--wp--style--root--padding-right, 20px);
}

.post-hero > *,
.post-layout__wrap > * {
	max-width: var(--post-wrap);
	margin-inline: auto;
}

.post-hero {
	padding-block: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
}

.post-hero__inner {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

@media (min-width: 900px) {
	.post-hero__inner:has(> .post-hero__image) {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

.post-hero__inner > *,
.post-hero__text > * {
	margin-block: 0;
}

.post-hero__text {
	display: grid;
	gap: 14px;
}

.post-hero__cats {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.post-hero__cats a {
	color: var(--wp--preset--color--primary);
}

.post-hero__title {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.post-hero__inner:not(:has(> .post-hero__image)) .post-hero__title {
	max-width: 30ch;
}

.post-summary {
	margin: 0;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.post-hero__image img {
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: var(--wp--preset--shadow--soft);
}

.byline {
	display: flex;
	align-items: center;
	gap: 12px;
}

.byline__photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--line);
}

.byline__text {
	display: grid;
	margin: 0;
	line-height: 1.35;
}

.byline__name {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.byline__meta {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.post-layout__wrap {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* The three columns (one, then two, on narrower screens). In one column the right
   column's content comes after the article and before the conversation. */
.post-layout__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.post-layout__body > *,
.post-layout__main > * {
	min-width: 0;
	margin-block: 0;
}

@media (max-width: 899px) {
	.post-layout__main {
		display: contents;
	}

	.post-layout__body > .post-rail {
		order: 1;
	}

	.post-layout__main > .post-comments {
		order: 2;
	}
}

@media (min-width: 900px) {
	.post-layout__body > .post-toc {
		grid-area: toc;
	}

	.post-layout__main {
		grid-area: main;
	}

	.post-rail {
		grid-area: rail;
	}

	.post-layout__main > * + * {
		margin-top: var(--wp--preset--spacing--50);
	}

	.post-layout__body {
		gap: var(--wp--preset--spacing--40);
		grid-template-columns: minmax(0, 1fr) var(--post-rail);
		grid-template-rows: auto 1fr;
		grid-template-areas: "toc rail" "main rail";
		column-gap: var(--post-gap);
	}

	.post-layout__body:not(:has(> .post-toc)) {
		grid-template-rows: auto;
		grid-template-areas: "main rail";
	}
}

@media (min-width: 1240px) {
	.post-layout__body {
		grid-template-columns: var(--post-toc) minmax(0, 1fr) var(--post-rail);
		grid-template-rows: auto;
		grid-template-areas: "toc main rail";
	}

	/* A post without Contents (fewer than three headings): article and right column, centred. */
	.post-layout__body:not(:has(> .post-toc)) {
		grid-template-columns: minmax(0, 820px) var(--post-rail);
		justify-content: center;
	}

	html[data-width="wide"] .post-layout__body:not(:has(> .post-toc)) {
		grid-template-columns: minmax(0, 1fr) var(--post-rail);
	}
}

.post-slot--before {
	margin-bottom: var(--wp--preset--spacing--40);
}

.post-slot--sidebar,
.post-slot--after {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.post-slot--sidebar > *,
.post-slot--after > * {
	margin-block: 0;
}

/* WordPress makes an image's link inline-block, which shrinks to the picture's own width
   (the ETFIndia banner is 1200px); a block link lets the banner fill its slot. */
.post-banner a,
.sidebar-banner a {
	display: block;
}

.post-banner img,
.sidebar-banner img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* Right column: appearance, the category's sidebar, and the ad, which stays in view. */
.post-rail {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.post-rail > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.post-rail__sticky {
		position: sticky;
		top: var(--post-top);
	}
}

/* Right-column content that repeats something shown after the article: only beside it. */
@media (max-width: 899px) {
	.post-rail .hide-when-stacked {
		display: none;
	}
}

.post-rail .card-grid__heading {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
}

/* Small product cards ("Templates in this post"): picture beside the title. */
.product-grid.is-compact {
	--gap: 10px;
}

.product-grid.is-compact .product-card {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	grid-template-areas: "image title" "image stars";
	align-content: center;
	gap: 2px 12px;
	padding: 10px;
}

.product-grid.is-compact .card__image {
	grid-area: image;
	align-self: center;
}

.product-grid.is-compact .card__title {
	grid-area: title;
	font-size: var(--wp--preset--font-size--small);
}

.product-grid.is-compact .stars {
	grid-area: stars;
}

/* INDZARA's own ad (patterns/post-rail-ad.php). */
.rail-ad {
	padding: 22px;
	border-radius: 18px;
	background: var(--wp--preset--color--navy);
	color: rgba(255, 255, 255, .8);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.rail-ad > * {
	margin-block: 0;
}

.rail-ad > * + * {
	margin-top: 12px;
}

.rail-ad__label {
	color: var(--wp--preset--color--amber);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.rail-ad__title {
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.rail-ad .wp-element-button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	background: #fff;
	color: var(--wp--preset--color--navy);
	text-align: center;
}

.rail-ad .wp-element-button:hover {
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--navy);
}

/* "Building an app?", then its two links, one per line, under a divider. */
.rail-ad > .rail-ad__more {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.rail-ad .rail-ad__more > * {
	margin-block: 0;
}

.rail-ad .rail-ad__more > * + * {
	margin-top: 6px;
}

.rail-ad__links {
	padding: 0;
	list-style: none;
}

.rail-ad__links li + li {
	margin-top: 6px;
}

.rail-ad__links a {
	color: #fff;
	font-weight: 500;
	white-space: nowrap;
}

.rail-ad__links a::after {
	content: " →";
}

/* Reading: a little larger text (the reader can change it), roomy lines, clear section starts. */
.post-layout__main .wp-block-post-content {
	font-size: var(--post-text);
	line-height: 1.75;
}

.post-layout__main .wp-block-post-content > h2 {
	margin-top: 2.6em;
	padding-top: .9em;
	border-top: 1px solid var(--wp--preset--color--line);
}

.post-layout__main .wp-block-post-content > h3 {
	margin-top: 2em;
}

.post-layout__main :is(h2, h3)[id],
.post-comments {
	scroll-margin-top: calc(var(--hh, 76px) + 24px);
}

/* Screenshots: a light frame, so they read as pictures of real spreadsheets. */
.post-layout__main .wp-block-post-content .wp-block-image img {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
}

.post-layout__main .wp-block-post-content .wp-element-caption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Contents. Wide screens: the left column, following the reader. Narrower: a box above
   the article, folded on phones. */
.post-toc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.post-toc__head,
.appearance__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.post-toc__head {
	margin-bottom: 6px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.post-toc__title,
.appearance__title {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: .9375rem;
	font-weight: 600;
}

.post-toc__hide,
.appearance__hide {
	padding: 2px 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body-text);
	font: 500 .75rem/1.6 var(--wp--preset--font-family--body);
	cursor: pointer;
}

.post-toc__hide:hover,
.appearance__hide:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.post-toc.is-hidden .post-toc__list,
.appearance.is-hidden .appearance__options {
	display: none;
}

.post-toc.is-hidden .post-toc__head {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.post-toc__list,
.post-toc__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-toc__list li {
	position: relative;
}

.post-toc__list a {
	display: block;
	padding: 5px 10px;
	border-left: 2px solid transparent;
	border-radius: 0 8px 8px 0;
	color: var(--wp--preset--color--body-text);
}

.post-toc__list a:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.post-toc__list a[aria-current="true"] {
	border-left-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.post-toc__list .has-children > a {
	padding-right: 30px;
}

.post-toc__list ul a {
	padding-left: 22px;
	font-size: .8125rem;
}

.post-toc__top a {
	color: var(--wp--preset--color--muted);
}

.post-toc__extra {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.post-toc__extra a {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* Fold and unfold a section's subsections. */
.post-toc__toggle {
	position: absolute;
	top: 4px;
	right: 2px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
}

.post-toc__toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--wp--preset--color--muted);
	border-bottom: 1.5px solid var(--wp--preset--color--muted);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s;
}

.post-toc__toggle:hover {
	background: var(--wp--preset--color--surface-2);
}

.post-toc .is-folded > .post-toc__toggle::before {
	transform: rotate(-45deg);
}

.post-toc .is-folded > ul {
	display: none;
}

@media (min-width: 1240px) {
	.post-toc {
		position: sticky;
		top: var(--post-top);
		align-self: start;
		max-height: calc(100vh - var(--post-top) - 20px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.post-toc__head {
		position: sticky;
		top: 0;
		z-index: 1;
		background: var(--wp--preset--color--base);
	}
}

@media (max-width: 1239px) {
	.post-toc {
		padding: 14px 18px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 14px;
	}

	.post-toc__list {
		columns: 2 260px;
		column-gap: 28px;
	}

	.post-toc__list > li {
		break-inside: avoid;
	}
}

/* Appearance: segmented choices, like Wikipedia's panel. */
.appearance {
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	font-size: var(--wp--preset--font-size--small);
}

.appearance[hidden] {
	display: none;
}

.appearance__group {
	min-width: 0;
	margin: 14px 0 0;
	padding: 0;
	border: 0;
}

/* "Wide" only differs from "Standard" on screens wider than the standard page. */
@media (max-width: 1439px) {
	.appearance__group[data-option="width"] {
		display: none;
	}
}

.appearance__group legend {
	margin-bottom: 6px;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-size: .8125rem;
	font-weight: 600;
}

.appearance__choices {
	display: flex;
}

.appearance__choices label {
	position: relative;
	flex: 1;
	margin-left: -1px;
	padding: 6px 4px;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--body-text);
	font-size: .8125rem;
	text-align: center;
	cursor: pointer;
}

.appearance__choices label:first-child {
	margin-left: 0;
	border-radius: 999px 0 0 999px;
}

.appearance__choices label:last-child {
	border-radius: 0 999px 999px 0;
}

.appearance__choices input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.appearance__choices label:hover {
	color: var(--wp--preset--color--primary);
}

.appearance__choices label:has(input:checked) {
	z-index: 1;
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: #fff;
}

.appearance__choices label:has(input:focus-visible) {
	z-index: 2;
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Formulas: Preformatted blocks look like Excel's formula bar (site.js adds "Copy"). */
.wp-block-post-content .wp-block-preformatted {
	position: relative;
	padding: 12px 84px 12px 52px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: 500 .95rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	white-space: pre-wrap;
	word-break: break-word;
}

.wp-block-post-content .wp-block-preformatted::before {
	content: "fx";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 38px;
	border-right: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font: italic 600 .9rem var(--wp--preset--font-family--body);
}

.formula__copy {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	padding: 4px 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: 500 .75rem var(--wp--preset--font-family--body);
	cursor: pointer;
}

/* Callouts editors can apply to a paragraph or group: "Tip" and "Watch out". */
.is-style-tip,
.is-style-watch-out {
	padding: 14px 18px 14px 20px;
	border-left: 4px solid var(--wp--preset--color--green);
	border-radius: 0 12px 12px 0;
	background: color-mix(in srgb, var(--wp--preset--color--green) 9%, var(--wp--preset--color--base));
}

.is-style-watch-out {
	border-left-color: var(--wp--preset--color--orange);
	background: color-mix(in srgb, var(--wp--preset--color--orange) 10%, var(--wp--preset--color--base));
}

.is-style-tip::before,
.is-style-watch-out::before {
	display: block;
	margin-bottom: 2px;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	content: "Tip";
}

.is-style-watch-out::before {
	content: "Watch out";
}

/* The author's sign-off at the end of every post: written by a person, set in the accent
   serif, with a hand-drawn underline under his name. */
.signoff {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-top: var(--wp--preset--spacing--50);
	padding: 22px 24px;
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
}

.signoff__photo {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--line);
}

.signoff p {
	margin: 0;
}

.signoff__quote {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--accent);
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.35;
}

.signoff__name {
	margin-top: 8px !important;
	font-size: var(--wp--preset--font-size--small);
}

.signoff__name a {
	padding-bottom: 3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5c18-3 38-4 58-2.5s40 1.5 58-1' fill='none' stroke='%231C75BC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 6px no-repeat;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Who he is, for readers and answer engines: a short bio and his profiles. */
.signoff__bio {
	margin-top: 12px !important;
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.signoff__profiles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 8px !important;
	font-size: var(--wp--preset--font-size--small);
}

.signoff__profiles a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* On phones the photo sits above the text, so the bio gets the full width. */
@media (max-width: 599px) {
	.signoff {
		flex-direction: column;
		gap: 14px;
	}
}

/* Panels: the post sidebar cards, product promos, the PDF-guide form, feature boxes (from
   Elementor's icon boxes), and any group or column given the "Card" style in the editor. */

.sidebar-card,
.post-promo,
.guide-signup,
.feature,
.is-style-card {
	padding: 24px;
	border-radius: 20px;
	background: var(--wp--preset--color--surface);
}

.is-style-card > :first-child,
.feature > :first-child {
	margin-top: 0;
}

.feature > :last-child {
	margin-bottom: 0;
}

/* Collapsible sections (Details blocks; Elementor's tabs, toggles and accordions moved here). */
.wp-block-details {
	padding: 14px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
}

.wp-block-details + .wp-block-details {
	margin-top: 10px;
}

.wp-block-details summary {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	cursor: pointer;
}

.wp-block-details[open] summary {
	margin-bottom: 10px;
}

/* Headings inside collapsible sections and feature boxes are sub-headings there. */
:is(.wp-block-details, .feature) :is(h2, h3) {
	font-size: var(--wp--preset--font-size--large);
}

.is-style-card img {
	border-radius: 12px;
}

.sidebar-card__title,
.post-promo__title {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
}

.topic-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.topic-list li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.topic-list a {
	display: block;
	padding: 9px 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.topic-list a:hover {
	color: var(--wp--preset--color--primary);
}

/* Related posts and previous/next */

.related-posts__title {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Hide the whole block when the category has no other posts. */
.related-posts:not(:has(.wp-block-post)) {
	display: none;
}

.related-posts .wp-block-post {
	padding: 20px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.related-posts .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
}

.related-posts .wp-block-post-title a {
	color: var(--wp--preset--color--navy);
}

.related-posts .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--small);
}

.post-nav {
	padding-block: 18px;
	border-block: 1px solid var(--wp--preset--color--line);
	font-weight: 500;
}

.post-note {
	padding: 18px 22px;
	border-left: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	border-radius: 0 12px 12px 0;
}


/* The conversation under a post (the comments block in single.html). Each comment that
   starts a conversation is a card; replies hang below it on a thread line, folded behind a
   count until opened (post.js), and INDZARA's answers are marked (indzara_is_team_comment()).
   post.js adds the toolbar (search, expand all, order), "Read more" on long comments and
   shows ten conversations at a time. The text size follows the reader's choice. */

.post-comments {
	font-size: var(--post-text);
}

.post-comments .wp-block-comments-title {
	margin: 0;
}

.conversation-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	align-items: center;
	margin: 16px 0 22px;
	padding: 12px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}

.conversation-search {
	flex: 1 1 260px;
}

.conversation-search input {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 14px 10px 40px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center / 18px no-repeat;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: .9375rem;
}

.conversation-search input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}

.conversation-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.conversation-btn,
.conversation-order select,
.thread-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: 500 .8125rem/1.3 var(--wp--preset--font-family--body);
	cursor: pointer;
}

.conversation-btn:hover,
.conversation-order select:hover,
.thread-toggle:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.conversation-btn.is-primary {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.conversation-btn.is-primary:hover {
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
}

.conversation-status {
	flex-basis: 100%;
	margin: 0 4px;
	color: var(--wp--preset--color--muted);
}

.post-comments .wp-block-comment-template,
.post-comments .wp-block-comment-template ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-comments .wp-block-comment-template > li {
	margin: 0 0 14px;
	padding: 18px 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
}

.post-comments .wp-block-comment-template > li.is-out {
	display: none;
}

/* Replies: on a thread line under the comment they answer. */
.post-comments .wp-block-comment-template ol {
	margin: 12px 0 0 17px;
	padding-left: 20px;
	border-left: 2px solid var(--wp--preset--color--line);
}

.post-comments .wp-block-comment-template ol > li + li {
	margin-top: 14px;
}

.post-comments li.is-folded > ol {
	display: none;
}

.comment-card {
	margin: 0;
}

.comment-card > * {
	margin-block: 0;
}

.comment-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
}

.comment-card__head > * {
	margin: 0 !important;
}

.comment-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font: 600 .8125rem/1 var(--wp--preset--font-family--heading);
}

.comment-avatar[data-tint="1"] { background: var(--wp--preset--color--green); }
.comment-avatar[data-tint="2"] { background: var(--wp--preset--color--orange); }
.comment-avatar[data-tint="3"] { background: var(--wp--preset--color--sky); }
.comment-avatar[data-tint="4"] { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--navy); }
.comment-avatar[data-tint="5"] { background: var(--wp--preset--color--body-text); }
.comment-avatar[data-tint="team"] { background: var(--wp--preset--color--navy); }

.post-comments .wp-block-comment-author-name {
	color: var(--wp--preset--color--contrast);
	font-size: .9375rem;
	font-weight: 600;
}

.post-comments .wp-block-comment-author-name a {
	color: inherit;
}

.comment-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--primary-dark);
	font-size: .6875rem;
	font-weight: 600;
	vertical-align: 1px;
}

.post-comments .wp-block-comment-date,
.post-comments .wp-block-comment-date a {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Text and actions line up under the name, beside the avatar. */
.post-comments .wp-block-comment-content,
.post-comments .wp-block-comment-reply-link,
.comment-more,
.thread-toggle {
	margin-left: 46px !important;
}

.post-comments .wp-block-comment-content {
	margin-top: 6px !important;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.post-comments .wp-block-comment-content > * {
	margin: 0;
}

.post-comments .wp-block-comment-content > * + * {
	margin-top: .7em;
}

.post-comments .wp-block-comment-content.is-clamped {
	max-height: calc(1.65em * 6);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 55%, transparent);
	mask-image: linear-gradient(#000 55%, transparent);
}

.comment-more {
	display: block;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: 600 var(--wp--preset--font-size--small) var(--wp--preset--font-family--body);
	cursor: pointer;
}

.post-comments .wp-block-comment-reply-link {
	margin-top: 6px !important;
	font-size: var(--wp--preset--font-size--small);
}

.post-comments .wp-block-comment-reply-link a {
	font-weight: 600;
}

/* INDZARA's answers: a light blue panel. */
.post-comments li.is-team > .comment-card {
	margin-left: -10px;
	padding: 12px 12px 12px 10px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, var(--wp--preset--color--base));
}

.thread-toggle {
	margin-top: 12px;
	padding: 5px 12px 5px 10px;
	background: var(--wp--preset--color--surface);
}

.thread-toggle::before {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s;
}

.thread-toggle[aria-expanded="false"]::before {
	transform: rotate(-45deg);
}

.thread-toggle__team {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.thread-toggle__team::before {
	content: "·";
	margin-right: 8px;
	color: var(--wp--preset--color--muted);
}

mark.conversation-hit {
	padding: 0 1px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--wp--preset--color--amber) 45%, var(--wp--preset--color--base));
	color: inherit;
}

.conversation-more {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
}

.conversation-more[hidden],
.conversation-link[hidden] {
	display: none;
}

.conversation-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: 600 var(--wp--preset--font-size--small) var(--wp--preset--font-family--body);
	cursor: pointer;
}

@media (max-width: 599px) {
	.post-comments .wp-block-comment-template > li {
		padding: 14px;
	}

	.post-comments .wp-block-comment-template ol {
		margin-left: 6px;
		padding-left: 12px;
	}

	.post-comments .wp-block-comment-content,
	.post-comments .wp-block-comment-reply-link,
	.comment-more,
	.thread-toggle {
		margin-left: 0 !important;
	}
}

/* PDF-guide sign-up (patterns/chart-guide-signup.php): MailerLite's form in the site's
   look. MailerLite's script relies on the ml-* and row-* class names, so they stay. */

.guide-signup > :first-child {
	margin-top: 0;
}

.guide-signup h4 {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--large);
}

.guide-signup .ml-block-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.guide-signup .ml-field-group {
	flex: 1 1 240px;
}

.guide-signup .ml-error input[type="email"] {
	border-color: var(--wp--preset--color--orange);
}

.guide-signup .row-success p {
	margin: 0;
}

/* ---------------------------------------------------------------- forms
   One look for every form field: the PDF-guide form and Contact Form 7 forms (Contact Us).
   CF7 submit buttons get the theme button through "class:wp-element-button" in the form. */

.guide-signup input[type="email"],
.wpcf7 input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"]),
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wpcf7 textarea {
	min-height: 160px;
	border-radius: 16px;
	resize: vertical;
}

.guide-signup input[type="email"]:focus,
.wpcf7 :is(input, select, textarea):focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.wpcf7 form > p,
.wpcf7 .form-row > p {
	margin: 0 0 18px;
}

/* Two fields side by side (<div class="form-row"> in the form), stacked on narrow screens.
   Contact Form 7 puts a row's fields in one paragraph, separated by a line break. */
.wpcf7 .form-row > p {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	column-gap: 18px;
	row-gap: 18px;
}

.wpcf7 .form-row > p > br {
	display: none;
}

.wpcf7 label {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.wpcf7 label .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.wpcf7 .wpcf7-not-valid {
	border-color: var(--wp--preset--color--orange);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--wp--preset--color--orange);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
}

/* reCAPTCHA: Google's notice under each form replaces the badge, which only loads on pages
   with a form (indzara_recaptcha_form() in functions.php). Hidden with visibility, not
   display:none, which can stop reCAPTCHA from working. */
.wpcf7 .form-recaptcha {
	margin: 14px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 .form-recaptcha a {
	color: inherit;
	text-decoration: underline;
}

.grecaptcha-badge {
	visibility: hidden;
}

/* ---------------------------------------------------------------- cards and grids
   The product grid and post grid blocks (blocks/product-grid, blocks/post-grid): every
   product card and post card on the site. --columns is the most per row; narrow screens
   show fewer, never narrower than 200px. */

.card-grid {
	--gap: 24px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(200px, (100% - (var(--columns, 3) - 1) * var(--gap)) / var(--columns, 3))), 1fr));
	gap: var(--gap);
}

.card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	transition: border-color .2s, box-shadow .2s;
}

.card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--soft);
}

.card__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.post-card .card__image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.card__title a {
	color: var(--wp--preset--color--contrast);
}

.card__title a:hover {
	color: var(--wp--preset--color--primary);
}

.card__meta,
.card__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.card__meta {
	color: var(--wp--preset--color--muted);
}

.card__more {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Star rating: --rating (0–5) fills the stars from the left. */
.stars {
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 2px;
}

.stars::before {
	content: "★★★★★";
	background: linear-gradient(90deg, var(--wp--preset--color--amber) calc(var(--rating) / 5 * 100%), var(--wp--preset--color--line) 0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.card-grid__heading {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
}

.card-grid__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--40);
}

.card-grid__pages .page-numbers {
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
}

.card-grid__pages .page-numbers.current {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Shop cards (product grid "browse" mode): Free, the rating and the formats under the title. */
.product-card[hidden] {
	display: none;
}

.product-card__meta,
.product-card__formats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.product-card__free {
	color: var(--wp--preset--color--green);
	font-weight: 700;
}

.product-card__reviews,
.product-card__formats {
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- shop
   templates/archive-product.html and blocks/shop-browser: the free premium templates, laid
   out like the Shopify Theme Store. A tinted band with the title and numbers, then the
   filters on the left (search, category, format), the count and sort menu above the cards.
   Narrow screens: the filters fold behind a "Filters" button (assets/js/shop.js). */

.shop-hero,
.shop {
	padding-inline: var(--wp--style--root--padding-left, 20px) var(--wp--style--root--padding-right, 20px);
}

.shop > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* One column as wide as the page's content, its lines starting at the left edge. */
.shop-hero {
	display: grid;
	grid-template-columns: minmax(0, var(--wp--style--global--wide-size));
	justify-content: center;
	justify-items: start;
	gap: 14px;
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
}

.shop-hero > * {
	margin-block: 0;
}

.shop-hero .wc-block-breadcrumbs,
.shop-hero .woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--small);
}

.shop-hero__eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.shop-hero__title {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.shop-hero__intro {
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.shop-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 6px !important;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.shop-stats li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.shop-stats strong {
	color: var(--wp--preset--color--contrast);
	font-size: 1.15rem;
}

.shop {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

.shop [hidden] {
	display: none !important;
}

.shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.shop__count {
	margin: 0 auto 0 0;
}

.shop__count strong {
	color: var(--wp--preset--color--contrast);
}

.shop__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
}

.shop__sort select,
.shop__search {
	padding: 9px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.shop__filters-toggle {
	padding: 9px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.shop__body {
	display: grid;
	grid-template-areas: "bar" "side" "main";
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.shop__toolbar {
	grid-area: bar;
}

.shop__filters {
	grid-area: side;
}

.shop__results {
	grid-area: main;
}

.shop__filters {
	display: grid;
	gap: 22px;
	align-content: start;
}

.shop__search {
	width: 100%;
	box-sizing: border-box;
}

.shop__group {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
}

.shop__group legend {
	margin-bottom: 8px;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.shop__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.shop__option input {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
}

.shop__option-count {
	margin-left: auto;
	color: var(--wp--preset--color--muted);
}

.shop__clear,
.shop__empty button {
	justify-self: start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.shop__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--wp--preset--spacing--30);
}

.shop__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.shop__chip::after {
	content: "×";
	color: var(--wp--preset--color--muted);
	font-size: 1.1em;
	line-height: 1;
}

.shop__empty {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 16px;
}

/* Phones: two cards a row, as on the reference, so 88 templates aren't one long column. */
@media (max-width: 599px) {
	.shop .card-grid {
		--gap: 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shop .card {
		padding: 10px;
	}

	.shop .card__title {
		font-size: var(--wp--preset--font-size--small);
	}
}

@media (max-width: 899px) {
	.shop:not(.shop--filters-open) .shop__filters {
		display: none;
	}

	.shop__filters {
		padding: 18px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 16px;
	}
}

@media (min-width: 900px) {
	.shop__filters-toggle {
		display: none;
	}

	.shop__body {
		grid-template-areas: "side bar" "side main";
		grid-template-columns: 230px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
	}

	.shop__filters {
		position: sticky;
		top: calc(var(--hh, 76px) + 20px);
		align-self: start;
	}
}

/* ---------------------------------------------------------------- WooCommerce
   Carried over from the old theme's Additional CSS (Customizer CSS is stored per
   theme, so it doesn't follow a theme switch). */

.product_meta {
	display: none;
}

#wc-stripe-payment-request-button-separator,
#wc-stripe-payment-request-wrapper {
	display: none !important;
}

.woocommerce #reviews #comments h2 {
	display: none;
}

.cr-form-item-media-none {
	display: none;
}

.footable .label-default {
	background-color: #ff8347;
}

/* ---------------------------------------------------------------- product page
   templates/single-product.html: its styles are assets/css/product.css, loaded on product
   pages only (theme 0.13.0). */

/* ---------------------------------------------------------------- image placeholders
   Where an image file is missing (staging, whose media library was cleared, and the local
   test site), functions.php puts an empty picture of the image's own size in its place
   (indzara_image_placeholder()); these rules draw on it a picture sign over a light grid of
   spreadsheet cells, or an outline of a person for the author's photo. Drawn with the palette, so
   dark mode follows. The live site has its files and never shows them. */
img.indzara-placeholder {
	background:
		url(assets/images/placeholder.svg) center / auto min(64px, 55%) no-repeat,
		linear-gradient(to right, var(--wp--preset--color--line) 1px, transparent 1px) center / 72px 28px,
		linear-gradient(to bottom, var(--wp--preset--color--line) 1px, transparent 1px) center / 72px 28px,
		var(--wp--preset--color--surface);
	outline: 1px solid var(--wp--preset--color--line);
	outline-offset: -1px;
}

img.indzara-placeholder--photo {
	background: url(assets/images/placeholder-photo.svg) center / cover no-repeat, var(--wp--preset--color--surface-2);
	outline: 0;
}

/* ---------------------------------------------------------------- dark mode
   data-theme="dark" on <html>: the header's toggle, a post's Appearance panel, or the
   system setting until the reader chooses. The palette presets switch to their dark values
   (assets/css/site.css, from theme.json), so the rules above follow on their own. These
   cover the rest: navy used as a text colour, text on fills that turn light, and navy
   panels that need an edge against the dark page. */

:root[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6),
:root[data-theme="dark"] :is(.post-toc__list a[aria-current="true"], .related-posts .wp-block-post-title a) {
	color: var(--wp--preset--color--contrast);
}

:root[data-theme="dark"] .appearance__choices label:has(input:checked) {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:root[data-theme="dark"] :is(.conversation-btn.is-primary, .comment-avatar:is([data-tint="0"], [data-tint="5"])),
:root[data-theme="dark"] .conversation-btn.is-primary:hover {
	color: var(--wp--preset--color--base);
}

:root[data-theme="dark"] .rail-ad {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
}

/* Form fields nothing else styles (the comment form, plugin forms): the palette instead of
   the browser's grey dark fields. No specificity, so any other rule for a field wins. */
:where(:root[data-theme="dark"]) :where(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, select) {
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Older posts, pages and product tabs (also drawn as product descriptions) colour some text inline, from the old editor:
   headings in navy #000080 (100+ posts), some text in black (also the editor's "Black"),
   dark grey, dark blue, brown or purple, and a few white or light grey boxes. On the dark
   page those inks would vanish, so they take the palette's text colour, pure blue and
   green a lighter shade, and the light boxes the panel colour. Inline styles only give way
   to !important. Orange and teal accents read on dark and keep their colour. Stored
   content isn't changed. */
:root[data-theme="dark"] :is(.wp-block-post-content, .woocommerce-Tabs-panel, .product-description) :is([style*="#000080" i], [style*="rgb(0, 0, 128)"], [style*="#000000" i], [style*="#333333" i], [style*="#333399" i], [style*="#003366" i], [style*="#993300" i], [style*="#800080" i], [style*="#993366" i], .has-black-color) {
	color: var(--wp--preset--color--contrast) !important;
}

:root[data-theme="dark"] :is(.wp-block-post-content, .woocommerce-Tabs-panel, .product-description) :is([style*="#0000ff" i], [style*="#1c75bc" i]) {
	color: var(--wp--preset--color--primary) !important;
}

:root[data-theme="dark"] :is(.wp-block-post-content, .woocommerce-Tabs-panel, .product-description) [style*="#008000" i] {
	color: var(--wp--preset--color--green) !important;
}

:root[data-theme="dark"] :is(.wp-block-post-content, .woocommerce-Tabs-panel, .product-description) :is([style*="background-color: white" i], [style*="background-color:white" i], [style*="background-color: #fff" i], [style*="background-color:#fff" i], [style*="background-color: rgb(255" i], [style*="background-color:rgb(255" i]) {
	background-color: transparent !important;
}

:root[data-theme="dark"] :is(.wp-block-post-content, .woocommerce-Tabs-panel, .product-description) [style*="#f5f5f7" i] {
	background-color: var(--wp--preset--color--surface) !important;
}

:root[data-theme="dark"] ::selection {
	background: color-mix(in srgb, var(--wp--preset--color--sky) 35%, transparent);
	color: #fff;
}