/*
 * UK Tobacco Track & Trace resource centre — static rebuild of the Divi 5 WordPress theme.
 * Values are measured from the live site (docs/discovery/visual-baseline.md); breakpoints follow
 * Divi: tablet <= 980px, phone <= 767px.
 */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/OpenSans-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/OpenSans-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/NunitoSans-normal-latin.woff2') format('woff2');
}

:root {
  --navy: #000041;
  --navy-text: #2d375a;
  --heading-muted: #535b7c;
  --link: #2ea3f2;
  --menu-current: #03aee5;
  --text: #666;
  --text-card: #475366;
  --text-muted: #8c95af;
  --text-legal: #959baf;
  --surface-alt: #f8fbfe;
  --surface-resources: #eff2f5;
  --surface-legal-hero: #dfe2ed;
  --accordion-bg: #f4f7f9;
  --table-border: #eee;
  --bottom-bar: #171717;
  --hero-gradient: linear-gradient(135deg, #03aee5 0%, #4161d4 85%);
  --hero-text-shadow: 5.98px 0.23px 15.18px rgba(0, 0, 65, 0.62);
  --font-body: 'Open Sans', Arial, sans-serif;
  --font-heading: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  --font-alt: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif;
  --header-height: 74px;
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  /* Long URLs and e-mail addresses in the content wrap instead of widening the page (as in Divi). */
  overflow-wrap: break-word;
  padding-top: var(--header-height); /* room for the fixed header */
}

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

a {
  color: var(--link);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding-bottom: 10px;
  color: #333;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1em;
}

p {
  margin: 0;
  padding-bottom: 1em;
}
p:last-child {
  padding-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0 0 23px 1em;
  line-height: 26px;
}

strong,
b {
  font-weight: 700;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100000;
  padding: 8px 16px;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
}
.skip-link:focus {
  top: 8px;
}

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

/* Divi row: 80% wide, max 1080px, centred. */
.row {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
}
.row--cards {
  width: 90%;
  max-width: 1200px;
  padding: 30px 0;
}

/* ---------------------------------------------------------------- Header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 99999;
  height: var(--header-height);
  background: var(--navy);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  font-family: var(--font-heading);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 32px 0 30px;
}

.site-header__logo {
  display: block;
  margin-left: 4px;
}
.site-header__logo img {
  display: block;
  width: 215px;
  height: auto;
}

.nav-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  font-weight: 600;
  line-height: 14px;
  align-items: center;
  margin: 0;
  padding: 11px 0 0;
  list-style: none;
}
.site-nav li {
  padding-right: 22px;
}
.site-nav li:last-child {
  padding-right: 0;
}
.site-nav a {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
}
.site-nav a:hover {
  opacity: 0.7;
}
.site-nav a[aria-current='page'] {
  color: var(--menu-current);
}
.site-nav__cta a {
  padding: 10px 20px 11px;
  border-radius: 30px;
  background: #fff;
  color: #000;
}
.site-nav__cta {
  margin-top: -6px;
}

/* ---------------------------------------------------------------- Hero */

.hero {
  background: var(--hero-gradient);
}
.hero__title,
.hero__subtitle {
  color: #fff;
  font-family: var(--font-heading);
  text-shadow: var(--hero-text-shadow);
}

.hero--home {
  padding: 100px 0;
}
.hero--home .row {
  padding: 1.9% 0;
}
.hero--home .hero__title {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 0 13.8px rgba(0, 0, 0, 0.2);
}

.hero--banner {
  min-height: 215px;
  padding-top: 30px;
}
.hero--banner .row,
.hero--legal .row {
  padding-top: 25px;
}
.hero--banner .hero__title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
}
.hero--banner .hero__subtitle {
  padding: 0;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.8;
}

.hero--legal {
  min-height: 140px;
  padding-top: 30px;
  background: var(--surface-legal-hero);
}
.hero--legal .hero__title,
.hero--legal .hero__subtitle {
  color: var(--navy-text);
  text-shadow: none;
}
.hero--legal .hero__title {
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
}
.hero--legal .hero__subtitle {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
}
.page-cyber-security-notice .hero--legal {
  padding-bottom: 30px;
}

/* ---------------------------------------------------------------- Sections */

/* Divi spacing: sections 4% and rows 2% of the content width (≈3.79% / 1.9% of the page). */
.section--notice .row {
  padding: 1.9% 0;
}

.section--cards {
  padding: 20px 0 50px;
  background: var(--surface-alt);
}

.section--content {
  padding: 3.79% 0;
}
.page-qa .section--content > .row {
  padding-bottom: 1.9%;
}
.page-technical-documentation .section--content > .row {
  padding: 1.9% 0;
}

.section--resources {
  padding: 3.79% 0;
  background: var(--surface-resources);
}
.section--resources > .row:first-child {
  padding: 1.9% 0;
}
.section__title {
  color: var(--navy);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* ---------------------------------------------------------------- Resource cards */

.cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.7;
}

.card {
  display: block;
  padding: 54px 20px 60px;
  border-top: 6px solid var(--navy);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 18px -6px rgba(34, 56, 101, 0.12);
  text-align: center;
}
.card__icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 30px;
  animation: card-icon-in 1s ease-in-out both;
}
.card__title {
  display: block;
  padding-bottom: 10px;
  color: var(--navy);
  font-family: var(--font-alt);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.card__text {
  display: block;
  color: var(--text-card);
  font-family: var(--font-alt);
  font-size: 16px;
  font-weight: 500;
  line-height: 23.8px;
}
.card:hover .card__title,
.card:focus-visible .card__title {
  text-decoration: underline;
}

/* Divi "slide from top" entrance animation of the card icons. */
@keyframes card-icon-in {
  from {
    opacity: 0;
    transform: translateY(-200%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card__icon {
    animation: none;
  }
}

/* ---------------------------------------------------------------- Q&A */

.qa {
  display: grid;
  grid-template-columns: 225fr 795fr;
  column-gap: 59.4px;
  align-items: start;
}
.qa > * {
  min-width: 0; /* let long words wrap instead of widening the grid column */
}
.qa__categories-title {
  color: #333;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}
.qa__categories ul {
  padding: 0;
  list-style: none;
  line-height: 14px;
}
.qa__categories a {
  display: inline-block;
  padding-bottom: 8px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
}
.qa__menu-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  cursor: pointer;
}

.accordion {
  margin-bottom: 29.69px;
  padding: 20px;
  border-top: 3px solid #000;
  background: var(--accordion-bg);
  transition: box-shadow 300ms ease;
}
.accordion:last-child {
  margin-bottom: 0;
}
.accordion:hover {
  box-shadow: 0 25px 45px -30px rgba(0, 0, 0, 0.15);
}
.accordion--plain {
  border-top: 0;
}
.accordion--plain:hover {
  box-shadow: none;
}

.accordion__title {
  position: relative;
  display: block;
  padding: 0 50px 0 0;
  color: #2a2a2a;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.accordion__title::-webkit-details-marker {
  display: none;
}
.accordion[open] > .accordion__title {
  color: #333;
}
.accordion--plain > .accordion__title {
  font-size: 20px;
}
/* Toggle icon: filled circle with plus (closed) / minus (open), replacing Divi's ETmodules glyphs. */
.accordion__title::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: currentColor;
  color: var(--navy);
  -webkit-mask: var(--icon-plus) center / contain no-repeat;
  mask: var(--icon-plus) center / contain no-repeat;
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.9 7.1h3.4v1.8H8.9v3.4H7.1V8.9H3.7V7.1h3.4V3.7h1.8z'/%3E%3C/svg%3E");
}
.accordion[open] > .accordion__title::after {
  color: #ccc;
  -webkit-mask-image: var(--icon-minus);
  mask-image: var(--icon-minus);
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm4.3 7.1v1.8H3.7V7.1z'/%3E%3C/svg%3E");
}
.accordion--plain > .accordion__title::after {
  color: #ccc;
}

.accordion__content {
  padding-top: 20px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}
.accordion__content ul,
.accordion__content ol {
  padding-left: 16px;
  line-height: 26px;
}
.accordion__content strong {
  color: inherit;
}

/* ---------------------------------------------------------------- Tables */

.doc-table,
.legal table {
  width: 100%;
  margin: 0 0 15px;
  border: 1px solid var(--table-border);
  border-collapse: collapse;
  text-align: left;
}
.doc-table th,
.doc-table td,
.legal th,
.legal td {
  padding: 6px 24px;
  border: 1px solid var(--table-border);
  vertical-align: top;
}
.doc-table th {
  padding: 9px 24px;
  color: #555;
  font-weight: 700;
}
.doc-table th:nth-child(1) {
  width: 70%;
}
.doc-table th:nth-child(2) {
  width: 10%;
}
.doc-table th:nth-child(3) {
  width: 20%;
}

/* ---------------------------------------------------------------- Legal pages */

.legal {
  color: var(--text-legal);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}
.legal p,
.legal li,
.legal td {
  color: var(--text-legal);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}
.legal p {
  padding-bottom: 18px;
}
.legal p:last-child,
.legal td p {
  padding-bottom: 0;
}
.legal ul,
.legal ol {
  padding: 0 0 18px 18px;
  color: var(--text-legal);
  font-size: 18px;
  line-height: 26px;
}
.legal li {
  line-height: 26px;
}
.legal h3 {
  color: var(--heading-muted);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.legal h4 {
  color: var(--heading-muted);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.legal--privacy-policy {
  font-family: var(--font-heading);
}
/* These two pages use Nunito Sans on desktop only; Divi falls back to Open Sans on tablet/phone. */
@media (min-width: 981px) {
  .legal--cookie-policy p,
  .legal--cookie-policy li,
  .legal--cookie-policy td,
  .legal--cookie-policy ul,
  .legal--cookies-notice,
  .legal--cookies-notice p,
  .legal--cookies-notice li {
    font-family: var(--font-alt);
  }
}
.legal--cookies-notice,
.legal--cookies-notice p,
.legal--cookies-notice li {
  font-weight: 500;
}
.legal--cookies-notice h3 {
  font-size: 20px;
}
.legal--cookies-notice em {
  font-weight: 700;
}
.legal--cyber-security-notice p {
  padding-bottom: 16px;
  color: var(--text-card);
  font-family: var(--font-heading);
  font-size: 16px;
}

.link-button {
  margin: 5px 0 0 5px;
  padding: 9px 12px;
  border: 0;
  background: #dedfe0;
  color: #333;
  font-family: var(--font-alt);
  font-size: 13px;
  line-height: 13px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- Footer */

.site-footer {
  padding: 45px 0 30px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-heading);
}
.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 59.4px;
}
.site-footer__logo {
  display: block;
  width: 180px;
  margin-bottom: 30px;
}
.site-footer__logo img {
  display: block;
}
.site-footer__heading {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.site-footer ul {
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
}
.site-footer a {
  color: #fff;
  text-decoration: underline;
}
.site-footer__column:first-child ul {
  line-height: 14px;
}

.bottom-bar {
  height: 20px;
  background: var(--bottom-bar);
}

/* ---------------------------------------------------------------- 404 */

.not-found__row {
  position: relative;
  padding: 58px 0 0;
  min-height: 205px;
}
.not-found__row::after {
  /* Divi's empty right sidebar divider */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 79.25%;
  width: 1px;
  background: #e2e2e2;
}
.not-found__content {
  width: 79.25%;
  padding-right: 5.5%;
}
.not-found h1 {
  color: #333;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}

/* ---------------------------------------------------------------- Cookie consent */

.consent-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 100000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px 30px;
  background: #fff;
  box-shadow: 0 -1px 10px 0 rgba(172, 171, 171, 0.3);
  color: #333;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
}
.consent-bar[hidden] {
  display: none;
}
.consent-bar__text {
  flex: 1 1 400px;
}
.consent-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consent-button {
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: #dedfe0;
  color: #333;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.consent-button--accept {
  background: var(--navy);
  color: #fff;
}

.consent-dialog {
  width: min(845px, calc(100% - 32px));
  max-height: calc(100% - 64px);
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #000;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}
.consent-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.consent-dialog__form {
  padding: 30px;
}
.consent-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
}
.consent-dialog__title {
  padding-bottom: 12px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
}
.consent-dialog__overview p {
  padding-bottom: 12px;
}
.consent-dialog a {
  color: var(--navy);
  text-decoration: underline;
}
.consent-category {
  position: relative;
  margin-bottom: 6px;
  border-radius: 4px;
  background: #f2f2f2;
}
.consent-category summary {
  padding: 10px 140px 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.consent-category__control {
  position: absolute;
  top: 10px;
  right: 14px;
  line-height: 20px;
}
.consent-category__always {
  color: #008000;
  font-size: 12px;
  font-weight: 400;
}
.consent-category__body {
  padding: 0 14px 14px;
  background: #fff;
}
.consent-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 12px;
}
.consent-table th,
.consent-table td {
  padding: 6px;
  border: 1px solid #e5e5e5;
  text-align: left;
  vertical-align: top;
}
.consent-switch input {
  width: 36px;
  height: 20px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}
.consent-dialog__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}

/* ---------------------------------------------------------------- Tablet (Divi <= 980px) */

@media (max-width: 980px) {
  :root {
    --header-height: 80px;
  }
  body {
    padding-top: 0;
  }
  .hero--banner .row,
  .hero--legal .row {
    padding-top: 40px;
  }
  .site-header {
    position: relative;
  }
  .site-header__inner {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: 0;
  }
  .site-header__logo {
    margin-left: 3px;
  }
  .site-header__logo img {
    width: auto;
    max-width: 100%;
    height: 43px;
  }
  .nav-toggle {
    display: block;
  }
  .site-nav {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 9999;
    display: none;
    padding: 15px;
    border-top: 3px solid var(--link);
    background: var(--navy);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  .site-nav.is-open {
    display: block;
  }
  .site-nav ul {
    display: block;
    padding: 0;
  }
  .site-nav li,
  .site-nav__cta {
    margin: 0;
    padding: 0;
  }
  .site-nav a,
  .site-nav__cta a {
    padding: 10px 13.5px;
    border-radius: 0;
    background: none;
    color: #fff;
    line-height: 23px;
  }

  .section--content,
  .section--resources {
    padding: 50px 0;
  }
  .section--notice .row,
  .hero--home .row,
  .page-technical-documentation .section--content > .row,
  .section--resources > .row:first-child {
    padding: 30px 0;
  }
  .page-qa .section--content > .row {
    padding-bottom: 30px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 5.5%;
  }

  .qa {
    grid-template-columns: 1fr;
  }
  .qa__categories {
    margin-bottom: 30px;
  }
  .qa__menu-toggle {
    display: block;
    margin-left: 7px;
  }
  .qa__categories ul {
    display: none;
    padding-top: 10px;
  }
  .qa__categories ul.is-open {
    display: block;
  }
  .accordion {
    margin-bottom: 10px;
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 5.5%;
  }
  /* Divi's text module sits 7px lower in these rows on tablet. */
  .legal--privacy-policy,
  .legal--cookie-policy,
  .legal--cookies-notice {
    padding-top: 7px;
  }

  .hero--banner .row,
  .hero--legal .row {
    width: 90%;
  }
  .hero--banner .hero__subtitle {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------------- Phone (Divi <= 767px) */

@media (max-width: 767px) {
  .site-header__logo img {
    max-width: 150px;
  }
  .hero--banner .hero__subtitle {
    font-size: 16px;
  }
  .legal--privacy-policy,
  .legal--cookie-policy,
  .legal--cookies-notice {
    padding-top: 0;
  }
  .section--notice .row {
    width: 95%;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .site-footer__columns {
    grid-template-columns: 1fr;
  }
  .not-found__row::after {
    display: none;
  }
  .not-found__content {
    width: 100%;
    padding-right: 0;
  }
  .consent-bar {
    padding: 14px 16px;
  }
}