/* ============================================
   TEMA: VERKSTAD — Mörkgrå & Röd
   Känsla: Industriell, stark, trovärdig
   ============================================ */

@import url('../styles.css');

:root {
    --navy:          #1f1f1f;
    --navy-dark:     #141414;
    --forest:        #cc2222;
    --forest-light:  #e03535;
    --accent:        #ff5555;
    --white:         #f5f5f5;
    --light-grey:    #2a2a2a;
    --surface:       #2e2e2e;
    --surface2:      #383838;
    --text-main:     #ececec;
    --text-muted:    #999999;
    --border:        rgba(204,34,34,.20);
    --border-radius: 10px;
    --radius-lg:     16px;
    --shadow:        0 4px 20px rgba(0,0,0,.30);
    --shadow-lg:     0 16px 48px rgba(0,0,0,.45);
    --transition:    .3s cubic-bezier(.4,0,.2,1);
}

body {
    background: var(--navy);
}

h1, h2, h3 {
    color: var(--white);
}

.bg-navy {
    background-color: var(--surface);
    color: var(--text-main);
}

.bg-light-section {
    background-color: var(--surface2);
}

.main-header {
    background: rgba(20, 20, 20, 0.92);
    border-bottom: 1px solid var(--border);
}

.main-header.scrolled {
    background: rgba(20, 20, 20, 0.78);
    border-bottom-color: rgba(204, 34, 34, 0.35);
}

.trust-band {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.value-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.value-card h3 {
    color: #ffffff;
}

.service-card {
    background: var(--surface);
    border: 1px solid var(--border);
}

.service-card h3 {
    color: var(--white);
}

.story-section.bg-light h2,
.story-section.bg-light h3 {
    color: var(--white);
}

.rounded-shadow {
    border: 1px solid var(--border);
}

.faq-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--forest);
    border-left: none;
}

.faq-card h3 {
    color: var(--white);
}

.faq-card p {
    color: var(--text-muted);
}

.contact-section {
    background: var(--surface) !important;
}

.contact-card-dark {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-main);
}

.form-group input,
.form-group textarea {
    border: 1px solid rgba(204, 34, 34, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-main);
    box-shadow: 0 0 0 3px rgba(204, 34, 34, 0.18);
}

/* Förhindra webbläsarens autofill-styling (vit bakgrund) */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #2e2e2e inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    caret-color: var(--text-main);
}

.main-footer {
    border-top: 1px solid var(--border);
}

/* Pulse-knapp: röd glow */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(204, 34, 34, 0.35); }
    50%       { box-shadow: 0 6px 28px rgba(204, 34, 34, 0.60); }
}

/* btn-primary: röd glow */
.btn-primary {
    box-shadow: 0 4px 16px rgba(204, 34, 34, 0.25);
}

.btn-primary:hover {
    box-shadow: 0 8px 24px rgba(204, 34, 34, 0.45);
}

/* ── REVIEWS SECTION (dark theme) ─────────────────────── */
.reviews-section {
    background: var(--navy);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.reviews-header {
    border-bottom-color: var(--border);
}

.reviews-score-large {
    color: var(--forest-light);
}

.reviews-score {
    color: var(--white);
    font-size: 4rem;
}

.google-logo-inline {
    filter: brightness(0) invert(1);
}

.form-contact-note i {
    color: var(--forest-light);
}

.google-logo {
    filter: brightness(0) invert(1);
}

.review-card {
    background: var(--surface);
    border-color: var(--border);
}

.reviewer-name {
    color: var(--white);
}

.review-text {
    color: var(--text-muted);
}

.review-google-icon {
    filter: brightness(0) invert(1);
}

/* ── RÖDA SEKTIONSGRÄNSER ───────────────────────────────── */
.trust-band {
    border-top: 3px solid var(--forest);
    border-bottom: 3px solid var(--forest);
}

.story-section.bg-light {
    border-top: 3px solid var(--forest);
}

#tjanster {
    border-top: 3px solid var(--forest);
}

.reviews-section {
    border-top: 3px solid var(--forest);
    border-bottom: 3px solid var(--forest);
}

#faq {
    border-top: 3px solid var(--forest);
}

.contact-section {
    border-top: 3px solid var(--forest) !important;
}

.main-footer {
    border-top: 3px solid var(--forest) !important;
}

/* Röd accentlinje under navbaren */
.main-header {
    border-bottom: 2px solid var(--forest);
}