/* Meratool theme 1.1 – supplemental styles. Design tokens live in theme.json. */

body .wp-site-blocks > * { margin-block-start: 0; }
body .wp-site-blocks > main { margin-block-end: 0; }
img { max-width: 100%; height: auto; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
@supports (backdrop-filter: blur(8px)) {
	.wp-site-blocks > header.wp-block-template-part { background: rgba(255, 255, 255, 0.8); backdrop-filter: saturate(170%) blur(12px); }
}
@media (min-width: 783px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; } }
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
.meratool-header { padding-block: 0.85rem; }
.meratool-header .wp-block-site-title a { display: inline-flex; align-items: center; }
.meratool-header .wp-block-site-title a::before {
	content: ""; display: inline-block; width: 2rem; height: 2rem; margin-inline-end: 0.55rem; border-radius: 10px;
	background: url("../images/favicon.svg") center / cover no-repeat;
}
.meratool-header .wp-block-site-logo + .wp-block-site-title a::before { display: none; }
.meratool-header .wp-block-button__link { padding: 0.6rem 1.25rem; font-size: 0.95rem; }
@media (max-width: 781px) { .meratool-header-cta { display: none; } }

/* ---------- Sections ---------- */
.meratool-section { padding-block: var(--wp--preset--spacing--70); }
.meratool-section--surface { background: var(--wp--preset--color--surface); }
.meratool-section-head { max-width: 42rem; margin-inline: auto; text-align: center; margin-bottom: var(--wp--preset--spacing--60); }
.meratool-section-head > * { margin-block: 0.6rem 0; }
.meratool-eyebrow, .meratool-eyebrow a {
	display: inline-block; color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary-soft);
	font-size: 0.8125rem; font-weight: 500; text-decoration: none; padding: 0.2rem 0.8rem; border-radius: 999px;
}
.meratool-post-card .meratool-eyebrow { background: none; padding: 0; }

/* ---------- Hero (dark) ---------- */
.meratool-hero {
	position: relative; overflow: hidden; color: #fff;
	padding-block: var(--wp--preset--spacing--70);
	background:
		radial-gradient(46rem 24rem at 85% 10%, rgba(255, 93, 143, 0.28), transparent 70%),
		radial-gradient(40rem 24rem at 0% 100%, rgba(13, 148, 136, 0.30), transparent 70%),
		linear-gradient(160deg, #0b1020 0%, #1e1b4b 55%, #3b21c4 100%);
}
.meratool-hero :where(h1, h2, p) { color: inherit; }
.meratool-hero .meratool-eyebrow { background: rgba(255, 255, 255, 0.12); color: #ddd6fe; }
.meratool-hero h1 { text-wrap: balance; max-width: 14ch; }
.meratool-hero .meratool-hero__lead { color: rgba(255, 255, 255, 0.82); max-width: 34rem; }
.meratool-hero .wp-block-columns { gap: var(--wp--preset--spacing--60); margin: 0; align-items: center; }
.meratool-hero__art { margin: 0; }
.meratool-hero__art img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35)); }
.meratool-hero-search { max-width: 34rem; }
.meratool-hero-search .wp-block-search__inside-wrapper {
	background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.meratool-hero-search .wp-block-search__input { border: 0; background: transparent; padding-inline: 1.1rem; min-width: 0; color: var(--wp--preset--color--contrast); }
.meratool-hero-search .wp-block-search__button {
	border: 0; border-radius: 999px; margin: 0; cursor: pointer; font-weight: 500; padding: 0.7rem 1.5rem;
	background: var(--wp--preset--color--primary); color: #fff;
}
.meratool-hero-search .wp-block-search__button:hover { background: var(--wp--preset--color--primary-dark); }
.meratool-hero .wp-block-button__link { background: #fff; color: var(--wp--preset--color--primary-dark); }
.meratool-hero .wp-block-button__link:hover { background: var(--wp--preset--color--primary-soft); }
.meratool-hero .is-style-outline > .wp-block-button__link { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.6); }
.meratool-hero .is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.meratool-chips { gap: 0.5rem; }
.meratool-chips p { margin: 0; }
.meratool-chips a {
	display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.8125rem; text-decoration: none;
	color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
}
.meratool-chips a:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ---------- Cards ---------- */
.meratool-card {
	position: relative; background: #fff; border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg); padding: var(--wp--preset--spacing--50);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.meratool-card:hover, .meratool-card:focus-within { transform: translateY(-4px); border-color: #c4b5fd; box-shadow: var(--wp--preset--shadow--lift); }
.meratool-card :where(h3, p) { margin-block: 0; }
.meratool-card > * + * { margin-block-start: 0.75rem; }
.meratool-card h3 { font-size: 1.2rem; }
.meratool-card h3 a { color: inherit; text-decoration: none; }
.meratool-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.meratool-card-cta { color: var(--wp--preset--color--primary); font-weight: 500; font-size: 0.9rem; }
.meratool-card-cta::after { content: "\2192"; display: inline-block; margin-inline-start: 0.35rem; transition: transform 0.2s ease; }
.meratool-card:hover .meratool-card-cta::after { transform: translateX(4px); }
.meratool-card--static:hover { transform: none; border-color: var(--wp--preset--color--border); box-shadow: none; }
.meratool-card ul { margin: 0; padding-inline-start: 1.1rem; color: var(--wp--preset--color--muted); }
.meratool-card ul a { position: relative; z-index: 1; }
.meratool-card--media { padding: 0.75rem 0.75rem var(--wp--preset--spacing--50); }
.meratool-card--media > :not(figure) { margin-inline: 0.75rem; }
.meratool-card--media figure { margin: 0; }
.meratool-card--media img { display: block; width: 100%; border-radius: 16px; }
.meratool-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem;
	border-radius: var(--wp--custom--radius--md); background: #ede9fe; color: #5b3df5;
}
.meratool-icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.meratool-icon--violet { background: #ede9fe; color: #5b3df5; }
.meratool-icon--pink { background: #ffe4ec; color: #be185d; }
.meratool-icon--teal { background: #ccfbf1; color: #0f766e; }
.meratool-icon--amber { background: #fef3c7; color: #b45309; }
.meratool-icon--blue { background: #dbeafe; color: #1d4ed8; }
.meratool-card--cat { border-top: 4px solid var(--wp--preset--color--primary); }
.meratool-card--cat-1 { border-top-color: #ff5d8f; }
.meratool-card--cat-2 { border-top-color: #5b3df5; }
.meratool-card--cat-3 { border-top-color: #0d9488; }

/* Steps */
.meratool-steps { counter-reset: step; }
.meratool-steps .meratool-card::before {
	counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; border-radius: 50%; margin-bottom: 0.75rem;
	background: linear-gradient(135deg, #5b3df5, #c026d3); color: #fff; font-weight: 700;
}

/* Feature split on tool pages */
.meratool-split { gap: var(--wp--preset--spacing--60); align-items: center; margin-block: var(--wp--preset--spacing--60); }
.meratool-split figure { margin: 0; }
.meratool-split img { display: block; width: 100%; border-radius: var(--wp--custom--radius--lg); }
.meratool-checks { list-style: none; padding: 0; margin: 1rem 0 0; }
.meratool-checks li { position: relative; padding-inline-start: 2rem; margin-block: 0.7rem; }
.meratool-checks li::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 0.35rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ---------- Posts ---------- */
.meratool-post-card { height: 100%; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--lg); overflow: hidden; background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.meratool-post-card:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lift); }
.meratool-post-card .wp-block-post-featured-image { margin: 0; }
.meratool-post-card .wp-block-post-featured-image img { border-radius: 0; width: 100%; height: 100%; object-fit: cover; }
.meratool-post-placeholder { aspect-ratio: 16 / 9; background: radial-gradient(circle at 20% 30%, #ddd6fe, transparent 55%), radial-gradient(circle at 80% 70%, #fbcfe8, transparent 55%), radial-gradient(circle at 60% 20%, #99f6e4, transparent 50%), #f6f4ff; }
.meratool-post-card__body { padding: var(--wp--preset--spacing--40); }
.meratool-post-card__body > * { margin-block: 0; }
.meratool-post-card__body > * + * { margin-block-start: 0.55rem; }
.meratool-post-card__body .wp-block-post-title { font-size: 1.15rem; }
.meratool-post-grid { margin-block: var(--wp--preset--spacing--60); }
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--60); gap: 1rem; }
.meratool-article-meta { color: var(--wp--preset--color--muted); font-size: 0.875rem; }
.wp-block-post-content :where(h2, h3) { margin-block-start: 2em; }
.single .wp-block-post-content, .meratool-article .wp-block-post-content { font-size: 1.0625rem; line-height: 1.85; }
.wp-block-details summary { cursor: pointer; font-weight: 500; }
.meratool-comment { border-top: 1px solid var(--wp--preset--color--border); padding-block: 1rem; }
.wp-block-search__input { border: 1px solid var(--wp--preset--color--border); border-radius: 999px; padding: 0.65rem 1.1rem; }

/* ---------- Tool pages ---------- */
.meratool-tool-hero {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); text-align: center; color: #fff;
	background: radial-gradient(40rem 20rem at 90% 0%, rgba(255, 93, 143, 0.25), transparent 70%), linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #3b21c4 100%);
}
.meratool-tool-hero :where(h1, p) { color: inherit; }
.meratool-tool-hero .wp-block-post-excerpt { max-width: 40rem; margin-inline: auto; color: rgba(255, 255, 255, 0.82); }
.meratool-tool-body { padding-block: var(--wp--preset--spacing--60); }
.meratool-integration {
	border: 2px dashed #a78bfa; border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--60); margin-block-end: var(--wp--preset--spacing--60);
}
.meratool-tool-placeholder { text-align: center; }
.meratool-tool-placeholder p { margin-block: 0.5rem 0; }
.meratool-tool-placeholder__title { font-size: 1.4rem; font-weight: 700; }
.meratool-tool-placeholder__text { color: var(--wp--preset--color--muted); }
.meratool-tool-placeholder__admin { font-size: 0.875rem; background: #fff7ed; border: 1px solid #fdba74; border-radius: var(--wp--custom--radius--sm); padding: 0.75rem 1rem; color: #7c2d12; text-align: start; }
.meratool-badge { display: inline-block; margin: 0; padding: 0.2rem 0.8rem; border-radius: 999px; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary-dark); font-size: 0.8125rem; font-weight: 500; }

/* ---------- CTA ---------- */
.meratool-cta {
	position: relative; overflow: hidden; padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg); text-align: center;
}
.meratool-cta::before, .meratool-cta::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.12); pointer-events: none; }
.meratool-cta::before { width: 18rem; height: 18rem; inset: -7rem auto auto -5rem; }
.meratool-cta::after { width: 14rem; height: 14rem; inset: auto -4rem -6rem auto; }
.meratool-cta :where(h2, h3, p) { color: inherit; position: relative; }
.meratool-cta .wp-block-buttons { position: relative; }
.meratool-cta h2 { max-width: 26ch; margin-inline: auto; }
.meratool-cta .wp-block-button__link { background: #fff; color: var(--wp--preset--color--primary-dark); }
.meratool-cta .wp-block-button__link:hover { background: var(--wp--preset--color--primary-soft); }
.meratool-cta .is-style-outline > .wp-block-button__link { background: transparent; color: #fff; border: 1.5px solid #fff; }
.meratool-cta .is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) { color: var(--wp--preset--color--primary); background: transparent; border: 1.5px solid var(--wp--preset--color--primary); }
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover { background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary-dark); }

/* ---------- Footer (dark) ---------- */
.meratool-footer { background: #0b1020; color: #cbd5e1; padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--70); }
.meratool-footer :where(p, .wp-block-site-tagline) { color: #cbd5e1; }
.meratool-footer .wp-block-site-title, .meratool-footer .wp-block-site-title a { color: #fff; text-decoration: none; }
.meratool-footer-title { font-weight: 700; color: #fff !important; margin-block: 0 0.75rem; }
.meratool-footer .wp-block-navigation { --navigation-layout-gap: 0.55rem; font-size: 0.9rem; }
.meratool-footer .wp-block-navigation a { color: #cbd5e1; text-decoration: none; }
.meratool-footer .wp-block-navigation a:hover { color: #fff; text-decoration: underline; }
.meratool-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--40); font-size: 0.875rem; }
.meratool-footer-bottom p { color: #94a3b8; }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.meratool-hero h1 { max-width: none; }
	.meratool-hero__art { max-width: 28rem; margin-inline: auto; }
}
@media (max-width: 600px) {
	.meratool-hero-search .wp-block-search__inside-wrapper { flex-wrap: wrap; border-radius: var(--wp--custom--radius--lg); }
	.meratool-hero-search .wp-block-search__input { flex: 1 1 100%; padding-block: 0.6rem; }
	.meratool-hero-search .wp-block-search__button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.meratool-card:hover, .meratool-post-card:hover { transform: none; }
}

/* ---------- Tool directory (front page) ---------- */

/* ---------- Tool directory (front page) ---------- */
.mt-dir__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; max-width: 40rem; margin: 0 auto var(--wp--preset--spacing--40); }
.mt-dir__search {
	flex: 1 1 18rem; padding: 0.85rem 1.25rem; font: inherit; border: 2px solid var(--wp--preset--color--border);
	border-radius: 999px; background: #fff; color: var(--wp--preset--color--contrast);
}
.mt-dir__search:focus { border-color: var(--wp--preset--color--primary); outline: none; box-shadow: 0 0 0 4px var(--wp--preset--color--primary-soft); }
.mt-dir__count { margin: 0; min-height: 1.4em; color: var(--wp--preset--color--muted); font-size: 0.9rem; }
.mt-dir__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: var(--wp--preset--spacing--60); }
.mt-dir__chips a { padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary-dark); font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.mt-dir__chips a:hover { background: var(--wp--preset--color--primary); color: #fff; }
.is-filtering .mt-dir__chips { display: none; }
.mt-dir__cat { margin-top: 2.75rem; scroll-margin-top: 5.5rem; }
.mt-dir__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.mt-dir__title { margin: 0 0 0.25rem; font-size: 1.4rem; }
.mt-dir__n { display: inline-block; margin-inline-start: 0.35rem; padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary-dark); font-size: 0.8rem; font-weight: 500; vertical-align: middle; }
.mt-dir__more { border: 0; background: none; padding: 0.25rem 0; font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--wp--preset--color--primary); cursor: pointer; }
.mt-dir__more:hover { color: var(--wp--preset--color--primary-dark); text-decoration: underline; }
.mt-dir__more[hidden] { display: none; }
.mt-dir__desc { margin: 0 0 1rem; color: var(--wp--preset--color--muted); }
.mt-dir__grid { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.85rem; }
.mt-dir__item[hidden], .mt-dir__cat[hidden] { display: none; }
.mt-js .mt-dir__cat:not(.is-open) .mt-dir__item.is-extra { display: none; }
.mt-js .is-filtering .mt-dir__item.is-extra:not([hidden]) { display: list-item; }
.mt-dir__card {
	display: flex; gap: 0.85rem; align-items: flex-start; height: 100%; padding: 0.95rem 1rem; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md, 14px);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mt-dir__card:hover, .mt-dir__card:focus-visible { transform: translateY(-3px); border-color: #c4b5fd; box-shadow: var(--wp--preset--shadow--lift); }
.mt-dir__card .meratool-icon { flex: none; width: 2.75rem; height: 2.75rem; font-size: 1.35rem; line-height: 1; }
.mt-dir__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mt-dir__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.mt-dir__name { font-size: 1rem; line-height: 1.3; }
.mt-dir__tag { padding: 0.02rem 0.45rem; border-radius: 6px; background: #f1f5f9; color: #64748b; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mt-dir__tag--live { background: #dcfce7; color: #166534; }
.mt-dir__blurb { color: var(--wp--preset--color--muted); font-size: 0.875rem; line-height: 1.45; }
.mt-dir__empty { text-align: center; color: var(--wp--preset--color--muted); margin-top: 2rem; }
@media (prefers-reduced-motion: reduce) { .mt-dir__card { transition: none; } .mt-dir__card:hover { transform: none; } }

/* ---------- Centered hero with big search ---------- */
.meratool-hero--center { text-align: center; padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); }
.meratool-hero--center h1 { max-width: 20ch; margin-inline: auto; }
.meratool-hero--center h1 em { font-style: italic; color: #fbcfe8; }
.meratool-hero--center .meratool-hero__lead { margin-inline: auto; }
.mt-hero-search {
	display: flex; gap: 0.35rem; max-width: 40rem; margin: var(--wp--preset--spacing--50) auto 0; padding: 6px;
	background: #fff; border-radius: 999px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.mt-hero-search__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.75rem 1.1rem; font: inherit; color: var(--wp--preset--color--contrast); }
.mt-hero-search__input:focus { outline: none; }
.mt-hero-search:focus-within { box-shadow: 0 0 0 4px rgba(251, 207, 232, 0.55), 0 18px 40px rgba(0, 0, 0, 0.28); }
.mt-hero-search__btn { border: 0; border-radius: 999px; padding: 0.7rem 1.5rem; font: inherit; font-weight: 500; cursor: pointer; background: var(--wp--preset--color--primary); color: #fff; }
.mt-hero-search__btn:hover { background: var(--wp--preset--color--primary-dark); }
@media (max-width: 480px) { .mt-hero-search__btn { padding-inline: 1rem; } }
.meratool-badges { gap: 0.5rem 0.75rem; margin-top: var(--wp--preset--spacing--50); }
.meratool-badges p { margin: 0; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.85rem; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }