/*

Theme name: Andrea Bussell website 1.3

*/

body{
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 15px;
    font-family: 'Helvetica Neue', sans-serif;
}

a{
    text-decoration: none;
    color: #000;
}


.cursor {
    animation: blink 0.8s infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

h3 {
  font-family: "GFS Didot", serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 1px;
}

h4 {
    font-weight: 400;
}



.hamburger{
display:none;
flex-direction:column;
gap:4px;
width:20px;
background:none;
border:none;
cursor:pointer;
padding:0;
z-index:1001;
margin-left:auto; /* skjuter den längst till höger */
}

.hamburger span{
display:block;
width:20px;
height:2px;
background:black;
transition:background .3s;
}

.siteHeader.scrolled .hamburger span{
background:white;
}

.mobileMenu{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:black;
display:flex;
justify-content:center;
align-items:center;
opacity:0;
visibility:hidden;
transition:0.4s;
z-index:10000;
}

.mobileMenu.active{
opacity:1;
visibility:visible;
}

/* Flytta endast menyrubrikerna uppåt */
.mobileMenu ul {
    list-style: none;
    text-align: center;
    padding: 0;

    /* Flytta upp menyrubrikerna 100px */
    margin-top: -100px; /* negativ margin flyttar upp */
}

.mobileMenu li{
margin:25px 0;
}

.mobileMenu a{
color:white;
font-size:18px;
text-decoration:none;
}

.closeMenu{
position:absolute;
top:20px;
right:20px;
font-size:20px;
color:white;
background:none;
border:none;
cursor:pointer;
}





.siteHeader {
    position: fixed;
    top: 0;
    z-index: 9999;
    background: #FFF;
    height: 60px;
    transition: background 0.3s ease, color 0.3s ease;
    width: 100vw;
}

.siteHeader .mainNav {
    width: 1200px;
    margin: 0 auto;   /* <-- DETTA centrerar blocket */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Låt logotyp/titel ligga vänster */
    gap: 20px; /* Mellanrum mellan h3 och ul */
}

.siteHeader .mainNav h3{
    font-size: 2em;
    line-height: 0.5em;
}

/* UL-menyn flyttas mot höger */
.siteHeader .mainNav ul {
    list-style: none;
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
    margin-left: auto;        /* <-- detta skjuter menyn till höger */
}



/* Gör så att varje länk har en underline via ::after */
.siteHeader .mainNav ul a {
    position: relative;              /* Viktigt för ::after */
    text-decoration: none;           /* Ta bort standard underline */
    color: inherit;
    transition: color 0.3s ease;
}

/* Underline som pseudo-element */
.siteHeader .mainNav ul a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;                     /* Avstånd från texten */
    width: 100%;
    height: 1px;                       /* tjocklek på linjen */
    background-color: currentColor;    /* matchar textfärg */
    opacity: 0;                        /* startar osynlig */
    transform: scaleX(0);              /* startar ihopskrynklad */
    transform-origin: left;
    transition: opacity 0.3s ease, transform 0.3s ease; /* fade + draw */
}

/* Hover */
.siteHeader .mainNav ul a:hover::after {
    opacity: 1;
    transform: scaleX(1);             /* linjen "dras ut" */
}


/* Standard textfärg */
.siteHeader,
.siteHeader a {
    color: #000;
    transition: color 0s ease;
}

/* När man scrollar */
.siteHeader.scrolled {
    background: #000;
}

/* Ändra ALL text till vit */
.siteHeader.scrolled,
.siteHeader.scrolled a {
    color: #FFF;
}

.siteHeader .socialIcon{
    display: block;
}

.siteHeader .socialIcon i {
    font-size: 24px;
    color: #000; /* svart på vit header */
    transition: color 0.3s ease;
    margin-left: 20px;
}

.siteHeader .socialIcon:hover i {
    opacity: 0.7;
}

.siteHeader.scrolled .socialIcon i {
    color: #fff; /* vit på svart bakgrund */
}

.siteHeader .socialIconMobile i {
    font-size: 24px;
    color: #FFF; /* svart på vit header */
}

.siteHeader.scrolled .socialIconMobile i {
    color: #fff; /* vit på svart bakgrund */
}




.introSection,
.logoSection,
.workSection,
.aboutSection,
.contactSection{
    scroll-margin-top: 60px; /* höjd på header */
}


.introSection{
    padding-bottom: 40px;
    padding-top: 40px;
    height: 40vh;
    padding-top: -80px;
}

.introSection h3{
    font-size: 1.1em;
}

.introSection h1{
    font-size: 5em;
    text-align: left;
    font-weight: 400;
}


.introWrapper {
    display: flex;
    justify-content: left;
    align-items: top;
    width: 1200px;
    margin-left: 50%;
    left:-600px;
    position: relative;
    margin-top: 5vh;
    min-height: 30vh;
}


.logoSection{
    padding-bottom: 40px;
    padding-top: 30px;  
    min-height: 20vh;
}

.logoHeader{
    text-align: center;
    font-size: 1.1em;
    font-weight: 300;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 1px;
    width: 100vw;
    position: relative;
    padding-top: 20px;
}



.logoWrapper {
    display: flex;
    flex-wrap: wrap;           /* Tillåter flera rader */
    justify-content: center;   /* Centrerar loggorna horisontellt */
    column-gap: 100px; /* Avstånd i sidled */
    row-gap: 30px;                /* Avstånd mellan logorna */
    width: 1200px;
    margin-left: 50%;
    left:-600px;
    position: relative;
    margin-top: 10px;
    padding-bottom: 60px;
    border-bottom: 1px solid #000;
}

.logoSingle {
    width: 140px;              /* Fast bredd för att hålla kalkylen ovan */
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 140px;           /* Hindrar loggorna från att växa/krympa */
}

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




.workSection{
    padding-bottom: 60px;
    padding-top: 40px;
    background-color: #000;
    color: #FFF;
    min-height: 90vh;
}

.workSection a{
    color: #FFF;
}

.workHeader{
    text-align: center;
    font-size: 1.1em;
    text-decoration: underline;
    text-underline-offset: 10px;
}


.workWrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 5 kolumner */
    gap: 20px;                               /* Avstånd mellan logorna */
    justify-items: center;                    /* Centrerar logorna i varje cell */
    width: 1200px;
    margin-left: 50%;
    left:-600px;
    position: relative;
    margin-top: 40px;
}

.workSingle{
    width: 300px;
    display: flex;
    justify-content: center;
    
}

.workSingle h3{
    font-size: 1.1em;
    font-weight: 400;
}

.workSingle p{
    font-size: 13px;
}


.workImgContainer{
    width: 300px;
    height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.workImgContainer img{
    min-width: 300px;
    height: auto;
    min-height: 200px;
    
}



.aboutSection{
    padding-bottom: 60px;
    padding-top: 60px;
    background-color: #000;
    color: #FFF;
}

.aboutSection h3{
    font-size: 1.4em;
}

/* Wrapper för hela sektionen */
.aboutWrapper {
    display: flex;
    flex-wrap: wrap;        /* Låter items staplas på små skärmar */
    align-items: center;     /* <-- Vertikal centrering av texten mot bilden */
    justify-content: center;
    gap: 40px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Bilden till vänster */
.aboutImage {
    flex: 0 0 35%;
    max-width: 400px;
}

.aboutImage img {
    width: 100%;
    height: auto;
    display: block;
}

/* Texten till höger */
.aboutContent {
    flex: 1 1 60%;
    min-width: 300px;
}




/* Kontaktsektion */
.contactSection{
    padding: 40px 0;
}

/* Header */
.contactHeader{
    text-align: center;
    font-size: 1.1em;
    text-decoration: underline;
    text-underline-offset: 10px;
    margin-bottom: 40px;
}

/* Wrapper */
.contactWrapper {
    max-width: 800px;
    margin: 0 auto; /* Centrerar wrappern på sidan */
    text-align: center; /* Centrerar innehållet horisontellt */
    display: block; /* Viktigt: inga flex-inställningar */
    padding-bottom: 60px;
}

/* Knappen */
.contactButton {
    background: #FFF;          /* Svart bakgrund */
    color: #000;               /* Vit text */
    padding: 14px 14px;
    width: 200px;
    border: 1px solid #000;    /* Vit kant */
    cursor: pointer;
    font-size: 14px;
    margin-top: 20px;
    transition: background 0.3s ease, color 0.3s ease; /* Fade-effekt */
}

/* Hover-effekt */
.contactButton:hover {
    background: #000;          /* Vit bakgrund */
    color: #FFF;               /* Svart text */
}



/* Overlay */
.contactOverlay {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    text-align: left;
}

/* Aktivt läge */
.contactOverlay.active {
    opacity: 1;
    visibility: visible;
}

/* Innehåll */
.overlayContent {
    color: #fff;
    max-width: 800px;
    width: 90%;
    background: #111;
    padding: 30px;
}

/* Stäng-knapp */
.closeOverlay {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 28px;
    cursor: pointer;
}




#contactForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

#contactForm label {
    font-weight: 400;
}

.contactOverlay h3{
    font-size: 1.4em;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 1px;
}

#contactForm input,
#contactForm textarea {
    padding: 10px;
    font-size: 13px;
    border: 1px solid #ccc;
}

#contactForm textarea {
    resize: vertical;
}

#contactForm button {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    cursor: pointer;
    font-size: 14px;
    width: 200px;
    border: 1px solid #FFF;
    margin: 0 auto;   
}

#contactForm button:hover{
    background: #FFF;
    color: #000;
}




.newsletterSection{
    padding: 40px 0;
    background-color: #FFF;
    color: #000;
}

.newsletterHeader{
    text-align: center;
    font-size: 1.1em;
    text-decoration: underline;
    text-underline-offset: 10px;
    margin-bottom: 40px;
}

.newsletterWrapper {
    max-width: 1200px;
    margin: 0 auto; /* Centrerar wrappern på sidan */
    text-align: center; /* Centrerar innehållet horisontellt */
    display: block; /* Viktigt: inga flex-inställningar */
    padding-top: 40px;
}


/* Form wrapper */
.newsletterForm {
    display: flex;
    flex-direction: column;       /* Staplar wrapper + knapp vertikalt */
    align-items: center;          /* Centrerar innehållet horisontellt */
    gap: 15px;                    /* Avstånd mellan inputs och knapp */
    margin-top: 20px;
}

/* Wrapper för input-fälten */
.newsletterInputs {
    display: flex;
    justify-content: center;   /* Centrerar alla inputar */
    gap: 15px;                 /* Avstånd mellan inputarna */
}

/* Input-fälten */
.newsletterInputs input {
    width: 280px;              /* Fast bredd för varje fält */
    padding: 14px 14px;
    font-size: 14px;
    border: 1px solid #000;
    box-sizing: border-box;
}

/* Knappen */
.newsletterButton {
    margin-top: 20px;
    padding: 14px 14px;
    background: #FFF;
    color: #000;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease, color 0.3s ease;
    border: 1px solid #000;
    width: 200px;
}

.newsletterButton:hover {
    background: #000;
    color: #FFF;
}


/* Footer */
.siteFooter {
    width: 100vw;
    background-color: #FFF;
    color: #000;
}

/* Wrapper */
.siteFooter .footerWrapper {
    width: 1200px;
    margin: 0 auto;             /* centrerar wrappern på sidan */
    display: flex;
    justify-content: center;     /* centrerar innehållet horisontellt */
    align-items: center;         /* centrerar innehållet vertikalt */
    height: 100px;
    border-top: 1px solid #000;
    text-align: center;          /* säkerställer att texten inuti också centreras */
    font-size: 11px;
}

























/* ================== RESPONSIV ================== */

/* Små skärmar: tablets och nedåt */
@media (max-width: 1024px) {


html {
    font-size: 14px;
}


.siteHeader {
    position: fixed;
    top: 0;
    z-index: 9999;
    background: #FFF;
    height: 60px;
    transition: background 0.3s ease, color 0.3s ease;
    width: 100vw;
}

.siteHeader .mainNav {
    width: 90vw;
    margin: 0 auto;   /* <-- DETTA centrerar blocket */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Låt logotyp/titel ligga vänster */

}


.introSection{
    padding-bottom: 30px;
    height: auto;
    padding-top: 100px;
}

.introSection h3{
    font-size: 1.1em;
}

.introSection h1{
    font-size: 2.4em;
    text-align: left;
    font-weight: 400;
}


.introWrapper {
    display: flex;
    justify-content: left;
    align-items: top;
    width: 90vw;
    margin-left: 5vw;
    left:0;
    position: relative;
    margin-top: 0;
    min-height: 25vh;
}


.logoSection{
/*    background-color: #F4F4F4; */
    padding-bottom: 20px;
    padding-top: 20px;  
    min-height: auto;
}





.logoSingle{
    width: 12vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 12vw;           /* Hindrar loggorna från att växa/krympa */
}

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


.logoWrapper {
    display: flex;
    flex-wrap: wrap;           /* Tillåter flera rader */
    justify-content: center;   /* Centrerar loggorna horisontellt */
    column-gap: 6vw; /* Avstånd i sidled */
    row-gap: 4vw;                /* Avstånd mellan logorna */
    width: 90vw;
    margin-left: 5vw;
    left:0;
    position: relative;
    margin-top: 10px;
    padding-bottom: 30px;
    border-bottom: 1px solid #000;
}







.workSection{
    padding-bottom: 60px;
    padding-top: 40px;
    background-color: #000;
    color: #FFF;
    min-height: 90vh;
}

.workSection a{
    color: #FFF;
}

.workHeader{
    text-align: center;
    font-size: 1.1em;
    text-decoration: underline;
    text-underline-offset: 10px;
}


.workWrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);  /* 5 kolumner */
    gap: 20px;                               /* Avstånd mellan logorna */
    justify-items: center;                    /* Centrerar logorna i varje cell */
    width: 100vw;
    margin-left: 0;
    left:0;
    position: relative;
    margin-top: 40px;
}

.workSingle{
    width: 50vw;
    display: flex;
    justify-content: center;
    
}

.workSingle h3{
    font-size: 1em;
    font-weight: 400;
}

.workSingle p{
    font-size: 13px;
}


.workImgContainer{
    width: 90vw;
    height: 60vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.workImgContainer img{
    min-width: 100%;
    height: auto;
    min-height: 66%;
    
}


.aboutSection{
    padding-bottom: 60px;
    padding-top: 20px;
}

.aboutSection h3{
    font-size: 1.4em;
}

/* Wrapper för hela sektionen */
.aboutWrapper {
    display: flex;
    flex-wrap: wrap;        /* Låter items staplas på små skärmar */
    align-items: center;     /* <-- Vertikal centrering av texten mot bilden */
    justify-content: center;
    gap: 40px;
    width: 90%;
    max-width: 90vw;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Bilden till vänster */
.aboutImage {
    flex: 0 0 100%;
    max-width: 100vw;
}

.aboutImage img {
    width: 100%;
    height: auto;
    display: block;
}

/* Texten till höger */
.aboutContent {
    flex: 1 1 60%;
    min-width: 30vw;
}


.contactHeader{
    text-align: center;
    font-size: 1.1em;
    text-decoration: underline;
    text-underline-offset: 10px;
    margin-bottom: 40px;
}


/* Wrapper */
.contactWrapper {
    max-width: 90vw;
    margin: 0 auto; /* Centrerar wrappern på sidan */
    text-align: center; /* Centrerar innehållet horisontellt */
    display: block; /* Viktigt: inga flex-inställningar */
    padding-bottom: 60px;
}

/* Knappen */
.contactButton {
    background: #FFF;          /* Svart bakgrund */
    color: #000;               /* Vit text */
    padding: 14px 14px;
    width: 90vw;
    border: 1px solid #000;    /* Vit kant */
    cursor: pointer;
    font-size: 14px;
    margin-top: 20px;
    transition: background 0.3s ease, color 0.3s ease; /* Fade-effekt */
}

/* Hover-effekt */
.contactButton:hover {
    background: #000;          /* Vit bakgrund */
    color: #FFF;               /* Svart text */
}



/* Overlay */
.contactOverlay {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    text-align: left;
}

/* Aktivt läge */
.contactOverlay.active {
    opacity: 1;
    visibility: visible;
}

/* Innehåll */
.overlayContent {
    color: #fff;
    max-width: 90vw;
    width: 90vw;
    background: #000;
    padding: 5vw;
}

/* Stäng-knapp */
.closeOverlay {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 28px;
    cursor: pointer;
}




#contactForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

#contactForm label {
    font-weight: 400;
}

.contactOverlay h3{
    font-size: 1.4em;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 1px;
}


#contactForm textarea {
    resize: vertical;
}

#contactForm button {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    cursor: pointer;
    font-size: 14px;
    width: 90vw;
    border: 1px solid #FFF;
    margin: 0 auto;   
}


.newsletterSection{
    padding: 40px 0;
}

.newsletterHeader{
    text-align: center;
    font-size: 1.1em;
    text-decoration: underline;
    text-underline-offset: 10px;
    margin-bottom: 40px;
}

.newsletterWrapper {
    max-width: 90vw;
    margin: 0 auto; /* Centrerar wrappern på sidan */
    text-align: center; /* Centrerar innehållet horisontellt */
    display: block; /* Viktigt: inga flex-inställningar */
    padding-top: 40px;
}


/* Form wrapper */
.newsletterForm {
    display: flex;
    flex-direction: column;       /* Staplar wrapper + knapp vertikalt */
    align-items: center;          /* Centrerar innehållet horisontellt */
    gap: 15px;                    /* Avstånd mellan inputs och knapp */
    margin-top: 20px;
}

 /* Stapla input-fälten vertikalt */
    .newsletterInputs {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* Input-fälten fyller nästan hela bredden */
    .newsletterInputs input {
        width: 90vw; /* begränsar på större mobiler */
    }

    /* Knappen fyller samma bredd som input-fälten */
    .newsletterButton {
        width: 90vw;
        max-width: 400px;
    }

.newsletterButton:hover {
    background: #FFF;
    color: #000;
}


/* Footer */
.siteFooter {
    width: 100vw;
    background-color: #000;
    color: #FFF;
}

/* Wrapper */
.siteFooter .footerWrapper {
    width: 100vw;
    margin: 0 auto;             /* centrerar wrappern på sidan */
    display: flex;
    justify-content: center;     /* centrerar innehållet horisontellt */
    align-items: center;         /* centrerar innehållet vertikalt */
    height: 100px;
    border-top: 1px solid #FFF;
    text-align: center;          /* säkerställer att texten inuti också centreras */
    font-size: 11px;
}

  .introWrapper,
    .logoWrapper,
    .workWrapper {
        width: 90vw;      /* gör bredden flexibel */
        margin-left: 5vw; /* centrerar på skärmen */
        left: 0;          /* tar bort hård offset */
        position: relative;
    }

    .newsletterWrapper {
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
}

.introSection {
        height: auto;
        padding-top: 100px; /* behåll avstånd från header */
        padding-bottom: 40px;
    }



}

/* Mindre skärmar: mobil */
@media (max-width: 768px) {

  

.hamburger{
    display:flex;
}

.siteHeader .mainNav ul {
    display: none;
}

.siteHeader .socialIcon {
    display: none;
}


  
}

/* Super små skärmar: mobil portrait */
@media (max-width: 480px) {



}