/* ==========================================================================
   Avalon Broker – Base
   Reset, design tokens, typography and small shared utilities.
   Loaded on every page, before site.css and the page-specific stylesheet.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	/* Colours */
	--color-primary: #47134e;
	--color-primary-dark: #300d35;
	--color-accent: #1e5a04;
	--color-accent-dark: #123c02;
	--color-bg: #e9e9ec;
	--color-surface: #ffffff;
	--color-text: #232323;
	--color-text-muted: #545454;
	--color-text-invert: #ffffff;
	--color-footer-bg: #262626;
	--color-border: #dcdcdc;

	/* Typography */
	--font-base: Arial, Helvetica, sans-serif;
	--font-heading: Georgia, 'Times New Roman', Times, serif;

	/* Layout */
	--container-width: 1180px;
	--radius: 10px;
	--header-height: 84px;
	--transition: 0.25s ease;
	--transition-nav: 0.4s cubic-bezier(0.22, 1, 0.36, 1);

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	font-size: 100%;
}

body {
	font-family: var(--font-base);
	background-color: var(--color-bg);
	color: var(--color-text);
	line-height: 1.55;
	min-height: 100vh;
	padding-top: var(--header-height);
}

/* Pages not yet migrated off their original stylesheet still carry their
   own bare `html, body { font-size: 14px; line-height: 1; ... }` plus a
   separate `body { text-align: center; background-color: #e4e4e4; ... }`
   reset, both loaded after this file with the same specificity as the
   rules above. One leaked property at a time turned up real bugs (root
   font-size breaking every rem size — most visibly the footer — flattened
   line-height, then centered text instead of left), so rather than keep
   discovering them one by one this pins every property the old reset
   touches. :root and `html body` each add one extra selector step (a
   pseudo-class / a second type) to outrank the plain `html`/`body` the
   old rule uses, regardless of load order. */
:root {
	font-size: 100%;
}

html body {
	margin: 0;
	padding-top: var(--header-height);
	font-family: var(--font-base);
	background-color: var(--color-bg);
	line-height: 1.55;
	text-align: left;
	height: auto;
}
html body {
	padding-top: var(--header-height);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: 1rem;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.25;
}

/* Shared page container -------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* !important throughout: this utility class exists specifically to
   remove an element from the visual flow while keeping it readable
   to screen readers, so it must always win over whatever other
   classes the element carries — e.g. a heading's own position/margin
   rules (equal specificity, same-name class defined in a page's own
   later-loaded stylesheet) were otherwise winning the cascade and
   leaving a "hidden" title still taking up layout space. */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Shared buttons ----------------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 16px 36px;
	border-radius: var(--radius);
	background-color: var(--color-accent);
	color: var(--color-text-invert);
	font-size: 1.05rem;
	text-align: center;
	transition: background-color var(--transition), transform var(--transition);
}

.btn:hover,
.btn:focus-visible {
	background-color: var(--color-accent-dark);
	transform: translateY(-1px);
}

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

.btn--outline:hover,
.btn--outline:focus-visible {
	background-color: rgba(255, 255, 255, 0.15);
}

/* Shared contact form (quote / get-in-touch) ------------------------------ */

.form-card {
	background: var(--color-surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: clamp(24px, 5vw, 48px);
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
}

.form-field {
	margin-bottom: 18px;
}

.form-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: bold;
	font-size: 0.95rem;
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
}

.form-field textarea {
	min-height: 120px;
	resize: vertical;
}

.form-card .btn {
	width: 100%;
	border-radius: 6px;
	background-color: var(--color-accent);
}

.form-card .btn:hover {
	background-color: var(--color-accent-dark);
}

/* Phone-field validation (see JS/main.js): a red flash when a
   non-digit character gets stripped, a required-style asterisk on
   the label, and a small hint explaining the restriction. Uses
   !important because this feedback needs to stay visible no matter
   what border/background a given page's own form styling sets. */
.form-field input.is-invalid {
	border-color: #e74c3c !important;
	box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3) !important;
}

.phone-hint-asterisk {
	color: #e74c3c;
	font-weight: bold;
	cursor: help;
}

.form-field__hint {
	display: block;
	margin-top: 5px;
	font-size: 0.78rem;
	color: #e74c3c;
	opacity: 0.9;
}

.form-field__hint[hidden] {
	display: none;
}