/*
 * Alfa Constructions — accessibility & mobile conversion fixes.
 *
 * This lives in its own uniquely-named file, not in style.css, because the
 * asset CDN serves style.css with no version string and caches it for a long
 * time. Bump the filename (-v3, -v4, ...) and the enqueue in functions.php
 * whenever this file changes, the same convention as ac-elements-v2.css.
 */

/* ============================================================================
 * Alfa Constructions — accessibility & mobile conversion fixes (Nov 2026)
 *
 * Addresses three blocking defects found in the Nov 2026 design critique:
 *   1. No way to call, and no route to the contact page, on a phone.
 *   2. Quote-form fields had no programmatic label and were iOS-zoom sized.
 *   3. Keyboard focus was invisible on every control that converts.
 * ========================================================================= */


/* --- 1a. Header phone is a tel: link ------------------------------------- */
/* The blanket `.top-line p a {display:none!important}` that used to hide this
   is gone (see ac-tokens-v1.css), so no display counter-rule is needed here. */
.top-line p a.ac-header-tel {
	color: inherit;
}
.top-line p a.ac-header-tel:hover,
.top-line p a.ac-header-tel:focus-visible {
	text-decoration: underline !important;
}

/* --- 1b. Mobile navigation panel ----------------------------------------- */
@media (max-width: 767px) {
	/* Bootstrap 3's stock .navbar-collapse{max-height:340px} held 507px of
	   content, so ΠΡΟΦΙΛ ΕΤΑΙΡΕΙΑΣ, BLOG and ΕΠΙΚΟΙΝΩΝΙΑ sat below the panel's
	   bottom edge with no cue that they existed. */
	/* The cap is the space actually left below the fixed navbar. The custom
	   property is set per-open by ac_mobile_menu_height() in functions.php from
	   the panel's measured offset; the dvh fallback covers the no-JS case and is
	   still far better than the 340px it replaces. */
	.navbar-collapse {
		max-height: var(--ac-menu-max, calc(100dvh - 170px)) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* The submenu was still laid out as a desktop flyout, making the panel's
	   scrollWidth 720px inside a 360px box — a horizontal scrollbar in a phone
	   menu. Stack it instead. */
	.navbar-nav li.drop ul.dropdown,
	.navbar-nav .dropdown-menu {
		position: static !important;
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		box-shadow: none;
	}

	/* 32px rows were under the 44px minimum target size. */
	.navbar-nav > li > a,
	.navbar-nav li.drop ul.dropdown li a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	.navbar-toggle {
		min-width: 44px;
		min-height: 44px;
	}
}

/* --- 1c. Fixed call / quote bar (phones only) ---------------------------- */
.ac-action-bar {
	display: none;
}

@media (max-width: 767px) {
	.ac-action-bar {
		display: flex;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 998; /* below the consent banner so it stays dismissable */
		min-height: 56px;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
	}

	.ac-action-bar__item {
		flex: 1 1 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 56px;
		padding: 8px 10px;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none !important;
	}

	/* Calling is the highest-value action for a local trade, so it carries the
	   brand fill; both halves are solid, so neither reads as the weaker option. */
	.ac-action-bar__item--call {
		background: var(--ac-olive-ink);
		color: #fff !important;
	}
	.ac-action-bar__item--quote {
		background: var(--ac-ink);
		color: #fff !important;
	}
	.ac-action-bar__item i {
		font-size: 17px;
	}

	/* Keep the bar from covering the end of the footer. */
	body {
		padding-bottom: 56px;
	}
}

/* --- 2. Form controls ---------------------------------------------------- */
/* 13px inputs triggered iOS auto-zoom, which the viewport meta then prevented
   the user from zooming back out of. 16px is the threshold. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	font-size: 16px;
	caret-color: var(--ac-olive-ink);
}

/* The consent gate was a 13x13px native checkbox; 24x24 is the minimum target. */
.wpcf7 .acceptance-row input[type="checkbox"],
.wpcf7-acceptance input[type="checkbox"] {
	width: 24px;
	height: 24px;
	margin-right: 8px;
	vertical-align: middle;
	accent-color: var(--ac-olive-ink);
}

/* The acceptance label is body copy, not a field label, so it must not inherit
   the global `label{font-weight:700;width:100%}` rule from the Customizer CSS. */
.wpcf7 .acceptance-row .wpcf7-list-item-label {
	font-weight: 400;
	width: auto !important;
}

/* --- 3. Visible keyboard focus ------------------------------------------- */
/* js_composer ships `.vc_general.vc_btn3:focus{outline:0}` and the parent theme
   adds `input[type="submit"]{outline:none}` — 47 outline-suppressing
   declarations across the active CSS, and no :focus-visible anywhere. The ring
   sits outside the element, so it reads against the page on filled buttons too. */
/* Specificity is deliberately raised with `html body` and the indicator is
   doubled: an outline plus a box-shadow ring. A plugin stylesheet (one of the
   31 loaded, served cross-origin so its rules cannot be enumerated from the
   page) suppresses the plain `a:focus-visible` / `input:focus-visible` outline
   at equal specificity. The white inner ring keeps the indicator legible on
   filled buttons as well as on the page background. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [tabindex]:focus-visible,
html body .vc_btn3:focus-visible,
html body .vc_general.vc_btn3:focus-visible,
html body .uc_more:focus-visible,
html body .wpcf7-submit:focus-visible,
html body .navbar-toggle:focus-visible,
html body .ac-action-bar__item:focus-visible {
	outline: 3px solid var(--ac-olive-ink) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--ac-olive-ink) !important;
}

/* Form fields get the ring plus a border shift, since the parent theme's only
   focus affordance was a 1px recolour to the previous theme's amber (#ffba00,
   1.71:1 on white — not a visible indicator). */
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
	border-color: var(--ac-olive-ink) !important;
}