styles.css

/* Style for Edly page title to match lesson title */
.unit-title {
	font-size: 1.8em !important;
	font-family: 'Quicksand', sans-serif !important;
	color: #CD2355 !important;
	font-weight: 900 !important;
	text-align: center !important;
	margin-bottom: 20px !important;
	box-sizing: border-box;
	text-transform: none !important; /* Remove forced uppercase */
}

/* Lesson Heading */
#rpf-lesson-title {
	font-size: 1.8em !important;
	font-family: 'Quicksand', sans-serif !important;
	color: #CD2355 !important;
	font-weight: 900 !important;
	text-align: center !important;
	margin-bottom: 20px !important;
	box-sizing: border-box;
	text-transform: none !important; /* Remove forced uppercase */
}

/* General Paragraph Text */
.rpf-text {
	font-size: 16px;
	font-family: 'Quicksand', sans-serif !important;
	color: #222222;
	line-height: 1.6;
	margin-bottom: 20px;
	box-sizing: border-box;
}

/* Block styling for alignment */
.notes, .task, .learn, .transcript, .video {
	position: relative;
	align-items: center; /* Vertically align icon and title */
	padding: 20px; /* Add consistent padding */
	border-radius: 8px; /* Rounded corners */
	margin-bottom: 20px; /* Space between blocks */
	box-sizing: border-box;
	font-family: 'Quicksand', sans-serif !important; /* Consistent font */
	margin-left: 20px;
	padding-top: 60px !important; /* Add more space at the top for icon and title */
}

/* Icon styling */
.notes::before, .task::before, .learn::before, .transcript::before, .video::before {
	font-family: "Font Awesome 6 Free"; /* Font Awesome for icons */
	font-weight: 900; /* Solid icons */
	font-size: 24px; /* Icon size */
	position: absolute;
	top: 15px !important;
	left: 15px !important;
	color: inherit; /* Match the block's color */
}

/* Title text styles */
.learn::after, .notes::after, .task::after, .transcript::after, .video::after {
	content: attr(data-title); /* Pull title text dynamically */
	position: absolute;
	top: 15px !important;
	left: 60px !important; /* Spaced to the right of the icon */
	font-size: 28px; /* Title size */
	font-weight: 700; /* Bold text */
	color: inherit; /* Match the block's color */
	margin-bottom: 20px !important; /* Adds spacing below title and icon */
}

/* Specific block styles */
.learn {
	background-color: #FCF3F6;
	border: 2px solid #CD2355;
	color: #CD2355; /* Title text and icon color */
}

.learn::before {
	content: "\f02d"; /* Font Awesome Book icon */
}

.notes {
	background-color: #EDF7EE;
	border: 2px solid #317C35;
	color: #317C35;
}

.notes::before {
	content: "\f27a"; /* Font Awesome Comment icon */
}

.task {
	background-color: #F4EEF7;
	border: 2px solid #6B3687;
	color: #6B3687;
}

.task::before {
	content: "\f14a"; /* Font Awesome Tick box icon */
}

.video::before {
	content: "\f03d"; /* Font Awesome play icon */
}

.video {
	background-color: #FFF3E6;
	border: 2px solid #FD8D16;
	color: #FD8D16; /* Title and icon color */
}

/* Center-align iframe inside the Video Block */
.video iframe {
    display: block; /* Ensures proper alignment */
    margin: 0 auto; /* Center horizontally */
    background-color: #FFF3E6; /* Background color for iframe area */
    padding: 0; /* Remove extra padding */
    border: none; /* No border on iframe */
}

.transcript {
	background-color: #FFF3E6;
	border: 2px solid #FD8D16;
	color: #FD8D16; /* Title and icon color */
}

.transcript::before {
	content: "\f70e"; /* Font Awesome Scroll icon */
}

/* h2 Header styling specific to blocks */
.notes h2 {
	color: #317C35 !important; /* Notes header color */
	font-family: 'Quicksand', sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	margin-top: 10px !important;
	margin-bottom: 15px !important;
	text-transform: none !important; /* Remove forced uppercase */
}

.task h2 {
	color: #6B3687 !important; /* Task header color */
	font-family: 'Quicksand', sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	margin-top: 10px !important;
	margin-bottom: 15px !important;
	text-transform: none !important; /* Remove forced uppercase */
}

.learn h2 {
	color: #CD2355 !important; /* Learn header color */
	font-family: 'Quicksand', sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	margin-top: 10px !important;
	margin-bottom: 15px !important;
	text-transform: none !important; /* Remove forced uppercase */
}

/* h2 styling specific to Transcript Block */
.transcript h2, .video h2 {
    color: #CD2355 !important; /* Transcript header color */
    font-family: 'Quicksand', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    text-transform: none !important;
}

/* h3 Header styling specific to blocks */
.notes h3, .task h3, .learn h3, .video h3, .transcript h3 {
	color: #222222 !important;
	font-family: 'Quicksand', sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	margin-top: 10px !important;
	margin-bottom: 15px !important;
	text-transform: none !important; /* Remove forced uppercase */
}

/* Paragraph styling */
.notes p, .task p, .learn p, .video p, .transcript p {
    font-family: 'Quicksand', sans-serif !important;
    margin-top: 10px !important;
    color: #222222 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* Collapsible Button */
details summary {
    background-color: #232D9A;
    color: white;
    font-size: 20px;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: bold;
    padding: 20px 20px;
    border-radius: 8px;
    width: auto; /* Allow the button to size based on content */
    max-width: calc(100% - 80px); /* Prevent the button from exceeding the screen width, accounting for left/right margins */
    margin: 0 auto; /* Center the button horizontally */
    box-sizing: border-box;
    display: block;
    text-align: center; /* Ensure text is centered */
    cursor: pointer;
}

details[open] summary {
	background-color: #232E9B;
	margin-bottom: 0px !important; /* Reduce margin between button and content */
}

details summary:hover {
    background-color: #232E9B;
}

/* Add spacing between the closed button and the next content */
details:not([open]) {
    margin-bottom: 20px !important; /* Adds spacing when content is hidden */
}

/* Collapsible Content */
details .content {
	background-color: #E7F8F7;
	font-family: 'Quicksand', sans-serif !important;
	padding: 20px; /* Add padding for better spacing */
	border-left: 5px solid #CD2355;
	margin: 0 auto; /* Center the content block */
	max-width: calc(100% - 80px); /* Prevent the content from overflowing the block */
	color: #222222;
	box-sizing: border-box;
	display: block;
	overflow: hidden !important; /* Prevents overflowing elements */
}

/* Add spacing below the collapsible detailed content when open */
details[open] .content {
    margin-bottom: 30px; /* Increase spacing between content box and next page content */
}

.content iframe {
	width: 100% !important;
	max-width: 100% !important;  /* Prevent any width restrictions */
	height: calc(100vw * 9 / 16);  /* Keep a 16:9 aspect ratio */
	max-height: 700px;  /* Limit max height for larger screens */
	margin: 0 auto !important;  /* Center the iframe */
	padding: 0 !important;
	border: none;
	overflow: hidden !important; /* Prevents overflowing elements */
}

/* Specific adjustment for portrait documents */
.content.portrait iframe {
	height: calc(100vw * 16 / 9);  /* Inverts aspect ratio for portrait documents */
}

/* General Video Block Container */
.xblock.xmodule_VideoBlock {
	background-color: #F4EEF7;
	padding: 20px;
	border-radius: 8px;
	box-sizing: border-box; 
}

/* Override the grey background on the video block */
.xmodule_display.xmodule_VideoBlock .video {
	background: #F4EEF7 !important;
	margin: 0 !important;
	padding: 12px !important;
	border-radius: 5px !important;
	outline: none !important;
	box-sizing: border-box;
}

/* General Video Block Title */
.xblock.xmodule_VideoBlock .hd-2 {
	color: #CD2355;
	font-family: 'Quicksand', sans-serif;
	font-size: 24px;
	font-weight: 700;
	box-sizing: border-box;
}

/* General Transcript Container */
.subtitles {
	background-color: #FCF3F6;
	padding: 15px;
	color: #222222;
	border-radius: 8px;
	border-left: 5px solid #CD2355;
	box-sizing: border-box;
}

/* Transcript text */
.subtitles ol.subtitles-menu span {
	color: #222222;
	font-size: 16px;
	font-family: 'Quicksand', sans-serif;
	line-height: 1.6;
	box-sizing: border-box;
}

/* Transcript Heading */
.subtitles h3 {
	color: #CD2355;
	font-size: 18px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	box-sizing: border-box;
}

/* Transcript Links (for skip to start/end) */
.subtitles a {
	color: #232e9b;
	text-decoration: underline;
	box-sizing: border-box; 
}

.subtitles a:hover {
	color: #c51d4a;
	box-sizing: border-box;
}

/* Style for the image container */
.image-container {
	text-align: center; /* Centers the image and the caption */
	margin-bottom: 20px; /* Adds space below the image */
}

/* Style for the image */
.images {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
	padding-bottom: 15px; /* Small padding below the image */
}

/* Style for the image caption */
.image-caption {
	font-size: 12px; /* Makes the caption smaller */
	font-family: 'Quicksand', sans-serif !important;
	color: #777; /* Muted text color */
	text-align: center;
	margin-top: 5px; /* Small margin between the image and caption */
	padding: 0; /* Minimal padding */
}

/* Custom Link Styling */
a {
	color: #C51D4A;
	text-decoration: none;
	box-sizing: border-box;
}

a:hover, a:active {
	color: #232E9B;
	box-sizing: border-box;
}

/* Table Styling */

/* General Table Styling */
.table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-sizing: border-box;
    border: 2px solid #CD2355 !important; /* Outer table border */
}

/* Header Row Styling */
.table th {
    background-color: #CD2355 !important; /* Header row background */
    color: white !important; /* Header row text color */
    font-weight: bold !important; /* Make header text bold */
    padding: 10px;
    text-align: left;
    box-sizing: border-box;
}

/* Table Cell Styling */
.table th, 
.table td {
    border: 1px solid #CD2355 !important; /* 1px border around all cells */
    padding: 10px;
    text-align: left;
    box-sizing: border-box;
}

/* Specific adjustments for lists to ensure alignment with other text */
ul, ol {
    color: #222222 !important; /* Match body text color */
    font-size: 16px; /* Same font size as body text */
    font-family: 'Quicksand', sans-serif !important; /* Apply the same font */
    line-height: 1.6 !important; /* Match line-height for readability */
    margin-left: 20px !important; /* Reduce indentation slightly */
    margin-right: 20px !important;
    margin-bottom: 20px !important; /* Add spacing after the list */
}

/* Bullet styling for unordered lists */
ul {
    list-style-type: disc !important; /* Ensure unordered lists use bullets */
}

/* Ensure ordered lists (numbered) remain default */
ol {
    list-style-type: decimal !important; /* Ensure ordered lists use numbers */
}

/* General list item styling */
ul li, ol li {
    margin-bottom: 0px !important; /* Add spacing between list items */
}