@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/fonts/fraunces-700.woff2') format('woff2'); }

:root {
    --forest: #1f4d2b;
    --leaf: #33793f;
    --moss: #7cb342;
    --sprout: #a5d27a;
    --cream: #f7f3e8;
    --mint: #e8f4e4;
    --bs-body-font-family: 'Inter', system-ui, sans-serif;
    --bs-body-color: var(--forest);
    --bs-body-bg: var(--cream);
    --bs-link-color-rgb: 51, 121, 63;
    --bs-link-hover-color-rgb: 31, 77, 43;
}

h1, h2, h3, h4 { color: inherit; }
code { color: var(--forest); background: rgba(31, 77, 43, .07); padding: .1em .35em; border-radius: 6px; }

[v-cloak] > * { visibility: hidden; }

/* Navigation */
.site-nav {
    background: rgba(247, 243, 232, .85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(31, 77, 43, .08);
    transition: box-shadow .2s;
}
.site-nav.scrolled { box-shadow: 0 6px 24px rgba(31, 77, 43, .08); }
.site-nav .nav-link {
    color: var(--forest);
    font-weight: 500;
    border-radius: 999px;
    padding: .5rem 1rem !important;
}
.site-nav .nav-link:hover { background: var(--mint); }
.site-nav .nav-link.active { background: var(--mint); color: var(--leaf); }

/* Buttons */
.btn-garden {
    --bs-btn-bg: var(--leaf);
    --bs-btn-border-color: var(--leaf);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--forest);
    --bs-btn-hover-border-color: var(--forest);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--forest);
    --bs-btn-active-border-color: var(--forest);
    --bs-btn-active-color: #fff;
    border-radius: 999px;
    font-weight: 600;
    padding-inline: 1.5rem;
}
.btn-outline-garden {
    --bs-btn-color: var(--forest);
    --bs-btn-border-color: var(--forest);
    --bs-btn-hover-bg: var(--forest);
    --bs-btn-hover-border-color: var(--forest);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--forest);
    --bs-btn-active-color: #fff;
    border-radius: 999px;
    font-weight: 600;
    padding-inline: 1.5rem;
}
.cta-box .btn-light { border-radius: 999px; padding-inline: 2rem; }

/* Hero background */
.hero::before {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    right: -160px; top: -160px;
    background: radial-gradient(circle, rgba(124, 179, 66, .25), transparent 70%);
    border-radius: 50%;
}
.cta-box::after {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    right: -80px; bottom: -140px;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
}

/* Cards */
.service-card { transition: transform .25s, box-shadow .25s; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(31, 77, 43, .12); color: var(--forest); }

.price-card .table { --bs-table-bg: transparent; }

.footer-link { color: rgba(247, 243, 232, .85); text-decoration: none; }
.footer-link:hover { color: var(--moss); }

/* Forms */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--leaf);
    box-shadow: 0 0 0 .25rem rgba(51, 121, 63, .2);
}
.form-check-input:checked { background-color: var(--leaf); border-color: var(--leaf); }
.form-range::-webkit-slider-thumb { background: var(--leaf); }
.form-range::-moz-range-thumb { background: var(--leaf); }
.form-control, .form-select { border-radius: 14px; }

.calc-option {
    display: block;
    padding: .85rem 1.1rem;
    border: 2px solid rgba(31, 77, 43, .12);
    border-radius: 14px;
    cursor: pointer;
    font-weight: 500;
    transition: all .15s;
}
.calc-option:hover { border-color: var(--moss); }
.calc-option.active { border-color: var(--leaf); background: var(--mint); color: var(--leaf); }

.accordion-garden {
    --bs-accordion-active-bg: var(--mint);
    --bs-accordion-active-color: var(--forest);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(51, 121, 63, .2);
    --bs-accordion-border-radius: 16px;
    --bs-accordion-inner-border-radius: 16px;
}
.accordion-garden .accordion-button { font-weight: 600; }

/* Cookie banner & legal pages */
.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1050;
    max-width: 640px;
    animation: slide-up .4s ease;
}
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.legal h2 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.6rem; margin: 2.5rem 0 .75rem; }
.legal h3 { font-weight: 600; font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.legal p, .legal li { color: rgba(31, 77, 43, .85); line-height: 1.7; }
.legal .table { --bs-table-bg: transparent; font-size: .95rem; }

/* Mobil */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
a, button, label, input, select, textarea { -webkit-tap-highlight-color: rgba(51, 121, 63, .15); }

.call-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--leaf);
    color: #fff;
    box-shadow: 0 10px 24px rgba(31, 77, 43, .3);
}
.call-fab:hover, .call-fab:focus { background: var(--forest); color: #fff; }
@media (min-width: 768px) { .call-fab { display: none; } }

@media (max-width: 991.98px) {
    .site-nav .navbar-collapse { max-height: calc(100vh - 4.5rem); overflow-y: auto; }
    .site-nav .nav-link { padding: .75rem 1rem !important; }
}

@media (max-width: 767.98px) {
    .footer-link { display: inline-block; padding: .3rem 0; }
    footer { padding-bottom: 6rem !important; }
    .cookie-banner { left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); }
    .cookie-banner .btn, .modal-footer > .btn { min-height: 2.75rem; }
    .modal-footer { flex-direction: column; align-items: stretch; }
    .form-range { height: 2rem; }
    .form-range::-webkit-slider-thumb { width: 1.5rem; height: 1.5rem; margin-top: -.5rem; }
    .form-range::-moz-range-thumb { width: 1.5rem; height: 1.5rem; }
    .hero::before { width: 320px; height: 320px; right: -120px; top: -120px; }

    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr { background: #fff; border-radius: 16px; padding: .75rem 1rem; margin-bottom: .75rem; box-shadow: 0 1px 3px rgba(31, 77, 43, .08); }
    .table-stack td { border: 0; padding: .35rem 0; }
    .table-stack td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--leaf); }
}

/* Brødkrummer */
.breadcrumb-nav ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.breadcrumb-nav li { display: inline-flex; align-items: center; gap: .5rem; color: rgba(31, 77, 43, .8); }
.breadcrumb-nav li + li::before { content: '›'; color: rgba(31, 77, 43, .5); }
.breadcrumb-nav a { color: var(--leaf); text-decoration: none; font-weight: 500; }
.breadcrumb-nav a:hover { text-decoration: underline; }
.breadcrumb-nav [aria-current] { color: var(--forest); font-weight: 600; }

/* Portræt */
.portrait-tag {
    position: absolute;
    left: 50%;
    bottom: -1.25rem;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .75rem;
    white-space: nowrap;
    background: #fff;
    padding: .6rem 1.1rem .6rem .6rem;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(31, 77, 43, .18);
}

/* Prisberegner – reserverer plads, så siden ikke hopper, når Vue indlæses */
.calculator-shell:not(.is-mounted) { min-height: 34rem; }
@media (min-width: 768px) { .calculator-shell:not(.is-mounted) { min-height: 27rem; } }

/* Før/efter-slider */
.ba { --pos: 50%; position: relative; }
.ba-portrait .ba-frame { aspect-ratio: 3 / 4; }
.ba-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mint); user-select: none; touch-action: pan-y; }
.ba-frame picture, .ba-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-animating .ba-before { transition: clip-path .4s ease; }
.ba-frame::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 3px;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.ba-animating .ba-frame::after { transition: left .4s ease; }
.ba-handle {
    position: absolute;
    top: 50%;
    left: var(--pos);
    z-index: 2;
    width: 3rem;
    height: 3rem;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--leaf);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    pointer-events: none;
    transition: transform .15s ease;
}
.ba-animating .ba-handle { transition: left .4s ease, transform .15s ease; }
.ba-handle svg { width: 1.5rem; height: 1.5rem; }
.ba-frame:hover .ba-handle, .ba-range:focus-visible ~ .ba-handle { transform: translate(-50%, -50%) scale(1.1); }
.ba-range:focus-visible ~ .ba-handle { outline: 3px solid var(--sun, #f2c14e); outline-offset: 3px; }
.ba-label {
    position: absolute;
    top: .9rem;
    z-index: 1;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity .2s;
}
.ba-label-before { left: .9rem; background: rgba(31, 77, 43, .85); color: #fff; }
.ba-label-after { right: .9rem; background: rgba(255, 255, 255, .92); color: var(--forest); }
.ba-range {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 3rem; height: 100vh; }
.ba-range::-moz-range-thumb { width: 3rem; height: 100vh; border: 0; }
.gallery-card { transition: box-shadow .25s; }
.gallery-card:hover { box-shadow: 0 20px 40px rgba(31, 77, 43, .12); }

/* Galleri-filter */
.gallery-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-filter button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: 2px solid rgba(31, 77, 43, .15);
    border-radius: 999px;
    background: #fff;
    color: var(--forest);
    font-weight: 600;
    font-size: .9rem;
    transition: all .15s;
}
.gallery-filter button:hover { border-color: var(--leaf); }
.gallery-filter button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }

/* Animations */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }

@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(30px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes fall { from { transform: translateY(-20px); } to { transform: translateY(40px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.tree-sway { animation: sway 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.cloud-drift { animation: drift 12s ease-in-out infinite; }
.sun-pulse { animation: pulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.snowfall { animation: fall 4s linear infinite alternate; }
.brush-spin > * { animation: spin 1.2s linear infinite; transform-box: fill-box; transform-origin: center; }
.leaf-float { animation: float 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    [data-reveal] { opacity: 1; transform: none; }
}