/*
COLOR PALETTE

------------------------------------
Eggshell    #ebeae1
Tea Green  #b0eeaa83 (seim-transparent)
Lavender Blue #AAB0EE
lavender    #E8AAEE
Light Pink   #EEAAB0
Light Salmon #EEB0AA
Gray        #cacaca
------------------------------------

*/

/* FONT VARIABLES */
:root {
  --font-body: 'Inter', Arial, sans-serif;
  --font-heading: 'Montserrat', Arial, sans-serif;
}

/* MOBILE-FIRST BASE STYLES */
body {
  font-family: var(--font-body);
  background: #ebeae1;
  margin: 0;
  padding: 1rem;
  line-height: 1.5;
}

header {
  position: relative;
  padding-block: 1.5rem 1rem;
  text-align: center;
}

.back-link {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  padding: 0.5rem 1rem;
  background: #b0eeaa83;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,0.1);
  font-weight: bold;
  text-decoration: none;
  z-index: 10;
  font-size: 1rem;
  font-family: var(--font-body);
}

h1, h2, h3 {
  font-family: var(--font-heading);
}

h1 {
  font-size: 2rem;
  margin-block: 0 0.5rem;
}

h2, h3 {
  font-size: 1.25rem;
  margin-block: 1rem 0.5rem;
}

.am {
  font-size: 1.2rem;
  margin-block: 1rem 0.5rem;
  font-family: var(--font-heading);
}

p, .program, .location, .date, .key, .highlight, .job-description, .work-history, .school {
  font-size: 1rem;
  margin-block: 0.5rem;
  margin-inline: auto;
  max-inline-size: 100%;
  font-family: var(--font-body);
}

img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
  margin-inline: auto;
  border-radius: 0.5rem;
}

section {
  margin-block-end: 1.5rem;
  padding: 1rem;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05);
}

/* FOOTER
------------------------------------*/
.footer {
  background: #cacaca;
  padding-block: 1.25rem;
  text-align: center;
  inline-size: 100%;
  margin-block-start: 2rem;
  font-family: var(--font-body);
}

.socials {
  display: flex;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin-block-start: 1rem;
}

.socials img {
  inline-size: 2rem;
  block-size: 2rem;
}

/* CONTACT POPOVER (pure HTML + CSS) */
.contact-popover {
  position: absolute; /* popover positioning engine will anchor to trigger */
  inset: auto;
  border: 1px solid var(--border-main);
  background: var(--bg-card);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2rem var(--shadow-dark);
  padding: 1rem;
  padding-inline: 1rem;
  padding-block: 1rem;
  inline-size: min(33vw, 36rem); /* max width on large */
  max-inline-size: 90vw;         /* never overflow viewport */
  /* container-type: inline-size;  <-- removed for validator */
  /* position-anchor: anchor;      <-- removed for validator */
  z-index: 1000;
}

/* when the popover is open (keep attribute selector for fallback) */
.contact-popover[open] { /* fallback attribute only to satisfy validator */
  display: block;
}

/* backdrop (dim the page beneath) */
.contact-popover::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
}

/* content layout */
.popover-content {
  display: block;
  position: relative;
}

/* close button */
.close-button {
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-main);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.5rem;
}
.close-button:hover,
.close-button:focus {
  background: var(--accent);
  color: var(--bg-card);
}

/* contact content grid (changes with container queries) */
.contact-info {
  display: grid;
  gap: 1rem;
  align-items: start;
  justify-items: stretch;
}

/* image */
.contact-image img {
  inline-size: 8rem;
  block-size: 8rem;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* text */
.contact-text h2 {
  margin-block-start: 0;
  margin-block-end: 0.25rem;
  font-family: var(--font-heading);
}
.contact-text .bio {
  margin-block-end: 0.5rem;
}

/* contact details links */
.contact-details a {
  color: var(--text-main);
  text-decoration: underline;
}
.contact-details a:hover { color: var(--accent); }

/* CONTAINER QUERIES replaced with media queries for validator compatibility */

/* small popover: stacked, fills width (24rem ≈ 384px) */
@media (max-width: 24rem) {
  .contact-popover {
    inline-size: 100vw;
    max-inline-size: 100vw;
    border-radius: 0;
    inset: 0; /* full-width anchor fallback */
  }
  .contact-info {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .contact-text .bio { display: block; }
}

/* medium popover: two columns, no bio */
@media (min-width: 24.0625rem) and (max-width: 37.5rem) {
  .contact-popover {
    inline-size: min(80vw, 36rem);
  }
  .contact-info {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .contact-text .bio { display: none; }
}

/* large popover: two columns with bio, max 1/3 viewport width */
@media (min-width: 37.5625rem) {
  .contact-popover {
    inline-size: min(33vw, 36rem);
  }
  .contact-info {
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
  }
  .contact-text .bio { display: block; }
}

/* ensure nav-button stays interactive and accessible without JS */
.nav-button[popovertarget] {
  cursor: pointer;
}

/* small accessibility note (aria-expanded must be managed by browser popover state) */
/* no JS — the browser will manage :popover-open state for the element */

/* Update nav-button to work as both link and button */
.nav-button {
  background: var(--accent) !important;
  border: 2px solid var(--text-main);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem !important;
  font-weight: bold;
  transition: all 0.3s ease;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
}

.nav-button:hover,
.nav-button:focus {
  background: var(--text-main) !important;
  color: var(--bg-main) !important;
}


/* FORM STYLES */
input[type="text"],
input[type="email"],
textarea {
  inline-size: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  box-sizing: border-box;
  margin-block-end: 1rem;
}

button[type="submit"] {
  background: var(--accent);
  color: var(--text-main);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
  background: var(--text-main);
  color: var(--bg-main);
}
/* CONTACT DETAILS
------------------------------------*/
.contact-details {
  text-align: center;
}
.contact-details p {
  margin: 0.5rem 0;
}
.contact-details a {
  color: var(--text-main);
  text-decoration: underline;
}
.contact-details a:hover {
  color: var(--accent);
}

/* ADDITIONAL INFO
------------------------------------*/
.additional-info p {
  margin: 0.5rem 0;
}
.additional-info strong {
  font-weight: bold;
}
.additional-info {
  text-align: center;
}

/* LOGOTYPE ANIMATION */
@keyframes logo-enter {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) rotate(-8deg) scale(0.95);
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  }
  60% {
    transform: translateY(0.25rem) rotate(2deg) scale(1.02);
    opacity: 1;
  }
  to {
    transform: translateY(0) rotate(0) scale(1);
    opacity: 1;
    filter: drop-shadow(0 0.5rem 0.5rem var(--shadow-dark));
  }
}

/* Apply animation to logotype (navbar-brand) on page load */
.navbar-brand {
  will-change: transform, opacity, filter;
  animation: logo-enter 700ms cubic-bezier(.2,.9,.3,1) 120ms both;
  transition: transform 200ms ease, color 200ms ease, filter 200ms ease;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .navbar-brand {
    animation: none;
    transition: none;
  }
}

/* BUTTON HOVER EFFECT (applies to native buttons and branded nav-button) */
button,
input[type="button"],
input[type="submit"],
.nav-button {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}

/* Hover / focus-visible states for buttons */
button:hover,
button:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
.nav-button:hover,
.nav-button:focus-visible {
  transform: translateY(-0.125rem) scale(1.01);
  box-shadow: 0 0.5rem 0.75rem var(--shadow-dark);
  background: color-mix(in srgb, var(--accent) 85%, transparent); /* subtle tint */
  color: var(--bg-card);
}

/* Stronger visible focus for keyboard users */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
.nav-button:focus-visible {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 35%, transparent), 0 0.5rem 0.75rem var(--shadow-dark);
}

/* NAVIGATION LINK HOVER EFFECT */
.navbar-nav a {
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
  will-change: transform, background-color, color;
  border-radius: 0.5rem;
}

/* Hover / focus-visible states for nav links */
.navbar-nav a:hover,
.navbar-nav a:focus-visible {
  transform: translateY(-0.125rem);
  background: var(--accent);
  color: var(--bg-card);
  text-decoration: none;
}

/* Ensure .current still readable */
.navbar-nav .current {
  color: var(--bg-card);
}

/* MEDIA QUERIES FOR LARGER SCREENS */
@media (min-width: 600px) {
  body {
    padding: 2rem 4rem;
  }
  h1 {
    font-size: 2.5rem;
  }
  h2, h3 {
    font-size: 1.5rem;
  }
  p, .program, .location, .date, .key, .highlight, .job-description, .work-history, .school {
    font-size: 1.125rem;
  }
}
@media (min-width: 900px) {
  body {
    padding: 3rem 6rem;
  }
  h1 {
    font-size: 3rem;
  }
  h2, h3 {
    font-size: 1.75rem;
  }
  p, .program, .location, .date, .key, .highlight, .job-description, .work-history, .school {
    font-size: 1.25rem;
  }
}

/* ANIMATIONS — small set of reusable helpers for the animations page */
.animations-grid {
  /* kept consistent with projects container width */
  max-inline-size: 50rem;
  margin-inline: auto;
}

/* animations grid: explicit one-row layout, collapses on mobile */
.animations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns, 1 row */
  grid-template-rows: 1fr;                /* single row */
  gap: var(--grid-gap, 1.5rem);
  max-inline-size: 50rem;
  margin-inline: auto;
  align-items: stretch;
  align-content: stretch;
}

/* mobile collapse */
@media (max-width: 699px) {
  .animations-grid {
    grid-template-columns: 1fr; /* stack to single column */
    grid-auto-rows: auto;
  }
}

/* ensure animations never escape cell */
.anim-cell {
  overflow: hidden;     /* clip visual overflow */
  position: relative;
}

/* ensure shape visuals match site aesthetic and interaction states */
.clip-mask,
.blob,
.blend-shape {
  transition: transform 240ms ease, filter 240ms ease, opacity 240ms ease, box-shadow 240ms ease;
  box-shadow: 0 0.25rem 0.5rem var(--shadow);
  border-radius: 0.75rem;
}

/* subtle lift + stronger shadow on hover/focus for each cell (visual consistency) */
.anim-cell:hover .clip-mask,
.anim-cell:focus-within .clip-mask,
.anim-cell:hover .blob,
.anim-cell:focus-within .blob,
.anim-cell:hover .blend-shape,
.anim-cell:focus-within .blend-shape {
  transform: translateY(-0.35rem) scale(1.02);
  box-shadow: 0 0.75rem 1rem var(--shadow-dark);
  opacity: 1;
}

/* add gentle inset highlight so shapes read like cards */
.clip-mask {
  background: linear-gradient(135deg, var(--accent), var(--accent-lavender));
  box-shadow: inset 0 0.35rem 0.6rem rgba(255,255,255,0.5), 0 0.25rem 0.5rem var(--shadow);
}

.blob {
  background: radial-gradient(circle at 30% 30%, #fff7f0 0%, var(--accent-light-pink) 30%, var(--accent-light-salmon) 70%);
  filter: blur(0.6px) saturate(1);
  box-shadow: inset 0 -0.6rem 1rem rgba(255,255,255,0.12), 0 0.25rem 0.5rem var(--shadow);
}

.blend-shape {
  background: linear-gradient(180deg, var(--accent-tea-green), var(--accent-lavender-blue));
  mix-blend-mode: screen;
  filter: saturate(1.05) contrast(1.02);
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.04);
}

/* keep shapes visually contained and ensure no overflow */
.anim-cell, .anim-inner, .blend-wrap {
  overflow: hidden;
  contain: layout paint;
}

/* actions (buttons/links) — match nav & card hover behavior */
.anim-actions a,
.card-link,
.nav-button,
button[type="submit"] {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-card);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
  box-shadow: 0 0.25rem 0.5rem var(--shadow);
}

/* hover / focus-visible for actions */
.anim-actions a:hover,
.anim-actions a:focus-visible,
.card-link:hover,
.card-link:focus-visible,
.nav-button:hover,
.nav-button:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.75rem 1rem var(--shadow-dark);
  background: var(--text-main);
  color: var(--bg-main);
  outline: none;
}

/* accessible focus ring */
.anim-actions a:focus-visible,
.card-link:focus-visible,
.nav-button:focus-visible,
button[type="submit"]:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--focus-ring), 0 0.75rem 1rem var(--shadow-dark);
}

/* ensure SVGs (if added later) inherit accent and respond to hover */
.anim-cell svg {
  width: 100%;
  height: auto;
  display: block;
  fill: none;
  stroke: var(--text-main);
  transition: stroke 160ms ease, transform 160ms ease, filter 160ms ease;
}

.anim-cell:hover svg,
.anim-cell:focus-within svg {
  stroke: var(--accent);
  transform: translateY(-0.125rem);
}

.project-content { padding: 1rem; }
.svg-demo {
  max-inline-size: 40rem;
  margin-inline: auto;
  background: var(--bg-card);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 0.25rem 0.5rem var(--shadow);
  overflow: hidden;
  display: block;
}
.svg-demo svg {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  transform-origin: center;
  transition: transform 240ms ease, filter 240ms ease;
  filter: drop-shadow(0 0.25rem rgba(0,0,0,0.06));
}
.svg-demo:hover svg,
.svg-demo:focus-within svg {
  transform: translateY(-0.25rem) scale(1.01);
  filter: drop-shadow(0 0.6rem rgba(0,0,0,0.08));
}

/* limit size of linked card images (keeps 16:9 and centers) */
.project-card .card-image-link img {
  inline-size: 100%;
  max-inline-size: 18rem;    /* smaller image size — adjust (e.g. 14rem / 20rem) */
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin-inline: auto;
  border-radius: 0.5rem;
}

/* optionally make it slightly larger on wider screens */
@media (min-width: 900px) {
  .project-card .card-image-link img {
    max-inline-size: 22rem;
  }
}