/* ── Progressive Kids Summer Camps — Frontend Styles ───────────────────────
   Matched exactly to progressivekids.us stylesheet:
   - Primary blue:   #00a1ff  (headings, links, active states)
   - Dark blue:      #275372  (body text, nav hover)
   - Orange:         darkorange (buttons, CTAs)
   - Light bg:       #EAF3FB  (plan cards, info tints)
   - Header/footer:  #e8edf2
   - Font:           Roboto, sans-serif
   - Body text:      17px, line-height 32px
───────────────────────────────────────────────────────────────────────────── */

.pk-camps-wrap {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    color: #275372;
    width: 100%;
}

/* ── Location tab bar ─────────────────────────────────────────────────────── */
.pk-loc-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e3e5e5;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.pk-loc-tab {
    padding: 10px 18px;
    background: #f4f5f7;
    border: 1px solid #e3e5e5;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #275372;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: 0.3s;
    border-radius: 3px 3px 0 0;
}

.pk-loc-tab:hover {
    color: #00a1ff;
    background: #fff;
}

.pk-loc-tab.active {
    color: #00a1ff;
    background: #fff;
    border-bottom-color: #00a1ff;
    border-top-color: #00a1ff;
}

.pk-tab-count {
    background: #00a1ff;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 10px;
    font-family: verdana;
}

.pk-loc-tab.active .pk-tab-count {
    background: #275372;
}

/* ── Location panels ─────────────────────────────────────────────────────── */
.pk-loc-panel {
    display: none;
    padding-top: 16px;
}

.pk-loc-panel.active {
    display: block;
}

/* ── Location info bar ───────────────────────────────────────────────────── */
.pk-loc-info-bar {
    background: #EAF3FB;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 15px;
    color: #275372;
    line-height: 28px;
}

.pk-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pk-info-note {
    color: #4f5255;
    font-style: italic;
}

/* ── Program filter buttons ──────────────────────────────────────────────── */
.pk-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pk-filter {
    padding: 6px 16px;
    border-radius: 24px;
    border: 1px solid #ddd;
    background: #f4f5f7;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #275372;
    cursor: pointer;
    transition: 0.3s;
}

.pk-filter:hover {
    background: #e8edf2;
    color: #00a1ff;
    border-color: #00a1ff;
}

.pk-filter.active {
    background: #00a1ff;
    color: #fff;
    border-color: #00a1ff;
}

/* ── Month divider ───────────────────────────────────────────────────────── */
.pk-month-divider {
    font-size: 13px;
    font-weight: bold;
    color: #00a1ff;
    font-family: verdana;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 0 8px;
    border-bottom: 1px solid #e3e5e5;
    margin-bottom: 10px;
    margin-top: 8px;
}

/* ── Camp list ───────────────────────────────────────────────────────────── */
.pk-camp-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Camp card — matches your #summerTable row style ─────────────────────── */
.pk-camp-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid #e3e5e5;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
    box-shadow: 1px 1px #e3e5e5;
    transition: 0.3s;
}

.pk-camp-card:hover {
    border-color: #00a1ff;
    background: whitesmoke;
}

/* ── Date block ──────────────────────────────────────────────────────────── */
.pk-date-col {
    min-width: 52px;
    background: #EAF3FB;
    border-radius: 7px;
    padding: 8px 6px;
    text-align: center;
    flex-shrink: 0;
}

.pk-date-month {
    font-size: 11px;
    font-weight: bold;
    color: #00a1ff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: verdana;
}

.pk-date-day {
    font-size: 22px;
    font-weight: bolder;
    color: #275372;
    line-height: 1.1;
}

/* ── Camp info ───────────────────────────────────────────────────────────── */
.pk-camp-info {
    flex: 1;
    min-width: 0;
}

.pk-camp-title {
    font-size: 16px;
    font-weight: bold;
    color: #00a1ff;
    margin-bottom: 6px;
    line-height: 28px;
}

.pk-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* Badges — matched to your grid-container card style */
.pk-badge {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    display: inline-block;
    font-weight: bold;
    font-family: verdana;
}

.pk-b-grade  { background: #EAF3FB;  color: #275372; }
.pk-b-py     { background: #e1f5ee;  color: #085041; }
.pk-b-rb     { background: #FAEEDA;  color: #633806; }
.pk-b-web    { background: #EEEDFE;  color: #3C3489; }
.pk-b-java   { background: #FAECE7;  color: #712B13; }
.pk-b-unity  { background: #EAF3FB;  color: #0C447C; }
.pk-b-cpp    { background: #f4f5f7;  color: #4f5255; }
.pk-b-mobile { background: #FBEAF0;  color: #72243E; }

.pk-camp-dates {
    font-size: 14px;
    color: #4f5255;
    margin-bottom: 10px;
    line-height: 28px;
}

/* Register link — matches your orange button style */
.pk-reg-link {
    display: inline-block;
    background: darkorange;
    color: white !important;
    font-size: 15px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding: 8px 20px;
    border-radius: 24px;
    text-decoration: none;
    border: darkorange 2px solid;
    transition: 0.5s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.pk-reg-link:hover {
    color: darkorange !important;
    background: transparent;
    border-color: darkorange;
    transform: translateY(-2px);
}

.pk-no-camps {
    color: #4f5255;
    font-style: italic;
    padding: 1rem 0;
    line-height: 32px;
}

/* ── Responsive — matches your @media (max-width: 920px) ────────────────── */
@media only screen and (max-width: 920px) {
    .pk-camp-card {
        flex-direction: column;
        gap: 10px;
    }
    .pk-date-col {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: auto;
        padding: 6px 12px;
    }
    .pk-date-day   { font-size: 18px; }
    .pk-loc-tab    { padding: 8px 12px; font-size: 13px; }
    .pk-loc-info-bar { flex-direction: column; gap: 6px; font-size: 14px; }
    .pk-reg-link   { width: 100%; text-align: center; display: block; }
    .pk-camp-title { font-size: 15px; }
}

@media only screen and (max-width: 530px) {
    .pk-loc-tabs { flex-direction: column; border-bottom: none; }
    .pk-loc-tab  { border-radius: 4px; border: 1px solid #e3e5e5; margin-bottom: 3px; }
    .pk-loc-tab.active { border-color: #00a1ff; }
}

/* Arts and Robotics badges */
.pk-b-robotics { background: #FEF3E2; color: #7A4500; }
.pk-b-arts     { background: #FCE4EC; color: #880E4F; }

/* Raspberry Pi badge */
.pk-b-raspi { background: #FCE4D6; color: #8B1A00; }

/* ── Level / Age badges ───────────────────────────────────────────────────── */
.pk-lv-elem   { background: #FFF9C4; color: #6D5700; }
.pk-lv-junior { background: #E8F5E9; color: #1B5E20; }
.pk-lv-middle { background: #E3F2FD; color: #0D47A1; }
.pk-lv-high   { background: #F3E5F5; color: #4A148C; }
.pk-lv-block  { background: #FFF3E0; color: #E65100; }
.pk-lv-all    { background: #F5F5F5; color: #424242; }

/* ── Dual filter layout ──────────────────────────────────────────────────── */
.pk-dual-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.pk-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pk-filter-label {
    font-size: 13px;
    font-weight: bold;
    color: #275372;
    font-family: verdana;
    white-space: nowrap;
    min-width: 90px;
}

/* Level filter buttons get matching badge colors when active */
.pk-level-filter.pk-lv-elem.active   { background: #F9A825; color: #fff; border-color: #F9A825; }
.pk-level-filter.pk-lv-junior.active { background: #388E3C; color: #fff; border-color: #388E3C; }
.pk-level-filter.pk-lv-middle.active { background: #1565C0; color: #fff; border-color: #1565C0; }
.pk-level-filter.pk-lv-high.active   { background: #6A1B9A; color: #fff; border-color: #6A1B9A; }
.pk-level-filter.pk-lv-block.active  { background: #E65100; color: #fff; border-color: #E65100; }

@media only screen and (max-width: 920px) {
    .pk-filter-group  { flex-direction: column; align-items: flex-start; }
    .pk-filter-label  { min-width: auto; }
}

/* ── No upcoming camps message ───────────────────────────────────────────── */
.pk-no-camps {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #275372;
    font-family: 'Roboto', sans-serif;
}
.pk-no-camps p:first-child {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
}
.pk-no-camps p:last-child {
    font-size: 14px;
    color: #4f5255;
}

/* ── Location description card ───────────────────────────────────────────── */
.pk-loc-desc-card {
    background: #EAF3FB;
    border-left: 4px solid #00a1ff;
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.pk-loc-desc-text {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #275372;
    line-height: 1.75;
    margin: 0 0 14px;
}
.pk-loc-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}
.pk-loc-meta-item {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #275372;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pk-loc-note {
    background: #fff;
    border: 1px solid #b5d4f4;
    border-radius: 6px;
    padding: 9px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #4f5255;
    line-height: 1.6;
}
@media only screen and (max-width: 920px) {
    .pk-loc-desc-card { padding: 14px 16px; }
    .pk-loc-meta-row  { flex-direction: column; gap: 8px; }
}