* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* scroll-padding-top: 100px; Kan läggas här om du har en fast meny i toppen */
}

body {
    font-family: 'Manrope', sans-serif; /* Flyttad hit för bättre prestanda! */
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6; 
}

/* --- VATTENSTÄMPEL I BAKGRUNDEN (VÄNSTERSTÄLLD) --- */
body::before {
    content: "Datorproblem.org";
    position: fixed; 
    top: 50%; 
    left: 4%; 
    transform: translate(-50%, -50%) rotate(-90deg); 
    font-size: 7vh; 
    letter-spacing: 6px; 
    font-weight: 700; 
    color: #f7f7f7;
    
    /* Mjuk och subtil skugga */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.06); 
    
    white-space: nowrap; 
    z-index: -1; 
    pointer-events: none; 
}

/* Länkstyling */
a img { border: none; outline: none; }
main a { color: #0056b3; text-decoration: underline; }
main a:visited { color: #0056b3; }
main a:hover { color: #003d82; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { text-decoration: underline; }

.container {
    max-width: 1600px;
    margin: 0 auto;
    background-color: #fff;
    min-height: 100vh;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

/* BANNER */
.banner { 
    width: 100%; 
    background-color: #fff; 
    position: relative; 
    overflow: hidden; 
}
.banner img { width: 100%; height: auto; display: block; object-fit: cover; }

/* MENY */
nav { 
    background-color: #083e60; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}

.hamburger {
    display: none;
    color: white;
    font-size: 2rem;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    background-color: #083e60; 
}

.main-menu { display: flex; list-style: none; width: 100%; }
.menu-item { flex: 1; text-align: center; position: relative; }

.menu-item > a {
    display: flex; justify-content: center; align-items: center;
    padding: 15px 5px; color: white; text-decoration: none;
    transition: all 0.3s ease; 
    font-size: 1.3rem;
    font-weight: 600; white-space: nowrap; 
}

.menu-item > a:hover { background-color: #10557f; }

.icon-home, .icon-remote {
    transform: translateY(3px);
}

.nav-icon { display: inline-flex; align-items: center; margin-left: 8px; }
.nav-icon .icon-minus { display: none; }

/* SUBMENY */
.submenu {
    display: none; position: absolute; top: 100%; left: 0; width: 100%;
    min-width: 250px; background-color: #083e60; list-style: none; z-index: 10;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.6); 
}

.submenu li a {
    display: block; padding: 12px 10px; color: white; text-decoration: none;
    text-align: left; border-bottom: 1px solid #10557f; 
    font-size: 1.2rem; 
    font-weight: 400; white-space: nowrap; 
}

.submenu li a:hover { background-color: #10557f; box-shadow: none; } 

.menu-item:hover .submenu { display: block; }

/* HUVUDINNEHÅLL */
main { padding: 40px 20px; flex: 1; font-size: 1.2rem; }
.hero-image { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 8px; margin-bottom: 40px; }

/* klass för centrerad bild som är max 600px bred */
.hero-image-medium { 
    width: 70% !important; /* Tvingar fram halva bredden */
    height: auto; 
    display: block !important; 
    margin: 0 auto 40px auto !important; /* !important slår ut allt annat som försöker dra den till vänster */
    border-radius: 8px; 
    align-self: center; /* Detta centrerar bilden även om din <main> råkar vara en Flexbox */
}

main p { margin-bottom: 20px; }
main h1 { font-weight: 700; font-size: 3rem; color: #2c3e50; margin-bottom: 15px; line-height: 1.2; }
main h2 { font-weight: 700; font-size: 2.2rem; color: #333; margin-top: 40px; margin-bottom: 15px; line-height: 1.3; }
main h3 { font-weight: 700; font-size: 1.6rem; color: #333; margin-top: 30px; margin-bottom: 10px; line-height: 1.3; }

/* LISTOR */
main ol, main ul {
    padding-left: 30px; 
    margin-bottom: 20px;
}

/* Tar bort standardpunkterna för listor som enbart är länkar */
main ul.link-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 30px;
}
main li { margin-bottom: 10px; }

/* MASONRY GRID (Fyller uppifrån och ner) */
.content-grid { column-count: 3; column-gap: 20px; margin-top: 40px; }

/* GRID FÖR PARTNERSIDAN (Fyller i från vänster till höger) */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 40px;
    align-items: start; /* Gör att boxarna behåller sin naturliga höjd */
}

.partner-grid .placeholder {
    margin-bottom: 0; /* Tar bort marginalen eftersom "gap" i gridet sköter avståndet nu */
    width: auto;
}

.placeholder {
    background-color: transparent; padding: 30px 20px; margin-bottom: 20px; 
    text-align: left; border: 1px solid #bdc3c7; border-radius: 8px;
    break-inside: avoid; display: inline-block; width: 100%; overflow-wrap: break-word; hyphens: auto;
}
.placeholder h3 { margin-top: 0; margin-bottom: 12px; color: #2c3e50; font-size: 1.5rem; }

/* ARTIKELAVSNITT */
.section-divider { border: 0; height: 1px; background-color: #bdc3c7; margin: 60px 0; }
.article-section { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.long-article { column-count: 2; column-gap: 40px; margin-top: 30px; }

/* Ser till att huvudrubrikerna spänner över hela sidan och inte fastnar i en spalt */
.long-article h1,
.long-article h2,
.long-article h3 { 
    font-size: 2rem; 
    margin-top: 45px;    /* Ger rejält med luft till stycket ovanför */
    margin-bottom: 12px; /* Knyter rubriken nära texten som kommer under */
    color: #083e60; 
}

.long-article h3 { font-size: 2rem; margin-top: 0; margin-bottom: 25px; color: #083e60; }
.long-article p { margin-bottom: 20px; }

/* Fixar kolumn-hoppen och ser till att bilderna flödar snyggt */
.long-article img {
    width: 100%; /* Tvingar bilden att fylla ut exakt sin spalt */
    height: auto;
    display: block;
    border-radius: 8px;
    margin: 20px 0 30px 0; 
    
    /* Förhindrar konstiga luckor och brytningar i spalterna */
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Ser till att bilder inuti grid-boxarna anpassar sig snyggt automatiskt */
.placeholder img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 10px;
    display: block; /* Ser till att den inte beter sig konstigt intill text */
}

/* --- FORMULÄRSTYLING --- */
.contact-section { margin-top: 60px; max-width: 850px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.form-container {
    background-color: #f4f4f4; 
    padding: 40px; 
    border: 1px solid #bdc3c7; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
}
.form-group { margin-bottom: 25px; text-align: left; }
.form-group label { display: block; margin-bottom: 10px; font-weight: 600; color: #2c3e50; font-size: 1.1rem; }

.form-control {
    width: 100%; padding: 14px; border: 1px solid #bdc3c7; border-radius: 8px;
    font-size: 1.1rem; transition: all 0.3s ease; font-family: 'Manrope', sans-serif;
    background-color: #fff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); 
}
.form-control:focus { 
    outline: none; border-color: #083e60; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06), 0 0 8px rgba(8, 62, 96, 0.15); 
}
textarea.form-control { min-height: 160px; resize: vertical; }

/* Checkboxar och Radioknappar */
.form-check { 
    display: flex; align-items: center; margin-bottom: 12px; 
    cursor: pointer; font-size: 1.15rem; 
}
.form-check input { 
    margin: 0 15px 0 0; width: 24px; height: 24px; 
    cursor: pointer; accent-color: #083e60; flex-shrink: 0; 
    transform: translateY(5px); /* Tvingar ner knappen så den linjerar perfekt med texten */
}

.btn-submit {
    background-color: #083e60; color: white; border: none; padding: 18px 35px;
    font-size: 1.25rem; font-weight: 700; border-radius: 8px; cursor: pointer;
    transition: background 0.3s ease; font-family: 'Manrope', sans-serif;
    margin-top: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: inline-block; width: auto; 
}
.btn-submit:hover { background-color: #10557f; transform: translateY(-1px); }

/* --- PRISLISTA (Ersätter den gamla tabellen) --- */
.service-list {
    background-color: #fff;
    padding: 30px;
    border: 1px solid #bdc3c7;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.service-item {
    display: flex;
    justify-content: space-between; /* Skjuter priset till höger */
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid #eaeaea;
    gap: 20px;
    scroll-margin-top: 100px; /* Ser till att ankarlänkarna inte hamnar under en eventuell meny */
}

/* Tar bort linjen och paddingen på sista/första raden för att det ska bli snyggt i boxen */
.service-item:last-child { border-bottom: none; padding-bottom: 0; }
.service-item:first-child { padding-top: 0; }

.service-info h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #333;
}

.service-info p {
    margin: 0;
    line-height: 1.5;
}

.service-price {
    font-weight: bold;
    color: #003366; /* Din marinblå färg */
    font-size: 1.15rem;
    white-space: nowrap;
}

/* SCROLL TO TOP */
.scroll-top-btn {
    position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px;
    background-color: #083e60; color: white; border: none; border-radius: 50%;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.3s ease;
    z-index: 1000; opacity: 0; visibility: hidden;
}
.scroll-top-btn.show { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { background-color: #10557f; transform: translateY(-5px); }
.scroll-top-btn svg { width: 36px; height: 36px; }

/* MOBIL-KONTAKT */
.mobile-contact-box { display: none; }
        
/* FOOTER */
footer { background-color: #f4f4f4; color: #333; text-align: center; padding: 40px 20px; margin-top: 60px; box-shadow: inset 0 15px 15px -15px rgba(0, 0, 0, 0.15); font-size: 1.2rem; }
.footer-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1400px; margin: 0 auto; }
.footer-box { 
    padding: 20px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.footer-bottom { margin-top: 30px; font-size: 1.1rem; color: #666; }

/* Ändrat till centrerad layout */
.footer-box.left-aligned {
    display: block;      
    text-align: center;  /* <-- Ändrad från left till center */
}

/* Ser till att länkarna hamnar på egna rader, centrerat och ännu större */
.footer-box.left-aligned a {
    display: block;
    color: #aaaaaa;
    text-decoration: none;
    margin-top: 15px;    /* <-- Denna rad skjuter ner länken exakt 10px */
    margin-bottom: 20px; 
    font-size: 1.8rem;   
}

/* En liten understrykning när man för musen över */
.footer-box.left-aligned a:hover {
    text-decoration: underline;
    color: #000000; /* Länken blir svart när man för musen över */
}

.footer-box.left-aligned h3 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #333;
    font-weight: 700;
    font-size: 2.0rem; /* Rubriken ökad till 2.0rem så den förblir större än länkarna */
}

/* --- Nativt, bot-säkert anropselement i artikeln --- */
.article-call-p {
    margin: 25px 0;
    text-align: left;
}

.article-call-element {
    display: inline-flex; /* Centrerar innehållet perfekt */
    align-items: center;
    justify-content: center;
    gap: 12px; /* Skapar ett snyggt avstånd mellan luren och numret */
    
    background-color: #2ecc71; 
    color: #ffffff; 
    font-size: 1.5em; 
    font-weight: 900; 
    padding: 12px 35px; 
    border-radius: 8px; 
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); 
    transition: all 0.3s ease; 
    max-width: 400px;
}

.article-call-element:hover {
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px); 
}

/* Container som håller ihop knapp och länk */
.copy-link-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #f8f9fa; /* Svagt ljusgrå bakgrund */
    padding: 6px 15px 6px 6px;
    border-radius: 8px;
    border: 1px solid #e1e4e8;
    margin: 10px 0;
}

/* Själva kopieringsknappen */
.copy-btn {
    background-color: #ffffff;
    border: 1px solid #d1d5da;
    border-radius: 6px;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.2s ease;
}

/* Hover-effekt på knappen */
.copy-btn:hover {
    background-color: #f0f3f6;
    color: #2ecc71; /* Blir snyggt grön när man drar musen över */
    border-color: #2ecc71;
}

/* Länktexten bredvid knappen */
.copy-link-text {
    font-weight: bold;
    color: #333;
    text-decoration: none;
    font-size: 1.1em;
}

.copy-link-text:hover {
    color: #1abc9c;
    text-decoration: underline;
}

/* Diskret hjälptext under formuläretiketter (Microcopy) */
.form-hint {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: -8px;
    margin-bottom: 4px;
}

/* Gömmer honungsfällan för riktiga besökare */
.hp-field { display: none !important; }

/* Design för svarsmeddelandet via AJAX */
.form-response-msg { display: none; padding: 15px; margin-top: 20px; border-radius: 8px; font-weight: bold; }
.form-response-msg.success { display: block; background-color: #e8f8f5; color: #1abc9c; border: 1px solid #1abc9c; }
.form-response-msg.error { display: block; background-color: #fceceb; color: #e74c3c; border: 1px solid #e74c3c; }

/* =========================================
   1. GRUNDINSTÄLLNINGAR FÖR LÄNKARNA
   ========================================= */
[class^="inline-"] {
    color: #007BFF; 
    text-decoration: none;
    transition: color 0.2s;  
}

[class^="inline-"]:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* =========================================
   2. SKAPAR UTRYMMET FÖR IKONERNA
   ========================================= */
[class^="inline-"]::before {
    content: ""; /* Detta är vad som skapar det osynliga elementet */
    display: inline-block; 
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 4px;
    position: relative;
    top: -2px; /* Justera denna om ikonerna hamnar för högt/lågt */
}

/* =========================================
   3. E-POSTIKONEN (Flerfärpromptad bakgrundsbild)
   ========================================= */
.inline-email::before {
    /* Observera att #FFD700 och #F39C12 har omvandlats till %23 i koden för att webbläsare ska förstå det */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFD700' d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6z'/%3E%3Cpath fill='%23F39C12' d='M12 13L2 6v2l10 7 10-7V6l-10 7z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* =========================================
   4. LÄNKKEDJAN (CSS Mask för färgkontroll)
   ========================================= */
.inline-link::before {
    background-color: #003366; /* Det är HÄR du styr färgen på kedjan nu! */
    
    /* Använder SVG-koden som en stansmask */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E") no-repeat center / contain;
    
    transform: rotate(45deg); 
}

/* --- KNAPP FÖR FJÄRRHJÄLP --- */
.remote-support-btn,
.remote-support-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #083e60; 
    color: #ffffff !important; /* !important blockerar 'main a:visited' */
    padding: 16px 28px;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none !important; /* Blockerar understrykningar */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Vad som händer när kunden håller muspekaren över knappen */
.remote-support-btn:hover {
    background-color: #10557f;
    color: #ffffff !important; 
    text-decoration: none !important; 
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(8, 62, 96, 0.25);
}

/* Vad som händer exakt när kunden klickar */
.remote-support-btn:active {
    background-color: #10557f;
    color: #ffffff !important;
    transform: translateY(0); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Se till att SVG-ikonen är exakt lika stor som texten */
.remote-support-btn svg {
    flex-shrink: 0;
}

/* --- INFORMATIONSBOM / NOTIS --- */
.info-box {
    background-color: #f8f9fa;
    border-left: 4px solid #083e60; /* Matchar din mörkblåa färg (Standard) */
    padding: 16px 20px;
    margin-bottom: 30px;
    border-radius: 0 8px 8px 0;
}

.info-box p {
    margin: 0;
    color: #333;
    font-size: 1.1rem;
}

/* Varningsruta (Röd) - Använd <div class="info-box warning"> */
.info-box.warning {
    border-left-color: #d32f2f;
    background-color: #fff4f4;
}

/* Tipsruta (Grön) - Använd <div class="info-box success"> */
.info-box.success {
    border-left-color: #27ae60;
    background-color: #e8f8f5;
}

/* --- SAMMANFATTANDE TEXT I BOTTEN --- */
.summary-text {
    margin-top: 25px;
}

/* --- WRAPPER FÖR KNAPP OCH INFOBOX --- */
.remote-action-wrapper {
    display: flex;
    align-items: center; 
    gap: 25px; 
    
    /* Ramar in sektionen så den matchar .article-section exakt */
    max-width: 1200px;
    margin: 0 auto 30px auto; /* Centrerar hela paketet på skärmen */
    padding: 0 20px; /* Samma luft på sidorna som din text har */
}

/* Finjusterar info-boxen när den ligger inuti wrappern */
.remote-action-wrapper .info-box {
    margin-bottom: 0; /* Tar bort bottenmarginalen eftersom wrappern sköter avståndet nedåt */
    flex: 1; /* Låter rutan expandera och ta upp all yta som blir över bredvid knappen */
}

/* =========================================
   MODAL FÖR BILDER (T.EX. CERTIFIKAT)
   ========================================= */
.modal {
    display: none; 
    position: fixed;
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.40); /* Ändrad till svart med 85% transparens */
    align-items: center; 
    justify-content: center; 
}

.modal.show {
    display: flex;
}

.modal-content {
    max-width: 90%;
    max-height: 85vh; 
    border-radius: 8px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
    object-fit: contain; 
    animation: zoomIn 0.3s ease; 
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #ffffff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
    color: #bdc3c7;
    text-decoration: none;
}

/* Återanvändbar design för tabeller med varannan rad färgad */
.striped-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    min-width: 400px;
}

.striped-table th, 
.striped-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.striped-table thead tr {
    background-color: #f4f8fb;
    border-bottom: 2px solid #0078D7;
}

/* Magin som färgar varannan rad (jämna rader) */
.striped-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}
/* Paginering */
.pagination-wrapper { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.page-btn { padding: 8px 16px; border-radius: 6px; border: 1px solid #083e60; color: #083e60 !important; text-decoration: none !important; font-weight: 600; transition: 0.2s; }
.page-btn:hover, .page-btn.active { background: #083e60; color: #fff !important; }
.page-btn.active { cursor: default; }

@keyframes zoomIn {
    from {transform: scale(0.9); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

        
/* DESKTOP STYLING */
@media (max-width: 1200px) { 
    .content-grid { column-count: 2; } 
}


@media (min-width: 901px) {
    nav {
        border-top: 1px solid rgba(0, 0, 0, 0.4);
        box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.6); 

    }
    .home-item, .remote-item { flex: 0 0 auto; }
    .home-item > a, .remote-item > a { padding-left: 25px; padding-right: 25px; }
    .menu-item:hover > a {
        background-color: #10557f;
        box-shadow: 0 -25px 25px -15px rgba(255, 255, 255, 0.5);
        position: relative; 
        z-index: 2;
    }
    .menu-item:hover > a .nav-icon .icon-plus { display: none; }
    .menu-item:hover > a .nav-icon .icon-minus { display: block; }
    .submenu li a { box-shadow: none; }
}


@media (max-width: 900px) {
    .content-grid { column-count: 2; }
    .hamburger { display: block; }
    .main-menu { display: none; flex-direction: column; }
    .main-menu.active { 
        display: flex; 
        max-height: calc(100vh - 52px); 
        overflow-y: auto;
    }
    .menu-item { border-top: 1px solid #10557f; width: 100%; text-align: left; } 
    .menu-item > a { padding: 15px 20px; justify-content: flex-start; }
    
    /* Fix: Lågt z-index så den tvingas ligga under huvudmenyns skugga */
    .submenu { position: relative; box-shadow: none; z-index: 1; }
    
    .submenu li a { padding-left: 40px; }
    .menu-item:hover .submenu { display: none; }
    .menu-item.open > a .nav-icon .icon-plus { display: none; }
    .menu-item.open > a .nav-icon .icon-minus { display: block; }
    
        .menu-item.open > a { 
        background-color: #10557f; 
        position: relative; 
        z-index: 10; 
        /* ÄNDRAT: Inre skugga (inset) från toppen som speglar submenyns botten */
        box-shadow: inset 0 15px 15px -15px rgba(0, 0, 0, 0.8); 
        border-bottom: 1px solid #083e60; 
    }
    
        .menu-item.open .submenu { 
        display: block; 
        background-color: #10557f; 
        border-top: none; 
        /* Behålls som förut: Inre skugga (inset) från botten */
        box-shadow: inset 0 -15px 15px -15px rgba(0, 0, 0, 0.8); 
    }
    
    main h1 { font-size: 2.5rem; }
    main h2 { font-size: 2rem; }
    .long-article { column-count: 1; }
    .scroll-top-btn { bottom: 20px; right: 20px; width: 45px; height: 45px; }

    .mobile-contact-box {
        display: flex; justify-content: center; align-items: center;
        position: fixed; top: -100px; right: 20px; width: 65px; height: 65px;
        background-color: #27ae60; color: white; border-radius: 50%; 
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); z-index: 1001; 
        transition: top 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    }
    .mobile-contact-box.show { top: 20px; }
    .icon-phone { width: 32px; height: 32px; }

    .btn-submit { width: 100%; display: block; }
    

}

@media (max-width: 600px) { 
    .content-grid { column-count: 1; }
    .service-list { padding: 15px; /* Mindre luft på utsidan i mobilen */ }
    .service-item { flex-direction: column; /* Staplar text och pris på varandra istället */ gap: 8px; /* Avstånd mellan texten och priset */ }
    
    /* Döljer vattenstämpeln helt på mobiler */
    body::before { display: none !important; }
    .hero-image-medium { width: 100% !important; /* Fäller ut sig till maxbredd på mobilen */ }
    
    /* Tvingar knappen och rutan att staplas på surfplattor och mobiler */
    .remote-action-wrapper { flex-direction: column; align-items: stretch; /* Gör så att rutan fyller bredden snyggt */ gap: 15px; /* Lite mindre luft mellan dem på mobilen */ }

    .close-modal { top: 10px; right: 20px; font-size: 40px; }
 }

/* =========================================
   UTSKRIFTSANPASSNING (PRINT)
   ========================================= */
@media print {
    /* 1. Gömmer meny, footer och alla flytande knappar (BANNERN ÄR KVAR!) */
    nav,
    footer,
    .scroll-top-btn,
    .mobile-contact-box,
    .article-call-element {
        display: none !important;
    }

    /* 2. Rensar bakgrunden och stänger av vattenstämpeln för att spara bläck */
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    
    body::before {
        display: none !important;
    }

    /* 3. Tar bort skuggor och instängande ramar för en ren utskrift */
    .container, 
    .form-container, 
    .service-list {
        box-shadow: none !important;
        border: none !important; 
    }

    /* 4. Ser till att länkar inte har konstiga färger på papper */
    a {
        color: #000000 !important;
        text-decoration: underline !important;
    }

    /* 5. FÖRHINDRAR FULA SIDBRYTNINGAR */
    
    /* Undvik att klyva dessa element mitt i */
    .service-item,
    .info-box,
    .form-group,
    li,
    p {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Undvik att en rubrik hamnar ensam längst ner på en sida (håller ihop den med texten under) */
    h1, h2, h3, h4 {
        page-break-after: avoid;
        break-after: avoid;
    }
}