/* =============================================================
   Albany Garage Doors — main stylesheet
   Mobile-first, CSS custom properties for easy brand-colour tweaks.
   ============================================================= */

:root {
	/* Brand palette — derived from the Albany Garage Doors logo */
	--color-blue:        #1C75BC;
	--color-blue-dark:   #124E7D;
	--color-blue-light:  #EAF4FC;
	--color-black:       #17191C;
	--color-white:       #FFFFFF;
	--color-gray-900:    #1F2328;
	--color-gray-700:    #4B5563;
	--color-gray-400:    #9AA3AE;
	--color-gray-200:    #E4E8EC;
	--color-gray-100:    #F5F7FA;
	--color-accent:      #F5A623; /* used sparingly: emergency / urgency highlights */
	--color-success:     #1E9E63;

	--font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
	--font-body:    'Inter', 'Segoe UI', Arial, sans-serif;

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--shadow-sm: 0 1px 2px rgba(23,25,28,.06), 0 1px 3px rgba(23,25,28,.08);
	--shadow-md: 0 8px 24px rgba(23,25,28,.10);
	--shadow-lg: 0 20px 48px rgba(23,25,28,.16);
	--container-w: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-gray-900);
	background: var(--color-white);
	line-height: 1.65;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-black);
	line-height: 1.2;
	margin: 0 0 .6em;
	font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--color-gray-700); }
a { color: var(--color-blue); text-decoration: none; }
a:hover { color: var(--color-blue-dark); }
ul, ol { padding-left: 1.2em; }
img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
figure { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-black);
	color: var(--color-white);
	padding: .75em 1.25em;
	z-index: 10000;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
	left: 0;
	color: var(--color-white);
}
:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

/* ---------- Layout helpers ---------- */
.container {
	width: 100%;
	max-width: var(--container-w);
	margin: 0 auto;
	padding: 0 20px;
}
.section { padding: 64px 0; }
.section-title { text-align: center; margin-bottom: .4em; }
.section-title--left { text-align: left; }
.section-sub { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; color: var(--color-gray-700); }
.content-narrow { max-width: 760px; margin: 0 auto; }
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
.grid-align-center { align-items: center; }
@media (min-width: 640px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
	.grid-2 { grid-template-columns: 1fr 1fr; gap: 48px; }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: .95rem;
	padding: .85em 1.5em;
	border-radius: var(--radius-sm);
	border: 2px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-lg { padding: 1em 1.75em; font-size: 1.05rem; }
.btn-sm { padding: .55em 1em; font-size: .85rem; }
.btn-primary { background: var(--color-blue); color: var(--color-white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-blue-dark); color: var(--color-white); }
.btn-accent { background: var(--color-accent); color: var(--color-black); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: #e0951c; color: var(--color-black); }
.btn-outline { background: transparent; border-color: var(--color-blue); color: var(--color-blue); }
.btn-outline:hover { background: var(--color-blue); color: var(--color-white); }
.btn-outline-invert { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn-outline-invert:hover { background: var(--color-white); color: var(--color-blue-dark); }

.icon-sm { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }

/* ---------- Header ---------- */
/* Desktop nav only appears once there's genuinely enough width for the full
   menu + phone + quote button to sit on one line without wrapping — below
   that, everything lives behind the hamburger. This is deliberately a wide
   breakpoint (not the usual ~980px) because this menu has several long
   labels ("Repairs & Servicing", "Garage Door Openers"); showing it too
   early is what causes the menu to wrap onto a second line. */
:root { --nav-breakpoint: 1300px; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
	transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 12px 20px;
	min-height: 76px;
}
.site-branding { flex-shrink: 0; line-height: 0; }
.site-branding img { border-radius: 0; max-height: 56px; width: auto; }
.site-title-fallback { font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; color: var(--color-black); line-height: 1.2; }

.primary-navigation { display: none; }
.primary-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
	position: relative;
}
.primary-menu,
.primary-menu a {
	font-family: var(--font-heading);
}
.primary-menu > li { position: relative; }
.primary-menu > li > a {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 12px;
	color: var(--color-gray-900);
	font-weight: 600;
	font-size: .92rem;
	line-height: 1;
	white-space: nowrap;
	border-radius: var(--radius-sm);
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a { color: var(--color-blue); background: var(--color-blue-light); }
.primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-md);
	min-width: 240px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 10;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu li + li { margin-top: 2px; }
.primary-menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	color: var(--color-gray-900);
	font-weight: 500;
	font-size: .9rem;
	line-height: 1.3;
	white-space: normal;
}
.primary-menu .sub-menu a:hover { background: var(--color-blue-light); color: var(--color-blue); }

.site-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-phone, .header-quote { display: none; }

.mobile-nav-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.mobile-nav-actions .btn { justify-content: center; width: 100%; }

.menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	background: transparent;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-sm);
	padding: 0;
	align-items: center;
	flex-shrink: 0;
}
.menu-toggle__bar { width: 20px; height: 2px; background: var(--color-black); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1300px) {
	.menu-toggle { display: none; }
	.primary-navigation { display: block; }
	.header-phone, .header-quote { display: inline-flex; }
	.mobile-nav-actions { display: none; }
}
@media (max-width: 1299px) {
	.primary-navigation {
		display: block;
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 88vw);
		height: 100vh;
		background: var(--color-white);
		box-shadow: var(--shadow-lg);
		padding: 90px 24px 32px;
		transform: translateX(100%);
		transition: transform .25s ease;
		overflow-y: auto;
	}
	.primary-navigation.is-open { transform: translateX(0); }
	.primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-menu > li > a { height: auto; padding: 12px 10px; font-size: 1rem; }
	.primary-menu .sub-menu {
		position: static;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		padding: 4px 0 4px 14px;
		min-width: 0;
	}
	.primary-menu li.is-open > .sub-menu { display: block; }
	.primary-menu .sub-menu a { padding: 10px; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { background: var(--color-gray-100); font-size: .85rem; }
.breadcrumbs ol { list-style: none; display: flex; gap: 8px; padding: 10px 0; margin: 0; flex-wrap: wrap; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--color-gray-400); }
.breadcrumbs li[aria-current] { color: var(--color-gray-700); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, var(--color-blue-light) 0%, #fff 60%); padding: 56px 0; overflow: hidden; }
.hero__inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.1fr .9fr; } }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--color-blue); font-size: .8rem; margin-bottom: .75em; }
.hero__sub { font-size: 1.1rem; max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.5em 0; }
.hero__trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; font-weight: 600; font-size: .9rem; color: var(--color-gray-700); }
.hero__trust li { display: flex; align-items: center; gap: 6px; }
.hero__media { display: flex; justify-content: center; }
.hero-illustration { width: 100%; max-width: 480px; }
.stars { color: var(--color-accent); letter-spacing: 2px; margin-right: 4px; }

/* ---------- Icons ---------- */
.icon svg { display: block; }
.icon-lg { display: inline-flex; width: 56px; height: 56px; color: var(--color-blue); margin-bottom: .75em; }
.icon-lg svg { width: 100%; height: 100%; }
.icon { display: inline-flex; width: 22px; height: 22px; color: var(--color-blue); flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; }
/* Re-declared after .icon so the small variant actually wins the cascade
   (both are single-class selectors, so source order decides). */
.icon.icon-sm { width: 14px; height: 14px; }

/* ---------- Cards ---------- */
.service-card, .door-card, .feature-card, .area-card, .testimonial-card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease;
}
.service-card, .door-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.service-card:hover, .door-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-blue); }
.service-card h3, .door-card h3 { margin-bottom: .35em; font-size: 1.15rem; }
.service-card p, .door-card p { margin-bottom: 0; font-size: .92rem; line-height: 1.55; }

/* Illustration frames: aspect-ratio (not a fixed height) so the SVG fills
   its box edge-to-edge instead of "meet"-scaling and leaving empty side
   margins inside the card. */
.door-illustration {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	color: var(--color-blue);
	margin-bottom: 1.1em;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-gray-100);
}
.door-illustration--lg { aspect-ratio: 4 / 3; }
.door-illustration svg,
.hero-illustration svg,
.section-illustration svg,
.gallery-illustration svg { display: block; width: 100%; height: 100%; }
.section-illustration { display: block; width: 100%; aspect-ratio: 480 / 340; color: var(--color-blue); }
.gallery-illustration { display: block; width: 100%; aspect-ratio: 4 / 3; color: var(--color-blue); border-radius: var(--radius-md); overflow: hidden; background: var(--color-gray-100); margin-bottom: .75em; }

.feature-card { display: flex; align-items: flex-start; gap: 14px; }
.feature-card .icon { margin-top: 2px; }
.feature-card p { margin: 0; }

.area-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	font-weight: 600;
}

.why-us--alt { background: var(--color-gray-100); }

.checklist { list-style: none; padding: 0; display: grid; gap: 18px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; }
.checklist--grid { grid-template-columns: 1fr; }
@media (min-width: 700px) { .checklist--grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Testimonials ---------- */
.testimonial-card { font-style: normal; }
.testimonial-card p { color: var(--color-gray-900); font-size: 1.02rem; }
.testimonial-card cite { display: block; margin-top: 1em; font-weight: 600; font-style: normal; color: var(--color-gray-700); }
.testimonials__more { text-align: center; margin-top: 1.5rem; font-weight: 600; }

/* ---------- Google Reviews ---------- */
.google-reviews { text-align: center; }
.google-reviews__summary {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	background: var(--color-gray-100);
	border-radius: var(--radius-lg);
	padding: 20px 32px;
	margin: 0 auto 1.75rem;
}
.google-reviews__score { font-family: var(--font-heading); font-weight: 800; font-size: 2.75rem; color: var(--color-black); line-height: 1; }
.google-reviews__summary .stars { display: block; font-size: 1.2rem; margin-bottom: .2em; }
.google-reviews__count { margin: 0; font-size: .9rem; color: var(--color-gray-700); text-align: left; }
.google-reviews__cta { margin: 1.75rem 0 0; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--color-blue-dark), var(--color-blue)); color: var(--color-white); padding: 48px 0; }
.cta-band h2 { color: var(--color-white); margin-bottom: .3em; }
.cta-band p { color: rgba(255,255,255,.9); margin-bottom: 0; }
.cta-band__inner { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; justify-content: space-between; }
@media (min-width: 780px) { .cta-band__inner { flex-direction: row; align-items: center; } }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.emergency-band { background: #FFF7E8; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-black); color: var(--color-gray-200); padding-top: 56px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; padding-bottom: 40px; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-col p { color: var(--color-gray-400); }
.footer-col a { color: var(--color-gray-200); }
.footer-col a:hover { color: var(--color-white); }
.footer-widget-title { color: var(--color-white); font-size: 1rem; margin-bottom: 1em; }
.footer-menu, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-parent a { color: var(--color-blue); font-weight: 600; }
.footer-social { display: flex; gap: 14px; margin-top: 1em; }
.footer-logo-fallback { color: var(--color-white); font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 20px; padding: 20px 0; }
.footer-bottom__inner { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--color-gray-400); }
@media (min-width: 640px) { .footer-bottom__inner { flex-direction: row; justify-content: space-between; } }
.footer-bottom a { color: var(--color-gray-400); }

/* ---------- Gallery ---------- */
.gallery-item {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	padding: 16px;
	text-align: center;
	box-shadow: var(--shadow-sm);
}
.gallery-item figcaption { margin-top: .25em; font-weight: 600; font-size: .88rem; color: var(--color-gray-700); }

/* ---------- Blog ---------- */
.blog-layout { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .blog-layout { grid-template-columns: 2.2fr 1fr; } }
.post-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .post-grid { grid-template-columns: 1fr 1fr; } }
.post-card { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease; }
.post-card:hover { box-shadow: var(--shadow-md); }
.post-card__link { color: inherit; display: block; }
.post-card__image { aspect-ratio: 4/3; overflow: hidden; background: var(--color-blue-light); }
.post-card__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.post-card__image--placeholder { display: flex; align-items: center; justify-content: center; }
.post-card__body { padding: 20px; }
.post-card__meta { font-size: .8rem; color: var(--color-gray-400); margin-bottom: .3em; }
.post-card__title { font-size: 1.1rem; margin-bottom: .4em; }
.post-card__excerpt { font-size: .9rem; }
.post-card__readmore { font-weight: 700; color: var(--color-blue); font-size: .9rem; }
.sidebar-widget { background: var(--color-gray-100); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
.sidebar-widget-title { margin-bottom: .5em; }
.post-featured-image { margin-bottom: 1.5em; }
.entry-content h2 { margin-top: 1.4em; }
.entry-content img { margin: 1.2em 0; }

/* ---------- Forms ---------- */
.contact-form, .search-form { display: grid; gap: 16px; }
.contact-form label { font-weight: 600; font-size: .9rem; display: grid; gap: 6px; color: var(--color-gray-900); }
.contact-form input, .contact-form textarea, .search-form input {
	font-family: var(--font-body);
	font-size: 1rem;
	padding: .8em 1em;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-sm);
	background: var(--color-white);
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-blue); }
.search-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.search-form input { flex: 1; }
.search-form button { background: var(--color-blue); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0 16px; }
.contact-section .contact-info { background: var(--color-gray-100); border-radius: var(--radius-lg); padding: 28px; }
.contact-map { margin-top: 1.5em; border: 2px dashed var(--color-gray-200); border-radius: var(--radius-md); padding: 24px; text-align: center; color: var(--color-gray-700); }
.contact-map .icon { margin: 0 auto 10px; }

/* ---------- Areas ---------- */
.areas-teaser { text-align: center; }

/* ---------- Misc ---------- */
.content-narrow.entry-content ul, .content-narrow.entry-content ol { color: var(--color-gray-700); }
.page-hero { background: var(--color-gray-100); padding: 48px 0; }
.page-hero--door { background: linear-gradient(160deg, var(--color-blue-light) 0%, #fff 70%); }
.other-doors { background: var(--color-gray-100); }
.page-featured-image { margin-bottom: 1.5rem; }

/* ---------- Elementor compatibility ----------
   The theme's base rule `p { color: var(--color-gray-700) }` targets <p>
   elements directly, which beats the *inherited* colour Elementor applies to
   its widget wrappers when you set a text colour in the editor (e.g. white
   text on a dark CTA section was rendering grey). These rules make text
   inside Elementor widgets inherit the widget's own colour, while keeping
   the theme's default grey when no colour is set in Elementor. */
.elementor-widget-text-editor { color: var(--color-gray-700); }
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-testimonial p,
.elementor-widget-icon-box p { color: inherit; }

@media print {
	.site-header, .cta-band, .site-footer, .menu-toggle { display: none; }
}