/* ========== CSS Variables (colors, spacing, radius) ========== */
:root{
  --bg: #7ad6c1;               /* mint green base */
  --bg-hero: #71d0bf;
  --bg-projects: #75d2c0;
  --bg-about: #75d2c0;
  --bg-contact-top: #75d2c0;
  --bg-contact-bottom: #92a6e9; /* indigo/blue gradient */
  --panel: #5aa9a7;             /* frame */
  --panel-dark: #477b83;
  --text: #0e2c2f;
  --text-weak: #13484c;
  --white: #fff;
  --brand-deep: #3f778e;
  --shadow: 0 8px 0 rgba(0,0,0,.25);
  --radius: 14px;
  --gap: 24px;
}

*{ box-sizing:border-box; }
html,body{ height:auto; }
body{
  margin:0;
  font-family:"Jaro", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  position:relative; /* make absolute .decor elements scroll with page */
}
html{ overflow-x:hidden; }
.page-decor{ position:fixed; inset:0; pointer-events:none; z-index:90; }
.page-decor{ position:absolute; inset:0; overflow:hidden; z-index:90; }

p{ font-size:1.25em; }

.container{ width:min(1100px, 92%); margin-inline:auto; }

/* ========== Header ========== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:300;
  background:#3f778e; color:var(--white);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; height:56px; position:relative; }
.brand{ color:var(--white); text-decoration:none; font-weight:800; letter-spacing:.5px; font-size:1.5em; }
.site-title{ position:absolute; left:50%; transform:translateX(-50%); color:#fff; text-decoration:none; font-weight:800; font-size:1.5em; }
.nav{ margin-left:auto; }
.nav a{ color:var(--white); text-decoration:none; margin-left:24px; opacity:.9; font-size:1.5em; }
.nav a:hover{ opacity:1; }
.nav-toggle{ display:none; }

/* ========== Hero ========== */
.hero{ padding:88px 0 32px; background:var(--bg-hero); position:relative; overflow:hidden; }
.hero-video-bg{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.hero-video-bg video{ width:100%; height:100%; object-fit:cover; }
.hero-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(113, 208, 191, 0.7); z-index:2; }
.hero .container{ position:relative; z-index:3; }
.decor{ position:absolute; pointer-events:none; opacity:.9; z-index:100; transform-origin: top left; will-change: transform; }
/* Use 0-edge anchors + translate transforms so offsets don't create horizontal overflow */
.decor-big-black{ width:22vw; left:0; top:32vh; transform:translateX(-50%) translateY(150%) rotate(0deg); }
.decor-big-red{ width:22vw; right:0; top:28vh; transform:translateX(30%) translateY(50%) rotate(-10deg); }
.hero-heading{ text-align:center; margin:0 0 24px; }
.hero-heading h1{ font-size:84px; line-height:1; margin:0 0 6px; color:#ffffff; text-shadow:0 3px 0 rgba(0,0,0,.25); }
.hero-heading h2{ margin:0 0 8px; font-size:42px; }
.hero-heading .role{ margin:.25rem 0 0; font-weight:700; font-size:1.5em; }
.hero-wrap{ display:grid; grid-template-columns: 320px 1fr; gap:40px; align-items:center; }
.hero-copy p{ margin:.5rem 0; max-width:60ch; }
.hero-copy.offset-right{ padding-left:175px; }

.photo-card{ position:relative; }
.photo-card img{ display:block; width:100%; height:auto; }

/* ========== Sections ========== */
.section-title{ font-size:54px; margin:0 0 14px; color:#ffffff; text-shadow:0 3px 0 rgba(0,0,0,.2); }
.section-title.right{ text-align:right; }
.about .section-title.right{ margin-bottom:0; }

/* ========== Projects ========== */
.projects{ padding:56px 0 24px; background:var(--bg-projects); }
.projects{ position:relative; overflow:hidden; }
.projects .container{ position:relative; z-index:1; }
.decor-small-black{ width:18vw; left:0; bottom:0; transform:translateX(-45%) translateY(20%) rotate(0deg); opacity:.9; }
.decor-small-red{ width:20vw; right:0; bottom:18vh; transform:translateX(60%) translateY(-10%) rotate(15deg); opacity:.9; }
.tabs{ display:flex; gap:18px; margin-bottom:14px; }
.projects .section-title{ text-align:center; }
.projects .tabs{ justify-content:center; font-size:1.5em; }
.projects .tab{ font-size:1em; }
.projects .drag-hint{ justify-content:center; font-size:1.5em; }
.projects .drag-hint .hand{ width:33px; height:33px; }
.projects .drag-hint .hand img{ width:33px; height:33px; }
.tab{ background:none; border:none; font:inherit; font-weight:800; color:#2a5b61; opacity:.7; cursor:pointer; padding:6px 2px; }
.tab.active{ opacity:1; text-decoration:underline 3px; text-underline-offset:6px; }

.carousel-frame{ background:#8ac8ce; border-radius:18px; border:8px solid #6c97a7; padding:12px; overflow:hidden; box-shadow:var(--shadow); }
.carousel{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-behavior:auto; cursor:grab; user-select:none; }
.carousel:active{ cursor:grabbing; }
.carousel.dragging{ cursor:grabbing; }
.carousel.hidden{ display:none; }
.card.is-hidden{ display:none !important; }
.card{ flex:0 0 320px; aspect-ratio:1 / 1; border-radius:10px; overflow:hidden; background:#cfe0e4; display:flex; align-items:center; justify-content:center; position:relative; }
.card img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.card video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }

/* Hover overlay for project cards */
.card-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.card:hover .card-overlay{ opacity:1; }
.card-title{ font-weight:800; font-size:1.8em; text-shadow:0 2px 0 rgba(0,0,0,.3); line-height:1; }
.card-subtitle{ margin-top:6px; font-weight:800; font-size:1em; text-shadow:0 1px 0 rgba(0,0,0,.25); }

/* Custom scrollbar styling for the projects carousel */
.carousel{ scrollbar-color:#2a5b61 #6c97a7; scrollbar-width:thin; }
.carousel::-webkit-scrollbar{ height:10px; }
.carousel::-webkit-scrollbar-track{ background:#6c97a7; border-radius:999px; }
.carousel::-webkit-scrollbar-thumb{ background:#2a5b61; border-radius:999px; border:2px solid #6c97a7; }
.carousel::-webkit-scrollbar-thumb:hover{ background:#1f4850; }

.drag-hint{ display:flex; align-items:center; gap:8px; color:#13484c; font-weight:700; margin-top:10px; }
.drag-hint .hand{ width:22px; height:22px; display:inline-block; }
.drag-hint .hand img{ width:22px; height:22px; display:block; }

/* ========== About & Hobbies ========== */
.about{ padding:48px 0; background:var(--bg-about); }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
.hobby{ display:grid; grid-template-columns:100px 1fr; gap:16px; align-items:flex-start; margin:18px 0; }
.hobby img{ width:100px; height:120px; object-fit:cover; border-radius:8px; }
.hobby h3{ font-size:1.5em; line-height:1; margin:0 0 6px; }
/* Nudge first hobby up to align with About text */
.grid-2 > div:nth-child(2) .hobby:first-child{ margin-top:0; }

/* Reverse layout for alternating hobby (Biking) */
.hobby.reverse{ grid-template-columns:1fr 100px; }
.hobby.reverse img{ order:2; justify-self:end; }
.hobby.reverse h3, .hobby.reverse p{ text-align:right; }
.hobby.reverse > div{ align-self:center; justify-self:end; }

/* ========== Contact ========== */
.contact{ padding:48px 0; background:linear-gradient(180deg, var(--bg-contact-top), var(--bg-contact-bottom)); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; }
.contact-form{ display:grid; gap:12px; }
.contact-form label{ display:grid; gap:6px; font-weight:700; }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:none; box-shadow:inset 0 0 0 2px #9bb3da; background:#fff;
}
.btn{ background:#6fb4c1; color:#083b45; border:none; padding:10px 28px; border-radius:20px; font-weight:800; box-shadow:0 6px 0 #4f8f9a; cursor:pointer; }
.btn:active{ transform:translateY(2px); box-shadow:0 4px 0 #4f8f9a; }
.btn:disabled{ opacity:0.6; cursor:not-allowed; }

/* Form Status Messages */
.form-status{
  padding:12px 16px;
  border-radius:8px;
  font-weight:700;
  margin-top:12px;
  text-align:center;
}
.form-status.success{
  background:#d4edda;
  color:#155724;
  border:1px solid #c3e6cb;
}
.form-status.error{
  background:#f8d7da;
  color:#721c24;
  border:1px solid #f5c6cb;
}

.contact-list{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px; }
.contact-list li{ display:flex; align-items:center; gap:10px; }
.contact-list a{ color:#0b3a44; text-decoration:none; font-weight:800; font-size:1.2em; }
.contact-list .icon img{ width:36px; height:36px; display:block; }
.contact-details p{ max-width:38ch; font-weight:700; color:#ffffff; text-shadow:0 2px 0 rgba(0,0,0,.2); font-size:1.5em; }
.contact-details{ padding-top:150px; }

/* ========== Footer ========== */
.site-footer{ background:#3f778e; color:#fff; }
.footer-wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.footer-links a, .socials a{ color:#fff; text-decoration:none; margin-right:18px; font-weight:800; font-size:1.5em; }
.socials a{ margin-right:12px; display:inline-block; background:transparent; width:auto; height:auto; padding:0; }
.socials a img{ height:32px; width:auto; display:block; filter:none; }
.socials a:hover img{ opacity:.85; }

/* ========== Responsive ========== */
@media (max-width: 900px){
  .hero-wrap{ grid-template-columns:1fr; }
  .photo-card{ max-width:320px; }
  .hero-copy.offset-right{ padding-left:0; }
  .grid-2, .contact-grid{ grid-template-columns:1fr; }
  .contact-details{ padding-top:0; }
  .nav{ display:none; }
  .nav-toggle{ display:block; background:none; border:none; color:#fff; font-size:22px; }
}