/*
Theme Name: EMSRecert Retro
Theme URI: https://emsrecert.com
Author: CE Solutions
Description: EMS media theme skinned as a retro desktop operating system. Windows with title bars, chunky beveled buttons, a green CRT vitals monitor, and posts presented as files. Full retro across homepage, archives, and articles. Category-driven content pillars.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: emsrecert-retro
*/

:root{
  --desk:#8d8d86;--win:#f3f0e7;--ink:#141414;--line:#000;
  --blue:#1745c8;--blue2:#0b2a6b;--green:#43ff92;--screen:#0a1410;
  --btn:#dcd8cc;--bevel-lt:#ffffff;--bevel-dk:#87877b;
  --pixel:'Silkscreen',ui-monospace,monospace;
  --term:'VT323',ui-monospace,monospace;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);font-size:16px;line-height:1.55;
  background-color:var(--desk);
  background-image:radial-gradient(rgba(0,0,0,.16) 1px, transparent 1px);
  background-size:4px 4px;min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.pixel{font-family:var(--pixel)}
:focus-visible{outline:2px dotted var(--ink);outline-offset:2px}

/* Menu bar */
.menubar{position:sticky;top:0;z-index:100;background:#fff;border-bottom:2px solid var(--line);display:flex;align-items:center;height:34px;padding:0 10px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.menubar .logo{display:flex;align-items:center;gap:8px;padding-right:14px;margin-right:6px;border-right:2px solid var(--line);height:100%}
.menubar .logo b{font-family:var(--pixel);font-weight:700;font-size:13px;letter-spacing:-.5px}
.menubar .items{display:flex;gap:2px;flex:1}
.menubar .items ul{display:flex;gap:2px;list-style:none}
.menubar .items a{font-family:var(--pixel);font-size:10px;padding:6px 9px;color:var(--ink);display:block}
.menubar .items a:hover{background:var(--ink);color:#fff}
.menubar .clock{font-family:var(--pixel);font-size:10px;border-left:2px solid var(--line);padding-left:12px;height:100%;display:flex;align-items:center;margin-left:6px}
.menu-toggle{display:none;font-family:var(--pixel);font-size:10px;background:var(--btn);border:2px solid var(--line);padding:5px 8px;cursor:pointer;margin-left:auto}

/* Desktop canvas */
.desktop{max-width:1120px;margin:0 auto;padding:26px 18px 60px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.full{grid-column:1 / -1}
.page-wrap{max-width:860px;margin:0 auto;padding:26px 18px 54px}

/* Window chrome */
.window{background:var(--win);border:2px solid var(--line);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.titlebar{display:flex;align-items:center;height:24px;border-bottom:2px solid var(--line);background:#fff;position:relative;overflow:hidden;padding:0 6px}
.titlebar .stripes{position:absolute;left:0;right:0;top:0;bottom:0;background:repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 3px);opacity:.9}
.titlebar .box{position:relative;z-index:2;width:12px;height:12px;background:var(--win);border:2px solid var(--line);flex:none}
.titlebar .title{position:relative;z-index:2;font-family:var(--pixel);font-size:10px;background:#fff;padding:0 10px;margin:0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78%}
.titlebar .box.right{margin-left:auto}
.win-body{padding:20px}

/* Buttons / fields */
.btn{font-family:var(--pixel);font-size:11px;background:var(--btn);color:var(--ink);border:2px solid var(--line);padding:9px 16px;cursor:pointer;display:inline-block;text-align:center;box-shadow:inset 2px 2px 0 var(--bevel-lt), inset -2px -2px 0 var(--bevel-dk)}
.btn:active{box-shadow:inset -2px -2px 0 var(--bevel-lt), inset 2px 2px 0 var(--bevel-dk);transform:translate(1px,1px)}
.btn.primary{background:var(--blue);color:#fff;box-shadow:inset 2px 2px 0 rgba(255,255,255,.5), inset -2px -2px 0 rgba(0,0,0,.4)}
.field{font-family:var(--body);font-size:15px;background:#fff;border:2px solid var(--line);padding:9px 11px;box-shadow:inset 2px 2px 0 rgba(0,0,0,.14);width:100%}

/* Hero */
.hero .win-body{padding:0}
.hero .screen{background:var(--screen);color:var(--green);padding:26px 24px 22px;border-bottom:2px solid var(--line)}
.hero .screen .kick{font-family:var(--term);font-size:20px;color:#8affc0;letter-spacing:1px}
.hero .screen h1{font-family:var(--term);font-weight:400;font-size:clamp(38px,6vw,64px);line-height:.95;letter-spacing:1px;margin:6px 0 8px;text-shadow:0 0 8px rgba(67,255,146,.45)}
.hero .screen p{font-family:var(--term);font-size:20px;line-height:1.25;color:#c8ffe0;max-width:44ch}
.hero .screen .cursor{display:inline-block;width:11px;height:20px;background:var(--green);margin-left:3px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero .panel{padding:20px 24px 24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--win)}
.hero .panel .sub{display:flex;gap:8px;flex:1;min-width:260px}
.hero .panel .note{font-family:var(--pixel);font-size:9px;line-height:1.7;width:100%;color:#4a4a44}

/* Vitals monitor */
.vitals .win-body{background:var(--screen);padding:0}
.vitals .readout{display:flex;justify-content:space-between;padding:10px 14px 0;font-family:var(--term);font-size:19px;color:var(--green)}
.vitals .ecgwrap{height:150px;overflow:hidden;position:relative}
.vitals svg{display:block;height:150px;width:1800px}
.vitals .trace{fill:none;stroke:var(--green);stroke-width:2.2;filter:drop-shadow(0 0 5px rgba(67,255,146,.8));animation:sweep 5s linear infinite}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(-160px)}}
.vitals .foot{font-family:var(--term);font-size:18px;color:#7dffb0;padding:0 14px 12px}

/* Deadline */
.deadline .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed #b7b2a3}
.deadline .row:last-child{border-bottom:none;padding-bottom:0}
.deadline .k{font-family:var(--pixel);font-size:10px}
.deadline .v{font-family:var(--term);font-size:22px;color:var(--blue)}
.deadline .btn{margin-top:16px;width:100%}

/* Files listing */
.files .filerow{display:flex;align-items:center;gap:14px;padding:12px 8px;border-bottom:1px solid #ddd8cb}
.files .filerow:hover{background:#e7e3d6}
.files .filerow:last-child{border-bottom:none}
.files .ic{width:30px;height:36px;flex:none}
.files .ic svg{width:30px;height:36px;display:block}
.files .fname{font-family:var(--body);font-size:16px;font-weight:600;flex:1;min-width:0}
.files .fname small{display:block;font-family:var(--pixel);font-size:8.5px;color:#6a675d;font-weight:400;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .tag{font-family:var(--pixel);font-size:8px;color:#fff;padding:4px 6px;border:1px solid var(--line);white-space:nowrap}
.files .tag.recert{background:var(--blue)}
.files .tag.news{background:#b8341f}
.files .tag.career{background:#6a2fa0}
.files .tag.life{background:#9a5b00}
.files .tag.state{background:#0e7c66}
.files .fdate{font-family:var(--pixel);font-size:9px;color:#5a574e;white-space:nowrap}
.files .browse{margin-top:16px;text-align:center}

/* Mail */
.mail .win-body{display:grid;grid-template-columns:1fr;gap:14px}
.mail h2{font-family:var(--term);font-size:32px;line-height:1;color:var(--ink)}
.mail p{font-size:15px;max-width:52ch}
.mail .compose{display:flex;gap:8px}
.mail .okmsg{display:none;font-family:var(--pixel);font-size:10px;color:#0a7a3f}
.mail .okmsg.show{display:block}
.mail .note{font-family:var(--pixel);font-size:9px;line-height:1.8;color:#4a4a44}

/* Article (single) full retro */
.doc-window .win-body{padding:0}
.article{padding:30px 34px 34px}
.article .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.article .tag{font-family:var(--pixel);font-size:9px;color:#fff;padding:5px 8px;border:1px solid var(--line)}
.article .tag.recert{background:var(--blue)}.article .tag.news{background:#b8341f}.article .tag.career{background:#6a2fa0}.article .tag.life{background:#9a5b00}.article .tag.state{background:#0e7c66}
.article .meta{font-family:var(--pixel);font-size:9px;color:#5a574e;letter-spacing:.04em}
.article h1.title{font-family:var(--term);font-weight:400;font-size:clamp(32px,5.5vw,50px);line-height:1;letter-spacing:.5px;margin:0 0 20px}
.article .featured{border:2px solid var(--line);box-shadow:3px 3px 0 rgba(0,0,0,.3);margin:0 0 26px}
.article-body{font-family:var(--body);font-size:17.5px;line-height:1.72;max-width:64ch}
.article-body p{margin:0 0 20px}
.article-body h2{font-family:var(--term);font-size:30px;line-height:1.05;letter-spacing:.5px;margin:36px 0 12px}
.article-body h3{font-family:var(--term);font-size:24px;margin:28px 0 10px}
.article-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.article-body ul,.article-body ol{margin:0 0 20px 22px}
.article-body li{margin-bottom:8px}
.article-body blockquote{border:2px solid var(--line);background:#fff;box-shadow:inset 2px 2px 0 rgba(0,0,0,.12);padding:16px 18px;margin:24px 0;font-style:italic}
.article-body img{border:2px solid var(--line);margin:24px 0}
.article-foot{border-top:2px dashed #b7b2a3;margin-top:30px;padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.article-foot .note{font-family:var(--pixel);font-size:9px;color:#4a4a44;max-width:44ch;line-height:1.7}

/* Archive folder */
.archive-title{font-family:var(--term);font-size:30px;padding:2px 0 16px}
.pagination{margin-top:22px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pagination a,.pagination span{font-family:var(--pixel);font-size:10px;background:var(--btn);border:2px solid var(--line);padding:8px 12px;box-shadow:inset 2px 2px 0 var(--bevel-lt), inset -2px -2px 0 var(--bevel-dk)}
.pagination .current{background:var(--blue);color:#fff}

/* Taskbar footer */
.taskbar{max-width:1120px;margin:0 auto 30px;padding:0 18px}
.taskbar .inner{background:#fff;border:2px solid var(--line);box-shadow:4px 4px 0 rgba(0,0,0,.35);padding:14px 16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.taskbar .disc{font-family:var(--pixel);font-size:9px;line-height:1.8;max-width:70ch;display:flex;gap:10px;align-items:flex-start}
.taskbar .disc .star{color:var(--blue);flex:none}
.taskbar .links{display:flex;gap:10px;flex-wrap:wrap}
.taskbar .links a{font-family:var(--pixel);font-size:9px}
.taskbar .links a:hover{color:var(--blue)}
.taskbar .copy{font-family:var(--pixel);font-size:9px;color:#555;white-space:nowrap}

@media(max-width:820px){
  .menubar .items{display:none;flex:none}
  .menu-toggle{display:block}
  .menubar .items.open{display:block;position:absolute;top:34px;left:0;right:0;background:#fff;border-bottom:2px solid var(--line)}
  .menubar .items.open ul{flex-direction:column;gap:0}
  .menubar .items.open li{border-bottom:1px solid #ccc}
  .desktop{grid-template-columns:1fr}
  .article{padding:24px 20px 28px}
}
@media(prefers-reduced-motion:reduce){
  .vitals .trace,.hero .screen .cursor{animation:none!important}
}