/* ==================================================================
 * TheGermanStefan Academy — Special Skills hub styles
 * special-skills/engine/ss-hub.css
 *
 * Palette, serif body face and card geometry are the Academy's own,
 * copied from grammar/b1/index.html so a Special Skills hub reads as
 * the same product rather than a second website.
 * ================================================================== */
:root{
  --navy:#0B1628;--gold:#C9A84C;--cream:#F8F6F1;
  --grn:#1A5C2A;--grnb:#D4EDD9;--amb:#7A5200;--ambb:#FFF3CD;
  --purp:#4A3080;--purpb:#F0EEF8;--lgray:#CCCCCC;--mgray:#6B6B6B;
  --bluh:#1A3C6B;--blub:#EBF4FF;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Georgia,serif;background:var(--cream);color:var(--navy);
  min-height:100vh;padding-bottom:60px;line-height:1.5}
#topbar{background:var(--navy);color:var(--gold);padding:10px 20px;display:flex;
  align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  position:sticky;top:0;z-index:100}
#topbar h1{font-size:1rem;letter-spacing:.05em;font-weight:700}
#topbar a{color:var(--gold);font-size:.8rem;text-decoration:none;
  border:1px solid rgba(201,168,76,.5);padding:4px 10px;border-radius:4px}
#topbar a:hover,#topbar a:focus-visible{background:rgba(201,168,76,.15)}
#breadcrumb{font-size:.75rem;opacity:.75}
#main{max-width:840px;margin:0 auto;padding:20px}
.hub-header{text-align:center;padding:40px 20px;background:var(--navy);color:var(--cream);
  border-radius:12px;margin-bottom:24px}
.hub-header h1{font-size:2rem;color:var(--gold);margin-bottom:8px}
.hub-header p{opacity:.88;font-family:Arial,sans-serif;font-size:.95rem}
.hub-header .dep-note{margin-top:14px;font-family:Arial,sans-serif;font-size:.82rem;
  background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);
  border-radius:8px;padding:.5rem .85rem;display:inline-block;color:var(--gold)}
.phase-card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:24px;margin-bottom:16px}
.section-head{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amb);margin-bottom:12px;font-family:Arial,sans-serif}
.hub-card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:20px;
  margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;
  gap:14px;text-decoration:none;color:inherit;transition:box-shadow .2s}
.hub-card:hover,.hub-card:focus-visible{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.hub-card:last-child{margin-bottom:0}
.hub-card h3{font-size:1.1rem;color:var(--navy);margin-bottom:4px}
.hub-card p{font-size:.85rem;color:var(--mgray);font-family:Arial,sans-serif}
.hub-card .arrow{font-size:1.5rem;color:var(--gold);flex-shrink:0}
.lesson-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 4px;border-bottom:1px solid #eee;font-family:Arial,sans-serif;font-size:.88rem}
.lesson-row:last-child{border-bottom:none}
.lesson-row a{color:var(--navy);text-decoration:none;font-weight:600}
.lesson-row a:hover,.lesson-row a:focus-visible{text-decoration:underline}
.lesson-row .meta{color:var(--mgray);font-size:.78rem;flex-shrink:0}
.lesson-row.ks a{color:var(--amb)}
.chip{display:inline-block;font-family:Arial,sans-serif;font-size:.64rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:2px 7px;margin-left:6px}
.chip-ks{background:var(--ambb);color:var(--amb)}
.chip-sim{background:var(--purpb);color:var(--purp)}
.chip-final{background:var(--grnb);color:var(--grn)}
.ss-lock-chip{display:inline-block;font-family:Arial,sans-serif;font-size:.64rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;background:var(--gold);
  color:var(--navy);border-radius:4px;padding:2px 7px;margin-left:8px;vertical-align:middle}
.ss-notice{background:var(--purpb);border:1px solid var(--purp);border-left:4px solid var(--purp);
  border-radius:6px;padding:12px 14px;margin-bottom:16px;font-family:Arial,sans-serif;
  font-size:.86rem;color:var(--purp)}
.ss-es{color:var(--purp);font-family:Arial,sans-serif;font-size:.84rem}
.ss-es::before{content:'ES ';font-size:.66rem;font-weight:700;letter-spacing:.08em;opacity:.75}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--ambb);border:1px solid rgba(201,168,76,.5);border-radius:8px;
  padding:12px;text-align:center;font-family:Arial,sans-serif}
.stat b{display:block;font-size:1.4rem;color:var(--navy)}
.stat span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amb)}
a:focus-visible,button:focus-visible{outline:3px solid var(--bluh);outline-offset:2px;border-radius:3px}
#topbar a:focus-visible{outline-color:var(--gold)}
.ss-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:620px){
  #main{padding:16px 12px}
  .hub-header{padding:28px 16px}
  .hub-header h1{font-size:1.5rem}
  .lesson-row{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

html[data-tgs-locale="es"] [data-ss-es-mirror]{display:none}