/**
 * Public course pages (archive + single course), body.rp-courses. Brands Tutor
 * LMS to match the gym site: ivory canvas, navy structure and text, brand red
 * #e4022e reserved for buttons, Montserrat, the shared 1200px content column
 * (48px desktop / 24px mobile). Done by overriding Tutor's own CSS variables and
 * a few targeted rules rather than replacing templates, so Tutor updates do not
 * wipe it. In-text links stay navy (red on ivory fails AA); red is buttons only.
 * Lesson and quiz views are a later styling pass.
 */
body.rp-courses{
	--navy:#002c41;--red:#e4022e;--ivory:#F6F5EE;--white:#fff;--ink:#0a2233;--muted:#4a5157;--line:#cdd6db;
	/* Retint Tutor's palette: primary becomes navy so links, tabs and accents are
	   on brand and pass AA on light. Buttons are pushed to red separately below. */
	--tutor-color-primary:#002c41;
	--tutor-color-primary-hover:#013a54;
	--tutor-color-primary-rgb:0,44,65;
	--tutor-color-primary-hover-rgb:1,58,84;
	--tutor-body-color:#0a2233;
	--tutor-color-black:#002c41;
	/* Tutor's default muted greys fail AA on light; darken to the site muted. */
	--tutor-color-muted:#4a5157;
	--tutor-color-hints:#4a5157;
	--tutor-color-subdued:#4a5157;
	--tutor-border-radius-10:12px;
	background:var(--ivory);
	font-family:'Montserrat',Arial,sans-serif;
}
body.rp-courses .tutor-wrap,
body.rp-courses .site-main,
body.rp-courses main{background:var(--ivory)}

/* ---------- Shared 1200px content column ---------- */
.rp-courses .tutor-container{max-width:1200px !important;margin-left:auto;margin-right:auto;padding-left:48px;padding-right:48px}

/* ---------- Typography ---------- */
.rp-courses .tutor-course-name,
.rp-courses .tutor-course-details-title,
.rp-courses h1.entry-title{font-family:'Montserrat',Arial,sans-serif;color:var(--navy);font-weight:800;letter-spacing:-.01em}
.rp-courses .tutor-course-details-title{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1}
/* Scope body-text colour to Tutor's content only, so the shared header and
   footer (styled by rp.css) keep their own colours and do not go navy-on-navy. */
.rp-courses .tutor-wrap .tutor-fs-5,.rp-courses .tutor-wrap .tutor-fs-6,.rp-courses .tutor-wrap p,.rp-courses .tutor-wrap li{color:var(--ink)}
.rp-courses .tutor-wrap .tutor-color-muted,.rp-courses .tutor-wrap .tutor-color-hints,.rp-courses .tutor-wrap .tutor-meta{color:var(--muted) !important}
/* in-text links navy underlined (never red on ivory) */
.rp-courses .tutor-course-details-content a,
.rp-courses .tutor-course-details-instructors a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.rp-courses .tutor-course-details-content a:hover{color:var(--red)}

/* ---------- Buttons: primary = brand red, ghost = navy outline ---------- */
.rp-courses .tutor-btn-primary,
.rp-courses .tutor-enroll-course-button{background-color:var(--red) !important;border-color:var(--red) !important;color:#fff !important;border-radius:8px;font-weight:700;box-shadow:0 10px 24px rgba(228,2,46,.22)}
.rp-courses .tutor-btn-primary:hover,
.rp-courses .tutor-btn-primary:focus,
.rp-courses .tutor-btn-primary:active,
.rp-courses .tutor-enroll-course-button:hover{background-color:var(--red) !important;border-color:var(--red) !important;color:#fff !important}
.rp-courses .tutor-btn-ghost{color:var(--navy) !important;border-color:var(--navy) !important;background:transparent !important;border-radius:8px}
.rp-courses .tutor-btn-ghost:hover{background:var(--navy) !important;color:#fff !important}

/* ---------- Course archive (section padding uses the shared rhythm token) ---------- */
.rp-courses .tutor-courses-wrap{padding-top:var(--rp-section-y);padding-bottom:var(--rp-section-y)}
.rp-courses .tutor-course-list.tutor-grid{gap:24px}
/* Flat cards, no decorative hover motion (matches the homepage flat approach). */
.rp-courses .tutor-course-card{background:var(--white);border:1px solid rgba(0,44,65,.1);border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(0,44,65,.06)}
.rp-courses .tutor-course-thumbnail{border-radius:0}
.rp-courses .tutor-course-thumbnail img{width:100%;height:100%;object-fit:cover}
.rp-courses .tutor-course-name a{color:var(--navy) !important}
.rp-courses .tutor-course-name a:hover{color:var(--red) !important}
.rp-courses .tutor-course-price,
.rp-courses .tutor-course-price span{color:var(--navy) !important;font-weight:800}

/* ---------- Single course (section padding uses the shared rhythm token) ---------- */
.rp-courses .tutor-course-details-page{padding-top:var(--rp-section-y);padding-bottom:var(--rp-section-y)}
.rp-courses .tutor-single-course-sidebar .tutor-card,
.rp-courses .tutor-single-course-sidebar > div{border-radius:14px;border:1px solid rgba(0,44,65,.1)}
.rp-courses .tutor-course-details-tab .tutor-nav-link.is-active,
.rp-courses .tutor-course-details-tab .is-active{color:var(--navy) !important;border-color:var(--navy) !important}
.rp-courses .tutor-course-details-tab .tutor-nav-link{color:var(--muted)}
/* price block on the sidebar */
.rp-courses .tutor-course-price h4,
.rp-courses .tutor-single-course-price{color:var(--navy) !important;font-weight:800}

/* ---------- Header/footer logo size ----------
   Tutor's stylesheet loads after rp.css and its global img rules override the
   theme's .rp-logo sizing, blowing the header and footer logos up to full size.
   rp-courses.css loads after Tutor (it depends on tutor-frontend), so re-assert
   the theme's logo size here. Both header and footer use .rp-logo. */
.rp-courses .rp-logo img{height:40px !important;width:auto !important}
@media (max-width:860px){
	.rp-courses .rp-logo img{width:130px !important;height:auto !important}
}

/* ---------- No horizontal overflow ---------- */
.rp-courses .tutor-wrap,.rp-courses .tutor-container{max-width:100%}
.rp-courses img{max-width:100%;height:auto}
/* Tutor's absolutely-positioned hover tooltips extend off the right edge and
   push the document wider than the viewport on mobile. They are decorative
   hover hints, so hide them on the public course pages. */
.rp-courses .tooltip-wrap .tooltip-txt,
.rp-courses .tooltip-txt{display:none !important}

/* ---------- Mobile: 24px gutter to match the site ---------- */
@media (max-width:860px){
	.rp-courses .tutor-container{padding-left:24px;padding-right:24px}
	.rp-courses .tutor-course-list.tutor-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
	.rp-courses .tutor-course-list.tutor-grid-3{grid-template-columns:1fr}
}


/* ============================================================
   Account pages: cart, checkout and dashboard (same gym frame).
   The navy palette and red .tutor-btn-primary already apply via the
   body.rp-courses class; these rules add the layout, cards, inputs and
   1200px column so the account flow matches the rest of the site.
   ============================================================ */
.rp-courses .tutor-checkout-page,
.rp-courses .tutor-cart-page{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(48px,7vw,80px);background:var(--ivory)}
.rp-courses .tutor-checkout-container,
.rp-courses .tutor-cart-container{max-width:1200px;margin:0 auto;padding-left:48px;padding-right:48px}

/* Cards: billing box, order summary and cart list, white with a hairline navy border */
.rp-courses .tutor-checkout-billing-inner,
.rp-courses .tutor-checkout-details,
.rp-courses .tutor-checkout-details-inner,
.rp-courses .tutor-cart-course-list{background:#fff;border:1px solid rgba(0,44,65,.1);border-radius:14px}

/* Headings navy */
.rp-courses .tutor-checkout-page h1,.rp-courses .tutor-checkout-page h2,.rp-courses .tutor-checkout-page h3,.rp-courses .tutor-checkout-page h4,.rp-courses .tutor-checkout-page h5,
.rp-courses .tutor-cart-page h1,.rp-courses .tutor-cart-page h2,.rp-courses .tutor-cart-page h3,.rp-courses .tutor-cart-page h4{color:var(--navy)}

/* Form inputs: hairline border, navy focus ring, site radius */
.rp-courses .tutor-form-control,
.rp-courses .tutor-checkout-page input,
.rp-courses .tutor-checkout-page select,
.rp-courses .tutor-checkout-page textarea{border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.rp-courses .tutor-form-control:focus,
.rp-courses .tutor-checkout-page input:focus,
.rp-courses .tutor-checkout-page select:focus,
.rp-courses .tutor-checkout-page textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,44,65,.12);outline:none}

/* Order total + summary emphasis navy */
.rp-courses .tutor-checkout-summary .tutor-fw-bold,
.rp-courses .tutor-checkout-grand-total,
.rp-courses .tutor-cart-course-price-wrapper{color:var(--navy) !important;font-weight:800}

/* Pay / place-order button stays brand red (insurance on the id as well as the class) */
.rp-courses #tutor-checkout-pay-now-btn,
.rp-courses .tutor-checkout-pay-now-btn{background-color:var(--red) !important;border-color:var(--red) !important;color:#fff !important;border-radius:8px;font-weight:700}

/* Payment option rows (PayPal) */
.rp-courses .tutor-checkout-payment-item{border:1px solid rgba(0,44,65,.1);border-radius:10px}

/* Dashboard: navy active nav, red action buttons (buttons already red) */
.rp-courses .tutor-dashboard-menu-item.active a,
.rp-courses .tutor-dashboard-menu .active .tutor-dashboard-menu-item-link{color:var(--navy) !important;font-weight:700}

/* Mobile: 24px gutter to match the site */
@media (max-width:860px){
	.rp-courses .tutor-checkout-container,
	.rp-courses .tutor-cart-container{padding-left:24px;padding-right:24px}
}

/* ============================================================
   Public course pages: author removed from view.
   The star rating and enrolled-student count are removed cleanly via Tutor
   settings (enable_course_review = off, enable_course_total_enrolled = off).
   The course author has no equivalent setting, so it is hidden here, scoped:
   the archive card "By author" row and the single "A course by" block. The
   author row previously carried margin-top:auto (it pushed the price footer to
   the card bottom), so the footer is re-pinned to keep the three cards balanced.
   ============================================================ */
.rp-courses .tutor-course-card .tutor-meta.tutor-mt-auto,
.rp-courses .tutor-single-course-sidebar-more{display:none !important}
.rp-courses .tutor-card.tutor-course-card{display:flex;flex-direction:column}
.rp-courses .tutor-card.tutor-course-card .tutor-card-footer{margin-top:auto}

/* ============================================================
   SINGLE COURSE SIDEBAR META TIDY
   The course difficulty level ("All Levels") and the "Last Updated" date are
   removed via Tutor settings (enable_course_level = off, enable_course_update_date
   = off), matching how Total Enrolled was hidden. With no course setting a
   duration either, the sidebar meta list can end up with no items. Tutor still
   prints the (whitespace-only) list wrapper, so :empty will not catch it: hide
   the meta footer when it holds no list item, so it leaves no dangling bordered
   box or gap. Also drop the stray top margin on the first meta row for the case
   a single genuine item (e.g. a duration) remains later.
   ============================================================ */
.rp-courses .tutor-sidebar-card .tutor-card-footer:not(:has(li)){display:none}
.rp-courses .tutor-sidebar-card .tutor-card-footer .tutor-ul > li:first-child{margin-top:0}

/* ============================================================
   COURSE ARCHIVE CONTENT BANDS (body.rp-courses .rp-carch)
   An H1 + intro line and the "Available courses" heading wrapped around Tutor's
   own course grid, so the archive reads as a page with a single H1 rather than a
   bare listing. Flat ivory bands, navy text, Montserrat, the shared 1200px column
   and 48/24px gutters, and the shared 88/52px section rhythm token. No cards, no
   shadows, no eyebrows. In-text links inherit the navy-underlined treatment; red
   stays on buttons only.

   The Tutor grid keeps its own container/padding for the cards but its outer
   vertical padding is zeroed here so the .rp-carch bands own all the rhythm and
   the "Available courses" heading sits directly above the grid.
   ============================================================ */
.rp-carch{background:var(--ivory)}
.rp-carch-wrap{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:48px;padding-right:48px}

.rp-carch-intro{padding-top:var(--rp-section-y)}
.rp-carch-available{padding-top:var(--rp-section-y);padding-bottom:var(--rp-section-y)}

/* Tutor grid: drop its own band padding so the bands above control spacing. */
.rp-carch .tutor-courses-wrap{padding-top:0 !important;padding-bottom:0 !important;background:var(--ivory) !important}

/* H1: uppercase navy, matches the site heading treatment. */
.rp-carch-h1{font-family:'Montserrat',Arial,sans-serif;color:var(--navy);font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:1.05;font-size:clamp(2rem,4.6vw,3.1rem);margin:0}

.rp-carch-lead{color:var(--ink);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;max-width:68ch;margin:20px 0 0}

@media (max-width:860px){
	.rp-carch-wrap{padding-left:24px;padding-right:24px}
}

/* ---------- Course card excerpt (restored to match live: the course
   description trimmed to 40 words, sitting under the card title) ---------- */
.rp-courses .tutor-course-card .course-excerpt{
	color:var(--muted);font-size:.875rem;line-height:1.5;margin:8px 0 0;
}
