/* The EU VAT invoice guide (/free-tools/shopify-invoice-generator/eu-vat-invoice-requirements/): a masthead with the
   country's key facts, ruled definition lists, a rate table, an e-invoicing timeline and numbered sources. Loaded after
   styles.css and editorial.css and scoped to .vat-page, so it uses their paper, ink and cobalt tokens. */

.vat-page {
  --num: tabular-nums lining-nums;
}

/* ---------- Masthead ---------- */

.vat-mast {
  padding-block: var(--s-6);
}

.vat-mast .crumbs ol {
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.vat-mast-grid {
  display: grid;
  gap: var(--s-6);
}

.vat-mast h1 {
  max-width: 22ch;
  font-size: var(--fs-h1);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.vat-lede {
  max-width: 42rem;
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: 1.125rem;
  line-height: 1.55;
}

.vat-checked {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.vat-keyfacts {
  display: grid;
  align-content: start;
  border-top: 2px solid var(--ink);
}

.vat-keyfacts > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

.vat-keyfacts dt {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.vat-keyfacts dd {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.vat-aside {
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

@media (min-width: 900px) {
  .vat-mast-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-8);
    align-items: start;
  }
}

/* ---------- Ruled definition lists ---------- */

.vat-fields {
  display: grid;
  border-top: 2px solid var(--ink);
}

.vat-fields > div {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.vat-fields dt {
  color: var(--ink);
  font-weight: 600;
}

.vat-fields dd {
  margin-top: var(--s-1);
  color: var(--ink-2);
  overflow-wrap: break-word;
}

.vat-ref {
  margin-left: 2px;
  color: var(--cobalt);
  font-size: 0.8125rem;
  font-variant-numeric: var(--num);
  text-decoration: none;
  white-space: nowrap;
}

.vat-ref:hover,
.vat-ref:focus-visible {
  text-decoration: underline;
}

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

.vat-table-wrap {
  border-top: 2px solid var(--ink);
}

.vat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.vat-table th,
.vat-table td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.vat-table thead th {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.vat-table tbody th {
  width: 34%;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: var(--num);
}

.vat-table td {
  color: var(--ink-2);
}

.vat-index-table td {
  font-size: 0.9375rem;
  vertical-align: top;
}

.vat-index-table tbody th {
  vertical-align: top;
}

/* ---------- E-invoicing timeline ---------- */

.vat-timeline {
  display: grid;
  border-top: 2px solid var(--ink);
}

.vat-timeline li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.vat-when {
  color: var(--cobalt);
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
}

.vat-timeline h3 {
  font-size: var(--fs-base);
  font-family: var(--font-body);
  font-weight: 600;
}

.vat-timeline p {
  margin-top: var(--s-1);
  color: var(--ink-2);
}

.vat-status {
  display: inline-block;
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.vat-status-in-force {
  border-color: color-mix(in srgb, var(--cobalt) 40%, var(--paper));
  color: var(--cobalt-deep);
}

@media (min-width: 720px) {
  .vat-timeline li {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--s-4);
  }
}

/* ---------- Notes, hand-off, sources, country list ---------- */

.vat-notes {
  display: grid;
  border-top: 2px solid var(--ink);
}

.vat-notes li {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.vat-make {
  display: grid;
  gap: var(--s-5);
}

.vat-make h2 {
  max-width: 24ch;
  font-size: var(--fs-h2);
}

.vat-make p {
  max-width: 42rem;
  margin-top: var(--s-4);
  color: var(--ink-2);
}

.vat-make-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-content: start;
}

@media (min-width: 900px) {
  .vat-make {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--s-8);
    align-items: end;
  }
}

.vat-sources {
  display: grid;
  gap: var(--s-2);
  padding-left: var(--s-5);
  list-style: decimal;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.vat-sources li:target {
  background: var(--tint-2);
}

.vat-sources a {
  display: inline-block;
  padding-block: 4px;
}

.vat-disclaimer {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.vat-country-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-5);
  border-top: 2px solid var(--ink);
}

.vat-country-list li {
  border-bottom: 1px solid var(--line);
}

.vat-country-list a,
.vat-country-list span {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.vat-country-list span {
  color: var(--ink-3);
}

@media (min-width: 720px) {
  .vat-country-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .vat-country-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}