/* =============================================================================
   PICKLEBALL REGISTRATION THEME — MAIN STYLESHEET
   All colour/style values driven by CSS custom properties.
   Defaults are overridden by the inline <style> block from pb_output_customizer_css().
   ============================================================================= */

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* ── Fallback design tokens (all overridden by Customizer PHP output) ─────── */
:root {
    --pb-primary:             #C8FF00;
    --pb-secondary:           #0F0F1A;
    --pb-accent:              #FF8A3D;
    --pb-bg:                  #F0F4F8;
    --pb-text:                #0F0F1A;
    --pb-heading-font:        'Bebas Neue', sans-serif;
    --pb-body-font:           'Mulish', sans-serif;
    --pb-booking-columns:     3;
    --pb-col-count:           4;
    --hero-overlay-opacity:   0.55;

    /* Header & nav */
    --pb-header-bg:           #0F0F1A;
    --pb-header-border:       #C8FF00;
    --pb-header-text:         #FFFFFF;
    --pb-nav-text:            #999999;
    --pb-nav-hover:           #C8FF00;

    /* Booking section */
    --pb-card-bg:             #FFFFFF;
    --pb-card-text:           #0F0F1A;
    --pb-button-bg:           #0F0F1A;
    --pb-button-text:         #FFFFFF;
    --pb-button-hover-bg:     #C8FF00;
    --pb-button-hover-text:   #0F0F1A;

    /* Footer */
    --pb-footer-bg:           #0F0F1A;
    --pb-footer-text:         #888888;
    --pb-footer-link:         #C8FF00;

    /* System */
    --pb-radius:              4px;
    --pb-radius-lg:           14px;
    --pb-shadow:              0 2px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
    --pb-shadow-hover:        0 8px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07);
    --pb-transition:          0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --pb-max-width:           1360px;
    --pb-gap:                 1.25rem;
    --pb-header-height:       72px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    font-family:             var(--pb-body-font);
    background-color:        var(--pb-bg);
    color:                   var(--pb-text);
    line-height:             1.65;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--pb-heading-font);
    line-height:    1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ── Container ────────────────────────────────────────────────────────────── */
.pb-container {
    max-width: var(--pb-max-width);
    margin:    0 auto;
    padding:   0 2rem;
}

/* ── Skip link ────────────────────────────────────────────────────────────── */
.pb-skip-link {
    position:     absolute;
    top:          -999px;
    left:         1rem;
    z-index:      9999;
    background:   var(--pb-primary);
    color:        var(--pb-secondary);
    padding:      .5rem 1rem;
    font-weight:  700;
    font-size:    .875rem;
    border-radius: var(--pb-radius);
}
.pb-skip-link:focus { top: 1rem; }

/* =============================================================================
   HEADER
   ============================================================================= */
.pb-header {
    position:      sticky;
    top:           0;
    z-index:       200;
    background:    var(--pb-header-bg);
    border-bottom: 3px solid var(--pb-header-border);
    transition:    box-shadow var(--pb-transition);
}
.pb-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.35); }

.pb-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          var(--pb-header-height);
    gap:             1.5rem;
}

.pb-header__logo {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    flex-shrink: 0;
}
.pb-header__logo img  { height: 44px; width: auto; }
.pb-header__site-name {
    font-family:    var(--pb-heading-font);
    font-size:      1.75rem;
    letter-spacing: .08em;
    color:          var(--pb-header-text);
    white-space:    nowrap;
}

/* Nav */
.pb-nav { display: flex; align-items: center; flex: 1; justify-content: flex-end; }
.pb-nav__list { display: flex; align-items: center; }

.pb-nav__list li a {
    display:        block;
    padding:        0 1.125rem;
    font-size:      .8125rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--pb-nav-text);
    line-height:    var(--pb-header-height);
    transition:     color var(--pb-transition);
    white-space:    nowrap;
}
.pb-nav__list li a:hover,
.pb-nav__list li.current-menu-item > a,
.pb-nav__list li.current_page_item > a { color: var(--pb-nav-hover); }

/* Cart link */
.pb-cart-link {
    display:        flex;
    align-items:    center;
    gap:            .375rem;
    padding:        .5rem .75rem;
    color:          var(--pb-nav-text);
    font-size:      .8125rem;
    font-weight:    600;
    letter-spacing: .06em;
    transition:     color var(--pb-transition);
}
.pb-cart-link:hover { color: var(--pb-nav-hover); }

.pb-cart-count {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       18px;
    height:          18px;
    padding:         0 4px;
    background:      var(--pb-primary);
    color:           var(--pb-secondary);
    font-size:       .7rem;
    font-weight:     800;
    border-radius:   999px;
    line-height:     1;
}

.pb-header__actions { display: flex; align-items: center; gap: .25rem; }

/* Mobile toggle */
.pb-menu-toggle {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    padding:         .5rem;
    background:      none;
    border:          none;
    width:           40px;
    height:          40px;
}
.pb-menu-toggle__bar {
    display:       block;
    width:         24px;
    height:        2px;
    background:    var(--pb-header-text);
    border-radius: 2px;
    transition:    transform var(--pb-transition), opacity var(--pb-transition);
}
.pb-menu-toggle[aria-expanded="true"] .pb-menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pb-menu-toggle[aria-expanded="true"] .pb-menu-toggle__bar:nth-child(2) { opacity: 0; }
.pb-menu-toggle[aria-expanded="true"] .pb-menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================================
   HERO
   ============================================================================= */
.pb-hero {
    position:    relative;
    min-height:  520px;
    display:     flex;
    align-items: center;
    overflow:    hidden;
}
.pb-hero__bg {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center top;
    background-repeat:   no-repeat;
}
.pb-hero__overlay {
    position:   absolute;
    inset:      0;
    background: var(--pb-hero-bg-color, var(--pb-secondary));
    opacity:    var(--hero-overlay-opacity, .55);
}
.pb-hero__content {
    position: relative;
    z-index:  2;
    padding:  5rem 2rem;
}
.pb-hero__headline {
    font-family:   var(--pb-heading-font);
    font-size:     clamp(3.25rem, 8.5vw, 7.5rem);
    color:         #fff;
    line-height:   .93;
    letter-spacing: .03em;
    margin-bottom: 1.25rem;
    max-width:     820px;
}
.pb-hero__subheadline {
    font-size:     1.05rem;
    color:         rgba(255,255,255,.78);
    max-width:     520px;
    margin-bottom: 2.25rem;
    line-height:   1.7;
}
.pb-hero__cta {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    padding:        .875rem 1.875rem;
    background:     var(--pb-primary);
    color:          var(--pb-secondary);
    font-weight:    800;
    font-size:      .8125rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius:  var(--pb-radius);
    transition:     transform var(--pb-transition), box-shadow var(--pb-transition);
}
.pb-hero__cta:hover {
    transform:  translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
}

/* =============================================================================
   LEVEL COLUMNS
   ============================================================================= */
.pb-levels__grid {
    display:               grid;
    grid-template-columns: repeat(var(--pb-col-count, 4), 1fr);
}
.pb-level-col {
    position:       relative;
    padding:        3rem 2rem 2.5rem;
    background:     var(--col-bg, #4ECDC4);
    color:          var(--col-text, #0F0F1A);
    cursor:         pointer;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    min-height:     360px;
    user-select:    none;
    outline:        none;
}
.pb-level-col::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     rgba(0,0,0,0);
    transition:     background var(--pb-transition);
    pointer-events: none;
}
.pb-level-col:hover::before  { background: rgba(0,0,0,.08); }
.pb-level-col.active::before { background: rgba(0,0,0,.15); }
.pb-level-col::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    right:            0;
    height:           5px;
    background:       var(--pb-secondary);
    transform:        scaleX(0);
    transform-origin: center;
    transition:       transform var(--pb-transition);
}
.pb-level-col.active::after    { transform: scaleX(1); }
.pb-level-col:focus-visible {
    outline:        4px solid var(--pb-secondary);
    outline-offset: -4px;
    z-index:        1;
}
.pb-level-col__icon {
    width:         68px;
    height:        68px;
    margin-bottom: 1.375rem;
    opacity:       .85;
    transition:    opacity var(--pb-transition), transform var(--pb-transition);
}
.pb-level-col:hover .pb-level-col__icon,
.pb-level-col.active .pb-level-col__icon { opacity: 1; transform: scale(1.06); }
.pb-level-col__icon img { width: 100%; height: 100%; object-fit: contain; }
.pb-level-col__icon svg { width: 100%; height: 100%; }
.pb-level-col__number {
    font-family:    var(--pb-body-font);
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity:        .5;
    margin-bottom:  .4rem;
}
.pb-level-col__title {
    font-family:    var(--pb-heading-font);
    font-size:      2.375rem;
    letter-spacing: .03em;
    margin-bottom:  .875rem;
    line-height:    1;
}
.pb-level-col__desc {
    font-size:  .875rem;
    line-height: 1.6;
    opacity:    .8;
    max-width:  200px;
    flex-grow:  1;
}
.pb-level-col__arrow {
    margin-top:  auto;
    padding-top: 1.5rem;
    font-size:   1.25rem;
    opacity:     0;
    transform:   translateY(-4px);
    transition:  opacity var(--pb-transition), transform var(--pb-transition);
}
.pb-level-col:hover .pb-level-col__arrow,
.pb-level-col.active .pb-level-col__arrow { opacity: .75; transform: translateY(0); }

/* =============================================================================
   BOOKING SECTION
   ============================================================================= */
.pb-booking {
    padding:           5rem 0 6rem;
    scroll-margin-top: var(--pb-header-height);
    background:        var(--pb-bg);
}
.pb-booking__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   2.75rem;
    flex-wrap:       wrap;
    gap:             1rem;
}
.pb-booking__title {
    font-family:    var(--pb-heading-font);
    font-size:      clamp(2rem, 4vw, 3.75rem);
    letter-spacing: .03em;
}
.pb-booking__filter-info { display: flex; align-items: center; gap: .75rem; }

.pb-booking__active-filter {
    display:        none;
    align-items:    center;
    gap:            .4rem;
    padding:        .35rem .875rem;
    background:     var(--pb-secondary);
    color:          #fff;
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius:  999px;
}
.pb-booking__active-filter.visible { display: inline-flex; }

.pb-booking__reset {
    display:        none;
    padding:        .35rem .875rem;
    background:     transparent;
    border:         2px solid var(--pb-secondary);
    color:          var(--pb-secondary);
    font-family:    var(--pb-body-font);
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius:  999px;
    transition:     background var(--pb-transition), color var(--pb-transition);
}
.pb-booking__reset.visible { display: block; }
.pb-booking__reset:hover { background: var(--pb-secondary); color: #fff; }

/* List container */
.pb-slot-list {
    display:       flex;
    flex-direction: column;
    border-radius: var(--pb-radius-lg);
    overflow:      hidden;
    box-shadow:    var(--pb-shadow);
}

.pb-booking__empty,
.pb-booking__no-products {
    display:       none;
    text-align:    center;
    padding:       4rem 2rem;
    color:         rgba(15,15,26,.4);
    font-size:     .95rem;
    background:    var(--pb-card-bg);
    border-radius: var(--pb-radius-lg);
}
.pb-booking__no-products { display: block; }

/* =============================================================================
   SLOT ROW  (replaces booking card grid)
   ============================================================================= */
@keyframes pbRowReveal {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0);    }
}

.pb-slot-row {
    display:       flex;
    align-items:   center;
    gap:           1.5rem;
    padding:       1.25rem 1.5rem;
    background:    var(--pb-card-bg);
    color:         var(--pb-card-text);
    border-bottom: 1px solid rgba(0,0,0,.06);
    border-left:   5px solid var(--card-accent, var(--pb-primary));
    transition:    background var(--pb-transition);
    animation:     pbRowReveal .25s ease both;
    text-decoration: none;
}
.pb-slot-row:last-child          { border-bottom: none; }
.pb-slot-row:hover               { background: rgba(0,0,0,.025); }
.pb-slot-row[aria-hidden="true"] { display: none; }

.pb-slot-row__body {
    flex:      1;
    min-width: 0;
}

.pb-slot-row__title {
    font-family:    var(--pb-heading-font);
    font-size:      1.5rem;
    letter-spacing: .02em;
    line-height:    1.1;
    color:          var(--pb-card-text);
    margin-bottom:  .4rem;
}

.pb-slot-row__date {
    display:        inline-block;
    margin-bottom:  .5rem;
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          var(--card-accent, var(--pb-primary));
    background:     rgba(0,0,0,.045);
    padding:        .15rem .5rem;
    border-radius:  var(--pb-radius);
    filter:         saturate(.8) brightness(.8);
}

.pb-slot-row__meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       .4rem 1.25rem;
    font-size: .8125rem;
    opacity:   .65;
    color:     var(--pb-card-text);
}
.pb-slot-row__meta-item {
    display:     flex;
    align-items: center;
    gap:         .35rem;
}
.pb-slot-row__meta-item svg { flex-shrink: 0; opacity: .55; }

.pb-slot-row__actions {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-end;
    justify-content: center;
    gap:             .5rem;
    flex-shrink:     0;
    min-width:       120px;
    text-align:      right;
}

.pb-slot-row__price {
    font-family:    var(--pb-heading-font);
    font-size:      1.75rem;
    letter-spacing: .02em;
    line-height:    1;
    color:          var(--pb-card-text);
}

.pb-slot-row__spots {
    font-size:      .7rem;
    font-weight:    800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.pb-slot-row__spots.in-stock { color: #16a34a; }
.pb-slot-row__spots.sold-out { color: #dc2626; }

.pb-slot-row__sold-out-label {
    font-size:      .72rem;
    font-weight:    800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          #dc2626;
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.pb-footer {
    background:  var(--pb-footer-bg);
    color:       var(--pb-footer-text);
    padding:     3rem 0;
    border-top:  3px solid rgba(255,255,255,.06);
}
.pb-footer__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             1.5rem;
}
.pb-footer__logo img { height: 36px; width: auto; opacity: .7; }
.pb-footer__name {
    font-family:    var(--pb-heading-font);
    font-size:      1.375rem;
    color:          var(--pb-footer-text);
    letter-spacing: .06em;
}
.pb-footer__contact {
    display:     flex;
    gap:         1.75rem;
    flex-wrap:   wrap;
    align-items: center;
}
.pb-footer__contact a {
    display:     flex;
    align-items: center;
    gap:         .45rem;
    font-size:   .85rem;
    font-weight: 600;
    color:       var(--pb-footer-text);
    transition:  color var(--pb-transition);
}
.pb-footer__contact a:hover { color: var(--pb-footer-link); }
.pb-footer__text { font-size: .78rem; color: var(--pb-footer-text); opacity: .6; }

/* =============================================================================
   PAGE / POST TEMPLATES
   ============================================================================= */
.pb-page-content { padding: 5rem 0; }
.pb-page-content .entry-title {
    font-family:   var(--pb-heading-font);
    font-size:     clamp(2.5rem, 5vw, 5rem);
    margin-bottom: 2rem;
}
.pb-page-content .entry-content { max-width: 720px; font-size: 1rem; line-height: 1.75; }
.pb-page-content .entry-content p  { margin-bottom: 1.25rem; }
.pb-page-content .entry-content h2,
.pb-page-content .entry-content h3 { margin: 2rem 0 .75rem; }

/* WC cart/checkout wrapper */
.pb-wc-page    { padding: 4rem 2rem; }
.pb-wc-content { max-width: 900px; margin: 0 auto; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
    .pb-levels__grid  { grid-template-columns: repeat(min(var(--pb-col-count,4),2),1fr); }
}

@media (max-width: 768px) {
    .pb-menu-toggle { display: flex; }
    .pb-nav {
        position:       absolute;
        top:            calc(var(--pb-header-height) + 3px);
        left:           0;
        right:          0;
        background:     var(--pb-header-bg);
        border-top:     1px solid rgba(255,255,255,.08);
        flex-direction: column;
        align-items:    stretch;
        max-height:     0;
        overflow:       hidden;
        transition:     max-height .3s ease;
    }
    .pb-nav.open { max-height: 480px; }
    .pb-nav__list { flex-direction: column; }
    .pb-nav__list li a {
        line-height: 1;
        padding:     1rem 1.5rem;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .pb-hero { min-height: 380px; }
    .pb-hero__content { padding: 3rem 2rem; }
    .pb-levels__grid  { grid-template-columns: repeat(2,1fr); }
    .pb-level-col     { min-height: 280px; padding: 2rem 1.25rem; }
    .pb-level-col__title { font-size: 1.75rem; }
    .pb-booking       { padding: 3rem 0 4rem; }
}

@media (max-width: 480px) {
    :root { --pb-header-height: 60px; }
    .pb-container     { padding: 0 1rem; }
    .pb-levels__grid  { grid-template-columns: 1fr; }
    .pb-footer__inner { flex-direction: column; align-items: flex-start; }
    .pb-footer__text  { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}