@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Roboto+Slab:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Roboto+Slab:wght@400;700&display=swap');

/* Default theme variables (dark mode) */
:root{
  --dark-900: #1f1f1f;
  --dark-800: #2e2e2e;
  --dark-700: #343434;
  --muted-gray: #bdbdbd;
  --accent: #dedede;
  --link: #e8e8e8;
  --visited: #c6a8ff;
  --white: #ffffff;
  --gap: 1.25rem;
  
  /* Theme-specific variables */
  --bg-primary: var(--dark-800);
  --bg-secondary: var(--dark-900);
  --bg-tertiary: var(--dark-700);
  --text-primary: var(--white);
  --text-secondary: var(--muted-gray);
  --text-accent: var(--accent);
  --link-color: var(--link);
  --link-visited: var(--visited);
  --border-subtle: rgba(255,255,255,0.04);
  --border-medium: rgba(255,255,255,0.08);
  --shadow-color: rgba(0,0,0,0.45);
  --overlay-light: rgba(255,255,255,0.03);
  --overlay-medium: rgba(255,255,255,0.06);
}

/* Light theme variables */
[data-theme="light"]{
  --dark-900: #f5f5f5;
  --dark-800: #ffffff;
  --dark-700: #f0f0f0;
  --muted-gray: #666666;
  --accent: #2d2d2d;
  --link: #0066cc;
  --visited: #6b46c1;
  --white: #1f1f1f;
  
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #f0f0f0;
  --text-primary: #1f1f1f;
  --text-secondary: #666666;
  --text-accent: #2d2d2d;
  --link-color: #0066cc;
  --link-visited: #6b46c1;
  --border-subtle: rgba(0,0,0,0.08);
  --border-medium: rgba(0,0,0,0.15);
  --shadow-color: rgba(0,0,0,0.15);
  --overlay-light: rgba(0,0,0,0.03);
  --overlay-medium: rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html{font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size:16px}
body{margin:0; background:var(--bg-primary); color:var(--text-primary); line-height:1.45; display:flex; flex-direction:column; min-height:100dvh; transition: background-color 0.3s ease, color 0.3s ease}
main{flex:1; width: min(95vw, 1600px); margin:1.25rem auto; padding:0 1.25rem; max-width:none}

.site-header{background:var(--bg-secondary); display:flex; align-items:center; justify-content:space-between; padding:0.8rem 1rem; border-bottom:4px solid var(--border-subtle); gap: 1rem; flex-wrap: wrap}
.brand{color:var(--link-color); font-weight:800; text-decoration:none; font-size:0.95rem}
.brand:focus,.brand:hover{color:var(--text-primary)}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem}
.site-nav a{color:var(--link-color); text-decoration:none; font-size:0.95rem; transition:color 180ms cubic-bezier(.2,.8,.2,1)}
.site-nav a:focus,.site-nav a:hover{color:var(--text-primary)}
.site-nav a[aria-current="page"]{font-weight:700}
.site-header .hamburger, .site-header summary.hamburger{display:none}

footer{background:var(--bg-secondary); padding:0.8rem 1rem; text-align:center; color:var(--text-secondary); border-top:4px solid var(--border-subtle); flex-shrink:0}

.hero{padding:3dvh 0; display:block}
.hero h1{margin:0 0 0.6rem 0; font-size:clamp(1.1rem, 3.2dvw, 2rem); font-family: 'Roboto Slab', 'Times New Roman', serif; color:var(--text-accent)}
.hero .lead{color:var(--text-secondary); max-width:90ch; font-size:clamp(0.95rem, 1rem + 0.4dvw, 1.125rem)}
.cta{margin-top:0.6rem}
.cta a{color:var(--link-color); text-decoration:underline}

/* Theme Toggle Button */
.theme-toggle{
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
  user-select: none;
}
.theme-toggle:hover{
  background: var(--overlay-medium);
  transform: scale(1.05);
}
.theme-toggle:active{
  transform: scale(0.95);
}
.theme-toggle:focus-visible{
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}
.theme-toggle[aria-label]::before{
  content: '🌙';
}
[data-theme="light"] .theme-toggle[aria-label]::before{
  content: '☀️';
}

/* Work Experience  */

.work-list{container: work-list / inline-size; margin-top:1.5rem}
.work-list h3{font-size:1.125rem; margin:0 0 0.8rem 0; color:var(--text-accent)}

.work-list work-experience,
.work-list .work-experience{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  align-items:start;
  padding:1rem 0;
  border-top:1px solid var(--border-subtle);
  background:linear-gradient(180deg, var(--overlay-light), transparent);
  transition:transform .28s ease, box-shadow .28s ease;
  animation: fadeIn .6s ease both;
}

.work-list work-experience:hover,
.work-list .work-experience:hover,
.work-list work-experience:focus-within,
.work-list .work-experience:focus-within{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 10px 30px var(--shadow-color);
}

.work-list work-experience figure,
.work-list .work-experience figure,
.work-list work-experience .thumb,
.work-list .work-experience .thumb{
  margin:0;
  width:160px;
  height:160px;
  min-width:160px;
  min-height:160px;
  border-radius:6px;
  background:var(--accent,#dedede);
  overflow:hidden;
  display:block;
  flex-shrink:0;
}

.work-list work-experience .we-body,
.work-list .work-experience .we-body{min-width:0; width:100%; max-width:none}
.work-list work-experience .we-body *,
.work-list .work-experience .we-body *{max-width:none}
.work-list work-experience .we-body p,
.work-list .work-experience .we-body p,
.work-list work-experience .we-body ul,
.work-list .work-experience .we-body ul{width:100%; max-width:none; overflow-wrap:break-word}
.work-list work-experience .we-body h4,
.work-list .work-experience .we-body h4{margin:0 0 0.25rem 0; color:var(--text-primary); font-size:1.05rem}
.work-list work-experience .we-body .meta,
.work-list .work-experience .we-body .meta{color:var(--text-secondary); font-size:0.9rem; margin-bottom:0.5rem}
.work-list work-experience .we-body ul,
.work-list .work-experience .we-body ul{margin:0; padding-left:1.05rem; color:var(--text-secondary)}

.work-list work-experience:nth-of-type(1), .work-list .work-experience:nth-of-type(1){animation-delay:0s}
.work-list work-experience:nth-of-type(2), .work-list .work-experience:nth-of-type(2){animation-delay:0.06s}
.work-list work-experience:nth-of-type(3), .work-list .work-experience:nth-of-type(3){animation-delay:0.12s}

@media (min-width:50rem){
  .work-list work-experience,
  .work-list .work-experience{grid-template-columns:160px 1fr}
  .work-list work-experience figure,
  .work-list .work-experience figure,
  .work-list work-experience .thumb,
  .work-list .work-experience .thumb{min-height:160px; min-width:160px; height:160px}
  .work-list work-experience > figure, .work-list .work-experience > figure{grid-column:1; grid-row:1; z-index:0; min-width:160px}
  .work-list work-experience > *:not(figure), .work-list .work-experience > *:not(figure){grid-column:2; min-width:0; z-index:1}
}
.work-experience:focus-within{outline:2px solid rgba(200,200,255,0.06); outline-offset:3px}

@media (max-width:799px){
  .work-list {grid-template-columns:1fr; align-items:stretch}
  .site-nav ul{gap:0.6rem}
}

@keyframes fadeIn{
  from{opacity:0; transform: translateY(6px)}
  to{opacity:1; transform: translateY(0)}
}

a{color:var(--link-color)}
a:visited{color:var(--link-visited)}
a:hover,a:focus{color:var(--text-primary)}

.site-nav a:focus-visible{outline:2px solid var(--link-color); outline-offset:3px}

profile-card, .profile-card{display:block; background:var(--bg-tertiary); padding:1rem; border-radius:8px; color:var(--text-secondary)}
profile-card .pc-inner, .profile-card .pc-inner{display:flex; gap:1rem; align-items:center}
profile-card .avatar, .profile-card .avatar{width:64px; height:64px; border-radius:999px; background:var(--overlay-medium); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--link-color); overflow:hidden}
profile-card .avatar img, .profile-card .avatar img{width:64px; height:64px; display:block; object-fit:cover; object-position:center center; border-radius:999px}

ul{padding-left:0}
.tag-list{display:flex; gap:0.5rem; margin-top:0.5rem}
.tag-list button{background:transparent; color:var(--text-secondary); border:1px solid var(--border-medium); padding:0.35rem 0.6rem; border-radius:999px; font-size:0.85rem}

.sidebar-placeholder{background:var(--accent,#dedede); width:240px; height:240px; border-radius:4px}
.contact-side .sidebar-image{display:block; width:100%; height:100%; overflow:hidden; border-radius:4px}
.contact-side .sidebar-image img{width:100%; height:100%; display:block; object-fit:cover; object-position:center center; border-radius:4px}

.contact-grid{display:grid; grid-template-columns:1fr 240px; gap:2rem; align-items:center; justify-content: center; max-width:1100px; margin:0.5rem auto; padding:0 1rem}
.contact-left{min-width:0}

#contactForm{margin:0.75rem 0}
#contactForm{margin:0.75rem 0; max-width:720px}
#contactForm fieldset{background:linear-gradient(180deg, var(--overlay-light), transparent); border:1px solid var(--border-subtle); padding:1.25rem; border-radius:10px; display:grid; gap:var(--gap); grid-template-columns:1fr}
#contactForm legend{color:var(--text-primary); font-weight:700; padding:0 0.25rem}

/* stack labels on top of inputs using grid */
#contactForm label{display:block; margin:0; font-size:0.95rem; color:var(--text-secondary)}
#contactForm input,#contactForm textarea{width:100%; margin-top:0.35rem; padding:0.6rem 0.75rem; background:var(--overlay-light); border:1px solid var(--border-subtle); color:var(--text-primary); border-radius:8px}
#contactForm textarea{resize:vertical}

/* Align the submit button */
#contactForm button{margin-top:0; background:var(--link-color); color:var(--bg-secondary); border:0; padding:0.6rem 0.9rem; border-radius:6px; font-weight:600; cursor:pointer}
#contactForm button:hover{filter:brightness(0.95)}

/* Output elements for error and informational messages */
#contactForm output{display:block; width:100%; margin-top:0.5rem; padding:0.5rem 0.75rem; border-radius:6px; min-height:1.1em; font-size:0.95rem}
#contactForm output.error{color:#ff6b6b; background:rgba(255,60,60,0.08); border:1px solid rgba(255,60,60,0.15)}
#contactForm output.info{color:var(--text-secondary); background:var(--overlay-light); border:1px solid var(--border-subtle)}

/* Validation visuals and accessibility */
/* Add required indicator when label is adjacent to a required control (uses :has()). */
#contactForm label:has(+ input[required])::after,
#contactForm label:has(+ textarea[required])::after{
  content: " *";
  color: #ffb3b3;
  margin-left: 0.25rem;
  font-weight:700;
}

/* Focus and keyboard-visible outlines for high contrast */
#contactForm input:focus, #contactForm textarea:focus{
  outline: none;
  border-color: #9ad6ff;
  box-shadow: 0 0 0 3px rgba(154,214,255,0.06);
}
#contactForm input:focus-visible, #contactForm textarea:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--link,#e8e8e8) 40%, transparent);
  outline-offset: 3px;
}

/* Show invalid state clearly when focused or after interaction */
#contactForm input:invalid, #contactForm textarea:invalid{
  border-color: rgba(255,60,60,0.85);
}
#contactForm input:focus:invalid, #contactForm textarea:focus:invalid{
  box-shadow: 0 0 0 3px rgba(255,60,60,0.06);
}

/* Valid state */
#contactForm input:valid, #contactForm textarea:valid{
  border-color: #6ee7a7;
}

/* Only reveal the outputs once the user is interacting with the form and it's invalid/valid */
/* Hide both by default; reveal based on validity when the user is focused inside the form. */
#contactForm output#errorOutput, #contactForm output#infoOutput{display:none}

/* Show error output when any control is invalid while interacting */
#contactForm:invalid:focus-within output#errorOutput{display:block}

/* Show info output when the form is currently valid while interacting */
#contactForm:valid:focus-within output#infoOutput{display:block}

/* Keep output area from shifting layout */
#contactForm output{transition:opacity .18s ease}

.contact-side .sidebar-placeholder{width:100%; height:100%; min-height:220px}

@media (max-width:799px){
  .contact-grid{grid-template-columns:1fr; gap:1rem}
  .contact-side{order:2}
}

.muted{color:var(--text-secondary)}
.hero h1{color:var(--text-accent)}


.projects-list > li:has(.tag-list){
  padding: 1em;
  margin-bottom: 0.75em;
  border-radius: 6px;
  background: var(--overlay-light);
  transition: transform 180ms ease, background-color 180ms ease;
}
.projects-list > li:has(.tag-list):hover,
.projects-list > li:has(.tag-list):focus-within{
  transform: translateY(-3px);
  background: var(--overlay-medium);
}

.responsive-img{display:block; width:100%; height:auto; max-width:100%; border-radius:8px; object-fit:cover; object-position:center center}
.hero-figure{margin:0 0 1rem 0; overflow:hidden; border-radius:10px}
.project-figure{
  aspect-ratio: 1 / 1;
  width:100%;
  height:auto;
  overflow:hidden;
  border-radius:6px;
  display:block;
  min-width:0;
}
.project-figure img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

.projects-list li{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:stretch;
  min-height:0;
}
.projects-list li > .project-figure,
.projects-list li > figure.project-figure{
  width:160px;
  aspect-ratio:1 / 1;
  height:auto;
  overflow:hidden;
  flex:0 0 160px;
  min-width:160px;
}

@media (min-width:50rem){
  .projects-list li{flex-direction:row; align-items:flex-start; gap:1rem}
  .projects-list li > .project-figure,
  .projects-list li > figure.project-figure{width:160px; flex:0 0 160px; aspect-ratio:1 / 1}
  .projects-list li > *:not(.project-figure){flex:1 1 0; min-width:0}
}

@media (max-width:799px){
  .projects-list li{flex-direction:column}
}

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

.thumb img{width:100%; height:100%; display:block; object-fit:cover; object-position:center center; border-radius:6px}

@media (max-width:799px){
  html{font-size:15px}
  main{width:96vw; margin:0.75rem auto; padding:0 0.75rem}
  .site-header{position:relative; flex-wrap: nowrap}
  .site-nav.desktop{display:none}
  details.site-menu .site-nav.mobile{display:none}
  details.site-menu summary.hamburger{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:6px; background:transparent; border:1px solid var(--border-subtle); color:var(--link-color); cursor:pointer; list-style:none; user-select:none}
  details.site-menu summary.hamburger::-webkit-details-marker{display:none}
  details.site-menu summary.hamburger:active{transform:scale(0.98)}
  details.site-menu[open] .site-nav.mobile{display:block; position:absolute; left:0; right:0; top:100%; background:var(--bg-secondary); padding:0.5rem 1rem; box-shadow:0 12px 30px var(--shadow-color); z-index:40}
  details.site-menu[open] .site-nav.mobile ul{flex-direction:column; gap:0.25rem}
  details.site-menu[open] .site-nav.mobile a{display:block; padding:0.65rem 0.5rem; border-radius:6px}
  .theme-toggle{width:40px; height:40px; font-size:1.1rem; margin-left:auto}
  .hero{padding:3dvh 0}
  .hero .lead{font-size:0.98rem}
  .work-list work-experience, .work-list .work-experience{grid-template-columns:1fr; gap:0.85rem}
  .projects-list li{flex-direction:column}
  .projects-list a, .projects-list button, .site-nav a{padding:0.7rem 0.6rem}
  .contact-grid{grid-template-columns:1fr; padding:0 0.75rem}
  .contact-side{order:2}
  profile-card .avatar, .profile-card .avatar{width:72px; height:72px}
  profile-card .avatar img, .profile-card .avatar img{width:72px; height:72px}
  img, .responsive-img, .thumb img, .project-figure img{max-width:100%; height:auto}
}

@media (min-width:601px) and (max-width:992px){
  html{font-size:15.5px}
  main{width:min(92vw,1100px)}
  .site-nav{display:block}
  .site-nav ul{gap:0.65rem}
  .work-list work-experience, .work-list .work-experience{grid-template-columns:160px 1fr}
  .projects-list li{flex-direction:row}
  .contact-grid{grid-template-columns:1fr 200px}
  img, .responsive-img, .thumb img, .project-figure img{max-width:100%; height:auto}
}

@media (min-width:993px){
  html{font-size:16px}
  main{width:min(95vw,1400px)}
  .site-nav{display:block}
  .site-nav ul{gap:1rem}
  .work-list work-experience, .work-list .work-experience{grid-template-columns:160px 1fr}
  .projects-list li > .project-figure{width:160px; flex:0 0 160px}
  .contact-grid{grid-template-columns:1fr 240px}
}

@media (min-width:800px){
  details.site-menu{display:flex; align-items:center}
  .site-nav.desktop{display:block}
  details.site-menu .site-nav.mobile{display:none}
  details.site-menu .site-nav.mobile ul{display:flex; gap:1rem}
  details.site-menu summary.hamburger{display:none}
}


.thumb img{width:100%; height:100%; display:block; object-fit:cover; object-position:center center; border-radius:6px}

#resumeFrame{
  width:100%;
  height:60vh; /* default for small screens */
  min-height:320px;
  border:0;
  display:block;
}

/* Flash animation used when user types a disallowed character */
.flash{animation:fieldFlash 700ms ease}
@keyframes fieldFlash{
  0%{ box-shadow: 0 0 0 0 rgba(255,60,60,0.0) }
  30%{ box-shadow: 0 0 0 6px rgba(255,60,60,0.16) }
  100%{ box-shadow: none }
}

/* Comments countdown styles */
#commentsCount{display:block; margin-top:0.25rem; font-size:0.9rem}
#commentsCount.warn{color:#ffb3b3; font-weight:700}

@media (min-width:600px){
  #resumeFrame{ height:68vh; }
}

@media (min-width:993px){
  #resumeFrame{ height:75vh; }
}

@media (min-width:1200px){
  #resumeFrame{ height:82vh; }
}

/* Project Cards grid (Part 1) */
.project-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
  align-items: stretch;
  margin-block: 1rem;
}

/* CRUD forms (consistent styling with contact form) */
.crud-form, .crud-form-target{
  margin: 0.75rem 0;
  max-width: 720px;
}
.crud-form fieldset, .crud-form-target{
  background: linear-gradient(180deg, var(--overlay-light), transparent);
  border: 1px solid var(--border-subtle);
  padding: 1.25rem;
  border-radius: 10px;
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
.crud-form legend, .crud-form-target legend{
  color: var(--text-primary);
  font-weight: 700;
  padding: 0 0.25rem;
}
.crud-form label{
  display: block;
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.crud-form input, .crud-form textarea{
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.6rem 0.75rem;
  background: var(--overlay-light);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: 8px;
}
.crud-form textarea{ resize: vertical }
.crud-form button{
  margin-top: 0;
  background: var(--link-color);
  color: var(--bg-secondary);
  border: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.crud-form button:hover{ filter: brightness(0.95) }
.crud-form output{
  display:block;
  width:100%;
  margin-top:0.5rem;
  padding:0.5rem 0.75rem;
  border-radius:6px;
  min-height:1.1em;
  font-size:0.95rem;
}
.crud-form output.error{ color:#ff6b6b; background:rgba(255,60,60,0.08); border:1px solid rgba(255,60,60,0.15) }
.crud-form output.success{ color:#24d17e; background:rgba(36,209,126,0.08); border:1px solid rgba(36,209,126,0.15) }
.crud-form input:focus, .crud-form textarea:focus{
  outline: none;
  border-color: #9ad6ff;
  box-shadow: 0 0 0 3px rgba(154,214,255,0.06);
}
.crud-form input:focus-visible, .crud-form textarea:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--link,#e8e8e8) 40%, transparent);
  outline-offset: 3px;
}
.crud-form input:invalid, .crud-form textarea:invalid{ border-color: rgba(255,60,60,0.85) }
.crud-form input:focus:invalid, .crud-form textarea:focus:invalid{ box-shadow: 0 0 0 3px rgba(255,60,60,0.06) }
.crud-form input:valid, .crud-form textarea:valid{ border-color: #6ee7a7 }

/* ============================================
   View Transition API Styles (MPA-based)
   ============================================ */

/* Default cross-fade transition for page changes */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade out the old page */
::view-transition-old(root) {
  animation-name: fade-out;
}

/* Fade in and slightly scale up the new page */
::view-transition-new(root) {
  animation-name: fade-in-scale;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Optional: Add a subtle slide effect for forward navigation */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation-name: slide-fade-out;
  }
  
  ::view-transition-new(root) {
    animation-name: slide-fade-in;
  }
  
  @keyframes slide-fade-out {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-20px);
    }
  }
  
  @keyframes slide-fade-in {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.1s;
  }
}