/* Preventx, web theme. Hand-authored here like docs.css and
   theme-carbon-docs.css, not built via PostCSS: real Preventx branding
   isn't Carbon's to ship, so this file lives in the sandbox alongside
   brand.css and platform.css. The native
   @import below pulls in the shared brand file at runtime (one extra
   request), since there's no postcss-import step here to flatten it.

   What goes where:
   - brand.css: everything both themes share, the primary seed,
     brand-1 to brand-6, Silka, logo colouring.
   - this file: preventx.com's own page regions and layout, built only
     from those brand seeds and Carbon's own tokens. The one hand-picked
     dark-mode value is the dark page colour (--c6-surface-page-dark;
     it and the other surface colours are in brand.css); everything else that changes between modes is a
     light-dark() choice between brand seeds or Carbon palette steps, and
     text colour comes from a ramp step (--c6-color-text-primary, below),
     which is contrast-clamped for each mode by Carbon itself.

   Unlike the platform theme, this one is genuinely bespoke (real page
   regions, a real homepage), the "web sites can differ far beyond
   colour" case in v3's CLAUDE.md. Everything sits in @layer theme, so
   it wins over Carbon's own layers without needing to outrank them on
   specificity. */
@import './brand.css';

@layer theme {
  :where(:root) {
    /* Homepage masthead: brand blue, or the inset navy (just below the
       page) in dark mode. */
    --c6-color-px-masthead: light-dark(
      var(--c6-color-brand-1),
      var(--c6-color-surface-inset)
    );

    --c6-bg-pattern-preventx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3e%3cpath d='M24.999,15.448l-2.947-2.947,2.948-2.948v-.354s-2.948-2.947-2.948-2.947l1.911-1.911c.446-.447.692-1.033.692-1.651s-.246-1.204-.692-1.651c-.926-.924-2.377-.924-3.303,0l-1.911,1.911-2.947-2.948h-.354s-2.947,2.948-2.947,2.948l-2.948-2.948h-.354s-2.947,2.948-2.947,2.948l-1.911-1.911C3.413.113,1.962.113,1.037,1.037c-.446.447-.692,1.033-.692,1.651s.246,1.204.692,1.651l1.911,1.911-2.948,2.947v.354s2.948,2.947,2.948,2.947l-2.948,2.948v.354s2.948,2.947,2.948,2.947l-1.911,1.911c-.446.447-.692,1.033-.692,1.651s.246,1.204.692,1.651c.463.462,1.058.693,1.651.693s1.188-.231,1.651-.693l1.911-1.911,2.948,2.948h.354s2.947-2.948,2.947-2.948l2.948,2.948h.354s2.947-2.948,2.947-2.948l1.911,1.911c.463.462,1.058.693,1.651.693s1.188-.231,1.651-.693c.446-.447.692-1.033.692-1.651s-.246-1.204-.692-1.651l-1.911-1.911,2.948-2.947v-.354ZM24.823,9.375l-2.948,2.948-2.948-2.948,2.948-2.948,2.948,2.948ZM15.625,18.573l-1.912-1.912c-.4-.399-.62-.923-.62-1.474s.22-1.074.62-1.474c.413-.414.943-.62,1.474-.62s1.061.206,1.474.62l1.912,1.912-2.947,2.947ZM18.75,15.802l2.948,2.948-2.947,2.947-2.948-2.948,2.947-2.947ZM16.839,13.536c-.926-.924-2.377-.924-3.303,0-.446.447-.692,1.033-.692,1.651s.246,1.204.692,1.651l1.912,1.912-2.948,2.948-2.948-2.948,1.912-1.912c.446-.447.692-1.033.692-1.651s-.246-1.204-.692-1.651c-.926-.924-2.377-.924-3.303,0l-1.912,1.912-2.948-2.948,2.948-2.948,1.912,1.912c.463.462,1.058.693,1.651.693s1.188-.231,1.651-.693c.446-.447.692-1.033.692-1.651s-.246-1.204-.692-1.651l-1.912-1.912,2.948-2.948,2.948,2.948-1.912,1.912c-.446.447-.692,1.033-.692,1.651s.246,1.204.692,1.651c.463.462,1.058.693,1.651.693s1.188-.231,1.651-.693l1.912-1.912,2.948,2.948-2.948,2.948-1.912-1.912ZM6.427,15.625l1.912-1.912c.413-.414.943-.62,1.474-.62s1.06.206,1.474.62c.4.399.62.923.62,1.474s-.22,1.074-.62,1.474l-1.912,1.912-2.947-2.947ZM9.198,18.75l-2.948,2.948-2.947-2.947,2.948-2.948,2.947,2.947ZM9.375,6.427l1.912,1.912c.4.399.62.923.62,1.474s-.22,1.074-.62,1.474c-.826.828-2.121.828-2.947,0l-1.912-1.912,2.947-2.947ZM6.25,9.198l-2.948-2.948,2.947-2.947,2.948,2.948-2.947,2.947ZM18.573,9.375l-1.912,1.912c-.826.828-2.121.828-2.947,0-.4-.399-.62-.923-.62-1.474s.22-1.074.62-1.474l1.912-1.912,2.947,2.947ZM15.802,6.25l2.948-2.948,2.947,2.947-2.948,2.948-2.947-2.947ZM20.839,1.214c.413-.414.943-.62,1.474-.62s1.06.206,1.474.62c.4.399.62.923.62,1.474s-.22,1.074-.62,1.474l-1.911,1.911-2.947-2.947,1.911-1.911ZM15.625.177l2.948,2.948-2.948,2.948-2.948-2.948L15.625.177ZM9.375.177l2.948,2.948-2.948,2.948-2.948-2.948L9.375.177ZM1.214,4.161c-.4-.399-.62-.923-.62-1.474s.22-1.074.62-1.474c.413-.414.943-.62,1.474-.62s1.061.206,1.474.62l1.911,1.911-2.947,2.947-1.911-1.911ZM.177,9.375l2.948-2.948,2.948,2.948-2.948,2.948L.177,9.375ZM.177,15.625l2.948-2.948,2.948,2.948-2.948,2.948L.177,15.625ZM4.161,23.786c-.826.828-2.121.828-2.947,0-.4-.399-.62-.923-.62-1.474s.22-1.074.62-1.474l1.911-1.911,2.947,2.947-1.911,1.911ZM9.375,24.823l-2.948-2.948,2.948-2.948,2.948,2.948-2.948,2.948ZM15.625,24.823l-2.948-2.948,2.948-2.948,2.948,2.948-2.948,2.948ZM23.786,20.839c.4.399.62.923.62,1.474s-.22,1.074-.62,1.474c-.826.828-2.121.828-2.947,0l-1.911-1.911,2.947-2.947,1.911,1.911ZM21.875,18.573l-2.948-2.948,2.948-2.948,2.948,2.948-2.948,2.948Z'/%3e%3c/svg%3e");
    --c6-bg-masthead-color-block-hero: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 1100 1075' aria-hidden='true' focusable='false' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='px hero colour block'%3e%3crect width='1100' height='1075' fill='none'/%3e%3cpolygon points='166.768 673.27 51.553 1075 1060.632 1075 1100 939.398 166.768 673.27' fill='%23000'/%3e%3c/svg%3e");
  }

  /* Pattern name for Carbon's bg-pattern (data-pattern="preventx"). */
  [data-pattern='preventx'] {
    --c6-pattern: var(--c6-bg-pattern-preventx);
  }

  /* Brand-blue text. Core declares --c6-color-text-primary on every
     element (:where(*), foundation/colors/index.css), so a :where(:root)
     override only ever reached <html> itself, and hero eyebrows and
     blockquotes fell back to core's neutral-12. Declaring it the same
     way core does fixes that. accent-11 is the ramp's contrast-clamped
     text step, so this is the brand blue (#0026c5) in light mode and a
     lifted blue in dark mode, where the raw seed on a dark surface fails
     contrast; inside a data-color region it follows that colour
     instead, as core's own text-primary does. */
  :where(*) {
    --c6-color-text-primary: var(--c6-color-accent-11);
  }

  :is(.prose) :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4) {
    max-inline-size: var(--c6-size-header-4);
  }

  figcaption {
    font-style: normal;
  }

  blockquote {
    border-inline-start-color: var(--c6-color-primary);
  }

  .headline__title {
    color: var(--c6-color-text-primary);
  }

  /* A white keyline separates the blue NHS lozenge from a dark page;
     on light it needs none. */
  .service--nhs {
    outline: var(--c6-border-size-heavy) var(--c6-border-style-base)
      light-dark(transparent, white);
  }

  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4) {
    font-weight: var(--c6-font-weight-semibold);
    letter-spacing: -1px;
  }

  blockquote {
    color: var(--c6-color-text-1);
  }

  .site-head {
    --c6-header-min-height: 6.25rem;

    /* Logo left, nav centred, actions right: a 1fr auto 1fr grid rather
       than .repel's space-between, which only centres the nav when both
       sides happen to be the same width. Below the md breakpoint the nav and actions
       are hidden (md:hidden-below) and the row keeps .repel's layout. */
    @media (min-width: 992px) {
      .site-head__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;

        & > :last-child {
          justify-self: end;
        }
      }
    }

    /* The header bar only: the mobile drawer is also inside .site-head,
       on a light surface, where white links would vanish. */
    .site-head__inner :is(.button, .site-head__link) {
      color: white;
    }

    /* Hover, pressed and open fills on the navy bar are white tints, as core's
       dark variant uses, rather than the light-surface greys, which put
       white text on near-white. Set on every element in the bar because
       core declares these tokens per element; the dropdown panels that
       open from it sit on a light surface, so they're left out. */
    :is(.site-head__inner, .site-head__inner *):not(
      [data-overlay-panel],
      [data-overlay-panel] *
    ) {
      --c6-color-bg-ui-hover: color-mix(in oklab, #fff 14%, transparent);
      --c6-color-bg-ui-active: color-mix(in oklab, #fff 22%, transparent);
      /* The menu triggers are <button>s, whose hover and pressed states
         read the variant slots instead */
      --c6-color-hover-bg: var(--c6-color-bg-ui-hover);
      --c6-color-active-bg: var(--c6-color-bg-ui-active);
    }

    /* The wordmark (includes/svg/brand-preventx.svg) is a core
       .service-logo, coloured by .service--preventx in base/services.css:
       navy on light, mint on dark. The header always sits on the
       masthead colour, which is that same navy in light mode, so the
       wordmark is pinned to mint here in both modes. */
    .service-logo-text {
      fill: var(--c6-color-brand-2);
    }
  }

  .site-head::after {
    background: var(--c6-color-px-masthead);
  }

  .dropdown__panel {
    outline: 0;

    &.active {
      border-block-start-color: var(--c6-color-brand-2);
    }
  }

  /* Mastheads use the feature surface (set above), whatever variant the
     markup carries; the homepage overrides it below. Through core's
     --c6-hero-bg, so anything matching the hero reads the same value. */
  .masthead {
    --c6-masthead-height: 450px;
    --c6-hero-bg: var(--c6-color-surface-feature);

    @media (max-width: 991px) {
      min-block-size: 25vh;
    }
  }

  .site-content {
    border: none;
  }

  /* Inner pages: anything but a home page (below). */
  body:not([data-type='home']) {
    /* Feeds core's own min-block-size (blocks/hero.css) rather than
       setting block-size, which that larger core minimum outranks. */
    .masthead {
      --c6-masthead-min-height: var(--c6-masthead-height);

      /* Mint title and breadcrumb links on the dark teal panel, as on
         preventx.com; light mode keeps the brand blue. */
      .hero__title {
        color: light-dark(
          var(--c6-color-text-primary),
          var(--c6-color-brand-2)
        );
      }

      .breadcrumbs a {
        color: light-dark(var(--c6-color-action), var(--c6-color-brand-2));
      }
    }

    .hero-mask img {
      block-size: var(--c6-masthead-height);
      inline-size: var(--c6-hero-col);
    }
  }

  /* Home pages (data-type="home"). */
  [data-type='home'] {
    .site-head {
      backdrop-filter: blur(5px);
    }

    main {
      overflow-x: hidden;
    }

    .masthead {
      --c6-hero-bg: var(--c6-color-px-masthead);

      color: #fff;
      min-block-size: 90vh;

      .hero__content {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
      }

      .hero__title {
        font-size: var(--c6-font-size-fluid-6);
        place-self: center;

        /* An inline background is painted one line at a time, so if a
           line's box is taller than the line spacing, the next line's
           background covers the descenders of the line above. How tall
           the box is depends on the font's metrics, which differ by font
           and by OS: Segoe UI (the fallback on Windows, and what a cold
           cache shows with font-display: optional) is about 1.33em, more
           than this title's 1.25 line height. So the colour is a band
           exactly 1lh tall, centred on each line, which is where the
           browser centres the text: neighbouring bands meet without
           overlapping whatever the font. The padding only has to keep
           the box at least 1lh tall so the band isn't cut short. clone
           gives every line its own side padding and its own band. */
        em {
          background: linear-gradient(var(--c6-hero-bg), var(--c6-hero-bg))
            center / 100% 1lh no-repeat;
          padding-block: max(0px, (1lh - 1em) / 2);
          padding-inline: 0.5rem;
          box-decoration-break: clone;
          font-style: normal;
        }
      }

      /* The angled colour block behind the hero photo. The SVG is a
         black shape used as a mask, so the colour is an ordinary
         light-dark() background (mint on light, pink on dark) instead of
         a CSS filter chain tinting a black image, which couldn't follow
         color-scheme on its own and needed a copy per dark-mode rule. */
      .hero__graphic {
        grid-template-rows: 1fr 1fr;

        &::before {
          content: '';
          display: block;
          background-color: light-dark(
            var(--c6-color-brand-2),
            var(--c6-color-brand-4)
          );
          mask-image: var(--c6-bg-masthead-color-block-hero);
          mask-position: right bottom;
          mask-repeat: no-repeat;
          inline-size: 1100px;
          grid-row: 1 / 3;
        }
      }

      .hero-mask {
        grid-row: 1 / 3;

        img {
          mask-image: var(--c6-bg-masthead-mask-hero-main);
        }
      }
    }

    @media (max-width: 991px) {
      .hero.masthead {
        min-block-size: 50vh;

        .hero__content {
          grid-template-columns: 1fr;
          grid-template-rows: 20vh 1fr;
        }

        .hero__title {
          place-self: start;
        }

        .hero__graphic {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
          margin-inline-start: 0;

          &::before {
            display: none;
          }
        }

        .hero-mask img {
          mask-size: 120%;
        }
      }
    }
  }

  /* REGIONS */

  /* Brand-coloured headings below seed the ramp with the brand colour
     and read step 10, the large-text tier, rather than painting the raw
     brand hex. In normal mode that's near enough the brand colour itself
     (purple is unchanged, pink darkens slightly on light, where the raw
     pink only just clears 3:1), but it means More and Less contrast
     reach these headings too: the ramp's lightness cap moves with the
     mode, a raw hex can't. */

  /* Trusted by */
  .region--heading {
    --c6-color-accent: light-dark(
      var(--c6-color-brand-6),
      var(--c6-color-brand-4)
    );

    color: var(--c6-color-accent-10);
    text-align: center;

    h2 {
      font-size: var(--c6-font-size-fluid-5);
      line-height: inherit;

      em {
        font-style: normal;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          block-size: var(--c6-border-size-md);
          inline-size: 50%;
          inset-inline: 0;
          inset-block-end: calc(var(--c6-border-size-thick) * -1);
          margin: 0 auto;
          background-color: var(--c6-color-brand-6);

          @media (prefers-reduced-motion: no-preference) {
            transition: 0.5s;
          }
        }
      }

      &:hover em::after {
        inline-size: 100%;
        block-size: var(--c6-border-size-thick);
        background-color: var(--c6-color-brand-4);
      }
    }
  }

  /* Preventx overview */
  .region--marquee {
    align-items: center;
    background-color: var(--c6-color-surface-feature);
    padding: 0 4rem;
    gap: 6rem;
    border-radius: var(--c6-border-radius-lg);

    @media (max-width: 991px) {
      padding: 4rem;
    }

    .marquee-wrapper-vertical {
      display: flex;
      gap: 1.5rem;
      margin: auto;
      max-block-size: 60vh;

      @media (max-width: 991px) {
        display: none;
      }
    }

    .animate .marquee__content {
      --c6-marquee-duration: 40s;
    }
  }

  .marquee__title {
    color: var(--c6-color-text-primary);
    font-size: var(--c6-font-size-fluid-3);
  }

  /* Sexual health services. Each service card carries its own
     data-color (blue, sky, orange, purple), so its tint, hover and dark
     mode all come from core's card colour rule (blocks/card.css) and the
     shared variant system, not per-card tokens here. */
  .region--features {
    .headline__title {
      font-size: var(--c6-font-size-fluid-5);
    }

    .headline__sub {
      max-inline-size: unset;
    }

    /* Radius via core's own token rather than border-radius, so a
       .card__hero photo's top corners (blocks/card.css) follow it too. */
    .card {
      --c6-card-border-radius: var(--c6-border-radius-lg);

      border: 0;
      box-shadow: none;
      transition: all var(--c6-duration-base) ease-out;
      text-align: center;

      &:hover {
        --c6-card-border-radius: var(--c6-border-radius-xl);
      }
    }

    /* Service-card logos default to widescreen; a photo hero sets its
       own data-ratio. */
    .card__hero:not([data-ratio]) {
      aspect-ratio: var(--c6-ratio-widescreen);
    }

    /* Core's card padding (24px), with no gap above the text: the hero or
       header above already spaces it */
    .card__content {
      padding-block-start: 0;
      margin-block-start: 0;
    }

    .card__footer {
      inline-size: 100%;
      border: none;
    }

    .card__action {
      color: var(--c6-color-text-1);
    }

    :is(
      .button[data-variant~='ghost']:where(
          :not(:active, .active, [disabled], :disabled, .disabled):hover
        )
    ).card__action {
      background-color: rgb(255 255 255 / 0.25);
    }

    /* auto-fit, as preventx.com does: three cards share the row
       instead of leaving an empty fourth track. */
    .auto-grid {
      --c6-grid-placement: auto-fit;

      margin-block-end: var(--c6-size-fluid-7);
    }
  }

  /* End-to-end */
  /* The Preventx pattern over the whole band, fading up from the bottom:
     Carbon's bg-pattern, set from CSS as the section's markup comes from
     the site. */
  .region--icons {
    --c6-pattern: var(--c6-bg-pattern-preventx);
    --c6-pattern-position: fill;
    --c6-pattern-mobile: show;
    --c6-pattern-size: 50px;
    --c6-pattern-fill: radial-gradient(
      ellipse farthest-side at 50% 100%,
      rgb(0 0 0 / 0.1),
      transparent
    );

    position: relative;
    isolation: isolate;
    padding: var(--c6-size-fluid-8) var(--c6-size-fluid-4);
    border-block-end: var(--c6-border-stroke);
    background: radial-gradient(
      farthest-side at 50% 100%,
      color-mix(
        in srgb,
        light-dark(var(--c6-color-brand-1), var(--c6-color-brand-2)) 15%,
        transparent
      ),
      transparent
    );

    .headline__title {
      font-size: var(--c6-font-size-fluid-5);
      background: linear-gradient(
        120deg,
        light-dark(var(--c6-color-brand-1), var(--c6-color-brand-2)),
        light-dark(var(--c6-color-brand-3), var(--c6-color-brand-5))
      );
      background-clip: text;
      color: transparent;

      /* Blinking cursor after the heading, homepage only. */
      [data-type='home'] &::after {
        content: '_';
        font-weight: var(--c6-font-weight-bold);
        color: light-dark(var(--c6-color-brand-2), var(--c6-color-brand-4));

        @media (prefers-reduced-motion: no-preference) {
          animation: blink 1.5s infinite;
        }
      }
    }

    .headline__sub {
      font-size: var(--c6-font-size-lg);
      opacity: 0.8;
    }

    .auto-grid {
      --c6-grid-min-item-size: 10rem;

      z-index: 1;
    }

    figure {
      display: grid;
      justify-items: center;
      gap: 0;
    }

    svg {
      inline-size: 4rem;
      aspect-ratio: var(--c6-ratio-square);

      &,
      * {
        fill: var(--c6-color-text-primary);
      }
    }
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

  /* Quality */
  .region--brands {
    .headline__title {
      --c6-color-accent: var(--c6-color-brand-4);

      font-size: var(--c6-font-size-fluid-4);
      color: var(--c6-color-accent-10);
      text-align: center;
      margin-block-end: var(--c6-region-space);
    }

    /* Four linked logos in a centred row, each with its caption under it */
    figure {
      display: grid;
      gap: 0;
      justify-items: center;
    }
  }

  /* Partner with us. Navy in both modes, so white text works in both,
     with the Preventx pattern faintly over it in white (Carbon's
     bg-pattern, set from CSS). */
  .region--partner {
    --c6-switcher-vertical-alignment: center;
    --c6-pattern: var(--c6-bg-pattern-preventx);
    --c6-pattern-position: fill;
    --c6-pattern-mobile: show;
    --c6-pattern-size: 50px;
    --c6-pattern-fill: rgb(255 255 255 / 0.1);

    align-items: center;
    background-color: light-dark(
      var(--c6-color-brand-3),
      var(--c6-color-surface-inset)
    );
    color: white;
    padding: var(--c6-size-fluid-6);
    gap: 6rem;
    border-radius: var(--c6-border-radius-lg);
    position: relative;
    isolation: isolate;
    border: var(--c6-border-ui);

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

    p {
      font-size: 1.2rem;
    }

    .grid-img {
      overflow: hidden;
    }

    .grid-img img {
      object-fit: cover;
      inline-size: 100%;
      block-size: 100%;
      border-radius: var(--c6-border-radius-lg);
    }
  }

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

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

    .repel {
      --c6-repel-vertical-alignment: center;
    }

    .site-footer__heading {
      font-size: var(--c6-font-size-sm);
      font-weight: var(--c6-font-weight-bold);
    }

    .site-footer__list {
      --c6-flow-space: var(--c6-size-2_5);
    }
  }
}