/*
Theme Name:   Astra Child
Theme URI:    https://wamortgagerelief.com/
Description:  Child theme for Astra. Holds custom CSS and page templates for
              The Law Office of Nadia K. Kilburn, so nothing is lost when the
              parent theme updates.
Author:       The Law Office of Nadia K. Kilburn
Template:     astra
Version:      1.8.1
Text Domain:  astra-child
*/

/* =========================================================================
   SPACING FIXES — 20 August 2026
   These could not be applied inside Elementor: heading margins and list-item
   spacing live in raw HTML inside a Text Editor widget, where Elementor has
   no control for them, and WordPress strips <style> tags and inline styles
   from that content. A child theme stylesheet is the correct home for them.
   Applies to every page, not just the homepage.
   ========================================================================= */

/* Heading rhythm. Every heading measured margin-top:0 and margin-bottom:0,
   so sub-heads sat jammed against the body text below them. More space above
   than below, so a heading binds to the text it introduces. */
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4 {
	margin-top: 2.1em;
	margin-bottom: 0.5em;
	line-height: 1.25;
}

/* ...but never push the first element in a widget down. */
.elementor-widget-text-editor .elementor-widget-container > *:first-child {
	margin-top: 0;
}

/* List items had margin-bottom:0, so bullets ran together as a solid block. */
.elementor-widget-text-editor ul li,
.elementor-widget-text-editor ol li {
	margin-bottom: 9px;
}

.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
	margin-bottom: 1.3em;
}

.elementor-widget-text-editor li:last-child {
	margin-bottom: 0;
}

/* Footer: stop "Privacy Policy" wrapping and orphaning "Policy". */
.elementor-nav-menu a,
.elementor-widget-nav-menu .elementor-item {
	white-space: nowrap;
}

/* =========================================================================
   RESPONSIVE GUTTERS — 20 August 2026
   Below full width the body copy ran hard against the left edge of the
   screen with no margin at all.

   These sit on the TEXT WIDGET, not on the section. Padding the section
   would narrow the lead form's column by 48px and reflow the form, and the
   forms must keep their current sizing.
   ========================================================================= */

@media (max-width: 1220px) {
	.elementor-widget-text-editor > .elementor-widget-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 767px) {
	.elementor-widget-text-editor > .elementor-widget-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* =========================================================================
   SECTION SPACING SCALE — 21 August 2026

   The homepage's generated Elementor CSS emits `padding: 0px 24px 0px 24px`
   on every top-level section: left/right gutters with the top and bottom
   zeroed. The result is ten sections with no vertical padding and six places
   where content in adjacent sections touches at 0px.

   Defining the scale here rather than in Elementor means it cannot be lost
   when a page is saved and its CSS file is regenerated.

   Specificity note: Elementor's own rule is
   `.elementor-9 .elementor-element.elementor-element-<id>` = (0,3,0).
   Leading with `body` makes these (0,3,1) so they win outright, without
   !important and without depending on stylesheet order.
   ========================================================================= */

:root{
	--sp-section: clamp(48px, 5.5vw, 96px);
	--sp-section-tight: clamp(28px, 3vw, 48px);
}

body .elementor-element.elementor-top-section{
	padding-top: var(--sp-section);
	padding-bottom: var(--sp-section);
}

/* Header and footer bars keep their own tighter rhythm. */
body .elementor-element.elementor-top-section.ast-header-section,
body .elementor-element.elementor-element-6de6cbf,
body .elementor-element.elementor-element-a812940,
body .elementor-element.elementor-element-ccb0f15{
	padding-top: var(--sp-section-tight);
	padding-bottom: var(--sp-section-tight);
}

/* The hero carries a full-bleed background image and sets its own height. */
body .elementor-element.elementor-element-41947f5d{
	padding-top: 0;
	padding-bottom: 0;
}

/* =========================================================================
   SITE MENU — 27 August 2026
   Replaces Elementor Pro's nav-menu widget, the only Pro widget on the site,
   so Pro can be removed. These values reproduce exactly what the widget was
   rendering: Crimson Pro 20px / 500, uppercase, right aligned, 18px either
   side of each item, black on hover. Paired with [wam_menu] in functions.php.
   ========================================================================= */

.wam-menu .wam-menu__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wam-menu .wam-menu__list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wam-menu .wam-menu__list > li > a {
	display: block;
	padding: 0 18px;
	font-family: "Crimson Pro", Georgia, serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	transition: color 0.2s ease;
}

.wam-menu .wam-menu__list > li > a:hover,
.wam-menu .wam-menu__list > li > a:focus-visible {
	color: #000;
}

/* The desktop header only exists at 768px and up, so a max-width:767px rule
   here would never apply. Between 768 and 1024 the logo, four nav links and
   the phone number do not fit at full size — measured: 787px of content in a
   782px window — so the nav is tightened across that band instead. */
@media (max-width: 1024px) {
	.wam-menu .wam-menu__list {
		justify-content: center;
	}

	.wam-menu .wam-menu__list > li > a {
		padding: 0 10px;
		font-size: 18px;
	}
}

/* =========================================================================
   RESPONSIVE COLLISION FIXES — 27 August 2026

   Two faults, both found by measuring the live pages at real widths.

   1) Elementor widget pull-ups are set in PERCENT. A percentage margin
      resolves against the CONTAINER WIDTH, so the pull grows as the window
      gets wider while the text it is pulling into gets SHORTER (fewer wrapped
      lines). They were tuned at phone width and collide everywhere above it.
      Measured on the homepage: clean at 360px, 4px of collision at 430px,
      13px at 600px, and 25px at 767px — where the "GET STARTED NOW!" button
      sits on top of the sentence above it. Clean again at 768px and up,
      because the desktop values take over.

      Fix: cap each pull-up in pixels with max(). The percentage still applies
      at phone widths, so phones render exactly as they do today; above that
      the cap holds it short of the gap. Cap values come from the measured
      natural gap of each pair (20px for most, 48-55px for the buttons).

      !important is needed: Elementor's generated rule is four classes deep
      and WP Rocket inlines it, so source order cannot be relied on.

   2) WPForms sets `font-size: revert` on every heading inside its container,
      which hands h6 back to the BROWSER default of 0.67em. The four step
      questions on all six lead-form pages are h6 blocks, so they rendered at
      9.2px — smaller than the 16px answers underneath them. Restored to
      19px, above the answers, which is what a question should be.
   ========================================================================= */

@media (max-width: 767px) {

	/* homepage — hero stack */
	.elementor-element-58eea631 > .elementor-widget-container { margin-top: max(-26px, -7%)  !important; }
	.elementor-element-2ffcbf8e > .elementor-widget-container { margin-top: max(-14px, -4%)  !important; }
	.elementor-element-435aff33 > .elementor-widget-container { margin-top: max(-36px, -10%) !important; }

	/* homepage — "01 / 02 / 03" step headings */
	.elementor-element-65c9f19c > .elementor-widget-container { margin-top: max(-18px, -6%)  !important; }
	.elementor-element-5cf65728 > .elementor-widget-container { margin-top: max(-18px, -6%)  !important; }
	.elementor-element-770dd641 > .elementor-widget-container { margin-top: max(-18px, -6%)  !important; }

	/* homepage — the two lower call-to-action buttons */
	.elementor-element-60b0daae > .elementor-widget-container { margin-top: max(-34px, -10%) !important; }
	.elementor-element-5bba2c61 > .elementor-widget-container { margin-top: max(-34px, -10%) !important; }

	/* homepage — closing block */
	.elementor-element-8fbd4b3  > .elementor-widget-container { margin-top: max(-14px, -3%)  !important; }

	/* /loan-modification/ — heading under "The sooner you take action" */
	.elementor-element-88044fb  > .elementor-widget-container { margin-top: max(-36px, -10%) !important; }

	/* /thank-you-page-veteran-relief-finder/ */
	.elementor-element-d0f8898  > .elementor-widget-container { margin-top: max(-34px, -9%)  !important; }
}

/* =========================================================================
   LEAD FORM HEADINGS AND QUESTIONS — 28 August 2026

   WPForms sets `font-size: revert` on every heading inside its container,
   handing them back to the browser default. For h6 that is 0.67em, i.e.
   SMALLER than the answers underneath. All four blocks on each lead form were
   h6, which is why they rendered at 9px.

   Two of those four were never headings at all — they were the question for a
   single field, typed into an HTML block while the field's own label was
   switched off, so the same words existed twice. Those now live in the field's
   real label; the other two are genuine section headings and are now h3.

   Both are sized here so a visitor sees exactly what they saw before. The h6
   rule stays for any block not yet converted, and for other forms.
   Higher specificity than the WPForms rule, so no !important is needed.
   ========================================================================= */
div.wpforms-container-full .wpforms-form h3,
div.wpforms-container-full .wpforms-form h6 {
	font-size: 19px;
	line-height: 1.35;
	font-weight: 700;
	margin: 20px 0 12px;
}

/* The two questions that are now real labels. Only ever matches a legend that
   is actually shown — the other eleven labels stay screen-reader-only. */
div.wpforms-container-full .wpforms-form fieldset > legend.wpforms-field-label:not(.wpforms-label-hide) {
	display: block;
	width: auto;
	float: none;
	padding: 0;
	margin: 20px 0 12px;
	font-size: 19px;
	line-height: 1.35;
	font-weight: 700;
}

/* "(select all that apply)" is the checkbox field's own description now, rather
   than a loose paragraph in an HTML block above the question. WPForms renders a
   description last inside the fieldset, i.e. under the choices; it reads better
   between the question and the choices, which is where it has always sat.
   aria-describedby already ties it to the field, so this is purely visual. */
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox > fieldset,
div.wpforms-container-full .wpforms-form .wpforms-field-radio > fieldset {
	display: flex;
	flex-direction: column;
}

div.wpforms-container-full .wpforms-form .wpforms-field-checkbox > fieldset > legend,
div.wpforms-container-full .wpforms-form .wpforms-field-radio > fieldset > legend {
	order: 1;
}

div.wpforms-container-full .wpforms-form .wpforms-field-checkbox > fieldset > .wpforms-field-description,
div.wpforms-container-full .wpforms-form .wpforms-field-radio > fieldset > .wpforms-field-description {
	order: 2;
	margin: 0 0 8px;
}

div.wpforms-container-full .wpforms-form .wpforms-field-checkbox > fieldset > ul,
div.wpforms-container-full .wpforms-form .wpforms-field-radio > fieldset > ul {
	order: 3;
}

/* =========================================================================
   HEADER — 28 August 2026

   Three faults, all measured on the live pages by resizing AND RELOADING
   (the header section is Elementor "stretched" and sizes itself from
   window.innerWidth in JS, so measuring after a resize without a reload
   reports the previous width's layout).

   1) The phone number sat 7-10px BELOW the nav links at every desktop width.
      Cause: the phone column's widget-wrap is align-content:center while the
      nav column's is flex-start. Matching them puts both on one line.

   2) The phone number wrapped to "425-654-" / "1674" between 768px and about
      1000px. Cause: the phone column is a rigid 33% (116px at 782px) while
      the icon plus number need ~137px, and nothing stopped the wrap.
      `white-space: nowrap` ALONE is not enough — on its own it pushes the
      number out of the column and gives the whole page a horizontal
      scrollbar, which is worse. The column is therefore also allowed to size
      to its content, with the other columns sharing the remaining space.

   3) The two headers presented the same call to action differently: desktop
      was Crimson Pro 20px navy, mobile was Mulish 18.7/16px bold black. Now
      both are Crimson Pro navy. The mobile number's colour came from an
      inline style="color:#000" in the page content, so it needs !important —
      that is the only way to beat an inline style from a stylesheet.

   Selectors are structural, never id-based: the header is duplicated into
   every page's own Elementor content and the element ids are regenerated per
   page, with ZERO ids shared between pages. Anything keyed to
   .elementor-element-xxxxxxx would fix the homepage only.
   ========================================================================= */

/* The number is a phone number; it must never break across lines. */
.elementor-widget-icon-list a[href^="tel:"],
.elementor-widget-icon-box a[href^="tel:"] {
	white-space: nowrap;
}

/* Desktop header row. `:has()` scopes this to the one section per page that
   holds the phone icon-list, so it cannot reach any other section. */
.elementor-section:has(> .elementor-container > .elementor-column .elementor-widget-icon-list a[href^="tel:"]) > .elementor-container > .elementor-column {
	flex: 1 1 0;
	width: auto;
}

.elementor-section:has(> .elementor-container > .elementor-column .elementor-widget-icon-list a[href^="tel:"]) > .elementor-container > .elementor-column:has(.elementor-widget-icon-list a[href^="tel:"]) {
	flex: 0 0 auto;
}

.elementor-section:has(> .elementor-container > .elementor-column .elementor-widget-icon-list a[href^="tel:"]) > .elementor-container > .elementor-column > .elementor-widget-wrap {
	align-content: center;
}

/* Mobile header: same call to action, same voice as the desktop one.

   !important is unavoidable on three of these. Elementor's generated rule is
   `.elementor-9 .elementor-element.elementor-element-f54c800 .elementor-icon-box-title`
   — four classes deep AND keyed to a per-page element id, so it cannot be
   matched or out-specified by a rule that has to work on all twelve pages.
   The number's colour additionally comes from an inline style="color:#000"
   in the page content, and an inline style can only be beaten by !important.
   Verified on the live page: without these the title stays Mulish 14px. */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-icon-box .elementor-icon-box-description a {
	font-family: "Crimson Pro", Georgia, serif !important;
	color: #263675 !important;
}

.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a {
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
}

.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-icon-box .elementor-icon-box-description a {
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.3;
}