/* css/style.css */

/* --- CSS Variables (Theme Colors) --- */
:root {
	/* Light Theme (Default) */
	--bg-primary: #f8f9fa;       /* Very light grey */
	--bg-secondary: #ffffff;     /* White */
	--bg-accent: #e9ecef;        /* Light grey */
	--bg-footer: #343a40;       /* Dark footer */
	--text-primary: #212529;     /* Dark grey text */
	--text-secondary: #495057;   /* Medium grey text */
	--text-muted: #6c757d;       /* Muted grey */
	--text-footer: #adb5bd;      /* Light text on dark footer */
	--heading-color: #212529;    /* Dark heading */
	--link-color: #007bff;       /* Blue link */
	--link-hover-color: #0056b3; /* Darker blue link */
	--border-color: #dee2e6;     /* Light border */
	--border-accent: #ced4da;    /* Medium border */
	--profile-pic-border: #fff;
	--social-bg: #fff;
	--social-border: #ced4da;
	--social-text: var(--link-color);
	--social-hover-bg: var(--link-color);
	--social-hover-text: #fff;
	--social-hover-border: var(--link-color);
	--switch-bg: #ccc;
	--switch-knob: white;
	--switch-icon-color: var(--text-secondary); /* Icon color variable */
	--switch-icon-light-display: block; /* Use display property */
	--switch-icon-dark-display: none;   /* Use display property */
}

.dark-theme {
	/* Dark Theme Overrides */
	--bg-primary: #1a1d20;       /* Slightly darker dark background */
	--bg-secondary: #212529;     /* Dark grey */
	--bg-accent: #343a40;        /* Lighter dark grey */
	--bg-footer: #111315;       /* Even darker footer */
	--text-primary: #e9ecef;     /* Light text */
	--text-secondary: #ced4da;   /* Lighter grey text */
	--text-muted: #adb5bd;       /* Light muted grey */
	--text-footer: #adb5bd;      /* Consistent light text */
	--heading-color: #f8f9fa;    /* White-ish heading */
	--link-color: #58a6ff;       /* Light blue link */
	--link-hover-color: #80bfff; /* Brighter blue link */
	--border-color: #495057;     /* Darker border */
	--border-accent: #6c757d;    /* Medium dark border */
	--profile-pic-border: #6c757d;
	--social-bg: #495057;
	--social-border: #6c757d;
	--social-text: var(--text-primary);
	--social-hover-bg: var(--link-color);
	--social-hover-text: #1a1a1a; /* Dark text on hover */
	--social-hover-border: var(--link-color);
	--switch-bg: #58a6ff;        /* Use link color for on state */
	--switch-knob: #1a1d20;      /* Use dark bg for knob */
	--switch-icon-color: var(--text-secondary); /* Icon color variable */
	--switch-icon-light-display: none;  /* Use display property */
	--switch-icon-dark-display: block; /* Use display property */
}


/* --- Global Styles & Reset --- */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	line-height: 1.7;
	color: var(--text-primary);
	background-color: var(--bg-primary);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	transition: background-color 0.3s ease, color 0.3s ease;
	padding-top: 60px; /* Add padding to prevent content from going under fixed switch */
}

main {
	flex-grow: 1;
}

.container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
}

h1, h2 {
	color: var(--heading-color);
	margin-bottom: 1rem;
	line-height: 1.3;
}

h1 {
	font-size: 3rem;
	font-weight: 300;
}

h2 {
	font-size: 2rem;
	font-weight: 400;
	text-align: center;
	margin-bottom: 2rem;
}

p {
	margin-bottom: 1rem;
	color: var(--text-secondary);
}

a {
	color: var(--link-color);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

a:hover {
	color: var(--link-hover-color);
	text-decoration: underline;
}

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

/* --- Header / Hero Section --- */
.hero {
	background-color: var(--bg-accent);
	color: var(--text-primary); /* Use primary text color of the theme */
	padding: 60px 0 60px 0; /* Adjusted padding slightly */
	text-align: center;
	border-bottom: 1px solid var(--border-color);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hero .profile-pic {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 1.5rem auto;
	border: 4px solid var(--profile-pic-border);
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ /* Optional shadow */
	transition: border-color 0.3s ease;
}

.hero h1 {
	margin-bottom: 0.5rem;
	color: var(--heading-color); /* Ensure heading color is used */
}

.hero .tagline {
	font-size: 1.25rem;
	color: var(--text-muted);
	font-weight: 300;
}

/* --- About Section --- */
.about {
	background-color: var(--bg-secondary);
	padding: 60px 0;
	transition: background-color 0.3s ease;
}

.about .container {
	max-width: 700px; /* Slightly narrower for reading comfort */
	text-align: center;
}

/* --- Connect Section --- */
.connect {
	background-color: var(--bg-accent); /* Match hero bg */
	padding: 60px 0;
	text-align: center;
	transition: background-color 0.3s ease;
}

.social-links a {
	display: inline-block;
	margin: 0 12px;
	font-size: 1.1rem;
	padding: 8px 15px;
	border: 1px solid var(--social-border);
	border-radius: 20px;
	background-color: var(--social-bg);
	color: var(--social-text);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease, border-color 0.2s ease-in-out;
}

.social-links a:hover {
	background-color: var(--social-hover-bg);
	color: var(--social-hover-text);
	text-decoration: none;
	border-color: var(--social-hover-border);
	transform: translateY(-2px); /* Slight lift effect */
}

/* --- Fixed Theme Switcher --- */
.fixed-theme-switch-container {
	position: fixed;
	top: 15px; /* Adjust spacing from top */
	right: 20px; /* Adjust spacing from right */
	z-index: 1000; /* Ensure it's above other content */
}

.theme-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	/* Ensure the label itself doesn't block interactions with the slider */
	vertical-align: middle;
}

/* VERY IMPORTANT: Hide default HTML checkbox visually but keep it accessible */
.theme-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute; /* Take it out of layout flow */
}

/* The slider track */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--switch-bg);
	transition: background-color 0.3s ease;
	border-radius: 34px;
	/* Add outline for focus visibility when checkbox is focused */
	outline: none;
	border: 1px solid transparent; /* Placeholder for focus ring */
}
/* Add focus style to the slider when the hidden input is focused */
.theme-switch input:focus + .slider {
	border-color: var(--link-color);
	box-shadow: 0 0 2px var(--link-color);
}


/* The slider knob */
.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: var(--switch-knob);
	transition: transform 0.3s ease, background-color 0.3s ease;
	border-radius: 50%;
	z-index: 0; /* Knob is BEHIND the icons */
}

/* Icons inside the slider */
.slider .icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	line-height: 1;
	user-select: none;
	pointer-events: none; /* Clicks pass through icons */
	z-index: 1; /* Icons are IN FRONT of the knob */
	color: var(--switch-icon-color); /* Use variable for icon color */
	transition: opacity 0.3s ease, color 0.3s ease; /* Added color transition */
	opacity: 0.9; /* Adjusted opacity */
}

.slider .light-icon {
	left: 7px;
	display: var(--switch-icon-light-display); /* Controlled by variable */
}

.slider .dark-icon {
	right: 7px;
	display: var(--switch-icon-dark-display); /* Controlled by variable */
}

/* Move the knob when checked */
input:checked + .slider:before {
	transform: translateX(26px);
}


/* --- Footer --- */
.footer {
	background-color: var(--bg-footer);
	color: var(--text-footer);
	text-align: center;
	padding: 25px 0;
	font-size: 0.9rem;
	border-top: 1px solid var(--border-color);
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.footer p {
	margin: 0;
	color: var(--text-footer); /* Ensure footer text color overrides */
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
	body {
		padding-top: 70px; /* Adjust padding if switch overlaps */
	}
	h1 {
		font-size: 2.5rem;
	}
	h2 {
		font-size: 1.8rem;
	}
	.hero {
		padding: 50px 0;
	}
	.hero .profile-pic {
		width: 110px; /* Slightly smaller */
		height: 110px;
	}
	.about, .connect {
		padding: 40px 0;
	}
	.social-links a {
		margin: 8px 8px; /* Adjust spacing */
		padding: 6px 12px; /* Slightly smaller */
		font-size: 1rem;
	}
	.fixed-theme-switch-container {
		top: 10px;
		right: 15px; /* Adjust for smaller screens */
	}
    /* Make switch slightly smaller on medium screens */
	.theme-switch {
		width: 50px;
		height: 28px;
	}
	.slider:before {
		width: 20px;
		height: 20px;
		bottom: 4px;
		left: 4px;
	}
	input:checked + .slider:before {
		transform: translateX(22px);
	}
	.slider .icon {
		font-size: 12px;
	}
	.slider .light-icon {
		left: 6px;
	}
	.slider .dark-icon {
		right: 6px;
	}
}

@media (max-width: 480px) {
	body {
		padding-top: 60px;
	}
	h1 {
		font-size: 2rem;
	}
	.hero .tagline {
		font-size: 1.1rem;
	}
	.hero .profile-pic {
		width: 100px;
		height: 100px;
	}
    /* Optional: Stack links on very small screens */
    /* .social-links a { */
       /* display: block; */
       /* margin: 10px auto; */
       /* max-width: 200px; */
    /* } */
}