/**
 * Layout — Rub a Lamp
 * Header + Footer styling
 * Opdateret: 2026-03-03
 */


/* ============================================================
   HEADER — DESKTOP
   ============================================================ */

.ral-header {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          100;
    background:       var(--color-white);
    transition:       background 0.3s ease;
}

.ral-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 var(--space-side);
    height:          6rem;
    max-width:       1440px;
    margin:          0 auto;
}

/* Logo */
.ral-header__logo {
    font-family:             var(--font-base);
    font-weight:             var(--font-bold);
    font-size:               var(--text-logo);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    text-decoration:         none;
    white-space:             nowrap;
}

.ral-header__logo:hover {
    opacity: 1;
    color:   var(--color-primary);
}


/* Navigation */
.ral-header__nav {
    display: flex;
}

.ral-nav__list {
    display:     flex;
    align-items: center;
    gap:         var(--space-sm);
    list-style:  none;
    margin:      0;
    padding:     0;
}

.ral-nav__list li a {
    font-family:             var(--font-base);
    font-weight:             var(--font-regular);
    font-size:               var(--text-nav);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    text-decoration:         none;
    transition:              color 0.2s ease;
}

.ral-nav__list li a:hover,
.ral-nav__list li.current-menu-item a,
.ral-nav__list li.current_page_item a {
    color: var(--color-primary);
}

/* Hamburger — skjult på desktop */
.ral-hamburger {
    display:    none;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    0;
    width:      24px;
    height:     24px;
    position:   relative;
}

.ral-hamburger:hover,
.ral-hamburger:focus {
    background-color: transparent;
}

.ral-hamburger__icon,
.ral-hamburger__icon::before,
.ral-hamburger__icon::after {
    display:    block;
    width:      24px;
    height:     2px;
    background: var(--color-black);
    position:   absolute;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.ral-hamburger__icon {
    top:       50%;
    transform: translateY(-50%);
}

.ral-hamburger__icon::before {
    content: '';
    top:     -7px;
}

.ral-hamburger__icon::after {
    content: '';
    top:     7px;
}

/* Hamburger — åben tilstand */
.ral-hamburger[aria-expanded="true"] .ral-hamburger__icon {
    background: transparent;
}

.ral-hamburger[aria-expanded="true"] .ral-hamburger__icon::before {
    transform: rotate(45deg) translate(5px, 5px);
}

.ral-hamburger[aria-expanded="true"] .ral-hamburger__icon::after {
    transform: rotate(-45deg) translate(5px, -5px);
}


/* ============================================================
   MOBIL MENU
   ============================================================ */

.ral-mobile-menu {
    display:    none;
    position:   fixed;
    top:        4rem;
    left:       0;
    right:      0;
    background: var(--color-white);
    z-index:    99;
    padding:    1.5rem var(--space-side);
    transform:  translateY(-100%);
    transition: transform 0.3s ease;
}

.ral-mobile-menu.is-open {
    transform: translateY(0);
}

.ral-mobile-menu__list {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            1.2rem;
}

.ral-mobile-menu__list li a {
    font-family:             var(--font-base);
    font-weight:             var(--font-regular);
    font-size:               var(--text-nav);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    text-decoration:         none;
}

.ral-mobile-menu__list li.current-menu-item a,
.ral-mobile-menu__list li.current_page_item a {
    color: var(--color-primary);
}


/* ============================================================
   MAIN CONTENT — afstand fra fixed header
   ============================================================ */

body {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

.ral-main {
    flex:        1;
    padding-top: 6rem;
}


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

.ral-footer {
    position:            relative;
    overflow:            hidden;
    background-image:    url('../images/footer-bg-01.webp');
    background-size:     cover;
    background-position: center right;
    background-repeat:   no-repeat;
}

.ral-footer__inner {
    padding:   var(--space-lg) var(--space-side) var(--space-xl);
    max-width: 1440px;
    margin:    0 auto;
}

.ral-footer__left {
    max-width: 622px;
}

/* CTA + sociale ikoner på én linje */
.ral-footer__actions {
    display:     flex;
    align-items: center;
    gap:         1rem;
    margin-top:  var(--space-sm);
}

/* Primær knap */
.ral-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    height:          var(--btn-height);
    padding:         0 1.5rem;
    background:      var(--color-primary);
    border-radius:   var(--radius-btn);
    text-decoration: none;
    white-space:     nowrap;
    min-width:       14.75rem;
    transition:      background 0.2s ease;
}

.ral-btn:hover {
    background: var(--color-black);
}

/* Sociale ikoner */
.ral-footer__social {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    flex-shrink:     0;
}

.ral-footer__social svg {
    display: block;
}

.ral-footer__social .ral-social__bg {
    transition: fill 0.2s ease;
}

.ral-footer__social:hover .ral-social__bg {
    fill: var(--color-black);
}

.ral-footer__left .ral-body {
    margin-top: var(--space-sm);
}

/* Skillelinje */
.ral-footer__divider {
    border:     none;
    border-top: 1px solid var(--color-primary);
    margin:     var(--space-md) 0;
    width:      622px;
    max-width:  100%;
}

/* Kontaktinfo */
.ral-footer__contact {
    margin-top: 0;
}

.ral-footer__contact .ral-contact-name {
    margin-bottom: 0.25rem;
}

.ral-contact-info__link {
    color:           var(--color-primary);
    text-decoration: none;
}

.ral-contact-info__link:hover {
    color: var(--color-black);
}


/* ============================================================
   RESPONSIVE — MOBIL (480px)
   ============================================================ */

@media (max-width: 480px) {

    /* Header */
    .ral-header {
        background: var(--color-white);
        height:     4rem;
    }

    .ral-header:has(.ral-hamburger[aria-expanded="true"]) {
        background: #fafafa;
    }

    .ral-header__inner {
        padding: 0 var(--space-side);
        height:  4rem;
    }

    .ral-header__nav {
        display: none;
    }

    .ral-hamburger {
        display: block;
    }

    /* Mobil menu */
    .ral-mobile-menu {
        display:    block;
        top:        3.5rem;
        padding:    1rem var(--space-side) 1.5rem;
        background: #fafafa;
    }
    .ral-mobile-menu.is-open {
        border-bottom: 2px solid var(--color-primary);
    }

    /* Main */
    .ral-main {
        padding-top: 4rem;
    }

    /* Footer */
    .ral-footer__inner {
        padding: var(--space-md) var(--space-side);
    }

    .ral-footer__left {
        max-width: 100%;
    }

    .ral-footer__actions {
        flex-wrap: wrap;
        gap:       0.75rem;
    }

    .ral-btn {
        height:    var(--btn-height);
        min-width: 177px;
        padding:   1rem 1.5rem;
    }

    .ral-footer__social svg {
        width:  40px;
        height: 40px;
    }

    .ral-footer__divider {
        width: 100%;
    }

}