/* SSE TestCenter — site stylesheet
   Extends Bootstrap 5.3 with Cloud Fellows brand variables. */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');

:root {
  --cf-navy:        #0F3052;  /* Perlnachtblau RAL 5026 — dark contrast */
  --cf-vermeer:     #4784B3;  /* Vermeerblau RAL 260 50 35 — CF primary brand blue */
  --cf-steel:       #637D96;  /* Taubenblau RAL 5014 — mid-tone */
  --cf-nebelblau:   #9FB2BE;  /* Nebelblau RAL 250 70 10 — blue-grey */
  --cf-puderblau:   #BDCBD9;  /* Puderblau RAL 260 80 10 — lightest CF blue; H2 badge */
  --cf-offwhite:    #F1F1EA;  /* Verkehrsweiß RAL 9016 — background */
  --cf-seifenrosa:  #E4BFC9;  /* Seifenrosa RAL 360 80 15 — light pink; H2C badge */
  --cf-persischrot: #C45D80;  /* Persischrot RAL 360 50 50 — medium rose; H1C badge */
  --cf-danger:      #FF2A1C;  /* Leuchthellrot RAL 3026 — accent/error */
  --cf-dark:        #0E0E10;  /* Tiefschwarz RAL 9005 — body text */
  --bs-primary:    var(--cf-navy);
  --bs-secondary:  var(--cf-steel);
  --bs-body-font-family: 'Figtree', system-ui, sans-serif;
  --bs-body-bg:    var(--cf-offwhite);
}

body {
  background-color: var(--cf-offwhite);
  color: var(--cf-dark);
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.tc-navbar {
  background-color: var(--cf-navy);
}
.tc-navbar .navbar-brand {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: #fff;
}
.tc-navbar .nav-link {
  color: rgba(255,255,255,.80);
  font-weight: 500;
}
.tc-navbar .nav-link:hover,
.tc-navbar .nav-link.active {
  color: #fff;
}
.tc-navbar .navbar-toggler {
  border-color: rgba(241,241,234,.5);
}
.tc-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F1F1EA' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Feature cards ───────────────────────────────────────────────────── */
.tc-cards {
  background-color: var(--cf-offwhite);
  padding: 2.5rem 1.5rem;
}
.tc-card {
  background: #fff;
  border: 1px solid #ddddd6;
  border-radius: .75rem;
  padding: 1.5rem;
  height: 100%;
  transition: box-shadow .15s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.tc-card:hover {
  box-shadow: 0 4px 20px rgba(15,48,82,.12);
  color: inherit;
}
.tc-card-icon {
  font-size: 2rem;
  margin-bottom: .75rem;
  line-height: 1;
}
.tc-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--cf-navy);
}
.tc-card p {
  font-size: .9rem;
  color: #555;
  margin: 0;
  flex: 1;
}

/* ── Section headings ────────────────────────────────────────────────── */
.tc-section {
  padding: 2.5rem 1.5rem;
}
.tc-section-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cf-navy);
  margin-bottom: 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--cf-navy);
  display: inline-block;
}

/* ── Protocol badge ──────────────────────────────────────────────────── */
.proto-badge {
  display: inline-block;
  min-width: 3em;
  padding: .2em .45em;
  border-radius: .35em;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  border: 1px solid var(--cf-offwhite); /* invisible on page bg; white outline on Vermeer bar */
}
/* TLS protocols */
.proto-h3  { background: #a8d5b0;               color: #155724;        } /* saturated mint — newest */
.proto-h2  { background: var(--cf-puderblau);   color: var(--cf-navy); } /* Puderblau — mainstream */
.proto-h1  { background: var(--cf-seifenrosa);  color: var(--cf-navy); } /* Seifenrosa — legacy TLS */
/* Cleartext — same family as TLS counterpart, one shade darker */
.proto-h2c { background: var(--cf-nebelblau);   color: var(--cf-navy); } /* Nebelblau — darker than H2 */
.proto-h1c { background: var(--cf-persischrot); color: var(--cf-dark); } /* Persischrot — darker than H1; 5.1:1 */

/* ── Hosts table ─────────────────────────────────────────────────────── */
.tc-hosts-table {
  font-size: .88rem;
}
.tc-hosts-table thead th {
  background-color: var(--cf-navy);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  border: none;
}
.tc-hosts-table tbody tr:hover {
  background-color: rgba(15,48,82,.04);
}
.tc-hosts-table code {
  font-size: .83rem;
  color: var(--cf-navy);
}
.curl-example {
  font-size: .8rem;
  background: #f4f4ef;
  border: 1px solid #ddddd6;
  border-radius: .35rem;
  padding: .35rem .65rem;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

/* ── Download table ──────────────────────────────────────────────────── */
.tc-dl-btn {
  background-color: var(--cf-navy);
  color: #fff;
  border: none;
  border-radius: .4rem;
  padding: .3rem .85rem;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.tc-dl-btn:hover {
  background-color: #1a4a72;
  color: #fff;
}
.tc-speed-result {
  font-size: .85rem;
  color: var(--cf-steel);
  margin-top: .3rem;
}
.tc-dl-status   { color: var(--cf-steel); }
.tc-dl-ok       { color: #2a7a3b; font-weight: 500; }
.tc-dl-fail     { color: #b94040; font-weight: 500; }
.tc-dl-checking { color: var(--cf-steel); font-style: italic; }
.tc-file-hash {
  font-family: monospace;
  font-size: .72rem;
  color: #888;
  overflow-wrap: anywhere;
  margin-top: .2rem;
}

/* ── EICAR result indicators ─────────────────────────────────────────── */
.eicar-box {
  overflow-x: auto;
}

.eicar-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid #e8e8e2;
  min-width: 520px;
}
.eicar-row:last-child { border-bottom: none; }
.eicar-status {
  min-width: 5rem;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  padding: .25em .6em;
  border-radius: .3em;
}
.eicar-status.ok      { background: #d4edda; color: #155724; }
.eicar-status.blocked { background: #f8d7da; color: #721c24; }
.eicar-status.pending { background: #e9ecef; color: #6c757d; }

/* ── Coming-soon stub ────────────────────────────────────────────────── */
.tc-coming-soon {
  background: #fff;
  border: 2px dashed #b0b8c4;
  border-radius: .75rem;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--cf-steel);
}
.tc-coming-soon h2 {
  font-weight: 700;
  color: var(--cf-navy);
  margin-bottom: .5rem;
}

/* ── Browser behavior indicators ─────────────────────────────────────── */
.browser-row {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.browser-row + .browser-row { margin-top: .3rem; }
.browser-lbl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 700;
  margin-right: .3em;
  flex-shrink: 0;
}
.browser-s    { background: #dbeafe; color: #1e40af; }
.browser-c    { background: #fef3c7; color: #92400e; }
.browser-fail { color: #b91c1c; font-weight: 600; font-size: .8rem; }
.tc-subsection-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cf-navy);
  margin: 1.5rem 0 .5rem;
}

/* ── Protocol detection widget ───────────────────────────────────────── */
.tc-detect-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cf-steel);
  margin-bottom: .2rem;
}
.tc-detect-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cf-navy);
  line-height: 1.2;
}
.tc-detect-hint {
  font-size: .8rem;
  color: var(--cf-steel);
  margin-top: .25rem;
}

/* ── Curl collapsible ────────────────────────────────────────────────── */
.curl-toggle {
  margin-top: .4rem;
}
.curl-toggle summary {
  font-size: .76rem;
  color: var(--cf-steel);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  user-select: none;
}
.curl-toggle summary::-webkit-details-marker { display: none; }
.curl-toggle summary::before {
  content: '\25b6';
  font-size: .6em;
  transition: transform .15s;
}
.curl-toggle[open] summary::before {
  transform: rotate(90deg);
}
.curl-toggle summary:hover { color: var(--cf-navy); }
.curl-toggle .curl-example { margin-top: .4rem; }

/* ── Compact hero bar (sticky header secondary row) ─────────────────── */
.tc-hero-bar {
  background-color: var(--cf-vermeer);
  color: #fff;
  padding: .55rem 0;
}
.tc-hero-bar h1 {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  margin: 0;
  letter-spacing: .01em;
}
.tc-hero-bar .tc-detect-label {
  color: rgba(255,255,255,.82);
  margin-bottom: .1rem;
}
.tc-hero-bar .tc-detect-value {
  color: #fff;
  font-size: 1rem;
}
.tc-hero-bar .tc-detect-hint {
  color: rgba(255,255,255,.82);
  font-size: .72rem;
  margin-top: .05rem;
}

/* ── Home page intro band ────────────────────────────────────────────── */
.tc-home-intro {
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 1.75rem 0 1.35rem;
}

.tc-home-subtitle {
  color: var(--cf-navy);
  font-size: clamp(1rem, 1.1vw + .75rem, 1.25rem);
  line-height: 1.45;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1.15rem;
}

.tc-home-illustration {
  display: block;
  width: min(1120px, 100%);
  height: auto;
  margin: 0 auto;
}

.tc-home-start {
  margin: .9rem 0 0;
  font-size: .95rem;
  text-align: center;
  color: var(--cf-steel);
}

.tc-home-start a {
  font-weight: 600;
}

/* ── Numbered guidance steps (home page "What is this?") ─────────────── */
.tc-guidance-card {
  border-left: 3px solid var(--cf-vermeer);
  padding: .5rem 0 .5rem 1rem;
  height: 100%;
}

.tc-guidance-card h3 {
  color: var(--cf-navy);
  margin-bottom: .3rem;
}

@media (max-width: 767.98px) {
  .tc-home-intro {
    padding-top: 1.25rem;
  }
}

/* ── Scroll offset for anchored section headings ─────────────────────── */
.tc-section-title[id] {
  scroll-margin-top: 130px;
}

/* ── Via indicator badge (protocol detection table cells) ────────────── */
.via-badge {
  font-size: .7rem;
  font-weight: 600;
  color: #555;
  background: #e2e6ea;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 3px;
  vertical-align: middle;
  cursor: default;
  white-space: nowrap;
}

/* ── Protocol detection verdict box ──────────────────────────────────── */
.tc-verdict {
  border-left: 4px solid var(--cf-vermeer);
  background: #f0f4f8;
  padding: .75rem 1rem;
  border-radius: 0 .375rem .375rem 0;
  max-width: 72ch;
}

.tc-verdict-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cf-vermeer);
  margin-bottom: .4rem;
}

.tc-verdict.verdict-green                   { border-left-color: #28a745; }
.tc-verdict.verdict-green .tc-verdict-title { color: #1a7a2e; }
.tc-verdict.verdict-amber                   { border-left-color: #e08600; }
.tc-verdict.verdict-amber .tc-verdict-title { color: #9a5c00; }
.tc-verdict.verdict-red                     { border-left-color: #dc3545; }
.tc-verdict.verdict-red   .tc-verdict-title { color: #a71d2a; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.tc-footer {
  background-color: var(--cf-navy);
  color: rgba(255,255,255,.65);
  font-size: .85rem;
  padding: 1.25rem 1.5rem;
  margin-top: auto;
}
.tc-footer a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
.tc-footer a:hover {
  color: #fff;
}
.tc-powered {
  font-weight: 600;
  color: rgba(255,255,255,.9);
}