/*
 * LearnDash LD30 fixes — EMLearn child theme.
 *
 * Focus mode renders outside Divi's `.et-l` layout wrapper, so Divi's
 * `.screen-reader-text` hiding rule (scoped to `.et-db #et-boc .et-l`) never
 * applies in the course navigation sidebar. That left LearnDash's
 * screen-reader-only labels — the "Expand"/"Collapse" word and a duplicated
 * lesson title baked into each expand toggle — rendering visibly as an ugly
 * bold bar above each lesson's topics.
 *
 * Re-assert accessible hiding within the LearnDash wrapper, then tone the
 * remaining "N Topics" count down to a quiet label rather than a heading.
 */

/* Restore visually-hidden behaviour for screen-reader-only text. */
.learndash-wrapper .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	word-wrap: normal !important;
	border: 0 !important;
}

/* The remaining visible topic count in the expand toggle: subtle, not bold. */
.learndash-wrapper .ld-lesson-item .ld-expand-button .ld-expand-text {
	font-weight: 400;
	font-size: 0.82em;
	opacity: 0.8;
}

/*
 * "Lesson Content" topic list (LearnDash ld-accordion component, shown in the
 * lesson body). Divi leaves this largely unstyled — bare stacked links — so
 * give it a clean carded list: header bar, divided rows, a marker dot, and
 * navy hover states matching the brand.
 *
 * NOTE: In focus mode the left sidebar already lists every lesson and topic,
 * so this in-body list is redundant and hidden (see the focus-mode rule at the
 * end of this file). The styling below remains as a fallback for any non-focus
 * lesson display.
 */
.learndash-wrapper .ld-accordion--lesson {
	margin: 28px 0;
	background: #fff;
	border: 1px solid #e3e6ef;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(3, 6, 132, 0.06);
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__header {
	margin: 0;
	padding: 14px 20px;
	background: #f5f6fb;
	border-bottom: 1px solid #e3e6ef;
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__heading {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #030684;
	text-transform: none;
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__content {
	padding: 0;
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__item--topic {
	border-bottom: 1px solid #eef0f6;
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__item--topic:last-child {
	border-bottom: 0;
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__item-header--topic {
	margin: 0;
	padding: 0;
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__item-title-wrapper {
	margin: 0;
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__item-title--topic {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 500;
	color: #2b2f42;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Leading marker dot. */
.learndash-wrapper .ld-accordion--lesson .ld-accordion__item-title--topic::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 2px solid #c3c8de;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__item-title--topic:hover {
	background: #f5f6fb;
	color: #030684;
}

.learndash-wrapper .ld-accordion--lesson .ld-accordion__item-title--topic:hover::before {
	border-color: #030684;
	background: #030684;
}

/*
 * Focus mode: the left sidebar is the primary navigation and already lists
 * every lesson and topic, so the in-body "Lesson Content" accordion is
 * redundant. Hide it only here — non-focus views keep the styled list above.
 */
body.ld-in-focus-mode .ld-accordion--lesson {
	display: none;
}

/*
 * Course landing page — course-content accordion (EMAllergy courses ONLY).
 *
 * Replace LearnDash's default grey boxes with clean white cards in the
 * emallergy.health style: navy titles (#0A1E3D / #0D1F5C), soft borders,
 * rounded corners, steel-blue accents (#5B8DB8), light blue-grey hover
 * (#EDF1F7). Font is already Calibri (matches emallergy.health).
 *
 * Scoped to the two EMAllergy course landing pages by their post-ID body
 * classes so other courses keep LearnDash's default styling:
 *   - postid-4534  "Getting Started with EMAllergy"  (/courses/getting-started-with-emallergy/)
 *   - postid-4569  "EMAllergy Events Module"         (/courses/emallergy-events-module/)
 * Add another `body.postid-NNNN ...` selector group here to extend the look
 * to a new course.
 */

/* Each lesson becomes a white card. */
body.postid-4534 .ld-accordion__item--lesson,
body.postid-4569 .ld-accordion__item--lesson {
	background: #fff !important;
	border: 1px solid #e3e8f0;
	border-radius: 14px;
	margin-bottom: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10, 30, 61, 0.05);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.postid-4534 .ld-accordion__item--lesson:hover,
body.postid-4569 .ld-accordion__item--lesson:hover {
	border-color: #5b8db8;
	box-shadow: 0 4px 14px rgba(10, 30, 61, 0.09);
}

body.postid-4534 .ld-accordion__item-header--lesson,
body.postid-4569 .ld-accordion__item-header--lesson {
	background: transparent !important;
	padding: 6px 8px;
}

/* Lesson title. */
body.postid-4534 .ld-accordion__item-title--lesson,
body.postid-4569 .ld-accordion__item-title--lesson {
	color: #0a1e3d !important;
	font-weight: 600;
	font-size: 17px;
}

body.postid-4534 .ld-accordion__item-title--lesson:hover,
body.postid-4569 .ld-accordion__item-title--lesson:hover {
	color: #0d1f5c !important;
}

/* "N topics" attribute + icon → steel-blue, quiet. */
body.postid-4534 .ld-accordion__item-attribute--lesson-topics,
body.postid-4569 .ld-accordion__item-attribute--lesson-topics {
	color: #5b8db8;
	font-size: 13px;
}

body.postid-4534 .ld-accordion__item-attribute-icon,
body.postid-4534 .ld-svgicon__lesson,
body.postid-4569 .ld-accordion__item-attribute-icon,
body.postid-4569 .ld-svgicon__lesson {
	fill: #5b8db8;
}

/* Expand / collapse toggle → soft pill. */
body.postid-4534 .ld-accordion__expand-button--lesson,
body.postid-4569 .ld-accordion__expand-button--lesson {
	background: #edf1f7 !important;
	color: #0a1e3d !important;
	border-radius: 9999px;
}

body.postid-4534 .ld-accordion__expand-button--lesson:hover,
body.postid-4569 .ld-accordion__expand-button--lesson:hover {
	background: #dde6f2 !important;
}

/* Nested topic rows → indented, lighter, divided. */
body.postid-4534 .ld-accordion__item--lesson-topic,
body.postid-4569 .ld-accordion__item--lesson-topic {
	background: transparent !important;
	border-top: 1px solid #eef2f8;
}

body.postid-4534 .ld-accordion__item-title--lesson-topic,
body.postid-4569 .ld-accordion__item-title--lesson-topic {
	color: #3a4a63 !important;
	font-weight: 400;
	font-size: 15px;
}

body.postid-4534 .ld-accordion__item-title--lesson-topic:hover,
body.postid-4569 .ld-accordion__item-title--lesson-topic:hover {
	color: #0d1f5c !important;
}

/*
 * Course landing page — emallergy.health hero look (EMAllergy courses ONLY:
 * postid-4534, postid-4569).
 *
 * These course landing pages are Divi-built. The custom intro content lives in
 * the post's own builder layout (`.et-l--post`): a "What You'll Learn" heading,
 * a Divi-Supreme icon list, a text block, and a "Start the Course" button. The
 * icon list + text block carried an ugly grey background
 * (rgba(181,181,181,0.4)) with a hard black drop shadow — the "grey boxes".
 *
 * Recreate the emallergy.health landing hero: the actual restaurant photo
 * (images/landing/hero-restaurant.webp, hosted locally) under a navy overlay,
 * the two boxes as frosted-glass cards with light text, and the LearnDash
 * content accordion below kept as white cards so it pops against the hero.
 *
 * Selectors target module TYPES inside `.et-l--post` (not Divi's auto-numbered
 * `_N` classes, which change whenever the page is edited) so they keep working.
 */

/* Backstop: navy behind everything on these pages. */
body.postid-4534,
body.postid-4569 {
	background-color: #0a1e3d !important;
}

/* Hero photo + navy overlay. #main-content (and every .et_pb_section) defaults
   to white in Divi, so the hero goes on #main-content and the content sections
   are made transparent to let it show. Header/footer keep their own styles. */
body.postid-4534 #main-content,
body.postid-4569 #main-content {
	background-color: #0a1e3d !important;
	background-image:
		linear-gradient(to bottom, rgba(10, 30, 61, 0.68) 0%, rgba(13, 31, 92, 0.52) 45%, rgba(10, 30, 61, 0.66) 100%),
		url("../img/hero-restaurant.webp") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
}

body.postid-4534 .et-l--body .et_pb_section,
body.postid-4569 .et-l--body .et_pb_section {
	background-color: transparent !important;
}

/* Grey boxes → frosted-glass cards over the hero. */
body.postid-4534 .et-l--post .dsm_icon_list,
body.postid-4534 .et-l--post .et_pb_text,
body.postid-4569 .et-l--post .dsm_icon_list,
body.postid-4569 .et-l--post .et_pb_text {
	background-color: rgba(10, 22, 52, 0.72) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 16px !important;
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38) !important;
	padding: 26px 28px !important;
}

/* Text inside the glass cards → light (readable on the dark glass). */
body.postid-4534 .et-l--post .et_pb_text,
body.postid-4534 .et-l--post .et_pb_text *,
body.postid-4534 .et-l--post .dsm_icon_list_text,
body.postid-4569 .et-l--post .et_pb_text,
body.postid-4569 .et-l--post .et_pb_text *,
body.postid-4569 .et-l--post .dsm_icon_list_text {
	color: #f3f6fc !important;
}

/* Icon-list glyphs → steel-blue accent (matches emallergy). */
body.postid-4534 .et-l--post .dsm_icon_list_icon,
body.postid-4534 .et-l--post .dsm_icon_list_icon *,
body.postid-4569 .et-l--post .dsm_icon_list_icon,
body.postid-4569 .et-l--post .dsm_icon_list_icon * {
	color: #9fc4e8 !important;
}

/* "Start the Course" button → clean white card button (kills the black shadow). */
body.postid-4534 .et-l--post .et_pb_button,
body.postid-4569 .et-l--post .et_pb_button {
	background-color: #ffffff !important;
	color: #0a1e3d !important;
	border-color: #ffffff !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

/* Text sitting directly on the hero → white + soft shadow for legibility over
   the photo. The `#main-content` id and `h2` qualifiers are required to beat
   Divi Theme Builder's `.et_pb_post_content_NNN h1,h2,h3{color:#030684!important}`
   rule (which carries the #et-boc id). The white-card lesson rows in the
   accordion keep their dark navy titles (styled above). */
body.postid-4534 #main-content .et-l--post h2.et_pb_module_heading,
body.postid-4534 #main-content .ld-accordion--course h2.ld-accordion__heading,
body.postid-4534 #main-content .ld-accordion--course .ld-accordion__expand-button--all,
body.postid-4534 #main-content .ld-accordion__subheading,
body.postid-4534 #main-content .ld-course-status,
body.postid-4534 #main-content .ld-course-status *,
body.postid-4569 #main-content .et-l--post h2.et_pb_module_heading,
body.postid-4569 #main-content .ld-accordion--course h2.ld-accordion__heading,
body.postid-4569 #main-content .ld-accordion--course .ld-accordion__expand-button--all,
body.postid-4569 #main-content .ld-accordion__subheading,
body.postid-4569 #main-content .ld-course-status,
body.postid-4569 #main-content .ld-course-status * {
	color: #ffffff !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

/* Contact Us title (in the footer, outside #main-content) → white. */
body.postid-4534 .et_pb_contact_main_title,
body.postid-4569 .et_pb_contact_main_title {
	color: #ffffff !important;
}