/*
Theme Name: Mejlshede Gruppen
Theme URI: https://mejlshede.dk
Author: Mejlshede Laase A/S
Description: Faelles tema til Mejlshede Gruppens sites (mejlshede.dk, gla.dk m.fl.). Logo, firmadata, butikker og indhold saettes pr. site under Tilpas + Ydelser-pluginets indstillinger. Deler designsprog med Ydelser-pluginet (Onest, orange accent, moerke sektioner, skarpe hjoerner).
Version: 0.66.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mejlshede
*/

/* ==========================================================================
   Fonts (Onest)
   ========================================================================== */
@font-face { font-family: 'Onest'; src: url('assets/fonts/Onest-Regular.ttf') format('truetype');  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('assets/fonts/Onest-Medium.ttf') format('truetype');   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('assets/fonts/Onest-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('assets/fonts/Onest-Bold.ttf') format('truetype');     font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('assets/fonts/Onest-ExtraBold.ttf') format('truetype');font-weight: 800; font-style: normal; font-display: swap; }

/* ==========================================================================
   Design tokens — delt 1:1 med Ydelser-pluginet
   ========================================================================== */
:root {
    --mejl-brand:        #FF6601;
    --mejl-brand-hover:  #D95500;
    --mejl-brand-light:  #FFF0E0;

    --mejl-bg:           #FAFAFA;
    --mejl-bg-card:      #FFFFFF;
    --mejl-dark:         #1A1A1A;

    --mejl-ink:          #1A1A1A;
    --mejl-ink-muted:    #5C5C5C;
    --mejl-ink-light:    #8A8A8A;
    --mejl-border:       #E5E5E5;
    --mejl-border-dark:  rgba(255, 255, 255, 0.14);

    --mejl-font:         'Onest', sans-serif;
    --mejl-radius:       0;
    --mejl-side-padding: clamp(24px, 6vw, 100px);
    --mejl-maxw:         1280px;
    --mejl-header-h:     76px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--mejl-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--mejl-ink);
    background: var(--mejl-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mejl-brand); text-decoration: none; }
a:hover { color: var(--mejl-brand-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mejl-font);
    color: var(--mejl-ink);
    line-height: 1.15;
    margin: 0 0 0.5em;
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.5vw, 44px); }
h3 { font-size: clamp(20px, 2vw, 26px); }

p { margin: 0 0 1em; }

button { font-family: inherit; }

:focus-visible {
    outline: 3px solid var(--mejl-brand);
    outline-offset: 2px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.mejl-container {
    width: 100%;
    max-width: var(--mejl-maxw);
    margin: 0 auto;
    padding-left: var(--mejl-side-padding);
    padding-right: var(--mejl-side-padding);
}

.mejl-bleed {
    width: 100%;
    padding-left: var(--mejl-side-padding);
    padding-right: var(--mejl-side-padding);
}

/* Eyebrow label — samme motiv som pluginets sektion-labels */
.mejl-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mejl-brand);
    margin: 0 0 14px;
}

/* Knapper — skarpe hjoerner, samme stil som pluginet */
.mejl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 28px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--mejl-radius);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.mejl-btn--primary { background: var(--mejl-brand); color: var(--mejl-dark); }
.mejl-btn--primary:hover { background: var(--mejl-brand-hover); color: var(--mejl-dark); transform: translateY(-1px); }
.mejl-btn--ghost { background: transparent; border-color: currentColor; color: var(--mejl-ink); }
.mejl-btn--ghost:hover { background: var(--mejl-ink); color: #fff; }

/* Skip link (tilgaengelighed) */
.mejl-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--mejl-dark);
    color: #fff;
    padding: 12px 20px;
}
.mejl-skip-link:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}