/* =====================================================================
   SEO Insider — child theme styles
   Native Gutenberg / FSE. Layout via theme.json; this file adds the
   carousel, cards, pills, header polish and responsive behaviour.
   ===================================================================== */

:root {
	--si-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 8px 24px rgba(15, 27, 45, 0.08);
	--si-shadow-hover: 0 8px 18px rgba(15, 27, 45, 0.10), 0 18px 40px rgba(15, 27, 45, 0.14);
	--si-radius: 14px;
	/* Shared horizontal gutter: full-bleed bands use this so content never
	   touches the screen edge AND header/footer line up at the same x. */
	--si-gutter: clamp(1.25rem, 5vw, 5rem);
}

/* ---------- Header ---------- */
/* Sticky must sit on the template-part wrapper (its containing block spans the
   whole page); a sticky on the inner bar can't stick because its parent box is
   only as tall as the header itself. Offset by the admin bar when present. */
.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
.si-header {
	box-shadow: 0 2px 12px rgba(11, 31, 58, 0.18);
	padding-inline: var(--si-gutter);
	transition: padding 0.25s ease;
}
/* Sticky header shrinks once scrolled: tighter padding, smaller logo,
   trending strip tucked away so it stays compact. */
.wp-site-blocks > header.si-shrink .si-header {
	padding-block: 0.4rem;
}
.wp-site-blocks > header.si-shrink .wp-block-site-title {
	font-size: 1.05rem;
}
.wp-site-blocks > header.si-shrink .si-trending {
	display: none;
}
.si-trending {
	transition: opacity 0.25s ease;
}
/* Header is full-bleed: bar + inner row span edge-to-edge (root padding only). */
.si-header__inner {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}
.si-header__nav {
	gap: 1.25rem;
}

/* Niche element: dynamic trending SEO topics strip (full width, under the main row) */
.si-trending {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.si-trending__links a {
	color: var(--wp--preset--color--base);
}
.si-trending__label {
	white-space: nowrap;
}
.si-trending__links a {
	text-decoration: none;
	opacity: 0.9;
}
.si-trending__links a:hover {
	color: var(--wp--preset--color--accent) !important;
	opacity: 1;
}
.si-header .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--base);
}
.si-header .si-nav a {
	text-decoration: none;
}
.si-header .si-nav .wp-block-navigation-item__content:hover,
.si-header .si-nav .wp-block-navigation-item__content:focus {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--wp--preset--color--accent);
}
/* Search inside header */
.si-header .si-search .wp-block-search__inside-wrapper {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 2px 2px 2px 10px;
}
.si-header .si-search input.wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--base);
	min-width: 150px;
}
.si-header .si-search input.wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
.si-header .si-search .wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	border-radius: 999px;
	min-height: 34px;
	min-width: 34px;
}

/* ---------- Flush full-width stack: no white gaps between bands ---------- */
/* Header → hero → sections → footer all sit flush; each band's own padding
   provides the breathing room (the section colour fills edge-to-edge). */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}
.si-main {
	margin-block: 0;
}
.si-main > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------- Hero ---------- */
.si-hero .si-hero__sub {
	opacity: 0.92;
}
.si-hero .wp-block-buttons {
	gap: 0.75rem;
}
.si-hero .is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Section heads ---------- */
.si-section__head {
	margin-bottom: 1.75rem;
}
.si-eyebrow {
	margin: 0 0 0.15rem;
}

/* ---------- Cards (shared) ---------- */
.si-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--si-radius);
	overflow: hidden;
	box-shadow: var(--si-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	height: 100%;
}
.si-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--si-shadow-hover);
}
.si-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.si-card__media {
	background: var(--wp--preset--color--surface);
}
.si-card__body {
	display: flex;
	flex-direction: column;
}
.si-card__excerpt {
	margin: 0;
}
.si-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.si-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}
.si-card__meta {
	margin-top: auto;
	padding-top: 0.4rem;
}

/* ---------- Category pills ---------- */
/* Block-level flex (NOT inline-flex): inside a constrained column the
   layout's margin-inline:auto only centres block elements, so an inline-flex
   pill would jump to the full-width left edge (misaligned from the title). */
.si-pill {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}
.si-pill a {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, white);
	color: var(--wp--preset--color--primary-dark);
	padding: 0.25em 0.7em;
	border-radius: 999px;
	text-decoration: none;
	line-height: 1.6;
}
.si-pill a:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ---------- Grid (post-template grid) ---------- */
.si-grid {
	gap: 1.5rem;
}

/* ---------- Filter bar (browse/filter all articles) ---------- */
.si-filterbar {
	gap: 0.6rem;
	border-block: 1px solid var(--wp--preset--color--border);
	padding-block: 0.85rem;
}
.si-filterbar__label {
	margin-right: 0.25rem;
}
.si-chip a {
	display: inline-block;
	padding: 0.38em 0.95em;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.si-chip a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.si-chip.is-active a {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ---------- Featured carousel: CSS scroll-snap, no JS ---------- */
.si-carousel .si-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2px;
	padding-bottom: 1rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--primary) transparent;
}
.si-carousel .si-carousel__track > li,
.si-carousel .si-carousel__track > .si-card {
	scroll-snap-align: start;
	flex: 0 0 320px;
	max-width: 320px;
}
.si-carousel .si-carousel__track::-webkit-scrollbar {
	height: 8px;
}
.si-carousel .si-carousel__track::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--border);
	border-radius: 999px;
}
.si-carousel .si-carousel__track::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--primary);
}
.si-swipe-hint {
	margin: 0;
}

/* ---------- Category cards ---------- */
.si-cat-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--si-radius);
	box-shadow: var(--si-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	height: 100%;
	border-left: 4px solid var(--wp--preset--color--primary);
}
.si-cat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--si-shadow-hover);
	border-left-color: var(--wp--preset--color--accent);
}
.si-cat-card h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.si-cat-card:hover h3 a {
	color: var(--wp--preset--color--primary);
}
.si-cat-grid.wp-block-columns {
	flex-wrap: wrap;
}

/* ---------- Newsletter ---------- */
.si-newsletter__box {
	box-shadow: var(--si-shadow);
}
.si-newsletter__form {
	display: flex;
	gap: 0.6rem;
	max-width: 460px;
	margin: 1.25rem auto 0;
	flex-wrap: wrap;
	justify-content: center;
}
.si-newsletter__form input[type="email"] {
	flex: 1 1 220px;
	padding: 0.85em 1em;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.95);
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
}
.si-newsletter__form button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	border: 0;
	border-radius: 8px;
	padding: 0.85em 1.5em;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.si-newsletter__form button:hover {
	background: var(--wp--preset--color--accent-dark);
}

/* ---------- Contact page + Contact Form 7 ---------- */
/* Don't let the two contact columns stretch to equal height (the info card
   would balloon to match the form). Keep each at its natural height. */
.wp-block-columns:has(.si-contact-form) {
	align-items: flex-start;
}
.wp-block-columns:has(.si-contact-form) .si-cat-card {
	height: auto;
}
.si-contact-form {
	box-shadow: var(--si-shadow);
}
.si-cf7 .si-cf7__row {
	margin: 0 0 0.9rem;
}
.si-cf7__label {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--contrast);
}
.si-cf7 .wpcf7-form-control-wrap {
	display: block;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	padding: 0.7em 0.95em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 1rem;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.si-cf7__submit {
	margin-top: 0.25rem;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(26, 95, 214, 0.15);
}
.wpcf7 input[type="submit"] {
	margin-top: 0.25rem;
	padding: 0.85em 1.8em;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	min-height: 44px;
	transition: background 0.15s ease;
}
.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--primary-dark);
}
.wpcf7-response-output {
	border-radius: 8px;
	margin: 1rem 0 0 !important;
	padding: 0.75rem 1rem !important;
}

/* ---------- Single post ---------- */
.si-single__hero img {
	width: 100%;
	border-radius: var(--si-radius);
	object-fit: cover;
}
.si-prose {
	font-size: 1.075rem;
	line-height: 1.8;
}
.si-prose > * {
	margin-block: 1.1em 0;
}
.si-prose h2 {
	margin-top: 2em;
	scroll-margin-top: 90px;
}
.si-prose h3 {
	margin-top: 1.6em;
	scroll-margin-top: 90px;
}
.si-prose img {
	border-radius: 10px;
}
.si-prose blockquote {
	border-left: 4px solid var(--wp--preset--color--primary);
	padding-left: 1.1rem;
	color: var(--wp--preset--color--contrast-2);
	font-style: italic;
}
.si-prose :where(code, pre) {
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
}
.si-author-box {
	border-radius: var(--si-radius);
	gap: 1.1rem;
}
.si-author-box .wp-block-avatar img {
	border-radius: 50%;
}
.si-postnav {
	gap: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 1.5rem;
}
.si-postnav a {
	text-decoration: none;
	font-weight: 600;
}

/* ---------- Pagination ---------- */
.si-pagination {
	gap: 0.5rem;
}
.si-pagination .wp-block-query-pagination-numbers .page-numbers {
	padding: 0.4em 0.8em;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	text-decoration: none;
}
.si-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

/* ---------- Footer (full-width band, same gutter as header) ---------- */
.si-footer {
	padding-inline: var(--si-gutter);
}
.si-footer a {
	text-decoration: none;
}
.si-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.si-footer__links {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}
.si-footer__bottom {
	gap: 0.75rem;
}
.si-credit {
	margin: 0;
}

/* ---------- Filter tabs: hide whole grid item (not inner card) so the
   grid reflows from the left, then JS-pager + active pop ---------- */
.si-grid > li[hidden],
.si-grid > [hidden] {
	display: none !important;
}
.si-tabs .si-chip.is-active a {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Client-side pagination control */
.si-jspager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--wp--preset--spacing--50);
}
.si-jspager__btn {
	min-width: 42px;
	min-height: 42px;
	padding: 0 0.7em;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.si-jspager__btn:hover:not(:disabled) {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.si-jspager__btn.is-active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.si-jspager__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---------- Reveal-on-scroll transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
	.si-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.55s ease, transform 0.55s ease;
		will-change: opacity, transform;
	}
	.si-reveal.is-revealed {
		opacity: 1;
		transform: none;
	}
	/* Stagger the cards inside a revealed section */
	.si-reveal.is-revealed .si-card {
		animation: si-fade-up 0.5s ease both;
	}
	.si-reveal.is-revealed .si-grid > li:nth-child(2) .si-card { animation-delay: 0.05s; }
	.si-reveal.is-revealed .si-grid > li:nth-child(3) .si-card { animation-delay: 0.1s; }
	.si-reveal.is-revealed .si-grid > li:nth-child(4) .si-card { animation-delay: 0.15s; }
}
@keyframes si-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* ===================================================================
   Responsive / mobile optimisation
   =================================================================== */

/* Tablet and below */
@media (max-width: 1024px) {
	:root {
		--si-gutter: clamp(1rem, 4vw, 2.5rem);
	}
	.si-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* Large phone / small tablet */
@media (max-width: 781px) {
	/* Shrink every spacing preset at once — sections, gaps, margins all follow. */
	:root {
		--wp--preset--spacing--70: 3.5rem;
		--wp--preset--spacing--60: 2.75rem;
		--wp--preset--spacing--50: 2rem;
		--wp--preset--spacing--40: 1.5rem;
		--wp--preset--spacing--30: 1rem;
	}
	.si-hero {
		min-height: 360px !important;
	}
	/* Header: keep logo + collapsed nav on one row; nav becomes the WP overlay. */
	.si-header__inner {
		gap: 0.75rem;
	}
	.si-header .si-search input.wp-block-search__input {
		min-width: 0;
		width: 7.5rem;
	}
	/* Filter tabs become a horizontal scroll strip instead of wrapping. */
	.si-filterbar {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 0.4rem;
	}
	.si-filterbar::-webkit-scrollbar {
		display: none;
	}
	.si-chip {
		flex: 0 0 auto;
	}
	.si-author-box {
		flex-wrap: wrap;
	}
}

/* Phones */
@media (max-width: 600px) {
	.si-grid {
		grid-template-columns: 1fr !important;
	}
	.si-carousel .si-carousel__track > li,
	.si-carousel .si-carousel__track > .si-card {
		flex-basis: 86%;
		max-width: 86%;
	}
	.si-footer__cols {
		gap: 1.5rem;
	}
	.si-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.si-trending {
		display: none;
	}
	.si-section__head {
		margin-bottom: 1.25rem;
	}
	.si-newsletter__form {
		flex-direction: column;
	}
	.si-newsletter__form input[type="email"],
	.si-newsletter__form button {
		width: 100%;
	}
	.si-postnav {
		flex-direction: column;
		gap: 0.75rem;
	}
	.si-prose {
		font-size: 1rem;
	}
	/* Comfortable touch targets */
	.si-chip a,
	.si-pagination .page-numbers,
	.wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Stack the footer brand/columns on very small screens */
@media (max-width: 480px) {
	.si-footer__cols {
		display: flex;
		flex-direction: column;
	}
}

/* Accessibility: visible focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}