/* =========================================================
   British Council / IELTS — responsive polish layer
   Keeps the desktop composition intact and makes the same
   interface behave cleanly from tablet down to small phones.
   ========================================================= */

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

/* Shared account header */
.main-nav { min-width: 0; }
.brand, .nav-links, .logout { min-width: 0; }
.nav-links a { min-width: 0; }

@media (max-width: 900px) {
  .topbar {
    min-height: 54px;
    height: auto;
    padding: 10px 22px;
    gap: 16px;
  }

  .topbar .hello {
    min-width: 0;
    max-width: 68%;
    text-align: right;
    line-height: 1.2;
  }

  .main-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand logout"
      "links links";
    align-items: center;
    gap: 16px 18px;
    padding: 16px 22px 18px;
  }

  .brand { grid-area: brand; }
  .nav-links {
    grid-area: links;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    overflow: visible;
    padding: 0;
  }

  .nav-links a {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    text-align: center;
    white-space: normal;
    font-size: 17px;
    line-height: 1.2;
  }

  .logout {
    grid-area: logout;
    margin: 0;
    min-width: 124px;
    width: auto;
    height: 54px;
  }

  .test-tabs {
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .test-tabs a {
    min-width: 0;
    min-height: 68px;
    padding: 14px 8px;
  }

  /* Inline footer markup exists on the older pages, so override it here. */
  footer > div:first-child {
    width: min(100% - 40px, 1650px) !important;
  }

  footer > div:first-child > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 16px !important;
    margin-bottom: 38px !important;
  }

  footer > div:first-child > div:first-child span {
    height: 22px !important;
  }
}

@media (max-width: 600px) {
  .topbar {
    min-height: 52px;
    padding: 9px 14px;
    font-size: 14px;
  }

  .topbar .hello {
    max-width: 70%;
    font-size: 14px;
  }

  .language { font-size: 15px; }
  .language span { font-size: 19px; }

  .main-nav {
    gap: 13px 12px;
    padding: 13px 14px 15px;
  }

  .brand { gap: 10px; }
  .bc-logo { width: 92px; height: 40px; }
  .ielts-logo { width: 82px; height: 40px; }

  .logout {
    min-width: 104px;
    height: 46px;
    padding: 0 11px;
    gap: 7px;
    border-radius: 9px;
    font-size: 15px;
  }

  .logout-icon { width: 26px; height: 26px; }

  .nav-links {
    gap: 6px 8px;
  }

  .nav-links a {
    min-height: 40px;
    padding: 7px 4px;
    font-size: 14px;
  }

  .test-summary {
    min-width: 0;
  }

  .reference-box {
    width: 100%;
    overflow-wrap: anywhere;
  }

  .test-tabs a {
    min-height: 62px;
    font-size: 14px;
    padding: 11px 6px;
  }

  .results-panel,
  .date-location-panel,
  .test-taker-panel,
  .payment-panel,
  .recognising-panel {
    min-width: 0;
  }

  footer {
    padding: 42px 0 36px !important;
  }

  footer > div:first-child {
    width: calc(100% - 28px) !important;
  }

  footer > div:first-child > div:first-child {
    font-size: 15px !important;
    line-height: 1.35 !important;
    gap: 10px 12px !important;
    margin-bottom: 30px !important;
  }

  footer > div:first-child > p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 380px) {
  .brand { gap: 7px; }
  .bc-logo { width: 82px; }
  .ielts-logo { width: 73px; }
  .logout { min-width: 96px; padding: 0 8px; font-size: 14px; }
  .logout-icon { width: 23px; height: 23px; }
  .nav-links a { font-size: 13px; }
}

/* Help & contact uses the older .nav/.links naming; keep it on the same responsive system. */
@media (max-width: 900px) {
  .nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand logout"
      "links links";
    align-items: center;
    gap: 16px 18px;
    padding: 16px 22px 18px !important;
  }

  .nav > .brand { grid-area: brand; min-width: 0; }
  .nav > .links {
    grid-area: links;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    overflow: visible !important;
  }

  .nav > .links a {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    text-align: center;
    white-space: normal;
    font-size: 17px;
    line-height: 1.2;
  }

  .nav > .logout {
    grid-area: logout;
    margin: 0 !important;
    min-width: 124px;
    width: auto;
    height: 54px;
  }
}

@media (max-width: 600px) {
  .nav { gap: 13px 12px; padding: 13px 14px 15px !important; }
  .nav > .links { gap: 6px 8px; }
  .nav > .links a { min-height: 40px; padding: 7px 4px; font-size: 14px; }
  .nav > .logout { min-width: 104px; height: 46px; padding: 0 11px; font-size: 15px; }
  .nav .bc svg { width: 150px; max-width: 100%; }
  .nav .ielts svg { width: 95px; max-width: 100%; }
}