/* --- CSS Table of Contents --- */
/* 1. Root Variables (Colours & Fonts) */
/* 2. General Styles & Structure */
/* 3. Page Header & Title */
/* 4. Navigation & Header Controls */
/* 5. Form & Input Elements */
/* 6. Grid Layout for Results */
/* 7. Info Blocks (General & Scrollable) */
/* 8. Content Styling (Lists, Buttons, Raw Data) */
/* 9. Status, Error & Helper Classes */
/* 10. Security Scan Specifics */
/* 11. Static & Error Page Specifics */
/* 12. Fixed Footer */
/* 13. Dark Mode Theme */
/* 14. Media Queries for Responsiveness */
/* ----------------------------- */

/* --- 1. Root Variables --- */
:root {
	--font-family: 'Lato', sans-serif;
	
	/* Light Mode Colours */
	--colour-background-light: #f4f6f9;
	--colour-surface-light: #ffffff;
	--colour-text-primary-light: #212529;
	--colour-text-secondary-light: #6c757d;
	--colour-border-light: #dee2e6;
	--colour-accent-light: #8e44ad;
	--colour-accent-hover-light: #703690;
	--colour-title-bg-light: #f4eff7;

	/* Dark Mode Colours */
	--colour-background-dark: #121212;
	--colour-surface-dark: #1e1e1e;
	--colour-text-primary-dark: #e0e0e0;
	--colour-text-secondary-dark: #adb5bd;
	--colour-border-dark: #3a3a3a;
	--colour-accent-dark: #9b59b6;
	--colour-accent-hover-dark: #bb86fc;
	--colour-title-bg-dark: #2c2733;
}

/* --- 2. General Styles & Structure --- */
body {
	font-family: var(--font-family);
	margin: 0;
	padding: 15px;
	background-color: var(--colour-background-light);
	color: var(--colour-text-primary-light);
	font-size: 0.9em;
	line-height: 1.4;
	transition: background-color 0.3s, color 0.3s;
	padding-bottom: 70px; /* Increased space for footer on mobile */
}

.container { 
	max-width: 1400px; 
	margin: 0 auto; 
}

/* --- 3. Page Header & Title --- */
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	background-color: var(--colour-title-bg-light);
	padding: 0 10px 0 20px;
	border-radius: 8px;
	border-bottom: 3px solid var(--colour-accent-light);
}

.page-header h1 a {
	text-decoration: none;
	color: inherit;
}

h1 {
	font-size: 1.6em;
	margin: 0;
	padding: 15px 0;
	color: var(--colour-text-primary-light);
	background-color: transparent;
	border-bottom: none;
	text-align: left;
}

h3 {
	font-size: 1em;
	margin: 0;
	padding: 10px 15px;
	background-color: var(--colour-title-bg-light);
	border-bottom: 1px solid var(--colour-border-light);
	color: var(--colour-text-secondary-light);
	font-weight: 600;
}

h4 {
	margin-top: 15px;
	margin-bottom: 5px;
	font-size: 0.9em;
	text-transform: uppercase;
	color: var(--colour-text-secondary-light);
}

/* --- 4. Navigation & Header Controls --- */
.header-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nav-link {
	font-size: 0.9em;
	font-weight: bold;
	color: var(--colour-text-secondary-light);
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 5px;
	transition: background-color 0.2s, color 0.2s;
}

.nav-link:hover {
	background-color: rgba(0,0,0,0.05);
	color: var(--colour-text-primary-light);
}

.nav-link.button-style {
	background-color: var(--colour-title-bg-light);
	border: 1px solid var(--colour-border-light);
}

.nav-link.button-style:hover {
	border-color: var(--colour-text-secondary-light);
}

/* --- 5. Form & Input Elements --- */
form { 
	display: flex; 
	gap: 10px; 
	margin-bottom: 15px; 
	align-items: center; 
}

form input[type="text"] { 
	flex-grow: 1; 
	padding: 8px; 
	border: 1px solid var(--colour-border-light); 
	border-radius: 5px; 
	font-size: 1em; 
	background-color: var(--colour-surface-light); 
	color: var(--colour-text-primary-light); 
	height: 22px; 
	color-scheme: light;
	min-width: 50px;
}

form button[type="submit"] { 
	padding: 9px 15px; 
	border: none; 
	background-color: var(--colour-accent-light); 
	color: white; 
	border-radius: 5px; 
	cursor: pointer; 
	font-size: 1em; 
	font-weight: bold; 
	transition: background-color 0.2s; 
}

form button[type="submit"]:hover { 
	background-color: var(--colour-accent-hover-light); 
}

/* --- 6. Grid Layout for Results --- */
.hidden { display: none; }

#results-grid, #scan-results-grid { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	grid-auto-rows: minmax(180px, auto); 
	gap: 12px; 
}

#results-grid {
	grid-template-areas: "whois whois ip" "dns ssl dnssec"; 
}

#whois-rdap-block { grid-area: whois; }
#ip-block { grid-area: ip; }
#dns-block { grid-area: dns; }
#ssl-block { grid-area: ssl; }
#dnssec-block { grid-area: dnssec; }

/* --- 7. Info Blocks (General & Scrollable) --- */
.info-block { 
	border: 1px solid var(--colour-border-light); 
	border-radius: 6px; 
	background-color: var(--colour-surface-light); 
	box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
	display: flex; 
	flex-direction: column; 
	overflow: hidden; 
}

.info-block .content { 
	padding: 12px 15px; 
	overflow-y: auto; 
	flex-grow: 1; 
	display: flex; 
	flex-direction: column; 
}

.content-container { 
	flex-grow: 1; 
}

/* --- 8. Content Styling --- */
.summary-list { 
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
	font-size: 0.9em; 
}

.summary-list li { 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	padding: 5px 0; 
	border-bottom: 1px solid #f0f0f0; 
}

.summary-list li:last-child { 
	border-bottom: none; 
}

.summary-list li strong { 
	color: var(--colour-text-secondary-light); 
	margin-right: 15px; 
	flex-shrink: 0; 
}

.summary-list li span { 
	text-align: right; 
	word-break: break-all; 
}

.details-buttons { 
	margin-top: 15px; 
	padding-top: 10px; 
	border-top: 1px solid #f0f0f0; 
}

.details-buttons button, .details-toggle { 
	padding: 5px 10px; 
	font-size: 0.8em; 
	cursor: pointer; 
	border: 1px solid var(--colour-border-light); 
	background-color: var(--colour-title-bg-light); 
	border-radius: 4px; 
	color: var(--colour-text-primary-light); 
}

#raw-data-display pre { 
	max-height: 200px; 
	overflow-y: auto; 
	background-color: #f8f9fa; 
	padding: 10px; 
	border-radius: 4px; 
	white-space: pre-wrap; 
	word-break: break-word; 
	font-size: 0.8em; 
	line-height: 1.6; 
}

.details-toggle { 
	display: block; 
	margin-top: 10px; 
}

.details-content.hidden { 
	display: none; 
}

/* --- 9. Status, Error & Helper Classes --- */
.status-ok { 
	color: #28a745; 
	font-weight: bold; 
}

.status-error { 
	color: #dc3545; 
	font-weight: bold; 
}

.error { 
	color: #721c24; 
	background-color: #f8d7da; 
	border: 1px solid #f5c6cb; 
	padding: 15px; 
	border-radius: 5px; 
}

.summary-list-divider { 
	border-top: 1px solid #f0f0f0; 
	margin: 10px 0; 
}

.flag-icon { 
	height: 12px; 
	width: 16px; 
	vertical-align: middle; 
	margin-left: 5px; 
	border: 1px solid #eee; 
}

.list-pre { 
	margin: 0; 
	padding: 0; 
	white-space: pre-wrap; 
	word-break: break-all; 
}

#darkModeToggle { 
	height: 38px; 
	width: 38px; 
	padding: 6px; 
	background-color: transparent; 
	border: 1px solid var(--colour-border-light); 
	border-radius: 5px; 
	cursor: pointer; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	transition: background-color 0.2s, border-color 0.2s; 
}

#darkModeToggle:hover { 
	background-color: rgba(0,0,0,0.05); 
}

#darkModeToggle svg { 
	width: 20px; 
	height: 20px; 
	stroke: var(--colour-border-light); 
	stroke-width: 2; 
	fill: none; 
	transition: stroke 0.2s; 
}

#darkModeToggle:hover svg { 
	stroke: var(--colour-text-secondary-light); 
}

/* --- 10. Security Scan Specifics --- */
.score-container { 
	text-align: center; 
	margin-bottom: 20px; 
}

.score-circle { 
	width: 100px; 
	height: 100px; 
	border-radius: 50%; 
	color: white; 
	font-size: 2.5em; 
	font-weight: bold; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	margin: 0 auto 10px auto; 
	border: 5px solid; 
}

.score-Aplus, .score-A { 
	background-color: #28a745; 
	border-color: #23903c; 
}

.score-B { 
	background-color: #fd7e14; 
	border-color: #e36b07; 
}

.score-C { 
	background-color: #dc3545; 
	border-color: #c82333; 
}

.findings-title { 
	margin-top: 0; 
}

.findings-list { 
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
	font-size: 0.9em; 
}

.findings-list li { 
	padding: 5px 0 5px 20px; 
	position: relative; 
	border-bottom: 1px solid #f0f0f0; 
}

.findings-list li:last-child { 
	border-bottom: none; 
}

.status-dot { 
	height: 10px; 
	width: 10px; 
	border-radius: 50%; 
	display: inline-block; 
	position: absolute; 
	left: 0; 
	top: 10px; 
}

.status-dot.status-good { background-color: #28a745; }
.status-dot.status-ok { background-color: #fd7e14; }
.status-dot.status-bad { background-color: #dc3545; }
.status-dot.status-info { background-color: #6c757d; }

/* --- 11. Static & Error Page Specifics --- */
.page-intro, .error-page-content, .static-page-content { 
	text-align: center; 
	padding: 20px; 
	background-color: var(--colour-surface-light); 
	border: 1px solid var(--colour-border-light); 
	border-radius: 8px; 
	margin: 0 auto 30px auto; 
	max-width: 800px; 
}

.page-intro h2, .error-page-content h1, .static-page-content h2 { 
	font-size: 2em; 
	background: none; 
	border: none; 
	padding: 0; 
	margin-top: 10px; 
	text-align: center; 
}

.page-intro p { 
	max-width: 700px; 
	margin: 10px auto; 
}

.static-page-content h2 { 
	margin-bottom: 20px; 
	border-bottom: 1px solid var(--colour-border-light); 
	padding-bottom: 10px; 
}

.error-page-content .error-code { 
	font-size: 5em; 
	font-weight: bold; 
	color: var(--colour-accent-light); 
	margin: 0; 
	opacity: 0.6; 
}

.error-page-content p, .static-page-content p { 
	color: var(--colour-text-secondary-light); 
	max-width: 650px; 
	margin: 15px auto; 
	text-align: left; 
}

.error-page-content .button, .static-page-content .button { 
	display: inline-block; 
	padding: 10px 25px; 
	background-color: var(--colour-accent-light); 
	color: white; 
	border-radius: 5px; 
	text-decoration: none; 
	font-weight: bold; 
	margin-top: 20px; 
	transition: background-color 0.2s; 
}

.error-page-content .button:hover, .static-page-content .button:hover { 
	background-color: var(--colour-accent-hover-light); 
}

.static-page-content { 
	text-align: left; 
}

.static-page-content h3 { 
	background: none; 
	border: none; 
	padding: 0; 
	margin-top: 25px; 
}

/* --- 12. External Link Container --- */
.external-link-container { 
	margin-top: auto; 
	padding-top: 15px; 
	border-top: 1px solid #f0f0f0; 
	text-align: center; 
}

.external-link-container p { 
	font-size: 0.85em; 
	font-style: italic; 
	color: var(--colour-text-secondary-light); 
	margin: 0 0 10px 0; 
}

.external-link-container .button { 
	display: inline-block; 
	padding: 8px 15px; 
	font-size: 0.9em; 
	background-color: var(--colour-accent-light); 
	color: white; 
	text-decoration: none; 
	border-radius: 5px; 
	transition: background-color 0.2s; 
	white-space: nowrap; 
	margin: 0 5px; 
}

.external-link-container .button:hover { 
	background-color: var(--colour-accent-hover-light); 
}

/* --- 13. Fixed Footer --- */
.site-footer { 
	position: fixed; 
	left: 0; 
	bottom: 0; 
	width: 100%; 
	background-color: var(--colour-surface-light); 
	border-top: 1px solid var(--colour-border-light); 
	padding: 10px 20px; 
	text-align: center; 
	font-size: 0.8em; 
	z-index: 100; 
	box-shadow: 0 -2px 5px rgba(0,0,0,0.05); 
}

.site-footer a { 
	color: var(--colour-accent-light); 
	text-decoration: none; 
}

.site-footer a:hover { 
	text-decoration: underline; 
}

/* --- 14. Dark Mode Theme --- */
body.dark-mode { 
	background-color: var(--colour-background-dark); 
	color: var(--colour-text-primary-dark); 
}

body.dark-mode .page-header { 
	background-color: var(--colour-title-bg-dark); 
	border-bottom-color: var(--colour-accent-dark); 
}

body.dark-mode h1, 
body.dark-mode h3 { 
	color: var(--colour-text-primary-dark); 
}

body.dark-mode .info-block { 
	background-color: var(--colour-surface-dark); 
	border-color: var(--colour-border-dark); 
}

body.dark-mode h3 { 
	background-color: var(--colour-title-bg-dark); 
	border-bottom-color: var(--colour-border-dark); 
}

body.dark-mode .summary-list li, 
body.dark-mode .details-buttons, 
body.dark-mode .external-link-container,
body.dark-mode .summary-list-divider, 
body.dark-mode .findings-list li { 
	border-color: var(--colour-border-dark); 
}

body.dark-mode .summary-list li strong { 
	color: var(--colour-text-secondary-dark); 
}

body.dark-mode #raw-data-display pre, 
body.dark-mode .details-buttons button, 
body.dark-mode .details-toggle { 
	background-color: var(--colour-title-bg-dark); 
	border-color: var(--colour-border-dark); 
	color: var(--colour-text-primary-dark); 
}

body.dark-mode .error { 
	background-color: #4d2124; 
	border-color: #6e3539; 
	color: #f5c6cb; 
}

body.dark-mode form input[type="text"] { 
	background-color: #333; 
	border-color: var(--colour-border-dark); 
	color: var(--colour-text-primary-dark); 
	color-scheme: dark; 
}

body.dark-mode form button[type="submit"] { 
	background-color: var(--colour-accent-dark); 
}

body.dark-mode form button[type="submit"]:hover { 
	background-color: var(--colour-accent-hover-dark); 
}

body.dark-mode .site-footer { 
	background-color: var(--colour-surface-dark); 
	border-top-color: var(--colour-border-dark); 
}

body.dark-mode .site-footer a, 
body.dark-mode .nav-link { 
	color: var(--colour-accent-dark); 
}

body.dark-mode .nav-link:hover { 
	background-color: rgba(255,255,255,0.05); 
	color: var(--colour-text-primary-dark); 
}

body.dark-mode .nav-link.button-style {
    background-color: var(--colour-title-bg-dark);
    border-color: var(--colour-border-dark);
}

body.dark-mode .nav-link.button-style:hover {
    border-color: var(--colour-text-secondary-dark);
}

body.dark-mode #darkModeToggle { 
	border-color: var(--colour-border-dark); 
}

body.dark-mode #darkModeToggle:hover { 
	background-color: rgba(255,255,255,0.05); 
}

body.dark-mode #darkModeToggle svg { 
	stroke: var(--colour-border-dark); 
}

body.dark-mode #darkModeToggle:hover svg { 
	stroke: var(--colour-text-secondary-dark); 
}

body.dark-mode .page-intro, 
body.dark-mode .error-page-content, 
body.dark-mode .static-page-content { 
	background-color: var(--colour-surface-dark); 
	border-color: var(--colour-border-dark); 
}

body.dark-mode .error-page-content .error-code { 
	color: var(--colour-accent-dark); 
}

body.dark-mode .error-page-content p, 
body.dark-mode .static-page-content p,
body.dark-mode .external-link-container p { 
	color: var(--colour-text-secondary-dark); 
}

body.dark-mode .error-page-content .button, 
body.dark-mode .static-page-content .button,
body.dark-mode .external-link-container .button { 
	background-color: var(--colour-accent-dark); 
}

body.dark-mode .error-page-content .button:hover, 
body.dark-mode .static-page-content .button:hover,
body.dark-mode .external-link-container .button:hover { 
	background-color: var(--colour-accent-hover-dark); 
}

body.dark-mode .static-page-content h2 { 
	border-bottom-color: var(--colour-border-dark); 
}

body.dark-mode .score-Aplus, 
body.dark-mode .score-A { 
	background-color: #2a7d3f; 
	border-color: #3ca957; 
}

body.dark-mode .score-B { 
	background-color: #b3590d; 
	border-color: #ff9a40; 
}

body.dark-mode .score-C { 
	background-color: #a52834; 
	border-color: #f15261; 
}

/* --- 15. Media Queries for Responsiveness --- */
@media (max-width: 1200px) { 
	.container { 
		max-width: 95%; 
	} 
}

@media (max-width: 992px) { 
	#results-grid, #scan-results-grid { 
		grid-template-columns: repeat(2, 1fr); 
	} 
	#results-grid { 
		grid-template-areas: "whois whois" "ip dns" "ssl dnssec"; 
	} 
}

@media (max-width: 768px) { 
	body { 
		padding: 10px; 
		padding-bottom: 70px; 
	} 
	.page-header { 
		flex-direction: column; 
		align-items: stretch; 
		text-align: center; 
		padding: 0 10px; 
	} 
	.page-header h1 { 
		text-align: center; 
	} 
	.header-controls { 
		justify-content: center; 
		padding: 10px 0; 
	} 
	#darkModeToggle { 
		position: absolute; 
		top: 15px; 
		right: 10px; 
	} 
	#results-grid, #scan-results-grid { 
		grid-template-columns: 1fr; 
	} 
	#results-grid { 
		grid-template-areas: "whois" "ip" "dns" "ssl" "dnssec"; 
	} 
	form { 
		flex-direction: column; 
		align-items: stretch; 
	}
	form input[type="text"] {
		margin-bottom: 10px;
	}
}