/* Combined stylesheet for index.html and resultat.html */

/* ---------- From index.html <style> ---------- */
/* Local font faces from /fonts (ensure filenames match your files) */
@font-face {
    font-family: 'PP Telegraf';
    src: url('fonts/PPTelegraf-Regular.woff2') format('woff2'),
         url('fonts/PPTelegraf-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('fonts/PPNeueMontreal-Regular.woff2') format('woff2'),
         url('fonts/PPNeueMontreal-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('fonts/PPNeueMontreal-SemiBold.woff2') format('woff2'),
         url('fonts/PPNeueMontreal-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* Screen reader only class */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body {
	font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	background-color: #f5f5f5;
	color: #252525;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Background gradient */
.background-gradient {
	width: 100%;
	height: 100%;
	position: fixed; /* better coverage across browsers incl. Safari */
	margin: 0 !important;
	top: 0;
	left: 0;
	filter: blur(1425.12px);
	border-radius: 0;
	background-color: #f8e2bf;
	z-index: 0;
}

/* Logo styles */
.logo-icon {
	align-self: stretch;
	max-width: 100%;
	overflow: hidden;
	height: 26.5px;
	flex-shrink: 0;
	object-fit: cover;
}
.logo1 {
	position: absolute;
	top: 0.03px;
	left: 0px;
	width: 87.4px;
	height: 26.7px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.logo-text-icon {
	position: absolute;
	top: 5.37px;
	left: 94.13px;
	width: 55.9px;
	height: 19.1px;
}
.logo {
	width: 150px;
	position: relative;
	height: 27px;
	z-index: 1;
}

/* Main container */
.desktop-1440 {
	width: 100%;
	position: relative;
	background-color: #f5f5f5;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 48px 0px;
	box-sizing: border-box;
	gap: 220px;
	text-align: center;
	font-size: 32px;
	color: #252525;
	font-family: 'PP Telegraf';
	min-height: 100vh;
}

.desktop-1441 {
	width: 100%;
	position: relative;
	background-color: #f5f5f5;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 48px 0px;
	box-sizing: border-box;
	gap: 52px;
	text-align: center;
	font-size: 16px;
	color: #252525;
	font-family: 'PP Neue Montreal';
	min-height: 100vh;
}

/* Content container */
.content-container {
	width: 603px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	z-index: 2;
}

/* Header styles */
.header {
	align-self: stretch;
	position: relative;
}
/* Big hero header only on the landing (index) section */
.desktop-1440 .header-container .header {
	font-family: 'PP Telegraf', 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 32px;
}
/* Results page title size */
.desktop-1441 .header-container .header {
	font-family: 'PP Telegraf', 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 24px;
}
.subheader {
	align-self: stretch;
	position: relative;
	font-size: 14px;
	font-family: 'PP Neue Montreal';
	color: #666;
}
.header-container {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

/* Input styles */
.input-placeholder {
	position: relative;
	font-family: 'PP Neue Montreal';
}
.input-example { position: relative; opacity: 0.5; }
.input-field { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; font-size: 16px; }
.input-field input { background: transparent; border: none; outline: none; font-size: 16px; font-family: 'PP Neue Montreal'; color: #252525; width: 100%; }
.input-field input::placeholder { color: #252525; opacity: 0.7; }
.fontawesome-6-pro-icon { width: 14px; height: 16px; }
.button-container { border-radius: 64px; background-color: #252525; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 12px 28px; gap: 8px; font-size: 14px; color: #f5f5f5; cursor: pointer; transition: background-color 0.3s ease; border: none; }
.button-container:hover { background-color: #333; }
.button-container:active { background-color: #1a1a1a; }
.input-container { align-self: stretch; border-radius: 64px; background-color: rgba(255,255,255,0.6); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 12px 12px 12px 52px; font-size: 16px; font-family: 'PP Neue Montreal'; }

/* Results styles */
.header-container-parent { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 24px; z-index: 3; text-align: left; font-size: 20px; font-family: 'Font Awesome 6 Pro'; width: 1190px; max-width: 1190px; }
.header2 { position: relative; font-size: 16px; text-transform: uppercase; font-weight: 600; font-family: 'PP Neue Montreal'; color: #252525; }

/* Card styles */
.frame-parent, .frame-group, .frame-parent2 { align-self: stretch; box-shadow: 0px 317px 89px rgba(64,65,6,0), 0px 203px 81px rgba(64,65,6,0.01), 0px 114px 69px rgba(64,65,6,0.02), 0px 51px 51px rgba(64,65,6,0.03), 0px 13px 28px rgba(64,65,6,0.03); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.frame-parent { color: #519442; }
.frame-group { color: #8b7526; }
.frame-parent2 { color: #944242; }

/* Header sections */
.header-parent { align-self: stretch; background-color: #d0f8c7; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 16px 32px; gap: 16px; }
.header-group { align-self: stretch; background-color: #fff2c5; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 16px 32px; gap: 16px; }
.header-parent1 { align-self: stretch; background-color: #fcbcbd; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 16px 32px; gap: 16px; }

/* Content sections */
.frame-wrapper, .frame-container, .frame-wrapper1 { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 24px 32px; font-size: 14px; color: #000; font-family: 'PP Neue Montreal'; }
.frame-wrapper .header,
.frame-container .header,
.frame-wrapper1 .header { font-size: 14px; font-family: 'PP Neue Montreal'; font-weight: 400; }
.frame-wrapper { background-color: #fbfffb; }
.frame-container { background-color: #fffcf1; }
.frame-wrapper1 { background-color: #fffbfb; }

/* Content text */
.verdi { font-weight: 600; }
.verdi-10-smtp01makenewsmail-parent { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; }
.verdi-vspf1-mx-include-spf { align-self: stretch; position: relative; font-weight: 600; }
.spf-er-soft { margin: 0; }

/* Table styles */
.parameter { width: 268.7px; position: relative; text-transform: uppercase; font-weight: 600; display: inline-block; flex-shrink: 0; }
.forklaring { flex: 1; position: relative; text-transform: uppercase; font-weight: 600; }
.parameter-parent { align-self: stretch; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 16px; }
.parameter-parent .policy:nth-of-type(2) { /* value column */
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}
.frame-child { align-self: stretch; position: relative; border-top: 1px solid #252525; box-sizing: border-box; height: 1px; opacity: 0.2; }
.policy { width: 268.7px; position: relative; display: inline-block; flex-shrink: 0; }
.maksimal-beskyttelse- { flex: 1; position: relative; }
.frame-div { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 32px; }

/* Footer */
.footer-text { width: 686px; position: relative; font-size: 12px; font-family: 'PP Neue Montreal'; display: inline-block; opacity: 0.8; z-index: 3; }
.raymondmakeas { color: #002e4a; }

/* Loading spinner */
.spinner { margin: 24px auto; border: 4px solid #f3f3f3; border-top: 4px solid #4a90e2; border-radius: 50%; width: 36px; height: 36px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 1200px) { .header-container-parent { width: 90%; max-width: 800px; } }
@media (max-width: 700px) {
	.content-container { width: 90%; max-width: 500px; }
	.input-container { flex-direction: column; gap: 12px; padding: 16px; }
	.header-container-parent { width: 95%; max-width: 600px; }
	.frame-wrapper, .frame-container, .frame-wrapper1 { padding: 16px 20px; }
	.header-parent, .header-group, .header-parent1 { padding: 12px 20px; }
}

/* Ensure left-align inside result cards */
.frame-wrapper,
.frame-container,
.frame-wrapper1,
.verdi-10-smtp01makenewsmail-parent,
.parameter-parent,
.frame-parent .header,
.frame-group .header,
.frame-parent2 .header { text-align: left; }