@import './brand.css';

/* SHL's own nav needs a second row between Carbon's md breakpoint and
   1340px, where its links stop fitting beside the logo. Site-specific,
   so it's declared here rather than in Carbon's breakpoints.css; it
   resolves at build like the shared names (scripts/custom-media.js). */

@layer theme {
  :where(:root) {
    /* NHS */
    --c6-color-nhs-blue: #005eb8;
    --c6-color-nhs-blue-dark: #003087;
    --c6-color-nhs-blue-bright: #0072ce;
    --c6-color-nhs-blue-light: #41b6e6;

    --c6-header-min-height: 7.5rem;

    /* The university landing page's hero title, a navy gradient; a
       university co-brand sets its own (cobrands/). */
    --c6-university-title-gradient: linear-gradient(
      120deg,
      oklch(0.417 0.087 234),
      oklch(0.2969 0.066 240)
    );

    /* Skyline patterns, for Carbon's bg-pattern (named below). */
    --c6-bg-pattern-shl-eye: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' aria-hidden='true' focusable='false' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='SHL.UK skyline pattern'%3e%3ccircle cx='12.002' cy='8.79' r='.779'/%3e%3cpath d='M3.212.779c.43,0,.779-.349.779-.779h-1.558c0,.43.349.779.779.779Z'/%3e%3cpath d='M20.781.779c.43,0,.779-.349.779-.779h-1.558c0,.43.349.779.779.779Z'/%3e%3ccircle cx='7.599' cy='7.61' r='.779'/%3e%3ccircle cx='4.386' cy='4.393' r='.779'/%3e%3ccircle cx='19.607' cy='4.393' r='.779'/%3e%3ccircle cx='16.394' cy='7.611' r='.779'/%3e%3ccircle cx='12.002' cy='15.221' r='.779'/%3e%3cpath d='M3.212,23.221c-.43,0-.779.349-.779.779h1.558c0-.43-.349-.779-.779-.779Z'/%3e%3cpath d='M20.781,23.221c-.43,0-.779.349-.779.779h1.558c0-.43-.349-.779-.779-.779Z'/%3e%3ccircle cx='4.392' cy='19.608' r='.779'/%3e%3ccircle cx='7.609' cy='16.395' r='.779'/%3e%3ccircle cx='16.384' cy='16.395' r='.779'/%3e%3ccircle cx='19.602' cy='19.608' r='.779'/%3e%3cpath d='M23.221,3.219c0,.43.349.779.779.779v-1.558c-.43,0-.779.349-.779.779Z'/%3e%3cpath d='M23.221,20.788c0,.43.349.779.779.779v-1.558c-.43,0-.779.349-.779.779Z'/%3e%3ccircle cx='15.21' cy='11.998' r='.779'/%3e%3cpath d='M.779,3.223c0-.43-.349-.779-.779-.779v1.558c.43,0,.779-.349.779-.779Z'/%3e%3cpath d='M.779,20.792c0-.43-.349-.779-.779-.779v1.558c.43,0,.779-.349.779-.779Z'/%3e%3ccircle cx='8.779' cy='12.002' r='.779'/%3e%3c/svg%3e");
    --c6-bg-pattern-shl-shard: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 20.005 80' aria-hidden='true' focusable='false' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Sexual Health London skyline'%3e%3cpath d='M2.219,1.089h17.241c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H2.219c-.3,0-.544.244-.544.545s.244.544.544.544Z'/%3e%3cpath d='M2.219,11.069h2.244c.301,0,.545-.244.545-.545s-.244-.544-.545-.544h-2.244c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,14.404h3.91c.301,0,.545-.244.545-.545s-.244-.544-.545-.544h-3.91c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,17.74h5.577c.301,0,.545-.244.545-.545s-.244-.544-.545-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,21.075h7.243c.301,0,.544-.243.544-.545,0-.3-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544,0,.302.244.545.545.545Z'/%3e%3cpath d='M2.219,24.411h8.909c.301,0,.545-.244.545-.545s-.243-.544-.545-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,27.746h10.575c.301,0,.545-.244.545-.545s-.244-.544-.545-.544H2.219c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,31.082h12.242c.301,0,.544-.244.544-.545s-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,34.418h13.908c.301,0,.544-.244.544-.545s-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,37.753h15.575c.3,0,.544-.244.544-.545s-.244-.544-.544-.544H2.219c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M1.675,40.545c0,.3.244.544.544.544h17.241c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H2.219c-.3,0-.544.244-.544.545Z'/%3e%3cpath d='M17.216,31.082h2.244c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-2.244c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M15.55,27.746h3.91c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-3.91c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M13.883,24.411h5.577c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-5.577c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M12.217,21.075h7.243c.301,0,.545-.243.545-.544s-.244-.545-.545-.545h-7.243c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M10.55,17.74h8.91c.301,0,.545-.243.545-.544s-.244-.545-.545-.545h-8.91c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M8.885,14.404h10.575c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-10.575c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M7.218,11.069h12.242c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H7.218c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M5.552,7.733h13.908c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H5.552c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M3.885,4.398h15.575c.301,0,.545-.243.545-.544s-.244-.545-.545-.545H3.885c-.3,0-.544.244-.544.545s.244.544.544.544Z'/%3e%3cpath d='M2.219,51.069h2.244c.301,0,.545-.244.545-.545s-.244-.544-.545-.544h-2.244c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,54.404h3.91c.301,0,.545-.244.545-.545s-.244-.544-.545-.544h-3.91c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,57.74h5.577c.301,0,.545-.244.545-.545s-.244-.544-.545-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,61.075h7.243c.301,0,.544-.243.544-.545,0-.3-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544,0,.302.244.545.545.545Z'/%3e%3cpath d='M2.219,64.411h8.909c.301,0,.545-.244.545-.545s-.243-.544-.545-.544H2.219c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,67.747h10.575c.301,0,.545-.244.545-.545s-.244-.544-.545-.544H2.219c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,71.082h12.242c.301,0,.544-.244.544-.545s-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,74.417h13.908c.301,0,.544-.244.544-.545s-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,77.753h15.575c.3,0,.544-.244.544-.545s-.244-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M17.216,71.082h2.244c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-2.244c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M15.55,67.746h3.91c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-3.91c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M13.883,64.411h5.577c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-5.577c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M12.217,61.075h7.243c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-7.243c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M10.55,57.74h8.91c.301,0,.545-.243.545-.544s-.244-.545-.545-.545h-8.91c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M8.885,54.404h10.575c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-10.575c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M7.218,51.069h12.242c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H7.218c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M5.552,47.733h13.908c.301,0,.545-.243.545-.544s-.244-.545-.545-.545H5.552c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M3.885,44.397h15.575c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H3.885c-.3,0-.544.244-.544.545s.244.544.544.544Z'/%3e%3c/svg%3e");
    --c6-bg-pattern-shl-gherkin: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 20 20'%3e%3crect x='3.687' y='3.687' width='12.627' height='12.627' transform='translate(-4.142 10.001) rotate(-45.003)' style='fill: none;'/%3e%3cpath d='M8.929,0L0,8.929v2.143l8.929,8.928h2.143l8.928-8.928v-2.143L11.071,0h-2.142ZM10,18.929L1.071,10,10,1.072l8.929,8.929-8.929,8.929Z'/%3e%3c/svg%3e");
    --c6-bg-pattern-shl-battersea: url("data:image/svg+xml;charset=UTF-8,%3csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 45.598 76'%3e%3crect x='26.11' y='24.784' width='2.454' height='19.086' style='fill: none;'/%3e%3cpolygon points='42.091 52.087 41.399 52.087 38.075 52.087 37.383 52.087 37.383 75.565 42.091 75.565 42.091 52.087' style='fill: none;'/%3e%3crect x='30.562' y='.435' width='1.765' height='22.185' style='fill: none;'/%3e%3cpolygon points='24.983 23.913 25.675 23.913 28.999 23.913 29.691 23.913 29.691 .435 24.983 .435 24.983 23.913' style='fill: none;'/%3e%3crect x='13.271' y='53.381' width='1.765' height='22.184' style='fill: none;'/%3e%3crect x='4.633' y='24.784' width='2.453' height='19.086' style='fill: none;'/%3e%3crect x='22.347' y='.435' width='1.765' height='22.185' style='fill: none;'/%3e%3crect x='9.085' y='.435' width='1.765' height='22.185' style='fill: none;'/%3e%3crect x='42.962' y='53.381' width='1.765' height='22.184' style='fill: none;'/%3e%3crect x='17.033' y='32.13' width='2.454' height='19.086' style='fill: none;'/%3e%3crect x='38.51' y='32.13' width='2.454' height='19.086' style='fill: none;'/%3e%3crect x='34.747' y='53.381' width='1.765' height='22.184' style='fill: none;'/%3e%3crect x='24.121' y='55.933' width='9.756' height='19.632' style='fill: none;'/%3e%3cpolygon points='20.615 52.087 19.923 52.087 16.598 52.087 15.906 52.087 15.906 75.565 20.615 75.565 20.615 52.087' style='fill: none;'/%3e%3crect x='21.485' y='53.381' width='1.765' height='22.184' style='fill: none;'/%3e%3crect x='11.721' y='.435' width='9.756' height='19.632' style='fill: none;'/%3e%3cpolygon points='3.506 23.913 4.198 23.913 7.522 23.913 8.215 23.913 8.215 .435 3.506 .435 3.506 23.913' style='fill: none;'/%3e%3crect x='.87' y='.435' width='1.765' height='22.185' style='fill: none;'/%3e%3cpath d='M45.598.435v-.435H0v23.055c0,.241.195.435.435.435h2.2v.858c0,.241.195.435.435.435h.692v19.522c0,.241.195.435.435.435h3.324c.24,0,.435-.195.435-.435v-19.522h.693c.24,0,.435-.195.435-.435v-.858h2.2c.24,0,.435-.195.435-.435v-2.118h9.756v2.118c0,.241.195.435.435.435h2.2v.858c0,.241.195.435.435.435h.692v19.522c0,.241.195.435.435.435h3.325c.24,0,.435-.195.435-.435v-19.522h.692c.24,0,.435-.195.435-.435v-.858h2.2c.24,0,.435-.195.435-.435v-2.118h12.4v-.87h-12.4V.435h12.4ZM2.636,22.62H.87V.435h1.765v22.185ZM7.087,43.87h-2.453v-19.086h2.453v19.086ZM8.215,23.913H3.506V.435h4.709v23.478ZM10.85,22.62h-1.765V.435h1.765v22.185ZM21.477,20.067h-9.756V.435h9.756v19.632ZM24.112,22.62h-1.765V.435h1.765v22.185ZM28.564,43.87h-2.454v-19.086h2.454v19.086ZM29.691,23.913h-4.709V.435h4.709v23.478ZM32.327,22.62h-1.765V.435h1.765v22.185Z'/%3e%3cpath d='M45.162,52.51h-2.2v-.859c0-.241-.195-.435-.435-.435h-.692v-19.522c0-.241-.195-.435-.435-.435h-3.325c-.24,0-.435.195-.435.435v19.522h-.692c-.24,0-.435.195-.435.435v.859h-2.2c-.24,0-.435.195-.435.435v2.117h-9.756v-2.117c0-.241-.195-.435-.435-.435h-2.2v-.859c0-.241-.195-.435-.435-.435h-.692v-19.522c0-.241-.195-.435-.435-.435h-3.325c-.24,0-.435.195-.435.435v19.522h-.692c-.24,0-.435.195-.435.435v.859h-2.2c-.24,0-.435.195-.435.435v2.117H0v.87h12.4v19.632H0v.435h45.598v-23.055c0-.241-.195-.435-.435-.435ZM15.036,75.565h-1.765v-22.184h1.765v22.184ZM17.033,32.13h2.454v19.086h-2.454v-19.086ZM20.615,75.565h-4.709v-23.478h4.709v23.478ZM23.251,75.565h-1.765v-22.184h1.765v22.184ZM33.877,75.565h-9.756v-19.632h9.756v19.632ZM36.512,75.565h-1.765v-22.184h1.765v22.184ZM38.51,32.13h2.454v19.086h-2.454v-19.086ZM42.091,75.565h-4.709v-23.478h4.709v23.478ZM44.727,75.565h-1.765v-22.184h1.765v22.184Z'/%3e%3c/svg%3e");
  }

  /* Pattern names for Carbon's bg-pattern (data-pattern="shl-eye"). */
  [data-pattern='shl-eye'] {
    --c6-pattern: var(--c6-bg-pattern-shl-eye);
  }
  [data-pattern='shl-shard'] {
    --c6-pattern: var(--c6-bg-pattern-shl-shard);
  }
  [data-pattern='shl-gherkin'] {
    --c6-pattern: var(--c6-bg-pattern-shl-gherkin);
  }
  [data-pattern='shl-battersea'] {
    --c6-pattern: var(--c6-bg-pattern-shl-battersea);
  }

  /* Heading colour, declared on every element like core's own colour
     tokens, so a forced light or dark section gets its own: the SHL navy,
     or core's contrast-clamped indigo text step (11) in dark mode. */
  :where(*) {
    --c6-color-text-display: light-dark(
      var(--c6-color-brand-4),
      var(--c6-color-indigo-11)
    );
  }

  /* Service logos: core (base/services.css) colours them in both modes.
     These are only the sizes SHL sets differently. */
  .service--nhs {
    --c6-service-logo-height: 2rem;
  }
  .service--cqc,
  .service--cyber-essentials {
    --c6-service-logo-height: 3rem;
  }

  /* Site-wide */
  :target,
  [id] {
    scroll-margin-block-start: var(--c6-header-min-height);
  }
  .dropdown__panel {
    outline: 0;

    .wrapper:focus-visible {
      outline: 0;
    }
  }

  .prose .notification {
    margin-block: var(--c6-size-fluid-5);
  }

  :where(
    .button,
    button,
    input[type='button'],
    input[type='submit'],
    input[type='reset'],
    input[type='file']
  ),
  :where(input[type='file'])::file-selector-button {
    --c6-button-border-radius: var(--c6-border-radius-button);
    --c6-button-padding-inline: 2ch;
    --c6-shadow-depth: 0 0 var(--c6-color-border);
  }

  /* Headings in SHL's display colour, except where something else sets
     the colour: a notification, text on a solid fill, or anything inside
     a coloured component (a coloured card, say), which keeps that colour.
     A coloured band (a section with data-color) doesn't count: its own
     heading is .t-on-accent, and the white cards in it keep navy
     headings, as on shl.uk. A heading with a text colour utility (.t-*)
     keeps that too, since this layer would otherwise beat utilities, as
     does anything on a solid fill (.t-on-accent, .t-on-dark, .t-on-light), which follows the text
     colour picked for the fill. */
  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4):not(
    .notification__heading,
    [class^='t-'],
    [class*=' t-'],
    .t-on-accent *,
    .t-on-dark *,
    .t-on-light *,
    [data-color]:not(section) *
  ) {
    color: var(--c6-color-text-display);
  }

  .site-head {
    @media (min-width: 992px) {
      --c6-header-min-height: 7.5rem;
    }

    &::after {
      background-color: var(--c6-color-surface-raised);
    }

    :is(.site-head__link, .dropdown__control) {
      border-radius: var(--c6-border-radius-sm);
    }

    .site-head__inner {
      padding-block: var(--c6-size-fluid-narrow);
    }

    /* Which wordmark shows (short or full) is core's job now
       (base/services.css); this only sets the header logo's size. */
    .service--shl {
      --c6-service-logo-height: 3rem;
    }
  }

  @media (min-width: 992px) {
    .site-head .service--shl {
      --c6-service-logo-height: clamp(2rem, 4vw, 4rem);
    }
  }

  .site-content {
    border-color: transparent;
    border-radius: 0;
    overflow-y: visible;
  }

  .site-footer {
    text-align: unset;
    padding: var(--c6-size-fluid-base);
    padding-block-start: var(--c6-size-fluid-7);

    .brand-logo {
      --c6-brand-logo-height: var(--c6-size-3);
    }
    .logo-text-shorthand {
      opacity: 0;
    }

    .site-footer__link {
      border-radius: var(--c6-border-radius-sm);
    }

    /* Small bold column headings, as on shl.uk (and the Preventx theme),
       rather than full h2 size. */
    .site-footer__heading {
      font-size: var(--c6-font-size-sm);
      font-weight: var(--c6-font-weight-bold);
    }

    hr {
      margin-block-start: var(--c6-size-fluid-base);
    }
  }

  /* Article layout */
  .article__toc {
    inset-block-start: 9rem;
  }

  /* Home (data-type="home") */
  [data-type='home'] {
    .hero {
      --c6-masthead-height: auto;

      background-color: var(--c6-color-surface-feature);
      position: relative;
      padding-block-end: var(--c6-size-fluid-8);

      .lede {
        font-size: 1.5rem;
      }

      figcaption {
        margin: 0;
        text-align: start;
        font-style: normal;
      }
    }
  }

  .hero__title,
  .headline__title {
    font-weight: 700;
  }

  .hero__title {
    font-size: var(--c6-font-size-fluid-6);
    max-inline-size: var(--c6-size-header-2);
    word-wrap: normal;
    line-height: 1.4;
  }

  /* SHL Academy hero: a navy band, with the eye pattern down its end
     half, that stops halfway down a wide photo. Rows: the text, then two
     equal 1fr rows that the photo spans, so each takes half its height;
     the band spans the first two. Hero padding moves onto the text row
     so the band reaches the header. */
  .academy-hero {
    display: grid;
    grid-template-rows: auto 1fr 1fr;
    padding-block: 0;

    > * {
      grid-column: 1;
    }
  }

  .academy-hero__band {
    --c6-pattern-fill: color-mix(
      in oklab,
      var(--c6-color-brand-1) 50%,
      transparent
    );

    grid-row: 1 / 3;
  }

  .academy-hero__content {
    grid-row: 1;
    position: relative;
    padding-block: var(--c6-size-fluid-6);

    .hero__content {
      max-inline-size: var(--c6-size-content-3);
    }
  }

  .academy-hero__media {
    grid-row: 2 / 4;
    position: relative;
  }

  /* NHS TRUST card: a clinic's contact details under its trust's logo
     (class="card nhs--trust", the logo in its card__header), as on live.
     Carbon sizes the logo (base/services.css); here the card is the
     page's raised surface in light mode and NHS blue in dark, where the
     trust logo's own colours swap to white on blue. */
  .nhs--trust {
    --c6-card-bg: light-dark(
      var(--c6-color-surface-raised),
      var(--c6-color-nhs-blue)
    );

    /* White text and links on the blue card in dark mode: the address's
       muted text and the usual link blue are made for a dark page, and
       don't read on NHS blue. */
    address {
      color: light-dark(var(--c6-color-text-2), white);
    }

    .link {
      color: light-dark(var(--c6-color-action), white);
    }
  }

  /* LANDING: the landing page (data-type="landing"), for a university or
     a local service, rebuilt from
     shl.uk/university/university-template. Sections are named as on the
     live page (region--services and so on); patterns are Carbon's
     bg-pattern in the markup, coloured here. Every colour comes from SHL's
     brand seeds or a token, so a co-brand recolours the page by setting
     those (cobrands/). */
  [data-type='landing'] {
    /* Hero: the eye pattern in teal (brand-2) across the top end corner,
       behind the photo; the photo at full width (other SHL heroes cap
       theirs at 60%, for illustrations), with a card over its top end
       corner from md; and the title in a navy gradient, its first and
       last lines in a darker brand-1 (t-accent in the markup). */
    .hero {
      --c6-pattern-fill: var(--c6-color-brand-2);
      --c6-pattern-block-size: min(60%, 22.5rem);

      padding-block: calc(var(--c6-size-12) * 1.5) var(--c6-size-30);

      /* Under .hero, to outrank the theme's heading colour rule above. */
      .hero__title {
        background-image: var(--c6-university-title-gradient);
        background-clip: text;
        color: transparent;

        /* A darker step of brand-1 (its accent ramp's text step, as
           Carbon's .t-accent), so the lines read on the pale hero: the
           brand colour itself is too light for text there. */
        .t-accent {
          color: var(--c6-color-accent-11);
        }
      }
    }

    /* As the live page: the lede close under the title, the buttons
       further below it, and the four points clear of the photo. */
    .hero__content {
      --c6-flow-space: var(--c6-size-base);

      padding-block-start: var(--c6-size-3);

      > .cluster {
        margin-block-start: var(--c6-size-13);
      }
    }

    .hero__media {
      position: relative;
      margin-block-start: var(--c6-size-6);
    }

    /* The photo's own shape, not a 4:3 box with it centred inside, so the
       card lines up with the photo's top edge. */
    .hero .feature-img {
      aspect-ratio: auto;

      :is(img, svg) {
        max-inline-size: 100%;
      }
    }

    .hero__card {
      position: absolute;
      inset-block-start: var(--c6-size-1);
      inset-inline-end: var(--c6-size-10);
      inline-size: min(16rem, 45%);

      .card__content {
        --c6-flow-space: var(--c6-size-2);
      }
    }

    .hero__points {
      margin-block-start: var(--c6-size-10);
    }

    /* Services: more room around the section than the bands below it,
       and each card's icon and title centred on a tint, with its line of
       text under the tint. */
    .region--services {
      padding-block: calc(var(--c6-size-12) * 2);

      .card {
        --c6-card-padding: var(--c6-size-2);
      }

      .card__hero {
        display: grid;
        justify-items: center;
        gap: var(--c6-size-2);
        padding: var(--c6-size-4) var(--c6-size-4) var(--c6-size-6);
        border-radius: var(--c6-surface-radius);
        background-color: var(--c6-color-surface-feature);
        text-align: center;
      }

      /* Larger than lg; the general .card__hero svg padding below is for
         illustrations, not icons. */
      .featured-icon {
        inline-size: calc(var(--c6-size-12) * 2);
        font-size: var(--c6-font-size-fluid-3);

        svg {
          inline-size: 1em;
          block-size: 1em;
          padding: 0;
        }
      }
    }

    /* On-campus support: the title a step up from other section titles,
       space between the cards and the button, and the shard's lines in
       navy across its bottom start corner. */
    .region--support {
      --c6-pattern-fill: color-mix(
        in oklab,
        var(--c6-color-brand-4) 60%,
        transparent
      );
      --c6-pattern-size: 2.5rem 10rem;
      --c6-pattern-inline-size: 30%;
      --c6-pattern-block-size: 40%;

      .headline__title {
        font-size: var(--c6-font-size-fluid-5);
      }

      .wrapper > .cluster {
        margin-block-start: var(--c6-size-13);
      }
    }

    /* Tighter cards than Carbon's default padding, as on the live page. */
    :is(.region--support, .region--process) .card {
      --c6-card-padding: var(--c6-size-4);
    }

    .region--process .well {
      padding: var(--c6-size-4);

      ol {
        --c6-flow-space: var(--c6-size-4);
      }
    }

    /* Card titles a step up from Carbon's h3 size here. Set here rather
       than with .h2 on the h3, as Carbon's h3 rule wins over .h2 today. */
    :is(.region--services, .region--process) .card__title {
      font-size: var(--c6-font-size-fluid-3);
    }

    /* The banner: its photo narrower than the card's default hero, whole
       at the top of its column rather than cropped to the card's height,
       with a strip of the eye pattern in brand-1 beside it; and its title
       larger. */
    .region--ad .feature-card {
      --c6-card-hero-width: 35%;

      /* The card is a flex item: without the cropped photo stretching it,
         it would shrink to its content. */
      > .card {
        --c6-card-padding: var(--c6-size-12);

        flex-grow: 1;
      }

      .card__hero {
        align-self: flex-start;

        > img {
          block-size: auto;
        }
      }

      .card__body {
        --c6-pattern-fill: var(--c6-color-brand-1);
        --c6-pattern-inline-size: calc(var(--c6-size-12) * 4);
      }

      .card__title {
        font-size: var(--c6-font-size-fluid-4);
      }
    }
  }

  /* Overrides */
  .svg-inline--fa {
    vertical-align: revert !important;
  }

  .card__hero svg {
    padding: var(--c6-size-7);
  }

  /* Illustrations in the hero are inset further than core's 70%. An image
     that fills the box (.img-cover, such as a clinic's map) isn't one. */
  .hero {
    & .feature-img {
      :is(img, svg):where(:not(.img-cover)) {
        max-inline-size: 60%;
      }
    }
  }
}

@media (min-width: 992px) and (max-width: 1340px) {
  .site-head__inner > .nav-drawer {
    order: 1;
    flex-basis: 100%;
  }
  .site-head__inner > .nav-drawer .site-head__nav {
    justify-content: center;
  }
}

/* With a co-brand's logo beside SHL's (topnav-shl.njk), the header doesn't
   fit on one row at any width, so the nav takes its own row from md. */
@media (min-width: 992px) {
  .site-head__inner:has(> .site-head__brand > .cluster) {
    > .nav-drawer {
      order: 1;
      flex-basis: 100%;
    }

    > .nav-drawer .site-head__nav {
      justify-content: center;
    }
  }
}