/**
 * NovaBP Tax Advisor — shared foundation
 *
 * Design tokens and the primitives every Tax Advisor section reuses (section
 * shell, eyebrow/heading/lede header stack, buttons, cards, icon boxes). Each
 * section stylesheet depends on this file rather than restating the values.
 *
 * Figma reference: NOVABP - Landing Page (Copy), frame "Tax Advisory" 319:2074
 * — sections 319:2109, 319:2451, 319:2710, 319:2667, 2020:2249, 319:2748,
 * 319:2806, 2020:2626.
 */

.nova-tax {
	/* Palette — Figma design-system tokens, named after their Figma style. */
	--nova-tax-primary: #021137;        /* Primary/500 — headings, dark panels */
	--nova-tax-green: #09a500;          /* Secondary/500 — eyebrow, CTA */
	--nova-tax-green-deep: #087f01;     /* Secondary/600 — pull quotes */
	--nova-tax-heading: #020f32;        /* Text/Text B — card titles */
	--nova-tax-body: #35415f;           /* Text/Text Body — card copy */
	--nova-tax-surface: #f5f6f8;        /* Base/BG, Grey/50 */
	--nova-tax-border: #dee3ee;         /* Base/Stroke */
	--nova-tax-rule: #e6e7eb;           /* Primary/50 — section rule */
	--nova-tax-white: #ffffff;

	/*
	 * Figma paints body copy as Primary/500 at 80% layer opacity rather than a
	 * flat tint. Baking the alpha into the colour keeps that exact result while
	 * letting the text sit in a normal stacking context.
	 */
	--nova-tax-lede: rgb(2 17 55 / 0.8);
	--nova-tax-lede-on-dark: rgb(255 255 255 / 0.8);

	/* Type */
	--nova-tax-font: "Manrope", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;

	/*
	 * Rhythm — the parent frame sets no gap, so section padding is the rhythm.
	 *
	 * The values themselves, and every breakpoint that moves them, live on :root
	 * in style.css so the blog and single-post stacks (which do not load this
	 * file) share the same gutters. These two names stay because every landing
	 * section already references them.
	 */
	--nova-tax-section-padding-y: var(--nova-gutter-y, 80px);
	--nova-tax-section-padding-x: var(--nova-gutter-x, 80px);

	/*
	 * Widest the content inside a full-bleed section is allowed to get. The
	 * Figma frame is 1440px wide with 80px gutters, so 1280px is the measure
	 * the design was drawn at — past that the background keeps bleeding to the
	 * viewport edge while the text stops stretching.
	 */
	--nova-tax-content-max: 1280px;

	box-sizing: border-box;
	font-family: var(--nova-tax-font);
}

.nova-tax *,
.nova-tax *::before,
.nova-tax *::after {
	box-sizing: border-box;
}

.nova-tax p {
	margin: 0;
}

.nova-tax h1,
.nova-tax h2,
.nova-tax h3,
.nova-tax h4,
.nova-tax h5,
.nova-tax h6 {
	margin: 0;
}

/*
 * The UA sheet gives `blockquote` and `figure` `margin: 1em 40px`. The 40px
 * inline half is the dangerous one — inside a fixed-width card it silently
 * narrows the measure by 80px, so the copy wraps far shorter than Figma draws
 * it and the card grows past its designed height. Reset it here rather than
 * per section.
 */
.nova-tax blockquote,
.nova-tax figure {
	margin: 0;
}

/*
 * Heading rules across the Tax Advisor stylesheets are scoped `.nova-tax
 * .nova-tax-<block>` rather than `.nova-tax-<block>` alone, and restate
 * font-family / text-transform / letter-spacing explicitly.
 *
 * The site's Elementor Global Kit styles bare tags — `.elementor-kit-9 h2`
 * sets Lato, `text-transform: capitalize` and `letter-spacing: -1px`. That
 * selector scores (0,1,1) and beats a lone class, which turned the Figma
 * sentence-case headings into Title Case. Two classes score (0,2,0) and win,
 * while still losing on a tie to Elementor's per-page CSS, which loads later —
 * so each widget's typography controls keep overriding these defaults.
 */

/* ---------------------------------------------------------------------------
 * Section shell
 * ------------------------------------------------------------------------ */

.nova-tax-section {
	position: relative;
	width: 100%;
	padding: var(--nova-tax-section-padding-y) var(--nova-tax-section-padding-x);
}

/*
 * The content column inside a section. The `<section>` itself stays full width
 * so its background bleeds to the viewport edge; this caps what sits on top of
 * it at the measure the design was drawn at and centres it, so past a 1440px
 * viewport the text stops stretching instead of following the gutters out.
 *
 * Every section widget puts this class on its `.nova-tax-<block>__inner` div
 * alongside the block-specific one, which keeps carrying that block's layout.
 */
.nova-tax-section__inner {
	width: 100%;
	max-width: var(--nova-tax-content-max);
	margin-inline: auto;
}

.nova-tax-section--white {
	background-color: var(--nova-tax-white);
}

.nova-tax-section--surface {
	background-color: var(--nova-tax-surface);
}

/*
 * Two 1280x1px rules sit in the parent frame as siblings — one between Why
 * Choose and Our Team (Primary/50), one between FAQs and Contact (Base/Stroke).
 * Drawing them as a pseudo-element on the section that follows reproduces that
 * position without needing a spare element on the page, and keeps the rule
 * inset to the content measure rather than bleeding to the viewport edge.
 */
.nova-tax-section--rule-top::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	width: min(100%, var(--nova-tax-content-max));
	height: 1px;
	background-color: var(--nova-tax-rule-color, var(--nova-tax-rule));
	transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
 * Header stack — eyebrow / heading / lede
 *
 * Nesting mirrors the Figma frames so the gaps map one-to-one:
 *   .nova-tax-header        gap 40  (stack + optional button)
 *     .nova-tax-header__stack   gap 20  (title group + lede group)
 *       .nova-tax-header__title   gap 8   (eyebrow + heading)
 *       .nova-tax-header__lede    gap 8   (one or more paragraphs)
 * ------------------------------------------------------------------------ */

.nova-tax-header,
.nova-tax-header__stack,
.nova-tax-header__title,
.nova-tax-header__lede {
	display: flex;
	flex-direction: column;
}

.nova-tax-header {
	gap: 40px;
	align-items: flex-start;
	width: 100%;
	max-width: var(--nova-tax-header-max, none);
}

.nova-tax-header__stack {
	gap: 20px;
}

.nova-tax-header__title {
	gap: 8px;
}

.nova-tax-header__lede {
	gap: 8px;
}

.nova-tax-header--center {
	align-items: center;
	margin-inline: auto;
	text-align: center;
}

/*
 * `text-align: center` on the wrapper is not enough for the eyebrow. It is an
 * inline-flex row, so its tick and label are laid out by flexbox and ignore
 * text-align; and because these inner columns default to `align-items: stretch`
 * the eyebrow paragraph fills the width and parks that row at the left edge.
 * Centring the columns lets each child shrink to its content and sit centred.
 */
.nova-tax-header--center .nova-tax-header__title,
.nova-tax-header--center .nova-tax-header__lede {
	align-items: center;
}

/*
 * The split header: eyebrow + heading in one column, lede in a second, the two
 * sitting on a shared baseline. Figma draws it as a row of two `fill` frames
 * bottom-aligned with a 60px gap — the heading is two lines and the lede three,
 * so aligning the tops would leave the lede floating; `flex-end` is what puts
 * the last line of each against the same edge.
 *
 * The row lives on `__stack`, not on `.nova-tax-header`, so the header keeps
 * its 40px slot for an optional button below the pair.
 *
 * `min-width: 0` on the children stops a long unbroken word in the heading from
 * forcing the column past its half — flex items floor at their content width
 * without it.
 */
.nova-tax-header--split .nova-tax-header__stack {
	flex-direction: row;
	align-items: flex-end;
	gap: var(--nova-tax-header-split-gap, 60px);
	width: 100%;
}

.nova-tax-header--split .nova-tax-header__title,
.nova-tax-header--split .nova-tax-header__lede {
	flex: 1 1 0;
	min-width: 0;
}

/* Figma centres the title column against the taller lede; the pair is still
 * bottom-aligned as a whole. */
.nova-tax-header--split .nova-tax-header__title {
	justify-content: center;
}

.nova-tax-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--nova-tax-green);
}

/*
 * The tick is 3.5x11 in Figma. The exported artwork carries its own 2px round
 * stroke, so the box only has to give it room — no width/height on the SVG.
 */
.nova-tax-eyebrow__tick {
	width: 4px;
	height: 11px;
}

.nova-tax .nova-tax-heading {
	font-family: var(--nova-tax-font);
	font-size: 52px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-primary);
}

.nova-tax .nova-tax-subheading {
	font-family: var(--nova-tax-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-heading);
}

.nova-tax-lede {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-lede);
}

/* Hero and the CTA panel put the same stack on a dark ground. */
.nova-tax-header--on-dark .nova-tax-heading,
.nova-tax-header--on-dark .nova-tax-subheading {
	color: var(--nova-tax-white);
}

.nova-tax-header--on-dark .nova-tax-lede {
	color: var(--nova-tax-lede-on-dark);
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------ */

/*
 * Two-class scope for the same reason as the headings above: the Global Kit
 * styles bare tags, and `.elementor-kit-9 button` (0,1,1) sets its own accent
 * background, Lato, and 16px/24px padding on every `<button>` — which these
 * buttons are.
 */
.nova-tax .nova-tax-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	font-family: var(--nova-tax-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.nova-tax .nova-tax-btn:hover,
.nova-tax .nova-tax-btn:focus {
	text-decoration: none;
}

/* Size=Md in the Figma button set — the Contact CTA panel is the only user. */
.nova-tax .nova-tax-btn--md {
	min-height: 44px;
	padding: 12px 16px;
	font-size: 16px;
}

.nova-tax .nova-tax-btn--green {
	background-color: var(--nova-tax-green);
	color: var(--nova-tax-white);
}

.nova-tax .nova-tax-btn--green:hover,
.nova-tax .nova-tax-btn--green:focus {
	background-color: var(--nova-tax-green-deep);
	color: var(--nova-tax-white);
}

.nova-tax .nova-tax-btn--navy {
	background-color: var(--nova-tax-primary);
	color: var(--nova-tax-white);
}

.nova-tax .nova-tax-btn--navy:hover,
.nova-tax .nova-tax-btn--navy:focus {
	background-color: #0a1d4d;
	color: var(--nova-tax-white);
}

/*
 * Type=Outline in the Figma button set — a white fill on a Primary/50 hairline,
 * used where the button sits on one of the navy gradient panels.
 */
.nova-tax .nova-tax-btn--white {
	border: 1px solid var(--nova-tax-rule);
	background-color: var(--nova-tax-white);
	color: var(--nova-tax-primary);
}

.nova-tax .nova-tax-btn--white:hover,
.nova-tax .nova-tax-btn--white:focus {
	background-color: #eef1f8;
	color: var(--nova-tax-primary);
}

.nova-tax-btn__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

.nova-tax .nova-tax-btn--md .nova-tax-btn__icon {
	width: 20px;
	height: 20px;
}

/* ---------------------------------------------------------------------------
 * Inline SVG icons
 *
 * Every shipped icon is normalised to `currentColor`, so colour is inherited
 * from the element the icon sits in.
 * ------------------------------------------------------------------------ */

.nova-tax-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/*
 * Several sections paint a content-bearing photograph as a CSS background — a
 * team portrait, an industry segment — because the design crops it behind a
 * plate that a plain <img> could not sit under. A background has no `alt`, so
 * the widget's alt field prints here instead: read by assistive tech, invisible
 * on screen, and out of the layout.
 */
.nova-tax-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 0;
	margin: -1px;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.nova-tax-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Cards and icon boxes
 * ------------------------------------------------------------------------ */

/* White card on a tinted panel — the industry grid in Who We Serve. */
.nova-tax-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	background-color: var(--nova-tax-white);
	border-radius: 12px;
}

/* Tinted card on white — the mentoring pillars. */
.nova-tax-card--surface {
	gap: 16px;
	background-color: var(--nova-tax-surface);
	border: 1px solid var(--nova-tax-border);
	border-radius: 16px;
}

.nova-tax .nova-tax-card__title {
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-heading);
}

.nova-tax .nova-tax-card__title--semibold {
	font-weight: 600;
}

.nova-tax-card__body {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

/*
 * 52x52 white tile holding a 28px glyph. Figma pads it 6px 12px, which only
 * matters because the tile is a fixed square — centring the glyph gets the
 * same result and survives a taller icon.
 */
.nova-tax-icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	background-color: var(--nova-tax-white);
	border-radius: 12px;
	color: var(--nova-tax-primary);
}

.nova-tax-icon-box .nova-tax-icon {
	width: 28px;
	height: 28px;
}

/* The industry grid sets its glyph loose in the card at 32px, with no tile. */
.nova-tax-card__icon {
	width: 32px;
	height: 32px;
	color: var(--nova-tax-primary);
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Figma supplies desktop only; these breakpoints are an addition, tuned to keep
 * the desktop proportions intact down to mobile.
 * ------------------------------------------------------------------------ */

/*
 * The gutter tiers themselves (laptop 1366, tablet 1024, mobile 767) are in
 * style.css on :root — see the "Section gutters" block there. Only the type and
 * layout that ride along with them are below.
 */

@media (max-width: 1024px) {
	.nova-tax .nova-tax-heading {
		font-size: 40px;
	}

	.nova-tax .nova-tax-subheading {
		font-size: 24px;
	}

	.nova-tax-header {
		gap: 32px;
	}

	.nova-tax-header--split {
		--nova-tax-header-split-gap: 40px;
	}
}

@media (max-width: 767px) {
	.nova-tax .nova-tax-heading {
		font-size: 32px;
	}

	.nova-tax .nova-tax-subheading {
		font-size: 22px;
	}

	.nova-tax-lede {
		font-size: 16px;
	}

	.nova-tax-header {
		gap: 24px;
	}

	.nova-tax-header__stack {
		gap: 16px;
	}

	/*
	 * Two half-width columns leave neither the heading nor the lede a usable
	 * measure on a phone, so the split falls back to the plain stacked header.
	 */
	.nova-tax-header--split .nova-tax-header__stack {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
}