/* speakingglobally.com: system fonts, no external resources, no JavaScript. */

:root {
  color-scheme: light;
  --brand: #e2001a;
  --link: #a50013;
  --ink: #1c1c1f;
  --muted: #52525a;
  --line: #e3e3e8;
  --bg: #ffffff;
  --tint: #f7f5f5;
  --max: 68rem;
  --gutter: clamp(1rem, 4vw, 2rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem);
  margin-top: 2rem;
}

h3 {
  font-size: 1.15rem;
}

p,
ul,
dl,
address {
  margin: 0 0 1rem;
}

ul {
  padding-left: 1.25rem;
}

li + li {
  margin-top: 0.35rem;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -10rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
}

.skip-link:focus {
  top: 0.5rem;
}

/* Header and navigation: plain links that wrap on narrow screens. */

.site-header {
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.5rem;
  padding-block: 1.25rem 1rem;
}

.brand {
  display: block;
  line-height: 0;
}

/* The logo file is the artwork alone (no blank canvas), so its left edge, the
   S, sits exactly on the content margin. 152px wide on the smallest phones,
   growing gently with the viewport to 184px on wide screens; height follows
   the width/height attributes' ratio via img { height: auto }. */
.brand img {
  width: clamp(9.5rem, 8.75rem + 3.75vw, 11.5rem);
}

/* Narrow screens (the default): the navigation takes a full row of its own. */
.site-nav {
  flex: 1 1 100%;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}

/* Learner sign-in: a solid brand-red button with white text, tall enough to
   be a comfortable touch target. */
.login-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 1.15rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.login-link:hover {
  background: var(--link);
}

/* Sign in appears twice in the header markup and exactly one copy is rendered
   at any width, so reading and keyboard order always match what is displayed.
   Nothing is visually reordered. display: none also removes the unused copy
   from keyboard focus and from assistive technology.
   Narrow screens (the default): the copy that follows the logo, pushed to the
   right of the logo row. */
.login-link-narrow {
  margin-left: auto;
}

.login-link-wide {
  display: none;
}

/* From the width at which the header fits on one row: the copy that follows
   the navigation. */
@media (min-width: 64rem) {
  .brand {
    margin-right: 1.5rem;
  }

  .site-nav {
    flex-basis: auto;
  }

  .login-link-narrow {
    display: none;
  }

  .login-link-wide {
    display: inline-flex;
  }
}

/* Content */

main {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.prose {
  max-width: 44rem;
}

.lead {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  color: var(--muted);
  max-width: 42rem;
}

.hero {
  padding-bottom: 1rem;
}

.button {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.button:hover {
  background: var(--link);
}

/* Home page actions, each a short question with its button: existing learners
   sign in (outlined); people who want to join contact us (solid). */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.learner-action,
.enquiry-action {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--muted);
}

.button-secondary {
  padding: calc(0.7rem - 2px) calc(1.2rem - 2px);
  border: 2px solid var(--link);
  background: var(--bg);
  color: var(--link);
}

.button-secondary:hover {
  background: var(--tint);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
  margin-block: 2rem;
}

.card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 6px;
}

.card h2 {
  margin-top: 0;
  font-size: 1.3rem;
}

.card p:last-child {
  margin-bottom: 0;
}

.panel {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border-radius: 6px;
  background: var(--tint);
}

.panel h2 {
  margin-top: 0;
}

.panel p:last-child {
  margin-bottom: 0;
}

.small-print {
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.approach section {
  padding-top: 0.25rem;
}

.contact-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
}

.contact-list dt {
  font-weight: 600;
}

.contact-list dd {
  margin: 0;
  min-width: 0; /* lets a long unbroken value wrap on narrow screens */
}

.contact-list address {
  font-style: normal;
  margin: 0;
}

@media (max-width: 30rem) {
  .contact-list {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .contact-list dd {
    margin-bottom: 0.75rem;
  }
}

.columns {
  columns: 2 14rem;
  column-gap: 2rem;
}

.columns li {
  break-inside: avoid;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--tint);
  font-size: 0.9375rem;
  color: var(--muted);
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.5rem 2rem;
  padding-block: 2rem;
}

.footer-inner p {
  margin: 0;
}

/* Business name in bold, location in regular weight, both the same size. */
.footer-identity {
  color: var(--ink);
}

.footer-name {
  font-weight: 600;
}

.footer-location {
  font-weight: 400;
}

.copyright {
  grid-column: 1 / -1;
  padding-top: 1rem;
  font-size: 0.875rem;
}

/* Legal notice: fine print at the end of the copyright line. Same small size
   and muted grey as that line, regular weight, no decoration beyond the
   underline that marks it as a link; the padding gives a usable tap area. */
.legal-link {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--muted);
  font-weight: 400;
}

/* Legal notice page only (.legal-page is set on that page's wrapper and
   nowhere else): plain, modest type. Title 18px medium, text 15px regular,
   tighter line and paragraph spacing. Sizes are in rem, so browser zoom and
   the reader's own text-size setting still apply. */
.legal-page {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.legal-page h1 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
}

.legal-page h2 {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.legal-page p,
.legal-page dl {
  margin-bottom: 0.75rem;
}

.legal-page .lead {
  font-size: inherit;
}

.legal-page .contact-list {
  row-gap: 0.3rem;
}

.legal-page .contact-list dt {
  color: var(--muted);
  font-weight: 400;
}

.legal-page .small-print {
  margin-top: 1.25rem;
  font-size: inherit;
}

@media (max-width: 30rem) {
  .legal-page .contact-list {
    row-gap: 0.1rem;
  }

  .legal-page .contact-list dd {
    margin-bottom: 0.5rem;
  }
}

@media print {
  .skip-link,
  .site-nav,
  .login-link,
  .site-footer {
    display: none;
  }
}