/* =======================
   Base tokens
======================= */
:root{
  --bg:#0b0f1a;
  --fg:#e6e9f2;
  --muted:#9aa3b2;
  --accent:#5eead4;
  --card:#11172a;
  --header-h:72px;

  /* nav hover colours */
  --gold:#f6d365;
  --gold-hero:#ffffff;
  --gold-ink:#d1aa2d;
}

/* =======================
   Resets / basics
======================= */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--fg);
}
a{ color:inherit; text-decoration:none; }
.section{ padding:64px 20px; max-width:1100px; margin:0 auto; }

h1,h2,h3{ line-height:1.2; }
h1{ font-size:48px; margin:0 0 8px; }
h2{ font-size:32px; margin:0 0 24px; }

/* =======================
   Header / Nav
======================= */
.site-header{
  position:fixed; top:0; left:0; right:0;
  background:transparent; box-shadow:none; z-index:100;
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.nav{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:27px 29px;
}
.nav-links{
  justify-self:center; display:flex; gap:50px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-transform:uppercase; letter-spacing:.05em;
  font-weight:400; font-size:15px;
  transition: color .18s ease;
}
.nav-toggle{ justify-self:end; display:none; background:transparent; border:0; color:var(--fg); font-size:22px; }

/* Colours at top (over hero) */
.site-header:not(.is-scrolled) .nav-links a{ color:var(--gold-hero); }
.site-header:not(.is-scrolled) .nav-links a:hover,
.site-header:not(.is-scrolled) .nav-links a:focus-visible{ color:var(--gold); }

/* After scroll */
.site-header.is-scrolled{
  background:rgba(255,255,255,.98);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,.12);
}
.site-header.is-scrolled .nav-links a,
.site-header.is-scrolled .nav-toggle{ color:#0b0f1a; }
.site-header.is-scrolled .nav-links a:hover,
.site-header.is-scrolled .nav-links a:focus-visible{ color:var(--gold-ink); }

/* Keep burger white on hero */
.site-header .nav-toggle{ color:#fff; }

/* Mobile menu */
@media (max-width:720px){
  .nav{ grid-template-columns:1fr auto; }
  .nav-links{
    display:none; position:absolute; top:56px; left:0; right:0;
    background:rgba(11,15,26,.95);
    padding:12px 20px; flex-direction:column; align-items:center; gap:12px;
    border-top:1px solid #1a2340;
  }
  .nav-toggle{ display:inline-block; }
}

/* Anchor offsets for fixed header */
.section, .hero, #quote, #portfolio, #resume, #about, #contact { scroll-margin-top: var(--header-h); }

/* =======================
   Cards / grid / buttons
======================= */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
.card{ background:var(--card); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.card img{ width:100%; height:180px; object-fit:cover; display:block; }
#portfolio .card img{ height:clamp(220px,26vw,240px); }
.card-body{ padding:16px; }

.btn{ display:inline-block; padding:12px 18px; background:var(--accent); color:#062726; border-radius:12px; font-weight:600; border:0; cursor:pointer; }
.btn-outline{ background:transparent; border:1px solid var(--accent); color:var(--accent); }

/* Neutral grey button style used in the site */
.btn, .btn-outline{
  background:#0b0f1a;
  color:#e6e9f2;
  border:1px solid #1a2340;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.btn-outline{ background:transparent; }
.btn:hover, .btn:focus-visible,
.btn-outline:hover, .btn-outline:focus-visible{
  background:#18223a; border-color:#3a4a78; transform:translateY(-1px); outline:none;
}
.btn:active, .btn-outline:active{ transform:translateY(0); }
.btn[disabled], button[disabled].btn{ opacity:.6; cursor:not-allowed; transform:none; }

/* Force the Portfolio “View” buttons to match the ghost style */
#portfolio .card .btn,
#portfolio .card .btn-outline{
  background:#0f1523 !important;
  color:#e6e9f2 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}
#portfolio .card .btn:hover,
#portfolio .card .btn:focus-visible,
#portfolio .card .btn-outline:hover,
#portfolio .card .btn-outline:focus-visible{
  background:#18223a !important; border-color:#3a4a78 !important; transform:translateY(-1px);
}
#portfolio .card .btn:active,
#portfolio .card .btn-outline:active{ transform:translateY(0); }

/* Make portfolio cards equal height so buttons align */
#portfolio .grid{ grid-auto-rows:1fr; }
#portfolio .card{ height:100%; display:flex; flex-direction:column; }
#portfolio .card-body{ flex:1; display:flex; flex-direction:column; }
#portfolio .card-body .btn{ margin-top:auto; align-self:flex-start; }

/* =======================
   Timeline
======================= */
.timeline .item{ padding:16px; border-left:3px solid #1a2340; margin:0 0 16px; background:#0e1526; border-radius:8px; }
.item-head{ font-weight:600; }
.item-meta{ color:var(--muted); font-size:14px; margin:4px 0 8px; }
.timeline .item .item-points{ margin:8px 0 0; padding-left:18px; color:var(--muted); line-height:1.55; }
.timeline .item .item-points li + li{ margin-top:6px; }

/* =======================
   HERO
======================= */
.hero{
  --hvis:1;
  position:relative; display:grid; place-items:center;
  min-height:100vh; padding:0 20px; overflow:hidden;
}
@supports (height:100svh){ .hero{ min-height:100svh; } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("../img/hero.jpeg") center 32% / cover no-repeat;
  opacity:var(--hvis); transition:opacity .15s linear;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,15,26,.55), rgba(11,15,26,.65));
  opacity:var(--hvis);
}
.hero-inner{ position:relative; z-index:2; text-align:center; transform:translateY(6vh); }
.hero h1{ font-weight:400; }
.hero h1 .accent{ color:#fff; font-weight:300; }

/* =======================
   QUOTE
======================= */
#quote{
  position:relative; max-width:none; width:100%; margin:0; color:#fff;
  min-height:calc(100vh - var(--header-h));
  display:grid; place-items:center; text-align:center; padding:0 20px;
}
@supports (height:100svh){ #quote{ min-height:calc(100svh - var(--header-h)); } }
#quote::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("../img/space.jpg") center / cover no-repeat;
  opacity:var(--qvis,0); transition:opacity .15s linear;
}
#quote::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(11,15,26,1) 0%,
    rgba(11,15,26,.5) 18%,
    rgba(11,15,26,.4) 50%,
    rgba(11,15,26,.5) 82%,
    rgba(11,15,26,1) 100%);
}
#quote .quote-box{ position:relative; z-index:2; max-width:900px; padding:clamp(24px,4vw,40px) 20px; }
#quote figcaption{ color:rgba(230,233,242,.85); }
.hero + #quote{ margin-top:0 !important; }
.quote blockquote{ margin:0; font-size:clamp(22px,3vw,36px); line-height:1.35; font-weight:600; }

/* =======================
   ABOUT
======================= */
#about{
  --edge-a: calc(0.10 + 0.90 * var(--avis, 0));
  --text-base: .30;
  --text-boost: calc(.55 * var(--avis, 0));
  --text-a: calc(var(--text-base) + var(--text-boost));
  --fade-edge: clamp(8%, 10vh, 16%);

  position:relative; max-width:none; width:100%; margin:0;
  min-height:calc(100vh - var(--header-h));
  display:grid; align-items:center;
  padding:clamp(64px,10vh,120px) 0;
  overflow:hidden;
}
@supports (height:100svh){ #about{ min-height:calc(100svh - var(--header-h)); } }

#about::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("../img/code.jpg") center / cover no-repeat;
  opacity:var(--avis,0); transition:opacity .15s linear;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--fade-edge), #000 calc(100% - var(--fade-edge)), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--fade-edge), #000 calc(100% - var(--fade-edge)), transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
#about::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(11,15,26,var(--edge-a)) 0%,
    rgba(11,15,26,0) 28%,
    rgba(11,15,26,0) 72%,
    rgba(11,15,26,var(--edge-a)) 100%);
}

#about .about-grid{ position:relative; z-index:1; max-width:1100px; width:100%; padding:0 20px; margin:0 auto; }
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; align-items:start; gap:clamp(28px,5vw,56px); }

.about-title{ margin:0 0 clamp(20px,2.8vw,40px); font-size:clamp(36px,3.8vw,60px); line-height:1.15; font-weight:300; }
.about-title .accent{ font-weight:800; }

.about-lead{ margin:0 0 10px; font-size:clamp(19px,1.6vw,23px); line-height:1.7; color:var(--fg); font-weight:500; }

#about .about-text{ position:relative; z-index:1; isolation:isolate; margin-top:clamp(26px,5vh,64px); font-size:1.02rem; }
#about .about-text::before{
  content:""; position:absolute; inset:-14px -18px; border-radius:16px;
  background:rgba(11,15,26,var(--text-a)); box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; z-index:-1; transition:background .15s linear;
}
@supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)){
  #about .about-text::before{ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
}
.about-text p{
  max-width:58ch; font-size:clamp(18px,1.45vw,21px); line-height:1.7; color:var(--fg);
  text-shadow:0 1px 2px rgba(0,0,0,.65), 0 10px 32px rgba(0,0,0,.45);
}

.about-media{ margin:0; position:relative; isolation:isolate; }
.about-photo{
  width:100%; max-width:520px; aspect-ratio:4/5; object-fit:cover; justify-self:end;
  border-radius:20px; border:2px solid rgba(255,255,255,.06); box-shadow:0 16px 40px rgba(0,0,0,.35);
}
/* Single, final portrait backdrop (tucked inside the border) */
#about .about-media::before{
  content:""; position:absolute; inset:2px; border-radius:18px;
  background:rgba(11,15,26,var(--text-a)); z-index:-1; box-shadow:none;
}

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .about-photo{ justify-self:center; max-width:560px; }
}

/* Section spacing tweaks */
#resume + #about{ margin-top:clamp(24px,4vh,48px); }
#about + #contact{ margin-top:clamp(24px,4vh,48px); }

/* =======================
   RESUME / Education modules
======================= */
.resume-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); align-items:start; margin-top:12px; }
.resume-subtitle{ margin:0 0 12px; font-size:clamp(18px,1.6vw,22px); color:var(--fg); opacity:.95; }
.resume-col .timeline{ display:grid; gap:14px; }
@media (max-width:900px){ .resume-grid{ grid-template-columns:1fr; } }

.edu-mods{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:12px; }
@media (max-width:1200px){ .edu-mods{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:780px){ .edu-mods{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .edu-mods{ grid-template-columns:1fr; } }

.edu-mods a.mod,.edu-mods .mod{
  display:flex; flex-direction:column; justify-content:space-between;
  background:#0b0f1a; border:1px solid #1a2340; border-radius:12px; padding:12px; min-height:110px;
  color:inherit; text-decoration:none; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .12s ease;
}
.edu-mods .mod.pending{ cursor:default; opacity:.75; }
.edu-mods .mod:not(.pending):hover{ background:#131b2e; border-color:#2a3558; transform:translateY(-1px); }
.mod-head{ font-weight:600; font-size:14px; line-height:1.3; }

.mod-meta{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap; line-height:1; font-size:12px; color:var(--muted);
}
.mod-meta::before{ content:""; width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--accent); }
.mod.complete .mod-meta{ color:var(--accent); }
.mod.pending .mod-meta::before{ background:#7a8193; }

/* Single, final style for education dropdown triggers */
.item details summary.edu-summary{
  display:inline-block; padding:12px 18px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  color:#e6e9f2; font-weight:700; cursor:pointer; user-select:none; list-style:none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease, color .18s ease;
}
.item details summary.edu-summary::-webkit-details-marker{ display:none; }
.item details summary.edu-summary::after{
  content:"▾"; margin-left:8px; opacity:.9; transition:transform .18s ease;
}
.item details[open] summary.edu-summary::after{ transform:rotate(180deg); }
.item details summary.edu-summary:hover{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.28); transform:translateY(-1px);
}
.item details summary.edu-summary:active{ transform:translateY(0); }
.item details summary.edu-summary:focus{ outline:none; }
.item details summary.edu-summary:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.16), 0 8px 28px rgba(0,0,0,.35);
}
.edu-mods-wrap[open] .edu-mods{ margin-top:10px; }

/* =======================
   CONTACT (clean, consolidated)
======================= */
#contact{
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(64px, 12vh, 120px) 0 clamp(56px, 10vh, 96px);
  overflow: hidden;
}

/* Background with scroll-driven opacity via --cvis */
#contact::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:
    linear-gradient(
      to bottom,
      rgba(11,15,26, .95) 0%,
      rgba(11,15,26, .45) 16%,
      rgba(11,15,26,  0) 48%,
      rgba(11,15,26, .55) 82%,
      rgba(11,15,26, .95) 100%
    ),
    url("../img/contact.jpg") center / cover no-repeat;
  opacity: var(--cvis, 0);
  transition: opacity .15s linear;
  pointer-events: none;
}

/* Top fade overlay */
#contact::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(11,15,26,1) 0%,
    rgba(11,15,26,.70) 12%,
    rgba(11,15,26,.40) 26%,
    rgba(11,15,26,0) 46%
  );
}

/* Title: fixed white */
#contact .about-title{
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 300;
  margin: clamp(24px, 10vh, 48px) 0 16px;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}
#contact .about-title .accent{ color:#fff; font-weight:800; }

/* Layout: Form | Socials on desktop, stacked on mobile */
#contact .contact-inner{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;   /* form | socials */
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
  justify-content: center;
}
@media (max-width: 1023px){
  #contact .contact-inner{
    grid-template-columns: 1fr;      /* stack */
    row-gap: 16px;
    justify-items: center;
  }
}

/* Form: wide + centered */
#contact .contact-form{
  width: 100%;
  max-width: 960px;                 /* wide as requested */
  margin: 0 auto;
  display: grid;
  gap: 12px;
  padding: clamp(20px, 3vw, 28px);
  background: rgba(11,15,26,.55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
  #contact .contact-form{
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(11,15,26,.45);
  }
}
#contact .contact-form label{
  display: grid; gap: 6px; font-weight: 600; color: var(--fg);
}
#contact .contact-form input,
#contact .contact-form textarea,
#contact .contact-form button{
  width: 100%;
  box-sizing: border-box;
  background: rgba(14,21,38,.8);
  border: 1px solid #1a2340;
  border-radius: 10px;
  color: var(--fg);
  padding: 12px;
}
@media (max-width: 640px){
  #contact .contact-form{ max-width: 600px; border-radius: 14px; }
  #contact .contact-form textarea{ min-height: 140px; }
}

/* Socials panel (glass) */
#contact .socials-panel{
  align-self: start;
  width: fit-content;
  max-width: 100%;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(11,15,26,.42);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Panel title: "The Socials" */
#contact .socials-title{
  margin: 0 0 10px;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;          /* not too thick */
  letter-spacing: 0;
  text-transform: none;      /* exact casing */
  color: #fff;
}

/* Icons row */
#contact .socials-icons{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Icon tiles — large on desktop */
#contact .socials-panel .social{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.28) inset, 0 8px 24px rgba(0,0,0,.26);
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
#contact .socials-panel .social--wide{   /* YouTube wider */
  width: 145px;
  height: 100px;
}
#contact .socials-panel .social img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#contact .socials-panel .social:hover,
#contact .socials-panel .social:focus-visible{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  outline: none;
}

/* Mobile: panel under form, centered; smaller tiles */
@media (max-width: 1023px){
  #contact .socials-panel{ justify-self: center; margin-top: 6px; }
}
@media (max-width: 640px){
  #contact .socials-title{ text-align: center; }
  #contact .socials-panel .social{ width: 56px; height: 56px; border-radius: 12px; }
  #contact .socials-panel .social--wide{ width: 104px; height: 56px; }
}

/* =======================
   Footer
======================= */
.site-footer{ text-align:center; padding:12px 20px; color:var(--muted); border-top:1px solid #1a2340; margin-top:20px; }
.site-footer p{ margin:0; line-height:1.4; }

/* === Contact form: 50% of current width (was 960px) === */
#contact .contact-form{
  max-width: 480px !important;  /* 50% of 960px */
}

/* Keep the section title centered */
#contact .about-title{
  text-align: center;
}

/* Ensure desktop layout stays: Form | Socials */
@media (min-width: 1024px){
  #contact .contact-inner{
    grid-template-columns: minmax(0, 1fr) auto;  /* form | socials */
    justify-content: center;
    align-items: start;
  }
  #contact .socials-panel{
    justify-self: start;   /* sits to the right of the form */
    margin-top: 0;
  }
}








/* --- Contact layout fix: title spans both columns; socials on the right --- */
@media (min-width: 1024px){
  /* Make the title sit above both columns and stay centered */
  #contact .about-title{
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
  }

  /* Two columns: [FORM | SOCIALS] with comfy gap */
  #contact .contact-inner{
    grid-template-columns: minmax(480px, auto) auto;
    column-gap: clamp(28px, 4vw, 64px);
    align-items: start;
    justify-content: center;
  }

  /* Place form in left column */
  #contact .contact-form{
    grid-column: 1;
    justify-self: end;   /* nudges it toward the center */
  }

  /* Place socials in right column */
  #contact .socials-panel{
    grid-column: 2;
    justify-self: start;
  }
}