/* ==========================================================================
   Major Alarm — "The Local" design layer
   Only what Elementor free cannot express through its own controls:
   sticky positioning, hover transforms, pseudo-element overlays, filters.
   Everything else lives in the Elementor page/template data so the client
   can edit it in the builder.
   ========================================================================== */

:root {
	--ma-brand: #1c2785;
	--ma-brand-hover: #151d63;
	--ma-brand-tint: #e8ecff;
	--ma-brand-light: #9eaff0;
	--ma-slate-900: #0f172a;
	--ma-slate-800: #1e293b;
	--ma-slate-700: #334155;
	--ma-slate-600: #475569;
	--ma-slate-500: #64748b;
	--ma-slate-400: #94a3b8;
	--ma-slate-200: #e2e8f0;
	--ma-slate-100: #f1f5f9;
	--ma-slate-50: #f8fafc;
	--ma-yellow: #facc15;
}

/* --------------------------------------------------------------------------
   1. Sticky nav bar
   Motion Effects is an Elementor Pro control, so the sticky behaviour from the
   prototype (`sticky top-0 z-40`) is done here instead.
   -------------------------------------------------------------------------- */

/* The header template wrapper is what actually sticks; it slides up by the
   height of the row above the nav so the nav ends up flush with the top.
   sticky-nav.js measures that height into --ma-header-row-h. See the file for
   why the nav itself cannot be the sticky element. */
/* The #masthead in these selectors is not decoration: Header Footer Elementor
   ships `.ehf-header #masthead { position: relative }`, and an id beats a plain
   class. Matching its specificity is cheaper than an !important. */
.ehf-header #masthead.ma-header-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: calc(-1 * var(--ma-header-row-h, 114px));
	z-index: 40;
}

/* Keep the bar clear of the WP admin bar for logged-in editors. */
.admin-bar .ehf-header #masthead.ma-header-sticky {
	top: calc(32px - var(--ma-header-row-h, 114px));
}

@media screen and (max-width: 782px) {
	.admin-bar .ehf-header #masthead.ma-header-sticky {
		top: calc(46px - var(--ma-header-row-h, 114px));
	}
}

/* Until the script runs there is no offset, so the header simply sits in flow —
   no layout jump either way. */
.ma-nav {
	position: relative;
	z-index: 1;
}

/* No overflow rule here on purpose.
   The prototype scrolls its seven nav items sideways, but the items now live
   under a Services dropdown, and `overflow-x: auto` makes the bar a scroll
   container that clips the dropdown panel instead of letting it hang below.
   Four top-level items fit at every width, so nothing needs to scroll. */
/* Desktop only. Applied at every width this also hits the open mobile panel,
   forcing its items into one overflowing row instead of a stack — which is
   exactly what it did before this was scoped. */
@media (min-width: 768px) {
	.ma-nav-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		flex-wrap: nowrap;
	}
}

.ma-nav-menu .menu-item a.hfe-menu-item {
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* The Services dropdown. Styled here as well as through the widget controls
   because the nav widget registers its dropdown colour controls dynamically,
   so the setting keys cannot be verified against the widget definition — this
   guarantees the panel matches the bar regardless. Values are identical to the
   widget settings, so neither can visibly disagree with the other. */
/* Dropdown width lives here rather than in the widget control, which emitted a
   fixed px width that also pinned the mobile panel. */
@media (min-width: 768px) {
	.ma-nav-menu nav.hfe-dropdown,
	.ma-nav-menu .sub-menu {
		width: 260px;
	}
}

.ma-nav-menu .sub-menu,
.ma-nav-menu .hfe-nav-menu .sub-menu {
	background-color: var(--ma-slate-900);
	border: 0;
	box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.45);
	padding: 0;
	/* Above the hero, which follows immediately below the bar. */
	z-index: 50;
}

.ma-nav-menu .sub-menu a.hfe-sub-menu-item,
.ma-nav-menu .sub-menu a.hfe-menu-item {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.8);
	padding: 14px 20px;
	border: 0;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ma-nav-menu .sub-menu a.hfe-sub-menu-item:hover,
.ma-nav-menu .sub-menu a.hfe-menu-item:hover,
.ma-nav-menu .sub-menu .current-menu-item > a {
	background-color: var(--ma-brand);
	color: #fff;
}

/* The parent stays highlighted while its dropdown is open, so the trail back to
   Services is never ambiguous. */
.ma-nav-menu .menu-item-has-children:hover > a.hfe-menu-item {
	background-color: var(--ma-brand);
	color: #fff;
}

/* On mobile the panel is inline rather than floating; indent it so the nesting
   is legible instead of looking like more top-level items. */
@media (max-width: 767px) {
	.ma-nav-menu .sub-menu {
		box-shadow: none;
	}

	.ma-nav-menu .sub-menu a.hfe-sub-menu-item,
	.ma-nav-menu .sub-menu a.hfe-menu-item {
		padding-left: 36px;
	}
}


/* HFE renders the dropdown arrow as an empty Font Awesome <i>, and Font Awesome
   is not loaded here, so parent items had no visible affordance at all. Draw
   the caret from borders instead; it needs no font and inherits the link color. */
.ma-nav-menu .hfe-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
}

.ma-nav-menu .hfe-menu-toggle .fa::before {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

/* Two different signals for 'open': the desktop container flips aria-expanded,
   while the mobile panel leaves aria alone and writes height:auto inline on the
   sub-menu instead. Match both so the caret always points the right way. */
.ma-nav-menu .hfe-has-submenu-container[aria-expanded='true'] .hfe-menu-toggle .fa::before,
.ma-nav-menu .hfe-has-submenu-container:has(+ .sub-menu[style*='height: auto']) .hfe-menu-toggle .fa::before {
	transform: translateY(1px) rotate(-135deg);
}

/* On mobile the caret is the control, so give it a real tap target on the
   right-hand end of the row rather than a 6px arrow next to the label. */
@media (max-width: 767px) {
	.ma-nav-menu nav.hfe-dropdown a.hfe-menu-item {
		position: relative;
	}

	.ma-nav-menu nav.hfe-dropdown .hfe-menu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 100%;
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   1b. Announcement bar
   The phone number sits inline in the sentence, underlined and bold, as in the
   prototype's `underline font-bold ml-1`.
   -------------------------------------------------------------------------- */

.ma-announcement-text a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	margin-left: 4px;
	white-space: nowrap;
}

.ma-announcement-text a:hover,
.ma-announcement-text a:focus-visible {
	color: #fff;
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   2. Buttons — hover lift (`hover:-translate-y-0.5`)
   -------------------------------------------------------------------------- */

.ma-btn-lift .elementor-button {
	transition: transform 0.2s ease, background-color 0.2s ease,
		box-shadow 0.2s ease, color 0.2s ease;
	will-change: transform;
}

.ma-btn-lift .elementor-button:hover,
.ma-btn-lift .elementor-button:focus-visible {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.ma-btn-lift .elementor-button:hover,
	.ma-btn-lift .elementor-button:focus-visible {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.ma-hero-title .elementor-heading-title,
.ma-hero-title {
	text-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}

/* --------------------------------------------------------------------------
   3b. Uploaded SVG icons
   Elementor sizes inline icons with `height: 1em` but leaves width to `auto`,
   which collapses an uploaded SVG to a sliver inside a flex parent. Pin both
   axes to the icon's font-size so the Lucide viewBox scales properly.
   -------------------------------------------------------------------------- */

.elementor-icon svg,
.elementor-icon-list-icon svg,
.elementor-button-icon svg {
	width: 1em;
	height: 1em;
	display: block;
}

/* Lucide draws with strokes, so colour has to travel via `stroke`. Elementor
   sets both `fill` and `color` on .elementor-icon; `currentColor` picks up the
   latter and each shape carries its own fill="none" to ignore the former. */
.elementor-icon svg,
.elementor-icon-list-icon svg {
	stroke: currentColor;
}

/* --------------------------------------------------------------------------
   3c. Text spacing
   The prototype is built on Tailwind's preflight, which zeroes paragraph
   margins and spaces everything with explicit gaps. Elementor keeps the
   theme's trailing <p> margin, which shows up as extra air under every
   section subtitle. Drop the trailing margin and let the containers own the
   spacing, exactly as the design does.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   3d. Running text on inner pages
   Elementor's text editor inherits whatever the theme gives it. These pages are
   long-form, so headings, lists and links need proper rhythm rather than
   default margins.
   -------------------------------------------------------------------------- */

.ma-prose h2,
.ma-prose h3,
.ma-prose h4 {
	color: var(--ma-slate-900);
	font-weight: 800;
	line-height: 1.25;
	margin: 2em 0 0.6em;
}

.ma-prose h2:first-child,
.ma-prose h3:first-child {
	margin-top: 0;
}

.ma-prose h2 {
	font-size: 26px;
}

.ma-prose h3 {
	font-size: 20px;
}

/* Section heads that were h3 for looks but are h2 in the outline, because they
   sit directly under the page H1. Same size as h3 so nothing moves. */
.ma-prose h2.ma-sub {
	font-size: 20px;
}

.ma-prose p {
	margin: 0 0 1.1em;
}

.ma-prose ul,
.ma-prose ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

.ma-prose li {
	margin-bottom: 0.6em;
	padding-left: 0.2em;
}

.ma-prose ul {
	list-style: disc;
}

.ma-prose ol {
	list-style: decimal;
}

.ma-prose a {
	color: var(--ma-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ma-prose a:hover {
	color: var(--ma-brand-hover);
}

.ma-prose strong {
	color: var(--ma-slate-900);
	font-weight: 700;
}

/* Source credit at the foot of the security-advice article. */
.ma-prose .ma-credit {
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid var(--ma-slate-200);
	color: var(--ma-slate-500);
	font-size: 13px;
}

/* Blog posts are ordinary WordPress content rather than Elementor documents,
   so they need the same prose treatment applied to the theme's article markup. */
.single-post .entry-content h2,
.single-post .entry-content h3,
.page .entry-content h2,
.page .entry-content h3 {
	color: var(--ma-slate-900);
	font-weight: 800;
	line-height: 1.25;
	margin: 1.8em 0 0.5em;
}

.single-post .entry-content h2 {
	font-size: 26px;
}

.single-post .entry-content h3 {
	font-size: 20px;
}

.single-post .entry-content p,
.single-post .entry-content li {
	color: var(--ma-slate-600);
	font-size: 16px;
	line-height: 1.75;
}

.single-post .entry-content ul {
	list-style: disc;
	padding-left: 1.3em;
	margin-bottom: 1.4em;
}

.single-post .entry-content a {
	color: var(--ma-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.single-post .entry-content strong {
	color: var(--ma-slate-900);
}

.single-post .entry-content figure {
	margin: 2em 0;
}

.single-post .entry-content figure img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.single-post .entry-title,
.blog .entry-title,
.archive .entry-title {
	font-weight: 900;
	color: var(--ma-slate-900);
}

/* Posts index heading, injected by the child theme (see functions.php). */
.ma-blog-header {
	margin: 0 0 32px;
}

.ma-blog-header h1 {
	font-size: 36px;
	font-weight: 900;
	line-height: 1.15;
	color: var(--ma-slate-900);
	margin: 0 0 8px;
}

.ma-blog-header p {
	font-size: 17px;
	color: var(--ma-slate-600);
	margin: 0;
}

@media (max-width: 767px) {
	.ma-blog-header h1 {
		font-size: 30px;
	}
}

/* --------------------------------------------------------------------------
   3e. Page hero
   -------------------------------------------------------------------------- */

.ma-page-hero .elementor-heading-title {
	text-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}

/* --------------------------------------------------------------------------
   3f. Project image grids
   -------------------------------------------------------------------------- */

.ma-image-grid .ma-grid-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

@media (max-width: 767px) {
	.ma-image-grid .ma-grid-image img {
		height: 200px;
	}
}

/* --------------------------------------------------------------------------
   4. Service cards — hover border/shadow, and the icon tile inverting
   (`group-hover:bg-[#1C2785]` + `group-hover:text-white`)
   -------------------------------------------------------------------------- */

.ma-service-card {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ma-service-card:hover {
	border-color: rgba(28, 39, 133, 0.3);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Square tile with a 12px radius — Elementor only offers circle or square. */
.ma-service-card .elementor-icon-box-icon .elementor-icon {
	border-radius: 12px;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.ma-service-card:hover .elementor-icon-box-icon .elementor-icon {
	background-color: var(--ma-brand);
}

.ma-service-card:hover .elementor-icon-box-icon .elementor-icon svg {
	fill: #fff;
	color: #fff;
	transition: fill 0.2s ease, color 0.2s ease;
}

/* --------------------------------------------------------------------------
   5. "Why Us" media panel — 4:3 crop with the brand gradient scrim
   -------------------------------------------------------------------------- */

.ma-whyus-media {
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
}

@supports not (aspect-ratio: 4 / 3) {
	.ma-whyus-media {
		min-height: 420px;
	}
}

/* --------------------------------------------------------------------------
   6. Header contact blocks — circular tinted icon badges
   -------------------------------------------------------------------------- */

.ma-contact-badge .elementor-icon {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Review cards — the "Google" / "Yelp" source chip
   -------------------------------------------------------------------------- */

.ma-review-via .elementor-heading-title {
	display: inline-block;
	background: var(--ma-slate-200);
	color: var(--ma-slate-400);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 4px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   7b. FAQ
   Elementor's toggle renders one continuous block with hairline dividers; the
   design wants each question to be its own white card.
   -------------------------------------------------------------------------- */

.ma-faq .elementor-toggle-item {
	background: #fff;
	border: 1px solid var(--ma-slate-200);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ma-faq .elementor-toggle-item + .elementor-toggle-item {
	margin-top: 12px;
}

.ma-faq .elementor-tab-title {
	padding: 20px 24px;
	border: 0;
	transition: background-color 0.15s ease;
}

.ma-faq .elementor-tab-title:hover {
	background: var(--ma-slate-50);
}

.ma-faq .elementor-tab-content {
	padding: 16px 24px 20px;
	border: 0;
	border-top: 1px solid var(--ma-slate-100);
}

/* Chevron flips when the question is open.
   Elementor swaps two separate icon spans (closed/opened) rather than rotating
   one, so a transition would never fire. Pin the "closed" chevron on screen and
   rotate it instead, which is what the prototype does. */
.ma-faq .elementor-toggle-icon-opened {
	display: none !important;
}

.ma-faq .elementor-tab-title .elementor-toggle-icon-closed {
	display: inline-flex !important;
}

/* Rotate the wrapping span, not the <svg>: transform on an SVG root element is
   unreliable across browsers, whereas an ordinary inline-flex span is not. */
.ma-faq .elementor-toggle-icon-closed {
	transition: transform 0.2s ease;
	transform-origin: 50% 50%;
}

.ma-faq .elementor-tab-title.elementor-active .elementor-toggle-icon-closed {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.ma-faq .elementor-toggle-icon-closed {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

/* Knockout the full-colour logo to white, matching the prototype's
   `filter brightness-0 invert`. */
.ma-footer-logo img {
	filter: brightness(0) invert(1);
}

.ma-footer a {
	transition: color 0.15s ease;
}

/* The service area strip: seven towns on one line, wrapping on narrow screens.
   Spacing separates them, matching the Services and Company lists above. */
.ma-footer .ma-footer-cities .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 28px;
}

.ma-footer .ma-footer-cities .elementor-inline-items .elementor-icon-list-item {
	margin: 0;
	padding: 4px 0;
}

/* Elementor's inline list draws its own hairline divider after every item but
   the last. It lands hard against the word and reads as a stray glyph, so turn
   it off and let the gap do the separating. */
.ma-footer .ma-footer-cities .elementor-inline-items .elementor-icon-list-item:not(:last-child)::after {
	content: none;
}

/* --------------------------------------------------------------------------
   9. Housekeeping
   -------------------------------------------------------------------------- */

/* Nothing on the page should be able to scroll sideways — but the guard has to
   live on <html>, not <body>.
   Astra sets `overflow-x: hidden` on <body>, which turns it into a scroll
   container and silently disables position:sticky on every descendant,
   including the nav bar. Clipping on <html> (with `clip`, which does not create
   a scroll container) achieves the same containment while leaving the viewport
   as the scrollport that sticky resolves against. */
html {
	overflow-x: clip;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Anchor targets have to clear the pinned nav bar, or jumping to #reviews puts
   the section heading underneath it. The bar is 52px tall on desktop and 42px
   on mobile; the extra is breathing room. */
#reviews,
[id^='ma-section-'] {
	scroll-margin-top: 72px;
}

body {
	overflow-x: visible;
}

/* Astra wraps page content in .ast-container (max-width 1192px + 20px padding).
   The design is full-bleed — every band paints its own background edge to edge
   and centres its own 1152px inner container — so on builder-driven templates
   that wrapper has to get out of the way. Astra's "Full Width / Stretched"
   content layout does this too; this is the belt to that braces, so the layout
   cannot silently revert if the theme setting is changed. */
.page-template-elementor_header_footer .site-content .ast-container,
.ast-page-builder-template .site-content .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* --------------------------------------------------------------------------
   10. Scroll-to-top button
   Astra ships this in its own blue (#046BD2). Repaint it in the brand colour
   and give it the same 8px radius as the buttons so it reads as part of the
   design rather than a theme leftover.
   -------------------------------------------------------------------------- */

#ast-scroll-top {
	background-color: var(--ma-brand);
	border-radius: 8px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus-visible {
	background-color: var(--ma-brand-hover);
	transform: translateY(-2px);
}

#ast-scroll-top svg,
#ast-scroll-top .ast-icon {
	fill: #fff;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	#ast-scroll-top:hover,
	#ast-scroll-top:focus-visible {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   11. Service grid — odd card out
   There are seven services in a two-column grid, which leaves the last card
   stranded beside an empty cell. Letting an odd final card span the full row
   makes it read as deliberate, and it self-corrects if services are added or
   removed later.
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
	.ma-service-grid > *:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------------------
   12. Mobile menu panel
   Below the tablet breakpoint the nav collapses to a toggle that opens a
   dropdown panel. Left to itself that panel inherits the horizontal bar's row
   layout, so the items sit side by side and run off the screen with a tall
   empty block above them. These rules make it behave like a menu: full width,
   stacked, one tap target per row.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* The toggle lines up with the page gutter rather than floating mid-bar. */

	/* The nav widget sits in a flex row, so it and everything inside it shrink to
	   fit the toggle. The panel cannot be full width until the whole chain is. */
	.ma-nav-menu,
	.ma-nav-menu .elementor-widget-container,
	.ma-nav-menu .hfe-nav-menu,
	.ma-nav-menu nav.hfe-dropdown {
		width: 100%;
	}

	.ma-nav-menu nav.hfe-dropdown {
		background-color: var(--ma-slate-900);
	}

	.ma-nav-menu nav.hfe-dropdown ul.hfe-nav-menu {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
	}

	.ma-nav-menu nav.hfe-dropdown li.menu-item {
		width: 100%;
	}

	/* Full-width rows with a hairline between them, so the list reads as a list
	   and every row is a comfortable tap target. */
	.ma-nav-menu nav.hfe-dropdown a.hfe-menu-item,
	.ma-nav-menu nav.hfe-dropdown a.hfe-sub-menu-item {
		width: 100%;
		padding: 14px 20px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	/* Children of Services sit in from their parent. */
	.ma-nav-menu nav.hfe-dropdown .sub-menu a.hfe-sub-menu-item {
		padding-left: 36px;
	}

	/* The panel already has its own rows; drop the shadow meant for the
	   floating desktop dropdown. */
	.ma-nav-menu nav.hfe-dropdown .sub-menu {
		box-shadow: none;
	}
}

/* --------------------------------------------------------------------------
   13. FAQ questions as h2
   On /faq/ the questions sit directly under the page H1, so they are h2 in the
   outline. The question text has its own typography, but the h2 box would
   still take the theme's larger h2 size and make every row 6px taller. Pin it
   to the theme's h3 size at each breakpoint so nothing moves.
   -------------------------------------------------------------------------- */
.elementor-toggle h2.elementor-tab-title {
	font-size: 24px;
}

@media (max-width: 921px) {
	.elementor-toggle h2.elementor-tab-title {
		font-size: 18.24px;
	}
}