/*
 * Professional design layer, aligned with rolandbal.com.
 * Loaded after the ported page styles; overrides them wholesale.
 * Tokens: Work Sans body / Crimson Pro display, #1a1a1a & #0d0d0d chrome,
 * blue #1E6F92 accent (#185A77 hover) - the same pair as the CTAs.
 */

/*
 * Portal shell palette, sampled from the login artwork (see the client's
 * palette-and-fonts sheet). Currently scoped to the header + sidebar; the
 * course/content area still runs on the --rb-* tokens below.
 */
:root {
    --pa-teal-deep: #1C4A56;
    --pa-teal: #256A76;
    --pa-rust: #A34829;
    --pa-rust-light: #B9703B;
    --pa-sand: #F5F2EC;
    --pa-sand-hover: #EFEAE0;
    --pa-text: #2C2C2C;
    --pa-icon-idle: #8C9698;
    --pa-border: #E5E0D5;
    /* Shared CTA colour: the login button, every course/page CTA, and the
       focused input underline all run on this pair. */
    --pa-cta: #1E6F92;
    --pa-cta-hover: #185A77;
}

:root {
    --rb-dark: #1a1a1a;
    --rb-darker: #0d0d0d;
    --rb-accent: #1E6F92;
    --rb-accent-hover: #185A77;
    --rb-text: #2b2b2b;
    --rb-muted: #6b7280;
    --rb-border: #e7e5e4;
    --rb-surface: #faf9f7;
    --rb-radius: 8px;
    --rb-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05);
    --rb-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.10);
}

/* ---------- Typography ---------- */
html, body {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 16px !important;
    color: var(--rb-text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
p, li, input, button, textarea, select,
.home-welcome-text, .meditations-intro, .ebooks-intro,
.rola-custom-toggle, .courses-wrapper-26012021 .desc,
.pa-article-content p, .entry-content p, .entry-content li {
    font-family: 'Work Sans', sans-serif !important;
}
p, li, .home-welcome-text, .meditations-intro, .ebooks-intro,
.pa-article-content p, .entry-content p {
    font-size: 17px !important;
    line-height: 1.75;
    color: var(--rb-text);
}
h1, h2, h3, h4,
.home-welcome-title, .sleep-title, #page-heading-healing,
.pa-article-title, .page-icon-header-title, .pa-recording-title,
#profile-name-22082020 {
    font-family: 'Crimson Pro', serif !important;
    color: var(--rb-dark);
    letter-spacing: 0;
    font-weight: 600;
}
.home-welcome-title { margin-bottom: 14px; }
.home-welcome-title, .sleep-title, #page-heading-healing, .pa-article-title,
.page-icon-header-title.page-title-hero, .pa-recording-title, .pitch-title {
    font-size: 34px !important; font-weight: 600 !important; line-height: 1.2 !important;
}
/* Smaller on narrow phones so long titles don't wrap to 3+ lines. */
@media (max-width: 480px) {
    .home-welcome-title, .sleep-title, #page-heading-healing, .pa-article-title,
    .pa-recording-title, .pitch-title,
    #profile-name-22082020, .login-card h1 {
        font-size: 26px !important; line-height: 1.25 !important;
    }
    /* Icon-header titles (articles/masterclass/course-hub/video-playback) run
       smaller so the icon — sized independently of the title — stays visually
       matched to the text instead of towering over it. */
    .page-icon-header-title.page-title-hero {
        font-size: 24px !important; line-height: 1.25 !important;
    }
}
/* Eyebrow above a page title. 22px sentence case, matching the live
   ebooks/meditations pages and the healing course's own ported styles. */
#page-title-pretext,
.sleep-pretext {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal;
    text-transform: none;
    color: var(--rb-accent) !important;
    margin: 0 !important;
}
/* The back link sits at the right on its own line, under the heading. */
.sleep-back-button { text-align: right; margin-top: 12px; }
.page-icon-header-title {
    font-family: 'Crimson Pro', serif !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rb-dark) !important;
}
.part-title h2 { font-family: 'Crimson Pro', serif !important; font-size: 21px !important; font-weight: 600 !important; color: var(--rb-dark) !important; }

/* ---------- Page canvas ---------- */
.main-container-row { background: var(--rb-surface); }
main[role="main"] {
    background: #fff !important;
    padding: 40px 48px !important;
}
/* Content sits directly on the canvas, anchored left beside the sidebar —
   no outer card (the course boxes themselves are the cards). Max-width is
   only a readability limit. */
.entry-content, .entry-content.entry.clr {
    max-width: 920px;
    width: auto !important;
    margin: 0 !important;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 !important;
    box-shadow: none;
}
@media (max-width: 900px) {
    main[role="main"] { padding: 20px 14px !important; }
    .entry-content { padding: 26px 20px !important; }
}

/* ---------- Top navbar (deep teal, centred logo) ---------- */
.frontend-nav-bar-13032019, .navbar.bg-dark {
    background-color: var(--pa-teal-deep) !important;
    border-bottom: none !important;
    padding: 10px 40px !important;
    min-height: 92px;
}
#go-rolandbal-com-logo { height: 78px !important; width: auto !important; }
/* Centre the logo on the bar itself. Left as a flex child it centres inside
   whatever space the hamburger and account control leave over, which pushes it
   off-centre — 16px on mobile, more once the account label is wide. */
.frontend-nav-bar-13032019 .flex-1.text-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: 0 0 auto !important;
}
/* The navbar's account dropdown is gone; Profile and Logout live in the
   sidebar. .dropdown-menu styling stays for any other dropdown. */
.dropdown-menu { border-radius: 8px; border: 1px solid var(--pa-border); box-shadow: var(--rb-shadow-hover); font-size: 14.5px; }
.dropdown-item { padding: 9px 18px; }
.dropdown-item:hover { background: var(--pa-sand); color: var(--pa-teal) !important; }

/* ---------- Sidebar (sand rail, white active row with teal marker) ---------- */
.sidebar {
    background: var(--pa-sand) !important;
    width: 300px !important;
    border-right: 1px solid var(--pa-border);
}
/* The base rule fixes this at calc(100vh - 119px - 54px), which nests a second
   scrollbar inside the sidebar's own. Let the sidebar be the only scroller. */
.sidebar-sticky { padding: 16px 0; height: auto !important; overflow: visible !important; }
.sidebar .nav-item { border: none !important; }
.sidebar .nav-link {
    font-family: 'Work Sans', sans-serif !important;
    color: var(--pa-text) !important;
    border-radius: 0;
    border: none !important;
    border-left: 3px solid transparent !important;
    padding: 1.15rem 1.75rem !important;
    margin: 0;
    display: flex !important;
    align-items: center;
    gap: 0.9rem;
    transition: background 0.15s, color 0.15s;
}
.sidebar .nav-link span.text { font-size: 16px !important; font-weight: 500; letter-spacing: 0; }
.sidebar .nav-link .parent-feather-icons {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px;
    margin-right: 0 !important;
    color: var(--pa-icon-idle);
    transition: color 0.15s;
}
.sidebar .nav-link svg { width: 22px; height: 22px; opacity: 1; }
.sidebar .nav-link:hover {
    color: var(--pa-text) !important;
    background: var(--pa-sand-hover) !important;
}
.sidebar .nav-link:hover .parent-feather-icons { color: var(--pa-teal); }
.sidebar .nav-link.active {
    color: var(--pa-teal-deep) !important;
    background: #fff !important;
    border-left-color: var(--pa-teal) !important;
    font-weight: 600;
}
.sidebar .nav-link.active .parent-feather-icons { color: var(--pa-teal); }
/* Hairline between the courses and the account items. Inset to match the
   reference (margin: 0.75rem 1.75rem) rather than spanning the whole rail,
   so it can't be a border on the row — it's drawn as a pseudo-element. */
.sidebar .nav-item.nav-divider-before {
    position: relative;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}
.sidebar .nav-item.nav-divider-before::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.75rem;
    right: 1.75rem;
    height: 1px;
    background: var(--pa-border);
}

/* ---------- App shell: fixed viewport, only the content pane scrolls ---------- */
@media (min-width: 901px) {
    body { overflow: hidden; }
    .main-container-row {
        display: flex !important;
        height: calc(100vh - 92px);
        overflow: hidden;
        margin: 0 !important;
    }
    nav.sidebar {
        position: static !important;
        top: auto !important;
        height: 100% !important;
        overflow-y: auto;
        flex-shrink: 0;
        display: flex !important;
        flex-direction: column;
        float: none !important;
    }
    main[role="main"] {
        flex: 1;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        margin-left: 0 !important;
        width: auto !important;
        /* landing-inner caps main at 960px, which strands the scrollbar
           mid-screen and left-aligns the content — span the full pane. */
        max-width: none !important;
    }
    main[role="main"]::-webkit-scrollbar, nav.sidebar::-webkit-scrollbar { width: 8px; }
    main[role="main"]::-webkit-scrollbar-thumb, nav.sidebar::-webkit-scrollbar-thumb {
        background: #d6d3d1;
        border-radius: 4px;
    }
    main[role="main"]::-webkit-scrollbar-track, nav.sidebar::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- Buttons ---------- */
.next-lesson-button, .rola-eboo-complete-course, a.no-original-content-btn,
.sleep-back-button .elementor-button, .courses-wrapper-26012021 .cta a, .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 18px;
    white-space: nowrap;
    background-color: var(--pa-cta) !important;
    background-image: none !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-shadow: none !important;
    padding: 10px 22px !important;
    transition: background 0.15s, transform 0.1s;
}
.next-lesson-button:hover, .rola-eboo-complete-course:hover, a.no-original-content-btn:hover,
.sleep-back-button .elementor-button:hover, .courses-wrapper-26012021 .cta a:hover, .btn-primary:hover {
    background-color: var(--pa-cta-hover) !important;
    color: #fff !important;
    text-decoration: none !important;
}
/* A completed course keeps the standard CTA background - only the label
   changes to "COMPLETED". Needs the .completed selector spelled out to beat
   landing-inner.css's grey rule. */
.courses-wrapper-26012021 .cta a.completed {
    background-color: var(--pa-cta) !important;
    background-image: none !important;
    color: #fff !important;
}
.courses-wrapper-26012021 .cta a.completed:hover { background-color: var(--pa-cta-hover) !important; }
.btn-outline-secondary { border-radius: 6px !important; font-size: 13px !important; }

/* ---------- Course / article cards ---------- */
.courses-wrapper-26012021 .course-box {
    border-radius: var(--rb-radius);
    overflow: hidden;
    border: 1px solid var(--rb-border);
    box-shadow: var(--rb-shadow) !important;
    background: #fff;
    transition: transform 0.18s, box-shadow 0.18s;
}
.courses-wrapper-26012021 .course-box:hover { transform: translateY(-3px); box-shadow: var(--rb-shadow-hover) !important; }
.courses-wrapper-26012021 .title {
    /* landing-inner.css clips the bottom edge into a diagonal - square it off. */
    clip-path: none !important;
    font-family: 'Crimson Pro', serif !important;
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    padding: 20px !important;
    background-size: cover !important;
    background-position: center !important;
}
.courses-wrapper-26012021 .desc { font-size: 17px !important; color: var(--rb-muted) !important; line-height: 1.65; padding: 16px 20px 0 !important; }
/* Room under the button so it isn't crowded against the card's bottom edge:
   1.5x the original 16px gap. The button's line box eats ~4px, so the padding
   runs 4px ahead of the gap it produces. */
.courses-wrapper-26012021 .cta { padding: 16px 20px 28px !important; }
/* The live page runs the card CTA larger than its other buttons (15px on an
   18px base) - the shared button size above is tuned for the smaller ones. */
.courses-wrapper-26012021 .cta a { font-size: 14px !important; letter-spacing: 2px !important; }
.courses-wrapper-26012021 .courses { gap: 20px !important; }

/* ---------- Icon headers / accents ---------- */
.page-icon-header { align-items: center; gap: 12px; margin: 0 0 22px 0 !important; }
.entry-content > .page-icon-header .page-icon-header-title { color: #105073 !important; }
/* .entry-content.entry.clr h1 (landing-inner.css) targets any h1, including
   this one when it's an <h1> (video-playback); its margin-bottom inflates
   the flex row so the icon no longer centers against the visible text. */
.page-icon-header-title { margin: 0 !important; }
.page-icon-header-icon, .page-icon-header-icon svg,
.pa-recording-title .elementor-icon svg, .pa-recording-title .elementor-icon svg path,
.part-title svg path, .download-link-roland svg path,
.material-row svg, .meditations-download-all svg { color: var(--rb-accent) !important; fill: var(--rb-accent) !important; }
.rola-custom-toggle .item svg { color: var(--rb-accent) !important; }

/* ---------- Sections & toggles ---------- */
.section-healing-course { border-bottom: 1px solid var(--rb-border) !important; margin-bottom: 26px !important; padding-bottom: 26px !important; }
.part-title > span { margin-top: 3px; }
.rola-custom-toggle {
    background: var(--rb-surface) !important;
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
    padding: 4px 0;
    overflow: hidden;
}
/* Negative margin cancels the card's 4px padding so the title's hover
   background reaches the card's edges; the matching extra padding keeps
   the text sitting in the same spot it would without this trick. */
.rola-custom-toggle .title { font-family: 'Crimson Pro', serif !important; font-size: 19px; font-weight: 600; margin: -4px 0; padding: 14px 16px; }
.courses-wrapper-26012021 .heading { font-family: 'Crimson Pro', serif !important; }
.rola-custom-toggle .item { font-size: 15px; padding: 4px 16px; color: var(--rb-text); }
/* landing-inner.css reserves 2.5rem of left padding on mobile so the item's
   absolutely-positioned arrow (margin-left:-21px) has room to sit inside the
   card; this file loads after it and would otherwise collapse that padding
   back to 16px, pushing the arrow outside the card's left edge. */
@media (max-width: 768px) {
    .rola-custom-toggle .item { padding-left: 2.5rem; }
}
.breadcrumb1 { font-size: 17px; color: var(--rb-text); margin-bottom: 1.4rem; }
.breadcrumb1 a { color: #105073 !important; text-decoration: none; }
.breadcrumb1 a:hover { text-decoration: underline; }

/* ---------- Tabs ---------- */
.pa-tabs-heading { border-bottom: 1px solid var(--rb-border); gap: 4px; }
.pa-tab-title { font-size: 17px !important; font-weight: 600; letter-spacing: normal; padding: 12px 18px !important; color: var(--rb-muted) !important; background: transparent !important; }
/* Mouse/touch clicks shouldn't leave the browser's default focus ring on the
   tab; keyboard users still get one via :focus-visible. */
.pa-tab-title:focus { outline: none; }
.pa-tab-title:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; }
.pa-tab-title[aria-selected="true"] { color: var(--rb-accent) !important; border-bottom: 2px solid var(--rb-accent) !important; }
.pa-tab-title[aria-selected="true"] .pa-tab-icon svg { fill: var(--rb-accent) !important; }
.pa-tab-title .pa-tab-icon svg { fill: currentColor; }

/* ---------- Meditation list rhythm & icons ---------- */
.rola-custom-toggle { margin-top: 1.75rem !important; margin-bottom: 10px; }
.rola-custom-toggle:first-of-type { margin-top: 1rem !important; }
.rola-custom-toggle .title svg, .rola-custom-toggle .title svg path,
#tcb-icon-caret-right-solid path { fill: var(--rb-accent) !important; color: var(--rb-accent) !important; }
.barun-kumar-audio-player-23112017-wrapper { margin-bottom: 1.75rem; }
.meditations-download-all { margin: 1.75rem 0 0.5rem !important; }
.meditations-download-all .page-icon-header-title a {
    color: #105073 !important;
    font-size: 20px !important;
    text-decoration: underline;
}
.meditations-download-all .page-icon-header-title a:hover { color: var(--rb-accent-hover) !important; }

/* Volume popup anchored to the speaker icon, arrow attached at its base.
   The base player CSS has a higher-specificity rule
   (".barun-kumar-audio-player-23112017-controls span { display: inline-block;
   flex: 1; ... }") that stretches every span (including this wrapper) to fill
   the row — that's what was pushing the popup away from the icon. Beat it
   with matching specificity + !important so the wrap hugs just the icon. */
.barun-kumar-audio-player-23112017-controls span.volume-wrap {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    align-items: center;
    padding-left: 0 !important;
    margin-right: 16px;
}
/* Bootstrap's .mr-3 (1rem) lived on the icon itself, which widened this
   flex item beyond the icon's visible box and threw off centering — move
   the spacing to the wrapper instead so the icon is the box's full width. */
.volume-wrap .volume-icon.mr-3 { margin-right: 0 !important; }
.volume-wrap .volume-control {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(100% + 12px) !important;
    transform: translateX(-50%);
    border: 1px solid var(--rb-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.volume-wrap .arrow-down {
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    margin-left: -8px;
    border-top-color: #fff !important;
}

/* Icons inside the dark player bar are white */
.barun-kumar-audio-player-23112017-controls svg.download-icon,
.barun-kumar-audio-player-23112017-controls svg.download-icon path {
    fill: #fff !important;
    color: #fff !important;
}
.barun-kumar-audio-player-23112017-controls img.volume-icon {
    filter: brightness(0) invert(1);
}

/* ---------- Audio player ---------- */
.barun-kumar-audio-player-23112017-controls {
    background: var(--pa-cta) !important;
    border-radius: 8px 8px 0 0;
    padding: 9px 6px !important;
}
.barun-kumar-audio-player-23112017-controls span { font-size: 14.5px !important; }
.barun-kumar-audio-player-23112017-controls em { font-size: 12.5px !important; opacity: 0.85; }
/* The strip under the bar follows it down a shade, so the player reads as one
   block rather than a blue bar sitting on a near-black plinth. */
.barun-kumar-audio-player-23112017-controls-ext { border-radius: 0 0 8px 8px; background: var(--pa-teal-deep) !important; height: 10px !important; }
/* Progress lives in the bottom strip. The plugin already has a fill for this -
   the div inside -controls-ext, which audio.js sizes - so that is used rather
   than overlaying anything: being a real child, the strip's own overflow clips
   it to the rounded corners with no corner-matching needed. */
.barun-kumar-audio-player-23112017-controls-ext { overflow: hidden; }
.barun-kumar-audio-player-23112017-controls-ext > div {
    height: 100% !important;
    /* Warm rust rather than white: a white fill at 100% matched the page behind
       it, so a finished track read as nothing at all. Rust is the palette's
       other half, so a full strip is unmistakably a state - and it separates
       from both the page and the bar by hue, not only by value. */
    background: var(--pa-rust-light) !important;
}
/* The plugin's other indicator is a full-height wash across the whole bar.
   Progress is shown in the strip now, so it stays out of the way. */
.barun-kumar-audio-player-23112017-controls-progress { background: transparent !important; }
/* The plugin fakes a round button with lopsided padding (10.72px sides, 9px
   top/bottom), which renders 37.2x38 - not square, so the glyph never sits in
   the middle. A fixed square centred with flex fixes both axes, and keeps the
   circle from resizing when audio.js swaps fa-play for the wider fa-pause. */
.barun-kumar-audio-player-23112017-play-pause {
    /* A white ring gave the primary control the same visual language as the
       secondary ones - thin white line, same as the title, volume and download
       icons. Solved by changing form rather than adding colour: a solid sand
       disc (the sidebar's own colour) with the bar's blue as the glyph. Solid
       against line reads as primary without competing, and sand is the only
       candidate that separates from the bar by lightness rather than hue alone
       - 5.02:1 against it, where rust and deep teal manage 1.06 and 1.73 and so
       depend on colour vision to show their edge. */
    background: var(--pa-sand) !important;
    color: var(--pa-cta) !important;
    border: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
}
/* Flex centres the glyph's box, but the eye centres on its mass. The pause bars
   are symmetric so both agree (0.12px apart); the triangle's mass sits 2.6px
   left of its box centre, which reads as off-centre. Nudged right by that much
   - the same figure as the usual "shift a triangle by 1/6 of its width" rule.
   Scoped to fa-play so the pause glyph, which needs no correction, stays put. */
.barun-kumar-audio-player-23112017-play-pause.fa-play::before {
    position: relative;
    left: 2.6px;
}
.meditation-incomlete-20042018 i { color: var(--rb-accent) !important; border-color: transparent !important; }

/* ---------- Profile ---------- */
#profile-name-22082020 { font-size: 34px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: none !important; }
.roland-profile-section-14052019 { border-color: var(--rb-border) !important; padding: 1.4rem 0 !important; font-size: 15.5px; }
.roland-profile-section-14052019 .user-field-edit { color: var(--rb-accent-hover); font-weight: 500; text-decoration: none; }
.form-control { border-radius: 6px !important; border-color: var(--rb-border) !important; font-size: 15px !important; }
.form-control:focus { border-color: var(--rb-accent) !important; box-shadow: 0 0 0 3px rgba(30, 111, 146, 0.15) !important; }

/* ---------- Recordings ----------
   video-playback.ejs already ships styles matching the live page: #105073
   headings, rows that only show a border when active, and the #f8fafc
   materials card. This block used to restyle all of it with !important, which
   boxed every row and washed out the headings. Only the display font and the
   accent colour are imposed now; the rest is left to the view. */
.rpa-week-header h3 { font-family: 'Crimson Pro', serif !important; }
/* The live page uses #1976d2 here and on material links; swapped for the
   portal accent so the page doesn't introduce a fourth blue. The video-item
   hover/active borders are now transparent (set directly in video-playback.ejs),
   so no override is needed for those. */
.rpa-week-description { color: var(--rb-accent) !important; }

/* ---------- Auth pages ---------- */
.login-card { border-radius: 0; padding: 44px 40px !important; }
/* overflow:hidden means this radius also rounds the card and the artwork
   half, so .login-card doesn't need one of its own. */
.middle-box { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.login-card h1 { font-family: 'Crimson Pro', serif !important; font-size: 34px !important; font-weight: 600 !important; line-height: 1.2 !important; }
.login-card input[type="email"], .login-card input[type="text"] {
    font-family: 'Work Sans', sans-serif !important; font-size: 15px !important;
}
.login-card input[type="email"]:focus, .login-card input[type="text"]:focus { border-bottom-color: var(--pa-cta) !important; }
.login-card input[type="submit"] {
    background: var(--pa-cta) !important; border: none !important;
    border-radius: 6px !important; font-weight: 600 !important;
    font-size: 13px !important; letter-spacing: 1.5px !important;
    transition: background 0.15s;
}
.login-card input[type="submit"]:hover { background: var(--pa-cta-hover) !important; }
.login-card .sub-line { font-size: 13.5px !important; color: var(--rb-muted); }
.login-card .sub-line a, .login-card .btn-link { color: var(--rb-accent-hover) !important; }
.login-card .form-message { font-size: 13.5px !important; }
.login-card .form-message-info { color: var(--rb-accent-hover) !important; font-size: 13.5px !important; }
body.auth-page { font-family: 'Work Sans', sans-serif !important; }

/* Stacked, the box fills the whole viewport, so the radius would only clip the
   screen's own corners and show the background photo through them. Matches
   auth.css's stacking breakpoint. */
@media (max-width: 768px) {
    .middle-box { border-radius: 0; }
}

/* The drawer spans the screen on mobile — the fixed 300px above is a desktop
   rail width and would otherwise leak into the slide-down menu. */
@media (max-width: 960px) {
    .sidebar { width: 100% !important; border-right: none; border-bottom: 1px solid var(--pa-border); }
}

/* ---------- Mobile navbar: hamburger on the left ---------- */
@media (max-width: 900px) {
    /* 40px of side padding is a desktop measure; pull the hamburger back in.
       Selector must carry .navbar.bg-dark too — the desktop rule above matches
       through that pair, which outranks a lone .frontend-nav-bar-13032019. */
    .frontend-nav-bar-13032019, .navbar.bg-dark { padding: 10px 16px !important; }
    .frontend-nav-bar-13032019 { flex-wrap: nowrap !important; }
    #left-menu-icon { order: -1; }
    #left-menu-icon i.fa.fa-bars, #left-menu-icon span.close-icon {
        padding-right: 5px !important;
        padding-left: 0 !important;
    }
    /* keep the logo visually centered between hamburger (left) and account button (right) */
    .frontend-nav-bar-13032019 .flex-1.text-center { flex: 1; }
}

/* ---------- Article end: product ads (expanded from the WP shortcode) ---------- */
.article-end-products-heading {
    font-family: 'Crimson Pro', serif !important;
    font-size: 29px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: #105073 !important;
    margin: 0 0 1.25rem !important;
}
.row-end-products-article-end {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 2rem;
}
/* The live page fixes three across; wrapping keeps it usable on a phone. */
.row-end-products-article-end .end-product-item { flex: 1 1 200px; min-width: 0; }
/* Each PNG is a square artwork tile with a caption and price block beneath it,
   baked into the image (nothing here is markup, so it can't be hidden - only
   cropped). The heights differ per file (368/358/376 against a 274 width) since
   the captions wrap differently, so the crop is to the top square rather than a
   fixed pixel amount. */
.row-end-products-article-end .end-product-item a {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
}
.row-end-products-article-end .end-product-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.2s, box-shadow 0.2s;
}
.row-end-products-article-end .end-product-item a:hover img {
    transform: translateY(-3px);
    box-shadow: var(--rb-shadow-hover);
}

/* ---------- Downloads ----------
   Every download on the site is icon + name in one anchor: the meditations zip,
   the per-lesson downloads and the sleep materials each had their own markup,
   icon size and colour before this. */
.pa-download {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #105073 !important;
    font-size: 17px;
    line-height: 1.5;
    text-decoration: none !important;
}
.pa-download-icon { display: inline-flex; flex: 0 0 auto; }
.pa-download-icon svg { width: 22px; height: 22px; fill: var(--pa-cta); }
.pa-download-name { text-decoration: underline; }
.pa-download:hover { color: var(--pa-cta) !important; }

/* ---------- Misc ---------- */
.entry-content a:not(.elementor-button):not(.no-original-content-btn):hover { color: var(--rb-accent-hover); }
.pa-divider { border-top: 1px solid var(--rb-border) !important; margin: 1.75rem 0 !important; }
.ebook-row { border-bottom: none !important; border-radius: 0; }
.ebook-row:hover .page-icon-header-title { color: var(--rb-accent) !important; }
.ebook-desc { font-size: 14px !important; }
/* Book mockups: blend white JPEG backgrounds into the surface */
.ebook-cover img { mix-blend-mode: multiply; max-width: 240px !important; transition: transform 0.2s; }
.ebook-row:hover .ebook-cover img { transform: scale(1.02); }
.toast { border-radius: 8px; overflow: hidden; }
::selection { background: rgba(30, 111, 146, 0.25); }