/*
 * Elementor integration.
 *
 * A CSS class set on an Elementor widget lands on the widget's WRAPPER, not on
 * the element inside it. `.btn` on a Button widget therefore styles a div, and
 * the actual <a class="elementor-button"> inside keeps Elementor's own look.
 * This file bridges that gap: the classic theme's component classes on the
 * outside, Elementor's markup on the inside.
 *
 * Only cosmetics belong here. Layout stays with the container classes in
 * theme.css, which Elementor's grid and flex settings can still override from
 * the editor.
 */

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

/* `.elementor-widget` is carried by every widget wrapper; pairing it with the
   component class raises specificity above Elementor's own per-post CSS, which
   is enqueued after the theme's and would otherwise win at equal weight. */
.elementor-widget.btn .elementor-button,
.elementor-widget.btn .elementor-button-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	/* Elementor's default button is uppercase; the brand's is sentence case. */
	text-transform: none;
	padding: 14px 32px;
	border-radius: var(--radius-pill);
	border: 0;
	transition: transform var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

/*
 * The button's parent container is a flex column, so the widget wrapper is a
 * flex item and stretches across the cross axis — which is why the button was
 * full width. `display: inline-block` cannot fix that: a flex item's display is
 * blockified. Aligning it to the start of the cross axis is the actual fix.
 */
.elementor-widget.btn {
	align-self: flex-start;
	justify-self: start;
	width: fit-content;
	max-width: 100%;
}

.elementor-widget.btn .elementor-widget-container {
	display: inline-block;
}

.elementor-widget.btn--solid .elementor-button {
	background: var(--gold);
	color: var(--ink);
	box-shadow: 0 4px 12px rgba(245, 218, 66, 0.35);
}

.elementor-widget.btn--solid .elementor-button:hover,
.elementor-widget.btn--solid .elementor-button:focus-visible {
	background: var(--gold-light);
	transform: translateY(-1px);
}

.elementor-widget.btn--sm .elementor-button {
	padding: 9px 18px;
	font-size: 0.85rem;
}

/* Section rule ----------------------------------------------------------- */

/*
 * theme.css styles `.rule` as the rule itself — 64px wide, 4px tall, gold
 * background — because in the classic theme it WAS an <hr class="rule">. Here
 * the class lands on a Divider widget's wrapper, which is a stretched flex
 * item, so that background painted a full-width gold bar above the real rule.
 * The wrapper is reset; the separator inside draws the rule.
 */
.elementor-widget.rule {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
}

/*
 * The design's rule is a short gold underline beneath the heading, not a
 * full-width divider. Elementor's Divider widget spans its container by
 * default, so the width is constrained here rather than per-widget, which
 * would put the value in 9 separate places in the database.
 */
.elementor-widget.rule .elementor-divider {
	padding-block: 0;
}

.elementor-widget.rule .elementor-divider-separator {
	width: 64px;
	border-top-width: 4px;
	border-top-color: var(--gold);
	border-radius: var(--radius-pill);
	margin-inline: 0;
}

.section-heading.center .elementor-widget.rule .elementor-divider-separator,
.elementor-widget.rule.center .elementor-divider-separator {
	margin-inline: auto;
}

/* Header ----------------------------------------------------------------- */

/*
 * Hello's header shows the logo mark alone once a custom logo is set. The
 * brand lockup is mark + wordmark, so the wordmark is restored here from the
 * site title rather than baking text into the SVG — the site title stays
 * editable and stays the accessible name.
 */
.site-header .site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-header .site-logo img,
.site-header .custom-logo {
	width: 44px;
	height: 44px;
}

/*
 * Hello drops the site title entirely once a custom logo is set, so there is
 * no .site-title to style. The wordmark is restored as generated content on
 * the branding block. It is decorative only — the logo's alt already carries
 * "WillaChat" as the accessible name, so this adds no duplicate announcement.
 */
.site-header .site-branding.show-logo .site-logo::after {
	content: "WillaChat";
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--ink);
	white-space: nowrap;
}

.site-header .site-branding.show-logo .site-logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-header .site-title,
.site-header .site-branding .site-title a {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--ink);
	text-decoration: none;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 253, 246, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.site-header a {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--ink);
}

/* The CTA is a menu item carrying `nav-cta`, exactly as the classic theme
   appended it, so it stays an editable menu entry rather than fixed markup. */
.site-header .nav-cta > a {
	background: var(--gold);
	color: var(--ink);
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	font-weight: 800;
	font-size: 0.85rem;
	box-shadow: 0 4px 12px rgba(245, 218, 66, 0.35);
}

.site-header .nav-cta > a:hover {
	background: var(--gold-light);
}

/* Sign in is a second appended menu item (nav-signin), same mechanism as the
   CTA above, styled as an outline button so it reads as secondary to it. */
.site-header .nav-signin > a {
	border: 1px solid var(--ink);
	padding: 8px 17px;
	border-radius: var(--radius-pill);
	font-weight: 800;
	font-size: 0.85rem;
	margin-inline-start: 8px;
}

.site-header .nav-signin > a:hover {
	background: var(--ink);
	color: var(--white);
}

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

.site-footer {
	background: var(--footer-bg);
	border-top: 1px solid var(--gold-light);
	color: var(--footer-ink);
}

/* Widget wrappers -------------------------------------------------------- */

/*
 * Elementor wraps text in <p> inside a Text Editor widget, which would add a
 * second margin on top of the component's own spacing.
 */
.eyebrow p,
.lede p,
.shot__caption p,
.chat-line p {
	margin: 0;
}

.eyebrow p {
	font-family: var(--font-heading);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: var(--text-eyebrow);
	color: var(--gold-text);
}

.lede p {
	font-size: var(--text-lede);
	color: var(--muted);
}

/* Counters: the design shows a number and a label, not Elementor's default
   large stacked block. */
.count-up .elementor-counter-number-wrapper {
	font-family: var(--font-heading);
	font-weight: 800;
	color: var(--ink);
	justify-content: flex-start;
}

.count-up .elementor-counter-title {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--muted);
	text-align: left;
}


/* Checklist -------------------------------------------------------------- */

/*
 * theme.css draws the gold tick on `.checklist li`, but an Elementor Text
 * widget is a div, not a list item, so the marks never appeared. The same two
 * pseudo-elements are re-pointed at the widget wrapper. Kept identical to the
 * source rules rather than re-drawn, so the tick stays the same shape.
 */
.checklist .elementor-widget.checklist__item {
	position: relative;
	padding-left: 40px;
	margin-bottom: 20px;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--muted);
}

.checklist .elementor-widget.checklist__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 20px;
	height: 20px;
	background: var(--gold);
	border-radius: 6px;
	transform: rotate(12deg);
}

.checklist .elementor-widget.checklist__item::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 0.62em;
	width: 8px;
	height: 4px;
	border-left: 2px solid var(--ink);
	border-bottom: 2px solid var(--ink);
	transform: rotate(-45deg);
}

/* Weekly summary plate: the number sits inline in the sentence, not stacked. */
.plate__line .elementor-counter {
	display: block;
}

.plate__line .elementor-counter-number-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em;
	font-size: 1.05rem;
	justify-content: flex-start;
}

.plate__line .elementor-counter-number {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--ink);
}

.plate__line .elementor-counter-number-prefix,
.plate__line .elementor-counter-number-suffix {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--muted);
	flex: 0 1 auto;
	white-space: normal;
	text-align: left;
}


/* Lede ------------------------------------------------------------------- */

/*
 * theme.css caps `.lede` at 760px, but as a flex item the widget wrapper is
 * stretched and the cap never applied — ledes ran the full container width.
 */
.elementor-widget.lede {
	max-width: 760px;
	width: 100%;
}

.section-heading.center .elementor-widget.lede {
	margin-inline: auto;
}

.section-heading.center .elementor-widget.lede p {
	text-align: center;
}

/* Carousel --------------------------------------------------------------- */

.elementor-widget.carousel .elementor-image-carousel img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

/* Non-Elementor pages ----------------------------------------------------
 *
 * /privacy/ and /terms/ are plain WordPress pages: their copy lives in the
 * database, not in Elementor, so they render through Hello Elementor's
 * page.php as .site-main > .page-header + .page-content. The classic theme
 * wrapped the same content in .section > .wrap > .prose, and nothing here
 * reproduced that, so these two pages arrived with the parent theme's bare
 * 800px column and no vertical rhythm.
 *
 * Scoped to :not(.elementor-page) so it can never reach builder content —
 * Elementor owns its own spacing and an override here would fight it.
 */

body:not(.elementor-page) .site-main {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--space-13) var(--space-5);
}

body:not(.elementor-page) .page-header {
	margin-bottom: var(--space-6);
}

body:not(.elementor-page) .entry-title {
	font-family: var(--font-heading);
	color: var(--ink);
}

/* .prose, applied to the markup Hello Elementor actually emits. */
body:not(.elementor-page) .page-content {
	max-width: 720px;
}

body:not(.elementor-page) .page-content h2 {
	font-family: var(--font-heading);
	color: var(--ink);
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
}

body:not(.elementor-page) .page-content p,
body:not(.elementor-page) .page-content ul {
	margin-bottom: var(--space-4, 1rem);
}

body:not(.elementor-page) .page-content ul {
	padding-left: 1.25rem;
}

body:not(.elementor-page) .page-content li {
	margin-bottom: var(--space-2, 0.5rem);
}

@media (max-width: 700px) {
	body:not(.elementor-page) .site-main {
		padding: var(--space-9) var(--space-5);
	}
}