/*
 * BeeWellWithMS "new look" (implementation manual, 8 Nov 2026).
 * Burgundy #651C2C, warm ivory #FAF7F2, soft blush #F5E2E3,
 * charcoal #292426, red #CB2335 for play controls and highlights.
 * Everything is scoped to html.bwe-look so it can be switched off.
 */
html.bwe-look {
  --look-burgundy: #651C2C;
  --look-burgundy-2: #7A2536;
  --look-ivory: #FAF7F2;
  --look-blush: #F5E2E3;
  --look-charcoal: #292426;
  --look-red: #CB2335;
  --bwe-accent: #651C2C;
  --bwe-accent-dark: #4E1522;
  --bwe-text: #292426;
  --bwe-soft: #F5E2E3;
}

html.bwe-look body { background-color: var(--look-ivory); color: var(--look-charcoal); }

/* Menu: solid burgundy everywhere (it used to be see-through over the red banner). */
html.bwe-look #navigation,
html.bwe-look .navbar.navbar-shrink { background-color: rgba(101, 28, 44, .97) !important; }

/* Headings and buttons */
html.bwe-look .page-section h2 { color: var(--look-burgundy); }
html.bwe-look .btn-default,
html.bwe-look .cookies-bar button { background-color: var(--look-burgundy); border-color: var(--look-burgundy); }
html.bwe-look .btn-default:hover,
html.bwe-look .cookies-bar button:hover { background-color: var(--look-burgundy-2); border-color: var(--look-burgundy-2); }
html.bwe-look .categories-tags span.active,
html.bwe-look .episode-tags span.active { background-color: var(--look-burgundy); }

/* Readable body text (~18px) in the main sections */
html.bwe-look .page-section p,
html.bwe-look .individual-episode-div p { font-size: 1.0625rem; line-height: 1.65; }

/* ---------- Top banner ---------- */
html.bwe-look header#home {
  background-image: linear-gradient(120deg, #F5E2E3 0%, #FAF7F2 70%) !important;
  color: var(--look-charcoal);
}
html.bwe-look header#home h1 {
  color: var(--look-burgundy) !important;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-bottom: .75rem !important;
}
html.bwe-look header#home .bwe-hero-with {
  color: var(--look-charcoal);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  margin: 0 0 .75rem;
  width: auto;
}
html.bwe-look header#home p { color: var(--look-charcoal) !important; font-size: 1.0625rem; line-height: 1.6; }
html.bwe-look header#home img.bwe-hero-photo {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(101, 28, 44, .18);
}
html.bwe-look header#home .d-md-none.bwe-hero-photo { max-width: 340px; margin: 0 auto 1.25rem; display: block; }

/* Call-to-action buttons under the banner text */
html.bwe-look .bwe-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.75rem; }
html.bwe-look .bwe-hero-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.4rem; border-radius: 12px;
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
  border: 2px solid var(--look-burgundy);
}
html.bwe-look .bwe-hero-actions a.primary { background: var(--look-burgundy); color: #fff; }
html.bwe-look .bwe-hero-actions a.primary:hover { background: var(--look-burgundy-2); }
html.bwe-look .bwe-hero-actions a.secondary { background: #fff; color: var(--look-burgundy); }
html.bwe-look .bwe-hero-actions a.secondary:hover { background: var(--look-blush); }
html.bwe-look .bwe-hero-actions a:focus-visible { outline: 3px solid var(--look-red); outline-offset: 2px; }

/* Platform logos are white, so give each one a burgundy tile */
html.bwe-look header#home .streaming-platforms-div { gap: .75rem; }
html.bwe-look header#home .streaming-platforms-div > div {
  flex: 0 0 auto;
  background: var(--look-burgundy);
  border-radius: 12px;
  padding: .55rem .9rem;
  display: flex; align-items: center;
}
html.bwe-look header#home .streaming-platforms-div > div img { width: 96px !important; height: auto; }
html.bwe-look header#home .streaming-platforms-div > div:hover { background: var(--look-burgundy-2); }

/* The playful bees stay, a little softer on the light banner */
html.bwe-look header#home .bee { opacity: .85; }

/* ---------- Coloured bands (stats, newsletter, subscribe) ---------- */
html.bwe-look .stat-section,
html.bwe-look .newsletter-section,
html.bwe-look .cta-section,
html.bwe-look .newsletter-subscribe-modal-div {
  background-image: linear-gradient(135deg, #651C2C 0%, #7A2536 100%) !important;
}
html.bwe-look .newsletter-section h2,
html.bwe-look .cta-section h2 { color: #fff; }

/* ---------- Behind the Mic ---------- */
html.bwe-look .about-section { background-color: var(--look-ivory); }
html.bwe-look .about-section img.bwe-about-photo {
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%;
  border-radius: 24px;
}
html.bwe-look .about-section .about-host { color: var(--look-burgundy); }

/* Episode list cards on the homepage */
html.bwe-look .episodes-section { background-color: var(--look-ivory); }
html.bwe-look .blog-section { background-color: #fff; }

/* Play buttons keep the brighter red so they stand out */
html.bwe-look .bwe-yt-play { background: var(--look-red); }

@media (max-width: 767px) {
  html.bwe-look header#home h1,
  html.bwe-look header#home p,
  html.bwe-look header#home .bwe-hero-with { width: 100%; text-align: left; }
  html.bwe-look .bwe-hero-actions a { flex: 1 1 100%; }
  html.bwe-look header#home .streaming-platforms-div > div { flex: 1 1 calc(50% - .75rem); justify-content: center; }
}

/* Tablets (iPad): use the full text column and keep the buttons side by side. */
html.bwe-look header#home h1,
html.bwe-look header#home p,
html.bwe-look header#home .bwe-hero-with { width: 100%; }
@media (min-width: 768px) and (max-width: 1199px) {
  html.bwe-look header#home h1 { font-size: 2.35rem; }
  html.bwe-look .bwe-hero-actions { gap: .6rem; }
  html.bwe-look .bwe-hero-actions a { padding: .6rem 1rem; font-size: 1rem; }
  html.bwe-look header#home .streaming-platforms-div > div img { width: 84px !important; }
}

/* iPad landscape / small laptops: keep menu items on one line. */
@media (min-width: 992px) and (max-width: 1199px) {
  html.bwe-look .navbar .navbar-nav .nav-item .nav-link { padding: 0 .85rem; white-space: nowrap; }
  html.bwe-look .navbar .nav-subscribe { padding: .7rem 1.4rem !important; white-space: nowrap; }
  html.bwe-look .navbar .nav-subscribe i { display: inline-block; margin-left: .35rem; }
  html.bwe-look .navbar-brand { margin-right: 1rem; }
}

/* ---------- Share buttons: clearly visible ---------- */
html.bwe-look .bwe-share a,
html.bwe-look .bwe-share button,
html.bwe-look .bwe-share summary {
  border: 2px solid var(--look-burgundy);
  color: var(--look-burgundy);
  background: #fff;
  font-weight: 700;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: .45rem;
}
html.bwe-look .bwe-share a:hover,
html.bwe-look .bwe-share button:hover,
html.bwe-look .bwe-share summary:hover { background: var(--look-blush); color: var(--look-burgundy); border-color: var(--look-burgundy); }
html.bwe-look .bwe-share a:focus-visible,
html.bwe-look .bwe-share button:focus-visible,
html.bwe-look .bwe-share summary:focus-visible { outline: 3px solid var(--look-red); outline-offset: 2px; }

/* "Share" in the homepage list: blush button with a share icon */
html.bwe-look .bwe-share-compact .bwe-open,
html.bwe-look .bwe-share-compact .bwe-share-more summary { padding: .5rem 1.1rem; font-size: 1rem; }
html.bwe-look .bwe-share-compact .bwe-share-more summary { background: var(--look-blush); }
html.bwe-look .bwe-share-more summary::before,
html.bwe-look .bwe-share .bwe-share-native::before {
  content: ""; width: 1.05em; height: 1.05em; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.bwe-look .bwe-share-compact .bwe-open { background: var(--look-burgundy); color: #fff; }
html.bwe-look .bwe-share-compact .bwe-open:hover { background: var(--look-burgundy-2); color: #fff; }
html.bwe-look .bwe-share-menu { border: 2px solid var(--look-blush); }
html.bwe-look .bwe-share-menu a, html.bwe-look .bwe-share-menu button { width: 100%; }

/* Episode page: share box */
html.bwe-look .bwe-episode .bwe-share {
  background: var(--look-blush);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin: 1.25rem 0;
}
html.bwe-look .bwe-episode .bwe-share-label { width: 100%; color: var(--look-burgundy); font-size: 1.1rem; margin-bottom: .15rem; }
html.bwe-look .bwe-share .bwe-share-native { background: var(--look-burgundy); color: #fff; }
html.bwe-look .bwe-share .bwe-share-native:hover { background: var(--look-burgundy-2); color: #fff; }

/* ===== Readability fixes (brain fog, low vision, busy clinicians) ===== */

/* 1. Bees stay, but no longer move (motion distracts and can trigger dizziness). */
html.bwe-look .bee { animation: none !important; transition: none !important; }

/* 2. Homepage episode cards: 3 lines of description, then "Read more". */
html.bwe-look .individual-episode-div p.mt-0.mb-0 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html.bwe-look .individual-episode-div .show-full-transcription,
html.bwe-look .individual-episode-div .full-transcription { display: none !important; }
html.bwe-look .individual-episode-div p.mt-3.mb-0:has(.show-full-transcription) { display: none; }
html.bwe-look .bwe-read-more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem;
  font-weight: 700; font-size: 1.0625rem; color: var(--look-burgundy); text-decoration: underline; text-underline-offset: 3px;
}
html.bwe-look .bwe-read-more:hover { color: var(--look-burgundy-2); }

/* 3. Nothing smaller than 16px. */
html.bwe-look .categories-tags span,
html.bwe-look .episode-tags span,
html.bwe-look .bwe-share a, html.bwe-look .bwe-share button, html.bwe-look .bwe-share summary,
html.bwe-look .individual-episode-div .text-muted,
html.bwe-look .individual-episode-div .text-muted a,
html.bwe-look .bwe-meta, html.bwe-look .bwe-chips button, html.bwe-look .bwe-count,
html.bwe-look .bwe-yt-date, html.bwe-look footer .small { font-size: 1rem !important; }

/* 4. Upright, darker grey for dates and categories. */
html.bwe-look .text-muted,
html.bwe-look .text-muted a,
html.bwe-look .bwe-meta, html.bwe-look .bwe-meta a,
html.bwe-look .bwe-yt-date, html.bwe-look .bwe-count { color: #57504F !important; font-style: normal !important; }
html.bwe-look .blog-section p, html.bwe-look .blog-section span { font-style: normal !important; }

/* 7. Solid burgundy under the coloured bands, in case the background picture fails. */
html.bwe-look .stat-section,
html.bwe-look .newsletter-section,
html.bwe-look .cta-section,
html.bwe-look .newsletter-subscribe-modal-div { background-color: #651C2C !important; }
html.bwe-look .navbar .nav-link,
html.bwe-look .btn-default { font-size: 1rem !important; }
html.bwe-look .navbar .navbar-nav .nav-item .nav-link { color: rgba(255,255,255,.88); }
html.bwe-look .navbar .navbar-nav .nav-item .nav-link:hover { color: #fff; }
html.bwe-look .navbar .nav-subscribe { color: #292426 !important; }
html.bwe-look .bwe-match { font-size: 1rem; color: #3B3436; }
html.bwe-look .bwe-match-label { font-size: .9rem; background: var(--look-blush); color: var(--look-burgundy); }
html.bwe-look .bwe-episode h1, html.bwe-look .bwe-list h1, html.bwe-look .bwe-videos h1 { color: var(--look-burgundy); }
html.bwe-look .bwe-media { border-color: #EBD6D8; }
html.bwe-look .bwe-media-watch { background: var(--look-blush); border-color: var(--look-blush); }
html.bwe-look .bwe-media-h { color: var(--look-burgundy); }
html.bwe-look footer { background: #fff; border-top: 1px solid #EBD6D8; }
html.bwe-look .bwe-footer-nav a { color: var(--look-burgundy); }
html.bwe-look .bwe-ext-label { background: var(--look-blush); color: var(--look-burgundy); font-size: .9rem; }
html.bwe-look .bwe-notfound h1 { color: var(--look-burgundy); }
/* More menu items now: keep them on one line on laptops. */
@media (min-width: 992px) and (max-width: 1399px) {
  html.bwe-look .navbar .navbar-nav .nav-item .nav-link { padding: 0 .7rem; }
  html.bwe-look .navbar .nav-item-search input { width: 150px; }
  html.bwe-look .navbar .nav-subscribe { padding: .7rem 1.1rem !important; }
}
html.bwe-look .bwe-topic { background: var(--look-blush); color: var(--look-charcoal); }
html.bwe-look .bwe-topic-icon { color: var(--look-burgundy); }
html.bwe-look .bwe-topic.is-on { background: var(--look-burgundy); color: #fff; }
html.bwe-look .bwe-topic.is-on .bwe-topic-icon { color: #fff; }
html.bwe-look .bwe-filter-h { color: var(--look-burgundy); }
html.bwe-look .bwe-home-topics a { background: var(--look-blush); }
html.bwe-look .bwe-home-topics svg { color: var(--look-burgundy); }

/* Menu with 6 items: always one line on laptops/desktops. */
@media (min-width: 992px) {
  html.bwe-look .navbar .navbar-nav .nav-item .nav-link,
  html.bwe-look .navbar .nav-subscribe { white-space: nowrap; }
  html.bwe-look .navbar .nav-subscribe i { display: none; }
}
@media (min-width: 992px) and (max-width: 1499px) {
  html.bwe-look .navbar .navbar-nav .nav-item .nav-link { padding: 0 .55rem; }
  html.bwe-look .navbar .nav-item-search { margin-left: .5rem; }
  html.bwe-look .navbar .nav-item-search input { width: 130px; }
  html.bwe-look .navbar .nav-subscribe { padding: .6rem 1rem !important; }
  html.bwe-look .navbar-brand { margin-right: .75rem; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  html.bwe-look .navbar .nav-item-search { display: none; }
}

/* The logo in the menu now carries the bee: hide the floating banner bees. */
html.bwe-look header#home .bee { display: none !important; }