/*
 * Base styles for maniac.agency (Hello's reset.css and theme.css are switched off in its settings).
 * Only what Elementor's controls cannot set. Low specificity (:where) so every Elementor control wins.
 * Colors only through kit globals (docs/SITE-PROFILE-MANIAC.md section 6).
 */

/* Text rendering as on the Framer site (it sets these on :root). */
:root {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* clip, not hidden: hidden breaks position: sticky. */
html {
	overflow-x: clip;
	/* Keyboard focus, the skip link and in-page links scroll a target clear of the fixed header (100px, 60px on
	   phones; profile section 5): Shift+Tab in Chromium left a control under the frosted bar. */
	scroll-padding-top: 100px;
}

@media (max-width: 809px) {
	html {
		scroll-padding-top: 60px;
	}
}

/* Scrolling jumps, as on the live site (D7, native scroll): Elementor's generated frontend CSS turns on
   `html { scroll-behavior: smooth }` under prefers-reduced-motion: no-preference; (0,1,0) beats its (0,0,1). */
:root {
	scroll-behavior: auto;
}

/* The body clips sideways too (round 5, D105; supersedes D27's no-break spaces): html's clip stops the page from
   scrolling sideways, but mobile engines still let a finger pan a body that grew wider than the window. A line that
   would overhang wraps at its source; this is the backstop. clip, not hidden: no scroll container, so sticky and the
   fixed header, menu panel and card behave as before. */
body {
	margin: 0;
	overflow-x: clip;
}

/* Framer text has no paragraph or heading margins; spacing comes from container gaps. */
:where(p, h1, h2, h3, h4, h5, h6, figure, blockquote) {
	margin-block: 0;
}

/* Links take the color of the text around them and carry no underline (Framer's link style). */
:where(a) {
	color: inherit;
	text-decoration: none;
}

/* The office address (footer, /connect/; D64) is an <address>, which browsers draw in italics. */
:where(address) {
	font-style: normal;
}

:where(img, video) {
	max-width: 100%;
	height: auto;
}

/* WordPress's visually hidden text (the skip link, form labels). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	top: 10px;
	left: 10px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 15px 30px;
	overflow: visible;
	clip: auto;
	white-space: normal;
	border-radius: 10px;
	background: var(--e-global-color-primary, #282828);
	color: var(--e-global-color-accent, #FFF8EF);
}

/* A visible keyboard focus ring everywhere (WCAG 2.4.7); widgets with their own ring override it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* An Image widget's box is its picture. The img is inline-block with vertical-align: middle inside the body's 30px
   line, so a picture shorter than the line (the 20px header logo) sat 2px below its container's center. With no line
   box around it, the widget is exactly the picture's height (captions, unused on this site, keep a normal line). */
:where(.elementor-widget-image) {
	line-height: 0;
}

:where(.elementor-widget-image .widget-image-caption, .elementor-widget-image figcaption) {
	line-height: normal;
}

/* Long-form copy (the legal pages): a Text Editor with the CSS class maniac-prose (Advanced, CSS Classes). Framer's
   lists have no margins, the text 21px in and a bullet at the left edge: here the marker is the bullet and three
   spaces (20.67px in Inter Display 16.5, so the bullet starts where Framer's ::before does; the browser's disc made
   each item 0.5px taller in Firefox). Its links are the text's own Smoke with no underline (Tim 2026-10-25, q9, D66;
   Elementor's `.elementor a` already removes the underline): they no longer stand out from the text (WCAG 1.4.1),
   Tim's call; keyboard focus still draws the ring. */
:where(.maniac-prose) :where(ul) {
	margin: 0;
	padding-left: 21px;
	list-style-type: "\2022\20\20\20"; /* the bullet and three spaces */
}

/* A text whose links are underlined in the text's own color: the "Wander NGA" attribution (q12, D58), a Text Editor
   with the class maniac-link-underline. Two classes: Elementor's frontend sheet removes link underlines with
   `.elementor a` (0,1,1), loaded after this file. */
.maniac-link-underline.elementor-widget-text-editor a {
	text-decoration: underline;
}

/* The legal pages' section titles are real headings (h2 sections, h3 parts, h4 below that; WCAG 1.3.1) drawn as the
   bold lines Framer shows: the text's own size, line, tracking and features, one step bolder (900, as <strong>, D6),
   and the blank 30px line above each as its top margin (tools/site-build/docs/page_privacy_policy.headings()). */
.maniac-prose.elementor-widget-text-editor :is(h2, h3, h4) {
	margin: 30px 0 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: bolder;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	font-feature-settings: inherit;
}

/* Case study split copy (D12) that must break where Framer's hand split does: a Text Editor with the class
   maniac-cols-fill takes its row's min-height less the row's padding (the container's own --min-height and
   --padding-* variables, which the widget inherits: Framer's column-1 height plus the last paragraph's 30px) and fills
   column 1 to that height before column 2 starts. column-fill: auto needs a definite height (with an auto height
   Chromium put the whole text in column 1 and WebKit balanced). The last paragraph's margin becomes padding, so the
   columns end at Framer's column-1 height and the row keeps its height. Desktop only (one column from 1159 down). */
@media (min-width: 1160px) {
	.elementor .elementor-widget-text-editor.maniac-cols-fill {
		column-fill: auto;
		box-sizing: border-box;
		height: calc(var(--min-height, auto) - var(--padding-top, 0px) - var(--padding-bottom, 0px));
		padding-bottom: 30px;
	}

	.elementor .elementor-widget-text-editor.maniac-cols-fill p:last-child {
		margin-bottom: 0;
		margin-block-end: 0;
	}
}

/* A forced line break that only desktop and tablet keep (Framer breaks a few headings by hand there and lets the
   phone text wrap): <br class="maniac-br-tablet-up"> after a space. Hidden from 809px down (Elementor Mobile
   Landscape, Framer's phone layout). */
@media (max-width: 809px) {
	br.maniac-br-tablet-up {
		display: none;
	}
}

/* Work (child theme 1.0.11): a case study's services list ([maniac_work_services] in a Text Editor with the class
   maniac-plain-list) is a plain list: no bullets, no margins or indent, one service per 30px line, as the Icon List it
   replaced (D25). */
.elementor .elementor-widget-text-editor.maniac-plain-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor .elementor-widget-text-editor.maniac-plain-list li {
	margin: 0;
	padding: 0;
}

/* "You may also be interested in" is a Loop Grid of three case studies with the class maniac-related-cards: from
   1159px down it shows the first two (Framer's tablet and phone layouts), as the third static card's responsive
   visibility did. nth-of-type: Pro may put a <style> element in the loop container. */
@media (max-width: 1159px) {
	.elementor-widget-loop-grid.maniac-related-cards .e-loop-item:nth-of-type(n+3) {
		display: none;
	}
}

/* ---------------------------------------------------------------- round 5: tablets and phones (child theme 1.0.15)
   Each rule beats Elementor's element rules ((0,3,0) for a setting, (0,4,0) for a background) and changes nothing
   from 1160 up but the tap areas, which do not move a pixel. */

/* The header below 1160 (D106): Pale 70 on light pages, Smoke 70 on dark ones (Pale 50 / Smoke 20 let the page's copy
   print over the logo and Menu while scrolling); the 20px blur is the pack's Backdrop Blur per breakpoint. The bar is
   the Header Bar container (classes maniac-header-bar and --light or --dark, components.site_header()). Desktop keeps
   Framer's header. */
@media (max-width: 1159px) {
	:root .elementor .elementor-element.e-con.maniac-header-bar--light:not(.elementor-motion-effects-element-type-background) {
		background-color: var(--e-global-color-mpale70);
	}

	:root .elementor .elementor-element.e-con.maniac-header-bar--dark:not(.elementor-motion-effects-element-type-background) {
		background-color: var(--e-global-color-msmoke70);
	}
}

/* 44px tap areas with nothing moving (D106, WCAG 2.5.8 and Apple's 44pt): padding and an equal negative margin, below
   1160 and on any touch screen (a mouse needs no more; on desktop an inline-block link moved the legal links' glyphs a
   fraction of a pixel in WebKit, 1.0.16). maniac-hit (an Image widget's link, the footer's social icons): 40 x 44
   around the 20px icon, so two icons 20 apart meet and never overlap. maniac-hit-text (a Heading widget's link, the
   footer's legal links): 44 tall around the 30px line, and a link never breaks inside. */
@media (max-width: 1159px), (hover: none) {
	:root .elementor .elementor-widget-image.maniac-hit a {
		display: block;
		padding: 12px 10px;
		margin: -12px -10px;
	}

	:root .elementor .elementor-widget-heading.maniac-hit-text .elementor-heading-title a {
		display: inline-block;
		padding: 7px 0;
		margin: -7px 0;
		white-space: nowrap;
	}

	/* Round 5 review (1.0.18, D112). maniac-hit-line (a Heading widget's link on its own line, the footer's nav): the
	   link is its 50px line (an inline link is only its 40px glyph box), the words where they were. maniac-hit-logo
	   (an Image widget's link, the footer's 244 x 40 logo): 44 tall, 2px above and below given back. */
	:root .elementor .elementor-widget-heading.maniac-hit-line .elementor-heading-title a {
		display: inline-block;
	}

	:root .elementor .elementor-widget-image.maniac-hit-logo a {
		display: block;
		padding: 2px 0;
		margin: -2px 0;
	}
}

/* A few words kept on one line (class maniac-nowrap on a span in a text): the legal pages' "December 30, 2024"
   (round 5, D105). A no-break space did the same on phones but moved the date's glyphs a fraction of a pixel on desktop
   in WebKit. */
.maniac-nowrap {
	white-space: nowrap;
}

/* Short landscape screens below 1160 (a phone on its side, 667 x 375 to 932 x 430; D106): the header bar and its logo
   row 60 tall (the phone header), Start a Project 44 tall (7 above and below its 30px label), in-page targets clear of
   the 60px bar, every page's first section 120 from the top (class maniac-hero; 151 to 229 left one line of the hero in
   view), and the menu panel's links start under the 60px bar (the pack's Site Menu reads --mww-sm-bar-h). */
@media (max-width: 1159px) and (max-height: 500px) and (orientation: landscape) {
	html {
		scroll-padding-top: 60px;
	}

	:root .elementor .elementor-element.e-con.maniac-header-bar,
	:root .elementor .elementor-element.e-con.maniac-header-logo {
		--min-height: 60px;
	}

	:root .elementor .elementor-element.maniac-header-cta .mww-button {
		--mww-btn-pad-top: 7px;
		--mww-btn-pad-bottom: 7px;
	}

	:root .elementor .elementor-element.e-con.maniac-hero {
		--padding-top: 120px;
	}

	:root .elementor .elementor-element.elementor-widget-mww_site_menu {
		--mww-sm-bar-h: 60px;
	}
}

/* Narrower than 313px (round 5 review, 1.0.19, D115): the pack's Fit keeps a card title's words whole (pack 0.1.27),
   which from 313px up lets "Visit Woodstock" run into the card's right inset and stay inside it. Below that the word
   is wider than the card less its left inset (40) and the card would cut its last letter, so it may break again, as
   before (no phone in the site's test widths is that narrow; 320 is the smallest). */
@media (max-width: 312px) {
	:root .elementor .mww-media-card .mww-media-card__title {
		overflow-wrap: break-word;
	}
}

/* Balanced lines below 1160 (round 5, child theme 1.0.16 and 1.0.17, D111): headings (h1 to h3) and card titles break
   into lines of even length ("cuts / through the noise." rather than a last word alone). Balancing never adds a line.
   Paragraphs and p-tagged headings keep the browser's own breaks: text-wrap: pretty (1.0.16) rewrapped lines with a
   typed break in WebKit (the phone copyright 2 to 3 lines, "Need quick answers now? / Let's chat." 2 to 3), so it
   came off in 1.0.17. Desktop keeps Framer's breaks. Engines without text-wrap ignore it. Round 5 review (1.0.18,
   D113): balance also where a short text with no typed break left one word alone (class maniac-balance: home's
   tagline, "Work that works. / Experts who listen."; the testimonial quotes, "...content that resonates.") and the
   cards' eyebrows ("Featured / Case Study" at 320). Measured in three engines at 320 to 1159: no added lines. */
@media (max-width: 1159px) {
	h1.elementor-heading-title,
	h2.elementor-heading-title,
	h3.elementor-heading-title,
	.mww-media-card__title,
	.mww-media-card__eyebrow,
	.elementor-widget-heading.maniac-balance .elementor-heading-title,
	.elementor-widget-text-editor.maniac-balance p {
		text-wrap: balance;
	}
}

/* Cloudflare Turnstile in the contact form (/connect/) and the footer's newsletter form (child theme 1.0.20, D116).
   The widget shows only when Cloudflare wants a click (data-appearance interaction-only, inc/forms.php). Otherwise it
   draws nothing, its field is 0 tall and both forms' rows have no gap (the Styler's Rows gap 0), so the forms look as
   before. When it shows, it spans the form's width 20 under the last field: the field moves down 20 without taking
   room (relative position, into the Send row's 40 above the button), which leaves 20 clear above the button; a
   validation message under it moves with it. line-height 0: the widget's frame sits on a text line, which added up to
   9 under it. */
.gform_wrapper .gfield.gfield--type-turnstile {
	position: relative;
	top: 20px;
}

.gform_wrapper .gfield--type-turnstile .cf-turnstile {
	line-height: 0;
}