/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

@media (min-width: 767px) {
	 .desktop-hidden {
		 display: none;
	}
}
 .bricks-nav-menu {
	 align-items: center;
}
 .bricks-mobile-menu .icon-menu a {
	 display: flex;
	 gap: var(--space-xs);
	 align-items: center;
}
 .header-logo__wrapper .header-logo:first-child {
	 height: 100%;
}
 .header-logo__wrapper .header-logo:last-child {
	 height: 0px;
}
 .header-logo--text {
	 transition: all 0.3s ease-in-out;
}
 .scrolling .header-logo--text {
	 color: var(--text-light) !important;
}
 .scrolling .fr-header-alpha {
	 padding-top: var(--space-xs);
	 padding-bottom: var(--space-xs);
}
 .scrolling .header-logo__wrapper:before {
	 transform: scaleX(1) scaleY(1);
}
 .scrolling .header-logo__wrapper .header-logo:first-child {
	 height: 0px;
}
 .scrolling .header-logo__wrapper .header-logo:last-child {
	 height: 100%;
}
 .fr-blog-post-delta__post-content {
	 gap: var(--space-s);
}
 .fr-blog-post-delta__post-content > {
	/*img, table {
		 margin-block: var(--space-s);
	}
	*/
}
 .fr-blog-post-delta__post-content > ol {
	 padding-inline-start: 15px;
}
 .fr-blog-post-delta__post-content li, .fr-blog-post-delta__post-content p {
	 color: var(--neutral-semi-dark);
	 font-size: var(--text-s);
}
 .fr-blog-post-delta__post-content li::marker {
	 color: var(--primary-dark);
	 font-weight: bold;
}
 .fr-blog-post-delta__post-content li:not(:last-child) {
	 margin-block-end: var(--space-m);
}
 .fr-blog-post-delta__post-content li > ul, .fr-blog-post-delta__post-content li > ol {
	 padding-inline-start: 40px;
}
 .fr-blog-post-delta__post-content li > p:not(:last-child) {
	 margin-block: var(--space-xs);
}
 .fr-blog-post-delta__post-content h2, .fr-blog-post-delta__post-content h3 {
	 text-transform: capitalize;
	 color: var(--primary-dark);
	 margin-block-end: var(--space-xs);
}
 .fr-blog-post-delta__post-content h2 {
	 font-size: var(--h4);
}
 .fr-blog-post-delta__post-content h3 {
	 font-size: var(--h5);
}
 .fr-blog-post-delta__post-content p {
	/*&:not(:last-child) {
		 margin-block: var(--space-xs);
	}
	 &:last-child {
		 margin-block-start: var(--space-xs);
	}
	*/
}
 .fr-blog-post-delta__post-content p a {
	 color: var(--primary-ultra-dark);
	 text-decoration: underline;
}
 #brxe-qjoqls .splide__pagination {
	 inline-size: 100%;
}
 #brxe-qjoqls .splide__pagination .splide__pagination__page {
	 border-radius: 5px;
	 height: 3px;
	 transition: all 0.3s ease-in-out;
}
 #brxe-qjoqls .splide__pagination .splide__pagination__page.is-active {
	 width: 100px;
}
/* Response message styling */
 #responseMessageShow {
	 margin-top: 20px;
	 padding: 10px;
	 border-radius: 5px;
	/* Hidden by default */
}
 .success {
	 background-color: #d4edda;
	 color: #155724;
	 border: 1px solid #c3e6cb;
}
 .error {
	 background-color: #f8d7da;
	 color: #721c24;
	 border: 1px solid #f5c6cb;
}
/* Container styling */
 #lms-form-container {
	 max-width: 600px;
	 margin: 0 auto;
	 font-family: "EcoWorldSerif";
}
/* General form element spacing */
 #lms-integration-form p {
	 margin-bottom: 15px;
}
/* Input and select field styling */
 #lms-integration-form input[type="text"], #lms-integration-form input[type="email"], #lms-integration-form select {
	 inline-size: 100%;
	 padding: var(--space-xs);
	 border: 1px solid #ccc;
	 background-color: #fdf6f2;
	/* Light peach background */
	 border-radius: 3px;
	 font-size: var(--text-xs);
	 color: var(--text-dark-muted);
	 line-height: 1;
}
 #lms-integration-form label[for="consent"] {
	 font-size: var(--text-xs);
	 color: var(--text-dark-muted);
}
/* Make placeholder text darker */
 #lms-integration-form ::-webkit-input-placeholder {
	 color: #444;
	/* Single color for entire placeholder, including the asterisk */
}
 #lms-integration-form :-ms-input-placeholder {
	 color: #444;
}
 #lms-integration-form ::-ms-input-placeholder {
	 color: #444;
}
 #lms-integration-form ::placeholder {
	 color: #444;
}
/* HACK (commented out): If you truly need the asterisk in a different color, partial coloring in placeholders isn’t supported by standard CSS. You could attempt something like this, but it often doesn't work reliably: #lms-integration-form input[type="text"]::placeholder {
	 color: #444;
}
 #lms-integration-form input[type="text"]::placeholder:after {
	 content: "*";
	 color: #e74c3c;
}
 This approach is not fully supported across browsers and can lead to unexpected behavior. Using labels with a red asterisk is the best practice. */
/* Checkbox spacing */
 #lms-integration-form input[type="checkbox"] {
	 margin-inline-end: 8px;
}
/* Submit button styling */
 #lms-integration-form input[type="submit"] {
	 background: #c44027;
	 background: linear-gradient(135deg, rgba(196, 64, 39, 1) 0%, rgba(190, 60, 37, 1) 23%, rgba(176, 51, 34, 1) 50%, rgba(152, 36, 29, 1) 80%, rgba(132, 24, 25, 1) 100%);
	 color: #fff;
	 border: none;
	 padding: 14px 28px;
	 border-radius: 4px;
	 font-size: 16px;
	 cursor: pointer;
	 text-transform: capitalize;
	 font-weight: 700;
	 inline-size: 100%;
	 text-align: center;
}
 #lms-integration-form input[type="submit"]:hover {
	 background-color: #cc6d3b;
	/* Slightly darker on hover */
}
 #lms-integration-form a {
	 color: var(--text-dark-muted);
	 text-decoration: underline;
}

:where(ul#menu-main-menu) li.menu-item {
	/* optional hover classes used with animation */
}
 :where(ul#menu-main-menu) li.menu-item a {
	 text-decoration: none;
	 position: relative;
}
 :where(ul#menu-main-menu) li.menu-item a::after {
	 position: absolute;
	 content: "";
	 height: 2px;
	/* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
	 bottom: -2px;
	/****** optional values below ******/
	/* center - (optional) use with adjusting width */
	 margin: 0 auto;
	 left: 0;
	/* right: 0;
	 */
	 width: 0%;
	 background: var(--primary);
	/* optional animation */
	 -o-transition: 0.3s;
	 -ms-transition: 0.3s;
	 -moz-transition: 0.3s;
	 -webkit-transition: 0.3s;
	 transition: 0.3s;
}
 :where(ul#menu-main-menu) li.menu-item a:hover::after {
	 width: 100%;
	/* background: orange;
	 */
}
 :where(ul#menu-main-menu) li.menu-item-has-children > ul.sub-menu li.menu-item > a::after {
	 display: none;
}
 :where(ul#menu-main-menu) li.menu-item-has-children > ul.sub-menu li.menu-item:hover {
	 background-color: var(--primary);
}

#responseMessage {
	display: none;
}