/*
 * 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;
}

/* ──────────────────────────────────────────────────────────────────────────
 * EMAllergy lesson tables — match the "Plans at a Glance" styling from the
 * onboarding docx (scratch/generate-onboarding-docx.cjs):
 *   - navy header (#0D1F5C) with white, bold text
 *   - zebra rows: white / #F0F2F7 (docx LIGHT_GREY)
 *   - bold first column (the feature name)
 * Scoped to the .emallergy-table class so it never leaks to other content.
 * Add the class to any lesson <table> to give it the same look.
 * ────────────────────────────────────────────────────────────────────────── */
.emallergy-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 15px;
	line-height: 1.5;
	color: #1a2238;
	border: 1px solid #d8deeb;
}

.emallergy-table thead th {
	background-color: #0D1F5C;
	color: #ffffff;
	font-weight: 700;
	text-align: left;
	padding: 10px 14px;
	border: 1px solid #0D1F5C;
}

.emallergy-table tbody td {
	padding: 9px 14px;
	border: 1px solid #e3e8f2;
	vertical-align: top;
}

/* Zebra striping — first data row white, alternating #F0F2F7 (docx LIGHT_GREY). */
.emallergy-table tbody tr:nth-child(even) td {
	background-color: #F0F2F7;
}

/* First column = the feature/label, bold to match the docx. */
.emallergy-table tbody td:first-child {
	font-weight: 700;
	color: #0D1F5C;
}

/* The plan-comparison table centres its value columns for at-a-glance reading. */
.emallergy-plan-table thead th:not(:first-child),
.emallergy-plan-table tbody td:not(:first-child) {
	text-align: center;
}

/* Keep the table usable on narrow screens. */
@media (max-width: 600px) {
	.emallergy-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * Mobile overflow guard — lesson & quiz screens.
 *
 * Phone learners hit a stuck-zoom bug: rotate to landscape for the video, back
 * to portrait for the quiz, and the page no longer fit (pinch wouldn't recover
 * it). The trigger is content wider than the viewport, so the browser zooms out
 * and iOS leaves the zoom stuck on rotate-back. Cap every media element and
 * table at the screen width and wrap long answer text so nothing forces a
 * horizontal scroll. (Pinch-zoom itself is re-enabled in core/mobile-fixes.php.)
 * ────────────────────────────────────────────────────────────────────────── */
.learndash-wrapper img {
	max-width: 100% !important;
	height: auto;
}

.learndash-wrapper video,
.learndash-wrapper iframe,
.learndash-wrapper table {
	max-width: 100% !important;
}

.learndash-wrapper p,
.learndash-wrapper li,
.learndash-wrapper h1,
.learndash-wrapper h2,
.learndash-wrapper h3,
.learndash-wrapper h4,
.learndash-wrapper .wpProQuiz_question,
.learndash-wrapper .wpProQuiz_question_text,
.learndash-wrapper .wpProQuiz_questionListItem,
.learndash-wrapper .wpProQuiz_questionListItem label {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Quiz/lesson HEADINGS must wrap, never run off the right edge.
 *
 * Reported on Android portrait: the quiz title ("Responding to Medical
 * Emergencies Quiz") sat off the page. The page/focus-mode title can carry a
 * large Divi font-size and — depending on the theme-builder layout — a
 * white-space:nowrap, so a long title overflows instead of wrapping. Force
 * wrapping on every heading that titles a quiz/lesson, including the focus-mode
 * header bar and the Divi post-title module on quiz pages.
 * ────────────────────────────────────────────────────────────────────────── */
.learndash-wrapper h1,
.learndash-wrapper h2,
.learndash-wrapper h3,
.wpProQuiz_header,
.wpProQuiz_content .wpProQuiz_header,
.ld-focus-header .ld-focus-header__heading,
.ld-focus-header .ld-focus-title,
body.single-sfwd-quiz .et_pb_title_container h1,
body.single-sfwd-quiz h1.entry-title,
body.single-sfwd-quiz .et_pb_post_title .et_pb_title_container h1 {
	max-width: 100%;
	white-space: normal !important;   /* defeat any inherited nowrap */
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

/* Shrink oversized headings to fit small screens so a long title never
   overflows even before wrapping kicks in. */
@media (max-width: 600px) {
	.learndash-wrapper h1,
	.wpProQuiz_header,
	.ld-focus-header .ld-focus-header__heading,
	.ld-focus-header .ld-focus-title,
	body.single-sfwd-quiz .et_pb_title_container h1,
	body.single-sfwd-quiz h1.entry-title {
		font-size: clamp(1.25rem, 6vw, 1.8rem) !important;
		line-height: 1.25 !important;
	}
}

/* On phones/tablets, stop any LearnDash content page (course / lesson / topic /
   quiz — all carry the `learndash-cpt` body class) from being wider than the
   screen. The St Basil's quiz renders inline on its course page (NOT in focus
   mode), so an earlier focus-mode-only guard missed it: the page picked up a
   horizontal overflow from LearnDash's modern layout and the course title was
   pushed off the right edge in portrait. Constrain the main containers and the
   media inside them, then clip any residual overflow. */
@media (max-width: 980px) {
	html,
	body.learndash-cpt {
		max-width: 100%;
		overflow-x: hidden;
	}

	body.learndash-cpt #page-container,
	body.learndash-cpt #et-main-area,
	body.learndash-cpt .et-l--body,
	body.learndash-cpt .et_builder_inner_content,
	body.learndash-cpt .learndash-wrapper,
	body.ld-in-focus-mode,
	body.ld-in-focus-mode #main-content {
		max-width: 100% !important;
		overflow-x: hidden;
	}

	/* Catch images/media that sit in Divi modules outside .learndash-wrapper
	   (e.g. the course logo) — these can be the element forcing the overflow. */
	body.learndash-cpt img,
	body.learndash-cpt video,
	body.learndash-cpt iframe,
	body.learndash-cpt table {
		max-width: 100% !important;
	}
	body.learndash-cpt img {
		height: auto;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * LearnDash FOCUS MODE (the lesson-video + quiz screens) — flexbox shrink fix.
 *
 * THE actual cause of the "quiz heading runs off the page in portrait" report.
 * `.ld-focus` is display:flex, but its child Divi wrapper `#et-boc` (a flex
 * item) keeps the default `min-width: auto`, so it refuses to shrink below the
 * intrinsic width of the prev/next navigation inside it (~598px). On a phone
 * that 598px block overflows the 390px viewport and the quiz title, breadcrumb
 * and progress bar get clipped off the right edge.
 *
 * The standalone quiz page renders with body `single-sfwd-quiz` — it carries
 * NEITHER `ld-in-focus-mode` NOR `learndash-cpt`, which is why earlier
 * body-class-scoped guards never touched it. Scope to `.ld-focus` itself and
 * let the whole flex chain collapse to the viewport width.
 * Verified with headless Chrome at 390px: #et-boc 599px → 390px after this.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
	.ld-focus {
		min-width: 0 !important;
	}
	.ld-focus > .et-boc,
	.ld-focus #et-boc,
	.ld-focus .ld-focus-main,
	.ld-focus .ld-focus-header,
	.ld-focus .ld-focus-content {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Let the prev/next nav row shrink (and its buttons wrap) instead of
	   forcing the whole layout to its intrinsic width. */
	.ld-focus .ld-content-actions,
	.ld-focus .ld-content-action {
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * Lesson & course PROSE lists — restore bullets / numbers.
 *
 * LearnDash's frontend CSS resets every list inside `.learndash-wrapper`
 * (`list-style:none; padding:0; margin:0`). On Divi-built lessons the body
 * copy lives in `.et_pb_text_inner` modules *inside* that wrapper, so the
 * reset strips the markers — bulleted lists rendered as flat, marker-less
 * lines (reported on the Bushfire course's "Health and Safety
 * Responsibilities" lesson).
 *
 * Re-assert disc/decimal markers, but ONLY inside Divi text modules
 * (`.et_pb_text_inner`) so LearnDash's own UI lists (navigation, the lesson
 * accordion, quiz answer lists) keep their intentional reset. Specificity
 * (.learndash-wrapper .et_pb_text_inner ul) beats LearnDash's reset; the
 * `!important` is belt-and-braces against load order.
 * ────────────────────────────────────────────────────────────────────────── */
.learndash-wrapper .et_pb_text_inner ul,
body.learndash-cpt .et_pb_text_inner ul {
	list-style: disc outside !important;
	padding-left: 1.6em;
	margin: 0 0 1em;
}
.learndash-wrapper .et_pb_text_inner ol,
body.learndash-cpt .et_pb_text_inner ol {
	list-style: decimal outside !important;
	padding-left: 1.6em;
	margin: 0 0 1em;
}
.learndash-wrapper .et_pb_text_inner li,
body.learndash-cpt .et_pb_text_inner li {
	display: list-item;
	margin-bottom: 6px;
}
.learndash-wrapper .et_pb_text_inner ul ul,
body.learndash-cpt .et_pb_text_inner ul ul {
	list-style-type: circle !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Aged Care First Aiders course (postid-5640) — full-width hero landing.
 * The ld30 course page is a two-column layout (content + course sidebar), so
 * the Divi hero in post_content is capped at the content column (~995px of
 * 1280). Drop the sidebar on this course so the content — and the hero photo —
 * fill the full page width. Scoped to this one course by body id.
 * ────────────────────────────────────────────────────────────────────────── */
/* .ld-layout is a CSS grid (grid-template-columns: <content> <sidebar>) — just
   hiding the sidebar leaves its empty track, so collapse the grid to a single
   block-flow column and let the content span the full width. */
body.postid-5640 .ld-layout {
	display: block !important;
}
body.postid-5640 .ld-layout__sidebar {
	display: none !important;
}
body.postid-5640 .ld-layout__content {
	width: 100% !important;
	max-width: 100% !important;
}
/* The Divi Theme Builder body wraps post content in a section capped at
   max-width:1280px and centred, so on screens wider than 1280 the hero sits
   in the middle with margins. Break the hero section out to the full viewport
   width (its ancestors are overflow:visible, so this isn't clipped). */
body.postid-5640 .et_pb_post_content .et_pb_section {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}