/*
 * How a built page looks.
 *
 * The page builder renders widgets as bare semantic markup — `pb-row`, `pb-col-N`, `pb-richtext`
 * and the rest — with no styling of its own, because the markup is authored once, in the widget
 * templates, and has to survive a change of theme without a migration to rewrite it.
 *
 * This file is where those classes are defined, and it is the only place. Two surfaces load it:
 * `Pages/Shared/_Layout.cshtml` for a published page, and the admin's preview iframe, which links
 * this exact URL rather than keeping an approximation of it. That is the point — a preview built
 * from a second stylesheet drifts from the page it claims to predict, and the drift is invisible
 * until somebody publishes.
 *
 * It styles the widgets and nothing else. Page furniture — typography, the container, the header
 * and footer — belongs to whatever layout hosts `.pb-page`.
 */

/*
 * A block the author gave a class of their own is rendered inside a .pb-widget wrapper, so the edge
 * rules have to reach through one element to find the widget they are about. Without the second
 * selector, giving the first block on a page a class would quietly give the page a top margin back.
 */
.pb-page > :first-child,
.pb-page > .pb-widget:first-child > :first-child {
    margin-top: 0;
}

.pb-page > :last-child,
.pb-page > .pb-widget:last-child > :last-child {
    margin-bottom: 0;
}

/* Spans are expressed against a 12 column grid, which is PageBuilderLimits.GridColumns. */
.pb-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    margin-block: 1rem;
}

/*
 * A row is a stack until there is room to be anything else.
 *
 * Twelve columns at a phone's width is not a layout. At 390px a four column row leaves about 73px
 * per column, and a heading, a picture or a price has nowhere to go — so every column takes the
 * whole row by default and claims the span it was given only from the tablet breakpoint up
 * (Standards/11-mobile-first-design.md, `md`). A column with no span of its own is unchanged by
 * this: it occupied the full row before and it still does, at every width.
 *
 * `min-width: 0` on all of them rather than on that one alone. A grid item's automatic minimum is
 * its own content, so without it a long word in a narrow column widens the column instead of
 * wrapping, and takes the row's arithmetic with it.
 */
.pb-col,
.pb-col-1,
.pb-col-2,
.pb-col-3,
.pb-col-4,
.pb-col-5,
.pb-col-6,
.pb-col-7,
.pb-col-8,
.pb-col-9,
.pb-col-10,
.pb-col-11,
.pb-col-12 {
    grid-column: span 12;
    min-width: 0;
}

/* Span 12 is the base, so only the narrower ones have anything to say here. */
@media (min-width: 768px) {
    .pb-col-1 {
        grid-column: span 1;
    }
    .pb-col-2 {
        grid-column: span 2;
    }
    .pb-col-3 {
        grid-column: span 3;
    }
    .pb-col-4 {
        grid-column: span 4;
    }
    .pb-col-5 {
        grid-column: span 5;
    }
    .pb-col-6 {
        grid-column: span 6;
    }
    .pb-col-7 {
        grid-column: span 7;
    }
    .pb-col-8 {
        grid-column: span 8;
    }
    .pb-col-9 {
        grid-column: span 9;
    }
    .pb-col-10 {
        grid-column: span 10;
    }
    .pb-col-11 {
        grid-column: span 11;
    }
}

/*
 * Where a master page puts the page applied to it. Filled, it is a wrapper and nothing more. Empty -
 * which is a master previewed on its own - it draws the slot, so whoever is laying out the frame can
 * see where the page will go. `:empty` is exact: the template writes nothing but the page into it.
 */
.pb-content:empty {
    min-height: 8rem;
    border: 2px dashed currentColor;
    border-radius: 0.5rem;
    opacity: 0.35;
}

.pb-richtext > :first-child {
    margin-top: 0;
}
.pb-richtext > :last-child {
    margin-bottom: 0;
}

.pb-image {
    margin: 1rem 0;
}

.pb-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.pb-image figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.7;
}

.pb-products,
.pb-categories {
    margin-block: 1.5rem;
}

.pb-products-heading,
.pb-categories-heading {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.pb-product-grid,
.pb-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pb-product img,
.pb-category img {
    max-width: 100%;
    height: auto;
    display: block;
}

.pb-product-link,
.pb-category-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* The name and the price are spans in the markup, so they need to be told to sit on their own line. */
.pb-product-name,
.pb-category-name {
    display: block;
    margin-top: 0.5rem;
}

.pb-product-price {
    display: block;
    margin-top: 0.25rem;
    opacity: 0.75;
}

/*
 * The header block.
 *
 * Mobile-first: the links sit behind the menu button until the width the block's pb-nav--collapse-*
 * class names, where the bar takes over. The template writes the links twice for that, because the
 * button is a details element - it needs no script, which the admin's sandboxed preview could not run
 * anyway - and a details element cannot be told to show its contents on a wide screen.
 *
 * Colours are custom properties: the theme's by default, the block's own when its settings name one,
 * which the renderer writes onto the element and which win over these by being inline.
 */
.pb-nav {
    --pb-nav-bg: var(--color-base-100, Canvas);
    --pb-nav-fg: var(--color-base-content, CanvasText);
    --pb-nav-accent: var(--color-primary, LinkText);
    --pb-nav-accent-fg: var(--color-primary-content, Canvas);
    --pb-nav-logo-h: 32px;
    position: relative;
    z-index: 40;
    background: var(--pb-nav-bg);
    color: var(--pb-nav-fg);
}

.pb-nav--sticky {
    position: sticky;
    top: 0;
}

.pb-nav--border {
    border-bottom: 1px solid color-mix(in srgb, var(--pb-nav-fg) 12%, transparent);
}

.pb-nav--shadow {
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--pb-nav-fg) 30%, transparent);
}

.pb-nav-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.pb-nav--width-full .pb-nav-inner {
    max-width: none;
}

.pb-nav--size-compact .pb-nav-inner {
    min-height: 3rem;
}

.pb-nav--size-spacious .pb-nav-inner {
    min-height: 5.5rem;
}

.pb-nav-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.625rem;
    color: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
}

.pb-nav-logo {
    display: block;
    width: auto;
    height: var(--pb-nav-logo-h);
}

.pb-nav-bar {
    display: none;
    flex: 1;
    min-width: 0;
}

.pb-nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-nav--align-start .pb-nav-list {
    justify-content: flex-start;
}

.pb-nav--align-center .pb-nav-list {
    justify-content: center;
}

.pb-nav-item {
    position: relative;
}

.pb-nav-link,
.pb-nav-sublink {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pb-nav-link:hover,
.pb-nav-sublink:hover {
    color: var(--pb-nav-accent);
}

.pb-nav-link:focus-visible,
.pb-nav-sublink:focus-visible,
.pb-nav-toggle:focus-visible {
    outline: 2px solid var(--pb-nav-accent);
    outline-offset: 2px;
}

.pb-nav-link--button,
.pb-nav-link--button:hover {
    background: var(--pb-nav-accent);
    color: var(--pb-nav-accent-fg);
}

.pb-nav-link--button:hover {
    filter: brightness(1.08);
}

.pb-nav-link--outline {
    box-shadow: inset 0 0 0 1px var(--pb-nav-accent);
    color: var(--pb-nav-accent);
}

/* The current page, marked the way the block says. A button already stands out, so it is left alone. */
.pb-nav--active-underline .pb-nav-link.is-active:not(.pb-nav-link--button, .pb-nav-link--outline) {
    border-radius: 0;
    box-shadow: inset 0 -2px 0 var(--pb-nav-accent);
}

.pb-nav--active-pill .pb-nav-link.is-active:not(.pb-nav-link--button, .pb-nav-link--outline) {
    background: color-mix(in srgb, var(--pb-nav-accent) 12%, transparent);
    color: var(--pb-nav-accent);
}

.pb-nav--active-text .pb-nav-link.is-active:not(.pb-nav-link--button, .pb-nav-link--outline),
.pb-nav:not(.pb-nav--active-none) .pb-nav-sublink.is-active {
    color: var(--pb-nav-accent);
}

/* A dropdown opens on hover and on focus, so a keyboard reaches its links as a pointer does. */
.pb-nav-has-children > .pb-nav-link::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
}

.pb-nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    display: none;
    min-width: 12rem;
    margin: 0;
    padding: 0.375rem;
    border: 1px solid color-mix(in srgb, var(--pb-nav-fg) 10%, transparent);
    border-radius: 0.75rem;
    background: var(--pb-nav-bg);
    color: var(--pb-nav-fg);
    box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--pb-nav-fg) 35%, transparent);
    list-style: none;
}

/* The last dropdown on a right-aligned bar opens leftwards, so it does not run off the window. */
.pb-nav--align-end .pb-nav-item:last-child > .pb-nav-sub {
    right: 0;
    left: auto;
}

.pb-nav-has-children:hover > .pb-nav-sub,
.pb-nav-has-children:focus-within > .pb-nav-sub {
    display: block;
}

.pb-nav-sub .pb-nav-sublink {
    display: flex;
    width: 100%;
}

.pb-nav-mobile {
    margin-inline-start: auto;
}

.pb-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
    list-style: none;
    cursor: pointer;
}

.pb-nav-toggle::-webkit-details-marker {
    display: none;
}

.pb-nav-toggle-icon,
.pb-nav-toggle-icon::before,
.pb-nav-toggle-icon::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition:
        transform 0.2s,
        background-color 0.2s;
}

.pb-nav-toggle-icon {
    position: relative;
}

.pb-nav-toggle-icon::before,
.pb-nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.pb-nav-toggle-icon::before {
    top: -6px;
}

.pb-nav-toggle-icon::after {
    top: 6px;
}

.pb-nav-mobile[open] .pb-nav-toggle-icon {
    background: transparent;
}

.pb-nav-mobile[open] .pb-nav-toggle-icon::before {
    transform: translateY(6px) rotate(45deg);
}

.pb-nav-mobile[open] .pb-nav-toggle-icon::after {
    transform: translateY(-6px) rotate(-45deg);
}

.pb-nav-mobile-list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-height: calc(100vh - 4rem);
    margin: 0;
    padding: 0.5rem 1rem 1rem;
    overflow-y: auto;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-nav-fg) 12%, transparent);
    background: var(--pb-nav-bg);
    color: var(--pb-nav-fg);
    box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--pb-nav-fg) 30%, transparent);
    list-style: none;
}

.pb-nav-mobile-list .pb-nav-link,
.pb-nav-mobile-list .pb-nav-sublink {
    display: flex;
    width: 100%;
    white-space: normal;
}

.pb-nav-mobile-list .pb-nav-link--button,
.pb-nav-mobile-list .pb-nav-link--outline {
    justify-content: center;
    margin-top: 0.25rem;
}

.pb-nav-mobile-heading {
    display: block;
    padding: 0.75rem 0.75rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.pb-nav-mobile-sub {
    margin: 0;
    padding: 0 0 0 0.75rem;
    list-style: none;
}

/* Where the bar takes over from the menu button. "always" never gets the bar; "never" always does. */
.pb-nav--collapse-never .pb-nav-bar {
    display: flex;
}

.pb-nav--collapse-never .pb-nav-mobile {
    display: none;
}

@media (min-width: 640px) {
    .pb-nav--collapse-sm .pb-nav-bar {
        display: flex;
    }
    .pb-nav--collapse-sm .pb-nav-mobile {
        display: none;
    }
}

@media (min-width: 768px) {
    .pb-nav--collapse-md .pb-nav-bar {
        display: flex;
    }
    .pb-nav--collapse-md .pb-nav-mobile {
        display: none;
    }
}

@media (min-width: 1024px) {
    .pb-nav--collapse-lg .pb-nav-bar {
        display: flex;
    }
    .pb-nav--collapse-lg .pb-nav-mobile {
        display: none;
    }
}