/**
 * Layout: sidebars, per-page layouts, the "above the footer" area, [aside]
 * notes and the layout widgets. Uses css/core/tokens.css only.
 */

/* Two columns: content + sidebar ----------------------------------------- */
.layout-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: var(--spacing-xl);
    align-items: start;
}

.sidebar-left .layout-with-sidebar {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.sidebar-left .layout-with-sidebar > .site-sidebar {
    order: -1;
}

.site-sidebar__inner > .widget {
    margin-bottom: var(--spacing-lg);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.site-sidebar__inner > .widget > *:not(.widget-title) {
    padding: 0 var(--spacing-md);
}

.site-sidebar__inner > .widget > *:last-child {
    padding-bottom: var(--spacing-md);
}

/* Sticky: stays in view and stops at the end of the grid (before the footer). */
.sidebar-sticky .site-sidebar {
    position: sticky;
    top: calc(var(--header-height, 80px) + var(--store-notice-height, 0px) + var(--spacing-md));
    max-height: calc(100vh - var(--header-height, 80px) - var(--spacing-xl));
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 960px) {
    .layout-with-sidebar,
    .sidebar-left .layout-with-sidebar {
        grid-template-columns: 1fr;
    }

    .sidebar-left .layout-with-sidebar > .site-sidebar {
        order: 0;
    }

    .sidebar-sticky .site-sidebar {
        position: static;
        max-height: none;
    }
}

/* Per-page layouts ------------------------------------------------------- */
.layout-narrow .site-main > .container,
.layout-narrow .layout-main,
.layout-narrow .single-main__content-column {
    max-width: 760px;
    margin-inline: auto;
}

.layout-full .site-main > .container,
.layout-full .container--with-rail {
    max-width: none;
}

/* Above the footer ------------------------------------------------------- */
.before-footer {
    margin-top: var(--spacing-xl);
}

.before-footer .widget {
    margin-bottom: var(--spacing-lg);
}

/* [aside] ---------------------------------------------------------------- */
.content-aside {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-inline-start: 4px solid var(--focus-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-small);
}

.content-aside__title {
    margin: 0 0 var(--spacing-xs);
    font-weight: 600;
}

.content-aside__body > :last-child {
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .content-aside--end {
        float: inline-end;
        width: min(38%, 280px);
        margin-inline-start: var(--spacing-lg);
    }

    .content-aside--start {
        float: inline-start;
        width: min(38%, 280px);
        margin-inline-end: var(--spacing-lg);
    }
}

/* Widgets: table of contents, related plans, recently viewed ------------- */
.widget-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    counter-reset: toc;
}

.widget-toc__item a {
    display: block;
    padding: 2px 0;
    color: var(--text-color);
    text-decoration: none;
}

.widget-toc__item a:hover,
.widget-toc__item a:focus-visible {
    color: var(--link-hover-color, var(--link-color));
}

.widget-toc__item--h3 {
    padding-inline-start: var(--spacing-md);
    font-size: var(--font-size-small);
}

.widget-related-plans {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.widget-recently-viewed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.widget-recently-viewed__item a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-color);
    text-decoration: none;
}

.widget-recently-viewed__item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

.widget-recently-viewed__text {
    display: grid;
}

.widget-recently-viewed__name {
    font-weight: 600;
}

.widget-recently-viewed__price {
    font-size: var(--font-size-small);
    color: var(--text-muted, var(--text-color));
}

/* Widgets inside the mini cart ------------------------------------------- */
.mini-cart__widgets {
    font-size: var(--font-size-small);
    color: var(--text-muted, var(--text-color));
    border-top: 0;
}

.mini-cart__widgets .widget-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-base);
    color: var(--text-color);
    background: none;
    padding: 0;
}

/* Article change note (editorial) ---------------------------------------- */
.article-changelog {
    margin: 0 20px var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    border-inline-start: 4px solid var(--success);
    background: var(--success-bg);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-small);
    color: var(--text-color);
}

.article-changelog__label {
    font-weight: 600;
    margin-inline-end: 6px;
}

/* The sidebar's table of contents replaces the in-article one while the two
   columns are side by side. */
@media (min-width: 961px) {
    .has-toc-widget .single-main__content-column .toc {
        display: none;
    }
}

/* Widgets inside the drawer sit flat in the list, not as floating cards. */
.mini-cart__widgets {
    padding: var(--spacing-md) 0;
}

.mini-cart__widgets .widget {
    margin: 0 0 var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: none;
    transform: none;
}

.mini-cart__widgets .widget-title,
.mini-cart__widgets .widget .widget-title {
    margin: 0 0 4px;
    padding: 0;
    font-size: var(--font-size-small);
    font-weight: 600;
    background: none;
    color: var(--text-color);
}

.mini-cart__widgets .widget p {
    margin: 0;
    padding: 0;
}

.mini-cart__widgets .widget > *,
.mini-cart__widgets .textwidget {
    padding-inline: 0;
    margin-inline: 0;
}

/* ==========================================================================
   "Load more" / infinite scrolling (inc/Paging.php, js/core/paging.js)
   ========================================================================== */

.paging-more {
    clear: both;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.paging-more__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 12rem;
    justify-content: center;
}

/* While a page loads: a small ring in the button. */
.paging-more.is-loading .paging-more__button::before {
    content: '';
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: paging-spin 0.8s linear infinite;
}

@keyframes paging-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .paging-more.is-loading .paging-more__button::before {
        animation-duration: 2.4s;
    }
}

.paging-more__status {
    margin: 0;
    min-height: 1.5em;
    font-size: var(--font-size-small);
    color: var(--text-muted, var(--text-color));
}

.paging-more.is-done .paging-more__status {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* ==========================================================================
   Pages: sections and text between them sat against the window edges (the
   page has no container, so bands can run edge to edge). Everything now
   takes the container width with a side gutter, except the blocks meant to
   be full width: [hero], [full_bleed], [floating_cards], the [cta] band and
   anything marked .alignfull. Floated and inline items are left alone.
   ========================================================================== */

.type-page > .entry-content > :not(.hero, .full-bleed, .floating-cards, .content-section--cta, .alignfull, .content-aside, .whatsapp, br, script, style, link) {
    box-sizing: border-box;
    width: min(100% - 2 * var(--spacing-lg), var(--container-max-width, 1200px));
    margin-inline: auto;
}

/* Paragraphs WordPress wraps around a lone shortcode leave empty gaps. */
.type-page > .entry-content > p:empty {
    display: none;
}

/* A full-width hero on a page: its text lines up with the contained
   sections below it instead of the window edge. */
.type-page > .entry-content > .hero {
    padding-inline: max(var(--spacing-lg), (100% - var(--container-max-width, 1200px)) / 2);
}