/* =====================================================
   Holmberg Consulting — Custom Theme CSS
   Redigera den här filen direkt; kompileras inte.
   Färger/typografi i theme.json > settings kan styras
   från Site Editor → Global Styles.
   ===================================================== */

/* ── Globals ─────────────────────────────────────────── */

html { scroll-behavior: smooth; }
body { overflow-x: clip; }

/* ── Layout: skjut innehållet under den fixade headern ── */

.wp-site-blocks {
    padding-top: 0 !important;
    padding-bottom: 0;
}

.wp-site-blocks > .wp-block-post-content {
    margin-block-start: 0 !important;
    padding-top: calc(var(--hc-header-h, 5rem) + var(--hc-header-gap, 20px));
    position: relative;
}

.wp-site-blocks > .wp-block-post-content::before {
    content: '';
    position: absolute;
    top: var(--hc-header-h, 5rem);
    left: 0;
    right: 0;
    height: var(--hc-header-gap, 20px);
    background: var(--hc-header-gap-color, #f7f2ea);
    pointer-events: none;
}

.wp-site-blocks > .wp-block-template-part:last-child {
    margin-block-start: 0 !important;
    padding-top: var(--hc-footer-gap, 20px);
    background: var(--hc-footer-gap-color, #f7f2ea);
}

/* ── Header: fixad till viewport-toppen alltid ────────── */

header.wp-block-group {
    position: fixed !important;
    top: var(--wp-admin--admin-bar--position-offset, 0px);
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
    transition: opacity .4s ease;
}

/* Lägg till klass via JS för att tona ut headern */
.hc-header-hidden {
    opacity: 0;
    pointer-events: none;
}

/* ── Scroll-offset för ankar-navigation ──────────────── */

.hc-section { scroll-margin-top: calc(var(--hc-header-h, 5rem) + var(--hc-header-gap, 20px) + var(--wp-admin--admin-bar--position-offset, 0px)); }

/* ── Desktop-radbrytningshjälpare (dold på mobil) ────── */

.hc-break-desktop { display: none; }

/* ── Header-layout: mobil (en kolumn) ────────────────── */

.hc-header-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: .85rem;
}

.hc-header-spacer { display: none; }

.hc-header-brand {
    display: grid;
    justify-items: center;
    gap: .15rem;
}

.hc-header-nav { width: 100%; }

.hc-header-nav .wp-block-navigation { justify-content: center; }

.hc-header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    margin-inline: auto;
}

.hc-site-mark { margin-inline: auto; }

/* ── Webbplatsnamn och tagline ────────────────────────── */

.hc-site-title {
    margin: 0;
    text-align: center;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.hc-site-title a { text-decoration: none; }

.hc-site-tagline {
    margin: 0;
    text-align: center;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(.88rem, 1.5vw, 1.08rem);
    line-height: 1.02;
    text-transform: uppercase;
}

/* ── Hero-sektion ─────────────────────────────────────── */

.hc-hero { background: var(--wp--preset--color--brand-blue); color: #fff; }

.hc-hero h1,
.hc-hero p,
.hc-hero a { color: #fff; }

.hc-hero h1 {
    max-width: 20ch;
    margin-inline: auto;
    text-wrap: balance;
}

.hc-hero-copy { max-width: 46rem; margin-inline: auto; }

.hc-hero-copy p {
    max-width: 43rem;
    margin-inline: auto;
    line-height: 1.45;
    text-wrap: pretty;
}

/* ── Tjänster-sektion ─────────────────────────────────── */

.hc-services { background: var(--wp--preset--color--brand-blue); color: #fff; }

.hc-services h2,
.hc-services h3,
.hc-services p { color: #fff; }

.hc-service-grid { max-width: 1280px; margin-inline: auto; }

.hc-service-grid .wp-block-column { display: flex; }

.hc-service-card {
    max-width: 22rem;
    margin-inline: auto;
    display: grid;
    gap: 1rem;
    align-content: start;
}

.hc-service-card h3 { margin-bottom: 0; text-wrap: balance; }

.hc-service-card p {
    max-width: 20rem;
    margin-inline: auto;
    line-height: 1.4;
    text-wrap: pretty;
}

/* ── Om mig-sektion ───────────────────────────────────── */

.hc-about { background: var(--wp--preset--color--brand-blue); color: #fff; }

.hc-about h2,
.hc-about p { color: #fff; }

.hc-about-placeholder {
    width: min(100%, 10rem);
    aspect-ratio: 1/1.3;
    margin-inline: auto;
    border: 2px solid rgba(255,255,255,.25);
    display: grid;
    place-items: start;
    padding: .5rem;
    font-family: var(--wp--preset--font-family--serif);
    font-size: .9rem;
    color: rgba(255,255,255,.5);
}

.hc-about-copy { max-width: 48rem; margin-inline: auto; }

.hc-about-copy p {
    max-width: 44rem;
    margin-inline: auto;
    line-height: 1.42;
    text-align: center;
    text-wrap: pretty;
}

.hc-about-emphasis {
    font-variant: small-caps;
    letter-spacing: .04em;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    line-height: 1.2;
}

/* ── Language switcher (flag pinned to header top-right) ─ */

.hc-lang-switch {
    position: absolute;
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
    z-index: 1;
}

.hc-lang-switch:hover { opacity: 1; }

.hc-editor-spacer {
    display: none !important;
}

/* ── Footer ───────────────────────────────────────────── */

.hc-footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem .9rem;
}

.hc-footer-contact p {
    margin: 0;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.1rem, 2.4vw, 1.7rem);
    line-height: 1.15;
    text-wrap: balance;
}

.hc-footer-contact a {
    color: var(--wp--preset--color--ink);
    text-decoration: none;
}

.hc-footer-meta {
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(.78rem, 1.1vw, 1rem);
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: center;
    /* Extra utrymme nedåt för Androids och iOS:s systemnavigering.
       env(safe-area-inset-bottom) är 0 på vanlig desktop.
       Kräver viewport-fit=cover i <meta name="viewport"> för iOS. */
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
}

/* ── Mobil (≤ 781 px) ─────────────────────────────────── */

@media (max-width: 781px) {
    .hc-header-nav .wp-block-navigation {
        gap: .15rem .6rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .wp-block-navigation-item:not(:last-child) .wp-block-navigation-item__content::after {
        display: none;
    }

    .hc-footer-contact { gap: .3rem .6rem; }

    .hc-service-grid .wp-block-column + .wp-block-column { margin-top: 1rem; }
}

/* ── Desktop (≥ 782 px) ───────────────────────────────── */

@media (min-width: 782px) {
    .hc-break-desktop { display: inline; }

    .hc-header-shell {
        grid-template-columns: 1fr auto 1fr;
        column-gap: 1.5rem;
        justify-items: stretch;
        align-items: center;
    }

    .hc-header-spacer { display: block; }

    .hc-header-brand { grid-column: 2; }

    .hc-header-nav {
        grid-column: 3;
        align-self: end;
        padding-bottom: .25rem;
    }

    .hc-header-nav .wp-block-navigation { justify-content: flex-end; }

    .wp-block-navigation-item:not(:last-child) .wp-block-navigation-item__content::after {
        content: '|';
        margin-left: .75rem;
        opacity: .6;
    }

    .hc-services h2,
    .hc-about h2 { max-width: none; }

    .hc-footer-contact > *:not(:last-child)::after {
        content: '|';
        margin-left: .9rem;
        opacity: .7;
    }
}