/*
Theme Name:   HHXOpgaver
Theme URI:    https://hhxopgaver.dk
Author:       HHXOpgaver.dk
Author URI:   https://hhxopgaver.dk
Description:  Skræddersyet, letvægts WordPress-tema bygget til HHXOpgaver-pluginet. Definerer det designtoken-kontrakt (--hhx-*, --color-*, --border-radius-*), som pluginets egen CSS (assets/css/hhxo.css) forventer fra det aktive tema, og tilføjer sidechrome (header, footer, navigation, blogindlæg) omkring pluginets indhold. Ingen eksterne skrifttyper eller CDN-kald – alt er selvforsynende for hurtigst mulig indlæsning på delt webhotel.
Version:      1.0.2
Requires PHP: 8.0
Text Domain:  hhxo-theme
*/

/* ================================================================
   1. DESIGNTOKENS
   ================================================================
   Dette er kontrakten pluginets egen stylesheet (hhxo.css) er skrevet
   imod. Uden disse variabler falder mange af pluginets komponenter
   tilbage til browserens standardværdier og ser uafsluttede ud.
   Værdierne her er afledt af den farvepalet, der allerede er etableret
   gennem pluginets 60+ versioner (navy #003399 som primærfarve, en
   Tailwind-lignende slate-neutral-skala, og semantiske farver til
   success/danger/warning/info).
   ================================================================ */
:root {
    /* --- Pluginets egne "hhx-" mærkevaretokens --- */
    --hhx-bg:          #f8fafc;
    --hhx-surface:     #ffffff;
    --hhx-border:      #e2e8f0;
    --hhx-text:        #1a202c;
    --hhx-text-muted:  #64748b;
    --hhx-muted:       #64748b;
    --hhx-primary:     #003399;
    --hhx-white:       #ffffff;

    /* --- Semantisk "color-*" tokenfamilie brugt i hhxo.css --- */
    --color-background-primary:   #ffffff;
    --color-background-secondary: #f8fafc;
    --color-background-info:      #eff6ff;
    --color-border-secondary:     #e2e8f0;
    --color-border-tertiary:      #edf1f5;
    --color-border-info:          #bfdbfe;
    --color-text-primary:         #1a202c;
    --color-text-secondary:       #64748b;
    --color-text-info:            #1d4ed8;
    --color-text-danger:          #dc2626;

    /* --- Afrunding --- */
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* --- Standard fag-gradient (matcher hhxo_cover_gradient default) --- */
    --fag-gradient: linear-gradient(135deg, #003399, #1d4ed8);

    /* --- Semantiske statusfarver (matcher pluginets alerts/badges) --- */
    --hhx-success:      #16a34a;
    --hhx-success-dark: #15803d;
    --hhx-danger:       #dc2626;
    --hhx-warning:      #d97706;
    --hhx-accent:       #7c3aed;

    /* --- Typografi: bevidst uden eksterne skrifttyper (ingen Google
       Fonts/CDN-kald) for at holde siden hurtig på delt webhotel og
       undgå unødige tredjeparts-forbindelser. Tre roller, hver sit
       systemfont-stak: en redaktionel serif til overskrifter (autoritet,
       "eksamenspapir"), en hurtig grotesk til brødtekst, og en monospace
       til tal/karakterer/point (ensartet bredde, læses som data). --- */
    --font-display: ui-serif, "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
    --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --container-width: 1180px;
}

@media (prefers-color-scheme: dark) {
    /* Pluginets egen dark-mode-logik (hhxo.css) overstyrer allerede
       --hhx-* i mørk visning og lytter efter body.hhx-site. Vi lader den
       styre dét; her justerer vi kun vores egne --color-*-tokens til
       samme mørke stemning, så tema-chrome og plugin-UI følges ad. */
    :root {
        --color-background-primary:   #1e293b;
        --color-background-secondary: #0f172a;
        --color-background-info:      #1e3a5f;
        --color-border-secondary:     #334155;
        --color-border-tertiary:      #334155;
        --color-border-info:          #1d4ed8;
        --color-text-primary:         #e2e8f0;
        --color-text-secondary:       #94a3b8;
        --color-text-info:            #60a5fa;
    }
}

/* ================================================================
   2. RESET + BASIS
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--hhx-text);
    background: var(--hhx-bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--hhx-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.25;
    color: var(--hhx-text);
    margin: 0 0 .5em;
}
h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

/* Synlig fokusring – tilgængelighed */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--hhx-primary);
    outline-offset: 2px;
}

/* Skip-link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    background: var(--hhx-primary);
    color: #fff;
    padding: 12px 20px;
    z-index: 100000;
    border-radius: 0 0 var(--border-radius-md) 0;
}
.skip-link:focus {
    left: 0;
    top: 0;
}

/* Skærmlæser-kun tekst */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ================================================================
   3. LAYOUT
   ================================================================ */
.hhxo-theme-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header --- */
.site-header {
    background: var(--hhx-surface);
    border-bottom: 1px solid var(--hhx-border);
    position: sticky;
    top: 0;
    z-index: 500;
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 20px;
    max-width: var(--container-width);
    margin: 0 auto;
}
.site-branding { display: flex; align-items: center; gap: 10px; }
.site-branding img { max-height: 40px; width: auto; }
.site-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hhx-primary);
    margin: 0;
}
.site-title a { color: inherit; }
.site-title a:hover { text-decoration: none; }
.site-description {
    font-size: 12px;
    color: var(--hhx-text-muted);
    margin: 0;
    display: block;
}

.main-navigation { display: flex; align-items: center; gap: 4px; }
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.main-navigation li { position: relative; }
.main-navigation a {
    display: block;
    padding: 10px 14px;
    color: var(--hhx-text);
    font-weight: 500;
    font-size: 14.5px;
    border-radius: var(--border-radius-md);
    transition: background .12s, color .12s;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    background: var(--color-background-info);
    color: var(--hhx-primary);
    text-decoration: none;
}
.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: var(--hhx-surface);
    border: 1px solid var(--hhx-border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    min-width: 200px;
    flex-direction: column;
    padding: 6px;
    z-index: 10;
}
.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul { display: flex; }

.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--hhx-border);
    border-radius: var(--border-radius-md);
    padding: 8px 10px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--hhx-text);
}

.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .hhxo-btn {
    padding: 8px 16px;
    font-size: 13.5px;
}

@media (max-width: 860px) {
    .menu-toggle { display: inline-flex; align-items: center; gap: 6px; }
    .main-navigation { position: relative; }
    .main-navigation ul.primary-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; right: 0;
        background: var(--hhx-surface);
        border: 1px solid var(--hhx-border);
        border-radius: var(--border-radius-md);
        box-shadow: 0 12px 32px rgba(15,23,42,.12);
        min-width: 220px;
        padding: 8px;
    }
    .main-navigation.is-open ul.primary-menu { display: flex; }
    .main-navigation ul ul { position: static; box-shadow: none; border: none; padding-left: 12px; }
}

/* --- Homepage hero (kun vist på den reelle forside, uden plugin-rute) --- */
.hhxo-hero {
    background: linear-gradient(180deg, #eef2ff 0%, var(--hhx-bg) 100%);
    padding: 56px 20px 40px;
    border-bottom: 1px solid var(--hhx-border);
}
.hhxo-hero-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    text-align: center;
}
.hhxo-hero h1 {
    max-width: 760px;
    margin: 0 auto .4em;
}
.hhxo-hero-lead {
    max-width: 560px;
    margin: 0 auto 28px;
    color: var(--hhx-text-muted);
    font-size: 1.05rem;
}
.hhxo-hero-search {
    display: flex;
    max-width: 520px;
    margin: 0 auto 36px;
    gap: 8px;
}
.hhxo-hero-search input[type="text"],
.hhxo-hero-search input[type="search"] {
    flex: 1;
    padding: 13px 16px;
    border: 1px solid var(--hhx-border);
    border-radius: var(--border-radius-md);
    font-size: 15px;
    font-family: var(--font-body);
}

/* Signatur: karakterlinje – den danske 7-trins-skala som visuelt motiv.
   Enhver HHX-elev genkender den med det samme; her bruges den til at
   understrege at alt indhold er kvalitetsbedømt efter samme skala,
   inden det bliver synligt for andre. Det røde "stempel" om topkarakteren
   er et bevidst nik til en lærers rettepen. */
.hhxo-karakterlinje {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    max-width: 620px;
    margin: 0 auto;
    padding: 0 10px;
}
.hhxo-karakterlinje .trin {
    flex: 1;
    text-align: center;
    position: relative;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--hhx-text-muted);
    padding-top: 14px;
}
.hhxo-karakterlinje .trin::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hhx-border);
}
.hhxo-karakterlinje::before {
    /* Vandret linje bag prikkerne */
    content: "";
}
.hhxo-karakterlinje .trin.er-top {
    color: var(--hhx-danger);
    font-weight: 700;
}
.hhxo-karakterlinje .trin.er-top::before {
    background: transparent;
    width: 22px; height: 22px;
    top: -8px;
    border: 2px solid var(--hhx-danger);
    border-radius: 50%;
}
.hhxo-karakterlinje-track {
    position: relative;
    height: 1px;
    background: var(--hhx-border);
    max-width: 620px;
    margin: 24px auto 0;
}

/* --- Kategori-fliser på forsiden --- */
.hhxo-home-section {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 44px 20px;
}
.hhxo-home-section h2 {
    text-align: center;
    margin-bottom: 8px;
}
.hhxo-home-section .hhxo-section-lead {
    text-align: center;
    color: var(--hhx-text-muted);
    max-width: 560px;
    margin: 0 auto 28px;
}
.hhxo-home-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.hhxo-home-cat {
    background: var(--hhx-surface);
    border: 1px solid var(--hhx-border);
    border-radius: var(--border-radius-lg);
    padding: 18px 14px;
    text-align: center;
    transition: border-color .12s, transform .12s;
}
.hhxo-home-cat:hover {
    border-color: var(--hhx-primary);
    text-decoration: none;
    transform: translateY(-2px);
}
.hhxo-home-cat strong { display: block; color: var(--hhx-text); font-size: 14.5px; }

/* --- Generisk indholds-wrapper (bruges på almindelige sider) --- */
.hhxo-theme-content {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 36px 20px 60px;
}
.hhxo-theme-content--with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
}
@media (max-width: 900px) {
    .hhxo-theme-content--with-sidebar { grid-template-columns: 1fr; }
}

/* --- Blogindlæg-kort (arkiv/indeks) --- */
.hhxo-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}
.hhxo-post-card {
    background: var(--hhx-surface);
    border: 1px solid var(--hhx-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hhxo-post-card img { aspect-ratio: 16/9; object-fit: cover; }
.hhxo-post-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hhxo-post-card h3 { font-size: 1.05rem; margin: 0; }
.hhxo-post-card h3 a { color: var(--hhx-text); }
.hhxo-post-card h3 a:hover { color: var(--hhx-primary); text-decoration: none; }
.hhxo-post-meta { font-size: 12.5px; color: var(--hhx-text-muted); font-family: var(--font-mono); }
.hhxo-post-excerpt { font-size: 14px; color: var(--color-text-secondary); flex: 1; }

/* --- Enkelt blogindlæg --- */
.hhxo-post-header { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.hhxo-post-header h1 { margin-bottom: 10px; }
.hhxo-post-content {
    max-width: 760px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.75;
}
.hhxo-post-content h2 { margin-top: 1.6em; }
.hhxo-post-content h3 { margin-top: 1.3em; }
.hhxo-post-content img { border-radius: var(--border-radius-md); margin: 1.2em 0; }
.hhxo-post-content blockquote {
    border-left: 3px solid var(--hhx-primary);
    margin: 1.4em 0;
    padding: .2em 1.2em;
    color: var(--hhx-text-muted);
    font-style: italic;
}
.hhxo-post-views { font-family: var(--font-mono); }

/* --- Widget-områder --- */
.widget { margin-bottom: 28px; }
.widget-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hhx-text-muted);
    margin-bottom: 12px;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 6px 0; border-bottom: 1px solid var(--hhx-border); font-size: 14px; }
.widget li:last-child { border-bottom: none; }

/* --- Footer --- */
.site-footer {
    background: var(--hhx-text);
    color: #cbd5e1;
    margin-top: 60px;
}
.site-footer a { color: #e2e8f0; }
.footer-widgets {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 44px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}
.footer-widgets .widget-title { color: #f1f5f9; }
.footer-widgets .widget li { border-bottom-color: rgba(255,255,255,.08); }
.site-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 18px 20px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
}
.site-footer-bottom a { color: #cbd5e1; }
.footer-menu-inline { display: inline; list-style: none; padding: 0; margin: 0; }
.footer-menu-inline li { display: inline; margin-left: 6px; }

/* --- 404 --- */
.hhxo-404 { text-align: center; padding: 80px 20px; max-width: 520px; margin: 0 auto; }
.hhxo-404 .kode { font-family: var(--font-mono); font-size: 3.5rem; color: var(--hhx-primary); font-weight: 700; }

/* --- Kommentarer (native WP, hvis aktiveret på blogindlæg) --- */
.comments-area { max-width: 760px; margin: 40px auto 0; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body { border: 1px solid var(--hhx-border); border-radius: var(--border-radius-md); padding: 14px 16px; margin-bottom: 14px; }
.comment-meta { font-size: 12.5px; color: var(--hhx-text-muted); margin-bottom: 6px; }
.comment-respond input, .comment-respond textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--hhx-border);
    border-radius: var(--border-radius-md);
    font-family: var(--font-body);
    box-sizing: border-box;
}

/* --- Fallback-knap (matcher pluginets .hhxo-btn hvis siden ikke har det) --- */
.hhxo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hhx-primary);
    color: #fff;
    border: none;
    padding: 11px 20px;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.hhxo-btn:hover { background: #002a80; color: #fff; text-decoration: none; }
.hhxo-btn-outline { background: transparent; color: var(--hhx-primary); border: 1px solid var(--hhx-primary); }
.hhxo-btn-outline:hover { background: var(--color-background-info); color: var(--hhx-primary); }