@charset "utf-8";
@import url("../webfonts/PressStart2P_Regular/PressStart2P.css");
/* CSS Document */

/*
SHUTTER VERTICAL – STYLE:

HEADER
LOGO                         			INFO


email     instagram     plats för annan länk


TEXT 1             TEXT 2             TEXT 3

footer

==================================================

01 RESET
02 ROOT
03 TYPOGRAPHY
04 GLOBAL LAYOUT
05 HEADER
06 SHUTTER STAGE
07 SHUTTER OVERLAY / CONTACT ROW / THREE TEXT
08 FOOTER
09 MEDIA QUERIES


*/

/*==================================================
01 RESET
==================================================*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*==================================================
02 ROOT
==================================================*/
:root{

--header-height:clamp(60px,7vw,88px);

    /* Colors */

--color-black:#000;

--color-white:#fff;

--color-green:#1AFF00;

--color-pink:#FF00C6;

--color-gray:#DFDADA;

/* Layout */

--page-padding:clamp(14px,3vw,40px);

--text-gap:clamp(24px,3vw,60px);

/* Reserverad yta längst ned för Swiperns animerade slide-text */
--shutter-title-space:clamp(110px,15vh,180px);

/* Effects */
--nav-blur: 4px;
--shadow-glitch:2px 2px #FF00C6;

/* Type scale */
--text-xs:clamp(0.65rem, 0.8vw, 0.85rem);
--text-sm:clamp(0.75rem, 1vw, 1rem);
--text-md:clamp(0.9rem, 1.4vw, 1.25rem);
--text-lg:clamp(1.1rem, 2vw, 2rem);
--text-xl:clamp(1.4rem, 3vw, 3rem);
}


/*==================================================
03 TYPOGRAPHY 
==================================================*/

/* Scrollning är tillåten, men själva scrollbar-grafiken döljs. */
html,
body {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* äldre Edge / IE */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;              /* Chrome / Safari / Edge */
}

/* Brödtext */
p {
    color: #FFFFFF;
    font-family: "Source Code Pro";
    font-style: normal;
    font-size:var(--text-base);
    line-height:1.50;
}

a{
color: #FFFFFF;
font-style: italic;	
text-decoration:none;
}

a hover{
 color: #99ffff;
 text-shadow: 3px 3px 1px #ffcc33;

} 

strong{
text-decoration-style: solid; 
}

em{
text-decoration-style:wavy
}


/*==================================================
04 GLOBAL LAYOUT
==================================================*/

html,
body {
    width: 100%;

    height: auto;
    min-height: 100%;

    margin: 0;
    padding: 0;

    display: block;

    overflow-x: hidden;

    /*
    VIKTIGT:
    neutraliserar gamla Swiper-demo-regler
    som centrerade hela sidan.
    */
    justify-content: initial;
    align-items: initial;
}


html {
    scroll-behavior: smooth;
}


body {
    position: relative;

    background: var(--color-black);

    font-family: "Press Start 2P", "Source Code Pro";

    overflow-y: auto;
}

/*==================================================
05 HEADER
==================================================*/
.sticky-nav{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    min-height:var(--header-height);

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding-inline:var(--page-padding);
    padding-top:env(safe-area-inset-top); /* påverkar främst iPhone */

    background:transparent;
    backdrop-filter:blur(var(--nav-blur));

    z-index:9999;

    /* Själva den genomskinliga header-ytan fångar inte klick/swipe. */
    pointer-events:none;
}

/* Endast länkarna/bilderna i headern är klickbara. */
.sticky-nav a{
    pointer-events:auto;
}

.logo img{
    display:block;
    height:clamp(32px,4vw,60px);
    width:auto;
}

.info-btn img{
    display:block;
    height:clamp(18px,2vw,24px);
    width:auto;
}


/*==================================================
06 SHUTTER STAGE
==================================================*/
.shutter-stage{
    position:relative;
    width:100%;

    /* Minst en skärmhöjd, men får växa när texten kräver det. */
    min-height:100vh;

    overflow:visible;
    background:var(--color-black);
}

/* Swipern ligger som ett heltäckande lager bakom den statiska texten. ändra inte! */
.shutter-stage > .swiper{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    z-index:1;
}


/*==================================================
07 SHUTTER OVERLAY / CONTACT / TEXT

==================================================*/
.shutter-overlay{
    position:relative;
    z-index:10;

    width:100%;
    min-height:100vh; /* ---------- kanske ännu bättre?: min-height:0;  ---------- */

    display:flex;
    flex-direction:column;

    /*
  säkerhetsavstånd under den fasta headern.
    */
    padding:
        calc(var(--header-height) + clamp(45px,6vh,85px))
        var(--page-padding)
        var(--shutter-title-space);

    color:var(--color-white);

    pointer-events:none;
}

/* ---------- CONTACT ---------- */

.shutter-contact{
    position:relative;

    display:flex;
    flex-wrap:wrap;
    align-items:center;

    width:100%;

    gap:8px clamp(18px,2vw,35px);

    /*
    Avstånd mellan kontaktfält och brödtexterna.
    */
    margin-bottom:clamp(30px,4vh,55px);

    font-family:"Source Code Pro";
    font-size:var(--text-xs);
    line-height:1.5;
	color: #F5F5F5;
	font-style: normal;
	text-shadow: 3px 3px 3px #99ffff;

    /* Kontaktlänkarna är klickbara. */
    pointer-events:auto;
}


.shutter-contact a{
    color:#F5F5F5;;
    text-decoration:none;
    font-style:normal;
	
}

.shutter-contact a:hover{
     color: #99ffff;
 text-shadow: 3px 3px 1px #ffcc33;
}


/* ---------- THREE TEXTS ---------- */
.shutter-text-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    width:100%;
    height:auto;

    align-items:start;

    gap:var(--text-gap);

    overflow:visible;
}

.shutter-text {
    width:100%;
    min-width:0;

    height:auto;
    min-height:0;

    align-self:start;

    overflow:visible;
}

.shutter-text p {
    display:block;

    position:static;

    width:100%;
    height:auto;
    min-height:0;

    margin:0;

    overflow:visible;
    overflow-wrap:anywhere;
}


/*==================================================
08 FOOTER
==================================================*/
footer{
    position:relative;
    z-index:20;

    width:100%;
    min-height:80px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px var(--page-padding);

    font-family:"Press Start 2P";
    text-align:center;

    background-image:url(../img/glitchanim.gif);
    background-repeat:repeat;

    color:#000000;
    text-shadow:2px 2px 6px #FFF;

    margin-top:0px;
}

footer p{
    margin:0;
    padding:0;

    font-family:"Press Start 2P";
    font-size:x-small;
    text-align:center;

    color:#000000;
    text-shadow:2px 1px 1px #FFF;
    text-transform:uppercase;
    line-height:1.50;
}

footer a{
    color:#aaa;
    text-decoration:none;
}

footer a:hover{
    text-decoration:none;
    color:#aaa;
}


/*==================================================
ÖVER 1200 px
┌────────┬────────┬────────┐
│ TEXT 1 │ TEXT 2 │ TEXT 3 │
└────────┴────────┴────────┘


801–1200 px
┌────────────┬────────────┐
│ TEXT 1     │ TEXT 2     │
├────────────┼────────────┤
│ TEXT 3     │            │
└────────────┴────────────┘


800 px eller mindre
┌─────────────────────────┐
│ TEXT 1                  │
├─────────────────────────┤
│ TEXT 2                  │
├─────────────────────────┤
│ TEXT 3                  │
└─────────────────────────┘
==================================================*/

/*==================================================
09 MEDIA QUERIES
==================================================*/


@media (max-width:1200px) {

    .shutter-text-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(35px, 5vw, 60px);
    }

    .shutter-contact {
        margin-bottom: 35px;
    }

}


/* --------------------------------------------------
LÄGE 3 — TABLET / PHONE
800px och smalare

En kolumn
-------------------------------------------------- */

@media (max-width:800px) {

    .shutter-text-grid {
        grid-template-columns: 1fr;
        gap: clamp(35px, 6vh, 60px);
    }

}


/* --------------------------------------------------
PHONE
600px och smalare

Fortfarande en kolumn.
Här justeras bara padding, kontaktfält,
fontstorlek och avstånd.
-------------------------------------------------- */

@media (max-width:600px) {

    :root {
        --shutter-title-space: clamp(120px, 18vh, 180px);
    }


    .shutter-overlay {
        padding-top:
            calc(var(--header-height) + 45px);

        padding-left: 18px;
        padding-right: 18px;

        padding-bottom:
            var(--shutter-title-space);
    }


    .shutter-contact {
        flex-direction: column;
        align-items: flex-start;

        gap: 5px;

        margin-bottom: 32px;
    }


    .shutter-text-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .shutter-text p {
        font-size: 0.75rem;
        line-height: 1.5;
    }

}


/* --------------------------------------------------
PHONE / SMALL SCREEN IN LANDSCAPE

Det här ligger sist medvetet.
Landscape-reglerna får därför sista ordet
när skärmen är låg.
-------------------------------------------------- */

@media (max-width:1200px) and (max-height:600px) and (orientation:landscape) {

    .shutter-overlay {
        padding-top:
            calc(var(--header-height) + 35px);
    }


    .shutter-contact {
        margin-bottom: 25px;
    }


    .shutter-text-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}

/*==================================================
HEADER RESPONSIVE FIX
==================================================*/

.logo {
    min-width: 0;
    max-width: calc(100% - 70px);
}

.logo img {
    max-width: 100%;
    height: auto;
}

.info-btn {
    flex: 0 0 auto;
}


@media (min-width: 601px) {

    .logo img {
        height: clamp(32px, 4vw, 60px);
        width: auto;
        max-width: min(75vw, 669px);
    }

}


@media (max-width: 600px) {

    .sticky-nav {
        gap: 12px;
    }

    .logo {
        max-width: calc(100% - 62px);
    }

    .logo img {
        width: 100%;
        height: auto;
    }

    .info-btn img {
        height: clamp(18px, 5vw, 24px);
        width: auto;
    }

}