/**
 * 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);
}

/* Four things that hold each other up, shown side by side. They were drawn as
   numbered circles on a line, which is a process diagram: it told the reader
   they happen in an order, and they do not (Nicole, 2026-09-05). A rule across
   the top of each column says the opposite, that these are four parallel
   sections, without asking anybody to read a metaphor into a shape. 3px to
   match the orange underline in the navigation, which is the weight that
   orange rule already has on this site.
   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-step {
	position: relative;
	padding-top: 20px;
	border-top: 3px solid var(--wp--preset--color--orange);
}

.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));
	}
}

@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;
}

/* A history timeline. Deliberately plain: the point of the page is that it
   reads as a record rather than a case being argued, so the dates carry the
   structure and nothing is highlighted over anything else. Entries that are
   setbacks look exactly like entries that are not. */
.foa-timeline {
	position: relative;
	/* Breathing room after the intro paragraph, and the whole line sits
	   indented from the text above it (Nicole, 2026-09-08). The indent is
	   padding, not margin: WordPress' constrained layout forces
	   margin-left: auto !important on direct children, so a margin never
	   lands. The rail is a pseudo-element for the same reason. */
	margin: 2.5rem 0 0;
	padding: 0 0 0 6rem;
	list-style: none;
}

.foa-timeline::before {
	content: "";
	position: absolute;
	left: 4rem;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--border);
}

.foa-timeline > li {
	position: relative;
	padding-bottom: 2rem;
}

.foa-timeline > li:last-child {
	padding-bottom: 0;
}

.foa-timeline > li::before {
	content: "";
	position: absolute;
	left: calc(-2rem - 6px);
	top: 0.45rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	box-shadow: 0 0 0 4px var(--wp--preset--color--base);
}

.foa-timeline__when {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	margin-bottom: 0.25rem;
}

.foa-timeline__what {
	margin: 0;
	max-width: 40rem;
}

/* Whatever follows the timeline is a separate move, usually the button through
   to the full page. Without this it sits against the last entry as though it
   belonged to it. */
.foa-timeline + p,
.foa-timeline + .wp-block-buttons {
	margin-top: 2.25rem;
}

@media (max-width: 600px) {
	.foa-timeline {
		padding-left: 2.25rem;
	}
	.foa-timeline::before {
		left: 1rem;
	}
	.foa-timeline > li::before {
		left: calc(-1.25rem - 6px);
	}
}