/**
 * AI Gear Stack — design system.
 *
 * The brief: a premium technology publication, not a coupon site. The way that
 * gets achieved here is by subtraction — one accent colour, one commercial
 * colour, real hierarchy from type size and weight rather than decoration, and
 * no gradients, glows or animated backgrounds anywhere.
 *
 * Layered on top of Blocksy so the theme's own layout engine keeps working;
 * this file re-points Blocksy's custom properties rather than fighting its CSS.
 */

/* =====================================================================
   1. Tokens
   ================================================================== */

:root {
	/* --- Brand palette ------------------------------------------------
	   Deep navy for authority, a single confident blue for interaction,
	   and a warm amber reserved exclusively for commercial actions. Keeping
	   the commercial colour out of the editorial palette is what lets a
	   reader tell an article link from a purchase button at a glance. */
	--aigs-navy-900: #0b1420;
	--aigs-navy-800: #0e1c2c;
	--aigs-navy-700: #14273c;
	--aigs-slate-600: #47535f;
	--aigs-slate-400: #6b7885;
	--aigs-line:      #e3e8ed;
	--aigs-line-soft: #eef1f5;
	--aigs-paper:     #ffffff;
	--aigs-paper-2:   #f6f8fa;
	--aigs-paper-3:   #fafbfc;

	--aigs-blue-600:  #1a4fd6;
	--aigs-blue-700:  #1440b0;
	--aigs-blue-050:  #eef3fe;

	--aigs-amber-700: #b45309;
	--aigs-amber-800: #8f4107;

	--aigs-green-700: #0f6f47;
	--aigs-red-700:   #a3341f;

	/* --- Type ---------------------------------------------------------
	   Space Grotesk has enough character to make headlines look designed;
	   Inter is the most legible screen face available for long technical
	   prose. The monospace stack is system-provided — a third webfont would
	   cost more than it returns. */
	--aigs-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--aigs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--aigs-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	/* Fluid type scale — clamp() means no breakpoint-by-breakpoint overrides
	   and no layout jump at an arbitrary viewport width. */
	--aigs-t-xs:  0.78rem;
	--aigs-t-sm:  0.875rem;
	--aigs-t-base: 1.0625rem;
	--aigs-t-lg:  clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
	--aigs-t-h4:  clamp(1.15rem, 0.6vw + 1rem, 1.35rem);
	--aigs-t-h3:  clamp(1.35rem, 1vw + 1.05rem, 1.7rem);
	--aigs-t-h2:  clamp(1.6rem, 1.6vw + 1.1rem, 2.2rem);
	--aigs-t-h1:  clamp(2rem, 3vw + 1.2rem, 3.15rem);
	--aigs-t-display: clamp(2.4rem, 4.2vw + 1.2rem, 4rem);

	/* The reading measure is expressed in rem, not ch. `ch` is font-relative,
	   so the same value resolves to a very different width for a 35px display
	   heading than for 17px body text — which pulls headings and paragraphs out
	   of alignment inside a centred column. */
	--aigs-measure: 44rem;
	--aigs-measure-wide: 54rem;
	--aigs-radius: 10px;
	--aigs-radius-sm: 6px;
}

/* Blocksy reads these; re-pointing them themes the whole parent theme at once. */
:root {
	--theme-palette-color-1: var(--aigs-blue-600);
	--theme-palette-color-2: var(--aigs-blue-700);
	--theme-palette-color-3: var(--aigs-slate-600);
	--theme-palette-color-4: var(--aigs-navy-900);
	--theme-palette-color-5: var(--aigs-line);
	--theme-palette-color-6: var(--aigs-paper-2);
	--theme-palette-color-7: var(--aigs-paper-3);
	--theme-palette-color-8: var(--aigs-paper);

	--theme-font-family: var(--aigs-font-body);
	--theme-font-weight: 400;
	--theme-text-color: var(--aigs-slate-600);
	--theme-link-initial-color: var(--aigs-blue-600);
	--theme-link-hover-color: var(--aigs-blue-700);
	--theme-heading-color: var(--aigs-navy-900);
	--theme-border-color: var(--aigs-line);
	--theme-content-spacing: 1.5em;
	--theme-content-width: 760px;
	--theme-normal-container-max-width: 1240px;
	--theme-narrow-container-max-width: 760px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--aigs-navy-900: #e8edf2;
		--aigs-slate-600: #a8b4c0;
		--aigs-slate-400: #8592a0;
		--aigs-line:      #263140;
		--aigs-line-soft: #1c2634;
		--aigs-paper:     #131b25;
		--aigs-paper-2:   #18212d;
		--aigs-paper-3:   #101820;
		--aigs-blue-600:  #7ba4ff;
		--aigs-blue-700:  #9dbcff;
		--aigs-blue-050:  #1a2740;
		--aigs-amber-700: #d97a1c;
		--aigs-amber-800: #ef8f2e;
		--aigs-green-700: #4bbd8a;
		--aigs-red-700:   #e58573;
	}
}

[data-theme="dark"] {
	--aigs-navy-900: #e8edf2;
	--aigs-slate-600: #a8b4c0;
	--aigs-slate-400: #8592a0;
	--aigs-line:      #263140;
	--aigs-line-soft: #1c2634;
	--aigs-paper:     #131b25;
	--aigs-paper-2:   #18212d;
	--aigs-paper-3:   #101820;
	--aigs-blue-600:  #7ba4ff;
	--aigs-blue-700:  #9dbcff;
	--aigs-blue-050:  #1a2740;
	--aigs-amber-700: #d97a1c;
	--aigs-amber-800: #ef8f2e;
	--aigs-green-700: #4bbd8a;
	--aigs-red-700:   #e58573;
}

/* =====================================================================
   2. Typography
   ================================================================== */

body {
	font-family: var(--aigs-font-body);
	font-size: var(--aigs-t-base);
	line-height: 1.7;
	font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	color: var(--aigs-slate-600);
	background: var(--aigs-paper);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .ct-title {
	font-family: var(--aigs-font-display);
	color: var(--aigs-navy-900);
	letter-spacing: -0.018em;
	line-height: 1.18;
	font-weight: 700;
	text-wrap: balance;
}

h1, .entry-title { font-size: var(--aigs-t-h1); }
h2 { font-size: var(--aigs-t-h2); margin-top: 2.2em; }
h3 { font-size: var(--aigs-t-h3); margin-top: 1.9em; }
h4 { font-size: var(--aigs-t-h4); margin-top: 1.6em; letter-spacing: -0.01em; }

/* Long-form reading measure. Beyond about 70 characters the eye loses the line
   return, so the editorial column is capped rather than filling the viewport.
   Applied to the whole constrained flow in one rule so every child shares the
   same left edge — WordPress centres these children, and giving them different
   widths is what makes a page look misaligned. */
.entry-content.is-layout-constrained > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) {
	max-width: var(--aigs-measure);
}

/* Pages carry no sidebar, so their container is wide and WordPress centres the
   reading column inside it. Centre the page header on the same axis, otherwise
   the title sits at the container edge and the body text starts 270px to its
   right — which reads as a broken layout rather than a design choice. */
.page .entry-header,
.page .page-title,
.page .page-description,
.page .aigs-breadcrumbs {
	max-width: var(--aigs-measure);
	margin-inline: auto;
}

/* Component blocks — comparison tables, recommendation cards, verdict boxes —
   earn a little more room than running prose. */
.entry-content.is-layout-constrained > .aigs-block,
.entry-content.is-layout-constrained > figure,
.entry-content.is-layout-constrained > .wp-block-table {
	max-width: var(--aigs-measure-wide);
}

.entry-content p { margin-bottom: 1.5em; }
.entry-content li { margin-bottom: 0.45em; line-height: 1.65; }

/* Editorial links are underlined; component links (tiles, buttons, cards) are
   not — the component itself already reads as interactive, and underlining
   every child of a card link turns it into a wall of rules. */
.entry-content a:not(.aigs-cta):not(.aigs-btn):not(.aigs-tile):not(.aigs-related__link):not(.aigs-section__more):not(.wp-block-button__link) {
	color: var(--aigs-blue-600);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--aigs-blue-600) 40%, transparent);
	transition: text-decoration-color .15s ease;
}
.entry-content a:not(.aigs-cta):not(.aigs-btn):not(.aigs-tile):not(.aigs-related__link):hover { text-decoration-color: currentColor; }

/* Belt and braces against any parent-theme rule that underlines all links. */
.aigs-tile, .aigs-btn, .aigs-related__link, .aigs-section__more,
.aigs-tile:hover, .aigs-btn:hover, .aigs-related__link:hover { text-decoration: none; }
.aigs-section__more:hover { text-decoration: underline; }

.entry-content blockquote {
	margin: 2em 0;
	padding: 0.2em 0 0.2em 1.4em;
	border-left: 3px solid var(--aigs-blue-600);
	font-size: var(--aigs-t-lg);
	line-height: 1.6;
	color: var(--aigs-navy-900);
}

.entry-content code,
.entry-content kbd {
	font-family: var(--aigs-font-mono);
	font-size: 0.88em;
	padding: 0.15em 0.4em;
	background: var(--aigs-paper-2);
	border: 1px solid var(--aigs-line);
	border-radius: 4px;
}

.entry-content pre {
	font-family: var(--aigs-font-mono);
	font-size: var(--aigs-t-sm);
	padding: 1.1rem 1.25rem;
	background: var(--aigs-navy-800);
	color: #dfe7f0;
	border-radius: var(--aigs-radius-sm);
	overflow-x: auto;
}
.entry-content pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Numerals in specification contexts should line up column to column. */
.aigs-table, .aigs-kspec__v, .aigs-verdict__score, .aigs-score-chip {
	font-variant-numeric: tabular-nums;
}

/* =====================================================================
   3. Accessibility
   ================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--aigs-blue-600);
	outline-offset: 2px;
	border-radius: 3px;
}

/* A visible skip link, not one that only appears to screen readers. */
.skip-link:focus,
.ct-skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 999999;
	width: auto; height: auto;
	padding: 12px 20px;
	clip: auto; clip-path: none;
	background: var(--aigs-navy-900);
	color: #fff;
	font-weight: 600;
	border-radius: var(--aigs-radius-sm);
}

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

/* =====================================================================
   4. Header
   ================================================================== */

header[data-header] {
	border-bottom: 1px solid var(--aigs-line);
}

.site-title, .ct-logo-container .site-title {
	font-family: var(--aigs-font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	/* The masthead must never wrap to two lines — it stops reading as a
	   wordmark the moment it does. */
	white-space: nowrap;
}

.ct-logo-container { flex: none; }

@media (max-width: 420px) {
	.site-title, .ct-logo-container .site-title { font-size: 19px !important; }
}

/* Navigation: quiet until hovered, with a deliberate underline rather than a
   colour-fill pill. Reads as a publication masthead, not an app toolbar. */
.header-menu-1 > li > a,
[data-menu] > li > a {
	font-family: var(--aigs-font-body);
	font-weight: 550;
	font-size: 0.94rem;
	letter-spacing: 0.002em;
}

/* =====================================================================
   5. Editorial furniture
   ================================================================== */

/* Section label — the small uppercase kicker above a homepage block. */
.aigs-kicker {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--aigs-font-body);
	font-size: var(--aigs-t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aigs-blue-600);
}

.aigs-section {
	margin: 0;
	padding: clamp(2.25rem, 4vw, 3.5rem) 0;
	border-bottom: 1px solid var(--aigs-line-soft);
}
.aigs-section:last-child { border-bottom: 0; }

.aigs-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.aigs-section__title {
	margin: 0;
	font-size: var(--aigs-t-h2);
}

.aigs-section__intro {
	margin: 0.5rem 0 0;
	max-width: 62ch;
	color: var(--aigs-slate-600);
	font-size: var(--aigs-t-lg);
	line-height: 1.55;
}

.aigs-section__more {
	flex: none;
	font-weight: 600;
	font-size: var(--aigs-t-sm);
	color: var(--aigs-blue-600);
	text-decoration: none;
	white-space: nowrap;
}
.aigs-section__more:hover { text-decoration: underline; }

/* --- Hero ---------------------------------------------------------- */

.aigs-hero {
	padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--aigs-line);
	background: var(--aigs-paper);
}

.aigs-hero__inner { max-width: 900px; }

.aigs-hero__eyebrow {
	display: inline-block;
	margin-bottom: 1.1rem;
	padding: 0.35em 0.8em;
	background: var(--aigs-blue-050);
	color: var(--aigs-blue-700);
	font-size: var(--aigs-t-xs);
	font-weight: 650;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-radius: 99px;
}

.aigs-hero__title {
	margin: 0 0 1rem;
	font-size: var(--aigs-t-display);
	line-height: 1.06;
	letter-spacing: -0.032em;
}

.aigs-hero__sub {
	margin: 0 0 1.5rem;
	max-width: 60ch;
	font-size: clamp(1.05rem, 1vw + 0.9rem, 1.3rem);
	line-height: 1.55;
	color: var(--aigs-slate-600);
}

.aigs-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.aigs-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 1.5em;
	font-weight: 620;
	font-size: 0.98rem;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--aigs-radius-sm);
	border: 1px solid transparent;
	transition: background-color .15s ease, border-color .15s ease;
}

.aigs-btn--primary { background: var(--aigs-navy-900); color: var(--aigs-paper); }
.aigs-btn--primary:hover { background: var(--aigs-navy-700); color: var(--aigs-paper); }

.aigs-btn--ghost { background: transparent; color: var(--aigs-navy-900); border-color: var(--aigs-line); }
.aigs-btn--ghost:hover { border-color: var(--aigs-navy-900); color: var(--aigs-navy-900); }

/* Credibility strip under the hero — facts about how the site works, not
   self-awarded badges. */
.aigs-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--aigs-line);
	font-size: var(--aigs-t-sm);
	color: var(--aigs-slate-400);
}
.aigs-hero__trust span { display: inline-flex; align-items: center; gap: 0.45em; }
.aigs-hero__trust svg { flex: none; color: var(--aigs-blue-600); }

/* --- Content grids ------------------------------------------------- */

.aigs-grid {
	display: grid;
	gap: clamp(0.9rem, 2vw, 1.35rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.aigs-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.aigs-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

.aigs-tile,
.aigs-tile:hover,
.aigs-tile *,
.aigs-related__link,
.aigs-related__link * {
	/* The whole tile is one link; underlining every child turns a card into a
	   wall of blue rules. The hover treatment carries the affordance instead. */
	text-decoration: none;
}

.aigs-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.35rem 1.4rem;
	background: var(--aigs-paper);
	border: 1px solid var(--aigs-line);
	border-radius: var(--aigs-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.aigs-tile:hover {
	border-color: var(--aigs-blue-600);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -22px rgba(11, 20, 32, 0.55);
}

.aigs-tile__kind {
	margin-bottom: 0.55rem;
	font-size: var(--aigs-t-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--aigs-blue-600);
}

.aigs-tile__title {
	margin: 0 0 0.5rem;
	font-family: var(--aigs-font-display);
	font-size: 1.08rem;
	font-weight: 650;
	line-height: 1.32;
	letter-spacing: -0.012em;
	color: var(--aigs-navy-900);
}

.aigs-tile__desc {
	margin: 0;
	font-size: var(--aigs-t-sm);
	line-height: 1.55;
	color: var(--aigs-slate-600);
}

.aigs-tile__meta {
	margin-top: auto;
	padding-top: 0.9rem;
	font-size: var(--aigs-t-xs);
	color: var(--aigs-slate-400);
}

/* Pillar tiles get a numeric marker rather than an icon: no stock iconography,
   and it scales to any number of pillars. */
.aigs-tile--pillar .aigs-tile__title { font-size: 1.15rem; }

/* --- Newsletter ----------------------------------------------------- */

.aigs-newsletter {
	padding: clamp(2rem, 4vw, 3rem);
	/* Deliberately inverted in both colour schemes: the newsletter panel is
	   the one place on the page that should read as a distinct surface. It
	   therefore uses fixed values rather than theme tokens. */
	background: #0b1420;
	color: #e8edf2;
	border-radius: var(--aigs-radius);
}
.aigs-newsletter__title {
	margin: 0 0 0.6rem;
	color: #fff;
	font-size: var(--aigs-t-h2);
}
.aigs-newsletter__desc { margin: 0 0 1.4rem; max-width: 56ch; color: #b6c2ce; }

.aigs-newsletter__form { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 520px; }
.aigs-newsletter__input {
	flex: 1 1 240px;
	padding: 0.8em 1em;
	font-size: 1rem;
	color: var(--aigs-navy-900);
	background: #fff;
	border: 1px solid transparent;
	border-radius: var(--aigs-radius-sm);
}
.aigs-newsletter__note { margin: 1rem 0 0; font-size: var(--aigs-t-xs); color: #93a2b1; }

/* =====================================================================
   6. Footer
   ================================================================== */

footer[data-footer] { border-top: 1px solid var(--aigs-line); }

.aigs-footer-cols {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.aigs-footer-cols h3 {
	margin: 0 0 0.8rem;
	font-family: var(--aigs-font-body);
	font-size: var(--aigs-t-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--aigs-slate-400);
}
.aigs-footer-cols ul { margin: 0; padding: 0; list-style: none; }
.aigs-footer-cols li { margin-bottom: 0.5rem; }
.aigs-footer-cols a {
	font-size: var(--aigs-t-sm);
	color: var(--aigs-slate-600);
	text-decoration: none;
}
.aigs-footer-cols a:hover { color: var(--aigs-blue-600); text-decoration: underline; }

/* =====================================================================
   7. Archives
   ================================================================== */

.aigs-archive-intro {
	max-width: 68ch;
	margin: 0 auto 2.5rem;
	font-size: var(--aigs-t-lg);
	line-height: 1.6;
	color: var(--aigs-slate-600);
}

/* =====================================================================
   8. Print
   ================================================================== */

@media print {
	header[data-header], footer[data-footer],
	.aigs-related, .aigs-newsletter, .aigs-sticky { display: none !important; }
	body { font-size: 11pt; color: #000; }
	.entry-content a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* =====================================================================
   9. Sidebar panels
   ================================================================== */

.aigs-sidebar-panel {
	padding: 1.25rem 1.35rem;
	margin-bottom: 1.5rem;
	background: var(--aigs-paper-2);
	border: 1px solid var(--aigs-line);
	border-radius: var(--aigs-radius);
}

.aigs-sidebar-panel h3 {
	margin: 0 0 0.7rem;
	font-family: var(--aigs-font-body);
	font-size: var(--aigs-t-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--aigs-slate-400);
}

.aigs-sidebar-panel p {
	margin: 0 0 0.9rem;
	font-size: var(--aigs-t-sm);
	line-height: 1.6;
	color: var(--aigs-slate-600);
}

.aigs-sidebar-panel ul { margin: 0; padding: 0; list-style: none; }
.aigs-sidebar-panel li { margin-bottom: 0.5rem; line-height: 1.4; }

.aigs-sidebar-panel a {
	font-size: var(--aigs-t-sm);
	font-weight: 550;
	color: var(--aigs-navy-900);
	text-decoration: none;
}
.aigs-sidebar-panel a:hover { color: var(--aigs-blue-600); text-decoration: underline; }