/* ==========================================================================
   Avalon Broker – Site chrome
   Header, primary navigation (incl. mobile dropdown), and footer.
   Shared by every page so the chrome stays identical site-wide.
   ========================================================================== */

/* Header ---------------------------------------------------------------------
   Two-tier, matching the site's original look: a slim nav strip pinned to
   the top of the viewport, and a tall banner below it with the logo
   centred large. Only the strip is fixed — the banner scrolls away.
   ---------------------------------------------------------------------- */

/* Every page's own stylesheet still carries its original bare-tag chrome
   rules (header/nav ul/header img/footer), left in place because this pass
   only touches the header and footer. Those old rules can still match our
   new markup by element type, so anything they set that our classes don't
   explicitly re-declare would otherwise leak through. This block closes
   that gap regardless of which page stylesheet is loaded alongside it. */
.site-header {
	display: block;
}

.site-footer {
	height: auto;
	padding: 0;
}

.primary-nav-bar__logo img,
.site-header__logo img {
	margin: 0;
	max-width: none;
}

/* Same leak, different spot: the footer's "Quick Links" nav is also a
   bare <nav><ul>, so it needs the identical neutralising. Scoping to
   "inside .site-header" / "inside .site-footer" (2 extra type selectors)
   beats the old bare "nav ul" rule's specificity outright, regardless of
   which loads last. */
.site-header nav ul,
.site-footer nav ul {
	position: static;
	top: auto;
	left: auto;
	transform: none;
	width: auto;
	margin: 0;
	padding: 0;
	border-bottom: none;
	background-color: transparent;
	box-shadow: none;
	border-radius: 0;
	z-index: auto;
	text-align: left;
	flex-wrap: nowrap;
}

.site-header nav ul li,
.site-footer nav ul li {
	margin: 0;
}

.primary-nav__link::after {
	width: auto;
}

.primary-nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--header-height);
	background-color: var(--color-primary);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.primary-nav-bar__inner {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.primary-nav-bar__logo {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	transition: opacity var(--transition);
}

.primary-nav-bar__logo:hover,
.primary-nav-bar__logo:focus-visible {
	opacity: 0.85;
}

.primary-nav-bar__logo img {
	height: 74px;
	width: auto;
}

.site-header__brand {
	background-color: var(--color-primary);
	text-align: center;
	padding: 48px 20px 40px;
}

/* Sized by width (not height) so it scales fluidly with the viewport and
   can never end up wider than the screen — a fixed height combined with
   this logo's wide aspect ratio was overflowing narrow phones (e.g. a
   height of 84px rendered ~422px wide, wider than a 375px screen). */
.site-header__logo {
	display: block;
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
}

.site-header__logo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

@media (max-width: 700px) {
	.site-header__brand {
		padding: 32px 20px 28px;
	}

	.site-header__logo {
		max-width: 320px;
	}
}

/* Below ~480px the fixed-height small nav logo (285px wide at 74px tall)
   starts closing in on the hamburger button at the opposite edge — shrink
   it so the two never collide. */
@media (max-width: 480px) {
	.primary-nav-bar__logo img {
		height: 52px;
	}
}

/* Top-bar quick contact (phone + email) -------------------------------------
   Desktop/laptop/tablet only — hidden on phones, where the strip is too
   narrow and the same numbers already appear in the mobile nav panel. */

.primary-nav-bar__contact {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	margin-right: 4px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
}

.primary-nav-bar__contact-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.primary-nav-bar__contact-item a:hover,
.primary-nav-bar__contact-item a:focus-visible {
	text-decoration: underline;
}

.primary-nav-bar__contact-icon {
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.primary-nav-bar__contact {
		display: flex;
	}
}

/* Between roughly 901px and 1149px the horizontal nav list is already
   showing (hamburger is gone above 900px) and its own width, plus the
   logo, leaves no room left for this block without the two overlapping —
   confirmed by measuring their boxes at a spread of widths. Hide it in
   just that gap; it reappears once there's genuinely space for it. */
@media (min-width: 901px) and (max-width: 1149px) {
	.primary-nav-bar__contact {
		display: none;
	}
}

/* Shifted further right on wider screens, where there's confirmed room
   for it (below ~1340px this pushes it past the edge of the bar —
   measured the clipping point directly rather than guessing). */
@media (min-width: 1340px) {
	.primary-nav-bar__contact {
		transform: translateX(50%);
	}
}

/* Below 900px the hamburger takes over the right edge of the strip, so
   the contact block needs room to clear it instead of running underneath. */
@media (max-width: 900px) {
	.primary-nav-bar__contact {
		margin-right: 70px;
	}
}

/* Primary nav --------------------------------------------------------------
   Desktop: horizontal list, centred in the slim top strip.
   Mobile (<= 900px): collapsed behind a hamburger button, opens as a
   smooth dropdown panel beneath the strip.
   ---------------------------------------------------------------------- */

.nav-toggle {
	display: none;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	flex-shrink: 0;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
}

.nav-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-text-invert);
	transition: transform var(--transition-nav), opacity var(--transition-nav);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: 40px;
}

.primary-nav__link {
	display: inline-block;
	position: relative;
	padding: 10px 0;
	color: var(--color-text-invert);
	font-size: 17px;
	white-space: nowrap;
}

.primary-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 2px;
	background-color: var(--color-text-invert);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition);
}

.primary-nav__link:hover::after,
.primary-nav__link:focus-visible::after,
.primary-nav__link.is-active::after {
	transform: scaleX(1);
}

/* "Get in Touch" — highlighted as a small gradient pill button. */

.primary-nav__link--cta {
	padding: 10px 28px;
	border-radius: 999px;
	background: linear-gradient(135deg, #3fa513 0%, var(--color-accent) 55%, var(--color-accent-dark) 100%);
	box-shadow: 0 4px 14px rgba(18, 60, 2, 0.35);
	transition: transform var(--transition-nav), box-shadow var(--transition-nav), filter var(--transition-nav);
}

.primary-nav__link--cta::after {
	display: none;
}

.primary-nav__link--cta:hover,
.primary-nav__link--cta:focus-visible {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(18, 60, 2, 0.45);
}

@media (max-width: 900px) {
	.nav-toggle {
		display: flex;
	}

	.primary-nav {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
		background-color: var(--color-primary);
		box-shadow: var(--shadow-md);
		transform: translateY(-10px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: transform var(--transition-nav), opacity var(--transition-nav), visibility var(--transition-nav);
	}

	.primary-nav.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0 16px;
	}

	.primary-nav__list li {
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.primary-nav.is-open .primary-nav__list li {
		opacity: 1;
		transform: translateY(0);
	}

	.primary-nav.is-open .primary-nav__list li:nth-child(1) { transition-delay: 0.05s; }
	.primary-nav.is-open .primary-nav__list li:nth-child(2) { transition-delay: 0.1s; }
	.primary-nav.is-open .primary-nav__list li:nth-child(3) { transition-delay: 0.15s; }
	.primary-nav.is-open .primary-nav__list li:nth-child(4) { transition-delay: 0.2s; }
	.primary-nav.is-open .primary-nav__list li:nth-child(5) { transition-delay: 0.25s; }

	.primary-nav__link {
		padding: 14px 24px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.primary-nav__link::after {
		display: none;
	}

	.primary-nav__link--cta {
		margin: 14px 24px 4px;
		padding: 14px 24px;
		text-align: center;
		border-bottom: none;
	}
}

/* Footer -------------------------------------------------------------------- */

.site-footer {
	background-color: var(--color-footer-bg);
	color: rgba(255, 255, 255, 0.85);
	margin-top: 60px;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.85);
}

.site-footer__top {
	padding: 56px 0 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.3fr 1.2fr;
	gap: 40px;
}

.footer-col__heading {
	font-family: var(--font-base);
	font-weight: bold;
	font-size: 0.95rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #e4c203;
	margin-bottom: 18px;
}

.footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.95rem;
}

.footer-col a {
	transition: color var(--transition);
}

.footer-col a:hover,
.footer-col a:focus-visible {
	color: #e4c203;
	text-decoration: underline;
}

.footer-col--brand__logo {
	height: 52px;
	width: auto;
	margin-bottom: 14px;
}

.footer-col--brand__tagline {
	font-size: 0.82rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 20px;
}

.footer-social {
	display: flex;
	gap: 14px;
}

.footer-social img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	transition: transform var(--transition);
}

.footer-social a:hover img,
.footer-social a:focus-visible img {
	transform: translateY(-3px);
}

.footer-col__contact li {
	line-height: 1.5;
}

.site-footer__map {
	padding: 44px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: center;
}

.site-footer__map .container {
	max-width: 1440px;
}

.site-footer__map .footer-col__heading {
	text-align: center;
}

.site-footer__map-frame {
	max-width: 1100px;
	margin: 0 auto;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	line-height: 0;
}

.site-footer__map-frame iframe {
	width: 100%;
	height: 380px;
	border: 0;
	display: block;
}

@media (max-width: 1200px) {
	.site-footer__map-frame {
		max-width: 100%;
	}
}

.site-footer__legal {
	padding: 20px 0;
	text-align: center;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 960px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 40px;
	}
}

@media (max-width: 560px) {
	.footer-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer-col ul {
		align-items: center;
	}

	.footer-col--brand {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-social {
		justify-content: center;
	}
}

/* Shared "about us" blurb --------------------------------------------------
   Appears near the end of every page, above the accreditation logos.
   ---------------------------------------------------------------------- */

.about-blurb {
	background-color: var(--color-surface);
	padding: 60px 0;
}

.about-blurb .container {
	max-width: 1440px;
}

.about-blurb__row {
	display: flex;
	align-items: flex-start;
	gap: 56px;
}

.about-blurb__title-col {
	flex: 0 0 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 12px;
}

.about-blurb__title {
	text-align: center;
	font-size: clamp(28px, 4vw, 40px);
	font-family: 'Times New Roman', Times, serif;
	background: linear-gradient(135deg, #8104bb, #8b5e00, #e4c203);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.about-blurb__title-rule {
	width: 100%;
	height: 1px;
	background-color: var(--color-text);
	border: none;
	margin-top: 48px;
}

.about-blurb__text {
	flex: 1;
	font-family: 'Times New Roman', Times, serif;
	font-size: 1.05rem;
	letter-spacing: 0.3px;
	text-align: center;
}

.about-blurb__text p + p {
	margin-top: 16px;
}

@media (max-width: 760px) {
	.about-blurb__row {
		flex-direction: column;
		align-items: center;
		gap: 24px;
		text-align: center;
	}

	.about-blurb__title-col {
		flex-basis: auto;
		width: 100%;
		max-width: 320px;
	}
}

/* Shared partner / accreditation logo rows ---------------------------------
   Used for the insurer-partner strip (home page only) and the brokers /
   accreditation strip (every page).
   ---------------------------------------------------------------------- */

.logo-row {
	background-color: var(--color-surface);
	padding: 40px 0;
}

.logo-row__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 48px;
}

.logo-row__list img {
	width: 170px;
}

.logo-row__list a:hover img {
	transform: scale(1.04);
	transition: transform var(--transition);
}

.logo-row--brokers .logo-row__list .logo--financial img,
.logo-row--brokers .logo-row__list .logo--insurance img {
	width: 100px;
}

@media (max-width: 600px) {
	.logo-row__list {
		gap: 28px;
	}

	.logo-row__list img {
		width: 120px;
	}

	.logo-row--brokers .logo-row__list .logo--financial img,
	.logo-row--brokers .logo-row__list .logo--insurance img {
		width: 80px;
	}
}

/* Back-to-top button ---------------------------------------------------------
   Desktop only — appears once the page has been scrolled down a bit.
   ---------------------------------------------------------------------- */

.back-to-top {
	position: fixed;
	right: 28px;
	bottom: 28px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-text-invert);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	line-height: 1;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--transition-nav), transform var(--transition-nav),
		visibility var(--transition-nav), background-color var(--transition);
	z-index: 900;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background-color: var(--color-accent);
}

@media (max-width: 900px) {
	.back-to-top {
		display: none;
	}
}