/* Root variables for easy theming */
:root{
    --bg:#000;
    --fg:#fff;
    --muted:#aaa;
    --accent:#fff;
    --gap:5vw;
    --panel-width:100vw;
    --focus: 3px solid #fff;
    /* --vh set from JS on mobile to avoid 100vh issues */
    --vh: 1vh;
}

/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html{font-family:Inter, Arial, sans-serif;font-size:16px}
body{background:var(--bg);color:var(--fg);}

a{color:var(--accent)}

/* Skip link */
.skip-link{
    position:fixed;left:12px;top:12px;padding:8px 12px;background:#111;color:#fff;border-radius:6px;z-index:999;transform:translateY(-120%);transition:transform .2s ease;}
.skip-link:focus{transform:none}

/* <!-- Layouten använder horisontell scroll-snap; snap-stop gör att mobil-swipe stannar vid nästa sektion. --> */
.container{
    display:flex;
    width:100%;
    height:calc(var(--vh, 1vh) * 100);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling: touch;
    position:relative;
    overscroll-behavior-x: contain;
}

.panel{
    width:var(--panel-width);
    min-height:calc(var(--vh, 1vh) * 100);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:var(--gap);
    flex:0 0 var(--panel-width);
    scroll-snap-align:start;
    scroll-snap-stop:always;
    position:relative;
    /* allow internal vertical scrolling for panels with overflowing content */
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}

/* Hero */
.hero{
    background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.85)),
    url("q_profil_bredast.png");
    background-size:cover;
    background-position:center;
}

/* Panels color variants */
.room1{background:#080808}
.room2{background:#111}
.room3{background:#090909}
.room4{background:#151515}
.room5{background:#050505}

h1{font-size:clamp(3rem,8vw,6rem);letter-spacing:2px}
h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:1rem}

.panel p{max-width:700px;text-align:center;line-height:1.6;font-size:1rem;color:var(--muted)}

/* Scroll indicator */
.scroll-indicator{
    position:absolute;bottom:40px;font-size:.9rem;letter-spacing:4px;opacity:.85;background:rgba(0,0,0,.3);padding:6px 12px;border-radius:999px}
.scroll-indicator.hidden{opacity:0;transform:translateY(8px);pointer-events:none}

/* Focus visibility for keyboard users */
.panel:focus{outline:var(--focus);outline-offset:8px}
a:focus{outline:2px dashed var(--accent);outline-offset:4px}

/* Make contact link more visible */
.contact a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--fg);padding-bottom:2px}

/* Responsive tweak */
@media (max-width:600px){
    .panel p{padding:0 8px;font-size:0.95rem}
    .skip-link{left:8px;top:8px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    :root{scroll-behavior:auto}
    .container{scroll-behavior:auto}
}