@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 {
    /* --wa-brand-orange: #f36944; */
    --wa-brand-orange: var(--wa-color-orange-60);
    --wa-brand-grey: #30323b;
  }

  /* 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 Header */
  wa-page > header {
    background-color: var(--wa-color-surface-default);
    padding-inline: 0;

    .header-content {
      margin-inline: auto;
      max-width: var(--content-width-l);
      padding-inline: var(--content-padding-inline);
    }

    .brand-logo {
      color: var(--wa-color-text-normal);
      line-height: 1;
    }

    .brand-logo svg {
      width: auto;
      height: 1.75rem;
    }

    /* combined docs-based button group styles */
    .docs-button-group::part(base) {
      gap: var(--wa-space-3xs);
    }

    /* make docs button group hover effect match the default plain appearance of the buttons */
    .docs-button-group:hover wa-button::part(base) {
      color: var(--wa-color-neutral-on-quiet);
      background-color: var(--wa-color-neutral-fill-quiet);
    }

    /* manually resetting border radius of data-search */
    .docs-button-group [data-search]::part(base) {
      border-end-end-radius: var(--wa-form-control-border-radius);
      border-start-end-radius: var(--wa-form-control-border-radius);
    }
  }
  /* #endregion */

  /* #region Page Footer */
  wa-page > footer {
    background-color: var(--wa-color-surface-lowered);
    display: block;
    /* resetting padding inline for footer  */
    padding-inline: 0;
    padding-block: var(--wa-space-2xl);

    .logo-webawesome {
      font-size: var(--wa-font-size-l);
    }

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

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

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

    .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;
      }
    }

    .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);
        }
      }
    }
  }
  /* #endregion */

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

  /* smaller viewports-based navigation */
  wa-page > [slot='navigation-header'] {
    .brand-logo svg {
      height: 1.25rem;
    }
  }

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

    & wa-details::part(icon) {
      padding-inline: var(--wa-space-xs); /* aligns details icons with drawer close icon */
    }

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

    .navigation-pro-cta {
      padding: var(--wa-space-m) var(--wa-space-l);
    }
  }

  /* #endregion */

  /* #region Cosmetic Shortcuts */
  .brand-font {
    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 */
  wa-copy-button {
    display: none;
  }

  /* 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);
    }

    wa-details {
      --spacing: 0;

      &::part(header) {
        padding: 0;
        padding-block-start: var(--wa-space-xs);
      }

      &::part(content) {
        padding-block-start: var(--wa-space-m);
      }

      &::part(base) {
        border: none;
        background: none;
        padding: 0;
      }
    }

    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 */
}