/*
 * Redesign (branch "redesign"): the new brand on top of style.css.
 * Brand: orange #EC681A, brown #562C2C, cream #F5DFBB (+ light cream #FBF1E1 for big areas).
 * Font: TT Commons (Figtree stands in until it is licensed).
 * The logo, lines, stickers and badges in assets/images/brand are the designer's own artwork
 * (see docs/design/brand/README.md): never redraw them.
 * WooCommerce is only re-coloured here (its own variables and buttons); nothing structural.
 */

:root {
    --pp-orange: #EC681A;
    --pp-orange-dark: #C9520D;
    --pp-brown: #562C2C;
    --pp-cream: #F5DFBB;
    --pp-cream-light: #FBF1E1;
    --pp-line: #EFDDC2;
    --pp-muted: #735A5A;
    --pp-text: #3E2626;
    --pp-heading: #562C2C;
    --pp-link: #C9520D;
    --pp-grey: #562C2C;
    --pp-grey-dark: #562C2C;
    --pp-font: 'TT Commons Pro', 'Figtree', Arial, sans-serif;
}

body {
    font-family: var(--pp-font);
    color: var(--pp-text);
    line-height: 1.55;
    --wc-primary: #EC681A;
    --wc-primary-text: #fff;
}
a { color: var(--pp-link); }
a:hover { color: var(--pp-brown); }
h1, h2, h3, h4 { color: var(--pp-heading); font-weight: 800; line-height: 1.15; }

/* ---------- Header: white, script logo, orange "Book a course" ---------- */

.pp-nav { background: #fff; color: var(--pp-brown); border-bottom: 1px solid var(--pp-line); }
.pp-nav__inner { min-height: 4.5rem; padding: 0 1.5rem; }
.pp-nav__logo img { width: auto; height: 3rem; }
.pp-menu a, .pp-account a { color: var(--pp-brown); font-weight: 600; height: 4.5rem; }
.pp-menu a:hover, .pp-menu a:focus,
.pp-account a:hover, .pp-account a:focus,
.pp-menu .current-menu-item > a,
.pp-menu .current-menu-parent > a,
.pp-menu .current-menu-ancestor > a,
.pp-menu .current_page_item > a,
.pp-menu .current_page_parent > a,
.pp-menu .current_page_ancestor > a,
.pp-menu li:focus-within > a,
.pp-menu li:hover > a { background: transparent; color: var(--pp-orange-dark); }
.pp-menu .sub-menu {
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    padding: .5rem 0;
    box-shadow: 0 12px 28px rgba(86, 44, 44, .12);
}
.pp-menu .sub-menu a:hover { background: var(--pp-cream-light); }
.pp-book {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: 999px;
    background: var(--pp-orange);
    color: #fff;
    font-weight: 800;
}
.pp-book:hover, .pp-book:focus { background: var(--pp-orange-dark); color: #fff; }
.pp-basket__count { background: var(--pp-orange); color: #fff; }
.pp-nav__toggle { color: var(--pp-brown); }

@media (max-width: 959px) {
    .pp-nav__inner { min-height: 3.75rem; padding: 0 .25rem 0 .875rem; }
    .pp-nav__logo img { width: auto; height: 2.5rem; }
    .pp-book { height: 2.5rem; padding: 0 1rem; }
    .pp-nav__panel { background: #fff; border-top: 1px solid var(--pp-line); }
    .pp-account { border-top-color: var(--pp-line); }
    .pp-menu a, .pp-account a { height: auto; }
    .pp-menu a:hover, .pp-account a:hover { background: var(--pp-cream-light); }
}

/* ---------- Footer: brown, the designer's lines and the cream logo ---------- */

.pp-footer { background: var(--pp-brown); color: var(--pp-cream); padding: 0 0 2.5rem; margin-top: 3rem; }
/* ".pp-footer" in front so it beats WooCommerce's ".woocommerce-page img { max-width: 100% }" on shop and My account pages */
.pp-footer .pp-footer__lines { display: block; width: 100%; max-width: 36rem; height: auto; }
.pp-footer__inner { max-width: 80rem; padding: .5rem 1.5rem 0; align-items: flex-end; }
.pp-footer__brand img { display: block; height: 3.5rem; width: auto; margin-bottom: .5rem; }
.pp-footer__brand p { margin: 0; }
.pp-footer a { color: var(--pp-cream); }
.pp-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.pp-footer__copy { font-size: .875rem; opacity: .8; }
@media (max-width: 767px) { .pp-footer__inner { align-items: flex-start; padding: .5rem 1rem 0; } }

/* ---------- Existing pages: one light cream instead of peach / lilac / mint bands ---------- */

.pp-band--orange, .pp-band--green, .pp-band--purple, .pp-band--blue { background: var(--pp-cream-light); }
.pp-band--solid.pp-band--orange, .pp-band--solid.pp-band--green,
.pp-band--solid.pp-band--purple, .pp-band--solid.pp-band--blue { background: var(--pp-cream-light); }
.pp-band { padding: 2.5rem 0; }
.pp-band h2 { margin-bottom: 1.5rem; }
.pp-lead { color: var(--pp-muted); }
/* Course pages: light cream instead of the old full-orange page (inline colour set by the template) */
.pp-course { background-color: var(--pp-cream-light) !important; text-align: left; }
.pp-course__inner { max-width: 44rem; }
.pp-course, .pp-course__title, .pp-course__intro.content-styles,
.pp-course__intro.content-styles p, .pp-course__intro.content-styles li,
.pp-course__intro.content-styles h2, .pp-course__intro.content-styles h3 { color: var(--pp-text) !important; }
.pp-course__title { color: var(--pp-brown) !important; }
.pp-course__intro.content-styles a { color: var(--pp-link) !important; }
.pp-button { border-radius: 999px; box-shadow: none; font-weight: 800; }
.pp-button--white { background: var(--pp-orange); color: #fff; }
.pp-button--white:hover { background: var(--pp-orange-dark); color: #fff; }
.pp-course-links a { border-color: var(--pp-line); border-radius: 999px; color: var(--pp-brown); }
.pp-course-links a:hover { background: var(--pp-cream-light); color: var(--pp-brown); }
.pp-quote__star { color: var(--pp-orange); }
.pp-tile--orange, .pp-tile--green, .pp-tile--blue, .pp-tile--purple { background: var(--pp-orange); }

.content-styles h1, .content-styles h2, .content-styles h3, .content-styles h4,
.content-styles h5, .content-styles h6 { color: var(--pp-brown); font-weight: 800; }
.content-styles p, .content-styles ul, .content-styles ol { color: var(--pp-text); }
.content-styles img { border-radius: 20px; }
/* Photos in pages (e.g. the instructors on Meet the Team): never taller than most of the screen,
   centred. Wide photos are rarely affected; tall portrait photos shrink to fit on a laptop. */
.content-styles .wp-block-image img { width: auto; max-width: 100%; max-height: min(70vh, 560px); margin-left: auto; margin-right: auto; }
/* Meet the Team: each instructor's words wrap to about the width of their photo, still centred. */
.pp-page--meet-the-team .content-styles p.has-text-align-center { max-width: min(53vh, 27rem); margin-left: auto; margin-right: auto; }
.content-styles blockquote { border-left-color: var(--pp-orange); color: var(--pp-text); }

/* WooCommerce buttons in brand colours (only colours and shape) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
    background: var(--pp-orange);
    color: #fff;
    border-radius: 999px;
    font-weight: 800;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--pp-orange-dark); color: #fff; }

/* ---------- Shared pieces ---------- */

.pp-wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.pp-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-brown); margin: 0; }
.pp-hl { color: var(--pp-orange); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--pp-line); border-radius: 999px;
    padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--pp-text); text-decoration: none;
}
a.pp-chip:hover { border-color: var(--pp-orange); color: var(--pp-brown); }
.pp-chip i { font-style: normal; font-weight: 800; color: var(--pp-orange-dark); }
/* Home hero: the price chip on its own line, the three short chips together below it */
.pp-chips__break { flex-basis: 100%; height: 0; margin-top: -8px; }
/* Phone: hero chips a touch smaller so "Indoors" fits beside the price chip (Ed, 6 Oct 2026) */
@media (max-width: 899px) {
    .pp-h-hero .pp-chips { gap: 6px; }
    .pp-h-hero .pp-chips__break { margin-top: -6px; }
    .pp-h-hero .pp-chip { font-size: 13px; padding: 5px 10px; gap: 5px; }
}
@media (max-width: 379px) { .pp-h-hero .pp-chip { font-size: 12.5px; padding: 5px 9px; } }
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 26px; border-radius: 999px;
    background: var(--pp-orange); color: #fff; font-size: 17px; font-weight: 800; text-decoration: none;
}
.pp-btn:hover, .pp-btn:focus { background: var(--pp-orange-dark); color: #fff; }
.pp-btn--ghost { background: #fff; color: var(--pp-brown); border: 2px solid var(--pp-brown); }
.pp-btn--ghost:hover, .pp-btn--ghost:focus { background: var(--pp-cream-light); color: var(--pp-brown); }
.pp-photo { display: block; width: 100%; object-fit: cover; border-radius: 20px; }
.pp-card { background: #fff; border: 1px solid var(--pp-line); border-radius: 16px; }
.pp-lines { display: block; width: 100%; height: auto; }
.pp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pp-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.pp-ticks svg { flex: 0 0 22px; margin-top: 1px; }
.pp-ticks b { color: var(--pp-brown); }
.pp-ticks span span { color: var(--pp-muted); }

/* ---------- Home page ---------- */

.home .pp-footer { margin-top: 0; }
.pp-h-hero { background: var(--pp-cream-light); padding: 16px 0 24px; }
.pp-h-hero__grid { display: grid; gap: 18px; }
.pp-h-hero__photo { position: relative; }
.pp-h-hero__photo .pp-photo { aspect-ratio: 358 / 220; object-position: 65% 30%; }
.pp-h-hero__sticker { position: absolute; right: -8px; bottom: -48px; width: 125px; height: 125px; filter: drop-shadow(0 6px 14px rgba(86,44,44,.2)); }
.pp-h-hero h1 { font-size: 31px; margin: 6px 0 0; }
.pp-h-hero__intro { font-size: 16px; color: var(--pp-muted); margin: 8px 0 12px; }
.pp-h-hero .pp-btn { width: 100%; margin-top: 16px; }
.pp-h-hero__adults { text-align: center; margin: 12px 0 0; font-size: 15px; }
.pp-h-hero__adults a { color: var(--pp-brown); font-weight: 700; }

.pp-h-trust { padding: 8px 0 28px; }
.pp-h-trust .pp-lines { margin: 0 0 8px; }

.pp-h-sec { padding: 28px 0; }
.pp-h-sec--cream { background: var(--pp-cream-light); }
.pp-h-sec h2 { font-size: 24px; margin: 0; }
.pp-h-sec__intro { color: var(--pp-muted); font-size: 15px; margin: 6px 0 0; }
.pp-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: step; }
.pp-steps li { display: flex; gap: 14px; align-items: flex-start; counter-increment: step; }
.pp-steps li::before {
    content: counter(step); flex: 0 0 36px; height: 36px; border-radius: 50%;
    background: var(--pp-orange); color: #fff; font-weight: 800; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}
.pp-steps h3 { font-size: 17px; margin: 0; }
.pp-steps p { font-size: 15px; color: var(--pp-muted); margin: 2px 0 0; line-height: 1.45; }
.pp-h-how__photos { display: grid; gap: 14px; margin-top: 20px; }
.pp-h-how__photos .pp-photo { aspect-ratio: 358 / 200; }
.pp-h-how__photos .pp-photo--small { display: none; }

.pp-h-venues .pp-chips { margin-top: 14px; }
.pp-h-venues .pp-btn { margin-top: 16px; width: 100%; }

.pp-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--pp-brown); margin-top: 6px; text-decoration: none; }
/* Review stars in gold, like Google's, so they read instantly as a rating */
.pp-stars { color: #F2A900; letter-spacing: 1px; }
/* Home hero: star rating under the main button */
.pp-h-hero__rating { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--pp-brown); text-decoration: none; }
.pp-h-hero__rating .pp-stars { font-size: 20px; letter-spacing: 2px; }
.pp-h-hero__rating:hover { color: var(--pp-brown); }
.pp-h-hero__rating:hover > span:last-child { text-decoration: underline; }
@media (min-width: 900px) {
    .pp-h-hero__rating { justify-content: flex-start; margin-top: 18px; font-size: 16px; }
    .pp-h-hero__rating .pp-stars { font-size: 22px; }
}
.pp-reviews { display: flex; gap: 16px; margin: 14px -1rem 0; padding: 0 1rem 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.pp-reviews::-webkit-scrollbar { display: none; }
.pp-reviews:focus-visible { outline: 2px solid var(--pp-brown); outline-offset: 4px; }
.pp-review { flex: 0 0 82%; max-width: 340px; padding: 18px; scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; }
.pp-review blockquote { flex: 1; }
.pp-review figcaption span { font-weight: 400; color: var(--pp-muted); }
.pp-carousel__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.pp-carousel__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--pp-brown); background: #fff; color: var(--pp-brown); cursor: pointer; }
.pp-carousel__btn:hover:not(:disabled), .pp-carousel__btn:focus-visible { background: var(--pp-brown); color: #fff; }
.pp-carousel__btn:disabled { opacity: .3; cursor: default; }
.pp-review blockquote { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.pp-review figcaption { font-size: 14px; font-weight: 700; margin-top: 8px; color: var(--pp-brown); }

.pp-h-team .pp-photo { aspect-ratio: 358 / 200; margin-top: 14px; }
.pp-h-team p { font-size: 15px; color: var(--pp-muted); margin: 12px 0 0; }
.pp-h-team a { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--pp-brown); }

/* Phones: a slim "£155 · one payment [Book a course]" bar stays at the bottom */
.pp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border-top: 1px solid var(--pp-line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(0,0,0,.08);
}
.pp-sticky { transition: transform .25s ease; }
.pp-sticky.is-hidden { transform: translateY(110%); }
.pp-sticky p { margin: 0; font-size: 15px; line-height: 1.2; }
.pp-sticky b { font-size: 18px; color: var(--pp-brown); }
.pp-sticky small { color: var(--pp-muted); font-size: 13px; }
.pp-sticky .pp-btn { min-height: 48px; }
.pp-has-sticky .pp-footer { padding-bottom: 6rem; }

/* Computers */
@media (min-width: 900px) {
    .pp-wrap { padding: 0 3rem; }
    .pp-h-hero { padding: 56px 0; }
    .pp-h-hero__grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
    .pp-h-hero__photo { order: 2; }
    .pp-h-hero__photo .pp-photo { aspect-ratio: auto; height: 420px; border-radius: 28px; }
    .pp-h-hero__sticker { left: -72px; right: auto; bottom: -66px; width: 188px; height: 188px; }
    .pp-h-hero h1 { font-size: 56px; margin-top: 10px; }
    .pp-h-hero__intro { font-size: 20px; margin: 16px 0 18px; }
    .pp-h-hero .pp-chip { font-size: 15px; }
    .pp-h-hero__actions { display: flex; gap: 14px; align-items: center; margin-top: 26px; }
    .pp-h-hero .pp-btn { width: auto; margin: 0; }
    .pp-h-hero__adults { display: none; }
    .pp-h-trust { padding: 10px 0 36px; border-bottom: 1px solid var(--pp-line); }
    .pp-h-trust .pp-ticks { grid-template-columns: repeat(4, 1fr); gap: 28px; }
    .pp-h-trust .pp-ticks li { font-size: 15px; }
    .pp-h-trust .pp-ticks b { font-size: 17px; }
    .pp-h-sec { padding: 64px 0; }
    .pp-h-sec h2 { font-size: 36px; }
    .pp-h-sec__intro { font-size: 18px; }
    .pp-h-how .pp-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
    .pp-steps { gap: 22px; margin-top: 24px; }
    .pp-h-how__photos { grid-template-columns: 1fr 1fr; margin-top: 0; }
    .pp-h-how__photos .pp-photo { grid-column: span 2; aspect-ratio: auto; height: 240px; }
    .pp-h-how__photos .pp-photo--small { display: block; grid-column: auto; height: 150px; }
    .pp-h-venues .pp-btn { width: auto; }
    .pp-reviews { margin: 18px 0 0; padding: 0 0 8px; scroll-padding: 0; }
    .pp-review { flex-basis: calc((100% - 32px) / 3); max-width: none; padding: 22px; }
    .pp-review blockquote { font-size: 16px; }
    .pp-h-team .pp-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
    .pp-h-team .pp-photo { margin: 0; height: 300px; aspect-ratio: auto; }
    .pp-sticky { display: none; }
    .pp-has-sticky .pp-footer { padding-bottom: 2.5rem; }
}
.pp-h-hero__adults-btn { display: none !important; }
@media (min-width: 900px) { .pp-h-hero__adults-btn { display: inline-flex !important; } }
/* "As featured in The Times" (adult courses): inside the Adult lessons button on laptop,
   a quiet line under "Learning as a grown-up? Adult lessons" on phone. "The Times" in a plain
   serif so it reads as the newspaper's name, without copying their masthead. */
.pp-times { font-family: Georgia, 'Times New Roman', Times, serif; font-weight: 700; letter-spacing: .01em; color: var(--pp-brown); }
.pp-h-hero__adults-btn { flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; padding-top: 8px; padding-bottom: 8px; }
.pp-h-hero__adults-btn small { font-size: 12.5px; font-weight: 500; color: var(--pp-muted); margin-top: 2px; }
.pp-h-hero__times { text-align: center; margin: 6px 0 0; font-size: 15px; color: var(--pp-muted); }
@media (min-width: 900px) { .pp-h-hero__times { display: none; } }

/* The designer's wavy lines as a divider between sections of a page: any Separator block
   (or <hr>) added in WordPress, and between the children's and adults' versions of a page */
.content-styles hr,
.content-styles hr.wp-block-separator {
    display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 841 / 91;
    margin: 2.5rem 0; border: 0; opacity: 1;
    background: url(assets/images/brand/lines-light.svg) center / 100% 100% no-repeat;
}
.pp-version + .pp-version { border-top: 0; padding-top: 0; }
.pp-version + .pp-version::before {
    content: ""; display: block; width: 100%; aspect-ratio: 841 / 91; margin: 0 0 2.5rem;
    background: url(assets/images/brand/lines-light.svg) center / 100% 100% no-repeat;
}

/* Page spacing (Ed, 6 Oct 2026): pages had blank paragraphs typed in as spacers, so gaps were
   large and uneven. Those were taken out of the pages; the space now comes from here, the same
   everywhere: a modest gap between paragraphs, more space above a heading than below it (so a
   heading sits with the text it introduces), and slightly tighter lines. */
.content-styles { line-height: 1.6; }
.content-styles p, .content-styles ul, .content-styles ol { margin: 0 0 1rem; }
.content-styles li { margin-bottom: .25rem; }
.content-styles h1 { margin: 0 0 1.25rem; }
.content-styles h2 { margin: 2.25rem 0 .75rem; }
.content-styles h3 { margin: 2rem 0 .625rem; }
.content-styles h4, .content-styles h5, .content-styles h6 { margin: 1.75rem 0 .5rem; }
.content-styles > :first-child, .content-styles hr + *, .content-styles .pp-version > :first-child { margin-top: 0; }
.content-styles img, .content-styles .wp-block-image { margin-top: 1rem; margin-bottom: 1rem; }
.content-styles .wp-block-image img { margin-top: 0; margin-bottom: 0; }
.content-styles hr, .content-styles hr.wp-block-separator { margin: 2rem 0; }
.pp-version + .pp-version::before { margin-bottom: 2rem; }
.pp-version { margin-top: 2rem; }

/* Text column width (Ed, 6 Oct 2026): on a laptop, page text ran the full width of the screen
   (about 150 characters a line). Ordinary pages now use a centred column of about 70 characters,
   comfortable to read; the wavy dividers and photos follow the same width. Shop, basket, checkout
   and the Book a Course tiles keep the full width; My account uses the home page width (below). */
.pp-page .content-styles { max-width: 46rem; margin-left: auto; margin-right: auto; }
.woocommerce-page .pp-page .content-styles,
.pp-page--book-a-course .pp-page .content-styles { max-width: none; }
/* My account (login / register and the logged-in account pages) matches the
   home page width (.pp-wrap) rather than running edge to edge. */
.woocommerce-account .pp-page .content-styles { max-width: 80rem; }
@media (min-width: 900px) {
  .woocommerce-account .pp-page .content-styles { padding-left: 3rem; padding-right: 3rem; }
}

/* Header "Register" link lands on the Register heading, not part way down the form */
.pp-anchor { display: block; scroll-margin-top: 10.5rem; }