/* Astrid Selvik — tema bygget rundt #e0eff1, lastes etter Bootstrap */

:root {
    --color-bg: #e0eff1;
    --color-surface: #cde2e6;
    --color-ink: #1c3437;
    --color-muted: #547073;
    --color-accent: #2e7d87;
    --color-accent-dark: #24656e;
    --color-accent-soft: #cde4e7;
    --font-heading: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

body {
    background: var(--color-bg);
    color: var(--color-ink);
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, .navbar-brand {
    font-family: var(--font-heading);
    color: var(--color-ink);
}

.lead {
    color: var(--color-muted);
}

a {
    color: var(--color-accent);
}

a:hover {
    color: var(--color-accent-dark);
}

/* -- Knapper -------------------------------- */

.btn-accent {
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--color-accent-dark);
    --bs-btn-hover-border-color: var(--color-accent-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--color-accent-dark);
    --bs-btn-active-border-color: var(--color-accent-dark);
    --bs-btn-active-color: #fff;
}

.btn-outline-accent {
    --bs-btn-color: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-bg: var(--color-accent);
    --bs-btn-hover-border-color: var(--color-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--color-accent-dark);
    --bs-btn-active-border-color: var(--color-accent-dark);
    --bs-btn-active-color: #fff;
}

/* -- Header -------------------------------- */

.site-header {
    background: rgba(224, 239, 241, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-accent-soft);
}

.site-header .navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
}

.site-header .nav-link {
    color: var(--color-ink);
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--color-accent-dark);
}

.site-header .nav-link.active {
    font-weight: 600;
}

/* -- Hero -------------------------------- */

.hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}

.hero-portrait img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(28, 52, 55, 0.18);
}

/* -- Instagram-lenke -------------------------------- */

.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-accent-dark);
    text-decoration: none;
    font-weight: 600;
}

.instagram-link:hover {
    color: var(--color-ink);
}

.instagram-ikon {
    flex-shrink: 0;
}

/* -- Vekst-logo -------------------------------- */

.vekst-logo {
    color: var(--color-accent);
    max-width: 100%;
    height: auto;
}

/* -- Lite bilde i CTA -------------------------------- */

.cta-småbilde {
    width: 200px;
    max-width: 100%;
}

.cta-småbilde img {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}

/* -- Fotokreditt -------------------------------- */

.foto-kreditt {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--color-muted);
    text-align: right;
}

/* -- Seksjoner og kort -------------------------------- */

.section-heading {
    font-size: 1.9rem;
}

.service-card,
.detail-card,
.contact-card {
    background: var(--color-surface);
    border-radius: 1rem;
}

.testimonial-card {
    background: #bad4da;
}

.detail-card,
.contact-card {
    box-shadow: 0 0.25rem 1rem rgba(28, 52, 55, 0.07);
}

.service-icon {
    font-size: 2rem;
    line-height: 1;
}

.contact-card h2 {
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.contact-value {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

/* -- Sitat -------------------------------- */

.quote-text {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.6;
}

.quote-source {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.cta-bilde {
    width: 168px;
    flex-shrink: 0;
}

.cta-bilde img {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    object-fit: cover;
}

/* -- CTA-bånd -------------------------------- */

.cta-band {
    background: var(--color-surface);
    border-radius: 1.25rem;
    box-shadow: 0 0.25rem 1rem rgba(28, 52, 55, 0.07);
}

/* -- Lister -------------------------------- */

.fact-list {
    padding-left: 1.25rem;
}

.fact-list li,
.step-list li {
    margin-bottom: 0.5rem;
}

.step-list {
    padding-left: 1.25rem;
    margin-bottom: 0;
}

/* -- Footer -------------------------------- */

.site-footer {
    background: var(--color-ink);
    color: rgba(255, 255, 255, 0.85);
}

.site-footer a {
    color: #fff;
}

.site-footer .instagram-link {
    color: #fff;
    justify-content: flex-end;
}

.site-footer .instagram-link:hover {
    color: var(--color-accent-soft);
}

.footer-tagline,
.footer-copy {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
}

/* -- Tjenestebilder -------------------------------- */

.tjeneste-bilde img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.75rem;
}

/* -- Kontaktskjema -------------------------------- */

.hp-felt {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#kontaktskjema .form-control:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.25rem rgba(46, 125, 135, 0.25);
}

/* -- Om-siden -------------------------------- */

.om-portrait img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(28, 52, 55, 0.15);
}