/*
Theme Name: HEKS
Author: HEKS metallityöt
Version: 1.0
*/

:root {
    --yellow:#FEBE20;
    --black:#080808;
    --dark:#111;
    --text:#f5f5f5;
    --muted:#b9b9b9;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    background:var(--black);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
}

a {
    color:inherit;
}

.heks-container {
    width:min(1200px, calc(100% - 60px));
    margin:0 auto;
}


/* HEADER */

.site-header {
    min-height:80px;
    padding:15px 0;
    background:#090909;
    border-bottom:1px solid #242424;
}

.header-inner {
    width:min(1200px, calc(100% - 60px));
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.site-logo {
    color:#fff;
    text-decoration:none;
    font-size:27px;
    font-weight:800;
}

.site-logo span {
    color:var(--yellow);
}

.main-nav {
    display:flex;
    gap:30px;
}

.main-nav a {
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.main-nav a:hover {
    color:var(--yellow);
}


/* HERO */

.heks-hero {
    min-height:650px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.97) 0%,
            rgba(5,5,5,.82) 50%,
            rgba(5,5,5,.32) 100%
        ),
        linear-gradient(135deg,#171717,#070707);
}

.heks-label {
    margin:0 0 18px;
    color:var(--yellow);
    font-weight:800;
    letter-spacing:2px;
    font-size:15px;
}

.heks-hero h1 {
    max-width:900px;
    margin:0 0 30px;
    font-size:clamp(56px,7vw,100px);
    line-height:.95;
}

.heks-lead {
    max-width:760px;
    margin:0 0 35px;
    color:var(--muted);
    font-size:20px;
    line-height:1.7;
}

.heks-btn {
    display:inline-flex;
    min-width:190px;
    min-height:58px;
    padding:0 28px;
    align-items:center;
    justify-content:center;
    background:var(--yellow);
    color:#080808;
    text-decoration:none;
    font-weight:800;
}


/* SERVICES */

.heks-services {
    padding:100px 0;
    background:#101010;
}

.heks-services h2,
.heks-contracting h2,
.heks-contact h2 {
    margin:10px 0 45px;
    font-size:clamp(38px,5vw,64px);
}

.heks-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.heks-card {
    padding:35px;
    background:#171717;
    border-top:4px solid var(--yellow);
    min-height:260px;
}

.heks-card span {
    color:var(--yellow);
    font-weight:800;
}

.heks-card h3 {
    margin:40px 0 15px;
    font-size:25px;
}

.heks-card p {
    color:#aaa;
    line-height:1.7;
}


/* CONTRACTING */

.heks-contracting {
    padding:110px 0;
    background:#080808;
}

.heks-contracting-inner {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:80px;
    align-items:center;
}

.heks-contracting p {
    max-width:700px;
    color:#bbb;
    font-size:18px;
    line-height:1.75;
}

.heks-contract-list {
    background:#151515;
    border-top:4px solid var(--yellow);
    padding:10px 30px;
}

.heks-contract-list div {
    padding:22px 0;
    border-bottom:1px solid #303030;
    font-weight:700;
}

.heks-contract-list div:last-child {
    border-bottom:none;
}


/* CONTACT */

.heks-contact {
    padding:110px 0;
    background:var(--yellow);
    color:#080808;
}

.heks-contact .heks-label {
    color:#080808;
}

.heks-contact-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:45px;
}

.heks-contact-box {
    padding:30px;
    background:rgba(0,0,0,.08);
}

.heks-contact-box strong {
    display:block;
    margin-bottom:10px;
}


/* FOOTER */

.site-footer {
    padding:28px 0;
    background:#060606;
    color:#777;
    font-size:13px;
}


/* MOBILE */

@media(max-width:800px) {

    .heks-container,
    .header-inner {
        width:min(100% - 40px,1200px);
    }

    .main-nav {
        gap:15px;
        font-size:14px;
    }

    .heks-hero {
        min-height:520px;
        padding:70px 0;
    }

    .heks-hero h1 {
        font-size:clamp(40px,11vw,58px);
    }

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

    .heks-contracting-inner,
    .heks-contact-grid {
        grid-template-columns:1fr;
    }

    .heks-services,
    .heks-contracting,
    .heks-contact {
        padding:70px 0;
    }
}

/* HEKS logo */

.site-logo {
    display:flex;
    align-items:center;
}

.heks-logo-image {
    display:block;
    width:auto;
    height:58px;
    max-width:280px;
    object-fit:contain;
}

@media(max-width:800px) {
    .heks-logo-image {
        height:46px;
        max-width:220px;
    }
}


/* Larger HEKS logo */
.heks-logo-image {
    height:72px !important;
    max-width:340px !important;
}

@media(max-width:800px) {
    .heks-logo-image {
        height:54px !important;
        max-width:250px !important;
    }
}


/* HEKS logo larger */
.heks-logo-image {
    height:90px !important;
    max-width:420px !important;
}

@media(max-width:800px) {
    .heks-logo-image {
        height:64px !important;
        max-width:300px !important;
    }
}


/* ===== HEKS HERO IMAGE ===== */

.heks-hero {
    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.96) 0%,
            rgba(5,5,5,.86) 38%,
            rgba(5,5,5,.52) 65%,
            rgba(5,5,5,.18) 100%
        ),
        url("/wp-content/uploads/2026/10/heks-hero.png")
        center center / cover no-repeat !important;
}


/* HEKS contact links */
.heks-contact-box a {
    color:#080808;
    text-decoration:none;
    font-weight:600;
}

.heks-contact-box a:hover {
    text-decoration:underline;
}


/* ===== HEKS MOBILE MENU ===== */

.heks-menu-toggle {
    display:none;
}

@media(max-width:800px) {

    .header-inner {
        position:relative;
        flex-wrap:wrap;
    }

    .heks-menu-toggle {
        display:flex;
        width:46px;
        height:46px;
        padding:8px;
        border:0;
        background:transparent;
        cursor:pointer;

        flex-direction:column;
        justify-content:center;
        gap:6px;
    }

    .heks-menu-toggle span {
        width:29px;
        height:3px;
        background:#FEBE20;
        transition:transform .25s ease, opacity .25s ease;
    }

    .main-nav {
        display:none;
        width:100%;
        flex-direction:column;
        gap:0;
        padding-top:15px;
    }

    .main-nav.is-open {
        display:flex;
    }

    .main-nav a {
        display:block;
        width:100%;
        padding:16px 0;
        border-top:1px solid #292929;
    }

    .heks-menu-toggle.is-open span:nth-child(1) {
        transform:translateY(9px) rotate(45deg);
    }

    .heks-menu-toggle.is-open span:nth-child(2) {
        opacity:0;
    }

    .heks-menu-toggle.is-open span:nth-child(3) {
        transform:translateY(-9px) rotate(-45deg);
    }

}


/* ===== HEKS MOBILE HERO ===== */

@media(max-width:800px) {

    .heks-hero {
        min-height:560px;
        display:flex;
        align-items:center;

        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,.97) 0%,
                rgba(5,5,5,.88) 52%,
                rgba(5,5,5,.45) 100%
            ),
            url("/wp-content/uploads/2026/10/heks-hero.png")
            62% center / cover no-repeat !important;
    }

    .heks-hero .heks-container {
        padding-top:90px;
        padding-bottom:70px;
    }

    .heks-hero h1 {
        max-width:520px;
        margin:14px 0 18px;
        font-size:clamp(38px, 11vw, 56px);
        line-height:.98;
        letter-spacing:-1.5px;
    }

    .heks-hero .heks-lead {
        max-width:470px;
        font-size:17px;
        line-height:1.55;
        margin-bottom:28px;
    }

    .heks-hero .heks-btn {
        min-height:54px;
        padding:0 28px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

}

@media(max-width:480px) {

    .heks-hero {
        min-height:520px;
    }

    .heks-hero h1 {
        font-size:42px;
    }

    .heks-hero .heks-lead {
        font-size:16px;
    }

}

/* ===== MOVE HERO IMAGE LEFT ===== */

@media(max-width:800px) {
    .heks-hero {
        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,.97) 0%,
                rgba(5,5,5,.88) 52%,
                rgba(5,5,5,.45) 100%
            ),
            url("/wp-content/uploads/2026/10/heks-hero.png")
            82% center / cover no-repeat !important;
    }
}

@media(max-width:480px) {
    .heks-hero {
        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,.97) 0%,
                rgba(5,5,5,.88) 52%,
                rgba(5,5,5,.45) 100%
            ),
            url("/wp-content/uploads/2026/10/heks-hero.png")
            86% center / cover no-repeat !important;
    }
}


/* ===== HEKS FOOTER ===== */

.site-footer {
    background:#090909;
    color:#aaa;
    border-top:1px solid #222;
}

.heks-footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:70px;
    padding-top:65px;
    padding-bottom:55px;
}

.heks-footer-logo {
    display:block;
    width:auto;
    height:75px;
    margin-bottom:24px;
}

.heks-footer-brand p {
    max-width:360px;
    line-height:1.7;
    margin:0;
}

.heks-footer-column {
    display:flex;
    flex-direction:column;
    gap:11px;
}

.heks-footer-column h3 {
    color:#FEBE20;
    font-size:16px;
    margin:0 0 12px;
}

.heks-footer-column a,
.heks-footer-column span {
    color:#aaa;
    text-decoration:none;
    line-height:1.6;
}

.heks-footer-column a:hover {
    color:#FEBE20;
}

.heks-footer-bottom {
    border-top:1px solid #222;
    padding:22px 0;
    font-size:14px;
    color:#777;
}

@media(max-width:800px) {

    .heks-footer-grid {
        grid-template-columns:1fr;
        gap:38px;
        padding-top:45px;
        padding-bottom:40px;
    }

    .heks-footer-logo {
        height:65px;
    }

}