/**
 * Handyman theme – custom styles that theme.json cannot express.
 * Loaded on the front end and in the editor (see functions.php).
 */

/* ------------------------------------------------------------------
 * Header (patterns/header.php, options in Appearance → Theme Settings)
 * Sticky when enabled; with the top bar, the bar scrolls away and the main row stays.
 * ------------------------------------------------------------------ */
:root { --lh-topbar-h: 40px; --lh-adminbar: 0px; }
.admin-bar { --lh-adminbar: 32px; }
@media (max-width: 782px) { .admin-bar { --lh-adminbar: 46px; } :root { --lh-topbar-h: 0px; } }
@media (max-width: 600px) { .admin-bar { --lh-adminbar: 0px; } }

.wp-site-blocks > header.wp-block-template-part:has(.lh-sticky) {
	position: sticky;
	top: var(--lh-adminbar);
	z-index: 100;
}
.wp-site-blocks > header.wp-block-template-part:has(.lh-sticky.has-topbar) {
	top: calc(var(--lh-adminbar) - var(--lh-topbar-h));
}
.lh-site-header > * { margin-block-start: 0; }

/* Top bar (desktop only) */
.lh-topbar { font-size: 0.8125rem; }
.lh-topbar > .alignwide { min-height: var(--lh-topbar-h); align-items: center; gap: 1.5rem; }
.lh-topbar__info { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.4rem; color: #D5DCE1; }
.lh-topbar__info a { text-decoration: none; font-weight: 600; }
.lh-topbar__info a:hover { color: var(--wp--preset--color--accent); }
.lh-topbar__label { color: var(--wp--preset--color--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.lh-topbar__text { opacity: 0.85; }
.lh-topbar .wp-block-social-links { margin: 0; }
.lh-topbar .wp-social-link a { padding: 0.25rem; }
.lh-topbar .wp-social-link:hover { transform: none; }
.lh-topbar .wp-social-link a:hover { color: #FFFFFF; }
@media (max-width: 782px) {
	.lh-topbar { display: none; }
}
@media (max-width: 1080px) {
	.lh-topbar__text { display: none; }
}

/* Social icons in the main header row (when the top bar is off) */
.lh-header .lh-header-social .wp-social-link a { color: var(--wp--preset--color--accent-dark); }
@media (max-width: 1100px) { .lh-header .lh-header-social { display: none; } }

@media (max-width: 600px) {
	.lh-header .wp-block-buttons.lh-header-call { display: none; }
	.wp-block-site-logo img { max-width: 170px; height: auto; }
}

/* Footer links: at least ~44px tall touch targets on phones and touch screens (text links and social icons). */
@media (max-width: 782px), (pointer: coarse) {
	.wp-site-blocks footer.wp-block-template-part p a {
		display: inline-block;
		padding: 0.75rem 0;
	}
	.wp-site-blocks footer.wp-block-template-part .wp-block-social-links .wp-social-link a {
		padding: 0.65rem;
	}
	.wp-site-blocks footer.wp-block-template-part .wp-block-social-links {
		gap: 0.25rem 0.5rem;
		margin-left: -0.65rem; /* keeps the first icon aligned with the text above */
	}
}

/* Footer and overlay titles are paragraphs (keeps the page heading outline clean for SEO). */
.lh-footer__title,
.lh-overlay__title { font-weight: 700; line-height: 1.3; margin-bottom: 0.25rem; }

/* No gaps between header, page content and footer (root block gap would add white strips). */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part > * { margin-block-start: 0; }

/* Elementor's global button style targets every <button> on the page (kit selector ".elementor-kit-N button").
   Reset the theme's navigation buttons so they keep their own look. */
.wp-site-blocks .wp-block-navigation button,
.wp-site-blocks .wp-block-navigation button:hover,
.wp-site-blocks .wp-block-navigation button:focus,
.wp-site-blocks .wp-block-navigation-overlay-close,
.wp-site-blocks .wp-block-navigation-overlay-close:hover,
.wp-site-blocks .wp-block-navigation-overlay-close:focus {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}
.wp-site-blocks .wp-block-navigation .wp-block-navigation__responsive-container-open,
.wp-site-blocks .wp-block-navigation .wp-block-navigation__responsive-container-close { padding: 0.45rem; }
.wp-site-blocks .wp-block-navigation .wp-block-navigation-submenu__toggle { padding: 0; }
.lh-header {
	box-shadow: 0 2px 18px rgba(42, 56, 67, 0.08);
	position: relative;
	z-index: 20;
}

/* ------------------------------------------------------------------
 * Desktop navigation
 * ------------------------------------------------------------------ */
.lh-main-nav .wp-block-navigation__container { gap: 1.75rem; }

/* Six top-level items (incl. Pricing and Service Area) plus the call button must stay on one line. */
.lh-main-nav.wp-block-navigation .wp-block-navigation__container { flex-wrap: nowrap; gap: 1.35rem; }
.lh-main-nav .wp-block-navigation-item__content { white-space: nowrap; }
.lh-header-call .wp-block-button__link { white-space: nowrap; padding: 0.75rem 1.25rem; }
.lh-header .wp-block-site-logo { flex-shrink: 0; }
@media (min-width: 783px) and (max-width: 1180px) {
	.lh-header .wp-block-site-logo img { width: auto; max-width: 240px; height: auto; }
}
@media (min-width: 783px) and (max-width: 960px) {
	.lh-header .wp-block-site-logo img { max-width: 190px; }
}
/* Narrow desktops: the phone number is already in the top bar, so the header button makes room for the logo. */
@media (min-width: 783px) and (max-width: 960px) {
	.lh-header .wp-block-buttons.lh-header-call { display: none; }
}
@media (min-width: 783px) and (max-width: 1180px) {
	.lh-main-nav.wp-block-navigation .wp-block-navigation__container { gap: 0.9rem; }
	.lh-main-nav .wp-block-navigation-item__content { font-size: 0.8125rem; }
	.lh-header-call .wp-block-button__link { padding: 0.65rem 0.9rem; font-size: 0.875rem; }
}

.lh-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding: 0.6rem 0;
}
.lh-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15rem;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.lh-main-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.lh-main-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::after,
.lh-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after,
.lh-main-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
.lh-main-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
.lh-main-nav .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--accent-dark); }
/* Bigger click/tap target for the chevron (it toggles the dropdown on click). */
.wp-site-blocks .lh-main-nav .wp-block-navigation__submenu-icon {
	width: 30px;
	height: 30px;
	padding: 9px;
	margin-left: -2px;
	cursor: pointer;
	border-radius: 4px;
}
.wp-site-blocks .lh-main-nav .wp-block-navigation__submenu-icon:hover { background: var(--wp--preset--color--surface); }
.wp-site-blocks .lh-main-nav .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; }

/* Services dropdown: dark panel, gold top rule, two columns */
.lh-main-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--brand-deep) !important;
	color: var(--wp--preset--color--on-brand) !important;
	border: 0 !important;
	border-top: 3px solid var(--wp--preset--color--accent) !important;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
@media (min-width: 600px) {
	/*
	 * Easier to open and keep open:
	 * - the panel keeps its size while hidden (core collapses it to 0×0), so it can fade out with a delay;
	 * - closing waits ~0.35s, so a mouse briefly slipping off the menu doesn't close it;
	 * - an invisible bridge above the panel covers the gap between the menu item and the panel.
	 */
	.lh-main-nav .has-child > .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(230px, 1fr));
		column-gap: 0.5rem;
		width: 560px !important;
		height: auto !important;
		overflow: visible !important;
		padding: 0.75rem !important;
		margin-top: 0 !important;
		transition: opacity 0.15s ease 0.2s, visibility 0s linear 0.35s !important;
	}
	.lh-main-nav .has-child:hover > .wp-block-navigation__submenu-container,
	.lh-main-nav .has-child:focus-within > .wp-block-navigation__submenu-container,
	.lh-main-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transition: opacity 0.12s ease 0s, visibility 0s linear 0s !important;
	}
	.lh-main-nav .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: -16px;
		right: -16px;
		bottom: 100%;
		height: 22px;
	}
	.lh-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.5rem 0.75rem !important;
		border-radius: 4px;
		font-size: 0.875rem;
		font-weight: 600;
		text-transform: none;
		letter-spacing: 0;
		color: var(--wp--preset--color--on-brand) !important;
		transition: background-color 0.15s, color 0.15s;
	}
	.lh-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.lh-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
		background: rgba(255, 255, 255, 0.07);
		color: var(--wp--preset--color--accent) !important;
	}
	.lh-main-nav .wp-block-navigation__submenu-container .lh-nav-all > .wp-block-navigation-item__content {
		grid-column: 1 / -1;
		color: var(--wp--preset--color--accent) !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 0;
		margin-bottom: 0.25rem;
	}
	.lh-main-nav .wp-block-navigation__submenu-container .lh-nav-all { grid-column: 1 / -1; }
}

/* Hamburger button */
.wp-site-blocks .lh-main-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--ink);
	padding: 0.45rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}
.lh-main-nav .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------------
 * Mobile menu overlay (parts/navigation-overlay.html)
 * ------------------------------------------------------------------ */
.lh-overlay { width: 100%; box-sizing: border-box; }
.lh-overlay__top { width: 100%; }
.lh-overlay .wp-block-navigation-overlay-close { padding: 0.5rem; }
.lh-overlay .wp-block-navigation-overlay-close svg { width: 30px; height: 30px; }

/* Mobile menu list (markup from inc/mobile-menu.php): Amiri top level, <details> accordion for services. */
.lh-mnav { width: 100%; text-transform: none; letter-spacing: 0; }
.lh-mnav__list,
.lh-mnav__sub { list-style: none; margin: 0; padding: 0; }
.lh-mnav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.lh-mnav .lh-mnav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 0;
	font-family: var(--wp--preset--font-family--amiri);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--on-brand);
	text-decoration: none;
	cursor: pointer;
}
.lh-mnav .lh-mnav__link[aria-current="page"] { color: var(--wp--preset--color--accent); }
.lh-mnav summary { list-style: none; }
.lh-mnav summary::-webkit-details-marker { display: none; }
.lh-mnav summary::after {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	margin-right: 0.35rem;
	border-right: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}
.lh-mnav details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.lh-overlay .lh-mnav .lh-mnav__sub {
	margin: 0 0 0.85rem;
	padding: 0 0 0 1rem;
	border-left: 2px solid var(--wp--preset--color--accent);
}
.lh-mnav .lh-mnav__sublink {
	display: block;
	padding: 0.45rem 0;
	font-size: 1rem;
	font-weight: 600;
	color: #D5DCE1;
	text-decoration: none;
}
.lh-mnav .lh-mnav__sublink--all,
.lh-mnav .lh-mnav__sublink[aria-current="page"] { color: var(--wp--preset--color--accent); }
.lh-mnav a:focus-visible,
.lh-mnav summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* The overlay sits inside the navigation block, which is uppercase/bold; reset that for the extras. */
.lh-overlay__top,
.lh-overlay__contact {
	width: 100%;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
.lh-overlay__contact .wp-block-heading { text-transform: none; letter-spacing: 0; }
.lh-overlay__contact p { font-size: 1rem; line-height: 1.9; }
.lh-overlay__contact .wp-block-button { width: 100%; }
.lh-overlay a:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------------
 * Elementor pages (templates/page-elementor.html)
 * ------------------------------------------------------------------ */
.lh-elementor-main .wp-block-post-content { margin: 0; }
.lh-elementor-main .wp-block-post-content > .elementor { max-width: none; }
/* Generated image widgets (class "lh-img-fill", set in build-elementor.php) fill their column; height + object-fit crop them. */
.elementor-widget-image.lh-img-fill img,
.elementor-widget-image.lh-img-fill figure { width: 100%; }
.elementor-widget-image.lh-img-fill a:has(> img) { display: block; }
.elementor-widget-image.lh-img-fill .widget-image-caption { line-height: 1.5; margin-top: 0.4rem; }

/* ------------------------------------------------------------------
 * Content helpers
 * ------------------------------------------------------------------ */
.wp-block-cover .wp-block-post-title { margin-top: 0.25rem; }
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--border); padding: 1rem 0; }
.wp-block-details summary { font-weight: 700; color: var(--wp--preset--color--contrast); cursor: pointer; }

/* ------------------------------------------------------------------
 * Forminator form (design set to "none" so the theme styles it)
 * ------------------------------------------------------------------ */
.forminator-ui.forminator-custom-form { font-family: inherit; color: var(--wp--preset--color--contrast); }
.forminator-ui .forminator-row { margin-bottom: 1.25rem; }
.forminator-ui .forminator-label { display: block; margin-bottom: 0.4rem; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--contrast); }
.forminator-ui .forminator-required { color: var(--wp--preset--color--accent-dark); }
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 1rem;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.forminator-ui .forminator-textarea { min-height: 9rem; resize: vertical; }
.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-textarea::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui select:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}
.forminator-ui .forminator-has_error .forminator-input,
.forminator-ui .forminator-has_error .forminator-textarea { border-color: #C0392B; }
.forminator-ui .forminator-error-message { display: block; margin-top: 0.35rem; font-size: var(--wp--preset--font-size--small); color: #C0392B; }
.forminator-ui .forminator-button-submit {
	cursor: pointer;
	padding: 0.9rem 1.75rem;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 4px;
	transition: background 0.15s, color 0.15s;
}
.forminator-ui .forminator-button-submit:hover { color: var(--wp--preset--color--on-brand); background: var(--wp--preset--color--brand); }
.forminator-ui .forminator-button-submit:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.forminator-ui .forminator-response-message {
	margin-bottom: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--accent);
}
/* Forminator keeps an empty message container in the form; only show it when it has a message. */
.forminator-ui .forminator-response-message:empty,
.forminator-ui .forminator-response-message[aria-hidden="true"],
.forminator-ui .forminator-response-message:not(.forminator-show):not(:has(*)) { display: none; }
@media (max-width: 600px) {
	.forminator-ui .forminator-button-submit { width: 100%; padding-left: 1rem; padding-right: 1rem; }
}


/* Links inside running text must not rely on colour alone (WCAG 1.4.1, axe link-in-text-block). */
.elementor-widget-text-editor p a,
.elementor-widget-text-editor li a,
.elementor-widget-text-editor td a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
.elementor-widget-text-editor p a:hover,
.elementor-widget-text-editor li a:hover { text-decoration-thickness: 2px; }
/* Photo credit links in captions: 24px minimum target (WCAG 2.5.8). */
.elementor-widget-image .widget-image-caption a,
.elementor-widget-image figcaption a,
.wp-element-caption a {
	display: inline-block;
	min-height: 24px;
	min-width: 24px;
	padding: 0.2rem 0.15rem;
	line-height: 1.2;
}

/* Visible "last updated" line and decision tables (CiteMoment T28, T39). */
.lh-updated{margin:0;font-size:.875rem;color:#AEB9C1}
.lh-table{width:100%;border-collapse:collapse;margin:0;font-size:1rem;background:#fff;border:1px solid var(--wp--preset--color--border,#E6E2D8)}
.lh-table th,.lh-table td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--wp--preset--color--border,#E6E2D8)}
.lh-table thead th{background:#2A3843;color:#fff;font-weight:700}
.lh-table tbody th{font-weight:700;width:34%}
.lh-table tbody th a{color:inherit}
@media (max-width:640px){.lh-table th,.lh-table td{padding:.65rem .75rem;font-size:.9375rem}.lh-table tbody th{width:40%}}