@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600;700&display=swap");

body::before {
    content: '';
    position: fixed;
    z-index: -1;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: url('assets/img/backo2ny.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

@media (max-width:767px) {
    body::before {
        background-image: url('assets/img/backomobo.webp')!important;
    }
}

/* =========================================================
   Bootstrap 5.3 – Local overrides (CDN-friendly)
   Font: Roboto Condensed
   Primary: #014824 (+ light/dark variants)
   Uppercase: Buttons + Headings
   ========================================================= */
:root {
    /* Brand */
    --bs-primary: #014824;
    --bs-primary-rgb: 1, 72, 36;

    /* Neutralt (håll rent: vitt/grått/svart) */
    --bs-body-bg: #ffffff;
    --bs-body-color: #111111;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-border-color: #dee2e6;

    /* Länkar: använd primary */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #013a1d;

    /* mörkare variant */
    /* Font överallt */
    --bs-font-sans-serif: "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 3) Font-vikter */
body {
    font-family: var(--bs-font-sans-serif);
    font-weight: 400;

    /* brödtext normal */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bs-font-sans-serif);
    font-weight: 700;

    /* rubriker bold */
    text-transform: uppercase;

    /* rubriker uppercase */
    letter-spacing: .02em;

    /* lite “tightare” rubrikkänsla */
}

/* Navigation semibold (Bootstrap navbars & nav links) */
.navbar,
.navbar .nav-link,
.nav,
.nav .nav-link {
    font-family: var(--bs-font-sans-serif);
    font-weight: 600;

    /* semibold i navigering */
    text-transform: uppercase;
}

/* 4) Primärfärg – ljusare/mörkare varianter (praktiska tokens) */
:root {
    --hh-primary: #014824;
    --hh-primary-dark: #013a1d;

    /* mörkare variant */
    --hh-primary-light: #0a6a3c;

    /* ljusare variant */
}

/* 5) Knappar uppercase + bättre hover/active utan att kopiera Bootstrap */
.btn {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;

    /* knappar känns bättre semibold */
}

/* Primary button: */
.btn-primary {
    --bs-btn-bg: var(--hh-primary);
    --bs-btn-border-color: var(--hh-primary);
    --bs-btn-hover-bg: var(--hh-primary-dark);
    --bs-btn-hover-border-color: var(--hh-primary-dark);
    --bs-btn-active-bg: var(--hh-primary-dark);
    --bs-btn-active-border-color: var(--hh-primary-dark);
    --bs-btn-focus-shadow-rgb: 1, 72, 36;
}

/* Outline primary */
.btn-outline-primary {
    --bs-btn-color: var(--hh-primary);
    --bs-btn-border-color: var(--hh-primary);
    --bs-btn-hover-bg: var(--hh-primary);
    --bs-btn-hover-border-color: var(--hh-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--hh-primary-dark);
    --bs-btn-active-border-color: var(--hh-primary-dark);
    --bs-btn-focus-shadow-rgb: 1, 72, 36;
}

/* 6) tweaks  för ren look */
.text-primary {
    color: var(--hh-primary) !important;
}

.bg-primary {
    background-color: var(--hh-primary) !important;
}

.border-primary {
    border-color: var(--hh-primary) !important;
}

.link-primary {
    color: var(--hh-primary) !important;
}

.link-primary:hover {
    color: var(--hh-primary-dark) !important;
}