/* Dark base */
body {
  background: #111;
  color: #e2e2e2;
}

/* Preserve outlined title effect */
.font-outline {
  -webkit-text-stroke: 1px rgba(0,0,0,0.6);
  text-shadow: 0 0 6px rgba(255,255,255,0.15);
}

/* Hover glow effect (replaces Tailwind hover utilities) */
.hover-glow {
  transition: box-shadow .3s, transform .25s;
  box-shadow: 0 0 5px rgba(255,255,255,0.25);
}
.hover-glow:hover {
  box-shadow: 0 0 18px rgba(255,255,255,0.7);
  transform: translateY(-3px);
}

/* Adjust Bulma boxes for darker theme */
.box {
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  color: #e0e0e0;
}

a {
  color: #67b7ff;
}
a:hover {
  color: #9fd3ff;
  text-decoration: underline;
}

/* Tag styling tweak */
.tag {
  background: #242424;
  color: #d8d8d8;
  margin: 0 .4rem .4rem 0;
  border: 1px solid #333;
}
.tag:hover {
  background: #333;
}

/* Headings spacing */
.title + .subtitle {
  margin-top: .5rem;
}

/* Full-bleed hero background with fixed (parallax-like) effect */
.hero.hero-banner {
  position: relative;
  background-image: url("AaronGrad.jpeg"); /* Replace with a wider banner image if you have one */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Parallax feel */
  overflow: hidden;
}

/* White translucent film over the background ONLY */
.hero.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.25); /* Adjust opacity (0.10–0.25) to taste */
  backdrop-filter: brightness(1.05);
  pointer-events: none;
  z-index: 0;
}

/* Keep foreground content above overlay */
.hero.hero-banner .hero-body,
.hero.hero-banner .hero-foot,
.hero.hero-banner .navbar,
.hero.hero-banner .hero-menu-desktop {
  position: relative;
  z-index: 2;
}

/* Ensure avatar + text stand out */
.hero-avatar img {
  position: relative;
  z-index: 2;
}

/* Optional subtle text lift */
.hero.hero-banner h1,
.hero.hero-banner h2 {
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

/* Refined hero menu glass panel */
.hero-foot--wrapper {
  display: flex;
  justify-content: center;
  padding: 0 1rem 1.1rem;
}

.hero-menu-desktop {
  position: relative;
}

.hero-nav {
  display: flex;
  gap: .35rem;
  padding: .55rem .7rem;
  background: linear-gradient(145deg, rgba(20,20,22,0.78), rgba(32,32,36,0.55));
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 46px;
  box-shadow: 0 4px 18px -6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
}

.hero-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .55rem .95rem;
  font-size: .78rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 600;
  color: #d2d2d5;
  border-radius: 28px;
  line-height: 1;
  transition: color .25s, background .35s, box-shadow .35s;
}

.hero-nav a::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg,#5e8dff,#9b60ff);
  opacity: 0;
  transform: scaleX(.25);
  transform-origin: center;
  transition: opacity .35s, transform .35s;
  border-radius: 2px;
}

.hero-nav a:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.05);
}

.hero-nav a.is-active {
  color: #ffffff;
  background: linear-gradient(145deg, rgba(70,70,255,0.18), rgba(150,70,255,0.18));
  box-shadow: 0 0 0 1px rgba(180,180,255,0.18), 0 4px 14px -4px rgba(90,70,255,0.45);
}

.hero-nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Tighten on very wide screens */
@media (min-width: 1600px) {
  .hero-nav {
    padding: .6rem .9rem;
  }
  .hero-nav a {
    font-size: .75rem;
    letter-spacing: .7px;
  }
}

/* Mobile: hide desktop nav (already hidden earlier) */
@media (max-width: 1023px) {
  .hero-nav { display: none; }
}

/* Mobile fallback: disable fixed attachment to avoid jank */
@media (max-width: 768px) {
  .hero.hero-banner {
    background-attachment: scroll;
  }
}

/* Ensure anchor sections have spacing when scrolled to */
section[id] { scroll-margin-top: 70px; }

/* Right-side vertical nav */
.side-nav {
  position: fixed;
  top: 50%;
  right: 2.2vw;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1.1rem .35rem 1.1rem .95rem; /* reduced right padding */
  width: 210px;
  background: linear-gradient(160deg, rgba(25,25,30,0.82), rgba(35,35,40,0.55));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px 0 0 20px;
  box-shadow: 0 6px 28px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03); /* removed purple glow */
  max-height: 70vh;
  overflow: hidden;
  position: relative;
  transition: opacity .35s, visibility .35s, transform .45s;
}

/* Side Nav WRAPPER (controls slide + vertical centering) */
.side-nav-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;          /* vertical centering */
  z-index: 60;
  transition: transform .45s cubic-bezier(.4,.12,.15,.98), opacity .35s;
}

/* Collapsed: leave 18px indicator visible */
.side-nav-wrapper.collapsed {
  transform: translateX(calc(100% - 14px));
  opacity: .65;
}
.side-nav-wrapper.expanded {
  transform: translateX(0);
  opacity: 1;
}

/* Side Nav PANEL (no longer fixed; wrapper handles position) */
.side-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  /* Base padding (collapsed state keeps a little interior space) */
  padding: 1.1rem .3rem 1.1rem .95rem;
  width: 210px;
  max-height: 70vh;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(25,25,30,0.82), rgba(35,35,40,0.55));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px 0 0 20px;
  box-shadow: 0 6px 28px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
  transition: padding .35s;
}

/* Remove right padding when expanded */
.side-nav-wrapper.expanded .side-nav {
  padding-right: 0;             /* flush on the right */
}

/* Indicator strip (teaser when collapsed) */
.side-nav::after {
  content: "";
  position: absolute;
  top: 0;
  right: -14px;
  width: 14px;
  height: 100%;
  background: linear-gradient(180deg,#6a5dff,#9b60ff);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px -2px rgba(120,90,255,0.55);
  opacity: .85;
  transition: opacity .35s, filter .35s;
}
.side-nav-wrapper.expanded .side-nav::after {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}

/* Links: trim right padding further; flush feel when expanded */
.side-nav a {
  position: relative;
  font-size: .78rem;
  letter-spacing: .55px;
  font-weight: 600;
  padding: .55rem .3rem .5rem 1.05rem; /* reduced right padding */
  border-radius: 14px;
  color: #d2d2d6;
  line-height: 1.1;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.side-nav-wrapper.expanded .side-nav a {
  padding-right: .2rem;         /* even tighter when visible */
}

.side-nav a::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: 50%;
  width: 6px;
  height: 6px;
  background: #6e6e75;
  border-radius: 50%;
  transform: translateY(-50%) scale(1);
  transition: background .25s, transform .35s, box-shadow .35s;
}

.side-nav a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.side-nav a.active {
  color: #fff;
  background: linear-gradient(145deg, rgba(85,110,255,0.22), rgba(160,80,255,0.22));
  box-shadow: 0 0 0 1px rgba(160,140,255,0.20), 0 4px 14px -4px rgba(110,80,255,0.55);
}
.side-nav a.active::before {
  background: linear-gradient(135deg,#5e8dff,#b07bff);
  transform: translateY(-50%) scale(1.5);
  box-shadow: 0 0 10px 3px rgba(135,110,255,0.55);
}

@media (max-width: 1023px) {
  .side-nav-wrapper { display: none; }
}

/* Focus */
.using-mouse .side-nav a:focus { outline: none; }
.side-nav a:focus {
  outline: 2px solid #7a5dff;
  outline-offset: 2px;
}

/* Remove old hidden class (deprecated) */
.side-nav.is-hidden-side-nav { /* legacy noop */ }

/* (If not already present) hero banner parallax overlay adjustments */
.hero.hero-banner {
  position: relative;
  background-image: url("AaronGrad.jpeg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}
.hero.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.18);
  backdrop-filter: brightness(1.05);
  z-index: 0;
}
.hero.hero-banner .hero-body,
.hero.hero-banner .hero-foot,
.hero.hero-banner .navbar { position: relative; z-index: 2; }

@media (max-width: 768px) {
  .hero.hero-banner { background-attachment: scroll; }
}

/* Experience (data-driven) */
.experience-card { padding:1.75rem 1.6rem; }
.experience-layout {
  display:flex;
  gap:1.75rem;
  align-items:flex-start;
  flex-wrap:wrap;
}
.experience-media {
  flex:0 0 140px;
  max-width:140px;
  text-align:center;
}
.experience-media img {
  width:140px;
  height:140px;
  object-fit:contain;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:.75rem;
  transition:transform .35s, box-shadow .35s;
}
.experience-media img:hover {
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 0 18px -4px rgba(140,120,255,0.4);
}
.experience-body { flex:1 1 320px; }

.notable-projects {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:.75rem 1rem;
  transition:background .35s, border-color .35s;
}
.notable-projects[open] {
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.15);
}
.notable-projects summary {
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:1.2rem;
  outline:none;
}
.notable-projects summary::marker,
.notable-projects summary::-webkit-details-marker { display:none; }
.notable-projects summary::after {
  content:"+";
  position:absolute;
  right:0;
  top:0;
  font-weight:600;
  transition:transform .35s;
}
.notable-projects[open] summary::after {
  content:"–";
  transform:rotate(180deg);
}
.notable-projects ul {
  margin:0;
  padding-left:1.1rem;
  list-style:disc;
  font-size:.9rem;
  line-height:1.35;
}
.notable-projects li + li { margin-top:.5rem; }

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  border:0;
}

@media (max-width:640px){
  .experience-layout { flex-direction:column; }
  .experience-media img { width:120px; height:120px; }
}

/* Alternating layout: visually swap columns on every other card (desktop) */
.experience-card.alt-right .experience-layout {
  /* keep flex so we can reorder children via order */
}
.experience-card.alt-right .experience-media { order: 2; }
.experience-card.alt-right .experience-body { order: 1; }

/* Optional: subtle alignment tweak when image on right */
.experience-card.alt-right .experience-body { padding-right: .25rem; }
.experience-card:not(.alt-right) .experience-body { padding-left: .0rem; }

@media (max-width: 800px) {
  /* On narrow screens keep a single column for readability */
  .experience-card.alt-right .experience-media,
  .experience-card.alt-right .experience-body { order: initial; }
}

/* Competitions & Extracurricular */
.competition-card { padding:1.5rem 1.4rem; }
.competition-layout {
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
  flex-wrap:wrap;
}
.competition-media {
  flex:0 0 110px;
  max-width:110px;
  text-align:center;
}
.competition-media img {
  width:110px;
  height:110px;
  object-fit:contain;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:.6rem;
  transition:transform .35s, box-shadow .35s;
}
.competition-media img:hover {
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 0 16px -4px rgba(120,110,255,0.45);
}
.competition-body { flex:1 1 320px; }
.comp-link { color:#67b7ff; font-weight:600; }
.comp-link:hover { text-decoration:underline; }
.comp-details {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:.65rem .9rem;
  transition:background .35s, border-color .35s;
}
.comp-details[open] {
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.14);
}
.comp-details summary {
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:1.2rem;
}
.comp-details summary::marker,
.comp-details summary::-webkit-details-marker { display:none; }
.comp-details summary::after {
  content:"+";
  position:absolute;
  right:0;
  top:0;
  font-weight:600;
  transition:transform .35s;
}
.comp-details[open] summary::after {
  content:"–";
  transform:rotate(180deg);
}
.comp-details ul {
  margin:0;
  padding-left:1.05rem;
  list-style:disc;
  font-size:.85rem;
  line-height:1.35;
}
.comp-details ul li + li { margin-top:.4rem; }
.comp-metrics { margin-top:.4rem; }
.comp-metrics li { list-style:circle; }

@media (max-width:640px){
  .competition-layout { flex-direction:column; }
  .competition-media img { width:90px; height:90px; }
}

/* --- SIDE NAV FIX PATCH ---
   Issues: duplicate .side-nav block (old fixed version) leaves top/right/transform causing
   off‑center + gap. We neutralize the old block and tighten edge spacing.
   ACTION: Delete (or comment out) the FIRST ".side-nav { position: fixed; top:50%; right:2.2vw; ... }"
   block that appears under the comment "Right-side vertical nav".
   Keep the wrapper-based version only. Then apply the overrides below.
*/

/* Collapse translation now matches new indicator width (14px instead of 18px) */
.side-nav-wrapper.collapsed {
  transform: translateX(calc(100% - 14px));
}

/* Ensure wrapper still centers vertically */
.side-nav-wrapper {
  top:0;
  bottom:0;
  right:0;
  display:flex;
  align-items:center;
}

/* Reset any legacy fixed positioning properties from the earlier (removed) block */
.side-nav {
  top:auto !important;
  right:auto !important;
  transform:none !important;
  margin:0;
  /* Tighten right padding for flush edge */
  padding:1.1rem 0 1.1rem .9rem; /* right padding = 0 */
  width:210px;
}

/* When expanded keep zero right padding; (already zero, left for clarity) */
.side-nav-wrapper.expanded .side-nav {
  padding-right:0;
}

/* Indicator strip: narrower so less visual gap */
.side-nav::after {
  right:-14px;
  width:14px;
}

/* Optional: if you want absolutely flush (no visual glow “gap”), remove border/right shadow */
.side-nav-wrapper.expanded .side-nav {
  /* Uncomment next line to remove right edge softness completely */
  /* box-shadow: 0 6px 28px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03); */
}

/* Link padding tighten (remove remaining right interior space) */
.side-nav a {
  padding:.55rem .3rem .5rem 1.05rem;
}
.side-nav-wrapper.expanded .side-nav a {
  padding-right:.2rem;
}