/* ==========================================================================
   berlitz.careers · shared styles for the legal / policy pages
   Tokens match index.html. Kept in one file so the five policy pages stay
   visually identical and only need one edit to restyle.
   ========================================================================== */

:root{
  --blue:#004FEF;
  --blue-ink:#0038AD;
  --blue-wash:#EDF2FE;
  --charcoal:#1D1D1D;
  --powder:#FCFCFC;

  --ink:var(--charcoal);
  --ink-2:#4A4A4A;
  --ink-3:#6E6E6E;
  --line:#E4E4E7;
  --line-2:#F1F1F3;
  --bg:var(--powder);
  --card:#FFFFFF;

  /* Focus ring colour. Overridden on the charcoal footer, where the brand blue
     only reaches 2.7:1 against the background and fails WCAG 1.4.11 (3:1). */
  --focus:var(--blue);

  --measure:72ch;
  --r-sm:8px;
  --r-md:14px;

  --step--1:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-0:clamp(1.0625rem,1rem + .2vw,1.1875rem);
  --step-1:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --step-2:clamp(1.6rem,1.4rem + .9vw,2.25rem);
  --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.5rem);
}

*,*::before,*::after{box-sizing:border-box}
/* The railbar sticks at up to 70px tall. Without the scroll padding, a contents
   link or a keyboard focus scroll parks its target underneath it, which WCAG 2.2
   added 2.4.11 to catch. It matters most on the privacy notice, where every
   contents entry is an in-page jump. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga","cv11";
}
h1,h2,h3{line-height:1.12;letter-spacing:-.025em;margin:0;font-weight:680;text-wrap:balance}
h1{font-size:var(--step-3)}
h2{font-size:var(--step-1);margin-top:3rem}
h3{font-size:var(--step-0);margin-top:2rem;font-weight:660}
p,li{max-width:var(--measure);text-wrap:pretty}
p{margin:1rem 0 0}
a{color:var(--blue-ink)}
strong{font-weight:640}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:4px;
}
/* Skip-link targets take focus so the jump lands reliably, but they are never
   tab stops, and a ring around a whole region reads as a rendering fault. */
[tabindex="-1"]:focus-visible{outline:none}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--charcoal);color:#fff;
  padding:12px 18px;z-index:99;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

.shell{width:min(1140px,100% - 2.5rem);margin-inline:auto}
.prose{width:min(760px,100% - 2.5rem);margin-inline:auto}

/* ---- header ---- */
.railbar{
  position:sticky;top:0;z-index:40;
  background:rgba(252,252,252,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.railbar .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.brandmark{display:flex;align-items:center;gap:.75rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brandmark small{display:block;font-size:.85rem;font-weight:500;color:var(--ink-3);letter-spacing:0;line-height:1}
.brandmark img{height:22px;width:auto;display:block}
.backlink{font-size:var(--step--1);font-weight:620;text-decoration:none;color:var(--ink)}
.backlink:hover{color:var(--blue-ink)}

/* ---- page head ---- */
.pagehead{padding:clamp(2.5rem,5vw,4rem) 0 0}
.eyebrow{
  font-size:var(--step--1);font-weight:640;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-ink);margin:0 0 1rem;max-width:none;
}
.updated{font-size:var(--step--1);color:var(--ink-3);margin-top:1.5rem}
.lede{font-size:var(--step-1);color:var(--ink-2);line-height:1.5;font-weight:420;margin-top:1.5rem}

/* ---- draft banner. Delete this block, and every .draft element, at launch ---- */
.draft{
  background:#FFF7E6;border:1px solid #E8C98A;color:#7A4F00;
  border-radius:var(--r-sm);padding:1rem 1.15rem;font-size:var(--step--1);
  margin:2rem 0 0;max-width:var(--measure);line-height:1.55;
}
.draft b{display:block;margin-bottom:.35rem}
.draft p{margin:.6rem 0 0;max-width:none}
.draft ul{margin:.5rem 0 0;padding-left:1.15rem}
.draft li{max-width:none;margin-top:.5rem}
.draft a{color:#7A4F00;text-decoration:underline}
/* who has to answer this item */
.draft .own{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:#7A4F00;color:#FFF7E6;
  padding:.2em .55em;border-radius:100px;margin-right:.5em;white-space:nowrap;
}
/* the completion test */
.draft .done{
  margin-top:.9rem;padding-top:.75rem;
  border-top:1px solid rgba(122,79,0,.28);font-weight:640;
}
/* inline marker for a value legal has to supply */
.tbc{
  background:#FFF7E6;border-bottom:1px dashed #C99A3A;color:#7A4F00;
  padding:0 .2em;border-radius:2px;font-style:normal;
}

/* ---- body content ---- */
.body{padding:0 0 clamp(3rem,6vw,5rem)}
.body ul,.body ol{margin:1rem 0 0;padding-left:1.35rem}
.body ul{list-style:disc}
.body ol{list-style:decimal}
.body li{margin-top:.5rem}
.body li>ul{margin-top:.5rem}
hr{border:0;border-top:1px solid var(--line);margin:3rem 0 0}

.callout{
  background:var(--blue-wash);border:1px solid #CBDBFB;border-radius:var(--r-md);
  padding:1.25rem 1.4rem;margin-top:1.75rem;max-width:var(--measure);
}
.callout p:first-child{margin-top:0}

/* contents list */
.toc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.4rem 1.6rem;margin-top:2.5rem;max-width:var(--measure);
}
.toc h2{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:0 0 .75rem;font-weight:640}
.toc ol{margin:0;padding-left:1.2rem;list-style:decimal;font-size:var(--step--1)}
.toc li{margin-top:.4rem}
.toc a{text-decoration:none;border-bottom:1px solid rgba(0,56,173,.25)}
.toc a:hover{border-bottom-color:var(--blue-ink)}

/* tables, for the legal-basis and imprint details */
.tablewrap{overflow-x:auto;margin-top:1.5rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:var(--step--1)}
caption{text-align:left;font-size:var(--step--1);color:var(--ink-3);padding:.9rem 1rem 0}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line-2);vertical-align:top}
th{font-weight:640;background:#FAFAFB}
tbody tr:last-child td{border-bottom:0}

/* definition-style rows for the imprint */
.deflist{margin-top:1.5rem;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.deflist div{background:var(--card);padding:1rem 1.2rem;display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:1rem}
.deflist dt{font-weight:640;margin:0}
.deflist dd{margin:0;color:var(--ink-2)}
@media (max-width:620px){ .deflist div{grid-template-columns:1fr;gap:.25rem} }

/* ---- footer ---- */
footer{background:var(--charcoal);color:#C9C9CD;padding:3.5rem 0 2.5rem;font-size:var(--step--1);--focus:#8FB4FF}
footer img{height:20px;width:auto;display:block;margin-bottom:2rem}
footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
footer a:hover{border-bottom-color:#fff}
footer p{color:#8A8A90;max-width:70ch}
.footrow{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-bottom:2rem}
.footrow a[aria-current="page"]{border-bottom-color:#fff;color:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}
@media print{
  .railbar,.skip{display:none}
  footer{background:#fff;color:#000}
  footer a{color:#000}
  .draft{border-color:#999}
  body{background:#fff}
}