/*
Theme Name: Life Nage Twenty Six
Theme URI: https://nage.dk
Description: Child theme of Nage Twenty One for life.nage.dk
Author: Sune Lundby Rasborg Aps
Template: nagetwentyone
Version: 1.0.0
Text Domain: lifenage26
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Libre+Bodoni:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/*
 * ---------------------------------------------------------------------------
 * VIGTIGT: Slet ikke kommentarblokken ovenfor.
 *
 * Det er den, WordPress bruger til at genkende temaet. Fjernes den, forsvinder
 * temaet fra siden.
 *
 * Alt herunder er frit til egen CSS. Denne fil indlæses allersidst - efter både
 * hovedtemaets og child-temaets stylesheets - så reglerne her vinder uden
 * !important.
 *
 * Læg ikke filer i mappen dist/ - den bliver genereret automatisk ved hver
 * opdatering, og alt derinde forsvinder igen.
 * ---------------------------------------------------------------------------
 */
:root {
    --color-3: #AFC7C1; /* Mint */
    --color-4: #E9E9E9; /* Lys grå */
    --color-5: #5E897C; /* Mørk grøn */
    --color-6: #CCCCCC; /* Grå */
    --color-7: #CDE0DB; /* Lys mint */
}

/* -----------------------------------------
   GENEREL TYPOGRAFI & BRØDTEKST (Inter)
   ----------------------------------------- */
body,
p, li, label, input, textarea, select, button,
nav, nav a, nav button,
.button-booking-link, #booking-link-sticky,
#the-footer, #the-footer p, #the-footer a, #the-footer li,
#the-footer dt, #the-footer dd, #the-footer address, #the-footer .recaptcha-disclaimer {
    font-family: "Inter", sans-serif !important;
    font-weight: 200;
}

body,
.the-content p,
.the-content li {
    font-size: 1.7rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    body,
    .the-content p,
    .the-content li {
        font-size: 1.6rem;
    }
}

nav a, nav button,
#the-footer p, #the-footer a, #the-footer li, #the-footer span {
    font-size: 1.6rem;
    line-height: 1.5;
}

/* -----------------------------------------
   KNAPPER - SKRIFTTYPE (Inter Bold + versaler overalt)
   ----------------------------------------- */
.abtn,
.wp-block-button__link,
.wp-element-button,
.button-booking-link,
#booking-link-sticky {
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* -----------------------------------------
   OVERSKRIFTER (Libre Bodoni)
   ----------------------------------------- */
h1, h2, h3, h4, h5, h6,
.heading, .heading *,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
    font-family: "Libre Bodoni", Georgia, serif !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

/* -----------------------------------------
   HEADER & LOGO
   ----------------------------------------- */
#the-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background: transparent;
}

#the-header .logo {
    max-width: 120px;
    height: auto;
}

@media (min-width: 768px) {
    #the-header .logo {
        max-width: 170px;
    }
}

#the-header .logo svg {
    width: 100%;
    height: auto;
    max-height: 150px;
}

/* Logo følger "Farvetema logo"-feltet valgt i WordPress (Desktop + Mobil) */
#the-header .logo[data-color-theme="light"] svg,
#the-header .logo[data-color-theme="light"] svg * {
    fill: #ffffff !important;
    color: #ffffff !important;
    visibility: visible !important;
}

#the-header .logo[data-color-theme="dark"] svg,
#the-header .logo[data-color-theme="dark"] svg * {
    fill: #000000 !important;
    color: #000000 !important;
    visibility: visible !important;
}

/* Sort logo i den åbne burgermenu */
#the-header .menu-area .logo-mobile svg,
#the-header .menu-area .logo-mobile svg * {
    fill: #000000 !important;
    color: #000000 !important;
    visibility: visible !important;
}

/* Nulstil baggrundsbilleder fra mobil/mørkt tema */
#the-header .logo,
.darkmode #the-header .logo {
    background: none !important;
}

/* -----------------------------------------
   HERO BLOCK
   ----------------------------------------- */
.acf-block-hero .heading,
.acf-block-hero .heading * {
    font-family: "Libre Bodoni", sans-serif !important;
    font-weight: 300 !important;
    font-size: clamp(3.8rem, 5vw, 4.3rem) !important;
    line-height: 1.15 !important;
}

.acf-block-hero .content,
.acf-block-hero .content-inner,
.acf-block-hero .content p {
    font-family: "Inter", sans-serif !important;
    font-weight: 300 !important;
    font-size: 2.2rem !important;
    line-height: 1.5 !important;
}

.acf-block-hero .heading,
.acf-block-hero .heading *,
.acf-block-hero .content,
.acf-block-hero .content-inner,
.acf-block-hero[data-color-theme="light"] .heading,
.acf-block-hero[data-color-theme="light"] .content,
.acf-block-hero[data-color-theme="light"] .content-inner {
    color: #ffffff !important;
}

.acf-block-hero .abtn {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: transparent !important;
    padding: 1em 3em !important;
    border-width: 1px !important;
    border-radius: 0 !important;
    font-size: 1.5rem !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    margin-bottom: 2em !important;
}

.acf-block-hero .abtn:hover {
    background-color: var(--color-3) !important;
    border-color: var(--color-3) !important;
    color: #ffffff !important;
}

@media (max-width: 767px) {
    .acf-block-hero .content-area-inner {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5em !important;
    }

    .acf-block-hero .heading,
    .acf-block-hero .heading * {
        font-size: clamp(2.4rem, 9vw, 3.4rem) !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .acf-block-hero .content,
    .acf-block-hero .content-inner,
    .acf-block-hero[data-color-theme="light"] .content,
    .acf-block-hero[data-color-theme="light"] .content-inner {
        color: #000000 !important;
    }

    .acf-block-hero .content,
    .acf-block-hero .content-inner,
    .acf-block-hero .content p {
        font-size: 1.9rem !important;
        overflow-wrap: break-word !important;
    }

    .acf-block-hero .abtn,
    .acf-block-hero .abtn span {
        color: #000000 !important;
        border-color: #000000 !important;
    }
}
/* -----------------------------------------
   PUNKTFARVER (bullets matcher tekstfarven)
   ----------------------------------------- */
ul li::marker,
ol li::marker {
    color: currentColor !important;
}

/* -----------------------------------------
   FOOTER OVERSKRIFTER
   ----------------------------------------- */
#the-footer .accordion-title,
#the-footer .accordion-title a,
#the-footer .subheading,
#the-footer .subheading strong,
#the-footer .clinic .name,
#the-footer h6 {
    font-family: "Libre Bodoni", Georgia, serif !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

#the-footer .accordion-title,
#the-footer .accordion-title a {
    font-size: 2.2rem !important;
    line-height: 1.3;
}

#the-footer .subheading,
#the-footer .subheading strong,
#the-footer .clinic .name {
    font-size: 1.8rem !important;
    line-height: 1.4;
}

/* -----------------------------------------
   HEADER - LINJE UNDER LOGO/MENU
   ----------------------------------------- */
.js-no-cover #the-header:after,
body.no-cover #the-header:after {
    top: 11.5rem !important;
}

@media (min-width: 768px) {
    .js-no-cover #the-header:after,
    body.no-cover #the-header:after {
        top: 15.5rem !important;
    }
}

/* -----------------------------------------
   HERO BLOCK - DESKTOP POSITIONERING
   ----------------------------------------- */
@media (min-width: 768px) {
    .acf-block-hero .content-area-inner {
        margin-left: -8em !important;
    }
}

/* =========================================
   LIFE – LABEL
   ========================================= */


/* Den ydre blok følger WordPress' normale tekst-layout */
p.life-page-label {
    background: transparent !important;

    padding: 0 !important;

    font-family: "Inter", sans-serif !important;

    text-align: left !important;

    margin-top: 0 !important;
    margin-bottom: 2.4rem !important;
}


/* Selve den grønne label */
.life-page-label__inner {
    display: inline-block !important;

    background-color: #CDE0DB !important;
    color: #000000 !important;

    border-radius: 0 !important;

    padding: 0.7rem 1.3rem !important;

    font-family: "Inter", sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 200 !important;
    line-height: 1.2 !important;

    letter-spacing: 0 !important;
    text-transform: none !important;
}


/* Mobil */
@media (max-width: 767px) {

    .wp-block-paragraph:has(> .life-page-label__inner) {
        position: relative !important;
        top: 1.2rem !important;
    }

    .life-page-label__inner {
        font-size: 1.4rem !important;
        padding: 0.6rem 1.1rem !important;
    }

}