@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk&family=Rubik:wght@300..900&family=Syne:wght@400..800&display=swap');

:root {
	--light: #E7E5E4;
	--dark: #1C1917;
	
	--light-trans: #E7E5E41A;
	--dark-trans: #1C19171A;
	
	--mobile-transparent: #E7E5E4BF;
	
	--light-border: 3px solid var(--light);
	--dark-border: 3px solid var(--dark);

	--font-heading: "Rubik", sans-serif;
	--font-body: "Syne", sans-serif;
	--font-small: "Familjen Grotesk", sans-serif;
}

/* Base Layout (Mobile First) */

body, html {
	margin: 0;
	padding: 0;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.6rem;
    display: flex;
    justify-content: space-between;
	align-items: center;
    padding: 0;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    background: var(--mobile-transparent);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    color: var(--dark);
    z-index: 1000;
    overflow: hidden;
    transition: height 0.4s ease, background 0.4s ease;
}

/* Logo and Hamburger stay fixed inside header */
.logo {
	position: absolute;
	top: 0.4rem;
    left: 0.8rem;
	width: 1.8rem;
	height: auto;
}

.logo svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	display: block;
}

.hamburger {
    position: absolute;
    top: 0.7rem;
	right: 0.8rem;
}

/* When menu is open: header expands full screen */
.header.menu-open {
    height: 100vh;
    flex-direction: column;
    justify-content: center; /* center nav items */
    background: var(--mobile-transparent);
    border-bottom: none;
}

/* Nav links inside header */
.nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	position: absolute;
    left: 1rem;
    top: 10vh;
    gap: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.2s;
}

.header.menu-open .nav-menu {
    opacity: 1;
    pointer-events: auto;
}

/* Hamburger base */
.hamburger {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: none;
	color: inherit;
    border: none;
    cursor: pointer;
    z-index: 1001;
    position: absolute; /* keeps it fixed in header */
}

.hamburger span {
    width: 1.4rem;
    height: 0.2rem;
    background: currentColor;
    transition: transform 0.3s, opacity 0.3s;
}

.page {
	display: flex;
    flex-direction: column;
	height: 100vh;
	padding: 10vh 5% 0;
	box-sizing: border-box;
}

.light {
	background-color: var(--light);
	color: var(--dark);
}

.dark {
	background-color: var(--dark);
	color: var(--light);
}

body {
	text-align: center;
}

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

#footer {
	margin-top: auto; /* Pushes footer to the bottom */
    text-align: center;
    padding: 20px;
}

/* Typography */

h1, h2, h3, p {
	margin-top: 0;
}

h1 {
	font-family: var(--font-heading);
	font-size: 3rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.logo {
	font-family: var(--font-heading);
	font-weight: 400;
}

h2 {
	font-family: var(--font-body);
	font-size: 1.6rem;
	font-weight: 400;
}

h3, #apply-button, .faq-question, a {
	font-family: var(--font-body);
	font-size: 1.2rem;
	font-weight: 400;
}

p {
	font-family: var(--font-small);
	font-size: 1.1rem;
}

.faq-answer {
	font-family: var(--font-small);
	font-size: 0.95rem;
	text-align: left;
	margin-top: 0.5rem;
}

/* Apply Section */

#apply-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 2rem;
}

.light #apply-button {
	border: var(--dark-border);
	color: var(--dark);
}

.light #apply-button:hover {
	background-color: var(--dark);
	color: var(--light);
}

.dark #apply-button {
	border: var(--light-border);
	color: var(--light);
}

.dark #apply-button:hover {
	background-color: var(--light);
	color: var(--dark);
}

#apply-button {
	background: transparent;
	border-radius: 0.4rem;
	
	width: 100%;
	max-width: 16rem;

	padding: 0.8rem;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

/* FAQ — Mobile Accordion */

#faq-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
}

.faq-button {
	background: transparent;
	border: var(--dark-border);
	border-radius: 0.4rem;

	color: var(--dark);
	cursor: pointer;

	width: 100%;
	padding: 1rem;

	transition: background-color 0.2s, color 0.2s;
}

.faq-answer {
	display: none;
}

.faq-button.active, .faq-button:hover {
	background-color: var(--dark);
	color: var(--light);
}

.faq-button.active .faq-answer {
	display: block;
}

@media (min-width: 768px) {
	
	html {
		scroll-behavior: smooth
	}

	.header {
		height: 10vh;
		backdrop-filter: blur(8px) saturate(140%);
		-webkit-backdrop-filter: blur(8px) saturate(140%);
		background: var(--light-trans);
	}
	
	.logo {
		width: 3rem;
		height: auto;
	}
	
	.hamburger {
		display: none;
	}
	
	/* Light/dark mode text color */
	.header.light-mode {
		background: var(--light-trans);
		color: var(--dark);
		border-bottom: 1px solid rgba(255,255,255,0.25);
	}

	.header.dark-mode {
		background: var(--dark-trans);
		color: var(--light);
		border-bottom: 1px solid rgba(0,0,0,0.25);
	}
	
	.logo, .nav-menu {
		top: 50%;
		transform: translateY(-50%);
	}
	
	.nav-menu {
		position: absolute;
		left: auto;
		right: 2rem;

		flex-direction: row;
		align-items: center;
		gap: 2rem;

		background: none;
		backdrop-filter: none;

		font-size: 1rem;
		
		opacity: 1;
        pointer-events: auto;
	}
	
	.page {
		padding: 15vh 5% 0;
	}

	h1 {
		font-size: 6rem;
	}

	h2 {
		font-size: 2rem;
	}

	h3,
	#apply-button,
	.faq-question {
		font-size: 1.5rem;
	}

	/* FAQ becomes cards */

	#faq-container {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 12rem;
		gap: 1rem;
	}

	.faq-button {
		width: 20%;
		height: 100%;
		padding: 0.5rem;
	}

	.faq-button.active .faq-question {
		display: none;
	}

	.faq-button.active .faq-answer {
		display: block;
	}
}