/**
 * Reusable presentation primitives for the native PardePlus templates.
 */

.pp-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--pp-space-3);
    padding: 0.625rem 1.25rem;
    color: #ffffff;
    background: var(--pp-color-primary);
    border: 1px solid var(--pp-color-primary);
    border-radius: var(--pp-radius-pill);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--pp-transition-fast),
        background-color var(--pp-transition-fast),
        border-color var(--pp-transition-fast),
        color var(--pp-transition-fast),
        box-shadow var(--pp-transition-fast);
}

.pp-button:hover {
    color: var(--pp-color-primary);
    background: var(--pp-color-accent);
    border-color: var(--pp-color-accent);
    transform: translateY(-1px);
}

.pp-button:active {
    transform: translateY(0);
}

.pp-button--accent {
    color: var(--pp-color-primary);
    background: rgb(234 203 154 / 76%);
    border-color: var(--pp-color-accent);
}

.pp-button--accent:hover {
    color: var(--pp-color-primary);
    background: var(--pp-color-accent);
    border-color: var(--pp-color-accent);
}

.pp-button--outline {
    color: var(--pp-color-primary);
    background: transparent;
    border-color: var(--pp-color-primary);
}

.pp-button--outline:hover {
    color: #ffffff;
    background: var(--pp-color-primary);
}

.pp-section-heading {
    display: grid;
    gap: var(--pp-space-1);
    margin-block-end: var(--pp-space-8);
}

.pp-section-heading__eyebrow {
    margin: 0;
    color: var(--pp-color-accent);
    font-size: var(--pp-text-base);
    font-weight: 400;
    line-height: 1.5;
}

.pp-section-heading__title {
    margin: 0;
    color: var(--pp-color-primary);
    font-family: var(--pp-font-display);
    font-size: clamp(1.5rem, 2.3vw, 3.125rem);
    font-weight: 500;
    line-height: 1.35;
}

.pp-section-heading__label {
    margin: 0;
    color: var(--pp-color-primary);
    font-size: var(--pp-text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.pp-surface {
    background: var(--pp-color-surface);
    border-radius: var(--pp-radius-md);
}

/* Canonical breadcrumb presentation. Rank Math/WooCommerce keep trail ownership. */
.pp-breadcrumbs {
    min-width: 0;
    max-width: 100%;
    padding: 10px 18px;
    color: var(--pp-color-secondary);
    background: var(--pp-color-cream);
    border-radius: 22px;
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* The banner itself provides the visual background; avoid a second cream chip
 * inside red archive/help-page headers. Standalone article/product crumbs keep
 * their original cream surface. */
.pp-main > header[class*="__banner"] .pp-breadcrumbs {
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: inherit;
}
.pp-main > header[class*="__banner"] .pp-breadcrumbs a:is(:hover, :focus-visible) {
    color: var(--pp-color-surface);
    background: rgb(255 255 255 / 18%);
}

.pp-breadcrumbs :is(nav, p, .rank-math-breadcrumb, .woocommerce-breadcrumb) {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.pp-breadcrumbs :is(.pp-breadcrumbs__trail, .rank-math-breadcrumb p, .woocommerce-breadcrumb) {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
}

.pp-breadcrumbs a {
    display: inline-block;
    padding: 2px 8px;
    margin-inline: -4px;
    border-radius: var(--pp-radius-pill);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--pp-transition-fast), color var(--pp-transition-fast);
}

.pp-breadcrumbs a:is(:hover, :focus-visible) {
    color: var(--pp-color-primary);
    background: rgb(143 26 28 / 10%);
    text-decoration: none;
}

.pp-breadcrumbs a:focus-visible {
    outline: 2px solid var(--pp-color-focus);
    outline-offset: 2px;
    border-radius: var(--pp-radius-pill);
}

.pp-breadcrumbs :is(.pp-breadcrumbs__separator, .separator) {
    flex: none;
    white-space: nowrap;
    color: var(--pp-color-muted);
}

@media (max-width: 600px) {
    .pp-breadcrumbs {
        padding: 9px 12px;
        font-size: 11px;
    }
    .pp-main > header[class*="__banner"] .pp-breadcrumbs { padding: 0; }
}


/* Global mobile quick navigation; responsive.css owns its phone presentation. */
.pp-mobile-nav {
    display: none;
}