/*
 * Page header: the top of a content page - breadcrumb, the section it belongs
 * to, the page's h1, and on a page with products a link down to them, or a
 * short introduction and a link down to the help further on (the accessories).
 *
 * The eyebrow repeats the stock header's eyebrow (overview.css) from the same
 * tokens rather than sharing its rule: that one belongs to the homepage, which
 * is not changed for this. One rule for both is a later, homepage-approved
 * extraction.
 */

.page-header {
    display: grid;
    justify-items: start;
    gap: var(--shop-rhythm-heading);
}

.page-header__heading {
    display: grid;
    gap: 6px;
}

.page-header__eyebrow {
    margin: 0;
    color: var(--shop-accent);
    font-size: var(--shop-text-sm);
    font-weight: var(--shop-weight-semibold);
    line-height: 1.3;
    letter-spacing: var(--shop-tracking-eyebrow);
    text-transform: uppercase;
}

/* The page's one h1. Set in full here, so Foundation's h1 sizes and weights
   do not decide it. Balanced, so a two-line title does not leave one word
   on its own line; long single words break rather than overflow a phone. */
.page-header__title {
    margin: 0;
    color: var(--shop-ink);
    font-family: var(--shop-font);
    font-size: var(--shop-text-2xl);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-display);
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
}

.page-header__intro {
    max-width: 72ch;
    color: var(--shop-text);
    font-size: var(--shop-text-base);
    line-height: var(--shop-leading-normal);
}

/* A link down the page (the accessories' guide), quieter than the products. */
.page-header__jump {
    margin: 0;
}

.page-header__jump a,
.page-header__jump a:visited {
    display: inline-flex;
    align-items: center;
    gap: var(--shop-space-2);
    min-height: var(--shop-tap);
    color: var(--shop-accent);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-semibold);
    text-decoration: none;
}

/* As the site's text links: underlined on hover only. combined.css colours
   a:hover and a:focus (0,1,1). */
.page-header__jump a:is(:hover, :focus) {
    color: var(--shop-accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-header__jump-arrow {
    display: inline-flex;
    width: 1em;
    height: 1em;
    transform: rotate(90deg);
}

.page-header__jump-arrow svg {
    width: 100%;
    height: 100%;
}

.page-header__intro > :first-child {
    margin-block-start: 0;
}

.page-header__intro > :last-child {
    margin-block-end: 0;
}

@media (min-width: 640px) {
    .page-header__title {
        font-size: var(--shop-text-3xl);
    }
}