/* Custom CSS Variables */
:root {
	--max-width: 64rem;
	--page-padding: 2rem;
	--color-accent: #F2C7C5; /* Calm pink color */
	--green10: #DFE7E1;
	--green300: #527A5C;
	--green800: #333F31;
	--pink100: #FAD1D1;
	--pink200: #F5A3A3;
	--pink300: #F18383;
	--pink600: #D96868;
	--pink700: #C94545;
	--pink800: #9E2E2E;

	--color-light-bg: #F8FAF8;
	--color-light-text: var(--green800);
	--color-dark-bg: #334C39;
	--color-dark-text: #F8FAF8;
	--color-button-hover: hsla(135, 20%, 40%, 0.15);
	--top-bar-height: 4rem;

	--link-visited-dark: var(--pink300);
	--link-hover-dark: var(--pink100);
	--link-dark: var(--pink200);

	--link-visited: var(--pink800);
	--link-hover: var(--pink600);
	--link: var(--pink700);


	--bg-color: var(--color-light-bg);
	--text-color: var(--color-light-text);
	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
	font-size: 1rem;
	line-height: 1.7rem;
	color: var(--text-color);
}

@supports (font-variation-settings: normal) {
	:root { font-family: InterVariable, sans-serif; }
}

/* Light Mode */
@media (prefers-color-scheme: light) {
  /*:root {
    --bg-color: var(--color-light-bg);
    --text-color: var(--color-light-text);
  }*/
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  /*:root {
    --bg-color: var(--color-dark-bg);
    --text-color: var(--color-dark-text);
  }*/
}

/* FOUNDATIONS ---------------------------------------- */

body {
	margin: 0;
	background-color: var(--bg-color);
	scroll-behavior: smooth;
}

h1 {
	font-size: 3.5rem;
}

h2 {
	font-size: 2.25rem;
}

h3 {
	font-size: 1.25rem;
}

h1, h2 {
	font-family: "Kalnia", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	line-height: 1.1;
}

h3 {
	font-family: "Judson", serif;
	font-weight: 700;
	font-style: normal;
	margin: 0;
}

label, legend {
	font-weight: 700;
}

main ul > li:not(:last-child) {
	padding-bottom: 0.25rem;
}

a {
	color: var(--link);
}

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

a:visited {
	color: var(--link-visited);
}

.inverted-color a {
	color: var(--link-dark);
}

.inverted-color a:hover {
	color: var(--link-hover-dark);
}

.inverted-color a:visited {
	color: var(--link-visited-dark);
}

mark {
	background-color: var(--color-accent);
	padding: 2px;
	border-radius: 1px;
}

button {
	background-color: var(--pink700);
	color: white;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	padding-block: 8px;
	padding-inline: 16px;
	border-radius: 8px;
	border: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 10rem;
}

button:hover {
	background-color: var(--pink600);
	cursor: pointer;
}

button:active {
	background-color: var(--pink800);
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  padding: 0;
}

.full-height {
	height: 100vh;
}

/* FORM ---------------------------------------- */

fieldset {
	border: none;
	margin: 0;
	padding: 0;
	width: calc(100%);
}

fieldset > legend {
	padding-bottom: 1rem;
}

fieldset label {
	font-weight: unset;
}

fieldset > .radio-item:not(:last-child) {
	padding-bottom: 1rem;
}

input[type="radio"] {
	 /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  border: 1px solid var(--green300);
  border-radius: 50%;
  height: 24px;
  width: 24px;
  display: grid;
  place-content: center;
}

input[type="radio"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--green300);
}

input[type="radio"]:checked {
	border: 1px solid var(--green300);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

.radio-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

input[type="text"],
input[type="number"] {
	font-size: inherit;
	color: inherit;
	height: 32px;
	border-radius: 8px;
	padding-inline: 12px;
	padding-block: 8px;
	border: 1px solid var(--green300);
}

textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	border-radius: 8px;
	padding-inline: 12px;
	padding-block: 12px;
	border: 1px solid var(--green300);
}

.amy-input {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 4px;
}

.input-help {
	font-size: 14px;
	line-height: 120%;
	color: var(--green300);
}

.amy-form {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 2rem;
}

.horizontal-layout {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	align-items: center;
}

/* Responsive Adjustments */
@media screen and (max-width: 1048px) {
	.horizontal-layout {
		grid-template-columns: 1fr;
	}
}

/* TOP NAV BAR ---------------------------------------- */
.top-bar {
	position: sticky;
	width: 100vw;
	top: 0;
	padding-block: 16px;
	background-color: var(--bg-color);
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.top-bar nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--max-width);
	width: -webkit-fill-available;
	width: fill-available;
	width: -moz-available;
	padding-inline: var(--page-padding);
}

.top-bar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.top-bar li {
	display: flex;
	padding-block: 8px;
	padding-inline: 16px;
	border-radius: 16px;
	align-items: center;
	gap: 8px;
}

.top-bar li a {
	display: flex;
	flex-direction: row;
	white-space: nowrap;
	gap: inherit;
}

.top-bar li:hover {
	background-color: var(--color-button-hover);
}

.top-bar a {
	text-decoration: none;
	line-height: 1.5rem;
	color: var(--text-color);
	font-weight: 600;
	letter-spacing: 1%;
}

.top-bar a:hover,
.top-bar a:focus,
.top-bar a:active,
.top-bar a:visited {
	outline: none;
	text-decoration: none;
	color: var(--text-color);
}

.top-bar a:focus {
	text-decoration: underline;
}

.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 300,
	'GRAD' 0,
	'opsz' 24
}

.language-selector {
	display: flex;
	align-items: center;
	gap: 10px;
}

.language-selector label {
	font-weight: bold;
}

.custom-dropdown {
	position: relative;
	display: inline-block;
}

select option {
	font-family: inherit;
}

.custom-dropdown select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent;
	border: none;
	border-radius: 16px;
	padding: 8px 32px 8px 16px;
	font-weight: 600;
	line-height: 1.5rem;
	font-size: 1rem;
	color: #333;
	cursor: pointer;
	outline: none;
}

.custom-dropdown .chevron {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none; /* Make sure it doesn’t interfere with dropdown clicks */
	color: var(--color-light-text);
	font-size: 1em;
}

.custom-dropdown select:hover,
.custom-dropdown select:focus {
	background-color: var(--color-button-hover);
}

.custom-dropdown select:focus {
	box-shadow: 0 0 0 2px rgba(122, 158, 126, 0.3); /* Light outline for accessibility */
}

/* MAIN CONTENT LAYOUT ------------------------------- */
main {
	max-width: var(--max-width);
	margin: 0 auto;
	padding-inline: var(--page-padding);
}

.content-section {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px;
	align-items: center;
	scroll-margin-top: calc(var(--top-bar-height));
	min-height: 700px;
	padding-block: 4rem;
}

.content-section.hero {
	padding-block: 0px;
}

/* Default: Media on the Right */
.content-section .media {
	order: 2;
}

.content-section .content {
	order: 1;
}

/* Media on the Left */
.content-section.media-left {
	grid-template-columns: 1fr 2fr;
	align-items: start;
}

.content-section.media-left .media {
	order: 1;
	max-height: 44rem;
}

.content-section.media-left .content {
	order: 2;
}

/* Full-Width Sections */
.content-section.full-width {
	padding-block: 4rem;
	grid-template-columns: 1fr;
}

.content-section.full-width > .media,
.content-section.full-width > .content {
	grid-column: 1 / -1;
}

/* Media Styling */
.content-section .media {
	height: 100%;
}

.content-section .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--color-accent);
}

.blend {
	background-color: var(--green300);
	/*mix-blend-mode: hard-light;*/
}

#thanks {
	grid-auto-rows: calc(100vh - 8rem);
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
	.content-section {
		grid-template-columns: 1fr;
		grid-auto-rows: max-content;
	}

	.content-section.media-left {
		grid-template-columns: 1fr;
	}

	.content-section .media,
	.content-section .content {
		order: initial;
	}

	.content-section.media-left .media {
		max-height: 28rem;
	}
	.content-section.media-right .media {
		max-height: 28rem;
	}
	#thanks {
		grid-auto-rows: auto;
	}
}

/* Responsive Adjustments */
@media screen and (max-width: 480px) {
	.content-section {
		min-height: 32rem;
		grid-auto-rows: max-content;
	}

	.content-section.media-left .media {
		max-height: 16rem;
	}
	.content-section.media-right .media {
		max-height: 16rem;
	}
}

.content-section h2 {
	margin-top: 0;
}

.content-section.full-width .content {
	display: flex;
	flex-direction: column;
	/*align-items: center;*/
}

/* ACCORDION ------------------------------------ */
.accordion-list {
	list-style: none;
	display: flex; 
	flex-direction: column; 
	gap: 0.5rem;
	padding: 0;
	margin: 0;
}

/* Remove default disclosure triangle (for WebKit browsers like Chrome and Safari) */
summary::-webkit-details-marker {
	display: none;
}

/* Remove default disclosure marker in Firefox */
summary::marker {
	content: "";
}

summary::after {
	font-family: 'Material Symbols Outlined';
	content: 'arrow_back_ios_new'; /* Google Material Icon */
	position: absolute;
	color: var(--green800);
	right: 1rem;
	top: 1rem;
	transform: rotate(-90deg); /* Rotate to point downward */
	transition: transform 0.1s;
}

.inverted-color summary::after {
	color: white;
}

/* Rotate the icon when the accordion is open */
details[open] summary::after {
	transform: rotate(-270deg); /* Rotate to point downward */
}

details {
	border-radius: 5px;
}

details .media-left {
	display: grid;
	gap: 32px;
	grid-template-columns: 19rem 1fr;
	align-items: start;
	padding-bottom: 1rem;
}

details .media-left .media {
	order: 1;
	height: 14rem;
}

details .media-left .content {
	order: 2;
}

details .media-left .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--color-accent);
}

summary {
	position: relative;
	list-style: none;
	list-style-position: outside;
	cursor: pointer;
	padding-block: 1rem;
	padding-left: 1rem;
	padding-right: 2.5rem;
	background-color: transparent;
	border-radius: 8px;
}

details:hover {
	background-color: var(--green10);
}

details[open] {
	background-color: var(--green10);
}

details:focus {
	background-color: var(--pink200);
}

.inverted-color details:hover {
	background-color: hsla(0, 0%, 0%, 0.2);
}

.inverted-color details[open] {
	background-color: hsla(0, 0%, 0%, 0.2);
}

.inverted-color details:focus {
	background-color: hsla(0, 0%, 0%, 0.2);
}

details p, ul {
	margin: 0;
	padding-bottom: 1rem;
}

details > *:last-child {
	margin: 0;
	padding-bottom: 2rem;
}

details > p,
details > div {
	padding-inline: 1rem;
}

details > ul {
	padding-inline: 2rem;
}

/* Responsive Design ---------------------------------  */
@media screen and (max-width: 768px) {

	.top-bar {
		padding-block: 8px;
	}

	.top-bar .nav-text {
		display: none;
	}

	.language-selector .material-symbols-outlined {
		display: none;
	}

	.content-section {
		flex-direction: column;
	}

	details .media-left {
		grid-template-columns: 1fr;
	}
}

/* Responsive Design */
@media screen and (max-width: 480px) {
	:root {
		--page-padding: 1rem;
		font-size: 0.8rem;
	}

	h1, h2 {
		font-size: 2rem;
	}

	.top-bar ul {
		gap: 0.5rem;
	}

	.top-bar li {
		padding-inline: 0.5rem;
		padding-block: 1rem;
		border-radius: 0.5rem;
	}

	.custom-dropdown select {
		border-radius: 0.5rem;
		padding: 1rem 1.5rem 1rem 0.5rem; /* Right padding for chevron */
	}

	.custom-dropdown .chevron {
		right: 4px;
	}

	details .media-left {
		gap: 16px;
	}

}

/* Focus States for Accessibility */
a:focus,
button:focus,
summary:focus-visible,
input:focus {
	outline: 2px dashed var(--color-accent);
	outline-offset: 4px;
}

.inverted-color {
	background-color: var(--color-dark-bg);
	color: var(--color-dark-text);
}

.full-bleed {
	box-shadow: 0 0 0 100vmax var(--color-dark-bg);
	clip-path: inset(0 -100vmax);
}