/* Chambers of SQ — presentation layer only. Builds on Astra's existing layout, not a replacement for it. */

:root {
	--csq-ink: #1f2733;
	--csq-ink-soft: #4b5568;
	--csq-navy: #1e3149;
	--csq-accent: #8b6a2f;
	--csq-accent-deep: #6b4f1f;
	--csq-paper: #faf8f3;
	--csq-line: #dfd6c2;
}

/* ---------- Prevent horizontal overflow / content clipping on narrow viewports ----------
   The recovered Elementor hero/section containers use a desktop margin-left:50% composition
   (content sitting beside a now-removed background image). Elementor's own mobile override
   isn't reliably collapsing this in every section after content replacement, so enforce it here. */
html, body {
	overflow-x: hidden;
	max-width: 100%;
	width: 100%;
}
#page, .site, #content, .site-content, .ast-container, .entry-content, main, article, #primary {
	max-width: 100%;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.e-con {
		--margin-left: 0 !important;
		--margin-right: 0 !important;
		--margin-inline-start: 0 !important;
		--margin-inline-end: 0 !important;
		--width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ---------- Header: logo size + guaranteed nav contrast ----------
   Logo is a ~5.96:1 horizontal lockup (1400x235 source), so a height
   in the client's requested 52-58px band would render at 310-345px
   wide — well past their 250-280px width target. Sized here to land
   inside the width target (45px tall ≈ 268px wide) with the aspect
   ratio locked; see chat for this trade-off flagged explicitly. */
.site-header .custom-logo,
.site-header .ast-site-identity img {
	max-height: 45px;
	max-width: 280px;
	width: auto;
	height: auto;
}
@media (max-width: 768px) {
	.site-header .custom-logo,
	.site-header .ast-site-identity img {
		max-height: 36px;
	}
}
@media (max-width: 544px) {
	.site-header .custom-logo,
	.site-header .ast-site-identity img {
		max-height: 30px;
	}
}
.site-header,
#ast-desktop-header,
.ast-above-header-wrap,
.main-header-bar {
	background-color: #ffffff !important;
}
.main-header-bar .main-navigation .menu-item > .menu-link,
.ast-header-navigation .menu-item > .menu-link,
.main-header-bar ul#menu-primary-menu > li > a,
.main-header-bar ul#menu-mobile > li > a {
	color: var(--csq-ink) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
}
.main-header-bar .main-navigation .menu-item:hover > .menu-link,
.main-header-bar .current-menu-item > .menu-link {
	color: var(--csq-accent-deep) !important;
}
.ast-header-html p {
	color: var(--csq-ink-soft);
	margin: 0;
	font-size: 0.9rem;
}
/* Phone number in the primary nav row — give it presence to match the
   bold, filled CTA button rather than reading as a muted afterthought.
   !important is required here because it must beat the inline style
   Astra renders from the header-html-1 option. */
#header-html-1 a[href^="tel:"] {
	font-size: 17.5px !important;
	font-weight: 600 !important;
}
/* Request a Quote button: Astra's customizer padding/font-size controls
   aren't emitting a desktop-level rule for this button from the option
   value (only a stale @media(max-width:921px) one), so set it directly. */
.ast-header-button-1 .ast-custom-button {
	padding: 9px 22px !important;
	font-size: 15.5px !important;
}
/* Mobile drawer: current-menu-item must use the site's gold, not Astra's
   unstyled default red — the drawer markup sits outside .main-header-bar
   so the desktop rule above doesn't reach it. */
#ast-mobile-header .current-menu-item > .menu-link,
.ast-mobile-popup-drawer .current-menu-item > .menu-link,
.ast-mobile-popup-drawer .menu-item.current-menu-item .menu-link {
	color: var(--csq-accent-deep) !important;
}
.ast-mobile-popup-drawer .menu-link {
	font-weight: 600;
}

/* ---------- Icon rendering hardening (defensive) ----------
   Guards Font Awesome solid icons against any conflicting font-weight/
   font-style reset that would otherwise show an empty glyph box. */
.elementor-icon-box-icon i,
.elementor-icon-list-icon i {
	font-weight: 900 !important;
	font-style: normal !important;
	line-height: 1 !important;
}

/* ---------- Global type & colour restraint (premium, not generic-template) ---------- */
body {
	color: var(--csq-ink);
}
a {
	color: var(--csq-accent-deep);
}
a:hover,
a:focus {
	color: var(--csq-accent);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--csq-accent);
	outline-offset: 2px;
}
.ast-button,
button.ast-button,
.wp-block-button__link,
a.wp-block-button__link {
	background-color: var(--csq-navy) !important;
	border-color: var(--csq-navy) !important;
	border-radius: 4px !important;
	letter-spacing: 0.02em;
}
.ast-button:hover,
.wp-block-button__link:hover {
	background-color: var(--csq-accent-deep) !important;
	border-color: var(--csq-accent-deep) !important;
}
.csq-cta-secondary .wp-block-button__link {
	background-color: transparent !important;
	color: var(--csq-navy) !important;
	border: 2px solid var(--csq-navy) !important;
}
.csq-cta-secondary .wp-block-button__link:hover {
	background-color: var(--csq-navy) !important;
	color: #fff !important;
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--csq-navy);
	color: #fff;
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}
.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* ---------- Credentials strip ---------- */
.csq-credentials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	justify-content: center;
	padding: 1rem 1rem;
	background: var(--csq-paper);
	border-top: 1px solid var(--csq-line);
	border-bottom: 1px solid var(--csq-line);
	font-size: 0.92rem;
	color: var(--csq-ink-soft);
}
.csq-credentials strong {
	color: var(--csq-ink);
}

/* ---------- Practice-area cards ---------- */
.csq-practice-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
@media (max-width: 781px) {
	.csq-practice-cards {
		grid-template-columns: 1fr;
	}
}
.csq-practice-card {
	border: 1px solid var(--csq-line);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	background: #fff;
	border-top: 4px solid var(--csq-accent);
}
.csq-practice-card h3 {
	margin-top: 0;
}

/* ---------- Steps (How Direct Access Works) ---------- */
.csq-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	counter-reset: csq-step;
}
@media (max-width: 781px) {
	.csq-steps {
		grid-template-columns: 1fr;
	}
}
.csq-step {
	position: relative;
	padding: 1.75rem 1.5rem 1.5rem;
	border: 1px solid var(--csq-line);
	border-radius: 8px;
	background: var(--csq-paper);
}
.csq-step::before {
	counter-increment: csq-step;
	content: counter(csq-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--csq-navy);
	color: #fff;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

/* ---------- Urgent hearing band ---------- */
.csq-urgent-band {
	background: var(--csq-navy);
	color: #f2ece0;
	padding: 2.5rem 1.5rem;
	border-radius: 8px;
	text-align: center;
}
.csq-urgent-band h2 {
	color: #fff;
}
.csq-urgent-band .wp-block-button__link {
	background-color: var(--csq-accent) !important;
	border-color: var(--csq-accent) !important;
	color: var(--csq-navy) !important;
	font-weight: 700;
}
.csq-urgent-band .wp-block-button__link:hover {
	background-color: #fff !important;
	color: var(--csq-navy) !important;
}

/* ---------- BSB regulatory bar ---------- */
.csq-regulatory-bar {
	background: var(--csq-navy);
	color: #e6e9f0;
	padding: 1.25rem 1rem;
	font-size: 0.9rem;
	line-height: 1.6;
}
.csq-regulatory-bar__inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}
.csq-regulatory-bar a {
	color: #e9d9b2;
	text-decoration-thickness: 1px;
}
.csq-regulatory-bar p {
	margin: 0.25rem 0;
}

/* ---------- Sticky mobile CTA bar ---------- */
.csq-sticky-cta {
	display: none;
}
@media (max-width: 680px) {
	body {
		padding-bottom: 3.75rem;
	}
	.csq-sticky-cta {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		border-top: 1px solid var(--csq-line);
		background: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
	}
	.csq-sticky-cta__link {
		flex: 1;
		text-align: center;
		padding: 0.85rem 0.5rem;
		font-weight: 700;
		font-size: 0.92rem;
		color: var(--csq-navy);
		text-decoration: none;
	}
	.csq-sticky-cta__link--primary {
		background: var(--csq-navy);
		color: #fff;
	}
}

/* ---------- Fee tables (TablePress, free) — semantic two-column, CSS-only responsive ----------
   No TablePress Pro/Max "Responsive" module in use. These are two-column tables (service, fee),
   so the service-name column wraps naturally and the fee column stays compact and aligned instead
   of collapsing into stacked cards. Horizontal scroll is kept only as an inert fallback. */
.csq-fee-table-wrap {
	overflow-x: auto;
	min-width: 0;
	max-width: 100%;
}
/* Common flex/grid gotcha: a child won't shrink below its content's natural min-width unless told to,
   which is what let the fee table force the whole page wider than the viewport on narrow screens. */
.entry-content, .elementor-widget-container, #primary, .site-content, .ast-container {
	min-width: 0;
}
table.tablepress.csq-fee-table td:first-child,
table.tablepress.csq-fee-table th:first-child {
	overflow-wrap: break-word;
	word-break: break-word;
}
table.tablepress.csq-fee-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 0.94rem;
}
table.tablepress.csq-fee-table th,
table.tablepress.csq-fee-table td {
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var(--csq-line);
	text-align: left;
	vertical-align: top;
}
table.tablepress.csq-fee-table thead th {
	background: var(--csq-navy);
	color: #fff;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
table.tablepress.csq-fee-table td:first-child,
table.tablepress.csq-fee-table th:first-child {
	width: auto;
	overflow-wrap: break-word;
}
table.tablepress.csq-fee-table td:last-child,
table.tablepress.csq-fee-table th:last-child {
	width: 9.5rem;
	min-width: 8rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 600;
}
table.tablepress.csq-fee-table tbody tr:nth-child(even) {
	background: var(--csq-paper);
}
@media (max-width: 480px) {
	table.tablepress.csq-fee-table th,
	table.tablepress.csq-fee-table td {
		padding: 0.5rem 0.5rem;
		font-size: 0.87rem;
	}
	table.tablepress.csq-fee-table td:last-child,
	table.tablepress.csq-fee-table th:last-child {
		width: 6.5rem;
		min-width: 5.5rem;
		white-space: normal;
	}
}

/* ---------- Fees page fee-table CTA ---------- */
.csq-fee-cta {
	margin: 1.25rem 0 3rem;
	text-align: center;
}

/* ---------- Hero ---------- */
.csq-hero {
	text-align: center;
	padding: 1rem 0 0.5rem;
}
.csq-hero h1 {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	color: var(--csq-navy);
	margin-bottom: 0.75rem;
}
.csq-hero__sub {
	font-size: 1.1rem;
	color: var(--csq-ink-soft);
	max-width: 46rem;
	margin: 0 auto;
}

/* ---------- Testimonials ---------- */
.csq-testimonials {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
@media (max-width: 781px) {
	.csq-testimonials {
		grid-template-columns: 1fr;
	}
}
.csq-testimonial {
	margin: 0;
	padding: 1.25rem 1.4rem;
	background: var(--csq-paper);
	border-left: 3px solid var(--csq-accent);
	border-radius: 0 6px 6px 0;
	font-size: 0.92rem;
	color: var(--csq-ink-soft);
}
.csq-testimonial cite {
	display: block;
	margin-top: 0.6rem;
	font-style: normal;
	font-weight: 700;
	color: var(--csq-ink);
}

/* ---------- Two-column layout (Contact page: intro/details + form) ---------- */
.csq-two-col {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 3rem;
	align-items: start;
	text-align: left;
}
.csq-two-col h1,
.csq-two-col h2,
.csq-two-col h3 {
	text-align: left;
}
@media (max-width: 900px) {
	.csq-two-col {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}
.csq-contact-detail {
	margin: 0 0 1.1rem;
	font-size: 0.98rem;
	color: var(--csq-ink-soft);
}
.csq-contact-detail strong {
	display: block;
	color: var(--csq-ink);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.2rem;
}

/* ---------- SureForms: contained width, grouped spacing, clear focus states ---------- */
.csq-quote-form-wrap,
.srfm-form-container {
	max-width: 560px;
	margin: 0 auto;
}
.srfm-form-title {
	font-family: Georgia, serif;
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--csq-navy);
	text-align: center;
	margin: 0 0 1rem;
}
.srfm-form-container {
	background: var(--csq-paper);
	padding: 1.75rem 1.75rem 2rem;
}
/* SureForms reserves a fixed-height slot under every field for its error
   message (empty unless validation fails) and ALSO applies its own native
   row gap - our old margin-bottom on top of both was double-spacing every
   field. Collapse the empty error slot and take over the gap directly. */
.srfm-form-container {
	--srfm-row-gap-between-blocks: 14px;
}
.srfm-block-single {
	margin-bottom: 0;
}
.srfm-error-wrap:not(:has(p:not([hidden]))) {
	min-height: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}
.srfm-block-label {
	font-weight: 600;
	color: var(--csq-ink);
	margin-bottom: 0.35rem;
	display: inline-block;
}
.srfm-form-container input[type="text"],
.srfm-form-container input[type="email"],
.srfm-form-container input[type="tel"],
.srfm-form-container input[type="number"],
.srfm-form-container textarea,
.srfm-form-container select {
	border: 1px solid var(--csq-line) !important;
	border-radius: 5px !important;
	padding: 0.65rem 0.75rem !important;
	width: 100%;
	background: #fff;
}
.srfm-form-container input:focus,
.srfm-form-container textarea:focus,
.srfm-form-container select:focus {
	outline: 2px solid var(--csq-accent) !important;
	outline-offset: 1px;
	border-color: var(--csq-accent) !important;
}
.srfm-submit-wrap button,
.srfm-submit-wrap input[type="submit"] {
	background: var(--csq-accent) !important;
	border-color: var(--csq-accent) !important;
	color: #fff !important;
	font-weight: 700;
	border-radius: 4px !important;
	padding: 0.75rem 1.75rem !important;
}
.srfm-submit-wrap button:hover,
.srfm-submit-wrap input[type="submit"]:hover {
	background: var(--csq-accent-deep) !important;
	border-color: var(--csq-accent-deep) !important;
}

/* ---------- Icon hover: cancel Elementor's core default -----------
   Elementor core ships a global, unscoped `.elementor-icon:hover{
   color:#69727d}` rule. Against our gold "stacked" circles (credentials)
   that grey is almost the same luminance as the gold, so the icon
   effectively disappears on hover. None of our icons are interactive
   controls, so hover should just hold their resting colour. */
.elementor-view-stacked .elementor-icon:hover {
	color: #FFFFFF !important;
	fill: #FFFFFF !important;
}
.elementor-widget-icon.elementor-view-default .elementor-icon:hover {
	color: #8B6A2F !important;
	fill: #8B6A2F !important;
}

/* ---------- Homepage: How I Can Help — restrained gold detailing ---------- */
.elementor-element-a970956,
.elementor-element-ac1ae68,
.elementor-element-41ad642 {
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.elementor-element-a970956::before,
.elementor-element-ac1ae68::before,
.elementor-element-41ad642::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--csq-accent);
}
.elementor-element-a970956:hover,
.elementor-element-ac1ae68:hover,
.elementor-element-41ad642:hover {
	box-shadow: 0 10px 24px rgba(30, 49, 73, 0.09);
	transform: translateY(-2px);
}

/* ---------- Homepage: How Direct Access Works — connected-process treatment ---------- */
.elementor-element-e2d8f39 {
	position: relative;
}
@media (min-width: 769px) {
	/* Line spans badge-centre to badge-centre: each 44px circle sits flush
	   at its column's left edge (columns are equal thirds with no left
	   padding), so centre = column-start + 22px. */
	.elementor-element-e2d8f39::before {
		content: "";
		position: absolute;
		top: 24px;
		left: 22px;
		right: calc(33.34% - 22px);
		height: 0;
		border-top: 2px dashed #d9c089;
		z-index: 0;
	}
}
.elementor-element-438c60e,
.elementor-element-d188843,
.elementor-element-f167926 {
	position: relative;
	z-index: 1;
}
/* Numbered step badges: force a fixed 44px circle — Elementor's container
   "flex-grow:1" default otherwise stretches these into pills. */
.elementor-element-ace4efd,
.elementor-element-52bb56f,
.elementor-element-7b43186 {
	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	height: 44px !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: 44px !important;
	border-radius: 50% !important;
	align-self: flex-start;
}

/* ---------- Footer & regulatory bar: small-text readability ----------
   The Astra footer-widget customizer colour options don't reach the
   auto-wrapped <p> Astra generates for raw HTML footer blocks, so it
   was still resolving to the light-background ink-soft tone. Override
   directly for guaranteed contrast against the dark footer. */
.site-footer p {
	color: #F0EDE3 !important;
}
.site-footer a:not(.ast-button) {
	color: #E3C892 !important;
}
.site-footer a:not(.ast-button):hover {
	color: #FFFFFF !important;
}
.site-footer .footer-copyright,
.site-footer .ast-builder-footer-bottom-section {
	font-size: 0.92rem;
}

/* ---------- Pending content note ---------- */
.csq-pending-note {
	border: 1px dashed var(--csq-accent);
	background: #fbf3e2;
	color: var(--csq-ink);
	padding: 1rem 1.25rem;
	border-radius: 6px;
	margin: 1.25rem 0;
	font-size: 0.92rem;
}