/**
 * FOA Site — layout and component rules that theme.json cannot express.
 *
 * Palette lives in theme.json; use the --wp--preset--color--* variables.
 *
 * @package foa-site
 */

/* ==========================================================================
   Header
   ========================================================================== */

.foa-header {
	z-index: 100;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.foa-logo {
	display: flex;
	align-items: center;
	line-height: 0;
}

.foa-logo img {
	height: 54px;
	width: auto;
	display: block;
}

.foa-header__nav {
	gap: 28px;
}

.foa-header .wp-block-button__link {
	white-space: nowrap;
}

/* Nav links on navy: white. The orange line marks the page you are on and
   slides in under the item you hover; it is a signal, not a decoration. */
.foa-header .wp-block-navigation a {
	color: var(--wp--preset--color--base);
}

.foa-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--base);
}

.foa-header .wp-block-navigation .wp-block-navigation-item__label {
	color: inherit;
}

.foa-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-bottom: 4px;
}

.foa-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	display: block;
	height: 3px;
	width: 0;
	background: var(--wp--preset--color--orange);
	transition: width 0.2s ease-in-out;
}

.foa-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.foa-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.foa-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after {
	width: 100%;
}

/* The language switcher is a utility, not a destination: quieter. */
.foa-header .wp-block-navigation__container > .wp-block-polylang-navigation-language-switcher > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-navy);
	font-size: 0.95em;
}

/* Dropdowns: a navy panel with room for long titles. The gap between the
   item and the panel is bridged by an invisible strip, so the pointer can
   travel down into the panel without the menu closing. */
.foa-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 280px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(10, 20, 36, 0.35);
	margin-top: 10px;
}

.foa-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.foa-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 8px 12px;
	border-radius: 4px;
	white-space: normal;
	line-height: 1.35;
}

.foa-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.foa-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--orange);
}

/* Mobile overlay: plain white links, no line, no panel. */
.foa-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.foa-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0;
	padding: 0 0 0 12px;
	border: 0;
	box-shadow: none;
	margin-top: 4px;
}

.foa-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before {
	display: none;
}

.foa-header .wp-block-navigation__responsive-container-open,
.foa-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
	.foa-header {
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.foa-logo img {
		height: 44px;
	}
	.foa-header__nav {
		gap: 12px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foa-footer a:not(.foa-logo) {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.foa-footer a:not(.foa-logo):hover {
	color: var(--wp--preset--color--orange);
}

/* Footer links on one line, separated by middle dots. */
.foa-footer__links .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "·";
	color: var(--wp--preset--color--on-navy);
	margin-right: 0.5rem;
}

.foa-footer .foa-logo img {
	height: 56px;
}

.foa-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   Content
   ========================================================================== */

.foa-main {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Archive / search result rows */
.foa-result {
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Orange accent divider (kept for pages that still use it in content) */
.foa-orange-divider {
	background-color: var(--wp--preset--color--orange);
	width: 30px;
	height: 6px;
	margin: 12px 0 20px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* "Text link" style: an underlined link with button spacing. */
.wp-block-button.is-style-foa-link .wp-block-button__link {
	background: transparent;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--wp--preset--color--blue);
}

.wp-block-button.is-style-foa-link .wp-block-button__link.has-base-color {
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-foa-link .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--orange);
}

/* ==========================================================================
   Front page: the journey
   ========================================================================== */

.foa-eyebrow {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

/* Photo placeholders: gone the moment an Image block replaces them. */
.foa-placeholder {
	border: 1px dashed rgba(255, 255, 255, 0.3);
}

/* Steps on a line: the line runs through the numbered circles.
   Named foa-journey-* on purpose: the membership plugin already uses
   .foa-steps / .foa-step for the add-a-car stepper on the account page, and
   this rule's full-width rule was being drawn straight across it. */
.foa-journey-steps {
	position: relative;
}

.foa-journey-steps::before {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	top: 17px;
	height: 3px;
	background: var(--wp--preset--color--border);
}

.foa-journey-step {
	position: relative;
}

.foa-journey-step__num {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 18px;
	position: relative;
	box-shadow: 0 0 0 6px var(--wp--preset--color--base);
}

.foa-journey-step h3 {
	margin: 0 0 8px;
}

.foa-journey-step p:last-child {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media (max-width: 900px) {
	.foa-journey-steps.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.foa-journey-steps::before {
		display: none;
	}
}

@media (max-width: 520px) {
	.foa-journey-steps.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Proof, in place of testimonials: what the association has actually done.
   Figures first because they are checkable, then the wins in plain words. */
.foa-figures {
	gap: var(--wp--preset--spacing--50);
	text-align: center;
}

.foa-figure__number {
	font-family: var(--wp--preset--font-family--titillium-web);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--navy);
	margin: 0;
}

.foa-figure__label {
	margin: 0.4rem auto 0;
	max-width: 16rem;
	font-size: 0.95rem;
	line-height: 1.4;
}

.foa-wins__list {
	max-width: 46rem;
	padding-left: 0;
	list-style: none;
}

.foa-wins__list li {
	position: relative;
	padding-left: 1.6rem;
	margin: 0.6rem 0;
}

/* A tick rather than a bullet: each line is something that got done. */
.foa-wins__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.85rem;
	border: solid var(--wp--preset--color--orange);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

@media (max-width: 700px) {
	.foa-figures.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

/* Join band sits directly under the proof band: one hairline between. */
.foa-join-band {
	border-top: 1px solid var(--wp--preset--color--border);
}

.foa-join-band__text {
	flex: 1 1 420px;
	max-width: 640px;
}

.foa-join-band__text h2 {
	margin-bottom: 6px;
}

.foa-join-band .wp-block-buttons {
	flex: 0 0 auto;
}

/* ==========================================================================
   Service points (list rendered by the membership plugin)
   ========================================================================== */

.foa-location-link {
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 30px;
	text-decoration: none;
	padding: 8px 15px;
	display: inline-block;
	color: var(--wp--preset--color--contrast);
}

.foa-location-link:hover {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
}

.foa-sp-list {
	margin-top: 30px;
}

.foa-sp-region {
	margin-bottom: 40px;
}

.foa-sp-region-title {
	margin-bottom: 20px;
}

.foa-sp-region-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 24px;
}

.foa-sp-card {
	padding: 16px 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
}

.foa-sp-card-title {
	margin-top: 0;
	margin-bottom: 12px;
}

.foa-sp-card-details {
	font-size: 0.9em;
}

.foa-sp-card-details > div {
	margin-bottom: 6px;
}

.foa-sp-card-address {
	line-height: 1.6;
}

.foa-sp-card-map {
	margin-top: 12px;
}

/* Full-bleed hero variant: the photo sits behind the headline. */
.foa-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* ==========================================================================
   Articles: the reading page, the topic hubs and the cards they share
   ========================================================================== */

/* An article is read, so it keeps the narrow measure even where the page
   around it is wide. */
.foa-article .wp-block-post-content > *,
.foa-article__head > *,
.foa-article__summary {
	max-width: 40rem;
}

.foa-article__eyebrow {
	gap: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.foa-article__eyebrow a {
	text-decoration: none;
}

.foa-article__summary {
	margin-top: 0.75rem;
}

/* When the advice was last true matters more than when it was written.
   WordPress deliberately renders nothing for a modified date that falls on
   the publication day, so a newly published article has no update to report
   and the whole line stands down rather than showing a bare label. */
/* Scoped through .foa-article so it outranks WordPress's own flex-layout
   rule, which sits at the same specificity and would otherwise win. */
.foa-article .foa-article__meta {
	display: none;
}

.foa-article .foa-article__meta:has(time) {
	display: flex;
	gap: 0.4rem;
	align-items: baseline;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.foa-article__meta-label {
	margin: 0;
	font-weight: 600;
}

.foa-article__meta .wp-block-post-date {
	margin: 0;
}

.foa-article__related {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Cards, shared by the hubs, the overview and the related list. */
.foa-card-grid {
	gap: var(--wp--preset--spacing--40);
}

.foa-card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem 1.4rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	height: 100%;
}

.foa-card:hover {
	border-color: #BFCDDD;
}

.foa-card__kind,
.foa-card__eyebrow {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	gap: 0.3rem;
}

.foa-card__kind a,
.foa-card__eyebrow a {
	text-decoration: none;
}

.foa-card h2,
.foa-card h3 {
	margin: 0;
}

.foa-card h2 a,
.foa-card h3 a {
	text-decoration: none;
}

.foa-card h2 a:hover,
.foa-card h3 a:hover {
	color: var(--wp--preset--color--blue);
}

.foa-card p {
	margin: 0;
}

/* The date is the freshness signal, so it sits at the foot of the card. */
.foa-card__date {
	margin-top: auto;
	padding-top: 0.5rem;
}

.foa-hub__intro {
	max-width: 40rem;
}

@media (max-width: 900px) {
	.foa-card-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.foa-card-grid.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A service point with no photo leaves an empty column behind, and a 40%
   column of contact details beside a hole reads as a mistake. When the
   picture is missing the details take the whole row. Keyed on the image
   itself rather than an empty column: WordPress leaves whitespace inside the
   column, so :empty never matches it. */
.foa-sp-single .wp-block-columns:not(:has(.wp-block-post-featured-image)) .wp-block-column:first-child {
	flex-basis: 100% !important;
}

.foa-sp-single .wp-block-columns:not(:has(.wp-block-post-featured-image)) .wp-block-column:last-child {
	display: none;
}

/* ==========================================================================
   Article furniture: contents, callouts, card images
   ========================================================================== */

/* On this page. Sits in the margin on a wide screen, at the top of the
   article on a narrow one. Built on the server from the article's own
   headings, so it is there without JavaScript. */
.foa-toc {
	box-sizing: border-box;
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.foa-toc__title {
	font-size: 0.8rem !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.6rem;
}

.foa-toc__list {
	margin: 0;
	padding-left: 1.1rem;
}

.foa-toc__list li {
	margin: 0.3rem 0;
}

.foa-toc__list a {
	text-decoration: none;
}

.foa-toc__list a:hover {
	text-decoration: underline;
}

/* Headings the contents links to should not hide under the sticky header. */
.foa-article .wp-block-post-content h2 {
	scroll-margin-top: 6rem;
}

/* It used to float in the margin and sit sticky. In a column this narrow it
   simply landed on top of the text, so it now opens the article instead:
   the reader meets the shape of the piece before the first paragraph. */
.foa-toc {
	max-width: 40rem;
}

/* Callouts: a group block wearing a style. The left edge carries the
   meaning, so the two read apart at a glance without shouting. */
.wp-block-group.is-style-foa-tip,
.wp-block-group.is-style-foa-warning {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--border);
	border-left-width: 4px;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: var(--wp--preset--spacing--40) 0;
}

.wp-block-group.is-style-foa-tip {
	border-left-color: var(--wp--preset--color--blue);
}

.wp-block-group.is-style-foa-warning {
	border-left-color: var(--wp--preset--color--orange);
}

.wp-block-group.is-style-foa-tip > *:first-child,
.wp-block-group.is-style-foa-warning > *:first-child {
	margin-top: 0;
}

.wp-block-group.is-style-foa-tip > *:last-child,
.wp-block-group.is-style-foa-warning > *:last-child {
	margin-bottom: 0;
}

/* Card images. A card without one simply starts at its eyebrow. */
.foa-card__image {
	margin: -0.35rem 0 0.5rem;
}

.foa-card__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

/* Nothing to relate to is not worth a heading and an apology. */
.foa-article__related:has(.wp-block-query-no-results) {
	display: none;
}

/* Breadcrumbs: where this article sits, above everything else it says. */
.foa-crumbs {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.75rem;
}

.foa-crumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.foa-crumbs a:hover {
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
}

.foa-crumbs__sep {
	margin: 0 0.4rem;
	opacity: 0.6;
}