@import url('_variables.css');


/* Modern CSS Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Main styles for Justine Ongreen website */
body {
    font-family: var(--font-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

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

.container {
  max-width:var(--max-width);
  margin-inline:auto;
  padding:1rem;
}

.btn {
	display:inline-block;
	padding:1rem 1.75rem;
	border-radius:var(--radius);
	background:transparent;
	border:none;
	color:var(--color-accent);
	font-weight:normal;
	text-align:center;
	transition:var(--transition);
	font-size:1.1rem;
}

#contact .btn {
	padding:1.5rem 2.625rem;
	font-size:1.65rem;
}

.btn:hover,.btn:focus {
	background:var(--color-accent);
	color:var(--color-bg);
}

#hero {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height:40vh;
	text-align:center;
	gap:0.75rem;
}

#logo {
	width:90px;
	height:90px;
	border-radius:50%;
	background:radial-gradient(circle,#fff 0%,#c0c0c0 60%,transparent 70%);
	position:relative;
	overflow:hidden;
}

#logo::after {
	content:'';position:absolute;
	inset:0;
	background:linear-gradient(60deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);
	transform:translateX(-100%);
	animation:shimmer 3s infinite;
}

@keyframes shimmer {
	to {
		transform:translateX(100%);
	}
}

#about {
	padding-block:3rem;
}

#about h2 {
	margin-bottom:1rem;
	font-size:1.5rem;
}

#about p {
}

.video {
	margin-block:2rem;
}

.video iframe {
	width:100%;
	aspect-ratio:16/9;
	border:0;
	border-radius:var(--radius);
}

.video.full iframe {
	max-width:none;
}

.video.small {
	display:flex;
	flex-direction:column;
	align-items:center;
}

.video.small iframe {
	max-width:640px;
}

.video figcaption {
	text-align:center;
	margin-top:0.5rem;
	font-weight:600;
}

.press-list {
	list-style:none;
	display:flex;
	flex-direction:column;
	gap:0.75rem;
	margin-top:1rem;
}

.press-list a {
	color:var(--color-accent);
	text-decoration:none;
	transition:var(--transition);
}

.press-list a:hover,.press-list a:focus {
	text-decoration:underline;
	color:var(--color-accent);
}

.link-grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:1rem;
	margin-top:1rem;
}

@media (max-width: 640px) {
	.link-grid {
		grid-template-columns:repeat(2,1fr);
	}
}

.btn.icon {
	font-size:1rem;
	padding:1rem 0;
	background:transparent;
	border:none;
	color:var(--color-accent);
}

.btn.icon:hover,.btn.icon:focus {
	background:var(--color-accent);color:#000;
}

#contact {
	padding-block:3rem;
}

#contact h2 {
	text-align:center;
}

#contact form {
	display:flex;
	flex-direction:column;
	gap:1rem;
	max-width:40rem;
	margin-inline:auto;
}

#contact label {
	display:flex;
	flex-direction:column;
	font-weight:600;
	font-size:0.95rem;
	gap:0.25rem;
}

#contact input,#contact textarea,#contact select {
	padding:0.75rem;
	border:1px solid var(--color-text);
	border-radius:var(--radius);
	background:transparent;
	color:var(--color-text);
}

#contact select {
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23c0c0c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
	background-position:right 0.75rem center;
	background-repeat:no-repeat;
	background-size:1rem;
	padding-right:2.5rem;
	cursor:pointer;
}

#contact input:focus,#contact textarea:focus,#contact select:focus {
	outline:2px solid var(--color-accent);
	border-color:var(--color-accent);
}

#contact select:hover {
	border-color:var(--color-accent);
	transition:var(--transition);
}

#toTop {
	position:fixed;
	bottom:2rem;
	right:2rem;
	display:none;
	z-index:999;
	border:none;
	border-radius:50%;
	width:3rem;
	height:3rem;
	padding:0;
}