/* ============================================================================
   DATORVERKSTAD.COM  -  MAIN STYLESHEET
   Replicates the Zerif Lite WordPress theme design.
   ----------------------------------------------------------------------------
   TABLE OF CONTENTS
     1.  Color & font variables
     2.  Base / reset
     3.  Layout helpers (container)
     4.  Shared section titles
     5.  HERO section
     6.  SERVICES section
     7.  GREEN MISSION SEPARATOR
     8.  ABOUT section
     9.  TEAM section
     10. CONTACT section
     11. FOOTER + copyright bar
     12. RESPONSIVE breakpoints
   ============================================================================ */

/* ============================================
   1. COLOR & FONT VARIABLES
   ============================================ */
:root {
    --white:        #ffffff;
    --text-main:    #404040;
    --text-gray:    #939393;
    --charcoal:     #272727;  /* about + footer background */
    --near-black:   #171717;  /* copyright bar */
    --coral:        #e96656;
    --green:        #34d293;
    --blue:         #3ab0e2;
    --yellow:       #f7d861;
    --icon-ring:    #ececec;

    --font-body:    'Lato', Helvetica, Arial, sans-serif;
    --font-head:    'Montserrat', Helvetica, Arial, sans-serif;
    --font-script:  'Homemade Apple', cursive;
}

/* ============================================
   2. BASE / RESET
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-main);
    background: var(--white);
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    text-transform: uppercase;
    font-weight: 700;
}

/* ============================================
   3. LAYOUT HELPER - centered container
   Bootstrap-style: 1170px max width, 15px side padding.
   ============================================ */
.container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ============================================
   4. SHARED SECTION TITLES
   ============================================ */
.section-title {
    font-size: 45px;
    line-height: 40px;
    text-align: center;
    color: var(--text-main);
    margin-bottom: 20px;
}
.section-subtitle {
    font-family: var(--font-body);
    text-transform: none;
    text-align: center;
    color: var(--text-gray);
    max-width: 700px;
    margin: 0 auto 60px;
    font-weight: 300;
    font-size: 18px;
    line-height: 28px;
}
/* Light variants for dark backgrounds */
.section-title-light    { color: var(--white); }
.section-subtitle-light { color: var(--text-gray); }

/* ============================================
   5. HERO SECTION
   Dark background image + rgba(0,0,0,0.5) overlay.
   The body carries the fixed background so it parallax-
   scrolls behind transparent sections (contact reuses it).
   ============================================ */
body {
    background: url('../images/background.jpeg') no-repeat center top fixed;
    background-size: cover;
}
.hero {
    position: relative;
    padding: 285px 0 210px;
    text-align: center;
    color: var(--white);
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}
.hero-content { position: relative; z-index: 2; }
.hero h1 {
    font-size: 55px;
    line-height: 65px;
    color: var(--white);
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.hero-subtitle {
    font-family: var(--font-head);
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 4px;
    font-weight: 400;
    color: var(--white);
}

/* ============================================
   6. SERVICES SECTION (white background)
   ============================================ */
.services {
    background: var(--white);
    padding: 100px 0;
    position: relative;         /* sits on top of body background */
}
.services-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -15px;
}
/* Each service = 25% (4 per row) */
.service-item {
    width: 25%;
    padding: 0 15px;
    margin-bottom: 50px;
    text-align: center;
}
/* Icon inside a 145x145 circle with a 10px light-gray ring */
.service-icon {
    width: 145px;
    height: 145px;
    margin: 0 auto 25px;
    border: 10px solid var(--icon-ring);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Service title with coloured underline pseudo-element */
.service-title {
    position: relative;
    font-size: 16px;
    line-height: 22px;
    color: var(--text-main);
    padding-bottom: 20px;
    margin-bottom: 15px;
}
.service-title::after {
    content: "";
    position: absolute;
    left: 12.5%;                 /* centers a 75%-wide bar */
    bottom: 9px;                 /* 9px below the text */
    width: 75%;
    height: 2px;                 /* 2px high underline */
    background: var(--coral);    /* default, overridden below */
}
/* Underline colour variants (see index.php class names) */
.underline-coral::after  { background: var(--coral); }
.underline-green::after   { background: var(--green); }
.underline-yellow::after  { background: var(--yellow); }

.service-item p {
    font-weight: 400;            /* regular weight — easier to read */
    color: var(--text-main);
    font-size: 15px;
    line-height: 24px;
}

/* ============================================
   7. GREEN MISSION SEPARATOR
   Full-width green band. Text is Lato italic.
   ============================================ */
.mission-separator {
    position: relative;
    padding: 100px 0;
    text-align: center;
    /* The body background shows through; the green overlay tints it */
}
.mission-separator::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(52, 210, 147, 0.8);
}
.mission-separator p {
    position: relative;          /* above the ::before overlay */
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 300;
    color: var(--white);
    max-width: 800px;
    margin: 0 auto;
    font-size: 22px;
    line-height: 34px;
}

/* ============================================
   8. ABOUT SECTION (dark charcoal background)
   ============================================ */
.about {
    background: var(--charcoal);
    padding: 100px 0;
    position: relative;
}
.about-columns {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.about-col {
    padding: 0 15px;
    width: 33.333%;
}
/* LEFT: large thin sans-serif quote, matching the original site.
   Uses Lato 300 at a large size — no handwriting font. */
.about-quote {
    font-family: var(--font-body);   /* Lato */
    font-weight: 300;
    font-style: normal;
    color: var(--white);
    font-size: 46px;
    line-height: 62px;
    border: none;
    padding: 0;
    margin: 0;
    quotes: "\201C" "\201D";
}
.about-quote::before { content: open-quote; }
.about-quote::after  { content: close-quote; }
/* MIDDLE: description text */
.about-desc-col p {
    color: var(--text-gray);
    font-weight: 300;
    margin-bottom: 20px;
}
/* RIGHT: prices + certificates */
.about-prices-col h4 {
    color: var(--white);
    font-size: 15px;
    line-height: 22px;
    margin: 25px 0 12px;
}
.about-prices-col h4:first-child { margin-top: 0; }
.price-list, .cert-list {
    list-style: none;
    color: var(--text-gray);
    font-weight: 300;
    font-size: 14px;
    line-height: 22px;
}
.price-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.price-value { white-space: nowrap; color: var(--white); font-weight: 400; }
.cert-list li { margin-bottom: 6px; }

/* ============================================
   9. TEAM SECTION (white background)
   ============================================ */
.team {
    background: var(--white);
    padding: 100px 0 66px;
    position: relative;
}
.team-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px;
    margin-top: 40px;
}
.team-card { text-align: center; max-width: 300px; }
.team-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 {
    font-size: 18px;
    color: var(--text-main);
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 12px;
}
/* short underline separator under the name */
.team-card h3::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--coral);
}
.team-role {
    font-weight: 300;
    color: var(--text-gray);
    text-transform: none;
}
/* Short descriptive text beneath the role — from original hover overlay */
.team-desc {
    margin-top: 12px;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--text-gray);
    text-transform: none;
}

/* ============================================
   10. CONTACT SECTION
   Same background image as hero, with a dark overlay.
   ============================================ */
.contact {
    position: relative;
    /* Body background shows through; overlay darkens it */
    padding: 100px 0 95px;
    text-align: center;
    color: var(--white);
}
.contact-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}
.contact-content { position: relative; z-index: 2; }
.contact-content p {
    font-weight: 300;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 12px;
    color: var(--white);
}

/* ============================================
   11. FOOTER + COPYRIGHT BAR
   ============================================ */
.site-footer { background: var(--charcoal); color: var(--text-gray); position: relative; }
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    padding: 60px 15px;
    align-items: flex-start;
}
/* LEFT: three contact icon columns (~66%) */
.footer-contact {
    width: 66.666%;
    display: flex;
    flex-wrap: wrap;
}
.footer-contact-item {
    width: 33.333%;
    text-align: center;
    padding: 0 10px;
}
.footer-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    object-fit: contain;
}
.footer-contact-item p { font-weight: 300; font-size: 15px; }
.footer-contact-item a { color: var(--text-gray); }
/* RIGHT: company info (~33%) — darker panel */
.footer-info {
    width: 33.333%;
    text-align: center;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
    background: var(--near-black);
    padding: 30px 20px;
    margin: -60px -15px -60px 0;   /* stretch to fill the row height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.footer-info p { margin-bottom: 4px; }
.footer-info a { color: var(--text-gray); font-weight: 700; }
/* Copyright bar */
.copyright-bar {
    background: var(--near-black);
    padding: 18px 0;
    text-align: center;
}
.copyright-bar p {
    color: var(--text-gray);
    font-size: 13px;
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   12. RESPONSIVE BREAKPOINTS
   Tablet (<992px): services 2 columns
   Mobile (<768px): everything single column
   ============================================ */

/* ---- Tablet ---- */
@media (max-width: 991px) {
    body { background-attachment: scroll; }   /* fixed bg hurts on some tablets */
    .service-item { width: 50%; }

    .about-col { width: 100%; margin-bottom: 30px; }
    .about-quote { text-align: center; font-size: 34px; line-height: 52px; }

    .hero { padding: 180px 0 140px; }
    .hero h1 { font-size: 42px; line-height: 50px; }

    .team-photo { width: 128px; height: 128px; }

    .footer-contact, .footer-info { width: 100%; }
    .footer-info { text-align: center; margin: 30px 0 0 0; padding: 30px 20px; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .section-title { font-size: 34px; line-height: 38px; }

    .service-item { width: 100%; }

    .hero h1 { font-size: 32px; line-height: 40px; }
    .hero-subtitle { font-size: 15px; letter-spacing: 2px; }
    .hero { padding: 140px 0 100px; }

    .mission-separator p { font-size: 18px; line-height: 28px; }

    .team-cards { gap: 50px; }

    .footer-contact-item { width: 100%; margin-bottom: 30px; }

    .price-list li { flex-direction: column; gap: 0; }
    .price-value { text-align: left; }
}