/* ============================================================
   STONE ADVISORY: Core Navigation block adaptation

   The homepage nav switched from the bespoke .nav__link markup to
   the standard core Navigation block, which renders links as
   .wp-block-navigation-item__content. This file mirrors the
   original color behavior: graphite links normally, light (paper)
   links while the nav sits over the dark hero, and the theme.json
   global link color (blue) is overridden for the nav only.
   ============================================================ */

.nav__menu {
	gap: 2.25rem;
}

.nav__menu .wp-block-navigation-item__content {
	color: var(--graphite);
	font-family: var(--body);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease-soft);
}

.nav__menu .wp-block-navigation-item__content:hover,
.nav__menu .wp-block-navigation-item__content:focus {
	color: var(--graphite);
	opacity: 0.6;
}

/* Over the dark hero video on the front page: light links. */
.is-front .nav.on-hero .nav__menu .wp-block-navigation-item__content {
	color: var(--paper);
}

.is-front .nav.on-hero .nav__menu .wp-block-navigation-item__content:hover,
.is-front .nav.on-hero .nav__menu .wp-block-navigation-item__content:focus {
	color: var(--paper);
	opacity: 0.75;
}

/* Mobile menu toggle follows the same light/dark treatment. */
.nav__menu .wp-block-navigation__responsive-container-open,
.nav__menu .wp-block-navigation__responsive-container-close {
	color: var(--graphite);
}

.is-front .nav.on-hero .nav__menu .wp-block-navigation__responsive-container-open {
	color: var(--paper);
}

/* ============================================================
   Track Record credibility cards

   These reuse .pillar but sit on the sand (--paper-warm) band, where
   the default paper-warm hover dissolves into the background. Keep the
   cards crisp white at rest and give them a soft lift-shadow on hover
   so the interaction reads clearly without breaking the reveal motion.
   ============================================================ */
.track-record .pillar {
	transition: opacity 1.2s var(--ease), transform 1.2s var(--ease),
		background var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}

.track-record .pillar:hover {
	background: var(--paper);
	box-shadow: 0 16px 40px rgba(0, 43, 90, 0.10);
	z-index: 1;
}

/* Inner-page hero titles sit on a light background, so drop the dark
   text-shadow the homepage hero uses for legibility over its video. */
.practice-page .hero__title {
	text-shadow: none;
}

/* ============================================================
   About FAQ accordion
   ============================================================ */
/* Centered FAQ layout. */
.faq .section__head {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	gap: 1.25rem;
}

.faq .section__index {
	justify-content: center;
	padding-top: 0;
}

.faq .section__title {
	max-width: none;
}

.faq__list {
	border-top: 1px solid var(--line);
	max-width: 62rem;
	margin-left: auto;
	margin-right: auto;
}

.faq__item {
	border-bottom: 1px solid var(--line);
}

.faq__q {
	font-family: var(--display);
	font-size: var(--fs-h3);
	line-height: 1.25;
	color: var(--navy);
	padding: 1.75rem 0;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	transition: color var(--dur-fast) var(--ease-soft);
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q:hover,
.faq__q:focus-visible {
	color: var(--blue);
}

/* Keep the keyboard focus ring only on the plus/minus affordance area by
   letting the global summary:focus-visible outline sit close to the row. */
.faq__q:focus-visible {
	outline-offset: 4px;
}

.faq__q::after {
	content: "+";
	font-family: var(--body);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--blue);
	flex: none;
}

.faq__item[open] .faq__q::after {
	content: "\2013";
}

.faq__a {
	padding: 0 0 1.75rem;
	max-width: 62ch;
	color: var(--graphite);
	font-size: var(--fs-body);
	line-height: 1.6;
}

.faq__a p {
	margin: 0 0 1rem;
}

.faq__a p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Homepage block layout: remove the default block-gap margins.
   Each section carries its own padding and background, and the
   fixed nav overlays the hero. Without this, the block layout
   inserts a light strip above the hero (where the light nav links
   disappear) and thin strips between the coloured sections.
   ============================================================ */
.wp-site-blocks > .hero,
.wp-site-blocks > .section {
	margin-top: 0;
	margin-bottom: 0;
}

/* The hero video iframe is sized in JS to be wider than the viewport so it
   covers the hero in both axes. A global max-width (responsive embeds) was
   clamping it back to 100%, which forced the 16:9 player to letterbox inside
   a too-short frame. Let it size freely so it behaves like background-cover. */
.hero__video {
	max-width: none;
}

/* Track Record cards: the oversized display-number treatment suits the
   Values pillars (01 / 02 / 03), but here the leads are short words. Use a
   restrained size and top-align the content so the cards stack cleanly
   instead of spreading the lead and the text apart. */
.track-record .pillars__grid {
	grid-auto-rows: 1fr;
	align-items: stretch;
}

/* The block flow layout inserts a top-margin gap between grid items, which
   drops the 2nd and 3rd cards down by one block-gap. The grid's borders
   already define the cells, so remove that margin. */
.pillars__grid > * {
	margin-top: 0;
}

.track-record .pillar {
	justify-content: flex-start;
	gap: 1.25rem;
	min-height: 0;
	height: 100%;
}

.track-record .pillar__num {
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	line-height: 1.15;
	margin-bottom: 0.5rem;
}