/*
 * pw-coe-future-bidding frontend styles.
 * Scoped under .pw-coe-fbp so this stylesheet is portable across themes.
 */

.pw-coe-fbp {
    --pwcp-green: #82bc00;
    --pwcp-green-dark: #6ba300;
    --pwcp-purple: #553278;
    --pwcp-purple-dark: #422660;
    --pwcp-text: #818181;
    --pwcp-heading: #303030;
    --pwcp-border: #e6e6e6;
    --pwcp-tint: #ededed;
    --pwcp-tint-soft: #f6f6f6;
    --pwcp-radius: 4px;
    /* Vertical space the sticky site header occupies, so anchor jumps don't tuck
       the section heading up underneath it. Live header min-height is 100px on
       desktop (85px tablet / 65px mobile); these add a small buffer and are
       overridden per breakpoint below. */
    --pwcp-header-offset: 112px;
    --pwcp-font-body: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pwcp-font-paragraph: "Poppins", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pwcp-font-heading: "museo-slab", "Roboto Slab", Georgia, serif;

    color: var(--pwcp-text);
    font-family: var(--pwcp-font-body);
    font-size: 14px;
    line-height: 26px;
    font-weight: 400;

    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.pw-coe-fbp *,
.pw-coe-fbp *::before,
.pw-coe-fbp *::after {
    box-sizing: border-box;
}

.pw-coe-fbp p {
    color: var(--pwcp-text) !important;
    font-family: var(--pwcp-font-paragraph) !important;
    font-size: 16px !important;
    line-height: 26px !important;
    font-weight: 300 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.pw-coe-fbp strong,
.pw-coe-fbp b {
    color: var(--pwcp-text) !important;
    font-family: inherit !important;
    font-weight: 400 !important;
}

/* ---------- Jump navigation (auto-generated from the section list) ---------- */

.pw-coe-fbp .pw-coe-fbp-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 2.5rem;
    padding: 1rem 1.25rem;
    background: var(--pwcp-tint-soft);
    border: 1px solid var(--pwcp-border);
    border-radius: var(--pwcp-radius);
    /* Clear the sticky site header when "Back to top" jumps here without JS. */
    scroll-margin-top: var(--pwcp-header-offset);
}

.pw-coe-fbp .pw-coe-fbp-nav-label {
    flex: 0 0 auto;
    color: var(--pwcp-heading);
    font-family: var(--pwcp-font-body);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-right: 0.25rem;
}

/* Carousel: arrows flanking a single-row scrolling viewport. min-width: 0 lets
   the viewport shrink below its content width, which is what makes it scroll
   instead of pushing the row wider. */
.pw-coe-fbp .pw-coe-fbp-nav-carousel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pw-coe-fbp .pw-coe-fbp-nav-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    /* Don't let a horizontal swipe at either end turn into a browser back-swipe. */
    overscroll-behavior-x: contain;
    /* The arrows are the affordance here, so the native bar would only add noise. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pw-coe-fbp .pw-coe-fbp-nav-viewport::-webkit-scrollbar {
    display: none;
}

.pw-coe-fbp .pw-coe-fbp-nav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    /* Breathing room so the pill borders and focus rings aren't clipped by the
       scroll container. */
    padding: 2px;
}

.pw-coe-fbp .pw-coe-fbp-nav-list li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.pw-coe-fbp .pw-coe-fbp-nav-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--pwcp-purple);
    border-radius: 999px;
    background: #ffffff;
    color: var(--pwcp-purple);
    font-family: var(--pwcp-font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* display: inline-flex above would otherwise defeat the hidden attribute the
   script uses when everything already fits on one line. */
.pw-coe-fbp .pw-coe-fbp-nav-arrow[hidden] {
    display: none;
}

.pw-coe-fbp .pw-coe-fbp-nav-arrow:hover,
.pw-coe-fbp .pw-coe-fbp-nav-arrow:focus {
    background: var(--pwcp-purple);
    color: #ffffff;
    outline: none;
}

/* Kept in place rather than hidden at the ends, so reaching an end never shifts
   the row sideways under the cursor. */
.pw-coe-fbp .pw-coe-fbp-nav-arrow[disabled] {
    opacity: 0.3;
    cursor: default;
}

.pw-coe-fbp .pw-coe-fbp-nav-arrow[disabled]:hover,
.pw-coe-fbp .pw-coe-fbp-nav-arrow[disabled]:focus {
    background: #ffffff;
    color: var(--pwcp-purple);
}

@media (prefers-reduced-motion: reduce) {
    .pw-coe-fbp .pw-coe-fbp-nav-viewport {
        scroll-behavior: auto;
    }
}

.pw-coe-fbp .pw-coe-fbp-nav-link {
    display: inline-block;
    padding: 6px 14px;
    border: 2px solid var(--pwcp-purple);
    border-radius: 999px;
    color: var(--pwcp-purple);
    font-family: var(--pwcp-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pw-coe-fbp .pw-coe-fbp-nav-link:hover,
.pw-coe-fbp .pw-coe-fbp-nav-link:focus {
    background: var(--pwcp-purple);
    color: #ffffff;
    outline: none;
}

/* ---------- Quarter section ---------- */

.pw-coe-fbp .pw-coe-fbp-section {
    margin: 0 0 2.5rem;
}

.pw-coe-fbp .pw-coe-fbp-section-footer {
    margin-top: 1rem;
    text-align: right;
}

.pw-coe-fbp .pw-coe-fbp-back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--pwcp-purple);
    font-family: var(--pwcp-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.pw-coe-fbp .pw-coe-fbp-back-to-top:hover,
.pw-coe-fbp .pw-coe-fbp-back-to-top:focus {
    color: var(--pwcp-purple-dark);
    text-decoration: underline;
    outline: none;
}

.pw-coe-fbp .pw-coe-fbp-back-to-top-arrow {
    font-size: 15px;
    line-height: 1;
}

.pw-coe-fbp .pw-coe-fbp-quarter-heading {
    color: var(--pwcp-purple);
    font-family: var(--pwcp-font-heading);
    font-size: 22px;
    line-height: 1.3em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 0.6rem;
    /* Clear a fixed site header when a jump link scrolls to this section. */
    scroll-margin-top: var(--pwcp-header-offset);
}

.pw-coe-fbp .pw-coe-fbp-quarter-divider {
    background-color: var(--pwcp-green);
    height: 3px;
    width: 64px;
    border-radius: 3px;
    margin: 0 0 1.75rem;
}

.pw-coe-fbp .pw-coe-fbp-item {
    margin: 0 0 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--pwcp-tint);
}

.pw-coe-fbp .pw-coe-fbp-section:last-child .pw-coe-fbp-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pw-coe-fbp .pw-coe-fbp-title {
    color: var(--pwcp-green) !important;
    font-family: var(--pwcp-font-heading) !important;
    font-size: 28px !important;
    line-height: 1.25em !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 0.4rem !important;
}

.pw-coe-fbp .pw-coe-fbp-title strong {
    color: var(--pwcp-green) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

.pw-coe-fbp .pw-coe-fbp-subtitle {
    color: var(--pwcp-heading) !important;
    font-family: var(--pwcp-font-body) !important;
    font-size: 15px !important;
    line-height: 1.3em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 1.25rem !important;
}

/* ---------- Meta row (Estimate / Timeframe / Funding) ---------- */

.pw-coe-fbp .pw-coe-fbp-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.pw-coe-fbp .pw-coe-fbp-meta p {
    margin: 0;
}

/* Turn each label into an uppercase mini-label so it reads as a field name,
   distinct from its value below it. */
.pw-coe-fbp .pw-coe-fbp-meta p strong {
    display: block;
    color: var(--pwcp-heading) !important;
    font-family: var(--pwcp-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 2px;
}

/* Match the sticky header offset to its responsive min-height
   (100px desktop / 85px tablet / 65px mobile, plus a small buffer). */
@media (max-width: 1024px) {
    .pw-coe-fbp {
        --pwcp-header-offset: 97px;
    }
}

@media (max-width: 767px) {
    .pw-coe-fbp {
        --pwcp-header-offset: 77px;
    }
}

@media (max-width: 768px) {
    .pw-coe-fbp .pw-coe-fbp-meta {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.pw-coe-fbp-edit-link {
    color: black;
    text-decoration: none;
    font-size: 0.5em;
    margin-left: 12px;
    font-weight: normal;
}