/* =========================================================================
   ÄNGESKOG AUDIO — Clean Stylesheet (tidy + deduped, same look/behavior)
   ========================================================================= */

/* ========== Theme Tokens ========== */
:root{
  --bg:#0b0c10;
  --text:#e6e6e6;
  --muted:#a3a3a3;
  --brand:#162859;   /* dark blue */
  --brand-2:#4fd1c5; /* teal accent */
  --neon:#ff5e57;    /* neon red for hovers */
  --footer-hover:#3a3d91; /* dark blue with lilac hint */
  --footer-glow:rgba(124,92,255,.55);
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  font:16px/1.6 'Rajdhani',system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Cantarell,Noto Sans,Arial;
  background:#0a0a0f;
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  position:relative;
  padding-top:70px;
}

/* ========== Header (shared) ========== */
header{
  position:fixed; top:0; left:0; right:0;
  z-index:10000 !important; /* ensure above dropdown/content */
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 24px;
  background:rgba(17,19,24,.8);
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  overflow:visible;
}
header::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:12px 12px; mix-blend-mode:overlay;
}

.logo-header{ display:flex; align-items:center; gap:12px; height:60px; min-width:0 }
.logo-header a{ display:flex; align-items:center; height:100% }
.logo-header img{ display:block; height:56px; width:auto; object-fit:contain }
.site-title{
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:20px;
  color:var(--text); text-decoration:none;
  text-shadow:0 0 3px var(--brand-2),0 0 8px var(--brand);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Navigation */
nav{ position:relative; z-index:10001 }
nav ul{
  display:flex; gap:20px; align-items:center;
  margin:0; padding:0; list-style:none;
}
nav a{
  font-family:'Orbitron',sans-serif;
  color:var(--text); text-decoration:none;
  padding:4px 8px; border-radius:6px;
  text-shadow:0 0 6px var(--brand-2),0 0 12px var(--brand);
  transition:all .3s ease;
}
nav a:hover,
nav a:focus-visible{
  color:#fff; text-shadow:0 0 8px var(--neon),0 0 16px var(--neon);
}

/* Hamburger (mobile only) */
.menu-toggle{
  display:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px; color:var(--text);
  padding:8px; cursor:pointer; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.menu-toggle:hover{ box-shadow:0 0 5px var(--neon) }
.menu-toggle:focus-visible{ outline:1.5px solid var(--neon); outline-offset:2px }
.menu-icon{ width:24px; height:18px; position:relative; display:inline-block }
.menu-icon span,
.menu-icon::before,
.menu-icon::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor;
  transition:transform .25s ease, opacity .2s ease;
}
.menu-icon span{ top:8px }
.menu-icon::before{ top:0 }
.menu-icon::after{ bottom:0 }
.menu-toggle[aria-expanded="true"] .menu-icon::before{ transform:translateY(8px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] .menu-icon::after{ transform:translateY(-8px) rotate(-45deg) }
.menu-toggle[aria-expanded="true"] .menu-icon span{ opacity:0 }

/* ========== Main Layout ========== */
main{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding:40px 20px; position:relative; z-index:1;
}

/* Subtle pixel grid background */
.grid-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
}

/* ========== Headings ========== */
h1{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(32px,5vw,60px);
  margin:0;
  color:var(--brand);
  text-shadow:0 0 1px #fff,0 0 6px var(--brand-2),0 0 12px var(--brand);
}
h1 a{ color:inherit; text-decoration:none }

h2{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(18px,2.5vw,28px);
  color:var(--text); letter-spacing:2px; text-transform:uppercase;
  text-shadow:0 0 6px var(--brand-2),0 0 12px var(--brand);
  margin:2px 0 8px;
}
h2.title2{ font-size:clamp(18px,2.5vw,24px) }

main h3{
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(26px,5vw,40px);
  margin:6px 0 15px; color:#fff;
  text-shadow:0 0 6px var(--brand-2),0 0 12px var(--brand);
  text-align:center;
}
.showreel-title{
  text-shadow:0 0 10px var(--brand-2),0 0 18px var(--brand),0 0 28px rgba(79,209,197,.35);
  margin-top:12px;
}

/* Mobile tweaks */
@media (max-width:640px){
  h1{ font-size:clamp(18px,4.6vw,26px) }
  .showreel-title{ margin-top:16px }
  main h3{ font-size:clamp(30px,7vw,48px) }
  .text-bubble{ font-size:14px; margin-top:55px }
}

/* ========== Divider ========== */
.section-divider{
  width:100%; max-width:1100px;
  border:0; height:2px;
  margin:60px auto 44px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%) center/100% 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  box-shadow:0 0 10px rgba(255,255,255,0.06);
}

/* ========== Index Components ========== */
.video-container{
  position:relative; width:100%; max-width:900px; aspect-ratio:16/9;
  overflow:hidden; border-radius:12px; z-index:1;
  box-shadow:0 0 20px rgba(124,92,255,.3);
}
.video-container.showreel{
  box-shadow:
    0 0 12px rgba(22,40,89,.22),
    0 0 24px rgba(22,40,89,.16),
    0 0 8px  rgba(79,209,197,.10);
}
.video-container video{ width:100%; height:100%; border:none; border-radius:12px }

/* ==== Textbubbla (sammanslagen) ==== */
.text-bubble{
  margin-top:35px; margin-bottom:50px; max-width:550px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:20px;
  font-size:16px; line-height:1.6; color:var(--text);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  position:relative; z-index:40;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);

  /* layout (bild + text) */
  display:flex; align-items:center; gap:12px;
}
.text-bubble p{ margin:0; text-align:left }
.text-bubble strong em{ font-weight:700; font-style:italic }
.text-bubble--front{ z-index:40 }

.bubble-img{
  width:100px; height:auto;
  border-radius:8px; flex-shrink:0;
}
@media (max-width:640px){ .bubble-img{ width:70px } }

/* ========== Portfolio Components ========== */
.cards{
  display:grid; grid-template-columns:1fr; gap:60px;
  width:100%; max-width:1100px; margin-top:20px; position:relative; z-index:5;
}
.card{
  display:flex; flex-direction:row; overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.3);
  backdrop-filter:blur(2px); position:relative; z-index:10;
  margin-bottom:20px;
}
.card-header{
  padding:14px 16px;
  font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.5px;
  font-size:26px; text-align:left; width:100%; color:#fff;
}
.video-wrap{ flex:1; min-width:55%; aspect-ratio:16/9; position:relative; z-index:20 }
.video-wrap iframe,
.video-wrap video{ width:100%; height:100%; border:0; display:block; position:relative; z-index:30 }
.card-body{
  flex:1; padding:20px; text-align:left;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:20;
}

.links{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap }
.btn{
  display:inline-block; padding:8px 12px; border-radius:8px; text-decoration:none; color:var(--text);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .15s ease, box-shadow .2s ease, color .2s ease;
  text-shadow:0 0 6px var(--brand-2),0 0 12px var(--brand);
  position:relative; z-index:25;
}
.btn:hover{ transform:translateY(-1px); color:#fff; box-shadow:0 0 2px var(--neon),0 0 4px var(--neon) }

/* ========== About Components ========== */
.about-wrap{
  display:flex; gap:40px; max-width:1100px; width:100%;
  align-items:stretch; margin-top:20px; position:relative; z-index:10;
}
.about-bubble{
  flex:2; max-width:55%; min-height:600px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  text-align:left; display:flex; flex-direction:column; justify-content:flex-start;
  position:relative; z-index:20;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.about-bubble h2{
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(20px,3vw,30px);
  margin:0 0 20px; text-align:center; color:#fff;
  text-shadow:0 0 4px var(--brand-2),0 0 8px var(--brand);
}
.about-bubble p{ margin:6px 0; line-height:1.65 }

.about-img{
  flex:1; min-height:600px; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  position:relative; z-index:20; flex-shrink:0; display:flex;
}
.about-img img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:14px }

/* About: corner icons */
.about-icons{
  position:absolute; top:18px; right:18px;
  display:flex; gap:12px; z-index:30;
}
.about-icons .icon{
  box-shadow:0 0 4px rgba(79,209,197,.25);
  width:38px; height:38px; border-radius:50%;
  border:1.6px solid var(--text);
  display:flex; align-items:center; justify-content:center;
  color:var(--text); text-decoration:none;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
  background:transparent;
}
.about-icons .icon:hover,
.about-icons .icon:focus-visible{
  color:#fff; border-color:var(--brand-2);
  box-shadow:0 0 6px var(--brand-2), 0 0 12px var(--brand);
  transform:translateY(-1px);
  outline:none;
}
.about-icons svg{ width:20px; height:20px; display:block }
.about-icons .linkedin .linkedin-text{
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:15px; color:inherit; line-height:1;
}

/* ========== Footer (shared) ========== */
footer{
  padding:20px 40px;
  display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;
  color:var(--muted); border-top:1px solid rgba(255,255,255,.1);
  position:relative; z-index:5;
}
.footer-center{ text-align:center; font-size:14px; color:var(--text) }
.footer-center a{
  display:block; color:var(--text); text-decoration:none; margin-top:4px;
  transition:color .3s ease, text-shadow .3s ease;
}
.footer-center a:hover{ color:var(--footer-hover); text-shadow:0 0 6px var(--footer-glow) }
.linkedin-link{ font-family:'Orbitron',sans-serif; font-weight:700; margin-top:6px }

/* ========== Responsive ========== */
@media (max-width:800px){
  header{ padding-right:56px }
  .menu-toggle{ display:flex; position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:1002 }
  nav ul{
    position:absolute; top:calc(100% + 6px); right:12px; min-width:190px; margin-top:0;
    display:none; flex-direction:column; align-items:flex-start;
    background:rgba(15,17,22,.97); border:1px solid rgba(255,255,255,.12);
    border-radius:10px; padding:10px; box-shadow:0 10px 24px rgba(0,0,0,.45); z-index:10001;
  }
  nav ul.open{ display:flex }
  nav a{ width:100%; padding:10px 12px }

  .about-wrap{ flex-direction:column; gap:24px }
  .about-bubble{ order:1; min-height:auto; max-width:100% }
  .about-img{ order:2; min-height:auto; max-width:100% }
  .about-img img{ height:auto; max-height:60vh }

  .card{ flex-direction:column }
  .video-wrap{ min-width:100% }
  .text-bubble{ padding:15px }
  h2.title2{ font-size:17px }
}

@media (max-width:640px){
  .logo-header{ gap:10px; height:54px }
  .logo-header img{ height:44px }
  .site-title{ font-size:16px; letter-spacing:.3px }
  .text-bubble{ font-size:15px; margin-top:60px; padding:13px; max-width:95% }
  h1{ font-size:35px }
  .card-header{ font-size:23px }
}

@media (max-width:480px){
  header{ padding-left:16px; padding-right:56px }
  .logo-header{ gap:8px; height:50px }
  .logo-header img{ height:38px }
  .site-title{ font-size:14px }
  .text-bubble{ font-size:14px; margin-top:70px; padding:10px; max-width:90% }
  h1{ font-size:24px }
  h2{ font-size:12px }
  h2.title2{ font-size:11px }
  .card-header{ font-size:21px }

  /* About corner icons: slightly smaller on very small screens */
  .about-icons{ top:14px; right:14px; gap:10px }
  .about-icons .icon{ width:34px; height:34px; box-shadow:0 0 4px rgba(79,209,197,.25) }
  .about-icons svg{ width:18px; height:18px }
  .about-icons .linkedin .linkedin-text{ font-size:13px }
}

@media (max-width:380px){
  .logo-header img{ height:34px }
  .site-title{ font-size:12px; letter-spacing:0 }
}

/* ========== Puls-divider (SVG-baserad) ========== */
.pulse-divider{ max-width:1000px; margin:72px auto }
.pulse-divider svg{ width:100%; height:64px; display:block }
.pulse-divider .line{
  fill:none; stroke:url(#fadeLine); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:url(#glow); vector-effect:non-scaling-stroke; opacity:0.85;
}
.pulse-divider + h3{ margin-top:0 }
main h1{ color:#fff; text-shadow:0 0 6px var(--brand-2), 0 0 12px var(--brand) }

/* Pulse overlay (animated gradient) */
.pulse-divider .line.pulse{
  stroke:url(#pulseGrad);
  stroke-width:2;
  filter:url(#glow-strong);
  opacity:1;
}
/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .pulse-divider .line.pulse{ filter:url(#glow) }
  /* Note: SVG SMIL animation can't be disabled via CSS */
}

.jorge-link,
.jorge-link:visited,
.jorge-link:hover,
.jorge-link:focus{
  color:#3a3d91;
  text-decoration:underline;
}

/* === Audio Bubble (Portfolio) === */
.audio-bubble{
  width:100%; max-width:1100px;
  margin:0 auto 20px;
  display:flex; gap:12px; align-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:16px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  position:relative; z-index:10;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.audio-bubble__icon{
  flex:0 0 auto; display:flex; align-items:center; justify-content:flex-start;
  color:var(--brand-2);
  filter:drop-shadow(0 0 6px rgba(79,209,197,.35));
}
.audio-bubble__icon svg{ max-width:120px; width:100%; height:auto; flex-shrink:0 }
.audio-bubble__content{ flex:1; text-align:left }
.audio-bubble h4{
  margin:0 0 4px;
  font-family:'Rajdhani',sans-serif; font-size:22px; color:#fff;
}
.audio-bubble__sub{ margin:0 0 8px; font-size:14px; color:var(--muted) }
.audio-player{
  width:100%; height:40px; border-radius:8px;
  background:rgba(0,0,0,.2); outline:none;
}
.audio-bubble__links{ margin-top:10px }

@media (max-width:640px){
  .audio-bubble{
    flex-direction:column; align-items:stretch;
    padding:14px; gap:8px;
  }
  .audio-bubble__top-row{ display:flex; align-items:center; gap:10px }
  .audio-bubble__icon{ justify-content:center }
  .audio-bubble__icon svg{ max-width:60px }
  .audio-bubble h4{ font-size:18px; margin:0 }
  .audio-player{ width:100%; border-radius:0; margin:0 }
}

/* ==== Audio-snippets wrapper for Strings of Freedom ==== */
.audio-snippets-wrapper{
  margin-top:24px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; padding:14px 16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.audio-snippets-title{
  font-size:15px; font-weight:500; color:var(--muted);
  margin:0 0 10px; text-align:left;
}
.audio-snippets{ display:flex; flex-direction:column; gap:8px }
.audio-snippets .snippet h4{
  font-size:14px; font-weight:400;
  margin:0 0 2px; color:var(--muted);
}
.audio-snippets audio{ width:100%; height:28px }

/* Aktuell sida */
nav a[aria-current="page"]:not([href="index.html"]){
  color:#fff;
  text-shadow:0 0 8px var(--neon), 0 0 16px var(--neon);
}

/* =========================
   INDEX (home): BG + parallax
   ========================= */
body.home{
  margin:0; padding-top:0;
  position:relative;
  background:#0a0a0f;
}
body.home::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("Background_Pic_1.png") center center / cover no-repeat;
}
body.home header,
body.home main,
body.home footer{ position:relative; z-index:1 }
@media (min-width:641px){
  body.home main{ scroll-margin-top:70px; }
}

/* Thanks page: back-to-home link */
.back-home{ color:var(--footer-hover); text-decoration:underline }
.back-home:hover,
.back-home:focus{ color:var(--footer-hover); text-shadow:0 0 6px var(--footer-glow) }

.frosted-footer{
  background:rgba(255,255,255,.01);
  border-top:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 -6px 22px rgba(0,0,0,.18) inset, 0 6px 22px rgba(0,0,0,.28);
}
/* footer hover – index */
.home .frosted-footer a:hover,
.home .frosted-footer a:focus{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
  border-bottom:none !important;
  background-image:none !important;
  box-shadow:none !important;
}
.home .frosted-footer a::before,
.home .frosted-footer a::after{ content:none !important }
.home .frosted-footer a:hover img,
.home .frosted-footer a:hover svg{
  border-bottom:0 !important; box-shadow:none !important;
}
.home .frosted-footer a:focus-visible{
  outline:2px solid currentColor; outline-offset:2px;
}

/* Spacing: match Portfolio spacing */
main h3 + .cards{ margin-top:35px }
main h3 + .card{ margin-top:35px } /* fallback */

/* Footer link underline/hovers (all pages with frosted footer) */
.frosted-footer .footer-center a{
  text-decoration:none; border-bottom:1px dotted transparent;
}
.frosted-footer .footer-center a:hover,
.frosted-footer .footer-center a:focus{
  color:var(--footer-hover);
  text-shadow:0 0 6px var(--footer-glow);
  border-bottom-color:var(--footer-hover);
}

/* === Dropdown (Portfolio) + Smooth scroll === */
html{ scroll-behavior:smooth }
nav ul li{ position:relative }
nav ul li.has-submenu > a[aria-expanded]{ cursor:pointer }

/* Desktop dropdown (final bridge v4) */
nav ul li .submenu{
  display:none; position:absolute; left:0; top:100% !important;
  min-width:200px; margin:10px 0 0; padding:8px 0;
  list-style:none; z-index:10006;
  background:rgba(0,0,0,.95);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  box-shadow:0 8px 16px rgba(0,0,0,.35), 0 0 12px rgba(79,209,197,.08);
}
nav ul li .submenu li{ display:block }
nav ul li .submenu a{ display:block; padding:10px 14px; white-space:nowrap; font-size:.95em }
nav ul li.has-submenu:hover > .submenu,
nav ul li.has-submenu:focus-within > .submenu{ display:block }
/* Invisible hover bridge above submenu */
nav ul li .submenu::before{
  content:""; position:absolute; left:0; right:0; bottom:100%;
  height:16px; background:transparent; pointer-events:auto;
}
/* Neutralize old bridge approach */
nav ul li.has-submenu::after{ height:0 !important }

/* Mobile/Tablet: submenu inline */
@media (max-width:768px){
  nav ul li .submenu{
    position:static; display:none; margin:0; padding:6px 0;
    background:transparent; border:none; box-shadow:none;
  }
  nav ul li.has-submenu.open > .submenu{ display:block }
}

/* Säkerställ att rubriker med id inte hamnar bakom headern vid hash-scroll */
h3[id]{ scroll-margin-top:110px }
@media (max-width:768px){ h3[id]{ scroll-margin-top:80px } }

/* Contact: textarea auto-size */
.contact-form textarea{
  resize:none;        /* disable drag handle */
  overflow:hidden;    /* no scrollbars, expand instead */
  min-height:6rem;    /* ≈ 6 lines */
  line-height:1.5;
  word-break:break-word;
}

/* ===== Showcase-modifierare (Implementation, Sound Design, Music) ===== */

/* Korten ärver alla .card-regler. Använd .card--showcase för avvikande styling */
.card.card--showcase {
  /* Exempel: annan bakgrund/ram/skugga – kommentera in det du vill
  background: rgba(255,255,255,.035);
  border-color: rgba(79,209,197,.25);
  box-shadow: 0 10px 34px rgba(0,0,0,.36);
  */
  height: auto;
  align-items: center;
}

/* Om du vill styla videowrap/texthuvuden annorlunda för showcase-kort */
.card.card--showcase .video-wrap {
  /* t.ex.
  outline: 0;
  */
}
.card.card--showcase .card-header {
  /* t.ex.
  letter-spacing: 0.6px;
  */
}

/* Ljudbubblor ärver alla .audio-bubble-regler men kan särskiljas här */
.audio-bubble.audio-bubble--showcase {
  /* Exempel:
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
  */
}
.audio-bubble.audio-bubble--showcase h4 {
  /* t.ex.
  text-transform: none;
  */
}