////
///
/// Page Header 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.
///
/// 23 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.PageHeader
/// @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 {
    // -- page-header  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-header {
        padding: var(--ss-spacing-32) 0 var(--ss-spacing-16);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            padding: var(--ss-spacing-32) 0 var(--ss-spacing-20);
        }
    }

    // -- page-header--large  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-header--large {
        padding-bottom: var(--ss-spacing-20);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            padding-bottom: var(--ss-spacing-24);
        }
    }

    // -- page-label  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-label {
        display: inline-block;
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-color-primary);
        margin-bottom: var(--ss-spacing-4);
    }

    // -- page-title  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-title {
        margin-bottom: var(--ss-spacing-4);
    }

    // -- page-description  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-description {
        font-size: var(--ss-font-size-xl);
        color: var(--ss-color-gray-500);
        max-width: q(640);

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

    // -- page-description--large  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-page-description--large {
        max-width: q(800);
    }

    // -- page-subtitle  (from site-geoid_org/src/static/scss/layout/_section.scss) --
    .ss-c-page-subtitle {
      font-size: q(18);
      color: var(--ss-color-text-secondary);
      max-width: q(600);
    }

    // -- page-header-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-page-header-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 var(--ss-spacing-6);
    }

    // -- page-header--centered  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-page-header--centered {
        text-align: center;

        .ss-c-page-header-container {
            max-width: unset;
        }
    }

    // -- page-header__title  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__title {
        font-size: var(--page-header-title-size, #{q(45)});
        font-weight: var(--page-header-title-weight, var(--ss-font-weight-bold));
        text-transform: var(--page-header-title-transform, uppercase);
        color: var(--page-header-title-color, inherit);
        white-space: nowrap;
        overflow: hidden;
        will-change: font-size, line-height;
    }

    // -- page-header__eyebrow  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__eyebrow {
        display: block;
        font-size: q(12);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-color-primary);
        margin-bottom: q(8);
    }

    // -- page-header__headline  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__headline {
        font-size: clamp(q(16), 5vw, q(32));
        font-weight: 700;
        line-height: 1.1;
        color: inherit;
        margin: 0;

        // Allow wrapping for long headlines
        white-space: normal;
    }

    // -- page-header__description  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__description {
        font-size: var(--page-header-text-size, var(--ss-font-size-base));
        color: var(--page-header-text-color, var(--ss-color-text-muted));
        max-width: var(--page-header-text-max-width, var(--ss-measure-default));
        margin-top: q(16);

        p {
            margin: 0;
        }
    }

    // -- page-header__text  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header__text {
        font-size: var(--page-header-text-size, var(--ss-font-size-base));
        color: var(--page-header-text-color, var(--ss-color-text-muted));
        max-width: var(--page-header-text-max-width, var(--ss-measure-default));
        margin-top: q(32);

        &:first-child {
            margin-top: 0;
        }
    }

    // -- page-header--borderless  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--borderless {
        --page-header-border-top: none;
        --page-header-border-bottom: none;
    }

    // -- page-header--border-bottom  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--border-bottom {
        --page-header-border-bottom: 1px solid var(--ss-color-black);
    }

    // -- page-header--sm  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--sm {
        --page-header-title-size: #{q(24)};
        --page-header-min-height: 15vh;
    }

    // -- page-header--lg  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--lg {
        --page-header-title-size: #{q(60)};
        --page-header-min-height: 35vh;
    }

    // -- page-header--center  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--center {
        text-align: center;

        .ss-c-page-header__text {
            margin-left: auto;
            margin-right: auto;
        }
    }

    // -- page-header--light  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--light {
        --page-header-border-top: 1px solid color-mix(in srgb, var(--ss-color-white) 20%, transparent);
        --page-header-title-color: var(--ss-color-white);
        --page-header-text-color: color-mix(in srgb, var(--ss-color-white) 80%, transparent);
    }

    // -- page-header--wrap  (from site-starling_studio/src/static/scss/app/_page_header.scss) --
    .ss-c-page-header--wrap {
        .ss-c-page-header__title {
            white-space: normal;
            overflow: visible;
        }
    }

    // -- page-border  (from site-suell_org/src/static/scss/base/_base.scss) --
    .ss-c-page-border {
        position: fixed;
        background: var(--ss-color-black);
        z-index: var(--ss-z-toast);
        pointer-events: none;

        &--top,
        &--bottom {
            left: 0;
            right: 0;
            height: q(1);
        }

        &--top { top: 0; }
        &--bottom { bottom: 0; }

        &--left,
        &--right {
            top: 0;
            bottom: 0;
            width: q(1);
        }

        &--left { left: 0; }
        &--right { right: 0; }
    }

    // -- page-content  (from site-suell_org/src/static/scss/base/_base.scss) --
    .ss-c-page-content {
        padding: q(1);
        min-height: 100vh;
    }
}