/*
Theme Name: DreamJops Coming Soon
Theme URI: https://dreamjops.nl
Author: DreamJops
Description: Tijdelijke coming-soon pagina voor DreamJops Uitzendbureau. Zelf-gehoste fonts, geen externe verzoeken, geen tracking, geen cookies.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dreamjops-coming-soon
*/

/* ---------- self-hosted fonts (no external requests) ---------- */
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-var.woff2")format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"PlexSans";src:url("assets/fonts/plexsans-var.woff2")format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("assets/fonts/plexmono-500.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens: sampled from the DreamJops logo ---------- */
:root{
  --red:#D2141B;         /* logo red — 5.45:1 on white (AA) */
  --red-deep:#A80E13;    /* 7.67:1 on white (AAA) — small text */
  --ink:#1C2024;         /* logo charcoal — 16.39:1 (AAA) */
  --charcoal:#21252A;
  --slate:#5B646E;       /* 6.01:1 (AA) — body copy */
  --line:#E4E7EA;
  --bg:#FFFFFF;
  --bg-alt:#F6F7F9;
  --on-dark:#FFFFFF;
  --on-dark-mute:#A8AFB6;
  --seam:rgba(255,255,255,.07);
  --display:"Archivo",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"PlexSans",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"PlexMono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --gutter:clamp(20px,5vw,56px);
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--slate);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-deep)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:9;background:var(--ink);color:#fff;padding:10px 16px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- masthead ---------- */
.masthead{padding-block:clamp(26px,5vw,44px) 0}
.masthead .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{margin:0}
.brand img{height:clamp(66px,12vw,102px);width:auto}
.lang{display:flex;align-items:center;gap:2px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--slate);text-decoration:none}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="true"]{color:var(--ink);font-weight:600}
.lang span{color:var(--line)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(38px,7vw,70px) clamp(28px,5vw,44px)}
.eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red-deep);
}
.eyebrow::before{content:"";width:38px;height:2px;background:var(--red);flex:none} /* echoes the rules beside UITZENDBUREAU */
h1{
  margin:0 0 22px;font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(2.15rem,6.2vw,4.15rem);line-height:1.03;letter-spacing:-.032em;
  text-wrap:balance;max-width:16ch;
}
.lead{margin:0;font-size:clamp(1.04rem,1.9vw,1.24rem);line-height:1.62;max-width:56ch;color:var(--slate)}

/* ---------- countdown board ---------- */
.board{background:var(--ink);color:var(--on-dark);border-radius:3px;overflow:hidden;position:relative}
.board::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:rgba(255,255,255,.12)}
.board-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:20px clamp(20px,4vw,34px);border-bottom:1px solid rgba(255,255,255,.1);
}
.board-head .dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.board-head p{margin:0;font-size:.76rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--on-dark-mute)}
.units{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.units li{padding:clamp(22px,4vw,36px) 10px;text-align:center;position:relative}
.units li+li::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.1)}
.num{
  display:block;position:relative;font-family:var(--mono);font-weight:500;
  font-size:clamp(2.45rem,8.4vw,4.6rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--on-dark);
}
.num::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;background:var(--seam)} /* split-flap seam */
.unit{display:block;margin-top:12px;font-size:.68rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--on-dark-mute)}
@keyframes tick{from{transform:translateY(-.17em);opacity:.2}to{transform:none;opacity:1}}
.num.tick{animation:tick .28s cubic-bezier(.2,.7,.3,1)}
.board-live{padding:clamp(30px,6vw,52px);text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,4vw,2.3rem);color:var(--on-dark)}

/* ---------- audiences ---------- */
.audiences{padding-block:clamp(30px,5vw,48px) clamp(44px,8vw,86px)}
.split{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:3px;background:var(--bg-alt)}
.split>div{padding:clamp(26px,3.6vw,42px)}
.split>div+div{border-left:1px solid var(--line)}
.split h2{
  margin:18px 0 12px;font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(1.18rem,2.2vw,1.42rem);letter-spacing:-.015em;
}
.split p{margin:0;font-size:.98rem;line-height:1.65;max-width:42ch}
.rule{display:block;width:40px;height:2px;background:var(--red)} /* the logo's rule motif */

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:30px 40px}
.site-foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.claim{margin:0;font-family:var(--display);font-weight:600;color:var(--ink);font-size:.92rem;letter-spacing:.01em}
.legal{margin:0;font-size:.82rem;color:var(--slate)}

/* ---------- entrance: starts visible-adjacent, settles under 700ms ---------- */
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.anim{animation:rise .52s cubic-bezier(.22,.68,.3,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}.d5{animation-delay:.37s}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .units{grid-template-columns:repeat(2,1fr)}
  .units li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .units li:nth-child(3)::before{display:none}
  .split{grid-template-columns:1fr}
  .split>div+div{border-left:0;border-top:1px solid var(--line)}
  h1{max-width:none}
}
@media (max-width:420px){ .masthead .wrap{gap:14px} }

@media (prefers-reduced-motion:reduce){
  .anim,.num.tick{animation:none}
  *{transition:none!important}
}