@import 'cera-typeface.css';
@import 'search.css';
@import 'utils.css';

/* Site-Specific Styles
* These styles are custom to Web Awesome's marketing and site-focused pages.
* They extend the theme-site.css styles.
 */
@layer wa-site {
  :root {
    /* override webawesome's default --wa-brand-orange for marketing pages */
    --wa-brand-orange: var(--wa-color-orange-60);
  }

  /* #region Color Scheme Selector */
  .wa-dark .color-scheme-selector .only-light,
  .color-scheme-selector .only-dark:not(.wa-dark, .wa-dark *) {
    display: none;
  }
  /* #endregion */

  /* #region Page */
  wa-page {
    background-color: var(--wa-color-surface-lowered);
  }
  /* #endregion */

  /* #region Page Banner */
  wa-page > [slot='banner'] {
    /* constrain .banner.content-container to fixed max width in pro */
    --max-inline-size: var(--content-width-l);
  }
  /* #endregion */

  /* #region Page Header */
  wa-page > [slot='header'] {
    /* icon-based logo */
    wa-icon.logo-web-awesome {
      font-size: var(--wa-font-size-xl);
    }

    /* add padding to focused header */
    &.page-header-focused {
      padding-block: var(--wa-space-xs);
    }
  }

  /* constrain .nav-products-full.content-container to fixed max width in pro */
  .page-nav-products {
    --max-inline-size: var(--content-width-l);
  }
  /* #endregion */

  /* #region Page Subheader */
  /* .subheader is rendered by docs/_includes/slot-subheader.njk (from webawesome base; pageSubheader block). */
  wa-page > [slot='subheader'] {
    /* constrain .subheader.content-container to fixed max width in pro */
    --max-inline-size: var(--content-width-l);
  }
  /* #endregion */

  /* #region Page Navigation */
  wa-page[view='desktop']::part(menu) {
    display: none;
  }
  /* #endregion */

  /* #region Page Footer */
  wa-page > [slot='footer'] {
    background-color: var(--page-footer-background-color, var(--wa-color-neutral-90));
    display: block;
    /* resetting padding inline for footer  */
    padding-inline: 0;
    padding-block: var(--wa-space-2xl);

    .wa-dark & {
      --page-footer-background-color: var(--wa-color-neutral-10);
    }

    .content-container {
      container-type: inline-size;
      container-name: footer;
    }

    .footer-about {
      --wa-color-text-link: var(--wa-color-text-normal);
    }

    .footer-made-with strong {
      font-weight: var(--wa-font-weight-normal);
    }

    /* Heart hover: match open-source */
    .footer-made-with wa-icon[name='heart'] {
      --animation-iteration-count: 0;
      color: var(--wa-color-text-normal);
    }

    .footer-made-with wa-icon[name='heart']:hover {
      --animation-iteration-count: infinite;
      color: var(--wa-brand-orange);
    }

    .footer-links-heading {
      color: var(--wa-color-text-quiet);
    }

    /* cookie consent button alongside footer links */
    .footer-links [data-dialog*='cookie-consent-dialog'] {
      /* making button look like a footer link */
      --wa-form-control-padding-inline: 0;
      --wa-form-control-height: auto;
      color: var(--wa-color-text-normal);

      &::part(base) {
        background-color: transparent;
      }

      &::part(base):hover {
        color: color-mix(in oklab, var(--wa-color-text-normal), var(--wa-color-mix-hover));
        text-decoration: underline;
      }
    }

    .list-links {
      --list-spacing: var(--wa-space-2xs);
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--list-spacing);

      li {
        margin-inline-start: 0;
        padding-inline-start: 0;
      }
    }

    .footer-terms-policies .footer-links-heading {
      display: none;
    }

    .the-socials {
      /* nudge those linkies left */
      margin-inline: calc(var(--wa-space-xs) * -1);

      a[target='_blank'] {
        color: var(--wa-color-text-quiet);
        padding-inline: var(--wa-space-xs);

        &:hover {
          color: var(--wa-color-text-normal);
        }
      }
    }

    @container footer (inline-size <= 50ch) {
      .footer-terms-policies {
        flex-direction: column;
        align-items: start;

        .footer-links-heading {
          display: block;
        }

        .footer-links {
          flex-direction: column;
          align-items: start;
          gap: var(--wa-space-s);
        }
      }
    }
  }
  /* #endregion */

  /* #region Mobile Navigation */
  wa-page::part(navigation-toggle) {
    display: none;
  }

  wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
    padding: 0;

    /* making search trigger button look like text input */
    wa-button#search-trigger::part(label) {
      flex-grow: 1;
      text-align: start;
    }
  }

  /* #endregion */

  /* #region Cosmetic Shortcuts */
  .font-brand {
    font-family: cera-round-pro;
  }
  /* #endregion */

  /* #region Branded Text Elements */
  #content {
    :is(
        h1,
        h2,
        h3,
        h4,
        .wa-heading-4xl,
        .wa-heading-3xl,
        .wa-heading-2xl,
        .wa-heading-xl,
        .wa-heading-l,
        wa-button
      ):not(:where(.preview), :where(.preview) *) {
      font-family: cera-round-pro;
    }

    /* Optical tracking on larger headings. */
    :is(h1, h2, .wa-heading-4xl, .wa-heading-3xl, .wa-heading-2xl) {
      letter-spacing: -0.01em;
    }

    wa-dialog.app-dialog::part(title) {
      font-family: cera-round-pro;
    }
  }
  /* #endregion */

  /* #region Utilities */
  [hidden] {
    display: none !important;
  }

  /* #region Hacks */
  /* HACK: hiding copy button that comes with code elements by default */
  .hide-copy-button wa-copy-button {
    display: none;
  }
  /* #endregion */

  /* #region Proto-Patterns */
  /* @property lets --secondary-opacity interpolate; avoid transitioning --secondary-color from
   * transparent → opaque (transparent is rgba(0,0,0,0), so color interpolation flashes black). */
  @property --secondary-opacity {
    syntax: '<number>';
    inherits: true;
    initial-value: 0.4;
  }

  wa-icon.duotone-illustrated {
    --primary-color: var(--wa-color-text-normal);
    --secondary-color: var(--wa-color-brand-80);
    --secondary-opacity: 1;

    .wa-dark & {
      --secondary-color: var(--wa-color-brand-60);
    }
  }

  /* Duotone secondary reveal on hover (fade opacity, not color — see @property note above) */
  .duotone-hover-context wa-icon.duotone-illustrated.duotone-secondary-reveal {
    --secondary-opacity: 0;
    transition: --secondary-opacity var(--wa-transition-slow) ease-in-out;
  }

  .duotone-hover-context:has(:is(a, button, [role='button'], summary):is(:hover, :focus-visible))
    wa-icon.duotone-illustrated.duotone-secondary-reveal,
  .duotone-hover-context:has([data-duotone-hover-trigger]:is(:hover, :focus-visible))
    wa-icon.duotone-illustrated.duotone-secondary-reveal,
  .duotone-hover-context[data-duotone-hover-trigger]:is(:hover, :focus-visible)
    wa-icon.duotone-illustrated.duotone-secondary-reveal {
    --secondary-opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .duotone-hover-context wa-icon.duotone-illustrated.duotone-secondary-reveal {
      transition: none;
      --secondary-opacity: 1;
    }
  }

  .heading-stacked-subtitle {
    color: var(--wa-color-brand-50);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* #region Heading permalink (hover/focus reveal; layout via wa-stack + wa-cluster) */
  .has-permalink .wa-cluster > a.wa-link-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
  }

  .has-permalink:hover .wa-cluster > a.wa-link-plain,
  .has-permalink:focus-within .wa-cluster > a.wa-link-plain {
    opacity: 1;
    pointer-events: auto;
  }
  /* #endregion */

  /* site-themed code block formatting */
  .code-block.theme-site {
    /* Comments - lightest for least importance */
    --code-comment: var(--wa-color-neutral-70);

    /* Operators - light for low importance */
    --code-operator: var(--wa-color-neutral-60);

    /* Element names - brand color for emphasis */
    --code-keyword: var(--wa-color-brand-70);

    /* Attribute values - red accent for warm harmony */
    --code-string: var(--wa-color-red-70);
    --code-literal: var(--wa-color-red-70);

    /* Variables/functions - lighter brand color for more pop */
    --code-value: var(--wa-color-brand-80);

    /* Errors - brand color for emphasis */
    --code-error: var(--wa-color-brand-50);
  }
  /* #endregion */

  /* #region Hacks */
  /* TODO: DRY this out with webawesome's docs.css */
  .outline {
    .outline-heading {
      margin: 0;
    }

    .outline-heading:not(:first-child) {
      color: var(--wa-color-text-quiet);
      margin-block-start: var(--wa-space-xs);
    }

    h2 a {
      --wa-color-text-link: var(--wa-color-text-normal);
    }

    /* visually align icon with child list's border-start */
    h2:has(wa-icon) {
      position: relative;
      inset-inline-start: calc(var(--wa-space-xs) * -1);
    }

    ul {
      border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
      font-size: var(--wa-font-size-s);
      line-height: var(--wa-line-height-condensed);
      padding-inline-start: var(--wa-space-m);
      margin: 0;
    }

    ul ul {
      margin-block-start: var(--wa-space-m);
    }

    ul:empty {
      display: none;
    }

    li {
      list-style: none;
      margin: 0;

      + li {
        margin-block-start: var(--wa-space-m);
      }
    }

    li a {
      color: var(--wa-color-text-normal);
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    .pro-cta {
      margin-block-start: var(--wa-space-xl);
    }
  }
  /* #endregion */

  /* #region Home */
  .page-home {
    wa-page {
      background-color: var(--wa-color-surface-default);
    }

    wa-page > main {
      > section {
        padding-block: var(--content-flow-spacing);
      }

      /* Home pattern sections: vars + wa-mask-fade-below on the section */
      > section.background-wa-pattern,
      > section:has(.background-wa-pattern) {
        --background-pattern-image: url('/assets/images/bg-wa-pattern-light.svg');
        --background-pattern-size: 800px 800px;
        --background-pattern-opacity: 1;

        .wa-dark & {
          --background-pattern-image: url('/assets/images/bg-wa-pattern-dark.svg');
        }
      }
    }

    .content-container {
      container-type: inline-size;
      container-name: page-content;
    }

    @container page-content (inline-size <= 37.5rem) {
      .heading-stacked {
        align-items: flex-start;
      }

      .has-permalink .wa-cluster {
        justify-content: flex-start;
        text-align: start;
      }
    }

    section#hero {
      --background-pattern-position: 18% 22%;
      padding-block: 0;

      .content-container {
        max-inline-size: var(--content-width-s);
        padding-block: var(--content-flow-spacing);
      }

      .hero-tagline {
        text-align: center;
      }

      .hero-actions {
        --min-column-size: 22ch;
      }

      .hero-metadata {
        --min-column-size: 16ch;
      }

      .hero-metadata > a {
        justify-content: center;
      }

      .hero-start-other-ways {
        --min-column-size: 16ch;
        inline-size: 100%;
        padding-inline: var(--wa-space-m);
      }

      .hero-start-other-ways > a {
        justify-content: center;
      }

      @container page-content (inline-size <= 25rem) {
        .hero-start-other-ways {
          max-inline-size: 100%;
          text-align: start;
        }
      }

      @container page-content (inline-size <= 37.5rem) {
        .hero-tagline {
          text-align: start;
        }

        .hero-tagline .hero-title {
          font-size: var(--wa-font-size-3xl);
        }

        .hero-tagline .hero-description {
          font-size: var(--wa-font-size-l);
        }

        .hero-metadata > a,
        .hero-start-other-ways > a {
          justify-content: start;
        }
      }
    }

    #quick-start {
      /* min-width:0 so flex children / long code lines can shrink */
      min-inline-size: 0;
      max-inline-size: 100%;
    }

    #quick-start::part(header) {
      padding: 0;
      min-inline-size: 0;
    }

    .quick-start-code-block {
      border-radius: var(--inner-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      min-inline-size: 0;
      max-inline-size: 100%;
      overflow-x: auto;

      code {
        /* HACK: override stubborn code block padding */
        padding: var(--wa-space-l) !important;
      }
    }

    section#features {
      background-color: var(--wa-color-surface-lowered);

      &.background-dot-grid {
        /* TODO: fix this in utils as the default */
        --background-dot-radius: 1px;
        --background-dot-spacing: 1rem;
        --background-dot-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 85%);
      }

      .content-container {
        max-inline-size: var(--content-width-m);
      }

      .heading-stacked {
        margin-block-end: var(--wa-space-2xl);
      }

      .features-list {
        --min-column-size: 30ch;
      }

      .feature wa-icon {
        font-size: var(--wa-font-size-xl);
      }
    }

    section#components {
      .heading-stacked {
        margin-block-end: var(--wa-space-2xl);
      }

      .content-container > .wa-grid {
        --min-column-size: 50ch;
        align-items: stretch;
        min-block-size: 0;
      }

      #home-components-demo {
        min-block-size: 0;
        min-inline-size: 0;
        align-self: stretch;

        .components-demo-preview,
        .components-demo-code {
          max-block-size: var(--components-demo-tab-panel-max-block-size, 25rem);
          overflow-y: auto;
        }
      }

      .components-benefits {
        --min-column-size: 24ch;
      }

      @container page-content (inline-size <= 37.5rem) {
        .components-benefits {
          font-size: var(--wa-font-size-s);
        }
      }

      .components-benefit wa-icon {
        font-size: var(--wa-font-size-l);
      }

      .components-demo {
        --components-demo-tab-active-bg: var(--wa-color-brand-fill-loud);
        --components-demo-tab-active-text-on-loud: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));

        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto 1fr;
        min-block-size: 0;

        & > .components-demo-view-toggle {
          grid-column: 2;
          grid-row: 1;
          align-self: center;
          justify-self: end;
          position: relative;
          z-index: 2;
          --wa-border-radius-m: var(--wa-border-radius-pill);

          & wa-radio[appearance='button'] {
            --_size: var(--wa-font-size-s);
            font-size: var(--wa-font-size-xs);
            font-weight: var(--wa-font-weight-action);
            --wa-form-control-padding-block: calc(0.5 * var(--_size));
            --wa-form-control-padding-inline: calc(0.875 * var(--_size));
            --wa-form-control-height: round(
              calc(2 * var(--wa-form-control-padding-block) + var(--_size) * var(--wa-form-control-value-line-height)),
              1px
            );
            --wa-form-control-border-color: transparent;

            &:not([aria-checked='true']) {
              --wa-color-surface-default: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
              --wa-form-control-value-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
            }

            &[aria-checked='true'] {
              --wa-color-brand-fill-quiet: var(--components-demo-tab-active-bg);
              --wa-form-control-activated-color: transparent;
              --wa-form-control-value-color: var(--components-demo-tab-active-text-on-loud);
            }
          }
        }

        .components-demo-tabs {
          grid-column: 1 / -1;
          grid-row: 1 / -1;
          --track-width: 0;
          --track-color: transparent;
          --indicator-color: transparent;
          min-block-size: 0;

          & > wa-tab wa-icon {
            font-size: var(--wa-font-size-l);
          }

          & > wa-tab::part(base) {
            padding: var(--wa-space-xs);
          }

          & > wa-tab-panel {
            --padding: var(--wa-space-m) 0 0 0;
          }
        }

        .components-demo-preview {
          flex: 1 1 auto;
          min-block-size: 0;
          overflow: auto;
          box-shadow: none;
          border: none;

          /* Space only between stacked previews (not between preview + code). */
          & + & {
            margin-block-start: var(--wa-space-m);
          }
        }

        .components-demo-code {
          position: relative;
          flex: 1 1 0%;
          min-block-size: 0;
          min-inline-size: 0;
          overflow: hidden;
          font-size: var(--wa-font-size-s);
        }

        .components-demo-code .code-block {
          position: absolute;
          inset: 0;
          box-sizing: border-box;
          margin: 0;
          overflow: auto;
        }
      }

      /* Line chart tab: brand palette for demo datasets */
      wa-line-chart.components-demo-line-chart {
        --border-color-1: var(--wa-color-brand-40);
        --fill-color-1: color-mix(in srgb, var(--wa-color-brand-40) 40%, transparent);
        --border-color-2: var(--wa-color-brand-60);
        --fill-color-2: color-mix(in srgb, var(--wa-color-brand-60) 40%, transparent);
        --border-color-3: var(--wa-color-brand-80);
        --fill-color-3: color-mix(in srgb, var(--wa-color-brand-80) 40%, transparent);
      }
    }

    section#pro {
      &.background-wa-pattern {
        --background-pattern-position: 62% 38%;
        --background-pattern-opacity: 0.75;
        background-color: var(--wa-color-brand-fill-loud);
        color: var(--wa-color-brand-on-loud);
      }

      .pro-content {
        --min-column-size: 30ch;
      }

      .pro-perks wa-icon {
        color: var(--wa-color-brand);
      }
    }

    section#open-source {
      .content-container {
        max-inline-size: var(--content-width-m);
      }

      .open-source-content {
        --min-column-size: 36ch;
      }

      .heading-stacked {
        margin-block-end: var(--wa-space-2xl);
      }

      wa-icon[name='heart'] {
        --animation-iteration-count: 0;
      }

      wa-icon[name='heart']:hover {
        --animation-iteration-count: infinite;
        color: var(--wa-brand-orange);
      }

      wa-card.wa-kickstarter-video {
        --spacing: var(--wa-space-2xs);
        margin-inline: auto;
        inline-size: 100%;

        &::part(footer) {
          text-align: center;
          border-block-start-width: 0;
          font-size: var(--wa-font-size-xs);
          padding: var(--wa-space-xs) var(--wa-space-s) var(--wa-space-s);
        }
      }

      .video-wrapper {
        --video-height: 360;
        --video-width: 640;
        position: relative;
        margin-inline: auto;
        border-radius: var(--wa-border-radius-m);
        padding-block-end: calc(var(--video-height) / var(--video-width) * 100%);
        overflow: hidden;

        iframe {
          position: absolute;
          inset: 0;
          inline-size: 100%;
          block-size: 100%;
          border: none;
        }
      }

      .open-source-actions {
        --min-column-size: 24ch;
      }

      /* wa-split column: fill row height */
      .open-source-action,
      .open-source-actions wa-card::part(body) {
        block-size: 100%;
      }
    }
  }
  /* #endregion */

  /* #region Components */
  .page-components {
    --components-index-suggest-surface: var(--wa-color-neutral-90);
    wa-page > main {
      padding: 0;

      > section {
        padding-block: var(--content-flow-spacing);
      }
    }

    section#hero {
      --background-pattern-image: url('/assets/images/bg-wa-pattern-light.svg');
      --background-pattern-size: 800px 800px;
      --background-pattern-opacity: 1;

      .wa-dark & {
        --background-pattern-image: url('/assets/images/bg-wa-pattern-dark.svg');
      }

      header {
        text-align: center;
      }
    }

    section#components-results {
      padding-block-start: calc(var(--content-flow-spacing) * 0.5);

      .content-container {
        container-type: inline-size;
        container-name: components-index;
      }
    }

    #components-grid {
      /* equal-width columns even when sparse. */
      --min-column-size: 20rem;
      grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column-size), 100%), 1fr));
    }

    @container components-index (inline-size >= 64rem) {
      #components-grid {
        --min-column-size: 16.875rem;
      }
    }

    /* Grid layout across all viewports — keeps the row/column placement explicit
       so wa-combobox's intrinsic width doesn't cause flex-wrap surprises. */
    .components-index-controls {
      display: grid;
      gap: var(--wa-space-m);
      align-items: center;
    }

    /* Wide containers: single row, sort flanked to the right via the 1fr column. */
    @container components-index (inline-size >= 64rem) {
      .components-index-controls {
        grid-template-columns: auto auto auto 1fr;
        gap: var(--wa-space-xl);
      }
      .components-index-controls #components-tier {
        grid-row: 1;
        grid-column: 1;
      }
      .components-index-controls #components-category {
        grid-row: 1;
        grid-column: 2;
      }
      .components-index-controls #components-experimental {
        grid-row: 1;
        grid-column: 3;
      }
      .components-index-controls #components-sort {
        grid-row: 1;
        grid-column: 4;
        justify-self: end;
      }
    }

    /* Medium containers: 2-row grid — category leads at full width; tier,
       experimental, and sort share row 2 with sort flanked right. */
    @container components-index (inline-size < 64rem) and (inline-size >= 40rem) {
      .components-index-controls {
        grid-template-columns: auto auto 1fr;
      }

      .components-index-controls #components-category {
        grid-row: 1;
        grid-column: 1 / -1;
      }
      .components-index-controls #components-tier {
        grid-row: 2;
        grid-column: 1;
      }
      .components-index-controls #components-experimental {
        grid-row: 2;
        grid-column: 2;
      }
      .components-index-controls #components-sort {
        grid-row: 2;
        grid-column: 3;
        justify-self: end;
      }
    }

    /* Narrow containers: 3-row grid — category and experimental span full width;
       tier and sort pair on the row between them. */
    @container components-index (inline-size < 40rem) {
      .components-index-controls {
        grid-template-columns: 1fr 1fr;
      }

      .components-index-controls #components-category {
        grid-row: 1;
        grid-column: 1 / -1;
      }
      .components-index-controls #components-tier {
        grid-row: 2;
        grid-column: 1;
      }
      .components-index-controls #components-sort {
        grid-row: 2;
        grid-column: 2;
      }
      .components-index-controls #components-experimental {
        grid-row: 3;
        grid-column: 1 / -1;
      }
    }

    /* Extra-narrow containers (iPhone SE and similar): a 1fr/1fr split squeezes
       the tier radios below their natural width and they wrap inside the control.
       Drop to a single column so each control sits on its own full-width row,
       with tier leading the stack. */
    @container components-index (inline-size < 28rem) {
      .components-index-controls {
        grid-template-columns: 1fr;
      }

      .components-index-controls #components-tier {
        grid-row: 1;
        grid-column: 1;
      }
      .components-index-controls #components-category {
        grid-row: 2;
        grid-column: 1;
      }
      .components-index-controls #components-sort {
        grid-row: 3;
        grid-column: 1;
      }
      .components-index-controls #components-experimental {
        grid-row: 4;
        grid-column: 1;
      }
    }

    .component-card {
      block-size: 100%;
    }

    .component-card::part(body) {
      flex: 1;
    }

    .component-card::part(footer) {
      border-block-start-color: var(--wa-color-surface-lowered);
    }

    .wrapper-components-suggest {
      display: flex;
      flex-direction: column;
      min-inline-size: 0;
    }

    /* Suggest card: same neutrals as `.page-footer`; opt out of the wa-placeholder dashed border. */
    #components-suggest {
      flex: 1;
      min-block-size: 0;
      block-size: 100%;
      box-shadow: none;

      &::part(body) {
        flex: 1;
      }
    }

    #components-search {
      box-sizing: border-box;
      inline-size: 100%;
      max-inline-size: 45ch;
      margin-inline: auto;
    }
  }
  /* #endregion */
}