/* CTA popup system: Book a Consultation / Get a Quote / Ask a Question.
   Kept separate from custom.css (a migration record of the old Customizer CSS) --
   this file is where new CTA-rebuild feature CSS lives. Colors match the site's real
   navy/gold brand (confirmed against custom.css and the Home/Services hero markup). */

:root {
	--ts-navy: #0D2545;
	--ts-gold: #C6A75A;
	--ts-ink: #1E2733;
	--ts-slate: #667085;
	--ts-line: #E7E1D3;
	--ts-surface: #FFFFFF;
}

.ts-btn {
	font-size: 14px;
	font-weight: 650;
	border: none;
	border-radius: 6px;
	padding: 11px 18px;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
@media (prefers-reduced-motion: reduce) {
	.ts-btn { transition: none; }
}
.ts-btn:focus-visible { outline: 3px solid #7FA8D9; outline-offset: 2px; }
.ts-btn--primary { background: var(--ts-navy); color: #FFFFFF; width: 100%; }
.ts-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(13,37,69,0.55); }
.ts-btn--gold { background: var(--ts-gold); color: #FFFFFF; width: 100%; }
.ts-btn--gold:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(198,167,90,0.6); }
.ts-btn--outline { background: transparent; color: var(--ts-navy); border: 1.5px solid var(--ts-navy); width: 100%; }
.ts-btn--outline:hover { background: rgba(13,37,69,0.05); }

.ts-field { display: grid; gap: 6px; }
.ts-field label { font-size: 12.5px; font-weight: 650; color: var(--ts-slate); }
.ts-field input, .ts-field textarea {
	font-size: 14.5px;
	padding: 10px 12px;
	border: 1px solid var(--ts-line);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--ts-ink);
}
.ts-field input:focus, .ts-field textarea:focus {
	outline: none;
	border-color: var(--ts-navy);
	box-shadow: 0 0 0 3px rgba(13,37,69,0.12);
}
.ts-required { color: var(--ts-gold); }

.ts-cta-success {
	background: #F2F7F1;
	border: 1px solid #CFE3CB;
	color: #2C4A2A;
	border-radius: 8px;
	padding: 18px 20px;
	font-size: 14.5px;
}
.ts-cta-success p { margin: 0; }
.ts-cta-error {
	color: #A3312C;
	font-size: 13px;
	margin: 0;
}

/* ---- Modal shell ----
   Styling matched to apps.taxsrv.com's tax-calculator modal (foundation/embed/
   income-tax-calculator-full/modal-loader.js) for a consistent floating-panel look
   site-wide: a gold 2px border, and a navy/gold close chip hung half outside the
   panel's top-right corner. That "shell" (overflow:visible, holds the close button)
   wrapping a separate "panel" (overflow:auto, holds the border/shadow/scroll) split is
   load-bearing, not decorative -- an absolutely-positioned child with a negative offset
   gets clipped by any overflow:auto/hidden ancestor, so the close button can't be a
   child of the scrollable panel itself. */
.ts-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.ts-modal.is-open { display: block; }
.ts-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(13, 37, 69, 0.6);
}
.ts-modal-shell {
	position: relative;
	max-width: 460px;
	margin: 6vh auto;
}
.ts-modal-panel {
	background: var(--ts-surface);
	border-radius: 12px;
	border: 2px solid var(--ts-gold);
	padding: 30px 30px 28px;
	max-height: 88vh;
	overflow-y: auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
	.ts-modal.is-open .ts-modal-shell { animation: ts-panel-in 0.16s ease-out; }
}
@keyframes ts-panel-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
.ts-modal-close {
	position: absolute; top: -13px; right: -13px;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--ts-navy);
	border: 1.5px solid var(--ts-gold);
	color: #D4B97A;
	font-size: 1.05rem;
	line-height: 1;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	z-index: 2;
	padding: 0;
}
.ts-modal-close:hover { background: #0A1D38; }
.ts-modal-close:focus-visible { outline: 3px solid #7FA8D9; outline-offset: 2px; }
.ts-modal-body h3 { font-size: 1.3rem; margin: 0 0 4px; color: var(--ts-navy); }
.ts-modal-body .ts-modal-sub { color: var(--ts-slate); font-size: 13.5px; margin: 0 0 18px; }
.ts-cta-form { display: grid; gap: 13px; margin-top: 18px; }
.ts-cta-form .ts-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 480px) {
	.ts-modal-shell {
		margin: 0; max-width: none; width: 100%; height: 100%;
		display: flex; flex-direction: column;
	}
	.ts-modal-panel {
		max-height: none; border-radius: 0; flex: 1; overflow-y: auto;
	}
	/* No room to hang the close chip outside the panel on a full-height sheet --
	   back to a plain inset corner button, same navy/gold colors. */
	.ts-modal-close { top: 14px; right: 14px; }
}

/* ---- Ask a Question: a small anchored drawer, not a full-page modal (confirmed in
   Phase 0 mockup review against the source doc's "keep it light" instruction). Anchored
   above whichever button actually opened it via --ts-question-right/--ts-question-bottom
   (set by cta-modal.js from that specific trigger's own on-screen position each time it
   opens) -- not the article fab's own --ts-ask-right, which only reflects the fab's fixed
   position and is meaningless for the Contact Us page's trigger-card button, which isn't
   fixed to a corner and can sit anywhere in the page's normal flow. ---- */
#ts-modal-question .ts-modal-backdrop { background: transparent; }
@media (min-width: 481px) {
	#ts-modal-question .ts-modal-shell {
		position: fixed;
		top: auto; left: auto;
		right: var(--ts-question-right, 24px); bottom: var(--ts-question-bottom, 24px);
		margin: 0;
		width: 340px; max-width: calc(100vw - 32px);
	}
	#ts-modal-question .ts-modal-panel {
		max-height: min(70vh, 480px);
		border-radius: 14px;
		padding: 22px 24px 24px;
	}
}

/* Floating "Ask a question" trigger, article pages only (functions.php gates this via
   is_singular('post')). Same footprint/pattern as the existing tax-calculator trigger
   (custom.css's .taxsrv-calc-trigger) -- fixed bottom-right -- but NOT that trigger's
   content-edge offset formula: that formula assumes a page with no sidebar (true on the
   homepage, where the calculator lives), whereas every single-post template here has a
   right-hand sidebar (.primary-sidebar, confirmed live). Using the page's content-edge
   formula would float this button over the sidebar, not the article. --ts-ask-right is
   set by cta-modal.js instead, measured from the actual #main column's right edge at
   runtime, so it tracks whatever width Kadence's layout actually computes. */
.ts-ask-fab {
	position: fixed;
	right: var(--ts-ask-right, 36px);
	bottom: 24px;
	z-index: 998;
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--ts-navy);
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	padding: 12px 20px 12px 16px;
	font-size: 14px; font-weight: 650;
	cursor: pointer;
	box-shadow: 0 12px 24px -12px rgba(13,37,69,0.5);
}
.ts-ask-fab:hover { transform: translateY(-1px); }
.ts-ask-fab:focus-visible { outline: 3px solid #7FA8D9; outline-offset: 2px; }
.ts-ask-fab-dot {
	width: 8px; height: 8px; border-radius: 50%;
	border: 1.5px solid var(--ts-gold);
	display: inline-block;
}

/* ============================================
   Contact Us page redesign (Phase 5, post ID 12)
   Built with plain core Gutenberg blocks, not Kadence's row/column blocks -- those rely
   on Kadence Blocks' own JS-generated unique IDs/classes that only get (re)created via
   the visual editor, never from hand-authored raw post_content (see docs/current-state.md
   §5). className block support always targets a block's own outer wrapper (confirmed
   against this repo's existing kadence-column className usage) -- e.g. core/image's class
   lands on the <figure>, not the nested <img>, hence the descendant selectors below.
   ============================================ */

:root {
	--ts-gold-tint: #F6EEDC;
	--ts-gold-tint-line: #E6D6AE;
	--ts-paper: #FEFDFB;
}

.ts-contact-triggers-card {
	max-width: 1290px;
	margin: 64px auto 0 !important;
	background: var(--ts-surface);
	border: 1px solid var(--ts-line);
	border-radius: 12px;
	box-shadow: 0 20px 40px -28px rgba(13, 37, 69, 0.35);
	gap: 0 !important;
}
.ts-trigger-col {
	padding: 32px 26px !important;
	border-right: 1px solid var(--ts-line);
}
.ts-trigger-col:last-child { border-right: none; }
.ts-trigger-col--featured {
	border: 2px solid var(--ts-gold);
	border-radius: 12px;
	padding-top: 40px !important;
	position: relative;
	background: linear-gradient(180deg, #FFFDF7 0%, #FFFFFF 60%);
}
.ts-trigger-col--featured .ts-badge-gold { position: absolute; top: -10px; left: 24px; margin-bottom: 0; }
.ts-trigger-icon { width: 34px; height: 34px; color: var(--ts-navy); display: block; margin-bottom: 14px; }
.ts-trigger-col--featured .ts-trigger-icon { color: var(--ts-gold); }
.ts-trigger-col h3 { font-size: 1.15rem; color: var(--ts-navy); margin: 0 0 8px; }
.ts-trigger-col p { margin: 0 0 18px; color: var(--ts-slate); font-size: 14px; }
.ts-trigger-col .wp-block-buttons { margin: 0; }
.ts-trigger-col .wp-block-button__link { width: 100%; text-align: center; border-radius: 6px; font-weight: 650; padding: 11px 18px; }

.ts-section-divider.wp-block-separator {
	max-width: 1290px;
	margin: 56px auto;
	border: none;
	border-top: 1px solid var(--ts-line);
}

.ts-contact-email-callout {
	max-width: 1290px;
	margin: 0 auto;
	background: var(--ts-gold-tint);
	border: 1px solid var(--ts-gold-tint-line);
	border-radius: 12px;
	padding: 34px 36px;
	flex-wrap: wrap;
}
.ts-callout-left { align-items: center; gap: 16px; }
.ts-mail-icon { width: 30px; height: 30px; color: var(--ts-gold); flex-shrink: 0; }
.ts-contact-email-callout h2 { font-size: 1.2rem; color: var(--ts-navy); margin: 0; }
.ts-email { font-size: 1.35rem; color: var(--ts-navy); font-weight: 600; margin: 0; }
.ts-mailto-btn .wp-block-button__link {
	background: var(--ts-navy);
	color: #FFFFFF;
	font-weight: 650;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 6px;
	white-space: nowrap;
}

.ts-contact-fallback {
	max-width: 1290px;
	margin: 72px auto 64px;
	padding: 40px 0 0;
	border-top: 1px solid var(--ts-line);
}
.ts-fallback-heading { font-size: 13.5px; color: var(--ts-slate); font-weight: 650; margin: 0 0 16px; }
.ts-fallback-grid {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	grid-template-areas: "name email send" "message message .";
	gap: 12px;
	margin-top: 0;
}
.ts-fallback-grid .ts-field--name { grid-area: name; }
.ts-fallback-grid .ts-field--email { grid-area: email; }
.ts-fallback-grid .ts-field--message { grid-area: message; }
.ts-fallback-grid .ts-btn { grid-area: send; width: auto; white-space: nowrap; align-self: end; }

@media (max-width: 860px) {
	.ts-contact-triggers-card { flex-wrap: wrap; margin: 40px 16px 0 !important; }
	.ts-trigger-col { border-right: none !important; border-bottom: 1px solid var(--ts-line); flex-basis: 100% !important; }
	.ts-trigger-col:last-child { border-bottom: none; }
	.ts-section-divider.wp-block-separator { margin: 40px 16px; }
	.ts-contact-email-callout { margin: 0 16px; flex-direction: column; align-items: flex-start; }
	.ts-contact-fallback { margin: 48px 16px 56px; }
	.ts-fallback-grid { grid-template-columns: 1fr; grid-template-areas: "name" "email" "message" "send"; }
	.ts-fallback-grid .ts-btn { width: 100%; }
}