/* ==========================================================================
   The Family Pitch — supplemental component styles
   theme.json handles color / typography / spacing tokens; this file
   handles structural/component CSS (grids, cards, pills, hover states,
   sticky sidebars) and responsive fine-tuning for phone / tablet / desktop.
   ========================================================================== */

/* ---- Header / mega nav ------------------------------------------------ */
.fp-header .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	font-weight: 600;
}
.fp-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: 0 20px 40px -12px rgba(32,41,26,0.18);
	padding: 8px;
	min-width: 220px;
}
.fp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 12.5px;
}
.fp-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--forest);
}
.fp-about-btn .wp-block-button__link {
	background: var(--wp--preset--color--forest);
}
.fp-about-btn .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
}

/* ---- Hero / finder ------------------------------------------------------ */
.fp-finder { box-shadow: 0 18px 40px rgba(25,31,26,0.06); border: 1px solid var(--wp--preset--color--line); }
.fp-opt {
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 14px 10px;
	background: var(--wp--preset--color--canvas);
}
.fp-opt-sel {
	border-color: var(--wp--preset--color--clay);
	background: color-mix(in srgb, var(--wp--preset--color--clay) 14%, white);
}

/* ---- Generic cards (trust cards, topic cards, method/values/team) ------ */
.fp-card {
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--spacing--card-radius, 12px);
	padding: 22px;
}
.fp-card:hover { border-color: var(--wp--preset--color--clay); }
.fp-tag {
	display: inline-block;
	background: color-mix(in srgb, var(--wp--preset--color--clay) 12%, white);
	padding: 4px 9px;
	border-radius: 5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.fp-team-photo img { object-fit: cover; }

/* ---- Category banner stat row ------------------------------------------ */
.fp-header ~ .wp-block-group[style*="forest-gradient"] .wp-block-column p { margin: 0; }

/* ---- Product / post cards (category pages, archive, review list) ------- */
.fp-post-grid { flex-wrap: wrap; }
.fp-pcard {
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	overflow: hidden;
	padding: 16px;
	box-shadow: 0 8px 20px -14px rgba(32,41,26,0.1);
	transition: transform .15s, box-shadow .15s;
}
.fp-pcard:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(32,41,26,0.16); }
.fp-pthumb {
	aspect-ratio: 16/10;
	border-radius: 8px;
	margin: -16px -16px 12px;
	width: calc(100% + 32px);
}

/* ---- Filter pills -------------------------------------------------------- */
.fp-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 22px; }
.fp-pill {
	font-size: 12.5px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 20px;
	border: 1.5px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--panel);
	display: inline-block;
}
.fp-pill-active {
	border-color: var(--wp--preset--color--forest);
	background: #F1F7EC;
	color: var(--wp--preset--color--forest);
}

/* ---- SEO callout block --------------------------------------------------- */
.fp-seo-block p { color: #3d3a2f; margin: 0; }

/* ---- Review rows (Latest Reviews pattern) -------------------------------- */
.fp-review-row {
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 10px;
}

/* ---- Legal page sticky TOC ------------------------------------------------ */
.fp-toc { position: sticky; top: 24px; align-self: flex-start; }

/* ---- Newsletter + contact forms (plain HTML placeholders) ---------------- */
.fp-newsletter-form { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.fp-newsletter-form input {
	padding: 10px 11px; border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 8px; font-size: 13px; font-family: inherit;
}
.fp-newsletter-form button,
.fp-contact-form button {
	background: var(--wp--preset--color--forest); color: #fff; border: none;
	padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.fp-newsletter-form button:hover,
.fp-contact-form button:hover { background: var(--wp--preset--color--ink); }

.fp-contact-form { display: flex; flex-direction: column; gap: 14px; }
.fp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fp-contact-form label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.fp-contact-form input,
.fp-contact-form select,
.fp-contact-form textarea {
	width: 100%; padding: 11px 13px; border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--wp--preset--color--canvas);
}
.fp-contact-form textarea { min-height: 130px; resize: vertical; }
.fp-contact-form button { align-self: flex-start; padding: 13px 28px; }

/* ==========================================================================
   RESPONSIVE — phone / tablet / desktop
   ========================================================================== */

/* Tablet */
@media (max-width: 960px) {
	.fp-post-grid.wp-block-columns,
	.fp-post-grid .wp-block-columns { flex-wrap: wrap; }
	.fp-toc { position: static; }
}

/* Phone */
@media (max-width: 600px) {
	.fp-post-grid > .wp-block-column,
	.fp-review-row { width: 100% !important; flex-basis: 100% !important; }
	.fp-form-row { grid-template-columns: 1fr; }
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;
	}
}