/*
  Datorskolan – website design system (landing page, dialogs, skip link).
  The simulated Windows environment has its own system in fakewin.css.

  Typography: Cooper Hewitt (SIL OFL 1.1, see assets/fonts/SOURCE.md).
  Palette: neutral surfaces, near-black text, one blue accent, semantic green/amber/red.
  All text/background pairs below meet WCAG 2.2 AA (documented in docs/37-ACCESSIBILITY-AND-LEGAL.md).
*/

@font-face{font-family:"Cooper Hewitt";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/CooperHewitt-Book.woff") format("woff")}
@font-face{font-family:"Cooper Hewitt";font-style:normal;font-weight:500;font-display:swap;
  src:url("../assets/fonts/CooperHewitt-Medium.woff") format("woff")}
@font-face{font-family:"Cooper Hewitt";font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/CooperHewitt-Semibold.woff") format("woff")}
@font-face{font-family:"Cooper Hewitt";font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/CooperHewitt-Bold.woff") format("woff")}

:root{
  /* Surfaces */
  --color-bg:#f8fafc;
  --color-surface:#ffffff;
  --color-surface-hover:#f1f5f9;
  --color-surface-sunken:#f1f5f9;
  --color-border:#e2e8f0;
  --color-border-strong:#94a3b8;

  /* Text (contrast on --color-surface): text 17.8:1, muted 7.6:1 */
  --color-text:#0f172a;
  --color-muted:#475569;

  /* Accent and semantics (all ≥ 4.5:1 as text on white and with white text on top) */
  --color-primary:#2563eb;
  --color-primary-hover:#1d4ed8;
  --color-primary-soft:#eff6ff;
  --color-primary-border:#bfdbfe;
  --color-success:#15803d;
  --color-success-soft:#f0fdf4;
  --color-warning:#b45309;
  --color-warning-soft:#fffbeb;
  --color-danger:#dc2626;
  --color-danger-hover:#b91c1c;
  --color-danger-soft:#fef2f2;
  --color-focus:#1d4ed8;

  /* Shape and depth */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 24px 48px rgba(15,23,42,.16);

  /* Spacing scale */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;

  /* Type scale */
  --font-site:"Cooper Hewitt","Segoe UI",system-ui,-apple-system,sans-serif;
  --text-sm:.875rem;   /* 14px – secondary text, never smaller for content */
  --text-md:1rem;      /* 16px – body */
  --text-lg:1.125rem;  /* 18px – lead */
  --text-xl:1.375rem;
  --text-2xl:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  --text-3xl:clamp(2.25rem,1.4rem + 2.8vw,3.75rem);

  --header-height:72px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-site);
  font-size:var(--text-md);
  line-height:1.55;
}

h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block}
button{font:inherit;color:inherit}

::selection{background:#bfdbfe;color:var(--color-text)}

:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:2px;
}

[hidden]{display:none !important} /* the only !important: guarantees the hidden attribute always wins */

/* ---------- Skip link ---------- */

.skip-link{
  position:fixed;
  top:var(--space-3);
  left:var(--space-3);
  z-index:1000;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-text);
  font-weight:700;
  box-shadow:var(--shadow-lg);
  transform:translateY(-200%);
}

.skip-link:focus{transform:none}

/* ---------- Buttons ---------- */

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:44px;
  padding:0 var(--space-5);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:var(--text-md);
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}

.button-large{min-height:52px;padding:0 var(--space-6);font-size:var(--text-lg)}

.button-primary{background:var(--color-primary);color:#fff}
.button-primary:hover{background:var(--color-primary-hover)}

.button-secondary{background:var(--color-surface);border-color:var(--color-border-strong);color:var(--color-text)}
.button-secondary:hover{background:var(--color-surface-hover)}

.button-danger{background:var(--color-danger);color:#fff}
.button-danger:hover{background:var(--color-danger-hover)}

.link-button{
  min-height:44px;
  padding:0 var(--space-1);
  border:0;
  background:none;
  color:var(--color-primary-hover);
  font-size:var(--text-sm);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* ---------- Layout shell ---------- */

.site{
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:100vh;
  min-height:100dvh;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-4);
  min-height:var(--header-height);
  padding:var(--space-3) clamp(16px,3vw,40px);
  border-bottom:1px solid var(--color-border);
  background:rgba(255,255,255,.96);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--space-3);
  min-height:44px;
  color:inherit;
  text-decoration:none;
  justify-self:start;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  background:var(--color-primary);
  color:#fff;
  font-size:1.25rem;
  font-weight:700;
}

.brand-copy{display:grid;line-height:1.25}
.brand-copy strong{font-size:var(--text-lg)}
.brand-copy small{color:var(--color-muted);font-size:var(--text-sm)}

.site-tabs{
  justify-self:center;
  display:flex;
  gap:var(--space-1);
  padding:var(--space-1);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-sunken);
}

.site-tabs button{
  min-height:40px;
  padding:0 var(--space-4);
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--color-muted);
  font-size:var(--text-md);
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}

.site-tabs button:hover{background:var(--color-border);color:var(--color-text)}

.site-tabs button[aria-selected="true"]{
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:var(--shadow-sm),inset 0 -3px 0 var(--color-primary);
}

.site-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-3);
  justify-self:end;
}

.language-switch{
  display:inline-flex;
  padding:3px;
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
}

.language-switch button{
  min-height:36px;
  min-width:44px;
  padding:0 var(--space-3);
  border:0;
  border-radius:5px;
  background:transparent;
  color:var(--color-muted);
  font-size:var(--text-sm);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
}

.language-switch button:hover{background:var(--color-surface-hover);color:var(--color-text)}

.language-switch button[aria-pressed="true"]{background:var(--color-text);color:#fff}

.site-main{
  display:flex;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:clamp(24px,4vh,48px) clamp(16px,3vw,40px);
}

.site-main:focus{outline:none}

.panel{width:100%;align-self:center}

.site-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--space-2) var(--space-4);
  padding:var(--space-2) clamp(16px,3vw,40px);
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-muted);
  font-size:var(--text-sm);
  text-align:center;
}

/* ---------- Shared content pieces ---------- */

.eyebrow{
  margin-bottom:var(--space-3);
  color:var(--color-primary-hover);
  font-size:var(--text-sm);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.lead{color:var(--color-muted);font-size:var(--text-lg);line-height:1.6;max-width:60ch}

h1{font-size:var(--text-3xl);line-height:1.08;letter-spacing:-.02em}
h2{font-size:var(--text-2xl);line-height:1.15;letter-spacing:-.015em}
h3{font-size:var(--text-lg);line-height:1.3}

.accent{color:var(--color-primary)}

.card{
  position:relative;
  padding:var(--space-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
}

.card p{color:var(--color-muted);margin-top:var(--space-2)}

.card-icon{width:28px;height:28px;margin-bottom:var(--space-3)}

.panel-heading{display:grid;gap:var(--space-2);margin-bottom:var(--space-6)}

.panel-heading-row{
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:end;
  gap:var(--space-6);
}

/* ---------- Overview ---------- */

.panel-overview{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(24px,5vw,72px);
}

.hero-copy h1{display:grid;margin-bottom:var(--space-4)}

.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

.resume-note{
  margin-top:var(--space-3);
  color:var(--color-success);
  font-weight:600;
}

.facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
  margin-top:var(--space-6);
  max-width:520px;
}

.facts>div{
  display:flex;
  flex-direction:column-reverse;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}

.facts dt{color:var(--color-muted);font-size:var(--text-sm)}
.facts dd{font-size:var(--text-xl);font-weight:700;line-height:1.2}

/* Decorative FakeWin preview – mirrors the real simulator styling at a small scale. */
.hero-visual{
  position:relative;
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
}

.preview-screen{
  position:relative;
  aspect-ratio:16/10.5;
  overflow:hidden;
  border:10px solid #1e293b;
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg,#d4e7fb 0%,#a9cdf2 52%,#7fb0e6 100%);
  box-shadow:var(--shadow-lg);
}

.preview-window{
  position:absolute;
  top:7%;
  left:6%;
  width:76%;
  height:68%;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  border-radius:8px;
  background:#f3f3f3;
  box-shadow:0 16px 32px rgba(0,0,0,.18);
}

.preview-titlebar{
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 10px;
  color:#1a1a1a;
  font-size:13px;
}

.preview-titlebar img{width:16px;height:16px}
.preview-titlebar span{flex:1}
.preview-titlebar i{width:10px;height:1px;margin-left:14px;background:#1a1a1a}

.preview-body{display:grid;grid-template-columns:38% 1fr;height:calc(100% - 36px);background:#fff}

.preview-nav{display:grid;align-content:start;gap:2px;padding:8px;background:#f9f9f9;border-right:1px solid #e5e5e5}

.preview-nav span,.preview-files span{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:6px 8px;
  border-radius:4px;
  color:#1a1a1a;
  font-size:13px;
}

.preview-nav b,.preview-files b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-nav img{width:16px;height:16px}
.preview-nav .is-active{background:#e9e9e9;box-shadow:inset 3px 0 0 #005fb8}

.preview-files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:8px;padding:14px}
.preview-files span{flex-direction:column;justify-content:center;text-align:center;padding:10px 4px}
.preview-files img{width:40px;height:40px}
.preview-files .is-selected{background:#cce8ff;outline:1px solid #99d1ff}

.preview-coach{
  position:absolute;
  right:4%;
  bottom:18%;
  display:grid;
  gap:4px;
  width:44%;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.08);
  border-left:4px solid #005fb8;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.16);
  color:#1a1a1a;
  font-size:13px;
  line-height:1.35;
}

.preview-coach strong{font-size:14px}

.preview-taskbar{
  position:absolute;
  inset:auto 0 0 0;
  display:flex;
  justify-content:center;
  gap:10px;
  height:11%;
  padding:6px;
  background:rgba(243,243,243,.92);
  border-top:1px solid rgba(0,0,0,.06);
}

.preview-taskbar img{width:auto;height:100%;max-height:26px;padding:3px}

/* ---------- How it works ---------- */

.step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}

.step-number{
  position:absolute;
  top:var(--space-4);
  right:var(--space-4);
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-pill);
  background:var(--color-primary-soft);
  color:var(--color-primary-hover);
  font-weight:700;
}

.callout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:var(--space-5);
  margin-top:var(--space-5);
  padding:var(--space-5);
  border:1px solid var(--color-primary-border);
  border-radius:var(--radius-md);
  background:var(--color-primary-soft);
}

.callout p{color:var(--color-muted);margin-top:var(--space-2)}

.pill-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}

.pill-list li{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:40px;
  padding:0 var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:var(--color-surface);
  font-size:var(--text-sm);
  font-weight:600;
}

.pill-list img{width:20px;height:20px}

/* ---------- Course ---------- */

.module-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--space-3);
}

.module-grid li{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-height:64px;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}

.module-grid img{flex:none;width:28px;height:28px}
.module-grid strong{display:block;line-height:1.3}
.module-grid span{color:var(--color-muted);font-size:var(--text-sm)}
.module-grid .module-final{border-color:#fcd34d;background:var(--color-warning-soft)}

.course-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  margin-top:var(--space-5);
  color:var(--color-muted);
}

/* ---------- Safe ---------- */

.panel-safe{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(24px,5vw,72px);
}

.safe-copy h2{margin-bottom:var(--space-4)}
.safe-copy .button{margin-top:var(--space-6)}

.check-list{display:grid;gap:var(--space-3)}

.check-list li{
  display:flex;
  gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}

.check-list p{color:var(--color-muted);margin-top:var(--space-1)}

.check{
  flex:none;
  position:relative;
  width:28px;
  height:28px;
  border-radius:var(--radius-pill);
  background:var(--color-success-soft);
  border:1px solid #86efac;
}

.check::after{
  content:"";
  position:absolute;
  left:9px;
  top:5px;
  width:7px;
  height:12px;
  border:solid var(--color-success);
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
}

/* ---------- Modal dialogs ---------- */

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  padding:var(--space-4);
  background:rgba(15,23,42,.55);
}

.modal{
  width:min(480px,100%);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:var(--space-6);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
  box-shadow:var(--shadow-lg);
  font-family:var(--font-site);
}

.modal-wide{width:min(620px,100%)}
.modal h2{font-size:var(--text-xl);margin-bottom:var(--space-3)}
.modal p{color:var(--color-muted)}

.modal-warning{
  margin-top:var(--space-4);
  padding:var(--space-3) var(--space-4);
  border:1px solid #fecaca;
  border-left:4px solid var(--color-danger);
  border-radius:var(--radius-sm);
  background:var(--color-danger-soft);
}

.modal .modal-warning{color:#991b1b;font-weight:700}

.plain-list{display:grid;gap:var(--space-2);margin-top:var(--space-4);padding-left:1.25rem;list-style:disc;color:var(--color-muted)}

.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-5)}

/* ---------- Mode switching ---------- */

body.school-mode{overflow:hidden}
body.school-mode .site{display:none}

/* ---------- Responsive ---------- */

/*
  Below 1440px the one-row header can collide in English or when "Start over" is visible,
  so the tabs move to their own row instead of being squeezed.
*/
@media (max-width:1440px){
  .site-header{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--space-2);padding-block:var(--space-2)}
  .site-tabs{grid-column:1/-1;grid-row:2;justify-self:center}
}

@media (max-width:980px){
  .panel-overview,.panel-safe,.callout,.panel-heading-row{grid-template-columns:1fr}
  .hero-visual{max-width:560px}
  .step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .site-header{position:static;grid-template-columns:1fr;justify-items:start}
  .site-header-actions{justify-self:stretch;flex-wrap:wrap;justify-content:flex-start}
  .header-cta{display:none}
  .site-tabs{justify-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-tabs button{white-space:normal;padding:var(--space-2) var(--space-3)}
  .brand-copy small{display:none}
  .step-grid,.facts{grid-template-columns:1fr}
  .facts{max-width:none}
  .button-large{width:100%}
}

/* Short desktop screens (e.g. 1280×720, 1366×768): tighten vertical rhythm instead of clipping. */
@media (min-width:981px) and (max-height:820px){
  :root{--header-height:64px}
  .site-main{padding-block:20px}
  .facts{margin-top:var(--space-5)}
  .hero-actions{margin-top:var(--space-5)}
  .panel-heading{margin-bottom:var(--space-5)}
  .card{padding:var(--space-4)}
  h1{font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none;animation:none;scroll-behavior:auto}
}

@media (forced-colors:active){
  .site-tabs button[aria-selected="true"],.language-switch button[aria-pressed="true"]{outline:2px solid CanvasText}
}