:root {
    /*Fonter*/
    --font-primary: "Playfair Display", serif;
    --fw-light: 400;
    --fw-regular: 600;
    --fw-bold: 800;
    --font-secondary: "Open Sans", sans-serif;
    --fw-secondary-regular: 400;
    /*Primär färg*/
    --bs-primary: #e79d8c;
    --bs-secondary: #eebce2;
    --bs-tertiary: #fff3ef;
    --bs-quarternary: #ffe7f9;
    /*--bs-primary-rgb: 231, 220, 255;*/
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

h1, h2, h3, h4 {
    color: #1a1a1a;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    color: #1a1a1a;
}

p {
    color: #1a1a1a;
}

.font-secondary {
    font-family: var(--font-secondary);
    font-weight: var(--fw-secondary-regular);
}

.fw-light-custom {
    font-weight: var(--fw-light);
}

.fw-regular-custom {
    font-weight: var(--fw-regular);
}

.fw-bold-custom {
    font-weight: var(--fw-bold);
}


/*Margin-bottom*/
.mb-6 {
    margin-bottom: 4rem; /* 64px */
}

.mb-7 {
    margin-bottom: 5rem; /* 80px */
}

.mb-8 {
    margin-bottom: 6rem; /* 96px */
}

.mb-9 {
    margin-bottom: 7rem; /* 112px */
}

.mb-10 {
    margin-bottom: 8rem; /* 128px */
}

/*Margin-top*/
.mt-6 {
    margin-top: 4rem; /* 64px */
}

.mt-7 {
    margin-top: 5rem; /* 80px */
}

.mt-8 {
    margin-top: 6rem; /* 96px */
}

.mt-9 {
    margin-top: 7rem; /* 112px */
}

.mt-10 {
    margin-top: 8rem; /* 128px */
}

/*Tar bort rundade hörn på bilder*/
img {
    border-radius: 0 !important;
}

/*Style för knappar*/
.btn {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    background-color: transparent;
    border: 1px double #1a1a1a;
    box-shadow: none;
    color: black;
    border-radius: 0;
    color: #1a1a1a;
}

    .btn:hover,
    .btn:focus,
    .btn:focus-visible {
        background-color: var(--bs-primary);
        border: 1px double #1a1a1a;
    }

    .btn:active,
    .btn.active,
    .btn:active:focus,
    .btn:active:focus-visible {
        background-color: var(--bs-secondary);
        border: 1px double #1a1a1a;
        color: black;
        box-shadow: none;
    }

    


/*Meny*/
.navbar {
    padding: 20px 0;
    background-color: var(--bs-quarternary);
}

.navbar-nav {
    color: #1a1a1a;
}

    .navbar-nav .nav-item {
        display: flex;
        align-items: stretch;
    }

/* Topprad (lås höjd så inget "rycker") */
.navbar-top-row {
    min-height: 72px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Logga absolut centrerad (stannar kvar när collapse öppnas) */
.logo-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.logo-img {
    height: 44px;
    max-width: 100px;
}

.logo-img-big {  
    max-width: 500px;
}


/*Navbar*/
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

.navbar .nav-link {
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    display: block;
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    color: #1a1a1a;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    /* Hover = primary */
    .navbar .nav-link:hover {
        background-color: var(--bs-primary);
        color: var(--bs-tertiary);
    }

    /* Active = secondary */
    .navbar .nav-link.active {
        background-color: var(--bs-secondary) !important;
        color: var(--bs-tertiary);
    }

        /* Active ska inte ändras vid hover */
        .navbar .nav-link.active:hover {
            background-color: var(--bs-secondary) !important;
            color: var(--bs-tertiary);
        }





/*Footer*/
.footer {
    background-color: var(--bs-secondary);
}

    .footer ul li {
        font-family: var(--font-secondary);
        color: #1a1a1a;
    }



    .footer a {
        color: #1a1a1a;
        text-decoration: none;
    }

.form-control {
    border-radius: 0;
    border: none;
    font-family: var(--font-secondary);
}




/*Desktop*/
@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
    #mobileNav {
        display: none !important;
    }

    .navbar {
        padding: 0;       
    }

    .portfolio {
        padding: 0;
    }
   
}


/* Galleri */

.gallery-masonry {
    column-count: 2;
    column-gap: 1rem;
    border-bottom: 1px solid #ddd;
}

.gallery-image {
    width: 100%;
    margin-bottom: 1rem;
    display: block;
    break-inside: avoid;
}


/*Portfolio Details - flytta?*/

.hero-image {
    width: 100%;
}

.project-info {
    max-width: 100%;
}
.tech-badge {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border: 1px solid #ddd;
    color: #111;
    background: #fff;
    font-size: 0.9rem;
    line-height: 1;
}