/* ==========================================================================
   Infographics Agency — base stylesheet
   Black & white minimalist. Design tokens (colors, spacing, typography)
   are sourced from theme.json via CSS custom props.
   Target: ≤ 8KB minified.
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; min-height: 100vh; color: #000; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
::selection { background: #000; color: #fff; }

/* ---- Defensive color rules ----
   WP block library + cached wp_global_styles can override theme.json
   inheritance with low-specificity rules that beat ours. Force black with
   !important on TEXT-BEARING elements only — never buttons or form controls,
   which set their own colors. Explicit subtle/muted classes get an !important
   re-override below so they still apply. */
body,
.wp-block-heading,
.wp-block-site-title, .wp-block-site-title a,
.wp-block-post-title, .wp-block-post-title a,
.wp-block-post-excerpt:not(.has-text-color),
.wp-block-post-date:not(.has-text-color),
main p:not(.has-text-color),
main li:not(.has-text-color),
main h1, main h2, main h3, main h4, main h5, main h6,
.ig-header .wp-block-site-title,
.ig-header .wp-block-site-title a,
.ig-nav a,
.ig-nav-toggle__label,
.ig-region-switcher > summary {
	color: #000 !important;
}

/* Header CTA button — explicit white-on-black, beats the wp-block-button defaults
   AND the cached wp_global_styles. Hover inverts. */
.ig-header .wp-block-button .wp-block-button__link.wp-element-button,
.ig-header .wp-block-button .wp-block-button__link.wp-element-button:visited {
	color: #fff !important;
	background-color: #000 !important;
}
.ig-header .wp-block-button .wp-block-button__link.wp-element-button:hover {
	color: #000 !important;
	background-color: #fff !important;
	border: 1px solid #000;
}

/* Explicit color classes override the force-black above */
.has-ink-subtle-color {
	color: var(--wp--preset--color--ink-subtle) !important;
}
.has-ink-muted-color {
	color: var(--wp--preset--color--ink-muted) !important;
}
.has-background-color, .has-ink-background-color, .has-surface-background-color, .has-surface-alt-background-color {
	/* Background classes shouldn't be affected by text color rules */
}

/* The inverted lead-form section needs white text — has higher specificity below
   in the .ig-lead-section--inverted block, which uses !important for the same reason */

/* ---- Buttons ----
   Default = solid black. Outline variant = white bg + black text + black border.
   On hover, both invert. Sharp corners always.
   We define these here (not in theme.json) so per-block has-X-color classes win. */
.wp-block-button .wp-block-button__link.wp-element-button {
	background: #000;
	color: #fff;
	border: 1px solid #000;
	border-radius: 0;
	padding: 14px 28px;
	font-weight: 600;
	text-decoration: none;
	transition: background 120ms, color 120ms;
}
.wp-block-button .wp-block-button__link.wp-element-button:hover {
	background: #fff;
	color: #000;
}
.wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
	background: transparent !important;
	color: #000 !important;
	border-color: #000 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover {
	background: #000 !important;
	color: #fff !important;
}

/* ---- Site chrome ----
   Header row is logo · nav · cta (region + button) on a single row. We define
   the flex layout explicitly because wp-block-library is dequeued in
   functions.php, so .is-layout-flex from core has nothing behind it. */
.ig-header > .wp-block-group {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}
.ig-header__cta { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }

/* Site logo — the brand mark is a square stacked lockup (icon over wordmark),
   so we cap height instead of width so it scales to the row, not past it. */
.ig-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.ig-header__logo img, .ig-header__logo .custom-logo { height: 56px; width: auto; max-width: none; }
.ig-footer__logo { display: block; margin-bottom: var(--wp--preset--spacing--30); }
.ig-footer__logo img, .ig-footer__logo .custom-logo { height: 72px; width: auto; max-width: none; }

/* Primary nav — desktop = inline row, mobile = details/summary drawer.
   The <details> element gives us a no-JS toggle that is fully accessible. */
.ig-nav-toggle { position: relative; }
.ig-nav-toggle > summary { list-style: none; cursor: pointer; display: none; }
.ig-nav-toggle > summary::-webkit-details-marker { display: none; }
.ig-nav ul {
	list-style: none; padding: 0; margin: 0;
	display: flex; gap: var(--wp--preset--spacing--60);
	align-items: center;
}
.ig-nav a {
	color: #000; text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}
.ig-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Hamburger icon (3 lines via two pseudo-elements + the element itself) */
.ig-nav-toggle__icon {
	display: inline-block; width: 22px; height: 14px; position: relative;
}
.ig-nav-toggle__icon, .ig-nav-toggle__icon::before, .ig-nav-toggle__icon::after {
	background: #000; border-radius: 0;
}
.ig-nav-toggle__icon { height: 2px; top: 6px; }
.ig-nav-toggle__icon::before, .ig-nav-toggle__icon::after {
	content: ''; position: absolute; left: 0; width: 100%; height: 2px;
	transition: transform 200ms ease;
}
.ig-nav-toggle__icon::before { top: -6px; }
.ig-nav-toggle__icon::after  { top: 6px; }
.ig-nav-toggle[open] .ig-nav-toggle__icon { background: transparent; }
.ig-nav-toggle[open] .ig-nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.ig-nav-toggle[open] .ig-nav-toggle__icon::after  { transform: translateY(-6px) rotate(-45deg); }
.ig-nav-toggle__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase; letter-spacing: 0.08em;
	margin-left: 10px; vertical-align: middle;
}

@media (max-width: 782px) {
	/* Show hamburger, hide nav until <details> is open */
	.ig-nav-toggle > summary { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; }
	.ig-nav-toggle > .ig-nav {
		position: absolute; top: calc(100% + 16px); right: 0; left: auto;
		min-width: 240px; background: #fff; border: 1px solid #000;
		padding: 8px 0; z-index: 20;
	}
	.ig-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.ig-nav li { border-bottom: 1px solid var(--wp--preset--color--border); }
	.ig-nav li:last-child { border-bottom: 0; }
	.ig-nav a { display: block; padding: 14px 20px; font-size: var(--wp--preset--font-size--base); }
	.ig-nav a:hover { background: #000; color: #fff; text-decoration: none; }
}
.ig-region-switcher { position: relative; cursor: pointer; font-size: var(--wp--preset--font-size--sm); font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.ig-region-switcher summary { list-style: none; padding: 6px 0; }
.ig-region-switcher summary::-webkit-details-marker { display: none; }
.ig-region-switcher summary:hover { text-decoration: underline; }
.ig-region-switcher ul {
	position: absolute; right: 0; top: calc(100% + 8px);
	margin: 0; padding: 0; min-width: 200px;
	list-style: none; background: #fff;
	border: 1px solid #000; z-index: 10;
}
.ig-region-switcher ul li { border-bottom: 1px solid var(--wp--preset--color--border); }
.ig-region-switcher ul li:last-child { border-bottom: 0; }
.ig-region-switcher ul li a {
	display: block; padding: 12px 16px; text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	font-family: var(--wp--preset--font-family--body);
	text-transform: none; letter-spacing: 0;
	color: #000;
}
.ig-region-switcher ul li a:hover { background: #000; color: #fff !important; }

/* ---- Footer ---- */
.ig-footer__nav { list-style: none; padding: 0; margin: 0; }
.ig-footer__nav li { margin: 0 0 6px; }
.ig-footer__nav a { text-decoration: none; color: var(--wp--preset--color--ink-subtle); }
.ig-footer__nav a:hover { color: var(--wp--preset--color--accent); }

/* ---- Lead form ---- */
.ig-lead-form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.ig-lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); }
@media (max-width: 600px) { .ig-lead-form__row { grid-template-columns: 1fr; } }
.ig-lead-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--wp--preset--font-size--sm); }
.ig-lead-form label span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #000;
}
.ig-lead-form label span em {
	font-style: normal;
	color: var(--wp--preset--color--ink-subtle);
	margin-left: 2px;
}
.ig-lead-form input:invalid:not(:placeholder-shown),
.ig-lead-form select:invalid:not(:placeholder-shown),
.ig-lead-form textarea:invalid:not(:placeholder-shown) {
	border-color: var(--wp--preset--color--danger);
}
.ig-lead-form__hint {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-subtle);
	margin: 0;
}

/* ---- Inverted lead form (black background variant, used on homepage) ----
   Explicit list of text-bearing elements rather than * — leaves the submit
   button free to use its own colors. */
.ig-lead-section--inverted,
.ig-lead-section--inverted h1,
.ig-lead-section--inverted h2,
.ig-lead-section--inverted h3,
.ig-lead-section--inverted h4,
.ig-lead-section--inverted h5,
.ig-lead-section--inverted h6,
.ig-lead-section--inverted p,
.ig-lead-section--inverted li,
.ig-lead-section--inverted .wp-block-heading,
.ig-lead-section--inverted .ig-lead-form label span { color: #fff !important; }
.ig-lead-section--inverted .has-ink-subtle-color,
.ig-lead-section--inverted .ig-lead-form__hint,
.ig-lead-section--inverted .ig-lead-form label span em { color: #B0B0B0 !important; }
.ig-lead-section--inverted .ig-lead-form label span { color: #fff; }
.ig-lead-section--inverted .ig-lead-form label span em { color: #B0B0B0; }
.ig-lead-section--inverted .ig-lead-form input,
.ig-lead-section--inverted .ig-lead-form select,
.ig-lead-section--inverted .ig-lead-form textarea {
	background: #000;
	color: #fff;
	border-color: #525252;
}
.ig-lead-section--inverted .ig-lead-form input::placeholder,
.ig-lead-section--inverted .ig-lead-form textarea::placeholder { color: #8A8A8A; }
.ig-lead-section--inverted .ig-lead-form input:focus,
.ig-lead-section--inverted .ig-lead-form select:focus,
.ig-lead-section--inverted .ig-lead-form textarea:focus {
	border-color: #fff;
	outline-color: #fff;
}
.ig-lead-section--inverted .ig-lead-form__submit,
.ig-lead-section--inverted button.ig-lead-form__submit {
	background: #fff !important;
	color: #000 !important;
	border-color: #fff !important;
}
.ig-lead-section--inverted .ig-lead-form__submit:hover,
.ig-lead-section--inverted button.ig-lead-form__submit:hover {
	background: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
}
.ig-lead-section--inverted .ig-lead-form__hint { color: #B0B0B0; }
.ig-lead-section--inverted .ig-lead-form__status[data-tone="error"] { color: #FF8A7A; }
.ig-lead-section--inverted .ig-lead-form__status[data-tone="success"] { color: #fff; }
.ig-lead-form input,
.ig-lead-form select,
.ig-lead-form textarea {
	width: 100%; padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	font-size: var(--wp--preset--font-size--base);
	transition: border-color 120ms;
}
.ig-lead-form input:focus,
.ig-lead-form select:focus,
.ig-lead-form textarea:focus {
	border-color: #000;
	outline: 1px solid #000;
	outline-offset: -2px;
}
.ig-lead-form__hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none; }
.ig-lead-form__submit {
	align-self: flex-start;
	padding: 16px 32px;
	background: #000;
	color: #fff;
	border: 1px solid #000;
	border-radius: 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: -0.005em;
	transition: background 120ms, color 120ms;
}
.ig-lead-form__submit:hover { background: #fff; color: #000; }
.ig-lead-form__submit:disabled { opacity: 0.5; cursor: wait; }
.ig-lead-form__status[data-tone="error"] { color: var(--wp--preset--color--danger); font-size: var(--wp--preset--font-size--sm); }
.ig-lead-form__status[data-tone="success"] { color: #000; font-weight: 600; font-size: var(--wp--preset--font-size--sm); }
.ig-lead-form--compact .ig-lead-form__row { grid-template-columns: 1fr; }

/* ---- Agency card ---- */
.ig-agency-card { transition: border-color 200ms; }
.ig-agency-card:hover { border-color: #000 !important; }
.ig-agency-card .wp-block-post-title a { text-decoration: none; }
.ig-agency-card .wp-block-post-title a:hover { text-decoration: underline; }
.ig-agency-card .wp-block-post-terms { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--ink-subtle); }
.ig-agency-card .wp-block-post-terms a { text-decoration: none; }

/* ---- Listicle entry ---- */
.ig-listicle-entry { transition: border-color 200ms; }
.ig-listicle-entry:hover { border-color: #000 !important; }

/* ---- FAQ accordion ---- */
.ig-faq__item {
	padding: var(--wp--preset--spacing--40) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ig-faq__item summary {
	cursor: pointer; list-style: none;
	font-size: var(--wp--preset--font-size--lg); font-weight: 500;
	padding: 8px 0; position: relative; padding-right: 32px;
	color: #000;
}
.ig-faq__item summary::-webkit-details-marker { display: none; }
.ig-faq__item summary::after {
	content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	font-size: var(--wp--preset--font-size--xl); color: var(--wp--preset--color--ink-subtle);
	transition: transform 200ms;
}
.ig-faq__item[open] summary::after { content: '−'; }
.ig-faq__answer { padding: 8px 0 0; color: var(--wp--preset--color--ink-subtle); }
.ig-faq__answer p { margin: 0 0 12px; }

/* ---- Comparison table ---- */
.ig-comparison-table th { text-align: left; font-weight: 600; padding: 16px 12px; border-bottom: 2px solid var(--wp--preset--color--border); }
.ig-comparison-table td { padding: 14px 12px; border-bottom: 1px solid var(--wp--preset--color--border); }
.ig-comparison-table tbody tr:hover { background: var(--wp--preset--color--surface-alt); }

/* ---- Related-content aside ---- */
.ig-related { padding-top: var(--wp--preset--spacing--60); border-top: 1px solid #000; }
.ig-related__title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: 0.08em;
	color: #000; margin: 0 0 16px; font-weight: 500;
}
.ig-related__list { list-style: none; padding: 0; margin: 0 0 var(--wp--preset--spacing--60); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--wp--preset--color--border); }
.ig-related__list li { border-bottom: 1px solid var(--wp--preset--color--border); }
.ig-related__list li a {
	display: block; padding: 14px 0;
	text-decoration: none; font-size: var(--wp--preset--font-size--sm);
	transition: padding-left 150ms;
}
.ig-related__list li a:hover { padding-left: 8px; text-decoration: underline; }

/* ---- Cookie consent banner (rendered by Code Snippet) ---- */
.ig-cc { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 520px; z-index: 100;
	background: #fff; border: 1px solid #000;
	border-radius: 0; padding: 18px 20px;
	font-size: var(--wp--preset--font-size--sm); display: flex; flex-direction: column; gap: 14px; }
.ig-cc[hidden] { display: none; }
.ig-cc p { margin: 0; }
.ig-cc__buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ig-cc__buttons button { padding: 10px 18px; border-radius: 0; border: 1px solid #000; background: transparent; font-weight: 600; transition: background 120ms, color 120ms; }
.ig-cc__buttons button:hover { background: #000; color: #fff; }
.ig-cc__buttons .ig-cc__accept { background: #000; color: #fff; }
.ig-cc__buttons .ig-cc__accept:hover { background: #fff; color: #000; }

/* ---- Logo wall — the "as featured in" row dims when not hovered ---- */
.ig-logo-wall p { transition: color 200ms; }
.ig-logo-wall:hover p { color: var(--wp--preset--color--ink-muted); }
.ig-logo-wall p:hover { color: #000 !important; }

/* ==========================================================================
   Mobile responsive layer
   Single block of overrides for ≤782px. Order matters — placed late so
   it wins over component defaults without needing !important.
   ========================================================================== */

@media (max-width: 782px) {
	/* Header layout — logo shrinks, region switcher pulls left of CTA */
	.ig-header { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--40) !important; }
	.ig-header__logo img { height: 44px; }
	.ig-header__cta { gap: var(--wp--preset--spacing--30); }
	.ig-region-switcher { font-size: var(--wp--preset--font-size--xs); }
	.ig-region-switcher ul { right: 0; left: auto; min-width: 180px; }

	/* Hero — tighten padding, stack buttons full-width for thumb-friendly tap targets */
	.wp-block-cover, main > .wp-block-group:first-child {
		padding-top: var(--wp--preset--spacing--70) !important;
		padding-bottom: var(--wp--preset--spacing--70) !important;
	}
	.wp-block-buttons { width: 100%; flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--30) !important; }
	.wp-block-buttons .wp-block-button { width: 100%; }
	.wp-block-buttons .wp-block-button .wp-block-button__link { display: block; text-align: center; }

	/* Hero text scales down via theme.json fluid sizes; just tighten line-height */
	main h1 { line-height: 1.1 !important; }

	/* Section dividers — less padding so vertical rhythm doesn't feel sparse */
	main > section, main > .wp-block-group { padding-top: var(--wp--preset--spacing--70) !important; padding-bottom: var(--wp--preset--spacing--70) !important; }

	/* Card grids — single column for breathing room */
	.wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; }
	.ig-agency-card, .ig-listicle-entry { padding: var(--wp--preset--spacing--50) !important; }

	/* Lead form — full-bleed-ish, stacked rows, iOS-safe 16px input */
	.ig-lead-section { padding: var(--wp--preset--spacing--60) !important; }
	.ig-lead-form { gap: var(--wp--preset--spacing--40); }
	.ig-lead-form__row { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
	.ig-lead-form input,
	.ig-lead-form select,
	.ig-lead-form textarea {
		font-size: 16px !important;  /* prevents iOS Safari auto-zoom on focus */
		padding: 14px 14px;
	}
	.ig-lead-form__submit { width: 100%; padding: 16px; }

	/* Related-content lists — single column, full-width row taps */
	.ig-related__list { grid-template-columns: 1fr; }
	.ig-related__list li a { padding: 14px 0; }

	/* Footer — WP block columns auto-stack at 600px; nudge spacing */
	.ig-footer { padding-top: var(--wp--preset--spacing--70) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
	.ig-footer .wp-block-columns { gap: var(--wp--preset--spacing--60) !important; }

	/* Cookie consent — full-width sheet on mobile feels less cramped */
	.ig-cc { left: 12px; right: 12px; bottom: 12px; max-width: none; }

	/* Comparison table — switch to stacked label/value rows on narrow screens */
	.ig-comparison-table { font-size: var(--wp--preset--font-size--sm); }
}

/* Even smaller — narrow phones */
@media (max-width: 480px) {
	.ig-header__cta { gap: 8px; }
	.ig-nav-toggle__label { display: none; }  /* icon-only hamburger */
	.wp-block-buttons .wp-block-button .wp-block-button__link { padding: 14px 20px; }
}

/* ---- Print ---- */
@media print {
	.ig-header__cta, .ig-region-switcher, .ig-lead-form, .ig-related, .ig-cc, .ig-nav-toggle { display: none; }
	body { color: #000; background: #fff; }
}