:root {
    --primary-color: #f78b00;
    --primary-color-darker-1: #D86000;
    --sp-white: #f2f2f2;
    --sp-black: #151515;
    
    --page-width: 860px;
    --page-width-wide: 1164px;
}

body.page {
    color: var(--sp-white);
    background-color: var(--sp-black);
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------------------------------------------------ */
/*                                                      Links
*/

a,
a:visited {
    text-decoration: none;
    color: #f78b00;
}


a:hover {
    color: var(--primary-color-darker-1);
}

/* ------------------------------------------------------------------------------------------------------------ */
/*                                                      Link-Buttons
*/

a.button {
    /* lägg denna ihop med button sen...*/
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    line-height: 1;
    font-weight: 500;
}

a.button.primary {
    color: var(--sp-black);
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color); /* För att den ska vara lika stor som en secondary */
}

a.button.secondary {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

/* ------------------------------------------------------------------------------------------------------------ */
/*                                                      Headings
*/

h1 {
    font-size: 2.75rem;
    font-weight: 300;
    margin: 2.5rem auto;
}

h2 {
    font-family: inter, Sans-Serif;
    font-size: 1.3rem;
    font-weight: 200;
    letter-spacing: 0.5rem;
    margin-top: 3rem;
    text-transform: uppercase;
}


/* ============================================================================================================ */
/*                                                      Page
/* ============================================================================================================ */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*.content-area {*/
.site-main {
    display: flex;
    flex-grow: 1;
}

/* ============================================================================================================ */
/*                                                      Header
/* ============================================================================================================ */

.site-branding {
    padding-right: 1rem;
    max-width: var(--page-width-wide);
    display: flex;
    justify-content: space-between;
    margin-inline: auto;
}

.custom-logo {
    width: 294px;
}

.site-branding .right-column {
    display: flex;
    gap: 2rem;
    margin-right: 1rem;
}

.main-navigation {
    width: fit-content;
}

.main-navigation a {
    padding: 1rem;
}

/* ------------------------------------------------------------------------------------------------------------ */
/*                                                  language selector
*/

.language-wrapper {
    display: flex;
    align-items: left;
    flex-direction: column;
    justify-content: center;
}

.language-item {
    display: flex;
    position: relative;
    align-items: center;
    width: 40.86; /* uh, gör en bättre lösning om denna ska vara kvar efter WPML*/
}

.language-item p {
    margin: 0;
}

.language-item img {
    object-fit: contain; /* Säkerställer att hela flaggan syns, utan att klippas */
    margin-right: 0.3rem;
}

/* --- Overlay-effekt vid hover --- */
a.language-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sp-black);
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
    z-index: 1;
}

a.language-item:hover::before {
    opacity: 0;
}

a.language-item p {
    color: var(--sp-white);
}

a:hover.language-item p {
    color: var(--sp-white);
}

/* ============================================================================================================ */
/*                                                      Main
/* ============================================================================================================ */

.site-main article {
    max-width: var(--page-width);
    width: 100%;
    margin-inline: auto;
}

.site-main.page-width-wide article {
    max-width: var(--page-width-wide);
}

.site-main.page-full-width article {
    max-width: 100%;
}

.entry-title {
    text-align: center;
}

.entry-content {
/*    max-width: var(--page-width);*/
    margin-inline: auto;
}

.entry-footer {
    max-width: var(--page-width);
    margin-inline: auto;
}

/* ============================================================================================================ */
/*                                                      Footer
/* ============================================================================================================ */

footer {
    margin-top: 3rem;
    border-top: 1px solid var(--sp-white);
    padding-top: 1rem;
    text-align: center;
}

footer .custom-logo {
    width: 200px;
}


footer ul {
    list-style: none;
    margin-inline: 0;
    padding-inline-start: 0;
}

.site-footer {
    padding-right: 1rem;
}

.footer-menus { /* uh, återkom för att styla detta*/
    font-size: 0.85rem;
}

.footer-menus h2 { /* uh, återkom för att styla detta*/
    font-size: 0.85rem;
    margin-top: 0;
    padding: 0.5rem;
    border-bottom: 1px solid var(--sp-white);;
}


/* ============================================================================================================ */
/*                                                  General classes
/* ============================================================================================================ */


.card h2 {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.125em;
    margin-top: 3rem;
    text-transform: uppercase;
}



/* ============================================================================================================ */


.menu a {
    color: var(--sp-white);
}

.menu a:hover {
    color: var(--primary-color-darker-1);
}


.page-width-wide {
    max-width: var(--page-width-wide);
    margin-inline: auto;

}
.space-between {
    display: flex;
    justify-content: space-between;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-inline: auto;
    padding: 5rem 2rem;
}

.row h2 {
    margin-bottom: 2rem;
}

.gap2 {
    width: 100%; /* uh, ologiskt att den ligger i denna klass!!! */
    gap: 2rem;
}

.caption {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.icon {
    width: 24px;
    height 24px;
    fill: #333;
}

.content-width-wide {
    max-width: var(--page-width-wide);
    margin-inline: auto;
    box-sizing: border-box;
    padding-inline: 2rem;

}

/* ============================================================================================================ */
/*                                                  Atomic classes
/* ============================================================================================================ */

.display-none {
    display: none !important;
}

/* ============================================================================================================ */
/*                                          Specific pages and sections
/* ============================================================================================================ */

/* ------------------------------------------------------------------------------------------------------------ */
/*                                           Start page - Our servicves
*/

.our-services-row p {
    text-align: center;
}

.our-services-row {
    background-color: var(--primary-color);
    color: var(--sp-black);
}

.our-services-row a {
    color: var(--sp-black);
}

.our-services-row a:hover {
    color: var(--sp-white);
}

.our-services-row div div {
    width: 21.5rem;
}

/* ------------------------------------------------------------------------------------------------------------ */
/*                                                  Work-with-us
*/

.uh-work-with-us {
    flex-direction: row;
    flex-wrap: wrap;
}

.work-with-us {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 2rem);
    margin: 0 auto;
    box-sizing: border-box;
}

.work-with-us .left-column,
.work-with-us .right-column {
    flex: 1 1 calc(50% - 0.25em); /* gap är 0.5em i wp*/
    box-sizing: border-box;
    min-width: 0; /* Förhindrar innehåll från att "pusha ut" kolumnen */
}

.work-with-us .left-column {
    gap: 2.5rem;
}

.work-with-us .right-column {
    display: flex;
    flex-wrap: wrap;
}

.work-with-us .right-left-column,
.work-with-us .right-right-column {
    flex: 1 1 calc(50% - 1em); /* Tar 50% bredd som standard inuti right-column */
    box-sizing: border-box;
    min-width: 0; /* Förhindrar innehåll från att "pusha ut" kolumnen */
}

.work-with-us .right-left-column {
    display: flex;
    flex-direction: column;
}


.work-with-us .right-right-column {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* MEDIA QUERIES FÖR RESPONSTIVITET */

/*
* Brytpunkt 1: right-right-column faller in under right-left-column
*/
@media (max-width: 1000px) { /* Exempel brytpunkt, justera vid behov */

    .work-with-us .left-column {
        flex: 1 1 calc(70% - 0.25em); /* gap är 0.5em i wp*/
    }
    .work-with-us .right-column {
        flex: 1 1 calc(30% - 0.25em); /* gap är 0.5em i wp*/
    }

    .work-with-us .right-left-column,
    .work-with-us .right-right-column {
        flex: 1 1 60%; /* Båda tar 100% av right-column */
    }
}

/*
* Brytpunkt 2: right-column faller in under left-column
*/
@media (max-width: 550px) { /* Exempel brytpunkt, justera vid behov */
    .work-with-us .left-column,
    .work-with-us .right-column {
        flex: 1 1 100%; /* Båda tar 100% av wrapper */
    }
    .work-with-us .left-column {
        border-right: none; /* Ta bort vertikal avgränsare */
        border-bottom: 1px dashed gray; /* Lägg till horisontell */
    }
}