/*
Theme Name:   AITD Child
Theme URI:    https://generatepress.com
Description:  Design layer for the AI tools site: typography, colours, spacing, header, footer and layout. Built as a child theme so GeneratePress updates never overwrite it.
Author:       Mansoor
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  aitd-child
*/

/* ---------------------------------------------------------
   1. Fonts (self-hosted, so no data goes to Google)
   Archivo and Source Serif 4, both SIL Open Font License.
   --------------------------------------------------------- */

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------
   2. Design tokens
   Change a value here and it changes everywhere on the site.
   --------------------------------------------------------- */

:root {
	--aitd-paper: #f3f5f4;
	--aitd-panel: #ffffff;
	--aitd-ink: #13201c;
	--aitd-muted: #5a6b65;
	--aitd-rule: #dde3e0;
	--aitd-rule-soft: #e8edeb;
	--aitd-field: #c8d2ce;
	--aitd-chip: #dde3e0;
	--aitd-accent: #0a5a4a;
	--aitd-accent-deep: #084a3d;
	--aitd-accent-ink: #ffffff;
	--aitd-warn: #8a5a12;

	/* Inverted surface, used for the feature panel. */
	--aitd-dark: #13201c;
	--aitd-dark-ink: #ffffff;
	--aitd-dark-muted: #b9c6ce;
	--aitd-dark-accent: #7fd8c2;

	--aitd-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--aitd-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

	--aitd-measure: 68ch;
	--aitd-radius: 6px;
	--aitd-radius-md: 10px;
	--aitd-radius-lg: 16px;
	--aitd-space: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
	--aitd-gutter: clamp(1.25rem, 0.4rem + 4vw, 5.5rem);
}

/* ---------------------------------------------------------
   3. Base typography
   --------------------------------------------------------- */

body {
	font-family: var(--aitd-serif);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--aitd-ink);
	background: var(--aitd-paper);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.main-navigation a,
button,
input,
select,
textarea,
.wp-block-button__link {
	font-family: var(--aitd-sans);
}

h1,
h2,
h3,
h4 {
	color: var(--aitd-ink);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1,
.entry-title {
	font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.7rem);
	font-weight: 700;
	line-height: 1.15;
	margin-block-end: 0.6em;
}

h2 {
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 600;
	line-height: 1.25;
	margin-block: 2em 0.6em;
}

h3 {
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
	font-weight: 600;
	line-height: 1.3;
	margin-block: 1.75em 0.5em;
}

p,
li {
	text-wrap: pretty;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > blockquote {
	max-inline-size: var(--aitd-measure);
}

a {
	color: var(--aitd-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

a:hover,
a:focus-visible {
	color: var(--aitd-accent-deep);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--aitd-accent);
	outline-offset: 2px;
}

blockquote {
	border-inline-start: 3px solid var(--aitd-accent);
	padding-inline-start: 1.25rem;
	margin-inline: 0;
	color: var(--aitd-muted);
	font-style: italic;
}

code,
kbd,
pre {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;
	font-size: 0.9em;
}

/* ---------------------------------------------------------
   4. Header and navigation
   --------------------------------------------------------- */

.site-header {
	background: var(--aitd-paper);
	border-block-end: 1px solid var(--aitd-rule);
	padding-block: 0.75rem;
}

.site-title,
.site-title a {
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.03em;
	color: var(--aitd-ink);
	text-decoration: none;
}

.site-description {
	color: var(--aitd-muted);
	font-size: 0.9rem;
	font-family: var(--aitd-sans);
}

.main-navigation {
	background: var(--aitd-paper);
	border-block-end: 1px solid var(--aitd-rule);
}

.main-navigation .main-nav ul li a {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--aitd-ink);
	text-decoration: none;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li a:focus-visible,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a {
	color: var(--aitd-accent);
	background: transparent;
	box-shadow: inset 0 -2px 0 var(--aitd-accent);
}

.main-navigation .main-nav ul ul li a {
	background: var(--aitd-paper);
	border-block-end: 1px solid var(--aitd-rule);
	box-shadow: none;
}

/* ---------------------------------------------------------
   5. Content areas
   --------------------------------------------------------- */

.site-content {
	padding-block: var(--aitd-space);
}

.entry-header {
	margin-block-end: 1.5rem;
}

.entry-meta {
	font-family: var(--aitd-sans);
	font-size: 0.88rem;
	color: var(--aitd-muted);
}

.entry-meta a {
	color: var(--aitd-muted);
}

.separate-containers .inside-article {
	padding: var(--aitd-space);
}

/* Tables anywhere in article content */

.entry-content table,
.wp-block-table table {
	border-collapse: collapse;
	inline-size: 100%;
	font-family: var(--aitd-sans);
	font-size: 0.95rem;
}

.entry-content th,
.wp-block-table th {
	text-align: start;
	font-weight: 600;
	background: var(--aitd-panel);
	border: 1px solid var(--aitd-rule);
	padding: 0.65rem 0.75rem;
}

.entry-content td,
.wp-block-table td {
	border: 1px solid var(--aitd-rule);
	padding: 0.65rem 0.75rem;
	vertical-align: top;
}

.wp-block-table {
	overflow-x: auto;
}

/* Buttons */

.wp-block-button__link,
button,
.button,
input[type="submit"] {
	font-weight: 600;
	border-radius: var(--aitd-radius);
	background: var(--aitd-accent);
	color: var(--aitd-accent-ink);
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
	background: var(--aitd-accent-deep);
	color: var(--aitd-accent-ink);
}

/* ---------------------------------------------------------
   6. Tool pages
   Re-point the tool page plugin at the site palette.
   --------------------------------------------------------- */

.aitd-tool {
	--aitd-ink: #10171e;
	--aitd-muted: #4d5a66;
	--aitd-rule: #e3e8ea;
	--aitd-paper: #ffffff;
	--aitd-panel: #f6f9f8;
	--aitd-accent: #0b5b4c;
	--aitd-pro: #0b5b4c;
	--aitd-con: #a24a17;
}

.aitd-tool .aitd-facts,
.aitd-tool .aitd-badges,
.aitd-summary__best,
.aitd-disclosure,
.aitd-meta {
	font-family: var(--aitd-sans);
}

.aitd-verdict p {
	font-family: var(--aitd-serif);
}

/* ---------------------------------------------------------
   7. Footer
   --------------------------------------------------------- */

.site-footer {
	font-family: var(--aitd-sans);
	font-size: 0.92rem;
	background: var(--aitd-panel);
	border-block-start: 1px solid var(--aitd-rule);
}

.site-footer .widget-title {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0;
	margin-block-end: 0.6rem;
}

.site-footer a {
	color: var(--aitd-ink);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--aitd-accent);
	text-decoration: underline;
}

.site-info {
	color: var(--aitd-muted);
	border-block-start: 1px solid var(--aitd-rule);
}

/* ---------------------------------------------------------
   8. Small screens
   --------------------------------------------------------- */

@media (max-width: 768px) {
	body {
		font-size: 1rem;
	}

	.separate-containers .inside-article {
		padding: 1.25rem;
	}
}

/* Respect people who turn animation off */

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

/* ---------------------------------------------------------
   9. Tools directory and homepage
   --------------------------------------------------------- */

.aitd-home,
.aitd-directory {
	max-inline-size: 1180px;
	margin-inline: auto;
	padding: var(--aitd-space) 20px 3rem;
}

.aitd-section {
	margin-block-start: 3rem;
}

.aitd-section__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	border-block-end: 1px solid var(--aitd-rule);
	padding-block-end: 0.5rem;
	margin-block-end: 1.25rem;
}

.aitd-section__head h2,
.aitd-section > h2 {
	margin: 0 0 0.75rem;
}

.aitd-section__head h2 {
	margin-block-end: 0;
}

.aitd-more {
	font-family: var(--aitd-sans);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
}

.aitd-more:hover {
	text-decoration: underline;
}

/* Hero */

.aitd-hero {
	padding-block: clamp(2rem, 1rem + 4vw, 3.5rem);
	border-block-end: 1px solid var(--aitd-rule);
}

.aitd-hero h1 {
	max-inline-size: 18ch;
	margin-block-end: 0.35em;
}

.aitd-hero__sub {
	max-inline-size: 58ch;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	color: var(--aitd-muted);
	margin-block: 0 1.75rem;
}

.aitd-hero__search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-inline-size: 640px;
}

.aitd-hero__search input[type="search"] {
	flex: 1 1 18rem;
	font-family: var(--aitd-sans);
	font-size: 1rem;
	padding: 0.85rem 1rem;
	color: var(--aitd-ink);
	background: var(--aitd-paper);
	border: 1px solid var(--aitd-rule);
	border-radius: var(--aitd-radius);
}

.aitd-hero__search button {
	padding: 0.85rem 1.4rem;
	border: 0;
	cursor: pointer;
}

.aitd-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--aitd-sans);
	font-size: 0.92rem;
	color: var(--aitd-muted);
}

.aitd-hero__points li {
	position: relative;
	padding-inline-start: 1.1rem;
}

.aitd-hero__points li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.62em;
	inset-inline-start: 0;
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background: var(--aitd-accent);
}

/* Category cards */

.aitd-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1rem;
}

.aitd-cat {
	display: grid;
	gap: 0.3rem;
	padding: 1.1rem 1.2rem;
	text-decoration: none;
	color: var(--aitd-ink);
	background: var(--aitd-paper);
	border: 1px solid var(--aitd-rule);
	border-radius: var(--aitd-radius);
	border-block-end-width: 3px;
}

.aitd-cat:hover,
.aitd-cat:focus-visible {
	color: var(--aitd-ink);
	border-block-end-color: var(--aitd-accent);
}

.aitd-cat__name {
	font-family: var(--aitd-sans);
	font-weight: 600;
}

.aitd-cat__count {
	font-family: var(--aitd-sans);
	font-size: 0.85rem;
	color: var(--aitd-muted);
}

/* Tool cards */

.aitd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1rem;
}

.aitd-card {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.15rem;
	background: var(--aitd-paper);
	border: 1px solid var(--aitd-rule);
	border-radius: var(--aitd-radius);
}

.aitd-card:hover {
	border-color: var(--aitd-accent);
}

.aitd-card__link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--aitd-sans);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--aitd-ink);
	text-decoration: none;
}

.aitd-card__link:hover,
.aitd-card__link:focus-visible {
	color: var(--aitd-accent);
}

.aitd-card__logo img {
	inline-size: 34px;
	block-size: 34px;
	object-fit: contain;
	border-radius: 4px;
}

.aitd-card__desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.aitd-card__best {
	margin: 0;
	font-family: var(--aitd-sans);
	font-size: 0.85rem;
	color: var(--aitd-muted);
}

.aitd-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	align-items: center;
	margin-block-start: auto;
	padding-block-start: 0.65rem;
	border-block-start: 1px solid var(--aitd-rule);
	font-family: var(--aitd-sans);
	font-size: 0.85rem;
}

.aitd-card__price {
	font-weight: 600;
}

.aitd-card__flag {
	padding: 0.1rem 0.5rem;
	color: var(--aitd-accent);
	border: 1px solid var(--aitd-accent);
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.78rem;
}

.aitd-card__cat {
	color: var(--aitd-muted);
	margin-inline-start: auto;
}

/* Filter bar */

.aitd-directory__head h1 {
	margin-block-end: 0.3em;
}

.aitd-directory__intro {
	max-inline-size: 60ch;
	color: var(--aitd-muted);
	margin-block: 0 1.75rem;
}

.aitd-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 0.85rem 1rem;
	align-items: end;
	padding: 1.15rem;
	background: var(--aitd-panel);
	border: 1px solid var(--aitd-rule);
	border-radius: var(--aitd-radius);
	font-family: var(--aitd-sans);
}

.aitd-field {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	font-size: 0.9rem;
}

.aitd-field label {
	color: var(--aitd-muted);
}

.aitd-field select,
.aitd-field input[type="search"],
.aitd-field input[type="number"] {
	inline-size: 100%;
	font-family: var(--aitd-sans);
	font-size: 0.95rem;
	padding: 0.55rem 0.65rem;
	color: var(--aitd-ink);
	background: var(--aitd-paper);
	border: 1px solid var(--aitd-rule);
	border-radius: var(--aitd-radius);
}

.aitd-field--search {
	grid-column: 1 / -1;
}

.aitd-field--check label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--aitd-ink);
}

.aitd-field--actions {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.aitd-filters button {
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: var(--aitd-radius);
	cursor: pointer;
	font-size: 0.95rem;
}

.aitd-clear {
	font-size: 0.9rem;
}

.aitd-count {
	font-family: var(--aitd-sans);
	font-size: 0.9rem;
	color: var(--aitd-muted);
	margin-block: 1.25rem 1rem;
}

.aitd-empty {
	padding: 2.5rem 1.5rem;
	text-align: center;
	background: var(--aitd-panel);
	border-radius: var(--aitd-radius);
}

.aitd-button {
	display: inline-block;
	padding: 0.7rem 1.2rem;
	font-family: var(--aitd-sans);
	font-weight: 600;
	color: var(--aitd-accent-ink);
	background: var(--aitd-accent);
	border-radius: var(--aitd-radius);
	text-decoration: none;
}

.aitd-button:hover,
.aitd-button:focus-visible {
	color: var(--aitd-accent-ink);
	background: var(--aitd-accent-deep);
}

/* Article lists on the homepage */

.aitd-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1.5rem;
}

.aitd-post h3 {
	margin-block: 0 0.4rem;
	font-size: 1.1rem;
}

.aitd-post h3 a {
	color: var(--aitd-ink);
	text-decoration: none;
}

.aitd-post h3 a:hover,
.aitd-post h3 a:focus-visible {
	color: var(--aitd-accent);
}

.aitd-post__excerpt {
	margin: 0 0 0.4rem;
	font-size: 0.97rem;
}

.aitd-post__meta {
	margin: 0;
	font-family: var(--aitd-sans);
	font-size: 0.82rem;
	color: var(--aitd-muted);
}

.aitd-note {
	margin-block-start: 3rem;
	padding: var(--aitd-space);
	background: var(--aitd-panel);
	border-inline-start: 4px solid var(--aitd-accent);
	border-radius: var(--aitd-radius);
}

.aitd-note h2 {
	margin-block-start: 0;
}

.aitd-note p {
	max-inline-size: 70ch;
}

/* ---------------------------------------------------------
   10. Dark mode, for readers whose device asks for it
   --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root {
		--aitd-paper: #0e1714;
		--aitd-panel: #16211d;
		--aitd-ink: #e6ede9;
		--aitd-muted: #9baaa3;
		--aitd-rule: #253129;
		--aitd-rule-soft: #1d2823;
		--aitd-field: #38463f;
		--aitd-chip: #2a3832;
		--aitd-accent: #52bfa2;
		--aitd-accent-deep: #74d2b8;
		--aitd-accent-ink: #08140f;

		/* The inverted panel lifts away from the page instead of sinking into it. */
		--aitd-dark: #1a2622;
		--aitd-dark-ink: #ffffff;
		--aitd-dark-muted: #b6c5bd;
		--aitd-dark-accent: #7ed6bd;
	}

	body,
	.site-header,
	.main-navigation,
	.separate-containers .inside-article,
	.separate-containers .comments-area,
	.separate-containers .page-header {
		background-color: var(--aitd-paper);
		color: var(--aitd-ink);
	}

	.site-footer,
	.aitd-filters,
	.aitd-empty,
	.aitd-note {
		background-color: var(--aitd-panel);
	}

	.aitd-tool {
		--aitd-paper: #121b17;
		--aitd-panel: #18231e;
		--aitd-ink: #e6ede9;
		--aitd-muted: #9baaa3;
		--aitd-rule: #28352e;
		--aitd-accent: #52bfa2;
		--aitd-accent-ink: #08140f;
		--aitd-pro: #52bfa2;
		--aitd-con: #dfa06b;
	}

	.entry-content th,
	.wp-block-table th {
		background: var(--aitd-panel);
	}

	img:not(.aitd-logo) {
		opacity: 0.94;
	}
}

/* Keep the site title and tagline legible in dark mode,
   where GeneratePress would otherwise apply its own colours. */

@media (prefers-color-scheme: dark) {
	.site-header .site-title,
	.site-header .site-title a,
	.site-header .main-title,
	.site-header .main-title a {
		color: var(--aitd-ink);
	}

	.site-header .site-description,
	.site-header .site-branding p {
		color: var(--aitd-muted);
	}

	.main-navigation .main-nav ul li a {
		color: var(--aitd-ink);
	}
}

/* Breadcrumbs */

.aitd-crumbs {
	font-family: var(--aitd-sans);
	font-size: 0.85rem;
	color: var(--aitd-muted);
	margin-block-end: 1rem;
}

.aitd-crumbs a {
	color: var(--aitd-muted);
	text-decoration: none;
}

.aitd-crumbs a:hover,
.aitd-crumbs a:focus-visible {
	color: var(--aitd-accent);
	text-decoration: underline;
}

/* Footer legal links */

.aitd-footer-links {
	margin-block-end: 0.4rem;
	line-height: 2;
}

.aitd-footer-notice {
	margin-block-end: 0.6rem;
	color: var(--aitd-muted);
	font-size: 0.85rem;
}

/* ---------------------------------------------------------
   12. Homepage — the discovery layout
   A single focal point, then the directory as a scannable
   index rather than a wall of cards.
   --------------------------------------------------------- */

.aitd-home,
.aitd-directory {
	max-inline-size: 1440px;
	margin-inline: auto;
	padding-inline: var(--aitd-gutter);
}

/* Directory page header, sharing the homepage's type scale */

.aitd-directory__head {
	padding-block: clamp(1.75rem, 1.2rem + 2vw, 3.25rem) 1.5rem;
}

.aitd-directory__head h1 {
	margin-block: 0 0.75rem;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	line-height: 1.06;
	letter-spacing: -0.032em;
	text-wrap: balance;
}

.aitd-directory__intro {
	margin: 0;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.5;
	color: var(--aitd-muted);
	max-inline-size: 34em;
}

.aitd-count {
	margin-block: 0 1rem;
	font-family: var(--aitd-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aitd-muted);
	font-variant-numeric: tabular-nums;
}

/* Hero */

.aitd-hero {
	padding-block: clamp(2rem, 1.2rem + 3vw, 4.875rem) clamp(1.75rem, 1rem + 2.5vw, 4rem);
	border-block-end: 0;
}

.aitd-hero__eyebrow {
	margin-block: 0 1.625rem;
	font-family: var(--aitd-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aitd-accent);
}

.aitd-hero h1 {
	margin-block: 0 1.625rem;
	font-size: clamp(2.375rem, 1.4rem + 4vw, 4.625rem);
	line-height: 1.02;
	letter-spacing: -0.038em;
	max-inline-size: 16em;
	text-wrap: balance;
}

.aitd-hero__sub {
	margin-block: 0 2.375rem;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
	line-height: 1.5;
	color: var(--aitd-muted);
	max-inline-size: 34em;
}

.aitd-hero__search {
	display: flex;
	gap: 0.75rem;
	max-inline-size: 620px;
	margin-block-end: 1.875rem;
}

.aitd-hero__search input[type="search"] {
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 3.625rem;
	padding-inline: 1.25rem;
	font-family: var(--aitd-sans);
	font-size: 1rem;
	color: var(--aitd-ink);
	background: var(--aitd-paper);
	border: 1px solid var(--aitd-field);
	border-radius: var(--aitd-radius-md);
}

.aitd-hero__search button {
	flex: 0 0 auto;
	block-size: 3.625rem;
	padding-inline: 1.75rem;
	font-family: var(--aitd-sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--aitd-accent-ink);
	background: var(--aitd-accent);
	border: 0;
	border-radius: var(--aitd-radius-md);
	cursor: pointer;
}

.aitd-hero__search button:hover,
.aitd-hero__search button:focus-visible {
	background: var(--aitd-accent-deep);
}

.aitd-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--aitd-sans);
	font-size: 0.9375rem;
	color: var(--aitd-muted);
}

/* Feature panel — the best thing on the site, high on the page */

.aitd-feature {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3.5rem;
	align-items: center;
	margin-block-end: 3.5rem;
	padding: 2.75rem 3rem;
	background: var(--aitd-dark);
	border-radius: 18px;
}

.aitd-feature__body {
	flex: 1 1 24rem;
}

.aitd-feature__eyebrow {
	margin-block: 0 1rem;
	font-family: var(--aitd-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aitd-dark-accent);
}

.aitd-feature h2 {
	margin-block: 0 1rem;
	font-size: clamp(1.4375rem, 1rem + 1.6vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -0.028em;
	color: var(--aitd-dark-ink);
	max-inline-size: 19em;
	text-wrap: balance;
}

.aitd-feature p {
	margin: 0;
	font-size: 1.09rem;
	line-height: 1.6;
	color: var(--aitd-dark-muted);
	max-inline-size: 44em;
}

.aitd-feature__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	block-size: 3.25rem;
	padding-inline: 1.625rem;
	background: var(--aitd-paper);
	color: var(--aitd-ink);
	border-radius: var(--aitd-radius-md);
	text-decoration: none;
	font-family: var(--aitd-sans);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.aitd-feature__cta:hover,
.aitd-feature__cta:focus-visible {
	color: var(--aitd-ink);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgb(16 23 30 / 25%);
}

/* Category chips */

.aitd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-block-end: 2.75rem;
}

.aitd-chip {
	display: inline-flex;
	align-items: center;
	block-size: 2.75rem;
	padding-inline: 1.125rem;
	border: 1px solid var(--aitd-chip);
	border-radius: 999px;
	font-family: var(--aitd-sans);
	font-size: 0.90625rem;
	font-weight: 500;
	color: var(--aitd-ink);
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.aitd-chip:hover,
.aitd-chip:focus-visible {
	border-color: var(--aitd-accent);
	background: var(--aitd-panel);
	color: var(--aitd-ink);
}

.aitd-chip__count {
	margin-inline-start: 0.5rem;
	color: var(--aitd-muted);
	font-variant-numeric: tabular-nums;
}

/* The index */

.aitd-index {
	margin-block-end: 2.5rem;
}

.aitd-index__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-block-end: 1.25rem;
}

.aitd-index__head h2 {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem);
	letter-spacing: -0.025em;
}

.aitd-index__all {
	font-family: var(--aitd-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.aitd-index__all:hover,
.aitd-index__all:focus-visible {
	text-decoration: underline;
}

/* Column header — desktop only, the rows restack below it */

.aitd-rows__head {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 150px 128px 168px;
	padding-block-end: 0.625rem;
	border-block-end: 2px solid var(--aitd-ink);
	font-family: var(--aitd-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6d7a85;
}

.aitd-row {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 150px 128px 168px;
	align-items: center;
	padding-block: 1rem;
	border-block-end: 1px solid var(--aitd-rule-soft);
	text-decoration: none;
	color: var(--aitd-ink);
	transition: background-color 160ms ease;
}

.aitd-row:hover,
.aitd-row:focus-visible {
	background-color: var(--aitd-panel);
	color: var(--aitd-ink);
}

.aitd-row__logo {
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--aitd-radius-md);
	background: var(--aitd-panel);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.aitd-row__logo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* The wrapper stacks the name over the description; both are spans. */
.aitd-row__main {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.aitd-row__name {
	font-family: var(--aitd-sans);
	font-size: 1.125rem;
	font-weight: 600;
	margin-block-end: 0.125rem;
}

.aitd-row__desc {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--aitd-muted);
	max-inline-size: 48em;
}

.aitd-row__price {
	font-family: var(--aitd-sans);
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.aitd-row__cat {
	font-family: var(--aitd-sans);
	font-size: 0.875rem;
	color: var(--aitd-muted);
}

/* Verification badges — solid means we used it, outlined means we read the docs */

.aitd-tag {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	font-family: var(--aitd-sans);
	font-size: 0.65625rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-radius: 5px;
	white-space: nowrap;
}

.aitd-tag--tested {
	background: var(--aitd-accent);
	color: var(--aitd-accent-ink);
}

.aitd-tag--docs {
	border: 1px solid var(--aitd-field);
	color: var(--aitd-muted);
}

/* Method note */

.aitd-method {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.75rem;
	align-items: center;
	margin-block: 1.5rem 3rem;
	padding: 2rem 2.5rem;
	background: var(--aitd-panel);
	border: 1px solid var(--aitd-rule);
	border-radius: var(--aitd-radius-lg);
}

.aitd-method__body {
	flex: 1 1 26rem;
}

.aitd-method h2 {
	margin-block: 0 0.5rem;
	font-size: 1.375rem;
	font-weight: 600;
}

.aitd-method p {
	margin: 0;
	font-size: 1.03rem;
	line-height: 1.6;
	max-inline-size: 60em;
}

.aitd-method__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	block-size: 3rem;
	padding-inline: 1.5rem;
	background: var(--aitd-accent);
	color: var(--aitd-accent-ink);
	border-radius: var(--aitd-radius-md);
	text-decoration: none;
	font-family: var(--aitd-sans);
	font-weight: 600;
	font-size: 0.9375rem;
}

.aitd-method__cta:hover,
.aitd-method__cta:focus-visible {
	background: var(--aitd-accent-deep);
	color: var(--aitd-accent-ink);
}

/* Reading list — comparisons and guides */

.aitd-reading {
	margin-block-end: 3rem;
}

.aitd-reading__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.aitd-read {
	padding: 1.5rem;
	border: 1px solid var(--aitd-rule);
	border-radius: var(--aitd-radius-lg);
	background: var(--aitd-paper);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.aitd-read:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgb(16 23 30 / 8%);
}

.aitd-read__kicker {
	margin-block: 0 0.5rem;
	font-family: var(--aitd-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aitd-accent);
}

.aitd-read h3 {
	margin-block: 0 0.5rem;
	font-size: 1.1875rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.aitd-read h3 a {
	text-decoration: none;
	color: var(--aitd-ink);
}

.aitd-read h3 a:hover,
.aitd-read h3 a:focus-visible {
	color: var(--aitd-accent);
}

.aitd-read p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--aitd-muted);
}

/* Narrow screens: the index restacks, the columns go away */

@media (max-width: 900px) {
	.aitd-rows__head {
		display: none;
	}

	.aitd-row {
		grid-template-columns: 36px minmax(0, 1fr) auto;
		column-gap: 0.75rem;
		row-gap: 0;
		align-items: center;
	}

	/* The name/description wrapper dissolves so every part places itself. */
	.aitd-row__main {
		display: contents;
	}

	.aitd-row__logo {
		grid-column: 1;
		grid-row: 1;
		inline-size: 36px;
		block-size: 36px;
	}

	.aitd-row__name {
		grid-column: 2;
		grid-row: 1;
		font-size: 1.0625rem;
		margin-block-end: 0;
	}

	.aitd-row__price {
		grid-column: 3;
		grid-row: 1;
		text-align: end;
		white-space: nowrap;
	}

	.aitd-row__desc {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-block: 0.5rem 0.625rem;
		max-inline-size: none;
	}

	.aitd-row__verified {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	/* The category repeats the chips above it and would force the price
	   column wide on a narrow screen, so the row drops it here. */
	.aitd-row__cat {
		display: none;
	}

	.aitd-feature,
	.aitd-method {
		padding: 1.5rem 1.375rem;
	}

	.aitd-hero__search {
		flex-direction: column;
	}

	.aitd-hero__search button {
		inline-size: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aitd-feature__cta,
	.aitd-read,
	.aitd-row,
	.aitd-chip {
		transition: none;
	}
}

/* ---------------------------------------------------------
   Article share cards
   Each article has a title card as its featured image. It is
   made for social previews and list views; printed above the
   headline it only repeats it, so the article itself hides it.
   --------------------------------------------------------- */

.single-post .featured-image.page-header-image-single {
	display: none;
}

/* ---------------------------------------------------------
   Presentation and layout pass
   Everything below refines what is already in this file.
   Nothing above is removed. Deleting this whole block returns
   the site to exactly how it looked before.
   --------------------------------------------------------- */

/* --- The masthead ----------------------------------------
   The brand was set in the body serif at a muted grey, which
   made the name of the site the quietest thing on the page.
   It is set in the UI face at full ink, and the header band is
   shallower so it stops eating the first screen. */

.site-header .site-title,
.site-header .main-title {
	font-family: var(--aitd-sans);
	font-size: 1.3125rem;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--aitd-ink);
}

.site-header .site-title a,
.site-header .main-title a {
	color: inherit;
}

.site-header .inside-header {
	padding-block: 1.125rem;
}

/* --- Eyebrows --------------------------------------------
   Tracked-out capitals above a heading are the most common
   tell of a templated page, and they were shouting a line that
   is really a quiet credit. Sentence case, normal spacing. */

.aitd-hero__eyebrow,
.aitd-feature__eyebrow,
.aitd-rows__head {
	text-transform: none;
	letter-spacing: 0;
}

.aitd-hero__eyebrow {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--aitd-muted);
}

.aitd-feature__eyebrow {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--aitd-dark-muted);
}

.aitd-rows__head {
	font-size: 0.78125rem;
	font-weight: 600;
	color: var(--aitd-muted);
}

/* --- The headline ----------------------------------------
   It was louder than the evidence underneath it. Down a step,
   and held to a measure that breaks in two lines rather than
   running the full width of the page. */

.aitd-hero h1 {
	font-size: clamp(2.25rem, 1.7rem + 2.3vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -1.5px;
	max-width: 20ch;
}

.aitd-hero__sub {
	font-size: 1.1875rem;
	line-height: 1.6;
	max-width: 54ch;
}

/* --- The three claims become a panel ---------------------
   They were a plain bulleted list trailing off under the
   search box, which read as filler. As a bordered panel with
   ticks they read as the summary of what the site actually
   does, which is what they are. */

.aitd-hero__points {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 1.25rem 1.375rem;
	border: 1px solid var(--aitd-rule);
	border-radius: var(--aitd-radius-md);
	background: var(--aitd-panel);
	display: grid;
	gap: 0.75rem;
}

.aitd-hero__points li {
	position: relative;
	margin: 0;
	padding-inline-start: 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--aitd-ink);
}

.aitd-hero__points li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.1875rem;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	border-radius: 50%;
	background: var(--aitd-accent);
	color: var(--aitd-accent-ink);
	font-size: 0.6875rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- The search box --------------------------------------
   It was an unstyled browser field, which is the single
   loudest "unfinished" signal on the page. */

.aitd-hero__search {
	display: flex;
	gap: 0.5rem;
	max-width: 34rem;
	margin-block-start: 1.75rem;
}

.aitd-hero__search input[type="search"] {
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 3rem;
	padding-inline: 0.9375rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--aitd-ink);
	background: var(--aitd-panel);
	border: 1px solid var(--aitd-field);
	border-radius: var(--aitd-radius);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.aitd-hero__search input[type="search"]::placeholder {
	color: var(--aitd-muted);
	opacity: 1;
}

.aitd-hero__search input[type="search"]:focus {
	outline: none;
	border-color: var(--aitd-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--aitd-accent) 22%, transparent);
}

.aitd-hero__search button {
	flex: 0 0 auto;
	block-size: 3rem;
	padding-inline: 1.375rem;
	font-family: var(--aitd-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--aitd-accent-ink);
	background: var(--aitd-accent);
	border: 1px solid var(--aitd-accent);
	border-radius: var(--aitd-radius);
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.aitd-hero__search button:hover {
	background: var(--aitd-accent-deep);
	border-color: var(--aitd-accent-deep);
}

/* --- Two columns on a wide screen ------------------------
   On a desktop the hero was a single narrow stack with a large
   empty right-hand side. The reading path stays on the left;
   the claims panel moves alongside it. Below this width it
   stays as one column, which is correct on a phone. */

@media (min-width: 60rem) {
	.aitd-hero {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}

	.aitd-hero__eyebrow {
		grid-column: 1;
		grid-row: 1;
	}

	.aitd-hero h1 {
		grid-column: 1;
		grid-row: 2;
	}

	.aitd-hero__sub {
		grid-column: 1;
		grid-row: 3;
	}

	.aitd-hero__search {
		grid-column: 1;
		grid-row: 4;
	}

	.aitd-hero__points {
		grid-column: 2;
		grid-row: 1 / span 4;
		margin-block-start: 0.25rem;
	}
}

/* --- The directory rows ----------------------------------
   The price is the thing people came for, so it is set in the
   UI face with lining figures that line up down the column,
   and the supporting columns step back. */

.aitd-row__price {
	font-family: var(--aitd-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--aitd-ink);
}

.aitd-row__verified,
.aitd-row__cat {
	color: var(--aitd-muted);
	font-variant-numeric: tabular-nums;
}

.aitd-row {
	transition: background-color 120ms ease;
}

.aitd-row:hover {
	background: var(--aitd-rule-soft);
}

/* --- Category pills --------------------------------------
   Fourteen categories at full button height became a wall on
   a phone. Same pill, two thirds of the bulk. */

.aitd-chips {
	gap: 0.5rem;
	margin-block-end: 3rem;
}

.aitd-chip {
	block-size: 2.25rem;
	padding-inline: 0.875rem;
	font-size: 0.84375rem;
	transition: background-color 120ms ease, border-color 120ms ease;
}

/* --- Vertical rhythm -------------------------------------
   Every section sat the same distance from the next, so
   nothing led. The feature and the directory now carry more
   air around them than the rows of links do. */

.aitd-feature {
	margin-block-end: 4.5rem;
}

.aitd-index {
	margin-block-end: 4.5rem;
}

.aitd-method {
	margin-block-end: 3.5rem;
}

/* --- Keyboard focus --------------------------------------
   The browser default outline was being lost against the dark
   panel. This is also the kind of detail that separates a
   finished site from a nearly finished one. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--aitd-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.aitd-row,
	.aitd-chip,
	.aitd-hero__search input[type="search"],
	.aitd-hero__search button {
		transition: none;
	}
}

/* ---------------------------------------------------------
   Header logo
   The uploaded file is a 1254x1254 square holding the mark
   above the wordmark. At header size that inner wordmark is
   only a few pixels tall and unreadable, and it repeats the
   site name standing next to it as live text, so the image is
   cropped to the mark alone.

   The crop was measured off the file. The mark occupies
   x 248-1002 and y 211-850; the wordmark begins at y 877. The
   box below is the mark plus 20px of air on each side, which
   is 794 x 679 at offset 228,191 - deliberately not square,
   because a square box centred on the mark would reach past
   y 877 and catch the top of the wordmark. The container
   carries that ratio and the image is placed by percentage,
   so the crop holds at any size.
   --------------------------------------------------------- */

.site-header .inside-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.site-header .site-branding-container {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-inline-size: 0;
}

.site-header .site-logo {
	flex: 0 0 auto;
	block-size: 2.25rem;
	aspect-ratio: 794 / 679;
	margin: 0;
}

.site-header .site-logo a {
	display: block;
	position: relative;
	overflow: hidden;
	inline-size: 100%;
	block-size: 100%;
}

.site-header .site-logo img.header-image {
	position: absolute;
	inline-size: 157.93%;
	max-inline-size: none;
	block-size: auto;
	inset-inline-start: -28.72%;
	inset-block-start: -28.13%;
}

.site-header .site-branding .main-title {
	margin: 0;
}

body {
	overflow-x: hidden;
}

/* Below the menu breakpoint the primary nav collapses into the
   toggle and is left one pixel tall, but it still painted its
   own bottom border, which floated under the masthead as a
   stray rule. The nav itself must stay in the flow for the
   toggle to open it, so only the border goes. */

@media (max-width: 48rem) {

	.site-header .main-navigation.sub-menu-right,
	.site-header .main-navigation.mobile-menu-control-wrapper {
		border-block-end: 0;
	}

	.site-header .site-logo {
		block-size: 1.875rem;
	}
}

/* ---------------------------------------------------------
   Footer inner bar
   The theme nests its own <footer class="site-info"> inside
   .site-footer and paints it white. The dark-mode rules above
   recolour the outer wrapper only, so in dark mode the inner
   bar stayed white with muted grey text sitting on it, which
   was both a bright slab at the foot of the page and close to
   unreadable. It follows the wrapper now.
   --------------------------------------------------------- */

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

	.site-footer .site-info,
	.site-footer .footer-widgets,
	.site-footer .footer-bar {
		background-color: var(--aitd-panel);
		color: var(--aitd-muted);
	}

	.site-footer .site-info a,
	.site-footer .footer-widgets a {
		color: var(--aitd-ink);
	}
}

/* ---------------------------------------------------------
   Archive titles and sidebar
   Two faults that showed on every archive (Best Tools,
   Guides, and the rest), not just one page.

   The parent theme colours post title links #222. Against the
   light page that is fine, but the dark palette never
   overrode it, so on an archive in dark mode the headlines
   were dark grey on near-black at a contrast ratio of 1.15 -
   the main content of the page, invisible.

   The sidebar widgets were the same mistake as the footer:
   containers the dark rules never reached, so they stayed
   white slabs with light text sitting on them.

   Both are written against the tokens rather than fixed
   colours, so they follow whichever mode is in use instead of
   needing a second set of rules.
   --------------------------------------------------------- */

.entry-title a {
	color: var(--aitd-ink);
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--aitd-accent);
}

.widget-area .widget {
	background-color: var(--aitd-panel);
	color: var(--aitd-ink);
	border: 1px solid var(--aitd-rule-soft);
	border-radius: var(--aitd-radius-md);
}

.widget-area .widget h2,
.widget-area .widget .wp-block-heading,
.widget-area .widget .widget-title,
.widget-area .widget label {
	color: var(--aitd-ink);
}

.widget-area .widget a {
	color: var(--aitd-accent);
}

.widget-area .widget a:hover,
.widget-area .widget a:focus {
	color: var(--aitd-accent-deep);
}

.widget-area .wp-block-search__input {
	background-color: var(--aitd-panel);
	color: var(--aitd-ink);
	border: 1px solid var(--aitd-field);
	border-radius: var(--aitd-radius);
}

.widget-area .wp-block-search__button {
	background-color: var(--aitd-accent);
	color: var(--aitd-accent-ink);
	border: 1px solid var(--aitd-accent);
	border-radius: var(--aitd-radius);
}

/* ---------------------------------------------------------
   Compare page runs full width
   The compare tool is a wide, two-column interface, and beside
   the sidebar it was squeezed into roughly half the width it
   needs. The theme decides this in PHP, but PHP edits cannot
   be saved on this host, so it is done here instead.
   --------------------------------------------------------- */

.page-id-200 .widget-area.is-right-sidebar {
	display: none;
}

.page-id-200 .content-area {
	inline-size: 100%;
	max-inline-size: 100%;
}

/* ---------------------------------------------------------
   Article share cards in dark mode
   Every article card is drawn on a near-white background
   (measured mean luminance 234-240), so on the dark palette
   each one sat under its headline as a bright slab.

   These are flat two-colour cards, not photographs, so
   inverting lightness and turning the hue back through 180
   degrees gives a correct dark version: the paper goes dark,
   the type goes light, and the green stays green. Doing it
   here rather than by editing the files leaves the originals
   untouched, which matters because the same images are the
   preview cards used when an article is shared.

   Scoped to the card filenames so a real photograph added
   later is not inverted.
   --------------------------------------------------------- */

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

	article img[src*="-card"] {
		filter: invert(1) hue-rotate(180deg);
	}
}

/* ---------------------------------------------------------
   Touch targets on small screens
   The footer links sit on a 16px line and the directory link
   on 26px, both under the 24px minimum WCAG 2.2 asks for and
   well under the 44px that is comfortable with a thumb. The
   text size is right for the design, so the padding grows
   rather than the type.
   --------------------------------------------------------- */

@media (max-width: 48rem) {

	.site-footer .site-info a,
	.site-footer .copyright-bar a {
		display: inline-block;
		padding-block: 0.625rem;
		padding-inline: 0.1875rem;
	}

	.aitd-index__all,
	.aitd-feature__cta,
	.aitd-method__cta {
		display: inline-block;
		padding-block: 0.5rem;
	}
}