/*
Theme Name: FixCraft Construction
Theme URI: https://github.com/fixcraftinc2026/fixcraft-website
Author: FixCraft Construction INC
Description: One-page theme for FixCraft Construction INC – tile installation, bathroom remodeling and interior finishing in Chicago's northwest suburbs. Content of every section is editable in Appearance → Customize.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fixcraft
*/

:root {
	--bg: #202821;
	--gold: #9a8c58;
	--fg: #f5f3ed;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: Arial, sans-serif;
	color: #242a2c;
	background: #f0f0df;
}

/* Header */
.site-header {
	background: var(--bg);
	color: #fff;
	padding: 20px 6%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.site-header .brand { letter-spacing: 2px; font-weight: bold; color: #fff; text-decoration: none; }
.site-header .brand span { color: var(--gold); }
.site-header .custom-logo { max-height: 60px; width: auto; display: block; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.main-nav a { color: #eee; text-decoration: none; margin: 0 9px; font-size: 14px; }
.lang-select { width: auto; background: #28382d; color: #fff; }

/* Hero */
.hero {
	min-height: 70vh;
	background: linear-gradient(110deg, rgba(21, 30, 24, .95), rgba(21, 30, 24, .70)), #28382d;
	background-size: cover;
	background-position: center;
	color: var(--fg);
	display: flex;
	align-items: center;
	padding: 8%;
}
.hero h1 { font-size: clamp(40px, 6vw, 82px); line-height: 1.05; max-width: 850px; margin: 12px 0; }
.hero p { font-size: 19px; line-height: 1.6; }
.hero .hero-note { font-size: 13px; color: #c6c9c9; }

.eyebrow { color: var(--gold); letter-spacing: 3px; text-transform: uppercase; font-size: 13px; }

.btn {
	display: inline-block;
	padding: 15px 22px;
	background: var(--gold);
	color: #12171a;
	text-decoration: none;
	font-weight: bold;
	margin: 15px 10px 0 0;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: bold;
}
.btn.secondary { background: transparent; border: 1px solid #ddd; color: #fff; }

/* Sections */
section { padding: 75px 8%; }
h2 { font-size: clamp(30px, 4vw, 46px); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.card { background: #f8f6e9; padding: 28px; border: 1px solid #d9dac4; }
.placeholder {
	height: 210px;
	background: linear-gradient(135deg, #e8e9d3, #cbd0ae);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #5d6465;
	font-size: 14px;
	overflow: hidden;
}
.placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.muted { color: #656b6d; line-height: 1.7; }
.section-alt { background: #e6e8d2; }
.dark { background: #28382d; color: #fff; }
.dark .muted { color: #c5c9c9; }

/* Form */
input, textarea, select {
	width: 100%;
	padding: 14px;
	margin: 8px 0;
	border: 1px solid #c5c9ab;
	background: #faf9ed;
	color: #263026;
	font: inherit;
}
label { display: block; margin: 12px 0; font-weight: 600; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
input[type=file] { padding: 10px; background: #fff; }
.form-hp { position: absolute; left: -9999px; }
.form-notice { padding: 16px 20px; margin: 20px 0; border-left: 4px solid var(--gold); background: #f8f6e9; }
.form-notice.error { border-color: #a3412f; }

/* Generic pages (page.php / index.php) */
.content-area { padding: 75px 8%; max-width: 960px; }
.content-area img { max-width: 100%; height: auto; }

/* Footer */
.site-footer { padding: 35px 8%; background: #202821; color: #eee; }
small { color: #a8acad; }

@media (max-width: 650px) {
	.main-nav { line-height: 2; }
	.hero { min-height: 65vh; padding: 12% 8%; }
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}