/* ============================================================
   vogella.com "Workbench" design system
   Loaded LAST in header.ftl, so it reskins the existing CSS.
   Self-hosted variable fonts; Workbench palette and type.
   ============================================================ */

/* ---------- Self-hosted variable fonts ---------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root {
  --ink: #1b2230;
  --ink-2: #252d3a;        /* lighter graphite for nav dropdowns */
  --ink-70: #51596a;
  --ink-40: #9aa3b2;
  --paper: #ffffff;
  --panel: #f4f6f8;
  --panel-2: #eef1f5;
  --amber: #f26a1b;
  --amber-d: #d65a10;
  --teal: #2e7d6b;
  --teal-d: #256556;
  --hairline: #dce1e7;

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --maxw: 1200px;
  --radius: 8px;
  --radius-lg: 14px;
}

/* ---------- Base typography & colour ---------- */
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}

a, a:link, a:visited {
  color: var(--teal);
  transition: color 0.15s ease;
}
a:hover {
  color: var(--teal-d);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

::selection {
  background: rgba(242, 106, 27, 0.18);
}

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

/* ============================================================
   HEADER / TOP NAV  (refined graphite, Inter, amber/teal)
   ============================================================ */
.headerpart {
  background: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 14px rgba(16, 23, 38, 0.12);
}

#topnav li a {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
}
#topnav li a:visited { color: rgba(255, 255, 255, 0.82); }

#topnav li:hover > a {
  color: #fff;
  font-weight: 600;
  border-bottom: 3px solid var(--teal);
  transform: none;
}
#topnav li.currentpage > a {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* dropdown panels */
#topnav > ul > li > ul,
#topnav > ul > li > ul > li > ul,
#topnav > ul > li > ul > li > ul > li > ul {
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 34px rgba(16, 23, 38, 0.45);
  border-radius: 0 0 8px 8px;
}
#topnav > ul > li > ul > li a { font-weight: 500; }
#topnav > ul > li > ul > li:hover > a {
  color: var(--amber);
  background: rgba(255, 255, 255, 0.04);
}

/* mobile sidenav + header bar accents */
#mobileHeaderpart { background-color: var(--ink); }
#mobileHeaderpart:after {
  background: linear-gradient(90deg, var(--teal) 0%, var(--amber) 100%);
}
nav#mobileTopnav.sidenav { background-color: var(--ink); }
.sidenav a:hover {
  color: #fff;
  background-color: rgba(242, 106, 27, 0.12);
  border-left-color: var(--amber);
}
.sidenav a.currentpage {
  color: var(--amber);
  background-color: rgba(242, 106, 27, 0.12);
  border-left-color: var(--amber);
}

/* ============================================================
   FOOTER
   ============================================================ */
#companyfooter {
  background: var(--panel);
  border-top: 1px solid var(--hairline);
  color: var(--ink-70);
  font-family: var(--font-body);
}
#companyfooter a { color: var(--ink-70); }
#companyfooter a:hover { color: var(--amber); }
#companyfooter h2 a {
  font-family: var(--font-mono);
  color: var(--ink);
  text-transform: lowercase;
  letter-spacing: 0;
}
#companyfooter h2 a::before {
  content: "// ";
  color: var(--ink-40);
}
#companyfooter h2 a:hover { color: var(--amber); }
.darker_link,
#companyfooter a.darker_link { color: var(--ink); }
#social-icons a { background: var(--paper); border-color: var(--hairline); }
#social-icons a:hover { border-color: var(--amber); }
#companyfooter a:hover img {
  filter: invert(52%) sepia(64%) saturate(2000%) hue-rotate(347deg) brightness(98%) contrast(94%);
}

/* ============================================================
   BUTTONS  (training CTAs, register, request)
   ============================================================ */
a.training_cta {
  background: var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
}
a.training_cta:hover { background: var(--amber); }

table#events td.register .register_buttons a,
.request-button {
  background: var(--amber);
  border: 1px solid var(--amber-d);
  border-radius: var(--radius);
  font-family: var(--font-body);
}
table#events td.register .register_buttons a:hover,
.request-button:hover {
  background: var(--amber-d);
}
.form-input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(242, 106, 27, 0.12);
}

/* ============================================================
   CARDS  (homepage offerings, training catalog/options)
   Reworked to the Workbench look: left-aligned, hairline,
   teal top accent that turns amber on the featured card.
   ============================================================ */
.training_card,
.training_option,
.news_slide {
  border-color: var(--hairline);
  border-radius: var(--radius);
}
.training_card {
  text-align: left;
  padding: 24px 24px 22px;
  overflow: hidden;
}
.training_card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  opacity: 0.85;
  transition: background 0.15s ease;
}
.training_card:hover::before { background: var(--amber); }
.training_card:hover {
  box-shadow: 0 10px 26px rgba(16, 23, 38, 0.10);
  border-color: #c8cfd9;
}
.training_card_icon img {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
}
.training_card .header_black {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
}
.training_card .header_black:hover { color: var(--amber); }
.training_card_description {
  color: var(--ink-70);
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
/* optional mono tag rendered by the @card macro */
.training_card_tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-40);
  margin-bottom: 10px;
}

a.header_black { color: var(--ink); font-family: var(--font-display); }

/* news slider eyebrow + accents */
.news_slide_eyebrow {
  font-family: var(--font-mono);
  color: var(--teal);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.news_slide_eyebrow::before { content: "// "; color: var(--ink-40); }
.news_slide_title { font-family: var(--font-display); color: var(--ink); }
.news_slide_title:hover { color: var(--amber); }
.news_slider_btn:hover { background: var(--amber); }
.news_slider_dot.is-active { background: var(--amber); }

/* ============================================================
   REVIEWS  (.quotes) -> solid ink band, mono meta
   ============================================================ */
.quotes {
  background: var(--ink);
  border-radius: var(--radius-lg);
}
.quotes h2 {
  font-family: var(--font-mono);
  text-transform: lowercase;
  letter-spacing: 0;
}
.quotes h2::before { content: "// "; color: rgba(255, 255, 255, 0.4); }
.quotes h2 a:hover { color: var(--amber); }
.quotes h2::after { background: var(--teal); }
.quote-container::before { color: rgba(242, 106, 27, 0.35); }
.quote-text { font-family: var(--font-body); }
.quote-meta { font-family: var(--font-mono); }
button#prev-btn:hover,
button#next-btn:hover {
  background: var(--amber);
  border-color: var(--amber);
}

/* ============================================================
   TRAINING / OFFERING pages — accent + heading alignment
   ============================================================ */
.offer h1 { font-family: var(--font-display); color: var(--amber); font-weight: 600; }
.offer h2, .agenda { font-family: var(--font-display); color: var(--ink); }
.agendadiv h2 { color: var(--amber); }
#book h2 { border-left-color: var(--amber); color: var(--ink); }
.concept_title { color: var(--ink); }

/* ============================================================
   Section eyebrow utility (subpage headings)
   Add class="ds-eyebrow" to a small label element.
   ============================================================ */
.ds-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--teal);
  margin-bottom: 0.5rem;
}
.ds-eyebrow::before { content: "// "; color: var(--ink-40); }

/* offerings heading block on the homepage */
.wb-offerings-head { max-width: var(--maxw); margin: 0 auto; padding: 0 5%; }
.wb-offerings-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0.1rem 0 1.2rem; }

/* landing-page hero titles -> Workbench display face */
.header_light_background, a.header_light_background {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.training_hero .description_black,
.description_black { font-family: var(--font-body); }

/* eyebrow centered when it sits inside a centered hero */
.section_white_center .ds-eyebrow { text-align: center; }

/* ============================================================
   WORKBENCH HOMEPAGE HERO  (scoped under .wb)
   Editor gutter rail with working fold carets + featured tab.
   ============================================================ */
.wb { --rail-w: 52px; margin: 8px 0 40px; }

.wb-shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  align-items: stretch;
}

/* gutter rail */
.wb-rail {
  position: relative;
  border-right: 1px solid var(--hairline);
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.9;
  color: var(--ink-40);
  text-align: right;
  user-select: none;
  counter-reset: gutter;
}
.wb-rail__caret {
  position: absolute;
  left: 4px;
  top: 6px;
  color: var(--teal);
  font-size: 0.8rem;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.wb-rail__caret:hover { background: rgba(46, 125, 107, 0.14); }
.wb-rail__lines { padding-right: 14px; }
.wb-rail__lines span { display: block; counter-increment: gutter; }
.wb-rail__lines span::before { content: counter(gutter); }

.wb-content { padding: 6px 0 6px clamp(1.2rem, 3vw, 2.4rem); min-width: 0; }

.wb-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--teal);
  margin: 0 0 0.6rem;
}
.wb-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  color: var(--ink);
  max-width: 18ch;
}
.wb-sub {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--ink-70);
  max-width: 46ch;
  margin: 0 0 1.6rem;
}
.wb-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.wb-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.wb-btn--primary { background: var(--amber); color: #fff; }
.wb-btn--primary:hover { background: var(--amber-d); color: #fff; text-decoration: none; transform: translateY(-1px); }
.wb-btn--ghost { color: var(--ink); border: 1px solid var(--hairline); background: var(--paper); }
.wb-btn--ghost:hover { border-color: var(--ink-40); color: var(--ink); text-decoration: none; }

/* featured strip styled as an open editor tab */
.wb-featured { margin-top: 1.8rem; max-width: 640px; }
.wb-featured__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
  background: var(--ink);
  padding: 0.4rem 0.9rem;
  border-radius: 8px 8px 0 0;
}
.wb-featured__tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.wb-featured__body {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  background: var(--ink);
  padding: 0.9rem 1.1rem;
  border-radius: 0 8px 8px 8px;
  text-decoration: none;
}
.wb-featured__body:hover { color: #fff; text-decoration: none; }
.wb-featured__body .kw { color: var(--amber); }
.wb-featured__body .arrow { color: var(--teal); }

/* folded state: hide the body, keep the eyebrow + headline, show ellipsis */
.wb.is-folded .wb-fold-body { display: none; }
.wb.is-folded .wb-content::after {
  content: "\22EF";
  display: block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-40);
  margin-top: 0.4rem;
}

@media (max-width: 768px) {
  .wb-shell { grid-template-columns: 10px 1fr; }
  .wb-rail__lines, .wb-rail__caret { display: none; }
  .wb-rail { background: linear-gradient(var(--amber), var(--teal)); border-right: 0; border-radius: 3px; }
  .wb-content { padding-left: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; }
}