////
///
/// Site Typography Site Styles
/// ===========================================================================
///
/// Component classes the scapepress sites use under the `ss-c-` prefix,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module, so at
/// equal specificity a native module rule wins.
///
/// 64 blocks, each still marked with the site and file it came from.
/// Values read `--ss-*` tokens in place of the sites' own Sass and
/// custom-property variables.
///
/// @group Modules.SiteTypography
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "sass:map";
@use "../../01-core/external" as *;
@use "../../23-layout/breakpoints";

// ============================================================================
// Output
// ============================================================================

@layer ss.components {
    // -- lead  (from site-scape_ventures/src/static/scss/base/_typography.scss) --

    // -- text-accent  (from site-scape_ventures/src/static/scss/base/_typography.scss) --
    .ss-c-text-accent {
        color: var(--ss-color-primary);
    }

    // -- link  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-link {
        color: var(--ss-color-primary);
        text-decoration: underline;

        &:hover {
            color: var(--ss-color-primary);
        }
    }

    // -- text-center  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-text-center { text-align: center; }

    // -- text-left  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-text-left { text-align: left; }

    // -- text-right  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-text-right { text-align: right; }

    // -- link-arrow  (from site-scape_press/src/static/scss/components/_buttons.scss) --
    .ss-c-link-arrow {
        display: inline-flex;
        align-items: baseline;
        gap: var(--ss-spacing-2);
        font-weight: var(--ss-font-weight-medium);
        text-decoration: none;
        color: inherit;
        border-bottom: q(1) solid currentColor;
        padding-bottom: q(2);
        transition: opacity var(--ss-duration-200) ease;

        &::after {
            content: '\2197';
            display: inline-block;
            transition: transform var(--ss-duration-200) ease;
        }

        &:hover {
            opacity: 1;

            &::after {
                transform: translate(q(2), q(-2));
            }
        }
    }

    // -- text-muted  (from site-scape_press/src/static/scss/utilities/_helpers.scss) --
    .ss-c-text-muted {
        color: var(--ss-color-gray-600);
    }

    // -- h1  (from site-scape_foundation/src/static/scss/theme/_typography.scss) --
    .ss-c-h1, .ss-c-h2, .ss-c-h3, .ss-c-h4, .ss-c-h5, .ss-c-h6 {
        font-family: Georgia, serif, Georgia, "Times New Roman", serif;
        font-weight: 700;
    }

    // -- heading--sans  (from site-scape_foundation/src/static/scss/theme/_typography.scss) --
    .ss-c-heading--sans {
        h1, h2, h3, h4, h5, h6,
        .ss-c-h1, .ss-c-h2, .ss-c-h3, .ss-c-h4, .ss-c-h5, .ss-c-h6,
        .ss-c-title,
        .ss-c-page-title,
        .ss-c-section-title,
        [class*="__title"],
        [class*="--title"] {
            font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
    }

    // -- accent  (from site-scape_foundation/src/static/scss/utilities/_color.scss) --
    .ss-c-accent {
        &--text {
            color: var(--color_accent_primary) !important;

            &::before {
                color: var(--color_accent_primary) !important;
            }
        }

        &--bg {
            background: var(--color_accent_primary) !important;
        }
    }

    // -- list_none  (from site-scape_foundation/src/static/scss/utilities/_spacing.scss) --
    .ss-c-list_none {
        padding: 0;
    }

    // -- text  (from site-scape_foundation/src/static/scss/utilities/_text.scss) --
    .ss-c-text {
        &--left {
            text-align: left;
        }

        &--right {
            text-align: right;
        }

        &--justify {
            text-align: justify;
        }

        &--center {
            text-align: center;
        }
    }

    // -- text-justify  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-justify { text-align: justify; }

    // -- text-xs  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-xs { font-size: var(--ss-font-size-xs); }

    // -- text-sm  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-sm { font-size: var(--ss-font-size-sm); }

    // -- text-base  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-base { font-size: var(--ss-font-size-base); }

    // -- text-lg  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-lg { font-size: var(--ss-font-size-lg); }

    // -- text-xl  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-xl { font-size: var(--ss-font-size-xl); }

    // -- text-2xl  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-2xl { font-size: var(--ss-font-size-3xl); }

    // -- text-3xl  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-3xl { font-size: var(--ss-font-size-4xl); }

    // -- text-primary  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-primary { color: var(--ss-color-primary); }

    // -- text-secondary  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-secondary { color: var(--ss-color-gray-500); }

    // -- text-dark  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-dark { color: var(--ss-color-gray-800); }

    // -- text-light  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-light { color: var(--ss-color-gray-100); }

    // -- text-white  (from site-blockfoundation_io/src/static/scss/utilities/_text.scss) --
    .ss-c-text-white { color: var(--ss-color-white); }

    // -- text-tertiary  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-text-tertiary {
      color: var(--ss-color-text-muted);
    }

    // -- text-success  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-text-success {
      color: var(--ss-color-success);
    }

    // -- text-warning  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-text-warning {
      color: var(--ss-color-warning);
    }

    // -- text-error  (from site-geoid_org/src/static/scss/base/_typography.scss) --
    .ss-c-text-error {
      color: var(--ss-color-error);
    }

    // -- svg-icon  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-svg-icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      vertical-align: -0.125em;

      &--sm {
        width: q(16);
        height: q(16);
      }

      &--md {
        width: q(24);
        height: q(24);
      }

      &--lg {
        width: q(32);
        height: q(32);
      }

      &--xl {
        width: q(48);
        height: q(48);
      }

      // Colored variants
      &--primary {
        color: var(--ss-color-accent);
      }

      &--success {
        color: var(--ss-color-success);
      }

      &--warning {
        color: var(--ss-color-warning);
      }

      &--error {
        color: var(--ss-color-error);
      }
    }

    // -- illustration  (from site-geoid_org/src/static/scss/components/_globe.scss) --
    .ss-c-illustration {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block;
      filter: drop-shadow(0 q(10) q(20) color-mix(in srgb, var(--ss-color-black) 20%, transparent));

      &--centered {
        margin: 0 auto;
        display: block;
      }

      &--shadow-md {
        filter: drop-shadow(0 q(4) q(6) color-mix(in srgb, var(--ss-color-black) 10%, transparent));
      }

      &--shadow-lg {
        filter: drop-shadow(0 q(10) q(15) color-mix(in srgb, var(--ss-color-black) 10%, transparent));
      }
    }

    // -- code-example  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-code-example {
      margin-bottom: var(--ss-spacing-12);

      &__title {
        font-size: q(16);
        margin-bottom: var(--ss-spacing-4);
        font-weight: 600;
      }
    }

    // -- code-copy-btn  (from site-geoid_org/src/static/scss/components/_tables.scss) --
    .ss-c-code-copy-btn {
      position: absolute;
      top: var(--ss-spacing-4);
      right: var(--ss-spacing-4);
      padding: q(4) q(8);
      background: var(--ss-color-surface);
      border: q(1) solid var(--ss-color-border);
      color: var(--ss-color-text-secondary);
      border-radius: var(--ss-radius-sm);
      font-size: q(12);
      cursor: pointer;
        // (stripped @include)
        // (stripped @include)
      &:hover {
        background: var(--ss-color-accent);
        border-color: var(--ss-color-accent);
        color: var(--ss-color-white);
      }
    }

    // -- h4  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-h4 {
        font-family: unset;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ss-color-primary);
    }

    // -- h2  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-h2 {
        font-size: clamp(q(24), calc(q(20) + 1.5vw), q(40));
        line-height: 1.15;
        font-weight: 700;
        margin: 1em 0 0.5em;
    }

    // -- h3  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-h3 {
        font-size: clamp(q(20), calc(q(16) + 0.75vw), q(28));
        line-height: 1.2;
        font-weight: 700;
        margin: 1em 0 0.375em;
    }

    // -- text-balance  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-text-balance {
        text-wrap: balance;
    }

    // -- text-emphasis  (from site-inthecity_ai/src/static/scss/base/_typography.scss) --
    .ss-c-text-emphasis {
        font-family: unset;
        font-weight: 700;
    }

    // -- list  (from site-kockums_foundation/src/static/scss/base/_typography.scss) --
    .ss-c-list {
      margin-bottom: var(--ss-spacing-4);
      padding-left: var(--ss-spacing-6);

      li {
        margin-bottom: var(--ss-spacing-2);
        line-height: unset;
      }
    }

    // -- list--bullet  (from site-kockums_foundation/src/static/scss/base/_typography.scss) --
    .ss-c-list--bullet {
      list-style-type: disc;
    }

    // -- list--number  (from site-kockums_foundation/src/static/scss/base/_typography.scss) --
    .ss-c-list--number {
      list-style-type: decimal;
    }

    // -- small  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-small {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-500);
    }

    // -- link--accent  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-link--accent {
        color: var(--ss-color-primary);

        &:hover {
            color: var(--ss-color-primary);
        }
    }

    // -- list-numbered  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-list-numbered {
        counter-reset: list-counter;
        padding-left: unset;

        li {
            counter-increment: list-counter;
            margin-bottom: unset;
            position: relative;

            &::before {
                content: counter(list-counter, decimal-leading-zero);
                position: absolute;
                left: q(-40);
        // (stripped @include)
            }
        }
    }

    // -- label  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-label {
        // (stripped @include)
    }

    // -- number  (from site-matter_tech/src/static/scss/base/_typography.scss) --
    .ss-c-number {
        // (stripped @include)
    }

    // -- media  (from site-mesmera_io/src/static/scss/app/_components.scss) --
    .ss-c-media {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: var(--ss-radius-none);
        background-color: var(--ss-color-gray-100);

        &--rounded-lg {
            border-radius: var(--ss-radius-none);
        }

        &--full {
            border-radius: 0;
        }

        img,
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        // Aspect ratios
        &--16x9 { aspect-ratio: 16 / 9; }
        &--4x3 { aspect-ratio: 4 / 3; }
        &--1x1 { aspect-ratio: 1 / 1; }
        &--2x1 { aspect-ratio: 2 / 1; }
    }

    // -- headline  (from site-mesmera_io/src/static/scss/app/_typography.scss) --

    // -- title  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-title {
        font-family: unset;
        font-size: unset;
        font-weight: var(--ss-font-weight-semibold);
        line-height: var(--ss-leading-none);
        letter-spacing: var(--ss-tracking-tighter);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            font-size: unset;
        }

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            font-size: unset;
        }
    }

    // -- subtitle  (from site-mesmera_io/src/static/scss/app/_typography.scss) --

    // -- body  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-body {
        font-size: unset;
        font-weight: unset;
        line-height: var(--ss-leading-relaxed);

        &--lg {
            font-size: unset;

            @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
                font-size: unset;
            }
        }

        &--sm {
            font-size: unset;
        }
    }

    // -- caption  (from site-mesmera_io/src/static/scss/app/_typography.scss) --

    // -- text-inverted  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-text-inverted { color: var(--ss-color-white); }

    // -- text-pretty  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-text-pretty {
        text-wrap: pretty;
    }

    // -- prose  (from site-mesmera_io/src/static/scss/app/_typography.scss) --
    .ss-c-prose {
        max-width: q(800);

        // Heading sizes come from the typography layer; the shim only sets
        // the rhythm of a long-form text column.
        > * + * {
            margin-top: var(--ss-space-4);
        }

        h2 {
            margin-top: var(--ss-space-8);
        }

        h3 {
            margin-top: var(--ss-space-6);
        }

        p {
            margin-bottom: var(--ss-space-4);
        }

        ul, ol {
            padding-left: var(--ss-space-6);
            margin-bottom: var(--ss-space-4);
        }

        li {
            margin-bottom: var(--ss-space-2);
        }

        ul li {
            list-style-type: disc;
        }

        ol li {
            list-style-type: decimal;
        }

        a {
            text-decoration: underline;
            text-underline-offset: q(2);
        }

        blockquote {
            padding-left: var(--ss-space-4);
            border-left: q(3) solid var(--ss-color-border);
            font-style: italic;
            color: var(--ss-color-text-muted);
        }

        code {
            font-size: 0.9em;
            background-color: color-mix(in srgb, var(--ss-color-text) 6%, transparent);
            padding: 0.125em 0.375em;
            border-radius: 0;
        }

        pre {
            background-color: var(--ss-color-foreground);
            color: var(--ss-color-background);
            padding: var(--ss-space-4);
            border-radius: 0;
            overflow-x: auto;

            code {
                background: none;
                padding: 0;
            }
        }

        img {
            border-radius: 0;
            margin-top: var(--ss-space-6);
            margin-bottom: var(--ss-space-6);
        }
    }

    // -- description-text  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-description-text {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: q(24);
        align-self: stretch;
    }

    // -- link-column  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-link-column {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: q(8) q(24);
        align-self: stretch;
    }

    // -- text--uppercase  (from site-starling_studio/src/static/scss/app/_text_transform.scss) --
    .ss-c-text--uppercase {
        text-transform: uppercase;
    }

    // -- text--lowercase  (from site-starling_studio/src/static/scss/app/_text_transform.scss) --
    .ss-c-text--lowercase {
        text-transform: lowercase;
    }

    // -- text--capitalize  (from site-starling_studio/src/static/scss/app/_text_transform.scss) --
    .ss-c-text--capitalize {
        text-transform: capitalize;
    }

    // -- text--normal-case  (from site-starling_studio/src/static/scss/app/_text_transform.scss) --
    .ss-c-text--normal-case {
        text-transform: none;
    }

    // -- starling_subtitle  (from site-starling_studio/src/static/scss/theme/_index.scss) --
    .ss-c-starling_subtitle{
        font-style: italic;
        font-weight: 500;
    }

    // -- mono  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-mono {
        font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, Consolas, monospace;
        font-size: q(14);
    }
}