/*
 * Layout primitives: container, grid, and the structural regions
 * (site header, footer, primary content areas). Mobile-first.
 */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1 0 auto;
}

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--narrow {
	max-width: 48rem;
}

.container--wide {
	max-width: 90rem;
}

/* Simple CSS grid utility for card/tool listings */
.grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.grid--2 {
	grid-template-columns: 1fr;
}

.grid--3 {
	grid-template-columns: 1fr;
}

.grid--4 {
	grid-template-columns: 1fr;
}

/* Category grid: fixed 2-up/4-up regardless of container width, distinct
   from the general-purpose .grid utility above. */
.category-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, 1fr);
}

/* Site header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--color-surface) 92%, transparent);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--header-height);
}

.site-branding {
	display: flex;
	align-items: center;
	min-width: 0;
}

.site-branding a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: var(--color-ink);
}

.site-logo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff;
}

.site-logo-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.site-title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	letter-spacing: -0.01em;
	line-height: 1;
}

.site-title--stacked {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}

.site-title__line {
	font-size: var(--text-md);
}

.site-title__line--muted {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--color-muted);
	letter-spacing: 0;
}

.site-description {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-muted);
}

/* Header actions (nav + search + mobile toggle) */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

/* Header search */
.header-search {
	position: relative;
}

.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-ink);
}

.search-toggle svg {
	width: 1.125rem;
	height: 1.125rem;
}

.search-toggle:hover,
.search-toggle:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.header-search__panel {
	position: absolute;
	top: calc(100% + var(--space-2));
	right: 0;
	z-index: 100;
	width: min(22rem, calc(100vw - (2 * var(--container-padding))));
	padding: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.header-search__panel .search-form {
	gap: var(--space-2);
}

/* Dark-mode toggle */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-ink);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.theme-toggle__icon {
	width: 1.125rem;
	height: 1.125rem;
}

.theme-toggle__icon--dark {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--light {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--dark {
	display: block;
}

/* Favorites toggle + panel — mirrors .header-search / .header-search__panel */
.header-favorites {
	position: relative;
}

.favorites-toggle {
	display: none;
	align-items: center;
	gap: var(--space-2);
	height: 2.5rem;
	padding: 0 var(--space-3);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-ink);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.favorites-toggle svg {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

.favorites-toggle:hover,
.favorites-toggle:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.favorites-toggle__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.35em;
	background: var(--color-primary);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	border-radius: var(--radius-full);
}

.favorites-panel {
	position: absolute;
	top: calc(100% + var(--space-2));
	right: 0;
	z-index: 100;
	width: min(20rem, calc(100vw - (2 * var(--container-padding))));
	padding: var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.favorites-panel__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.favorites-panel__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0 0 var(--space-2);
	padding: 0;
	list-style: none;
}

.favorites-panel__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

.favorites-panel__item a {
	color: var(--color-ink);
	font-size: var(--text-sm);
	text-decoration: none;
}

.favorites-panel__item a:hover {
	color: var(--color-primary);
}

.favorites-panel__remove {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--color-muted);
	font-size: var(--text-md);
	line-height: 1;
}

.favorites-panel__remove:hover,
.favorites-panel__remove:focus-visible {
	color: var(--color-danger);
}

.favorites-panel__empty {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-sm);
}

/* Persistent inline header search — shown at desktop widths only (see
   responsive.css); the icon-toggle .header-search above covers narrower
   viewports where there isn't room for a full-width field. */
.header-search-inline {
	display: none;
	position: relative;
	flex: 1;
	max-width: 22rem;
}

.header-search-inline svg {
	position: absolute;
	top: 50%;
	left: var(--space-3);
	transform: translateY(-50%);
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-muted);
	pointer-events: none;
}

.header-search-inline .form-control {
	padding-left: calc(var(--space-3) * 2 + 1.125rem);
	background: var(--color-surface-alt);
}

/* Primary navigation */
.primary-navigation {
	display: none;
}

.primary-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation li {
	position: relative;
}

.primary-navigation a {
	display: inline-block;
	padding: var(--space-2) 0;
	color: var(--color-ink-soft);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible {
	color: var(--color-primary);
}

/* Submenus (foundation — expanded on click for touch + keyboard) */
.primary-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 12rem;
	padding: var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.primary-navigation ul ul li {
	width: 100%;
}

.primary-navigation ul ul a {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
}

.primary-navigation ul ul a:hover,
.primary-navigation ul ul a:focus-visible {
	background: var(--color-surface-alt);
}

.menu-item-has-children.is-open > ul,
.menu-item-has-children:hover > ul,
.menu-item-has-children:focus-within > ul {
	display: flex;
}

/* Mobile navigation toggle (foundation) */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-ink);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.menu-toggle-icon {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--transition-fast);
}

.menu-toggle-icon::before {
	top: -6px;
}

.menu-toggle-icon::after {
	top: 6px;
}

.mobile-navigation {
	display: none;
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}

.mobile-navigation.is-open {
	display: block;
}

.mobile-navigation ul {
	margin: 0;
	padding: var(--space-2) 0;
	list-style: none;
}

.mobile-navigation a {
	display: block;
	padding: var(--space-3) var(--container-padding);
	color: var(--color-ink);
	text-decoration: none;
	font-weight: var(--weight-medium);
	border-bottom: 1px solid var(--color-border);
}

.mobile-navigation ul ul a {
	padding-left: calc(var(--container-padding) + var(--space-4));
	color: var(--color-ink-soft);
	font-weight: var(--weight-regular);
}

/* Site footer */
.site-footer {
	border-top: 1px solid var(--color-border);
	background: var(--color-surface-alt);
	color: var(--color-ink-soft);
	font-size: var(--text-sm);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding-block: var(--space-12);
}

.footer-widgets {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
}

.footer-widgets .widget-title,
.footer-column .widget-title {
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-ink);
	margin-bottom: var(--space-3);
}

.footer-widgets {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav a {
	color: var(--color-ink-soft);
	text-decoration: none;
	font-size: var(--text-sm);
}

.footer-nav a:hover {
	color: var(--color-primary);
}

/* Front page hero */
.hero {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface-alt);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--space-10);
	padding-block: var(--space-16);
}

.hero__title {
	margin-top: 0;
}

.hero__title-accent {
	color: var(--color-primary);
}

.hero__description {
	font-size: var(--text-md);
	color: var(--color-ink-soft);
	max-width: 34rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.hero__actions .btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Hero visual: "Find the right AI tool" stat panel */
.hero__visual {
	min-width: 0;
}

.hero-stat-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

/* Purely decorative flourish behind the stats — not a data visualization. */
.hero-stat-card__chart {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 60%;
	max-width: 14rem;
	height: auto;
	opacity: 0.3;
	pointer-events: none;
}

.hero-stat-card__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.hero-stat-card__row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
}

.hero-stat-card__row.is-active {
	background: var(--color-primary-tint);
}

.hero-stat-card__row-name {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-ink);
}

.tool-logo--sm {
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	flex-shrink: 0;
}

.hero-stat-card__summary {
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.hero-stat-card__summary h2 {
	font-size: var(--text-lg);
	margin-bottom: var(--space-2);
}

.hero-stat-card__summary p {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-ink-soft);
}

.hero-stat-card__stats {
	display: flex;
	gap: var(--space-6);
	margin-top: var(--space-5);
}

.hero-stat-card__stat-value {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--color-ink);
}

.hero-stat-card__stat-value .star {
	width: 1rem;
	height: 1rem;
}

.hero-stat-card__stat-label {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-muted);
}

/* Homepage sections */
.section {
	padding-block: var(--space-20);
}

.section__header {
	max-width: 40rem;
	margin-bottom: var(--space-10);
}

.section__header h2 {
	margin-bottom: var(--space-2);
}

.section__description {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-ink-soft);
}

/* Section header variant with a "View all" link (Popular AI Tools, Browse
   by Category, Latest Guides) instead of a description paragraph. */
.section__header--with-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	max-width: none;
}

.section__header--with-link h2 {
	margin-bottom: 0;
}

.section__header-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	flex-shrink: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

.section__header-link svg {
	width: 1rem;
	height: 1rem;
}

/* Popular AI Tools: horizontal scrolling card row */
.tool-row {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	padding-bottom: var(--space-2);
	scroll-snap-type: x proximity;
}

.tool-row .card--tool-home {
	flex: 0 0 auto;
	width: clamp(230px, 22vw, 270px);
	scroll-snap-align: start;
}

.featured-tools,
.guides {
	background: var(--color-surface-alt);
	border-block: 1px solid var(--color-border);
}

.newsletter {
	background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
	border-top: 1px solid var(--color-border);
}

.newsletter__inner {
	text-align: center;
}

/* Bottom 4-item feature strip */
.feature-strip__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.feature-strip__item {
	padding: var(--space-6);
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-align: center;
}

.feature-strip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--space-4);
	background: var(--color-primary-tint);
	border-radius: var(--radius-md);
	color: var(--color-primary-dark);
}

.feature-strip__icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

.feature-strip__title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-base);
}

.feature-strip__text {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: var(--text-sm);
}

/* Page/content structural regions */
.page-header {
	padding-block: var(--space-10);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface-alt);
}

.page-header__inner {
	max-width: 48rem;
}

.page-header .page-title {
	margin-bottom: var(--space-2);
}

.page-header .page-description {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: var(--text-md);
}

.content-area {
	padding-block: var(--space-12);
}

/* Reading-width regions. single.php/page.php use the full (unconstrained)
   .container so .entry-content below has room to implement alignwide/
   alignfull; everything else in the entry keeps the comfortable measure. */
.entry-header,
.entry-footer,
.breadcrumbs,
.post-navigation,
.comments-area {
	max-width: var(--content-max);
	margin-inline: auto;
}

.entry-thumbnail {
	margin-block: var(--space-6) var(--space-8);
}

.entry-thumbnail.card__media--placeholder {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

/*
 * Content width system for post/page content: default blocks stay at the
 * reading measure (--content-max); .alignwide fills the available width
 * up to --wide-max; .alignfull bleeds into the container's own gutter to
 * reach its outer edge. Built as a 3-column grid so nothing relies on
 * viewport units — the breakout is safe at any container width and never
 * causes horizontal overflow, on mobile included.
 */
.entry-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(100%, var(--content-max)) minmax(0, 1fr);
}

.entry-content > * {
	grid-column: 2;
}

.entry-content > .alignwide {
	grid-column: 1 / 4;
	max-width: var(--wide-max);
	width: 100%;
	justify-self: center;
}

.entry-content > .alignfull {
	grid-column: 1 / 4;
	margin-inline: calc(-1 * var(--container-padding));
}

.entry-content > * + * {
	margin-top: var(--space-4);
}

.entry-content > h2,
.entry-content > h3 {
	margin-top: var(--space-10);
}

/* Reading-width regions added by the review/article enhancements below —
   grouped with entry-header etc. above via the shared selector would be
   ideal, but these are conditional template parts, so listed separately. */
.entry-verdict,
.related-tools-inline,
.related-articles {
	max-width: var(--content-max);
	margin-inline: auto;
	margin-top: var(--space-10);
}

.entry-verdict > h2 {
	margin-top: var(--space-8);
}

.related-tools-inline h2,
.related-articles h2 {
	margin-bottom: var(--space-6);
}

/* Section header used for secondary, in-page groupings (category page's
   "Recommended Tools" / "Related Guides", search result groups) — a
   lighter-weight variant of .section__header for content that isn't a
   full homepage-style .section band. */
.section-block {
	margin-top: var(--space-12);
}

.section__header--tight {
	max-width: none;
	margin-bottom: var(--space-6);
}

.search-result-group + .search-result-group {
	margin-top: var(--space-12);
}

/* Tools directory toolbar (search + sort) */
.tools-toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.tools-toolbar__search {
	position: relative;
	flex: 1;
}

.tools-toolbar__search svg {
	position: absolute;
	top: 50%;
	left: var(--space-4);
	transform: translateY(-50%);
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-muted);
	pointer-events: none;
}

.tools-toolbar__search .form-control {
	padding-left: calc(var(--space-4) * 2 + 1.125rem);
}

.tools-result-count {
	margin: 0 0 var(--space-6);
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.tools-empty-state {
	padding: var(--space-12) 0;
	text-align: center;
	color: var(--color-ink-soft);
}

.load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--space-10);
}

/* Tool detail page */
.tool-detail-hero {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface-alt);
	padding-block: var(--space-10);
}

.tool-detail-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
	margin-top: var(--space-4);
}

.tool-detail-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	padding-block: var(--space-12);
	align-items: start;
}

.tool-detail-content {
	min-width: 0;
}

.tool-detail-section {
	padding-block: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.tool-detail-section:first-child {
	padding-top: 0;
	border-top: 0;
}

.tool-detail-sidebar {
	min-width: 0;
}

/* Footer */
.footer-columns {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
}