/* ================================
   1. GRUNDLÄGGANDE INSTÄLLNINGAR
================================ */

*,
*::before,
*::after {
box-sizing:border-box;
}

img {
max-width:100%;
height:auto;
display:block;
}

:root {
    --header-height: 100px;
}

body {
    margin: 0;
    padding-top: var(--header-height); /*100px; /* GER PLATS ÅT DEN HÖGRE HEADERN */
    font-family: Arial, sans-serif;
    background: #ffffff;
    color: #222;
    line-height: 1.6;
    overflow-x:hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* ================================
   2. HEADER (LÅST RAD MED STÖRRE LOGGA)
================================ */

.site-header {
    background: #ffffff;
    padding: 10px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.logo {
    height: 70px;
    width: auto;
    display: block;
}

.nav {
    display: flex;
}

.nav a {
    color: #0F2E4D;
    text-decoration: none;
    margin-left: 30px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav a:hover {
    color: #1F6FB2;
}

.hamburger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: #0F2E4D;
    user-select: none;
    line-height: 1;
}

.phone-number {
    margin-left: 6px;
    font-weight: 600;
}

.header-phone {
    font-size: 22px;
    text-decoration: none;
    margin-left: 6px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    gap: 10px; /* <--- Detta ger ett proffsigt avstånd */
    font-weight: 600;
    color: #1F6FB2;
}

.header-phone:hover {
    color: #0F2E4D; /* Byter till din mörkare blå vid hovring */
}

.header-phone:hover .phone-icon svg {
    transform: scale(1.1); /* Ikonen växer pyttelite */
    transition: transform 0.2s ease;
}


/* ================================
   3. HERO-SEKTION (STARTSIDA)
================================ */

.hero {
    background: #0F2E4D;
    color: #ffffff;
    padding: 60px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    overflow: hidden; /* <--- NYTT: Säkerställer att inga bilder sticker ut */
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: center;
    
    gap: 80px;
    width: 100%;
}

.hero-text {
    flex: 0 1 auto;
    max-width: 500px;
    z-index: 2;
}

.hero-text h1, .hero-text h2 {
    font-size: 48px;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.subtext {
    font-size: 20px;
    margin-bottom: 30px;
    color: #dbe6f1;
}

.hero-image {
    margin-left: 60px; /* <--- Justera detta tills du är nöjd */
    /*flex: 0 1 auto;*/
    flex: 0 0 auto !important; /* <--- NYTT: Hindrar boxen från att växa/krympa */
    display: flex;
    justify-content: center; /* Centrerar bilden horisontellt */
}
/*
.hero-image img {
    max-width: 100%;
    height: auto;
    max-height: 550px; 
    object-fit: contain;
    border-radius: 12px;
} */


.hero-image img {
    max-width: 250px !important; /* <--- NYTT: Begränsa bredden. Justera denna siffra efter smak */
    height: auto !important; /* <--- NYTT: Behåll proportionerna */
    object-fit: contain; /* <--- NYTT: Säkerställer att bilden inte förvrängs */
}


.small-hero {
    padding: 50px 0;
}

/* Specifik fix för att få bilden på Offert-sidan ännu mindre på datorn */
.hero-image img[alt="Begär offert"] {
    max-width: 175px !important; /* Hälften av 350px (tidigare förslag) */
    height: auto !important;
    display: block;
    margin: 0 auto; /* Centrerar bilden om det behövs */
    object-fit: contain; /* Säkerställer att bilden inte förvrängs */
}

/* ================================
   4. UNDERSIDOR (OM OSS / TEXT)
================================ */

.about-section {
    padding: 60px 0;
    font-size: 18px;
    color: #444;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 60px; /* Justera siffran efter hur mycket luft du vill ha */
}

.lead {
    font-size: 22px;
    color: #0F2E4D;
    font-weight: bold;
    margin-bottom: 25px;
}

.highlight-box {
    background: #f4f7fa;
    border-left: 5px solid #1F6FB2;
    padding: 25px;
    margin: 35px 0;
    font-style: italic;
}

.about-cta {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

/* ================================
   5. KNAPPAR OCH MODULER
=============================== */

.phone-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    /* FIXAR BREDDEN */
    width: auto;               /* Nu med semikolon */
    min-width: 280px;          /* Ger båda knapparna samma basbredd */
    white-space: nowrap;       /* Tvingar texten att stanna på en rad */
    
    min-height: 72px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #0F2E4D, #1F6FB2);
    color: #ffffff;
    padding: 18px 35px;
    border-radius: 50px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/*.cta-buttons {
    display: flex;
    flex-direction: row;      /* Ändrat från column till row */
/*   gap: 10px;               /* Mellanrum mellan knapparna */
/*    align-items: center;     
/*   justify-content: flex-start; /* Ändra till 'center' om du vill ha dem centrerade på datorn */
/*    margin-top: 30px;
} */

.cta-grid {
    display: grid;
    /* Skapar 2 kolumner. 'max-content' gör att de inte blir bredare än den längsta texten */
    /*grid-template-columns: repeat(2, max-content); */
    grid-template-columns: 1fr 1fr;
    gap: 15px;      /* Mellanrum mellan knapparna */
    margin-top: 30px;
    margin-bottom: 60px; /* <--- LÄGG TILL DENNA: Skapar luft ner till footern */
}

.cta-grid .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px; /* Justera padding för att styra knappens "luftighet" */
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap; /* Hindrar texten från att radbrytas */
    width: auto;         /* Viktigt: tar bort eventuell 100% bredd */
}

.phone-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.quote-cta:hover {
    background: #163f61;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* ================================
   6. FOOTER (4 KOLUMNER MED RAMANDE STRECK)
================================ */

.site-footer {
    background: #0F2E4D;
    color: #ffffff;
    padding: 60px 0 20px 0;
    font-size: 15px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    /* TILLÄGG: Övre strecket för att matcha layoutbilden */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 40px;
    margin-bottom: 40px;
}

.footer-section p {
    margin: 5px 0;
    color: #dbe6f1;
    line-height: 1.5;
}

.footer-section strong {
    color: #ffffff;
    font-size: 16px;
    display: block;
    margin-bottom: 12px;
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

.footer-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.footer-link:hover {
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* ================================
   ROT & GRÖN TEKNIK SEKTION
================================ */

.deduction-container {
    display: grid !important;
    grid-template-columns: 1fr; /* Standard: En kolumn för mobil */
    gap: 20px;
    padding: 20px 15px;
    background-color: #fdf2e9;
    border-radius: 15px;
    margin: 40px auto;
    width: 100%;
    box-sizing: border-box;
}

.deduction-card {
    background: #fff5eb;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 10px;
}

.deduction-badge {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 20px;
    position: relative;
}

.badge-rot {
    background-color: #e65100;
    outline: 5px dotted #e65100;
    outline-offset: 5px;
}

.badge-green {
    background-color: #2e7d32;
    outline: 5px dotted #2e7d32;
    outline-offset: 5px;
}

.deduction-card h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #333;
    text-transform: uppercase;
}

.deduction-card .percentage-text {
    font-weight: bold;
    color: #444;
    margin-bottom: 15px;
    display: block;
}


/* ================================
   7. MOBILANPASSNING
================================ */

:root {
    --header-height: 80px;
}

@media (max-width: 768px) {
    
    body {
        padding-top: 90px;
    }
  
   .header-phone {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: center;
        margin-left: 10px;
        font-size: 22px;
        color: #1F6FB2;
        
        /* TILLÄGG: Säkerställer att ikon + text ligger på rad i mobilen */
        display: flex;
        align-items: center;
        gap: 8px;
    }

.phone-number {
    display: none;
}

    /* Tvingar knapparna att staplas på höjden */
/*    .cta-buttons {
        display: flex;
        flex-direction: column; 
        align-items: center;
        gap: 12px; /* Mellanrum mellan knapparna på höjden */
/*        width: 100%;
        margin-top: 20px;
    }

    /* Justerar knapparnas storlek för mobil */
/*    .phone-cta {
        width: 100%;         /* Knappen tar upp tillgänglig bredd */
/*        max-width: 300px;    /* Men blir aldrig bredare än 300px */
/*        min-width: 0;        /* Tar bort datorns min-width */
/*        font-size: 18px;     /* Mindre text så numret får plats */
/*        padding: 12px 20px;  /* Mindre luft inuti knappen */
/*        min-height: 60px;    /* Något lägre höjd */
/*        box-sizing: border-box;
    }
*/
@media (max-width: 768px) {
    /* --- NYTT: Förhindrar svep i sidled --- */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
        position: relative;
    }

    body {
        padding-top: 90px;
        margin: 0; /* Säkerställer att inga dolda marginaler spökar */
    }

.cta-grid {
        display: grid;
        grid-template-columns: 1fr; /* Tvingar knapparna att staplas */
        justify-items: center;      /* Centrerar knapparna horisontellt */
/*        gap: 12px;                  /* Mellanrum mellan knapparna */
        row-gap: 12px; 
        width: 100%;
        margin-top: 20px;
        margin-bottom: 40px; /* <--- LÄGG TILL DENNA: Luft ner till footern i mobilvyn */
    }

    /* Styrning för knapparna inuti griddet */
    .cta-grid a {
        width: 100%;             /* Gör att knappen fyller bredden... */
        max-width: 320px;        /* ...men stannar vid en bra läsbredd */
        font-size: 18px;
        padding: 15px 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }


    .header-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
}

   /* .header-container a {
        grid-column: 2;
        justify-self: center;
    } */

    .logo {
        height: 74px;
    }

    .logo-link {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    
    .hamburger {
    display: block;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    transform: translateY(-2px);
}

    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        padding: 0; /* Vi sköter luften i .hero istället */
    }

    .hero-text h1, .hero-text h2 {
        font-size: 28px;
        line-height: 1.2; /* Ger bättre läsbarhet på mobilen */
    }
    
    .hero {
        padding: 40px 20px !important;
    }

    .hero-image img {
        max-height: 260px;
        margin-top: -10px;
    }
    
    .hero-image img[alt="Begär offert"] {
        max-width: 100% !important; /* Tillåt bilden att fylla bredden i mobilen */
        max-height: 250px !important; /* Men begränsa höjden så den inte tar över */
    }
    
    .nav {
        display: none; 
        flex-direction: column;
        width: auto;
        min-width: 220px;
        background: #ffffff;
        position: absolute;
        top: 100%;
        right: 20px;
        padding: 10px 0;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        z-index: 1001;
    }

    .nav.nav-open {
        display: flex !important;
    }

    .nav a {
        margin: 0;
        padding: 18px 22px; 
        border-bottom: 1px solid #eee;
        font-size: 17px;
    }

    .nav a:last-child {
        border-bottom: none;
    }

   .footer-content {
        grid-template-columns: 1fr 1fr;
        text-align: left;
        gap: 20px; /* Minska gapet något för att spara plats */
        padding: 30px 15px; /* Lägg till lite luft på sidorna */
        word-break: break-all; /* Tvingar långa e-postadresser att brytas */
    }
}
/* Mobilanpassning för ROT-boxarna - tvingar dem att staplas och fylla bredden */
   /* DATOR-JUSTERING FÖR ROT-BOXAR (Över 768px) */
@media (min-width: 769px) {
    .deduction-container {
        grid-template-columns: 1fr 1fr !important; /* Två kolumner på dator */
        padding: 40px 30px;
        gap: 30px;
    }
    .deduction-card {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* --- SPECIFIK FIX FÖR BILDEN VID TEXTEN --- */

/* På datorn: Tvinga bilden att vara liten */
@media (min-width: 769px) {
    .content-side-image {
        flex: 0 0 320px !important;
        width: 320px !important;
        max-width: 320px !important;
        display: flex !important;
        align-self: flex-start !important;
    }
    .content-side-image img {
        width: 100% !important;
        max-width: 320px !important;
    }
}

/* På mobilen: Låt bilden ta plats */
@media (max-width: 768px) {
    .content-side-image {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .content-side-image img {
        max-width: 100% !important;
    }
}


/* ================================
   8. INFO-BOX & MYNDIGHETSVERIFIERING (UPPDATERAD)
================================ */

/* Den gråa huvudboxen */
.info-wrapper {
    width: min(1100px, 100%);
    margin: 0 auto;
    background-color: #f3f6fb;
    padding: 50px 30px 10px 30px; /* Sänkt till 10px i botten */
    border-radius: 12px;
    text-align: center;
}

/* Den vita inre boxen för Elsäkerhetsverket */
.authority-badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 6px solid #0F2E4D;
    padding: 25px;
    /* Ändra från 30px till 20px för att tajta till det mellan boxarna */
    margin: 20px auto 0; 
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 25px;
    text-align: left;
    max-width: 900px;
}

/* Specifik justering för den FÖRSTA badgen i info-wrapper */
.info-wrapper .authority-badge:first-of-type {
    margin-top: 30px; /* Behåller lite mer luft mot texten ovanför */
}

/* Specifik justering för den SISTA badgen för att minska gapet neråt */
.info-wrapper .authority-badge:last-of-type {
    margin-bottom: 0 !important;
}

.authority-badge img {
    max-width: 180px;
    height: auto;
    flex-shrink: 0;
}

.authority-badge p {
    margin: 0;
    color: #444;
    font-size: 15px;
    line-height: 1.5;
}

/* Mobilanpassning för boxen */
@media (max-width: 768px) {
    .info-wrapper {
        /* Minska sista nollan till t.ex. 20px om du vill ha lite luft kvar */
        padding: 40px 20px 20px 20px; 
    }
    .authority-badge {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
        margin-top: 15px; /* Något mindre avstånd mellan boxarna i mobilen */
    }
}

/* ================================
   TRUST BAR
================================ */

.trust-bar {

background:#f4f7fa;
border-top:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;

padding:18px 0;

}

.trust-bar p {

margin:0;
text-align:center;

font-size:15px;
color:#444;

letter-spacing:0.3px;
line-height:1.6;

}

.trust-list {

display:flex;
justify-content:center;
gap:40px;

list-style:none;
padding:0;
margin:0;

font-size:15px;

}

@media (max-width:700px){

.trust-list{

flex-direction:column;
gap:8px;

}

}

.intro-text {
padding:30px 0;
text-align:center;
font-size:16px;
}

/* OFFERTFORM */

.offert-form{
max-width:800px;
margin:auto;
}



/* OFFERT LAYOUT */

.offert-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;
}

.offert-info{
font-size:18px;
max-width: 620px;
}

.offert-form-wrapper{
background:#f7f7f7;
padding:40px;
border-radius:10px;
}

/* FORM */

.offert-form{
max-width:100%;
}

.form-row{
margin-bottom:20px;
}

.form-row label{
display:block;
margin-bottom:8px;
font-weight:600;
}

.form-row input,
.form-row select,
.form-row textarea{
width:100%;
padding:14px;
border:1px solid #ddd;
border-radius:8px;
font-size:16px;
box-sizing:border-box;
}

.form-row textarea{
min-height:180px;
resize:vertical;
}

.form-row.two{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

/* MOBIL */

@media (max-width:900px){

.offert-grid{
grid-template-columns:1fr;
}

.form-row.two{
grid-template-columns:1fr;
}

}

.content-image{

width:100%;
max-width:900px;

display:block;
margin:40px auto;

border-radius:10px;

}

/* BILD + TEXT LAYOUT */

.content-grid{
display:grid;
margin-top:40px;
grid-template-columns:1fr 1.2fr;
gap:40px;
align-items:start;
}

.content-image-side img{
width:100%;
border-radius:10px;
}

/* mobil */

@media (max-width:900px){

.content-grid{
grid-template-columns:1fr;
}

}

.trust-box{

background:#f5f7fa;
border-left:5px solid #0F2E4D;

padding:20px 25px;
margin:30px 0;

border-radius:6px;

}

.trust-box ul{
margin-top:10px;
}

.cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
}

.jour {
    display: none !important;
}


/* CSS FÖR SIDAN TJÄNSTER */

/* Bakgrund för hela sektionen */
.image-grid-section {
    background-color: #f9f9f9; /* Ljusgrå bakgrund */
    padding: 60px 0;
}

/* Gridsystemet: 4 kolumner på desktop */
.service-grid {
    display: grid;
    /* Tvingar fram exakt 4 kolumner som är lika breda */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    align-items: start; /* Hindrar korten från att töjas ut på höjden */
    margin-top: 20px;
}

/* Styling för varje kort */
.service-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    height: 100%; /* Gör att alla kort på samma rad blir lika höga */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.15);
}

/* Bildhantering */
.image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* Eller 4 / 3 beroende på vad du föredrar */
    overflow: hidden;
    background: #eee;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ser till att bilden fyller ut utan att förvrängas */
    display: block;
}

.card-content {
    padding: 15px;
    text-align: center;
}

.card-content h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Responsivitet: 2 kolumner på surfplatta, 1 på mobil */
@media (max-width: 1024px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolumner på surfplatta */
    }
}

@media (max-width: 600px) {
    .service-grid {
        grid-template-columns: 1fr; /* 1 kolumn på mobil */
    }
}

/* ================================
   DEN DEFINITIVA MOBILFIXEN
================================ */

@media (max-width: 768px) {
    /* Tvingar offert-griddet att bli en enda kolumn */
    .offert-grid {
        display: block !important;
        width: 100% !important;
    }

    /* Tvingar formulärrader att staplas */
    .form-row.two {
        grid-template-columns: 1fr !important;
        display: block !important;
    }

    /* Minskar den våldsamma paddingen i mobilen */
    .offert-form-wrapper {
        padding: 20px 15px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ser till att inga input-fält sticker ut */
    .form-row input, 
    .form-row select, 
    .form-row textarea {
        width: 100% !important;
        max-width: 100% !important;
    }
}