:root {
	--bg: #f8fafc;
	--surface: #ffffff;
	--text: #0f172a;
	--muted: #475569;
	--border: #e2e8f0;
	--accent: #3b82f6;
	--accent-ink: #ffffff;
	--shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.06);
}

* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	line-height: 1.55;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* A11y utility */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Make links in About section clearly identifiable */
.about-body a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1.5px;
}

.about-body a:hover {
	text-decoration-thickness: 2px;
}

.about-body a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Do not underline badge links in About header */
.about-body .badges a.badge { text-decoration: none; }
.about-body .badges a.badge:hover { text-decoration: none; }

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

/* Top banner */
.topbar {
	position: sticky;
	top: 0;
	width: 100%;
	backdrop-filter: saturate(120%) blur(8px);
	background: rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid var(--border);
	z-index: 100;
}

/* Respect safe areas on notched devices */
.topbar {
	padding-top: env(safe-area-inset-top);
	padding-top: constant(safe-area-inset-top);
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

.brand {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.brand a {
	font-weight: 700;
	letter-spacing: 0.2px;
	font-size: 16px;
}

.brand .subtle {
	color: var(--muted);
	font-size: 14px;
}

.links {
	display: flex;
	align-items: center;
	gap: 14px;
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
	transition: transform 160ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.icon-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

.icon-button:active {
	transform: translateY(0);
}

.icon-button i {
	font-size: 16px;
	color: var(--muted);
}

/* Keyboard focus visibility for icon buttons */
.icon-button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Icon brand accents */
.icon-button.email:hover i { color: #ef4444; }       /* red-500 */
.icon-button.email:hover { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
/* Brand colors */
.icon-button.linkedin i { color: #0A66C2; }
.icon-button.github i { color: #181717; }
/* Hover accents */
.icon-button.linkedin:hover { border-color: #0A66C2; background: rgba(10, 102, 194, 0.08); }
.icon-button.linkedin:hover i { color: #0A66C2; }
.icon-button.github:hover { border-color: #181717; background: rgba(24, 23, 23, 0.08); }
.icon-button.github:hover i { color: #181717; }
.icon-button.lang .flag { font-size: 16px; line-height: 1; }
.icon-button.lang:hover { box-shadow: var(--shadow); border-color: var(--accent); background: rgba(59, 130, 246, 0.10); }

/* Theme toggle hover accent */
.icon-button.theme-toggle:hover { border-color: var(--accent); background: rgba(59, 130, 246, 0.10); }
.icon-button.theme-toggle:hover i { color: var(--accent); }

/* Hero */
.hero {
	padding: 64px 0 24px;
	text-align: center;
}

.hero h1 {
	margin: 0 0 8px;
	font-size: 36px;
	letter-spacing: -0.02em;
}

.tagline {
	color: var(--muted);
	max-width: 720px;
	margin: 0 auto 20px;
}

.cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	font-weight: 600;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	transition: transform 160ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.button:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

.button.primary {
	background: linear-gradient(180deg, #3b82f6, #2563eb);
	color: var(--accent-ink);
	border-color: transparent;
}

.button.primary:hover {
	box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

/* Experience */
.section {
	padding: 28px 0 64px;
}

.section h2 {
	font-size: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 16px;
}

/* Grid cards (legacy) */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
	transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	border-color: #dbe3ee;
}

.card header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.card h3 {
	margin: 0;
	font-size: 16px;
}

.card .meta {
	color: var(--muted);
	font-size: 13px;
}

.card p {
	margin: 8px 0 8px;
	color: var(--text);
}

.card ul {
	margin: 0;
	padding-left: 18px;
	color: var(--muted);
}

.tag {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.02em;
	margin-right: 8px;
	margin-bottom: 4px;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.footer {
	border-top: 1px solid var(--border);
	padding: 20px 0 60px;
	color: var(--muted);
	text-align: center;
}

/* Profile header */
.profile-card {
	padding: 16px;
}

.profile-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.cover {
	height: 140px;
	border-radius: 14px;
	background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
	border: 1px solid var(--border);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
	margin-bottom: -64px;
}

.profile-text h1 {
	margin: 0 0 4px;
	font-size: 28px;
}

.profile-text .tagline {
	margin: 0;
}

.profile-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* About card media layout */
.about {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 16px;
}

.avatar {
	width: 100px;
	height: 100px;
	border-radius: 12px;
	object-fit: cover;
	border: 1px solid var(--border);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.avatar-button {
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	line-height: 0;
}

/* Experience list */
.list {
	display: grid;
	gap: 12px;
}

.list-item {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 14px;
	transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.list-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	border-color: #dbe3ee;
}

.company-logo {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: #fff;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.company-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

.logo-fallback {
	font-weight: 700;
	color: var(--muted);
}

.item-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.item-header .title {
	margin: 0;
	font-size: 16px;
}

.item-header .meta {
	color: var(--muted);
	font-size: 13px;
}

/* Prevent long labels from causing horizontal scroll */
.item-header .title,
.item-header .meta,
.company {
	word-break: break-word;
}

.item-header-left {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	font-weight: 600;
	font-size: 12px;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.badge.accent {
    border-color: #16a34a; /* green-600 */
    color: #166534;        /* green-700 text for contrast */
    background: rgba(34, 197, 94, 0.16); /* green-500 tint */
}

/* Blue accent badge (for location) */
.badge.accent-blue {
	border-color: var(--accent);
	color: #1d4ed8; /* blue-600 text */
	background: rgba(59, 130, 246, 0.16); /* blue-500 tint */
}

/* Keyboard focus visibility for badges */
.badge:focus-visible,
a.badge:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.item-header { flex-direction: column; gap: 8px; }
	.badges { align-self: flex-start; }
}

.tech { margin-top: 6px; }

/* Accordion (custom, themed like list-item/card) */
.accordion {
	display: grid;
	gap: 12px;
}

/* Override Bootstrap defaults for our custom accordions */
.accordion .accordion-item {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
	transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
	overflow: hidden; /* ensure inner backgrounds don't cover rounded borders */
}

.accordion .accordion-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	border-color: #dbe3ee;
}

.accordion .accordion-header { margin: 0; }

.accordion .accordion-button {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	border-radius: 14px;
}

.accordion .accordion-button:hover { color: var(--text); }

.accordion .accordion-button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 12px;
}

/* Caret indicator */
.accordion .accordion-button::after {
	content: '▾';
	margin-left: 10px;
	color: var(--muted);
	transition: transform 160ms ease, color 160ms ease;
	display: inline-block;
	background-image: none; /* override Bootstrap chevron */
	transform: none; /* reset Bootstrap transform rules */
}

.accordion .accordion-button[aria-expanded="true"] { color: var(--text); }
.accordion .accordion-button[aria-expanded="true"]::after { content: '▴'; color: var(--text); }

.accordion .accordion-panel {
	border-top: 1px solid var(--border);
	padding: 0 14px 14px;
	background: var(--surface);
	color: var(--text);
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
}

.accordion .accordion-body { color: var(--text); }
.accordion .accordion-body p { margin: 8px 0; color: var(--text); }
.accordion .accordion-body a { color: var(--accent); }

/* Details / collapsible */
.details summary {
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--muted);
	margin-top: 6px;
}

.details summary::marker { display: none; }
.details summary::-webkit-details-marker { display: none; }

.details[open] summary {
	color: var(--text);
	display: none; /* hide summary when open */
}

.details-body { margin-top: 8px; }

/* Modal */
.modal-overlay {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0,0,0,0.4);
	z-index: 10000;
}

.modal {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 16px;
	box-shadow: var(--shadow);
	position: relative;
	z-index: 10001;
}

.modal-avatar {
	width: min(80vw, 420px);
	height: auto;
	display: block;
	border-radius: 16px;
	border: 1px solid var(--border);
}

@media (max-width: 640px) {
	.about { grid-template-columns: 72px 1fr; }
	.avatar { width: 72px; height: 72px; border-radius: 10px; }
	.profile-text h1 { font-size: 22px; }
	.profile-main { align-items: flex-start; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

@media (max-width: 640px) {
	.topbar-inner { height: 56px; }
}

/* Small-screen refinements */
@media (max-width: 640px) {
	.container { padding: 0 16px; }
	/* Disable expensive blur on mobile for performance and clarity */
	.topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
}

@media (max-width: 480px) {
	.list-item { grid-template-columns: 48px 1fr; }
	.company-logo { width: 48px; height: 48px; }
}

/* Dark mode (GitHub-like) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1117;          /* GitHub bg */
        --surface: #161b22;     /* GitHub surface */
        --text: #c9d1d9;        /* GitHub text */
        --muted: #8b949e;       /* GitHub muted */
        --border: #30363d;      /* GitHub border */
        --accent: #58a6ff;      /* GitHub accent */
        --accent-ink: #0d1117;
    }

    .topbar { background: rgba(22, 27, 34, 0.7); }
    .company-logo { background: #161b22; }
    .cover { background: linear-gradient(135deg, #161b22, #0d1117); }

    /* Orange accent for badge in dark mode */
    .badge.accent {
        border-color: #f59e0b; /* amber-500 */
        color: #fbbf24;        /* amber-400 text */
        background: rgba(245, 158, 11, 0.22);
    }
    .badge.accent-blue {
        border-color: #58a6ff;
        color: #58a6ff;
        background: rgba(88, 166, 255, 0.22);
    }
    /* Brand icon contrast adjustments in dark mode */
    .icon-button.github i { color: #ffffff; }
    .icon-button.github:hover { border-color: #ffffff; background: rgba(255,255,255,0.08); }
    .icon-button.github:hover i { color: #ffffff; }
}

/* Explicit theme overrides */
.theme-dark {
    --bg: #0d1117;
    --surface: #161b22;
    --text: #c9d1d9;
    --muted: #8b949e;
    --border: #30363d;
    --accent: #58a6ff;
    --accent-ink: #0d1117;
}

.theme-light {
	--bg: #f8fafc;
	--surface: #ffffff;
	--text: #0f172a;
	--muted: #475569;
	--border: #e2e8f0;
	--accent: #3b82f6;
	--accent-ink: #ffffff;
}


/* Ensure brand icon contrast when user toggles theme manually */
.theme-light .icon-button.github i { color: #000000; }
.theme-light .icon-button.github:hover { border-color: #181717; background: rgba(24,23,23,0.08); }
.theme-light .icon-button.github:hover i { color: #000000; }

.theme-dark .icon-button.github i { color: #ffffff; }
.theme-dark .icon-button.github:hover { border-color: #ffffff; background: rgba(255,255,255,0.08); }
.theme-dark .icon-button.github:hover i { color: #ffffff; }