/* Pudding Club evening look, loaded only by the Pudding Club page on top of
   pudding-club.css. That file is also the shared theme for About Sarah,
   Forest School, Alternative Provision and the training pages, so the
   Pudding Club changes live here, scoped under .pc-evening.
   Matches the Facebook posts: Caprasimo title, Reenie Beanie handwriting,
   charcoal and amber, photos with a sharp edge and an amber rule. */

.pc.pc-evening {
    --pc-green: #1e1b18;          /* charcoal: panels, buttons, bullets */
    --pc-green-dark: #1e1b18;     /* headings on cream */
    --pc-cream: #f4ede0;
    --pc-ink: #2b2620;
    --pc-muted: #6e6458;
    --pc-amber: #f0b25c;          /* on charcoal */
    --pc-ember: #a9561c;          /* on cream, where amber is too pale to read */

    --pc-display: 'Caprasimo', Georgia, serif;
    --pc-hand: 'Reenie Beanie', cursive;
    --pc-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* the site's Bootstrap theme sets its own heading font */
.pc-evening h3 {
    font-family: var(--pc-body);
}

/* Caprasimo has one weight; 700 makes the browser fake a heavier one */
.pc-evening .pc-display {
    font-weight: 400;
}

/* ---------- Top: photo, amber rule, charcoal masthead ---------- */
.pce-hero {
    margin: 0;
    background: var(--pc-green);
    line-height: 0;
}

.pce-hero img {
    display: block;
    width: 100%;
    height: clamp(300px, 62vh, 640px);
    object-fit: cover;
    object-position: center 22%;
}

.pce-masthead {
    background: var(--pc-green);
    color: var(--pc-cream);
    border-top: 5px solid var(--pc-amber);
    text-align: center;
    padding: 2.2rem 1.4rem 3rem;
}

.pce-title {
    font-family: var(--pc-display);
    font-weight: 400;
    font-size: clamp(3.2rem, 12vw, 6.2rem);
    line-height: 1;
    color: var(--pc-cream);
    margin: 0;
}

.pce-strap {
    font-family: var(--pc-hand);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.1;
    color: var(--pc-amber);
    margin: 0.3rem 0 1.4rem;
}

.pce-when {
    font-size: 1.15rem;
    margin: 0 0 1.6rem;
}

/* ---------- Sections ---------- */
.pc-evening .pc-intro {
    padding: 4rem 0 2.5rem;
}

/* Reenie Beanie only reads well in short lower-case lines, so full sentences use the title face */
.pc-evening .pc-lead {
    font-family: var(--pc-display);
    font-size: clamp(1.4rem, 3.6vw, 1.75rem);
    color: var(--pc-ember);
    line-height: 1.3;
}

.pc-evening .pc-panel {
    border-radius: 0;
    border-top: 5px solid var(--pc-amber);
}

.pc-evening .pc-panel + .pc-panel {
    border-top: none;
}

.pc-evening .pc-time {
    color: var(--pc-amber);
    font-size: 2.4rem;
}

.pc-evening .pc-list li {
    border-bottom-color: rgba(30, 27, 24, 0.14);
}

.pc-evening .pc-list li::before {
    background: var(--pc-ember);
}

.pc-evening .pc-price-big {
    font-family: var(--pc-display);
    font-size: clamp(2.8rem, 10vw, 4.2rem);
    color: var(--pc-amber);
}

/* ---------- Buttons ---------- */
.pc-evening .pc-submit {
    background: var(--pc-amber);
    color: var(--pc-green);
    font-family: var(--pc-body);
    font-weight: 800;
    font-size: 1.15rem;
    border-radius: 999px;
    padding: 0.85rem 2.2rem;
}

.pc-evening .pc-submit:hover,
.pc-evening .pc-submit:focus {
    background: #f6c886;
    color: var(--pc-green);
}

.pc-evening .pc-register .pc-submit {
    background: var(--pc-green);
    color: var(--pc-cream);
}

.pc-evening .pc-register .pc-submit:hover,
.pc-evening .pc-register .pc-submit:focus {
    background: #3a342e;
    color: var(--pc-cream);
}

.pce-handbook {
    margin: 1.6rem 0 0;
}

.pce-handbook a {
    color: var(--pc-ember);
    font-weight: 700;
    text-decoration: underline;
}

.pc-evening .pc-faq-cta a {
    font-family: var(--pc-body);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--pc-amber);
    border-bottom-color: rgba(240, 178, 92, 0.6);
}

/* ---------- Photos from the woods ---------- */
.pce-photos {
    padding: 4.5rem 0 1rem;
}

.pce-photos .pc-display {
    color: var(--pc-green-dark);
    font-size: clamp(2rem, 6vw, 2.6rem);
    text-align: center;
    margin-bottom: 1.6rem;
}

.pc-evening .sess-gallery img {
    border-radius: 6px;
}

@media (min-width: 768px) {
    .pce-masthead {
        padding: 2.6rem 1.4rem 3.4rem;
    }
}