/* Hamed SafeNainlog theme
	Specs + palette from https://prnatuurapotheek.wixsite.com/hamedsafenainlog/css
	Typography
	- Koptekst 1: Spectral 700, 26px, #000000
	- Koptekst 2: Spectral 500, 22px, #242323
	- Paragraaf: Open Sans 400, 14px, line-height 1.8, letter-spacing 0.02em, #242323
	Exceptions
	- Inlogpagina titel: 33px
	- Footer titels: Spectral 300, 21px, line-height 2.0
	- Contactformulier titel: Spectral 300, 24px
	Buttons
	- Yellow 1: #FFD608, hover 70%, text #000
	- Yellow 2: white + yellow border, hover 100% yellow, text #000
	- Green 1:  #82B64D, hover 70%, text #fff
	- Green 2:  white + gray border (#A4A4A4 @ 35%), hover green + white text, text #4A4A4A
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Spectral:wght@300;500;700&display=swap');

:root {
	--hamed-grey: #F2F1EF ;
	--hamed-yellow: #FFD608;
	--hamed-yellow-hover: #FFE252; /* 70% yellow over white */
	--hamed-green: #82B64D;
	--hamed-green-hover: #A8CC82; /* 70% green over white */

	--hamed-text: #242323;
	--hamed-muted: #5f6469;
	--hamed-border: #dadce0;
	--hamed-surface: #ffffff;
	--hamed-surface-2: #faf7f4; /* warm surface using brown */
	--hamed-app-bg: #f6f2ee; /* warm page background using brown */

	--hamed-focus: rgba(130, 182, 77, 0.35);
	--hamed-radius: 10px;
	--hamed-radius-sm: 6px;
	--hamed-shadow: 0 6px 18px rgba(36, 35, 35, 0.10);

	--hamed-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--hamed-font-heading: "Spectral", Georgia, "Times New Roman", serif;
}

/* Base document */
html.htmlstd,
html.htmlstd body {
	color: var(--hamed-text) !important;
	font-family: var(--hamed-font-body) !important;
	font-size: 14px;
	line-height: 1.8 !important;
	letter-spacing: 0.02em;
	background-color: var(--hamed-app-bg) !important;
}

/* Headings (for non-WEBDEV pages / content blocks) */
h1,
.hamed-h1 {
	font-family: var(--hamed-font-heading) !important;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: #000000;
}

h2,
.hamed-h2 {
	font-family: var(--hamed-font-heading) !important;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--hamed-text);
}

p,
.hamed-p {
	font-family: var(--hamed-font-body) !important;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.02em;
	color: var(--hamed-text);
}

/* WEBDEV page wrapper */
#page {
	background-color: var(--hamed-surface) !important;
}

/* Header / footer surfaces (tables in dummy.html) */
#M1,
#M6 {
	background-color: var(--hamed-surface) !important;
}

#M12,
#bzM12 {
	border-top: 1px solid color-mix(in srgb, var(--hamed-grey) 25%, var(--hamed-border)) !important;
}

/* Footer text */
footer table,
.footer {
	color: var(--hamed-text) !important;
	font-family: var(--hamed-font-heading) !important;
	font-weight: 300;
	font-size: 21px;
	line-height: 2.0;
	letter-spacing: 0.02em;
	background-color: var(--hamed-grey) !important;
}





/* Labels */
.Simple label {
	color: var(--hamed-text) !important;
	font-family: var(--hamed-font-body) !important;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.02em;
}

/* Inputs (text/select) */
.Edit {
	color: var(--hamed-text) !important;
	background: var(--hamed-surface-2) !important;
	border: 1px solid color-mix(in srgb, var(--hamed-grey) 30%, var(--hamed-border)) !important;
	border-radius: var(--hamed-radius-sm) !important;
	box-shadow: none !important;
	outline: none;
	font-family: var(--hamed-font-body) !important;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	padding: 8px 10px !important;
}

.Edit:focus {
	border-color: var(--hamed-green) !important;
	box-shadow: 0 0 0 3px var(--hamed-focus) !important;
	background: #fff !important;
}
/*