/**
 * @servicensw/base
 *
 * Style guide: base
 */

/**
 * How to use
 *
 * #### Installation
 *
 * ```
 * npm install @servicensw/base --save-dev
 * ```
 *
 * #### CSS
 *
 * * PostCSS workflow: `@import '@servicensw/base';`
 * * Sass/Eyeglass: `@import 'servicensw-base';`
 * * Native CSS: `@import url('dist/base.css');`
 * * Link tag: `<link href="dist/base.css" rel="stylesheet" type="text/css">`
 *
 * #### Vanilla JS
 *
 * * ES6 import: `import '@servicensw/base';`
 * * Script tag: `<script src="dist/snsw.js" type="text/javascript"></script>`
 *
 * `snsw.js` includes core vanilla JS functionality and is required by all vanilla JS packages.
 *
 * Weight: 200
 *
 * Style guide: base.usage
 */

@import "@servicensw/constants";
@import "@servicensw/constants/custom-media.css";
@import "normalize.css";

html {
  font-size: 100%; /* 16px in most browsers */
  font-family: var(--font-family);
  line-height: 1.5em;
  color: var(--text-black);
  scroll-behavior: smooth;

  @media print {
    font-size: 10pt;
    padding: 0;
  }

  &.translated-rtl {
    direction: rtl;
  }
}

* {
  box-sizing: border-box;
}

body {
  line-height: var(--line-height);
}

:is(:target, [id], .scroll-target) {
  scroll-margin-top: 1.25rem;
}

img {
  max-inline-size: 100%;
  vertical-align: bottom;
  block-size: auto;
}

/**
 * Paragraph
 *
 * Markup: paragraph.twig
 *
 * Weight: 1
 *
 * Style guide: base.paragraph
 */

p {
  margin-block: var(--spacing-m);
  max-inline-size: var(--line-length);
}

/* stylelint-disable-next-line selector-class-pattern */
.p--full-width {
  max-inline-size: 100%;
}

/**
 * Heading levels
 *
 * Markup: heading-levels.twig
 *
 * Weight: 2
 *
 * Style guide: base.heading-levels
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  line-height: var(--line-height-h);
  max-inline-size: var(--line-length);
  margin-block: var(--spacing-m);
  margin-inline: 0;
}

h1 {
  font-size: var(--font-size-xxxl);
  margin-block-start: var(--spacing-xl);
  margin-block-end: var(--spacing-xxl);
}

h2 {
  font-size: var(--font-size-xxl);
  margin-block-start: var(--spacing-xxxl);
}

h3 {
  font-size: var(--font-size-xl);
  margin-block-start: var(--spacing-l);
}

h4 {
  font-size: var(--font-size-l);
}

h5,
h6 {
  font-size: var(--font-size-m);
  line-height: var(--line-height);
}

/**
 * Bold/Italic
 *
 * Markup: bold-italic.twig
 *
 * Weight: 3
 *
 * Style guide: base.bold-italic
 */

b,
strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

/**
 * Link
 *
 * Markup: link.twig
 *
 * Weight: 4
 *
 * Style guide: base.link
 */

a {
  color: var(--link-blue);
  text-decoration-thickness: max(0.08em, 1px);
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
  overflow-wrap: break-word;
}

/* Default focus styles for all elements. */
:focus {
  outline: var(--focus-border);
  outline-offset: var(--focus-offset);
}

/* Disable default focus styles and use focus-visible instead */
:focus:where(:not(:focus-visible)) {
  outline: none;
}

/* :focus-visible is supported in all browsers */
:focus-visible {
  outline: var(--focus-border);
  outline-offset: var(--focus-offset);
}

/**
 * Unordered list
 *
 * Markup: unordered-list.twig
 *
 * Weight: 5
 *
 * Style guide: base.list-unordered
 */

ol,
ul {
  margin-block: var(--spacing-m);
  padding: 0;
  max-inline-size: var(--line-length);

  /* Nested lists have reduced spacing */
  & ol,
  & ul {
    margin-block-start: 0.75rem;
    margin-block-end: 0;
  }
}

li {
  margin-block-end: 0.75rem;
}

ul li {
  margin-inline-start: 36px;
}

/**
 * Ordered list
 *
 * Markup: ordered-list.twig
 *
 * Weight: 6
 *
 * Style guide: base.list-ordered
 */

ol {
  padding-inline-start: 30px;

  @media print {
    padding: 0;
  }

  & > li {
    padding-inline-start: 6px;
    background: none;

    @media print {
      padding: 0;
    }

    &:has(> h2) {
      &::marker,
      &::before {
        font-size: var(--font-size-xxl);
        font-weight: bold;
      }
    }

    &:has(> h3) {
      &::marker,
      &::before {
        font-size: var(--font-size-xl);
        font-weight: bold;
      }
    }
  }
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

/**
 * Counters list
 *
 * Markup: counters-list.twig
 *
 * Style guide: base.list-ordered.counters
 */

.ol--counters {
  list-style-type: none;
  counter-reset: item;
  padding: 0;

  & ol {
    list-style-type: none;
    counter-reset: item;
    padding: 0;
  }

  & li {
    display: table;
    counter-increment: item;

    &:last-child {
      margin-block-end: 0;
    }

    &::before {
      content: counters(item, ".") ".";
      display: table-cell;
      padding-inline: 6px;

      /* Match ::marker */
      text-align: end;
      text-transform: none;
      unicode-bidi: isolate;
      font-variant-numeric: tabular-nums;
      white-space: pre;
    }

    & ol li::before {
      content: counters(item, ".");
    }
  }

  & ol ol ol {
    & li::before {
      content: counter(item, lower-alpha) ".";
    }

    & ol li::before {
      content: counter(item, lower-roman) ".";
    }
  }
}

/**
 * Definition list
 *
 * .dl--important - Bold terms
 *
 * Markup: definition-list.twig
 *
 * Weight: 7
 *
 * Style guide: base.list-definition
 */

dl {
  margin-block: var(--spacing-m);
  padding: 0;
  max-inline-size: var(--line-length);

  & > div {
    margin-block-start: var(--spacing-m);

    @media (--x-small-up) {
      display: flex;
      flex-wrap: wrap;
    }
  }

  & dt {
    margin: 0;

    @media (--x-small-up) {
      inline-size: 200px;
      padding-inline-end: 20px;
    }
  }

  & dd {
    margin: 0;

    & :first-child {
      margin-block-start: 0;
    }

    & :last-child {
      margin-block-end: 0;
    }

    overflow-wrap: break-word;
    inline-size: 100%;

    @media (--small-up) {
      max-inline-size: 560px;
    }
  }
}

.dl--important {
  max-inline-size: none;

  & dt {
    font-weight: 500;

    @media (--x-small-up) {
      inline-size: 300px;
    }
  }
}

/**
 * Table
 *
 * .table--borders - Bordered table
 * .table--plain - Plain table
 * .table--responsive - Responsive table
 * .table--line-length - Table constrained to line length
 * .table--striped - Table with striped rows
 *
 * Markup: table.twig
 *
 * Weight: 8
 *
 * Style guide: base.table
 */

table {
  inline-size: auto;
  min-inline-size: 100%;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  margin-block: var(--spacing-m);
  color: var(--table-color);

  & th,
  & td {
    padding-block: var(--table-padding-block);
    padding-inline: var(--table-padding-inline);
    vertical-align: top;
    text-align: start;
  }

  & th {
    font-weight: 700;
    border-block-end: 2px solid var(--border-grey);
  }

  &:not(.table--plain) th,
  /** Striped and plain should shade headers */
  &.table--striped th {
    background-color: var(--table-header-background);
  }
}

.table--line-length {
  max-inline-size: 100%;
  inline-size: var(--line-length);
  min-inline-size: auto;
  table-layout: auto;

  & td {
    overflow-wrap: break-word;
  }

  @media (--medium-up) {
    table-layout: fixed;

    & td {
      overflow-wrap: normal;
    }
  }
}

.table--striped {
  & tr:nth-child(2n + 1) td {
    background-color: var(--table-background);
  }

  & tr:nth-child(2n) td {
    background-color: var(--table-background-alternating);
  }
}

.table--borders {
  & td {
    border-block-end: 2px solid var(--border-grey);
  }
}

/**
 * Table borders should apply on mobile/responsive breakpoints in all cases except .table--plain,
 * even if .table--borders isn't selected
 **/
table:not(.table--plain) {
  @media (--small-down) {
    & td {
      border-block-end: 2px solid var(--border-grey);
    }
  }
}

.table--plain {
  & th,
  & td {
    border: 0;
  }
}

.table--plain:where(:not(.table--striped)) {
  & th,
  & td {
    padding-block-start: 0;
    padding-block-end: 0.5rem;
    padding-inline: 0.5rem;

    &:first-child {
      padding-inline-start: 0;
    }

    &:last-child {
      padding-inline-end: 0;
    }
  }
}

.table--nowrap {
  white-space: nowrap;
}

/**
 * Responsive table
 */

.table__wrapper {
  overflow-x: auto;
  inline-size: 100%;

  &::-webkit-scrollbar {
    appearance: none;
    inline-size: 14px;
    block-size: 14px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid var(--white);
    background-color: var(--border-grey);
  }
}

/**
 * Horizontal rule
 *
 * Markup: horizontal-rule.twig
 *
 * Weight: 10
 *
 * Style guide: base.horizontal-rule
 */

hr {
  display: block;
  background: 0;
  block-size: 0;
  border: 0;
  margin-block: var(--spacing-xxxl);
  border-block-start: 2px solid var(--border-grey);
}

/**
 * Blockquote
 *
 * Markup: blockquote.twig
 *
 * Weight: 11
 *
 * Style guide: base.blockquote
 */

blockquote {
  border-inline-start: 8px solid var(--border-grey-dark);
  padding-inline-start: 1.5rem;
  margin-block: var(--spacing-m);
  margin-inline: 0;
  max-inline-size: var(--line-length);

  & :first-child {
    /* stylelint-disable-line no-descending-specificity */
    margin-block-start: 0;
  }

  & :last-child {
    /* stylelint-disable-line no-descending-specificity */
    margin-block-end: 0;
  }
}

/**
 * Pager
 *
 * Markup: pager.twig
 *
 * Weight: 12
 *
 * Style guide: base.pager
 */

.pager {
  margin-block: var(--spacing-m);
  text-align: center;
}

/**
 * Reset
 */

.reset--button {
  border: 0;
  background: 0;
  padding: 0;
  cursor: pointer;
}

.reset--list {
  margin: 0;
  padding: 0;
  list-style: none;

  & li {
    padding: 0;
    margin: 0;
    background: none;
  }
}

/**
 * Inline list
 *
 * Markup: inline-list.twig
 *
 * Weight: 13
 *
 * Style guide: base.inline-list
 */

.inline-list {
  max-inline-size: none;

  @media print {
    margin-inline-start: 0;
  }

  & li {
    background: none;
    padding: 0;

    @media (--medium-up) {
      display: inline-block;
      margin-inline-end: 60px;
    }

    @media print {
      display: block;
      margin-inline-end: 0;
    }
  }

  & a {
    font-weight: 500;

    @media print {
      font-weight: normal;
    }
  }
}

/**
 * Error text
 */

.error {
  color: var(--error-red);
}

/**
 * Responsive video
 *
 * Markup: video.twig
 *
 * Weight: 14
 *
 * Style guide: base.video
 */

.responsive-video {
  margin-block: var(--spacing-m);
  max-inline-size: 582px;
  position: relative;

  & iframe {
    border: 1px solid #eee;
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
  }

  &::after {
    content: "";
    display: block;
    padding-block-end: 56.25%;
  }
}

.transcript {
  display: none;
  margin-block-end: var(--spacing-m);

  & :first-child {
    margin-block-start: 0;
  }

  & :last-child {
    margin-block-end: 0;
  }
}

.transcript__wrapper {
  margin-block-start: -0.5rem;
  margin-block-end: var(--spacing-m);
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  & [aria-hidden="false"] {
    order: 1;
    display: block;
  }

  & [aria-expanded="true"] {
    order: 2;
  }
}

.transcript__toggle {
  color: var(--link-blue);
  text-decoration: underline;
}

/**
 * Skip to content link
 */

.skip-link {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  block-size: 1px;
  inline-size: 1px;
  word-wrap: normal;

  &:active,
  &:focus {
    inset-block-start: 0;
    inset-inline-start: 0;
    background: #fff;
    clip: auto;
    overflow: visible;
    block-size: auto;
    inline-size: auto;
    z-index: 1000;
  }

  &:focus-visible {
    outline-offset: 0;
  }
}

/**
 * Hidden CSS
 * From: hidden.module.css
 */

.hidden {
  display: none;
}

.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  block-size: 1px;
  inline-size: 1px;
  word-wrap: normal;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  block-size: auto;
  inline-size: auto;
}

.invisible {
  visibility: hidden;
}

/**
 * Clearfix
 * From: clearfix.module.css
 */

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}