/* =========================================================
   GODT SMIL – komponent-styling (blokke + patterns)
   Bygger på tokens i style.css
   ========================================================= */

/* ---- Ikon-halo: peach cirkel + hot-orange linjeikon ---- */
.gs-halo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gs-peach);
    box-shadow: var(--shadow-halo);
    color: var(--gs-hot-orange);
}
.gs-halo svg { width: 26px; height: 26px; stroke-width: 2; }
.gs-halo--sm { width: 44px; height: 44px; }
.gs-halo--sm svg { width: 22px; height: 22px; }

/* =========================================================
   INFO-BOKS
   ========================================================= */
.gp-info-box {
    --box-accent: var(--gs-marigold);
    --box-bg:     var(--gs-peach);
    --box-title:  var(--gs-petrol);
    --box-text:   var(--gs-ink);

    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--box-bg);
    border: 1px solid var(--gs-grey-200);
    border-left: 5px solid var(--box-accent);
    border-radius: var(--radius-card);
    padding: 22px 26px;
    margin: 28px 0;
    box-shadow: var(--shadow);
    color: var(--box-text);
}
.gp-info-box__body { flex: 1 1 auto; min-width: 0; }
.gp-info-box__title {
    margin: 0 0 6px;
    font-family: "Nunito", sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--box-title);
}
.gp-info-box__text { margin: 0; }
.gp-info-box__text p { margin: 0 0 .6em; }
.gp-info-box__text p:last-child { margin-bottom: 0; }

/* Knap i info-boks (pille, marigold) */
.gp-info-box__btn {
    display: inline-block;
    margin-top: 14px;
    padding: 11px 24px;
    border-radius: var(--radius-pill);
    background: var(--gs-marigold);
    color: var(--gs-petrol-900) !important;
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    text-decoration: none;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.gp-info-box__btn:hover { background: var(--gs-marigold-600); transform: translateY(-2px); box-shadow: var(--shadow-cta); }

/* ---- Varianter ---- */
.gp-info-box.is-variant-peach   { --box-accent: var(--gs-marigold); --box-bg: var(--gs-peach);        --box-title: var(--gs-petrol); }
.gp-info-box.is-variant-info    { --box-accent: var(--gs-petrol);   --box-bg: var(--gs-grey-50);      --box-title: var(--gs-petrol); }
.gp-info-box.is-variant-success { --box-accent: var(--gs-success);  --box-bg: var(--gs-success-soft); --box-title: #0a7a55; }
.gp-info-box.is-variant-warning { --box-accent: var(--gs-marigold); --box-bg: var(--gs-warning-soft); --box-title: #9a5f0a; }
.gp-info-box.is-variant-danger  { --box-accent: var(--gs-danger);   --box-bg: var(--gs-danger-soft);  --box-title: #a8362c; }

/* Mørk teal-variant (stærk fremhævelse) */
.gp-info-box.is-variant-teal {
    --box-bg: var(--gs-petrol);
    --box-accent: var(--gs-marigold);
    --box-title: #fff;
    --box-text: rgba(255,255,255,.92);
    border-color: var(--gs-petrol-800);
}
.gp-info-box.is-variant-teal .gs-halo { background: rgba(255,255,255,.12); color: var(--gs-marigold); }

@media (max-width: 600px) {
    .gp-info-box { flex-direction: column; gap: 12px; padding: 20px; }
}

/* =========================================================
   USP / FORDELE-KORT
   ========================================================= */
.gp-usp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 36px 0;
}
.gp-usp-card {
    background: var(--gs-white);
    border: 1px solid var(--gs-grey-200);
    border-radius: var(--radius-card);
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gp-usp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gp-usp-card .gs-halo { width: 72px; height: 72px; margin: 0 auto 16px; }
.gp-usp-card .gs-halo svg { width: 32px; height: 32px; }
.gp-usp-card h3 { margin: 0 0 8px; font-size: 1.2rem; color: var(--gs-petrol); }
.gp-usp-card p  { margin: 0; color: var(--gs-grey-700); }

@media (max-width: 768px) { .gp-usp-grid { grid-template-columns: 1fr; } }

/* =========================================================
   CTA-BANNER (mørk petrol-sektion)
   ========================================================= */
.gp-cta-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--gs-petrol);
    color: #fff;
    border-radius: var(--radius-panel);
    padding: 40px 44px;
    margin: 40px 0;
    box-shadow: var(--shadow-lg);
}
.gp-cta-banner__text { flex: 1 1 320px; }
.gp-cta-banner__text h2 { color: #fff; margin: 0 0 6px; }
.gp-cta-banner__text p  { color: rgba(255,255,255,.85); margin: 0; }
.gp-cta-banner__action a {
    display: inline-block;
    background: var(--gs-marigold);
    color: var(--gs-petrol-900) !important;
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    padding: 15px 32px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.gp-cta-banner__action a:hover { background: var(--gs-marigold-600); transform: translateY(-2px); box-shadow: var(--shadow-cta); }

@media (max-width: 600px) { .gp-cta-banner { padding: 30px; text-align: center; justify-content: center; } }

/* =========================================================
   FORSIDE-HERO
   ========================================================= */
/* Hero helt op til toppen når den ligger først på siden */
.entry-content > .gp-hero:first-child,
.gp-hero:first-child { margin-top: 0 !important; }
.entry-content:has(> .gp-hero:first-child) { padding-top: 0 !important; margin-top: 0 !important; }
.inside-article:has(.gp-hero:first-child) { padding-top: 0 !important; border-top: 0; }
.site-main:has(.gp-hero:first-child),
.site-content:has(.gp-hero:first-child),
.content-area:has(.gp-hero:first-child) { padding-top: 0 !important; }

.gp-hero {
    position: relative;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--gs-peach);
    padding: 76px 24px;
}
/* Bløde dekorative cirkler (flade peach-toner, ingen travl gradient) */
.gp-hero::before, .gp-hero::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.gp-hero::before { width: 320px; height: 320px; top: -120px; right: -70px; background: var(--gs-peach-200); }
.gp-hero::after  { width: 220px; height: 220px; bottom: -100px; left: -60px; background: rgba(250,166,27,.10); }

.gp-hero__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.gp-hero__card {
    background: var(--gs-white);
    border: 1px solid var(--gs-grey-200);
    border-radius: var(--radius-panel);
    padding: 48px 48px 44px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.gp-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: "Nunito", sans-serif; font-weight: 800;
    font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gs-marigold); margin-bottom: 20px;
}
.gp-hero__badge svg { width: 16px; height: 16px; }
.gp-hero__title { margin: 0 0 18px; font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); line-height: 1.16; color: var(--gs-petrol); font-weight: 900; }
.gp-hero__text { margin: 0 auto 16px; max-width: 60ch; font-size: 1.12rem; line-height: 1.65; color: var(--gs-grey-700); }
.gp-hero__text:last-of-type { margin-bottom: 30px; }
.gp-hero__cta {
    display: inline-block; background: var(--gs-marigold); color: var(--gs-petrol-900) !important;
    font-family: "Nunito", sans-serif; font-weight: 800; font-size: 1.05rem;
    padding: 16px 38px; border-radius: var(--radius-pill); text-decoration: none;
    box-shadow: var(--shadow-cta);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.gp-hero__cta:hover { background: var(--gs-marigold-600); transform: translateY(-2px); }

@media (max-width: 600px) { .gp-hero { padding: 52px 16px; } .gp-hero__card { padding: 32px 22px 30px; border-radius: var(--radius-card); } }

/* =========================================================
   ARTIKEL-ELEMENTER
   ========================================================= */
.gp-lead { font-size: 1.2rem; line-height: 1.7; color: var(--gs-ink); }

/* Nummereret sektions-overskrift (petrol cirkel) */
.gp-numbered { display: flex; align-items: center; gap: 16px; margin: 48px 0 14px; }
.gp-numbered__num {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--gs-petrol); color: #fff;
    font-family: "Nunito", sans-serif; font-weight: 900; font-size: 1.25rem;
    box-shadow: var(--shadow);
}
.gp-numbered__title { margin: 0; font-size: 1.45rem; line-height: 1.2; color: var(--gs-petrol); font-weight: 800; }

/* Tidslinje */
.gp-timeline { list-style: none; margin: 28px 0; padding: 0; position: relative; }
.gp-timeline::before { content: ""; position: absolute; left: 33px; top: 10px; bottom: 10px; width: 2px; background: var(--gs-peach-200); }
.gp-timeline__item { position: relative; display: flex; gap: 20px; align-items: flex-start; padding: 0 0 24px; }
.gp-timeline__item:last-child { padding-bottom: 0; }
.gp-timeline__year {
    flex: 0 0 auto; position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--gs-white); border: 3px solid var(--gs-marigold);
    color: var(--gs-petrol); font-family: "Nunito", sans-serif; font-weight: 900; font-size: 1rem;
    box-shadow: var(--shadow-sm);
}
.gp-timeline__body { padding-top: 8px; }
.gp-timeline__body strong { display: block; color: var(--gs-petrol); font-family: "Nunito", sans-serif; font-weight: 800; margin-bottom: 2px; }
.gp-timeline__body p { margin: 0; color: var(--gs-grey-700); }

/* Del / share-boks */
.gp-share {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: var(--gs-peach); border: 1px solid var(--gs-peach-200);
    border-radius: var(--radius-card); padding: 24px 28px; margin: 36px 0;
}
.gp-share__body { flex: 1 1 240px; }
.gp-share__body strong { display: block; color: var(--gs-petrol); font-family: "Nunito", sans-serif; font-weight: 800; font-size: 1.08rem; }
.gp-share__body p { margin: 2px 0 0; color: var(--gs-grey-700); }

/* Fodnoter / kilder */
.gp-ref { font-size: .72em; vertical-align: super; line-height: 0; }
.gp-ref a { text-decoration: none; color: var(--gs-marigold-600); font-weight: 800; }
.gp-footnotes { margin: 44px 0 0; padding: 22px 26px; background: var(--gs-grey-50); border-radius: var(--radius-card); font-size: .94rem; color: var(--gs-grey-700); }
.gp-footnotes h2 { font-size: 1.05rem; margin: 0 0 10px; color: var(--gs-petrol); }
.gp-footnotes ol { margin: 0; padding-left: 20px; }
.gp-footnotes li { margin-bottom: 6px; }

@media (max-width: 600px) {
    .gp-numbered__num { width: 42px; height: 42px; font-size: 1.1rem; }
    .gp-numbered__title { font-size: 1.22rem; }
    .gp-timeline::before { left: 29px; }
    .gp-timeline__year { width: 60px; height: 60px; }
}

/* Respektér reduceret bevægelse */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; }
    .gp-usp-card:hover, .gp-hero__cta:hover, .gp-info-box__btn:hover,
    .gp-cta-banner__action a:hover, .wp-block-button__link:hover { transform: none; }
}