/* ── TG Design website theme ──────────────────────────────────────────────────
   Matches the mokimo.co.uk aesthetic: warm tones, Cormorant Garamond + Source
   Sans 3, sharp corners, generous whitespace.
   Applied to all public-facing pages (web forms, job application, etc.)
──────────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Source+Sans+3:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap');

:root {
	--tg-bg: #F5F0EB;
	--tg-text: #2C2C2C;
	--tg-text-muted: #5C5650;
	--tg-accent: #7D8B75;
	--tg-accent-deep: #5E6B57;
	--tg-sand: #C4B5A0;
	--tg-sand-light: #D9CFBF;
	--tg-brown: #8A7E6E;
	--tg-font-display: 'Cormorant Garamond', serif;
	--tg-font-body: 'Source Sans 3', sans-serif;
	--tg-font-mono: 'JetBrains Mono', monospace;
}

/* ── Base layout ── */
body {
	background: var(--tg-bg) !important;
	color: var(--tg-text) !important;
	font-family: var(--tg-font-body) !important;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.web-footer, .navbar {
	background: var(--tg-bg) !important;
	border-color: var(--tg-sand-light) !important;
}

.navbar .navbar-brand {
	font-family: var(--tg-font-display) !important;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
}

/* ── Web form specific ── */
.web-form-container {
	max-width: 700px;
	margin: 0 auto;
	padding: 3rem 1.5rem;
}

.web-form-container h1,
.web-form-container .page-header h1 {
	font-family: var(--tg-font-display) !important;
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--tg-text);
	margin-bottom: 1.5rem;
}

.web-form-container .page-header-subtitle,
.web-form-container .web-form-header p {
	font-family: var(--tg-font-body);
	color: var(--tg-text-muted);
	font-size: 1rem;
}

/* ── Form fields ── */
.web-form-container .frappe-control .form-control,
.web-form-container input[type="text"],
.web-form-container input[type="email"],
.web-form-container input[type="tel"],
.web-form-container input[type="url"],
.web-form-container select,
.web-form-container textarea {
	background: #fff !important;
	border: 1px solid var(--tg-sand-light) !important;
	border-radius: 0 !important;
	padding: 0.75rem 1rem !important;
	font-family: var(--tg-font-body) !important;
	font-size: 0.95rem !important;
	color: var(--tg-text) !important;
	transition: border-color 0.2s;
}

.web-form-container .frappe-control .form-control:focus,
.web-form-container input:focus,
.web-form-container select:focus,
.web-form-container textarea:focus {
	border-color: var(--tg-accent) !important;
	box-shadow: none !important;
	outline: none !important;
}

.web-form-container label,
.web-form-container .frappe-control .label-area label {
	font-family: var(--tg-font-mono) !important;
	font-size: 0.75rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: var(--tg-text-muted) !important;
	font-weight: 400 !important;
	margin-bottom: 0.4rem !important;
}

/* ── Buttons ── */
.web-form-container .btn-primary,
.web-form-container .btn-primary-dark {
	background: var(--tg-accent) !important;
	border: 1px solid var(--tg-accent) !important;
	border-radius: 0 !important;
	font-family: var(--tg-font-mono) !important;
	font-size: 0.8rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	padding: 0.7rem 2rem !important;
	color: #fff !important;
	transition: background 0.2s, border-color 0.2s;
}

.web-form-container .btn-primary:hover {
	background: var(--tg-accent-deep) !important;
	border-color: var(--tg-accent-deep) !important;
}

.web-form-container .btn-default,
.web-form-container .btn-secondary {
	background: transparent !important;
	border: 1px solid var(--tg-sand) !important;
	border-radius: 0 !important;
	font-family: var(--tg-font-mono) !important;
	font-size: 0.8rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	padding: 0.7rem 2rem !important;
	color: var(--tg-text) !important;
}

.web-form-container .btn-default:hover {
	border-color: var(--tg-accent) !important;
	color: var(--tg-accent) !important;
}

/* ── File upload area ── */
.web-form-container .file-upload-area {
	border: 1px dashed var(--tg-sand) !important;
	border-radius: 0 !important;
	background: rgba(255,255,255,0.5) !important;
	padding: 2rem !important;
}

/* ── Cards and sections ── */
.web-form-container .section-body,
.web-form-container .card {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* ── Links ── */
.web-form-container a {
	color: var(--tg-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.web-form-container a:hover {
	border-bottom-color: var(--tg-accent);
}

/* ── Success message ── */
.web-form-container .msgprint {
	background: rgba(125, 139, 117, 0.1) !important;
	border: 1px solid var(--tg-accent) !important;
	border-radius: 0 !important;
	color: var(--tg-accent-deep) !important;
}