/*
	Fireside Family Inspections — Basic Theme
	Palette (from colors.txt):
		brown: #3B271B
		orange: #E27222
		yellow: #F3A917
		gold: #B7A07D
		dark gray: #797976
		mid gray: #999796
		light gray: #ECECEC

	Notes: Variables are defined for easy reuse. This stylesheet creates a neutral layout
	with accessible buttons, forms, and small components to help build pages.
*/

/* Color variables */
:root {
	--brown: #3B271B;
	--orange: #E27222;
	--yellow: #F3A917;
	--gold: #B7A07D;
	--dark-gray: #797976;
	--mid-gray: #999796;
	--light-gray: #ECECEC;

	/* Semantic colors */
	--bg: var(--light-gray);
	--surface: #FFFFFF;
	--text: var(--brown);
	--muted: var(--mid-gray);
	--accent: var(--orange);
	--accent-2: var(--yellow);
	--success: #4BB543; /* small accent for calls to action */
	--radius: 8px;
}

/* Reset / base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	font-size: 16px;
	line-height: 1.4;
	color: var(--text);
	background: linear-gradient(180deg, var(--bg), #F8F8F8);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Layout */
.container {
	max-width: 1100px;
	margin: 2rem auto;
	padding: 1.5rem;
}

.card {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.04);
	padding: 1.25rem;
}

/* Header */
.site-header {
	background: linear-gradient(90deg, rgba(59,39,27,0.95) 0%, rgba(226,114,34,0.95) 100%);
	color: #fff;
	padding: 1rem 0;
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-header .brand-and-toggle { display:flex; align-items:center; gap:1rem; width: 100%; }

.nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.12);
	color: #fff;
	padding: 0.35rem 0.5rem;
	border-radius: 6px;
}

.site-title {
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
    text-decoration: underline;
	color: #fff;
}
.site-title small { color: rgba(255,255,255,0.85); font-weight: 400; }

/* Logo / branding */
.site-branding img { height: 72px; width: auto; max-width: 360px; display: block; }
.site-header .site-branding { display: flex; align-items: center; gap: .75rem; }

/* Navigation */
.nav {
	display: flex;
	gap: 1rem;
}
.nav a {
	color: rgba(255,255,255,0.95);
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
}
.nav a:hover { background: rgba(255,255,255,0.06); }

/* Typography */
h1, h2, h3, h4 { color: var(--brown); margin: 0 0 0.5rem 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
p { margin: 0 0 1rem 0; color: var(--dark-gray); }

/* Buttons */
.btn {
	font-weight: 600;
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:active { transform: translateY(1px); }
.keyboard-focus { box-shadow: 0 0 0 4px rgba(226,114,34,0.12); }

.btn-primary {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 6px 18px rgba(226,114,34,0.15);
}
.btn-primary:hover { filter: brightness(0.96); }

.btn-secondary {
	background: var(--gold);
	color: var(--brown);
}

.btn-outline {
	background: transparent;
	border: 1px solid var(--brown);
	color: var(--brown);
}

/* Forms */
input, textarea, select { font: inherit; color: var(--brown); }
label { display: block; margin-bottom: 0.35rem; color: var(--dark-gray); }
.form-group { margin-bottom: 1rem; }
input[type="text"], input[type="email"], textarea, select {
	padding: 0.6rem 0.75rem;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.08);
	background: #fff;
	width: 100%;
	outline: none;
}
input:focus, textarea:focus {
	box-shadow: 0 0 0 4px rgba(226,114,34,0.12);
	border-color: var(--accent);
}

/* Cards & Sections */
.hero {
	background: linear-gradient(135deg, rgba(59,39,27,0.06) 0%, rgba(183,160,125,0.06) 100%);
	padding: 3rem 1rem;
	border-radius: 12px;
}

/* Certification logos placed under inspector profile */
.cert-logos img { height: 72px; width: auto; object-fit: cover; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); }
.cert-logos { display:flex; align-items:center; gap: .5rem; flex-wrap: wrap; }

.muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-gold { color: var(--gold); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-12 { grid-column: span 12; }

/* Footer */
.site-footer {
	background: var(--dark-gray);
	color: #fff;
	padding: 1.25rem 0;
	margin-top: 2rem;
}
.site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Utilities */
.center { text-align: center; }
.lead { font-size: 1.125rem; color: var(--dark-gray); }
.badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--gold); color: var(--brown); font-weight: 600; }

/* Responsive */
@media (max-width: 800px) {
	h1 { font-size: 1.5rem; }
	.grid { grid-template-columns: repeat(6, 1fr); }
	.col-6 { grid-column: span 6; }
	.site-header .container { padding: 0 1rem; }
	.site-header .brand-and-toggle { justify-content: space-between; }
	.nav-toggle { display:inline-flex; }
	.nav { display: none; position: absolute; top: 64px; right: 1rem; background: rgba(59,39,27,0.95); padding: 0.5rem; border-radius: 6px; flex-direction: column; gap:0; width: auto; min-width: 140px; z-index: 40; }
	.nav a { display:block; padding: 0.6rem 1rem; }
	.nav.open { display:flex; }
	.btn { width: auto; }
}

@media (max-width: 420px) {
		.site-header .container { flex-direction: column; gap: 0.5rem; align-items: stretch; }
		.site-header .brand-and-toggle { width: 100%; }
		.nav { right: 0; left: 0; border-radius: 0; }
		.cert-logos { flex-wrap: wrap; gap: 0.5rem; }
		/* slightly reduce cert icons on very small screens for layout */
		.cert-logos img { height: 40px; }
		/* slightly reduce header logo on very small screens */
		.site-branding img { height: 48px; }
		.btn { width: 100%; }
}

/* Improve grid stacking on mobile */
@media (max-width: 740px) {
	.grid { grid-template-columns: 1fr; }
	.col-6, .col-4, .col-12 { grid-column: span 1; }
	.btn { width: 100%; }
}

/* Desktop header scale-up */
@media (min-width: 1100px) {
	.site-branding img { height: 200px; }
	.site-title { font-size: 1.6rem; }
	.hero { padding: 4rem 1.5rem; }
	.hero h2 { font-size: 2.4rem; }

	/* boost cert logos on large screens for improved clarity */
	.cert-logos img { height: 96px; }
}

/* Accessibility improvements */
a { color: var(--accent); }
a:focus { outline: 3px dashed rgba(226,114,34,0.24); outline-offset: 2px; }
.btn:focus, .nav-toggle:focus { outline: 3px solid rgba(243,169,23,0.18); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 0; top: 10px; width: auto; height: auto; padding: .5rem 1rem; background: var(--brown); color: #fff; z-index: 9999; border-radius: 4px; }

/* Small helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* End of theme */