/* ==========================================================================
   FRISTET.DK – GLOBAL MOBIL TYPOGRAFI & LÆSBARHED V5
   Fælles standard på ALLE sider.

   PRINCIP:
   - Sidespecifik CSS må styre layout.
   - Denne fil styrer mobilens læsbarhed og typografiske minimum.
   - Indlæses SIDST globalt via header.php.
   - Desktop over 1024px påvirkes ikke.
   ========================================================================== */

:root{
    --fr-mobile-body:17px;
    --fr-mobile-secondary:15px;
    --fr-mobile-button:16px;
    --fr-mobile-label:15px;
    --fr-mobile-line:1.65;
    --fr-mobile-heading-line:1.12;
    --fr-mobile-touch:46px;
}

/* ==========================================================================
   TABLET + MOBIL
   ========================================================================== */
@media (max-width:1024px){

    html{
        -webkit-text-size-adjust:100% !important;
        text-size-adjust:100% !important;
        max-width:100%;
        overflow-x:hidden;
    }

    body{
        max-width:100%;
        overflow-x:hidden;
        font-family:var(--fristet-font-body,"Montserrat",Arial,sans-serif) !important;
        font-size:var(--fr-mobile-body) !important;
        line-height:var(--fr-mobile-line) !important;
        text-rendering:optimizeLegibility;
        -webkit-font-smoothing:antialiased;
    }

    @supports (overflow:clip){
        html,body{overflow-x:clip;}
    }

    /* ----------------------------------------------------------
       ALMINDELIG TEKST
       Dette er den fælles minimumsstandard.
       ---------------------------------------------------------- */
    html body :where(
        main,
        section,
        article,
        aside,
        footer,
        [role="dialog"]
    ) :where(
        p,
        li,
        dd,
        dt,
        blockquote,
        figcaption
    ){
        font-family:var(--fristet-font-body,"Montserrat",Arial,sans-serif) !important;
        font-size:17px !important;
        line-height:1.65 !important;
        font-weight:500;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    /* Tekst-elementer som ofte får egne små px-værdier */
    html body :where(
        .description,
        .subtitle,
        .subtext,
        .body-text,
        .card-text,
        .card-copy,
        .intro,
        .lead,
        [class$="-description"],
        [class$="__description"],
        [class$="-subtitle"],
        [class$="__subtitle"],
        [class$="-text"],
        [class$="__text"],
        [class$="-copy"],
        [class$="__copy"]
    ){
        font-size:17px !important;
        line-height:1.62 !important;
    }

    /* ----------------------------------------------------------
       SEKUNDÆR TEKST
       Må være mindre, men aldrig mikroskopisk.
       ---------------------------------------------------------- */
    html body :where(
        small,
        .small,
        .meta,
        .metadata,
        .muted,
        .hint,
        .help,
        .caption,
        .kicker,
        .counter,
        .eyebrow,
        .date,
        .time,
        .location,
        [class*="meta"],
        [class*="hint"],
        [class*="help"],
        [class*="caption"],
        [class*="kicker"],
        [class*="eyebrow"]
    ){
        font-family:var(--fristet-font-body,"Montserrat",Arial,sans-serif) !important;
        font-size:15px !important;
        line-height:1.48 !important;
        font-weight:500;
    }

    /* ----------------------------------------------------------
       LABELS / FORMULARER
       ---------------------------------------------------------- */
    html body :where(
        label,
        .label,
        .field-label,
        [class*="field-label"],
        [class*="form-label"]
    ){
        font-family:var(--fristet-font-body,"Montserrat",Arial,sans-serif) !important;
        font-size:15px !important;
        line-height:1.42 !important;
        font-weight:650 !important;
    }

    html body :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
        select,
        textarea
    ){
        max-width:100%;
        font-family:var(--fristet-font-body,"Montserrat",Arial,sans-serif) !important;
        font-size:17px !important;
        line-height:1.48 !important;
    }

    html body textarea{
        min-height:120px;
        resize:vertical;
    }

    /* ----------------------------------------------------------
       KNAPPER / HANDLINGER / NAVIGATION
       ---------------------------------------------------------- */
    html body :where(
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        .btn,
        .button,
        [class$="-btn"],
        [class$="__btn"],
        [class$="-button"],
        [class$="__button"]
    ){
        min-height:var(--fr-mobile-touch);
        font-family:var(--fristet-font-body,"Montserrat",Arial,sans-serif) !important;
        font-size:16px !important;
        line-height:1.25 !important;
        font-weight:650;
        touch-action:manipulation;
    }

    /* Tekstlinks i indhold skal være lette at læse */
    html body main :where(
        a:not([class*="icon"]):not([aria-label]),
        [class$="-link"],
        [class$="__link"]
    ){
        font-size:max(16px,1em);
        line-height:1.45;
    }

    /* ----------------------------------------------------------
       OVERSKRIFTER – Playfair fælles på alle sider
       ---------------------------------------------------------- */
    html body :where(h1,h2,h3,h4,h5,h6){
        font-family:var(--fristet-font-heading,"Playfair Display",Georgia,serif) !important;
        text-wrap:balance;
        overflow-wrap:anywhere;
    }

    html body main h1{
        font-size:clamp(31px,6.4vw,42px) !important;
        line-height:1.06 !important;
    }

    html body main h2,
    html body main .section-title{
        font-size:clamp(25px,5.3vw,33px) !important;
        line-height:1.10 !important;
    }

    html body main h3{
        font-size:clamp(21px,4.5vw,26px) !important;
        line-height:1.16 !important;
    }

    html body main h4{
        font-size:19px !important;
        line-height:1.2 !important;
    }

    /* ----------------------------------------------------------
       KORT-SPECIFIK TEKST
       Mange Fristet-sider bruger span/strong i stedet for p.
       ---------------------------------------------------------- */
    html body :where(
        .card,
        [class$="-card"],
        [class$="__card"],
        .list-item,
        [class$="-item"],
        [class$="__item"]
    ) :where(
        strong:not([class*="title"]),
        b:not([class*="title"])
    ){
        line-height:1.35;
    }

    html body :where(
        .card,
        [class$="-card"],
        [class$="__card"],
        .list-item,
        [class$="-item"],
        [class$="__item"]
    ) :where(
        small,
        [class*="meta"],
        [class*="subtitle"],
        [class*="description"]
    ){
        font-size:15px !important;
        line-height:1.48 !important;
    }

    /* ----------------------------------------------------------
       KENDTE FRISTET-OMRÅDER
       Sikrer samme grundtekst på tværs af sider.
       ---------------------------------------------------------- */
    html body :where(
        .lg-page,
        .salon-demo-lg8,
        .arr3-shell,
        .fristelser-page,
        .activity-create-page,
        .activity-edit-page,
        .activity-detail-page,
        .profile-page,
        .profile-mobile,
        .profiler-page,
        .chat-page,
        .private-chat-page,
        .messages-page,
        .settings-page,
        .admin-page
    ){
        font-family:var(--fristet-font-body,"Montserrat",Arial,sans-serif) !important;
        font-size:17px !important;
        line-height:1.65 !important;
    }

    /* ----------------------------------------------------------
       HEADER / BURGER
       ---------------------------------------------------------- */
    html body:not(.header-auth-page) .site-header__mobile-menu > a{
        font-family:var(--fristet-font-body,"Montserrat",Arial,sans-serif) !important;
        font-size:16px !important;
        line-height:1.35 !important;
    }

    /* ----------------------------------------------------------
       RESPONSIV SIKKERHED
       ---------------------------------------------------------- */
    html body :where(
        main,
        section,
        article,
        aside,
        [class*="grid"],
        [class*="row"],
        [class*="columns"],
        [class*="layout"],
        [class*="content"]
    ){
        min-width:0;
    }

    html body :where(
        [class*="grid"] > *,
        [class*="row"] > *,
        [class*="columns"] > *,
        [class*="layout"] > *
    ){
        min-width:0;
    }

    html body :where(img,video,canvas,svg,iframe){
        max-width:100%;
    }

    html body :where(img,video){
        height:auto;
    }

    html body :where(
        .actions,
        [class$="-actions"],
        [class$="__actions"],
        .button-row,
        .btn-row
    ){
        flex-wrap:wrap;
        min-width:0;
    }

    html body a{
        overflow-wrap:anywhere;
    }

    html body :where(
        [role="dialog"],
        .modal,
        [class*="modal-card"],
        [class*="modal__content"]
    ){
        max-width:calc(100vw - 24px);
        max-height:calc(100dvh - 24px);
    }
}

/* ==========================================================================
   TELEFON
   ========================================================================== */
@media (max-width:680px){

    :root{
        --fr-mobile-body:17px;
        --fr-mobile-secondary:15px;
        --fr-mobile-button:16px;
        --fr-mobile-label:15px;
        --fr-mobile-line:1.68;
    }

    html,
    body{
        font-size:17px !important;
        line-height:1.68 !important;
    }

    /* Tving ægte brødtekst til samme størrelse på ALLE sider */
    html body :where(
        main,
        section,
        article,
        aside,
        footer,
        [role="dialog"]
    ) :where(
        p,
        li,
        dd,
        dt,
        blockquote,
        figcaption
    ){
        font-size:17px !important;
        line-height:1.68 !important;
    }

    /* Standard tekst i kendte tekstbærende wrappers */
    html body :where(
        .content,
        .copy,
        .description,
        .subtitle,
        .body-text,
        .card-text,
        .card-copy,
        [class$="-content"],
        [class$="__content"],
        [class$="-copy"],
        [class$="__copy"],
        [class$="-description"],
        [class$="__description"]
    ){
        line-height:1.62;
    }

    /* Sekundær tekst */
    html body :where(
        small,
        .small,
        .meta,
        .metadata,
        .muted,
        .hint,
        .help,
        .caption,
        .kicker,
        .counter,
        .eyebrow,
        [class*="meta"],
        [class*="hint"],
        [class*="help"],
        [class*="caption"],
        [class*="kicker"],
        [class*="eyebrow"]
    ){
        font-size:15px !important;
        line-height:1.5 !important;
    }

    /* Overskrifter */
    html body main h1{
        font-size:clamp(30px,8.4vw,38px) !important;
    }

    html body main h2,
    html body main .section-title{
        font-size:clamp(25px,7vw,31px) !important;
    }

    html body main h3{
        font-size:clamp(21px,5.8vw,26px) !important;
    }

    html body main h4{
        font-size:19px !important;
    }

    /* Knapper */
    html body :where(
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        .btn,
        .button,
        [class$="-btn"],
        [class$="__btn"],
        [class$="-button"],
        [class$="__button"]
    ){
        min-height:46px;
        font-size:16px !important;
    }

    /* Formularer */
    html body :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
        select,
        textarea
    ){
        font-size:17px !important;
    }
}

/* ==========================================================================
   SMÅ TELEFONER
   Vi gør IKKE teksten mindre – kun overskrifter skalerer lidt.
   ========================================================================== */
@media (max-width:430px){

    html,
    body{
        font-size:17px !important;
    }

    html body main h1{
        font-size:clamp(29px,8.8vw,35px) !important;
    }

    html body main h2,
    html body main .section-title{
        font-size:clamp(24px,7.3vw,29px) !important;
    }

    html body :where(
        h1,h2,h3,h4,
        p,a,strong,
        [class*="title"],
        [class*="name"]
    ){
        overflow-wrap:anywhere;
    }
}

/* ==========================================================================
   TILGÆNGELIGHED
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto !important;
    }
}


/* ==========================================================================
   FRISTET.DK – GLOBAL MOBIL TYPOGRAFI V6 · LETTERE OG ROLIGERE
   Gælder alle sider på tablet/mobil.
   Formål: mindre tung skrift på mørke flader uden at gøre teksten mindre.
   ========================================================================== */

@media (max-width:1024px){

    /* Almindelig læsetekst */
    html body :where(
        main,
        section,
        article,
        aside,
        footer,
        [role="dialog"]
    ) :where(
        p,
        li,
        dd,
        dt,
        blockquote,
        figcaption
    ){
        font-weight:400 !important;
        color:var(--fristet-text,#D8C2AE) !important;
        -webkit-text-fill-color:var(--fristet-text,#D8C2AE) !important;
    }

    /* Sekundær tekst – lys nok, men visuelt roligere */
    html body :where(
        small,
        .small,
        .meta,
        .metadata,
        .muted,
        .hint,
        .help,
        .caption,
        .kicker,
        .counter,
        .eyebrow,
        .date,
        .time,
        .location,
        [class*="meta"],
        [class*="hint"],
        [class*="help"],
        [class*="caption"],
        [class*="kicker"],
        [class*="eyebrow"]
    ){
        font-weight:400 !important;
        color:#BFA894 !important;
        -webkit-text-fill-color:#BFA894 !important;
    }

    /* Playfair-overskrifter – mindre tunge */
    html body :where(h1,h2,h3,h4,h5,h6){
        font-weight:500 !important;
        color:var(--fristet-heading,#F4E4D1) !important;
        -webkit-text-fill-color:var(--fristet-heading,#F4E4D1) !important;
        letter-spacing:-.01em;
    }

    /* Strong/b må ikke blive meget fede på mørk baggrund */
    html body :where(
        main,
        section,
        article,
        aside,
        [role="dialog"]
    ) :where(strong,b){
        font-weight:600 !important;
    }

    /* Korte korttitler */
    html body :where(
        .card,
        [class$="-card"],
        [class$="__card"],
        .list-item,
        [class$="-item"],
        [class$="__item"]
    ) :where(
        h2,h3,h4,
        [class*="title"]
    ){
        font-weight:500 !important;
    }

    /* UI-labels må være tydelige uden at være tunge */
    html body :where(
        label,
        .label,
        .field-label,
        [class*="field-label"],
        [class*="form-label"]
    ){
        font-weight:500 !important;
    }

    /* Knapper/navigation */
    html body :where(
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        .btn,
        .button,
        [class$="-btn"],
        [class$="__btn"],
        [class$="-button"],
        [class$="__button"]
    ){
        font-weight:600 !important;
    }

    html body:not(.header-auth-page) .site-header__mobile-menu > a{
        font-weight:600 !important;
    }
}

/* Telefon: ekstra ro på de mørke kort */
@media (max-width:680px){

    /* Loungen + andre kortsystemer */
    html body :where(
        .lg-page,
        .salon-demo-lg8,
        .arr3-shell,
        .fristelser-page,
        .activity-detail-page,
        .profile-page,
        .profile-mobile,
        .profiler-page
    ) :where(
        h2,h3,h4
    ){
        font-weight:500 !important;
    }

    html body :where(
        .lg-page,
        .salon-demo-lg8,
        .arr3-shell,
        .fristelser-page,
        .activity-detail-page,
        .profile-page,
        .profile-mobile,
        .profiler-page
    ) :where(
        p,
        small,
        [class*="meta"],
        [class*="subtitle"],
        [class*="description"]
    ){
        font-weight:400 !important;
    }

    /* Lounge: korttitler der på billederne virker for tunge */
    html body .lg-page.lg8 :where(
        .lg-list-item h3,
        .lg-event h3,
        .lg8-salon h3,
        .lg8-personal-card h3,
        .lg-news-mini-content h3,
        .lg-profile-body h3
    ){
        font-weight:500 !important;
        letter-spacing:0 !important;
    }

    html body .lg-page.lg8 :where(
        .lg-list-item p,
        .lg-event p,
        .lg-profile-body p,
        .lg-news-mini-content p,
        .lg8-personal-card p
    ){
        font-weight:400 !important;
        color:#C8B19C !important;
        -webkit-text-fill-color:#C8B19C !important;
    }
}


/* ==========================================================================
   FRISTET.DK – GLOBAL MOBIL V7 · 01 / 02 / 03 / 04 LETTERE TYPOGRAFI
   Gælder Lounge-guidefelterne på mobil/tablet.
   ========================================================================== */
@media (max-width:1024px){

    /* Tallene 01–04 */
    html body .lg-page.lg8 .lg8-guide a > span{
        font-weight:500 !important;
        letter-spacing:.02em !important;
        color:var(--fristet-champagne,#E0B879) !important;
        -webkit-text-fill-color:var(--fristet-champagne,#E0B879) !important;
    }

    /* Titler: Seneste nyt / Nye bekendtskaber / Det sker / Dit område */
    html body .lg-page.lg8 .lg8-guide a > strong{
        font-weight:500 !important;
        letter-spacing:0 !important;
        color:var(--fristet-heading,#F4E4D1) !important;
        -webkit-text-fill-color:var(--fristet-heading,#F4E4D1) !important;
    }

    /* Hjælpeteksten under titlerne */
    html body .lg-page.lg8 .lg8-guide a > small{
        font-weight:400 !important;
        color:#C8B19C !important;
        -webkit-text-fill-color:#C8B19C !important;
    }
}

@media (max-width:680px){
    html body .lg-page.lg8 .lg8-guide a > span{
        font-weight:500 !important;
    }

    html body .lg-page.lg8 .lg8-guide a > strong{
        font-weight:500 !important;
    }

    html body .lg-page.lg8 .lg8-guide a > small{
        font-weight:400 !important;
    }
}