/* Hub (www) pages. Loaded only by the hub build; colours come from the site.css variables,
   which already switch for the dark scheme, so nothing here needs its own dark block. */

.hub-home section,
.hub-topic section { margin-top: 2.25rem; }
.hub-home section > h2,
.hub-topic section > h2 { margin-top: 0; }
.hub-home h3,
.hub-topic h3 { font-size: 1.05rem; margin: 0 0 .5rem; line-height: 1.3; }

.hub-hero { padding-bottom: .25rem; }
.hub-hero .lede { margin-bottom: .5rem; }
.hub-pronunciation { margin: 0; color: var(--muted); font-size: var(--fs-small, .9rem); }

/* The small "(English)" style tag after a link: quiet, never competes with the link. */
.hub-lang-note { color: var(--muted); font-size: .8rem; font-weight: 400; white-space: nowrap; }

/* Entry cards: one group per block, cards in a grid. */
.hub-group { margin-top: 1.5rem; }
.hub-group:first-of-type { margin-top: 1rem; }
.hub-entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hub-entry {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .5rem;
  padding: .85rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.hub-entry:hover,
.hub-entry:focus-within { border-color: var(--brand); }
/* The whole card is the link: the anchor's ::after covers the card, so a thumb anywhere on it hits. */
.hub-entry { position: relative; cursor: pointer; }
.hub-entries .hub-entry .hub-entry-link::after { content: ""; position: absolute; inset: 0; }
.hub-entries .hub-entry .hub-entry-link {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  text-decoration: none;
  color: var(--ink);
}
.hub-entries .hub-entry .hub-entry-link:hover { border: 0; }
.hub-entry-region { font-weight: 700; color: var(--link); }
.hub-entry-exam { color: var(--muted); font-size: .9rem; }
.hub-entry-link:hover .hub-entry-region { text-decoration: underline; }

/* "Find by your situation": three plain blocks. */
.hub-need { margin-top: 1.25rem; }
.hub-need-links,
.hub-more-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hub-need-links li,
.hub-more-links li { max-width: none; }
.hub-need-links a,
.hub-more-links a {
  display: inline-block;
  padding: .4rem .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
}
.hub-need-links a:hover,
.hub-more-links a:hover { background: var(--brand-tint); border-color: var(--brand); }

/* What the hub can do: a tinted panel with ticks. */
.hub-can {
  padding: 1.25rem 1.5rem;
  background: var(--brand-tint);
  border-radius: var(--radius-lg);
}
.hub-can-list { margin: 0; padding-left: 1.25rem; }
.hub-can-list li { padding: .15rem 0; }

/* FAQ: question and answer as one bordered block each. */
.hub-faq-item {
  margin-top: .75rem;
  padding: .85rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.hub-faq-item h3 { margin-bottom: .35rem; }
.hub-faq-item p { margin: 0; color: var(--muted); }

/* Topic page: the one-sentence answer stands out. */
.hub-answer {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--brand-tint);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  max-width: none;
}

/* Tables. */
.hub-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: .92rem;
}
.hub-table th,
.hub-table td {
  padding: .6rem .75rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
}
.hub-table thead th {
  border-top: 0;
  background: var(--brand-tint);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.hub-table tbody th { font-weight: 700; min-width: 7rem; }
.hub-table tbody tr:nth-child(even) { background: var(--paper); }
.hub-table tbody td { overflow-wrap: break-word; }
.hub-table td a { white-space: nowrap; }
.hub-compare tbody td { min-width: 5rem; }

/* Coach page: each place is a row with the register link on the right. */
.hub-coach-places {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hub-coach-place {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--line);
}
.hub-coach-place:first-child { border-top: 0; }
.hub-coach-region { flex: 1 1 10rem; font-weight: 700; }

/* Phone: every table row becomes one card; data-label names the value. */
@media (max-width: 640px) {
  .hub-table,
  .hub-table tbody,
  .hub-table tr,
  .hub-table th,
  .hub-table td { display: block; }
  .hub-table { background: none; border: 0; border-radius: 0; overflow: visible; }
  .hub-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .hub-table tbody tr,
  .hub-table tbody tr:nth-child(even) {
    margin-top: .75rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .hub-table tbody tr:first-child { margin-top: 0; }
  .hub-table tbody th {
    min-width: 0;
    padding: .65rem .9rem;
    border-top: 0;
    background: var(--brand-tint);
  }
  .hub-table tbody td {
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .5rem .9rem;
    min-width: 0;
  }
  .hub-table td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    color: var(--muted);
    font-weight: 600;
  }
  .hub-table td > * { text-align: right; }
  .hub-answer { font-size: 1.1rem; }
}

/* Header: the two hub links (choose a place, driving coaches) sit beside the language picker;
   on a narrow screen the shared header already moves the nav to its own full-width row. */
.hub-nav { gap: .25rem 1.25rem; }

/* Footer: three columns (places by country, topics, about), then the one-line disclaimer.
   One column on a narrow screen. */
.hub-footer { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 1rem; }
@media (min-width: 48rem) {
  .hub-footer { grid-template-columns: 1.2fr 1fr .8fr; }
}
.hub-footer h2 { font-size: .95rem; color: #fff; margin: 0 0 .6rem; }
.hub-footer h3 { font-size: .8rem; font-weight: 600; margin: .9rem 0 .35rem; opacity: .75; }
.hub-footer h2 + h3 { margin-top: 0; }
.hub-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.hub-footer li { max-width: none; }
.hub-footer .hub-lang-note { color: inherit; opacity: .7; }