/*
Theme Name: FodboldTrivia
Description: Tema til FodboldTrivia med mørk stadiongrøn bane, kridthvide linjer og projektørgult. Forsiden viser quizzen fra pluginet FodboldTrivia.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Author: FodboldTrivia
License: GPL-2.0-or-later
Text Domain: fodboldtrivia-tema
*/

/* Layout: smal centreret spalte på en klippet nattebane; mørk resultattavle-header, indhold i én kolonne. */
:root{
 --pitch:#0B2A1F;--pitch-stripe:rgba(255,255,255,.022);--panel:#113627;--panel-2:#17452F;--board:#06170F;
 --chalk:#F2EFE3;--chalk-2:#C6D2C6;--chalk-3:#8EA697;--line:rgba(242,239,227,.14);--line-2:rgba(242,239,227,.3);
 --flood:#FFC83A;--flood-ink:#2B1E00;
 --f-display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
 --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
 --f-num:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
 color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--pitch)}
body{margin:0;background:var(--pitch) repeating-linear-gradient(90deg,transparent 0 70px,var(--pitch-stripe) 70px 140px);color:var(--chalk);font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto}
a{color:var(--flood);text-underline-offset:3px}
a:hover{color:#FFD465}
:focus-visible{outline:2px solid var(--flood);outline-offset:2px}
.ftt-skip{position:absolute;left:-9999px;top:8px;background:var(--flood);color:var(--flood-ink);padding:8px 14px;border-radius:8px;z-index:100;font-weight:700}
.ftt-skip:focus{left:12px}
.ftt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--board);z-index:60}

/* header */
.ftt-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--board);border-bottom:1px solid var(--line)}
.admin-bar .ftt-header{top:32px}
@media (max-width:782px){.admin-bar .ftt-header{top:46px}}
.ftt-header-in{max-width:1080px;margin:0 auto;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:16px}
.ftt-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--chalk);font-family:var(--f-display);font-weight:900;font-size:24px;letter-spacing:.02em;line-height:1}
.ftt-brand b{color:var(--flood);font-weight:inherit}
.ftt-brand:hover{color:var(--chalk)}
.custom-logo-link img{max-height:44px;width:auto}
.ftt-nav{margin-left:auto}
.ftt-menu{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.ftt-menu a{display:block;padding:8px 14px;border-radius:999px;color:var(--chalk-2);text-decoration:none;font-weight:600;font-size:15px}
.ftt-menu a:hover,.ftt-menu .current-menu-item>a,.ftt-menu .current_page_item>a{background:var(--panel-2);color:var(--chalk)}
.ftt-navtoggle{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:none;color:var(--chalk);cursor:pointer;align-items:center;justify-content:center}
.ftt-burger,.ftt-burger::before,.ftt-burger::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative}
.ftt-burger::before,.ftt-burger::after{content:"";position:absolute;left:0}
.ftt-burger::before{top:-6px}.ftt-burger::after{top:6px}
@media (max-width:720px){
 .ftt-navtoggle{display:inline-flex}
 .ftt-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--board);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}
 .ftt-nav.open{display:block}
 .ftt-menu{flex-direction:column}
 .ftt-menu a{padding:12px 14px;border-radius:10px}
}

/* indhold */
.ftt-main{flex:1;width:100%}
.ftt-main>.ft-app{border-radius:0}
.ftt-container{max-width:760px;margin:0 auto;padding:36px max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px))}
.ftt-front-content{padding-top:8px;border-top:1px solid var(--line)}
.ftt-title{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,9vw,72px);line-height:.95;margin:0 0 20px;text-wrap:balance}
.ftt-eyebrow{font-family:var(--f-num);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--chalk-3);margin:0 0 6px}
.ftt-content h2,.ftt-content h3,.ftt-content h4{font-family:var(--f-display);font-weight:700;line-height:1.05;margin:1.6em 0 .5em;text-wrap:balance}
.ftt-content h2{font-size:34px}.ftt-content h3{font-size:26px}.ftt-content h4{font-size:21px}
.ftt-content p,.ftt-content ul,.ftt-content ol{max-width:65ch}
.ftt-content li{margin:.25em 0}
.ftt-content blockquote{margin:1.5em 0;padding:4px 0 4px 18px;border-left:3px solid var(--flood);color:var(--chalk-2);border-radius:0}
.ftt-content hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.ftt-content table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.ftt-content th,.ftt-content td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;font-variant-numeric:tabular-nums}
.ftt-content th{font-family:var(--f-num);text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--chalk-3)}
.ftt-content code{font-size:.9em;background:var(--panel);padding:2px 6px;border-radius:6px}
.ftt-content figure{margin:1.6em 0}
.ftt-content figcaption{font-size:14px;color:var(--chalk-3);margin-top:6px}
.ftt-btn,.wp-block-button__link,.ftt-content input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;background:var(--flood);color:var(--flood-ink)!important;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-family:var(--f-body);font-size:16px}
.ftt-btn:hover,.wp-block-button__link:hover{background:#FFD465}
.is-style-outline .wp-block-button__link{background:none;color:var(--chalk)!important;border:1.5px solid var(--line-2)}
.ftt-notice{background:var(--panel);border:1px solid var(--flood);border-radius:12px;margin-top:24px;padding:16px 20px}
.ftt-list{display:grid;gap:12px}
.ftt-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.ftt-item h2{margin:0 0 6px;font-size:28px}
.ftt-item h2 a{color:var(--chalk);text-decoration:none}
.ftt-item h2 a:hover{color:var(--flood)}
.ftt-item p{margin:0;color:var(--chalk-2)}
.nav-links{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.nav-links .page-numbers{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--chalk);text-decoration:none;font-family:var(--f-num);font-weight:600}
.nav-links .current{background:var(--flood);color:var(--flood-ink);border-color:var(--flood)}
.ftt-404 .ftt-title{font-size:clamp(64px,18vw,140px)}
.alignwide{max-width:min(1080px,calc(100vw - 32px))}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}

/* kommentarer og formularer */
.ftt-content input[type=text],.ftt-content input[type=email],.ftt-content input[type=url],.ftt-content textarea{width:100%;background:rgba(0,0,0,.25);border:1.5px solid var(--line-2);border-radius:10px;color:var(--chalk);font:inherit;padding:10px 12px}
.comment-list{list-style:none;padding:0}
.comment-body{background:var(--panel);border-radius:12px;padding:14px 16px;margin-bottom:10px}

/* footer */
.ftt-footer{background:var(--board);border-top:1px solid var(--line);margin-top:auto}
.ftt-footer-in{max-width:1080px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:start}
.ftt-footer-brand p{margin:8px 0 0;color:var(--chalk-3);font-size:15px;max-width:42ch}
.ftt-footmenu{list-style:none;margin:0;padding:0;display:flex;gap:4px 18px;flex-wrap:wrap}
.ftt-footmenu a{color:var(--chalk-2);text-decoration:none;font-size:15px}
.ftt-footmenu a:hover{color:var(--chalk)}
.ftt-copy{grid-column:1/-1;margin:0;font-size:13px;color:var(--chalk-3);font-family:var(--f-num);letter-spacing:.06em}
@media (max-width:600px){.ftt-footer-in{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}