/*
Theme Name: Company-IT 24/7
Theme URI: https://company-it.dk
Author: MS Multiservice
Description: 24/7 IT-support, Claude AI-løsninger, Microsoft-support og blog. Mørkt driftcentral-design med live statusboard.
Version: 2.1.0
License: GNU General Public License v2 or later
Text Domain: company-it
*/

/* ============ TOKENS ============ */
:root{
  --night:#0A1626;
  --panel:#12233A;
  --panel-2:#182D49;
  --line:#24405F;
  --paper:#F3F6FA;
  --card:#FFFFFF;
  --ink:#E9F0F8;
  --ink-dark:#12233A;
  --mist:#8DA3BC;
  --mist-dark:#5B7089;
  --amber:#FFB13D;
  --amber-deep:#E8940F;
  --online:#3DDC97;
  --danger:#FF6B6B;
  --radius:14px;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{font-family:var(--font-body);background:var(--night);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;font-weight:700;letter-spacing:-.01em}
.mono{font-family:var(--font-mono)}

:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}

/* ============ HEADER ============ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(10,22,38,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.15rem}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-mono);font-size:.7rem;color:var(--amber);font-weight:600}
.brand-247{color:var(--amber)}
.main-nav{display:flex;align-items:center;gap:26px}
.main-nav a{font-size:.92rem;color:var(--mist);transition:color .15s}
.main-nav a:hover{color:var(--ink)}
.nav-status{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.72rem;color:var(--online);border:1px solid var(--line);padding:7px 12px;border-radius:99px;background:var(--panel)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--online);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.5)}50%{box-shadow:0 0 0 6px rgba(61,220,151,0)}}
.nav-cta{background:var(--amber);color:#1A1002!important;font-weight:600;padding:9px 18px;border-radius:10px;transition:background .15s}
.nav-cta:hover{background:var(--amber-deep)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 12px;font-size:1.1rem;cursor:pointer}

/* ============ HERO ============ */
.hero{padding:150px 0 90px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;background:
  radial-gradient(700px 420px at 78% 22%,rgba(255,177,61,.10),transparent 60%),
  radial-gradient(560px 380px at 15% 70%,rgba(61,220,151,.06),transparent 60%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber)}
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem);margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.lede{font-size:1.12rem;color:var(--mist);max-width:34rem;margin-bottom:32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:12px;font-weight:600;font-size:.98rem;transition:transform .15s,background .15s;border:0;cursor:pointer;font-family:var(--font-body)}
.btn-primary{background:var(--amber);color:#1A1002}
.btn-primary:hover{background:var(--amber-deep);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap}
.hero-tags span{font-family:var(--font-mono);font-size:.72rem;color:var(--mist);border:1px solid var(--line);border-radius:99px;padding:6px 12px;background:rgba(18,35,58,.6)}

/* Statusboard — signaturelement */
.statusboard{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.sb-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.sb-head .title{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.sb-live{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.72rem;color:var(--online)}
.sb-clock{padding:26px 20px 6px;text-align:center}
.sb-clock .time{font-family:var(--font-mono);font-size:2.8rem;font-weight:600;color:var(--ink);letter-spacing:.04em}
.sb-clock .label{font-family:var(--font-mono);font-size:.72rem;color:var(--mist);margin-top:4px}
.sb-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:20px 0 0}
.sb-metrics div{background:var(--panel);padding:16px 12px;text-align:center}
.sb-metrics .val{font-family:var(--font-mono);font-size:1.25rem;color:var(--amber);font-weight:600}
.sb-metrics .key{font-size:.72rem;color:var(--mist);margin-top:2px}
.sb-log{padding:16px 20px 20px;border-top:1px solid var(--line)}
.sb-log .row{display:flex;gap:12px;font-family:var(--font-mono);font-size:.74rem;color:var(--mist);padding:5px 0}
.sb-log .row .t{color:var(--amber);flex:0 0 46px}
.sb-log .row .ok{color:var(--online)}

/* ============ SECTIONS ============ */
.section{padding:96px 0}
.section-light{background:var(--paper);color:var(--ink-dark)}
.section-light .sec-sub{color:var(--mist-dark)}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:10px 0 14px}
.sec-sub{color:var(--mist);font-size:1.05rem}
.section-light .eyebrow{color:var(--amber-deep)}
.section-light .eyebrow::before{background:var(--amber-deep)}

/* Ydelser */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc{background:var(--card);border:1px solid #E2E9F1;border-radius:var(--radius);padding:26px 22px;transition:transform .18s,box-shadow .18s;position:relative}
.svc:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(18,35,58,.12)}
.svc .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:16px;background:#FFF3DF;border:1px solid #FFE1B0}
.svc h3{font-size:1.08rem;margin-bottom:8px;color:var(--ink-dark)}
.svc p{font-size:.9rem;color:var(--mist-dark)}
.svc .chip{position:absolute;top:16px;right:16px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;background:var(--night);color:var(--amber);padding:4px 8px;border-radius:6px}

/* Claude feature */
.claude-sec .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feat-list{list-style:none;margin-top:26px;display:grid;gap:16px}
.feat-list li{display:flex;gap:14px;align-items:flex-start}
.feat-list .fi{flex:0 0 38px;height:38px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;font-size:1rem}
.feat-list b{display:block;font-size:.98rem;color:var(--ink)}
.feat-list span{font-size:.88rem;color:var(--mist)}
.chat-mock{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.cm-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;background:var(--panel-2);font-family:var(--font-mono);font-size:.74rem;color:var(--mist)}
.cm-body{padding:22px 18px;display:grid;gap:14px}
.msg{max-width:85%;padding:12px 15px;border-radius:14px;font-size:.86rem;line-height:1.5}
.msg-user{background:var(--panel-2);border:1px solid var(--line);justify-self:end;border-bottom-right-radius:4px}
.msg-ai{background:rgba(255,177,61,.09);border:1px solid rgba(255,177,61,.3);border-bottom-left-radius:4px}
.msg-ai .who{font-family:var(--font-mono);font-size:.64rem;color:var(--amber);letter-spacing:.08em;display:block;margin-bottom:6px}

/* Microsoft */
.ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ms-card{background:var(--card);border:1px solid #E2E9F1;border-radius:var(--radius);padding:26px 22px}
.ms-card h3{font-size:1.05rem;color:var(--ink-dark);margin:14px 0 8px}
.ms-card p{font-size:.9rem;color:var(--mist-dark)}
.ms-logo{display:grid;grid-template-columns:repeat(2,10px);gap:2px;width:22px}
.ms-logo i{width:10px;height:10px;display:block}
.ms-logo i:nth-child(1){background:#F25022}.ms-logo i:nth-child(2){background:#7FBA00}
.ms-logo i:nth-child(3){background:#00A4EF}.ms-logo i:nth-child(4){background:#FFB900}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;transition:transform .18s,border-color .18s}
.post-card:hover{transform:translateY(-4px);border-color:var(--amber)}
.pc-meta{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;color:var(--mist);letter-spacing:.06em;margin-bottom:14px}
.pc-cat{background:rgba(255,177,61,.12);border:1px solid rgba(255,177,61,.35);color:var(--amber);padding:4px 10px;border-radius:6px}
.post-card h3{font-size:1.12rem;margin-bottom:10px;color:var(--ink)}
.post-card p{font-size:.88rem;color:var(--mist);flex:1}
.pc-more{margin-top:18px;font-size:.85rem;color:var(--amber);font-weight:600}
.section-light .post-card{background:var(--card);border-color:#E2E9F1}
.section-light .post-card h3{color:var(--ink-dark)}
.section-light .post-card p{color:var(--mist-dark)}

/* Blogarkiv */
.blog-hero{padding:150px 0 60px}
.blog-hero h1{font-size:clamp(2rem,4.4vw,3rem);margin:10px 0 14px}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:40px}
.pagination{display:flex;gap:8px;justify-content:center;padding:10px 0 80px;font-family:var(--font-mono);font-size:.85rem}
.pagination .page-numbers{border:1px solid var(--line);border-radius:8px;padding:9px 15px;color:var(--mist)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{border-color:var(--amber);color:var(--amber)}

/* Enkelt indlæg */
.single-hero{padding:150px 0 40px;max-width:780px;margin:0 auto}
.single-hero h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:16px 0}
.single-meta{display:flex;gap:14px;align-items:center;font-family:var(--font-mono);font-size:.74rem;color:var(--mist)}
.post-content{max-width:780px;margin:0 auto;padding:0 24px 90px;font-size:1.03rem;color:var(--ink)}
.post-content p{margin-bottom:1.3em;color:#C7D4E4}
.post-content h2{font-size:1.5rem;margin:1.8em 0 .6em}
.post-content h3{font-size:1.2rem;margin:1.5em 0 .5em}
.post-content ul,.post-content ol{margin:0 0 1.3em 1.4em;color:#C7D4E4}
.post-content li{margin-bottom:.5em}
.post-content strong{color:var(--ink)}
.post-content blockquote{border-left:3px solid var(--amber);padding:6px 0 6px 20px;margin:1.5em 0;color:var(--mist);font-style:italic}
.back-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.8rem;color:var(--amber);margin-bottom:8px}

/* Anmeldelser */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{background:var(--card);border:1px solid #E2E9F1;border-radius:var(--radius);padding:26px 24px}
.rev .stars{color:var(--amber-deep);letter-spacing:2px;margin-bottom:14px}
.rev p{font-size:.92rem;color:var(--ink-dark);margin-bottom:18px}
.rev .who{display:flex;gap:12px;align-items:center}
.rev .av{width:42px;height:42px;border-radius:50%;background:var(--night);color:var(--amber);display:grid;place-items:center;font-family:var(--font-mono);font-size:.78rem;font-weight:600}
.rev .who b{display:block;font-size:.9rem;color:var(--ink-dark)}
.rev .who span{font-size:.78rem;color:var(--mist-dark)}

/* Om */
.about .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 20px;text-align:center}
.stat .n{font-family:var(--font-mono);font-size:1.9rem;color:var(--amber);font-weight:600}
.stat .k{font-size:.82rem;color:var(--mist);margin-top:4px}

/* Kontakt */
.contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.c-links{display:grid;gap:12px;margin-top:26px}
.c-links a{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:border-color .15s}
.c-links a:hover{border-color:var(--amber)}
.c-links .ci{font-size:1.2rem}
.c-links b{display:block;font-size:.95rem}
.c-links span{font-size:.8rem;color:var(--mist)}
.form{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 28px}
.form .field{margin-bottom:18px}
.form label{display:block;font-size:.82rem;color:var(--mist);margin-bottom:7px;font-family:var(--font-mono)}
.form input,.form select,.form textarea{width:100%;background:var(--night);border:1px solid var(--line);border-radius:10px;padding:13px 15px;color:var(--ink);font-family:var(--font-body);font-size:.95rem}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--amber);outline:none}
.form textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-ok{background:rgba(61,220,151,.1);border:1px solid var(--online);color:var(--online);border-radius:10px;padding:14px 16px;font-size:.9rem;margin-bottom:18px}

/* Akut banner */
.akut{background:linear-gradient(120deg,var(--amber),var(--amber-deep));color:#1A1002;text-align:center;padding:64px 0}
.akut h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:12px}
.akut p{margin-bottom:26px;font-weight:500}
.akut .btn{background:var(--night);color:var(--ink)}
.akut .btn:hover{background:#000}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:64px 0 32px;background:#081120}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.f-grid h4{font-size:.85rem;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin-bottom:16px}
.f-grid ul{list-style:none;display:grid;gap:9px}
.f-grid a{font-size:.9rem;color:var(--mist)}
.f-grid a:hover{color:var(--amber)}
.f-about p{font-size:.88rem;color:var(--mist);margin-top:14px;max-width:26rem}
.f-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--mist);font-family:var(--font-mono)}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .services-grid,.blog-grid,.archive-grid{grid-template-columns:repeat(2,1fr)}
  .ms-grid,.rev-grid{grid-template-columns:repeat(2,1fr)}
  .hero .wrap,.claude-sec .wrap,.about .wrap,.contact .wrap{grid-template-columns:1fr;gap:44px}
}
@media (max-width:680px){
  .services-grid,.blog-grid,.archive-grid,.ms-grid,.rev-grid,.form-row,.stats{grid-template-columns:1fr}
  .main-nav{position:fixed;inset:68px 0 auto 0;background:var(--night);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:22px 24px;gap:18px;display:none}
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
  .nav-status{display:none}
  .hero{padding-top:120px}
  .f-grid{grid-template-columns:1fr 1fr}
}