/*
 * Appliance Cowboys (Houston, TX) rebrand, layered on top of components.css.
 *
 * Deliberately a separate file rather than edits to components.css: the
 * original A+ Appliance Repair theme styles stay untouched (the Gulp SCSS
 * sources were lost along with ../html/, so components.css would have to be
 * edited directly from now on, but there's no need to). Here — only what
 * changes the brand: colors, fonts, header/footer of the new structure.
 *
 * Enqueued as a second stylesheet (wp_enqueue_style, dependent on
 * 'appliance-cowboys' in functions.php), so every rule below is deliberately
 * of equal or higher specificity than the original — the cascade resolves
 * it without !important.
 */

/* ==========================================================================
   Fonts — self-hosted, no requests to Google Fonts. A single family (Inter)
   for both body and headings, one variable file covering the whole weight
   range actually used on the site (400 body, 600 buttons/labels, 700
   headings/emphasis) — a closer visual match to the reference site than
   the previous Barlow/Roboto pairing, and one request instead of two.
   components.css already declares this exact @font-face (it ships with
   the base theme, family "Inter", same file path) — the font simply
   wasn't present in assets/fonts/ yet, so nothing needs to be duplicated
   here.
   ========================================================================== */

/* ==========================================================================
   Palette — taken from the appliancecowboys.com reference (values in the
   task). components.css is built on CSS custom properties (--color-*,
   --font-*), so redefining :root recolors buttons, links, the footer, etc.
   without touching the file itself. Point-in-time contrast fixes (the gold
   CTA button, the footer) are defined separately below with their own
   rules.
   ========================================================================== */

:root {
	--font-heading: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

	/* Dark graphite — the footer's top block, now also the general "ink"
	   color (headings, thin borders): --color-ink used to be dark navy. */
	--color-ink: #222222;

	/* Blue — the phone-number button/pill, now also the general
	   "brand" accent (eyebrow, hover states, submenu). */
	--color-brand: #0D47A1;
	--color-brand-deep: #0A3672;

	/* Gold — the top bar, the "Schedule an Appointment" CTA, footer labels
	   (--color-accent is used exactly this way in components.css:
	   .footer__label and .eyebrow--light). */
	--color-accent: #F9C22E;

	--color-cta-ink: #222222;
	--color-cta-hover: #E0AC1F;

	--color-topbar: #F9C22E;
	--color-pill: #0D47A1;
	--color-footer-top: #0A3672;
	--color-footer-bottom: #EEF1F4;
	--color-footer-bottom-text: #5B6672;
	--color-footer-bottom-link: #33404C;
	--color-link-orange: #FF9800;
	--color-link-blue: #4CAAF1;
	--color-text: #494949;
}

/* Base text color — #494949 on a white background (kept separate from
   --color-ink: that one now covers the footer background and headings,
   not paragraph text). */
body {
	color: var(--color-text);
}

/* Secondary accent light blue — a handful of links inside content
   (page/service/brand/city copy), not the whole site. */
.entry-content a {
	color: var(--color-link-blue);
}

.entry-content a:hover {
	color: var(--color-brand-deep);
}

/* Gold CTA button: --color-accent is now gold, so .btn--accent would have
   inherited white text from components.css (written there for a green
   background) — white on gold fails contrast, so the text color is
   overridden here explicitly. Corner shape is left alone — .btn already
   sets border-radius:999px, so this button stays a pill like every other
   button on the site. */
.btn--accent,
.btn--accent:visited {
	background: var(--color-accent);
	color: var(--color-cta-ink);
}

.btn--accent:hover {
	background: var(--color-cta-hover);
	color: var(--color-cta-ink);
}

/* Footer links — orange on hover (the second accent color, only used there). */
.footer a:hover {
	color: var(--color-link-orange);
}

/* ==========================================================================
   Top bar — a thin full-width strip above the header's main row.
   ~54px tall, gold background, dark text (for contrast on gold).
   ========================================================================== */

.topbar {
	background: var(--color-topbar);
	color: var(--color-cta-ink);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: 0.8125rem;
	font-weight: 600;
}

.topbar__msg {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar__trust {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.topbar__trust li {
	white-space: nowrap;
}

@media (min-width: 768px) {
	.topbar__inner {
		min-height: 54px;
	}

	.topbar__trust {
		display: flex;
	}
}

/* The page header no longer sits right at the viewport edge — the top bar
   adds height above .header__main; sticky positioning stays on the main row only. */
.header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.header__main {
	position: static;
	background: var(--color-white);
	border-bottom: 1px solid rgba(34, 34, 34, 0.12);
	transition: box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header.is-stuck .header__main {
	box-shadow: 0 6px 24px rgba(34, 34, 34, 0.1);
}

/* ==========================================================================
   Logo — a text wordmark plus a simple SVG icon (a hat), replacing the
   "A+" letter mark from the previous theme.
   ========================================================================== */

.logo__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.125rem;
	height: 2.125rem;
	color: var(--color-brand);
}

.logo__icon svg {
	width: 100%;
	height: 100%;
}

.logo--light .logo__icon {
	color: var(--color-accent);
}

.logo__word {
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: var(--color-ink);
}

.logo--light .logo__word {
	color: var(--color-white);
}

.logo__tagline {
	display: block;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-top: 0.125rem;
}

.logo--light .logo__tagline {
	color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   The phone "pill" in the header — blue, white text. Same breakpoint as
   .header__book in components.css (768px): on mobile the number is
   already present in the button inside the slide-out menu panel.
   ========================================================================== */

.header__phone-pill {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: var(--color-pill);
	color: var(--color-white);
	padding: 0.5625rem 1rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9375rem;
	white-space: nowrap;
	transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header__phone-pill svg {
	flex-shrink: 0;
}

.header__phone-pill:hover {
	background: var(--color-brand-deep);
	color: var(--color-white);
}

.header__cta {
	display: none;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.header__phone-pill {
		display: inline-flex;
	}

	.header__cta {
		display: inline-flex;
	}
}

/* ==========================================================================
   CTA band (template-parts/cta-band.php) — the same gradient, in the new
   brand colors instead of the old dark navy.
   ========================================================================== */

.cta {
	background: linear-gradient(120deg, #071125 0%, #0D47A1 100%);
}

/* ==========================================================================
   Footer — two-tier. The top block is navy (#0A3672 — the same
   --color-brand-deep used for the header row and the services/areas
   sections, so the site isn't mixing two different near-black navies),
   the bottom strip is a separate element outside .footer, full viewport
   width, light background with gray text (colors set together with the
   rest of the bottom-bar polish further down).
   ========================================================================== */

.footer {
	background: var(--color-footer-top);
	padding-bottom: 0;
}

.footer__top {
	padding-bottom: 2.25rem;
}

.footer__bottom {
	margin-top: 0;
	padding-top: 1.125rem;
	padding-bottom: 1.125rem;
	border-top: none;
}

/* New "Chat / Call / Text / Email" column — labels in gold, same as
   .footer__label in the original (--color-accent is now gold, so this
   rule essentially just documents inherited behavior). */
.footer__contact-list {
	display: grid;
	gap: 0.75rem;
	font-size: 0.8125rem;
}

.footer__contact-list li {
	display: flex;
	gap: 0.5625rem;
	align-items: flex-start;
}

.footer__contact-list svg {
	flex-shrink: 0;
	margin-top: 0.1875rem;
	color: var(--color-accent);
}

.footer__contact-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 0.125rem;
}

.footer__contact-value,
.footer__contact-value:link {
	color: var(--color-white);
	font-weight: 600;
}

.footer__brands-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 0.625rem;
	font-size: 0.8125rem;
}

/* ==========================================================================
   Footer column layout — three columns on desktop: Brands We Repair ·
   Our Services · Quick Links (no separate "Hours of Operation" column —
   hours, phone and email live in the brand column instead, see
   .footer__brand-contact below).

   Bug fix: .footer__top itself (the brand column + .footer__top-grid,
   side by side) was still using components.css's original 5-column
   grid-template-columns (1.1fr 1fr 1fr 1fr 1.2fr) meant for the OLD
   flat 5-column footer. With only 2 children now (.footer__brand,
   .footer__top-grid), that put the brand column in track 1 and squeezed
   the entire nav grid into track 2 alone (~1/5 of the row) — three
   tracks' worth of width just sat empty on the right, and the nav
   columns inside .footer__top-grid wrapped hard because of it. Giving
   .footer__top its own explicit two-column split fixes both: the brand
   column gets a sane fixed-ish width and .footer__top-grid gets
   everything else to lay its own three columns out across.
   ========================================================================== */

.footer__top .footer__top-grid {
	display: grid;
	gap: 1.75rem;
}

@media (min-width: 768px) {
	.footer__top-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.footer__top {
		grid-template-columns: minmax(240px, 300px) 1fr;
		gap: 2.5rem;
	}

	.footer__top-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.75rem;
	}
}

/* Hours / phone / email under the brand column — same list styling as the
   old contact column, just narrower (one column, no grid). */
.footer__brand-contact {
	margin-top: 1rem;
	max-width: 22rem;
}

.footer__brand-note {
	max-width: 32ch;
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

/* Utility for labels needed only by screen readers (newsletter form). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Revision pass (client feedback, screenshots against appliancecowboys.com).
   Everything from here down is additive on top of the sections above —
   comments in this pass are in English going forward.
   ========================================================================== */

/* --------------------------------------------------------------------
   Bug fix: components.css hardcodes the OLD theme's green accent on the
   light-header eyebrow (page-hero on internal pages). --color-accent is
   gold now, but this one selector was never driven by the variable.
   -------------------------------------------------------------------- */
.eyebrow--light {
	color: var(--color-accent);
}

/* Extra button style used on the new dark stat band below — a light
   outline for a dark/gradient background, to pair with .btn--primary. */
.btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--color-white);
}

.btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--color-white);
	color: var(--color-white);
}

/* ==========================================================================
   Header nav row — was white with dark text; reference runs the whole main
   row dark navy with light nav text, so this recolors what sits on it
   instead of restructuring the row.
   ========================================================================== */

.header__main {
	background: var(--color-brand-deep);
}

.header__main .logo__word {
	color: var(--color-white);
}

.header__main .logo__tagline {
	color: rgba(255, 255, 255, 0.72);
}

.header__main .logo__icon {
	color: var(--color-accent);
}

.header__main .header__phone-pill {
	background: var(--color-white);
	color: var(--color-brand-deep);
}

.header__main .header__phone-pill:hover {
	background: rgba(255, 255, 255, 0.85);
	color: var(--color-brand-deep);
}

.header__main .header__burger {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.4);
}

/* The inline desktop menu (1200px+, see components.css) sits directly on
   this dark row. Below that width .header__nav is the white off-canvas
   panel instead, which keeps its own dark-on-white link colors untouched. */
@media (min-width: 1200px) {
	.header__nav .header__link {
		color: rgba(255, 255, 255, 0.85);
	}

	.header__nav .header__link:hover {
		color: var(--color-white);
	}

	.header__nav .current-menu-item > .header__link,
	.header__nav .current-menu-item > .header__link:hover {
		color: var(--color-accent);
	}
}

/* ==========================================================================
   Hero — single full-bleed background photo behind a blue gradient overlay
   (template-parts, front-page.php), replacing the two-column sliding photo
   gallery from the original markup (.hero__gallery is no longer rendered
   at all — front-page.php prints .hero__bg instead). Text needs light
   colors now that it sits over a dark image instead of the original
   light radial gradient.
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	background: #111111;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.75;
}

.hero__inner {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax(0, 1fr);
}

.hero__text {
	max-width: 40rem;
}

.hero .h1,
.hero__sub {
	color: var(--color-white);
}

/* Hero heading — slightly smaller than the global .h1 scale */
.hero .h1 {
	font-size: 1.6rem;
}

@media (min-width: 768px) {
	.hero .h1 {
		font-size: 2.25rem;
	}
}

@media (min-width: 1200px) {
	.hero .h1 {
		font-size: 2.75rem;
	}
}

.hero__note {
	color: rgba(255, 255, 255, 0.68);
}

.hero .btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--color-white);
}

.hero .btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--color-white);
	color: var(--color-white);
}

/* ==========================================================================
   Homepage stat/CTA band — no longer used on the front page (removed per
   client feedback, round 2 item 8), kept here in case the block is wanted
   again elsewhere; template-parts/stat-band.php is simply not called from
   any template right now. Diagonal navy gradient, three columns on desktop.
   ========================================================================== */

.stat-band {
	background: linear-gradient(120deg, #071125 0%, var(--color-brand) 100%);
	color: var(--color-white);
	padding: 2.5rem 0;
}

.stat-band__inner {
	display: grid;
	gap: 2rem;
	align-items: center;
	text-align: center;
}

.stat-band__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-band__number {
	font-family: var(--font-heading);
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-white);
}

.stat-band__label {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.stat-band__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-self: center;
	width: 8.5rem;
	height: 8.5rem;
	border-radius: 50%;
	border: 2px solid var(--color-accent);
	background: rgba(255, 255, 255, 0.05);
	padding: 1rem;
}

.stat-band__badge-icon {
	display: inline-flex;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-accent);
}

.stat-band__badge-icon svg {
	width: 100%;
	height: 100%;
}

.stat-band__badge-text {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--color-white);
}

.stat-band__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
}

.stat-band__phone {
	color: var(--color-accent);
}

.stat-band__note {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.78);
}

.stat-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

@media (min-width: 900px) {
	.stat-band__inner {
		grid-template-columns: 1fr auto 1.6fr;
		text-align: left;
	}

	.stat-band__stat {
		align-items: flex-start;
	}

	.stat-band__actions {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Services / service-areas grids — reference runs these as dark navy
   full-bleed bands with gold-icon cards, sitewide (not just the homepage),
   rather than the original white cards on a light "cloud" background.
   `.services` / `.areas` are the section-identifying classes on every
   template that renders these grids (front page, hub pages, single
   service/brand/city pages) — `.section--cloud`, when also present, only
   ever adds the same light-gray fallback these rules override.
   ========================================================================== */

.services,
.areas {
	background: var(--color-brand-deep);
}

.services .eyebrow,
.areas .eyebrow {
	color: var(--color-accent);
}

.services .h2,
.areas .h2,
.services .subhead,
.areas .subhead {
	color: var(--color-white);
}

.services .lead,
.areas .lead {
	color: rgba(255, 255, 255, 0.78);
}

.services .card__link,
.areas .tile__link {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.16);
	color: var(--color-white);
}

.services .card__link:hover,
.areas .tile__link:hover {
	border-color: var(--color-accent);
	background: rgba(255, 255, 255, 0.09);
	box-shadow: none;
	transform: none;
}

.services .card__title,
.areas .tile__name {
	color: var(--color-white);
}

.services .card__text,
.areas .tile__note {
	color: rgba(255, 255, 255, 0.68);
}

.services .card__more,
.areas .tile__more {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-link-blue);
}

/* Bug fix: .link-strong (the "View all appliance repair services" /
   "View all service areas" links) defaults to --color-brand, a deep blue
   that's nearly invisible against these sections' dark navy background —
   same light blue as the card "Learn More" links above fixes the contrast. */
.services .link-strong,
.areas .link-strong {
	color: var(--color-link-blue);
}

.services .link-strong:hover,
.areas .link-strong:hover {
	color: var(--color-white);
}

/* "also covered from the same routes" chips stay light pills — they read
   fine as a lighter secondary list against the now-dark section. */
.areas .chip {
	background: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   FAQ — front page block only: centered header, no "view all" link (the
   link was removed from front-page.php; this keeps the header centered
   now that section-head--row's flex-row layout is no longer needed there).
   ========================================================================== */

.faq .section-head {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.faq .faq__list {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Footer polish.
   ========================================================================== */

/* .footer__bottom-bar sits as a sibling AFTER </footer>, so it never
   inherits .footer's (dark) text color — it has to be set explicitly here
   either way. Light background with gray text, matching the reference. */
.footer__bottom-bar {
	background: var(--color-footer-bottom);
	color: var(--color-footer-bottom-text);
}

.footer__bottom-bar a {
	color: var(--color-footer-bottom-link);
}

.footer__bottom-bar a:hover {
	color: var(--color-brand);
}

/* A short underline under each footer column heading, matching the
   reference's column titles. */
.footer__title {
	display: inline-block;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--color-brand);
}

.footer__social {
	display: flex;
	gap: 0.625rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
}

.footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
}

.footer__social a:hover {
	background: var(--color-accent);
	color: var(--color-cta-ink);
}

.footer__social svg {
	width: 1rem;
	height: 1rem;
}