/* =========================================================================
 * PART 2: GLOBAL STYLES & COMPONENTS
 * -------------------------------------------------------------------------
 *
 * Author:       NISHANTH RAVINDARAN
 * Company:      Ōumĕon
 * Email:        sentience@oumeon.com
 *
 * Created:      10 October 2025
 * Last Updated: 15 October 2025
 * Version:      1.7.0
 * License:      MIT
 *
 * -----------------------------------------------------------------------------
 *
 * ## DESCRIPTION
 *
 * This file uses the foundational design primitives to apply consistent
 * styling to base HTML elements, reusable components, layout structures, and
 * utility classes across the entire project. It is the primary implementation
 * layer of the design system.
 *
 * -----------------------------------------------------------------------------
 *
 * ## TABLE OF CONTENTS
 *
 * 3.0  BASE & GLOBAL STYLES
 *      3.1  Document Defaults (body)
 *      3.2  Typography Elements (p, h1-h6)
 *      3.3  Link Elements (a)
 *      3.4  List Elements (ul, ol)
 *
 * 4.0  LAYOUT STYLES
 *      4.1  Bricks Builder Layout
 *      4.2  WordPress Block Overrides
 *
 * 5.0  COMPONENT STYLES
 *      5.1  Buttons
 *      5.2  Links (Component)
 *      5.3  Headings & Subheadings (Component)
 *      5.4  Tables (Responsive & Data)
 *      5.5  WordPress Blocks (Quote, Verse, Code, Tags)
 *      5.6  Lists (ToC, Definition List Cards)
 *      5.7  Accordions
 *      5.8  Navigation & Menus
 *      5.9  Products
 *      5.10 Style Guides
 *      5.11 Breadcrumbs
 *      5.12 Dividers
 *
 * 6.0  UTILITY CLASSES
 *      6.1  Sizing & Reading Width
 *      6.2  Layout Helpers
 *      6.3  Typography Helpers
 *      6.4  Visual Effects
 *      6.5  Images & Backgrounds
 *
 * -----------------------------------------------------------------------------
 *
 * ## NAMING CONVENTION
 *
 * Follows a BEM-like methodology for components and utilities:
 * Prefix:   oumeon-
 * Block:    oumeon-{block} (e.g., .oumeon-button)
 * Element:  oumeon-{block}__{element}
 * Modifier: oumeon-{block}--{modifier} (e.g., .oumeon-button--primary)
 *
 * -----------------------------------------------------------------------------
 *
 * ## DEPENDENCIES
 *
 * This file is dependent on `design-system-core.css`.
 * It MUST be loaded AFTER the primitives file to ensure all CSS
 * variables (`--oumeon-*`) are defined and available for use.
 *
 * -----------------------------------------------------------------------------
 *
 * ## LICENSE
 *
 * MIT License
 *
 * © 2025 HYPE FUNDA. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 * -----------------------------------------------------------------------------
 */

/*
==========================================================================
MARK: 3.0 BASE & GLOBAL STYLES
==========================================================================
*/

/*
 * ------------------------------------------------------------------------
 * MARK: 3.1 Document Defaults (body)
 * ------------------------------------------------------------------------
 */

:where(body:not([data-builder-window="main"])) {
	text-rendering: optimizeLegibility;
	font-family:
		var(--oumeon-font-family__brand--body),
		var(--oumeon-font-family__default--sans);
	font-size: var(--oumeon-font-size--base);
	background: var(--oumeon-colour-neutral-0);
	color: var(--oumeon-colour-neutral-1000);
	line-height: var(--oumeon-line-height--500);
	letter-spacing: var(--oumeon-letter-spacing--500);
	min-height: var(--oumeon-viewport-height--min);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 3.2 Typography Elements (p, h1-h6)
 * ------------------------------------------------------------------------
 */

/**
 * All base element styling is wrapped in :where() to reduce its 
 * specificity to zero. This ensures that any custom class (Specificity: 0,1,0)
 * added to an element in the builder will always override these defaults.
 * The body:not() selector is kept to exclude the Bricks editor canvas.
 */

/* --- Global Paragraph Style --- */
/* Specificity: Zero (ensures any custom class/ID on <p> wins) */
:where(body:not([data-builder-window="main"])) p {
	font-weight: var(--oumeon-font-weight--400);
}

/* --- Common Heading Styles (H1-H6) --- */
/* Specificity: Zero (ensures any custom class/ID on h-tags wins) */
:where(body:not([data-builder-window="main"])) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--oumeon-colour-neutral-1000);
	letter-spacing: var(--oumeon-letter-spacing--500);
	text-align: left;
}

/* --- Margins Override (Fixing Bricks Default) --- */
/* This rule must remain outside a general :where() to have enough specificity 
   to override the Bricks default margin setting. */
:where(p:last-of-type) + :is(h1, h2, h3, h4, h5, h6) {
	/* Reset the margin added when a heading follows the last paragraph */
	margin-block: 0 !important;
}

/* --- Common H2-H6 Styles (Weight/Transform) --- */
:where(body:not([data-builder-window="main"])) :is(h2, h3, h4, h5, h6) {
	font-family:
		var(--oumeon-font-family__brand--subheading),
		var(--oumeon-font-family__default--serif);
	font-weight: var(--oumeon-font-weight--600);
	text-transform: uppercase;
}

/* --- Line Height Groups --- */
:where(body:not([data-builder-window="main"])) :is(h1, h2, h3) {
	line-height: var(--oumeon-line-height--200);
}

:where(body:not([data-builder-window="main"])) :is(h4, h5) {
	line-height: var(--oumeon-line-height--300);
}

/* --- Individual Heading Sizes and Final Overrides --- */
:where(body:not([data-builder-window="main"])) h1 {
	font-family:
		var(--oumeon-font-family__brand--heading),
		var(--oumeon-font-family__default--sans);
	font-size: var(--oumeon-font-size--5xl);
	font-weight: var(--oumeon-font-weight--700);
	text-transform: uppercase;
}

:where(body:not([data-builder-window="main"])) h2 {
	font-size: var(--oumeon-font-size--4xl);
}

:where(body:not([data-builder-window="main"])) h3 {
	font-size: var(--oumeon-font-size--3xl);
}

:where(body:not([data-builder-window="main"])) h4 {
	font-size: var(--oumeon-font-size--2xl);
}

:where(body:not([data-builder-window="main"])) h5 {
	font-size: var(--oumeon-font-size--xl);
}

:where(body:not([data-builder-window="main"])) h6 {
	font-size: var(--oumeon-font-size--l);
	line-height: var(--oumeon-line-height--400);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 3.3 Link Elements (a)
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Global Link Styles    */
/* #################################### */

:where(
		body:not([data-builder-window="main"]) :is(.brxe-post-content, .brxe-text)
	)
	a:not([class]) {
	color: var(--oumeon-colour-primary-500);
	text-decoration: underline;
	transition: color 0.2s ease;
}

:where(
		body:not([data-builder-window="main"]) :is(.brxe-post-content, .brxe-text)
	)
	a:not([class]):hover {
	color: var(--oumeon-colour-primary-600);
}

:where(
		body:not([data-builder-window="main"]) :is(.brxe-post-content, .brxe-text)
	)
	a:not([class]):visited {
	color: var(--oumeon-colour-purple-500);
}

/* #################################### */
/* MARK: Footer Styles    */
/* #################################### */

/* This rule targets any link inside the footer */
:where(body:not([data-builder-window="main"])) #brx-footer a {
	/* #brx-footer still contributes to ID specificity (1,0,0) */
	/* --- 1. Reset the "button-like" styles --- */
	display: inline;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	/* --- 2. Apply simple text-link styles --- */
	color: inherit;
	text-decoration: underline;
}

/* --- 3. Define a simple hover state for footer links --- */
:where(body:not([data-builder-window="main"])) #brx-footer a:hover {
	background-color: transparent;
	transform: none;
	color: var(--oumeon-colour-primary-500);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 3.4 List Elements (ul, ol, dl)
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: WordPress Default Lists        */
/* #################################### */

/* --- Reset both lists to a common base --- */
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-product-content, .brxe-text)
	)
	:is(ul, ol) {
	list-style: none;
	padding-left: 0; /* Use padding-left for better RTL support */
}

/* --- Set consistent indentation and positioning for all list items --- */
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-product-content, .brxe-text)
			:is(ul, ol)
	)
	li {
	position: relative;
	padding-left: 30px;
	margin-bottom: var(--oumeon-space--350);
}

:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-product-content, .brxe-text)
			:is(ul, ol)
	)
	li::before {
	position: absolute;
	left: 0;
}

/* #################################### */
/* MARK: Square Unordered Lists         */
/* #################################### */

/* --- Style the custom SQUARE bullet for UNORDERED lists --- */
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-product-content, .brxe-text)
	)
	ul
	li::before {
	content: "";
	top: 0.6em;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background-color: var(--oumeon-colour-primary-500);
}

/* #################################### */
/* MARK: Default Ordered Lists          */
/* #################################### */

/* Initialize a counter for the ordered list */
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-product-content, .brxe-text)
	)
	ol {
	counter-reset: list-counter;
}

/* Increment the counter for each list item */
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-product-content, .brxe-text)
	)
	ol
	li {
	counter-increment: list-counter;
}

/* Display the counter as a custom styled number */
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-product-content, .brxe-text)
	)
	ol
	li::before {
	content: counter(list-counter) "."; /* Displays "1.", "2.", etc. */
	top: 0; /* Align with the very top of the line */
	width: 20px; /* Fixed width to prevent text shifting on double-digit numbers */
	text-align: right; /* Aligns the number correctly (e.g., 9. and 10.) */
	color: var(--oumeon-colour-neutral-1000);
	font-weight: var(--oumeon-font-weight--500);
}

/* #################################### */
/* MARK: WordPress Default Lists           */
/* #################################### */

:where(body:not([data-builder-window="main"]))
	:is(
		.wp-block-list,
		.wsp-pages-list,
		.wsp-services-list,
		.wsp-posts-list,
		.wsp-authors-list,
		.wsp-tags-list,
		.wsp-solutions-list,
		.wsp-policy-hubs-list
	) {
	font-size: var(--oumeon-font-size--base);
	line-height: var(--oumeon-line-height--500);
	margin: var(--oumeon-space--500) var(--oumeon-space--400);
}

:where(body:not([data-builder-window="main"]))
	:is(
		.wp-block-list li,
		.wsp-pages-list li,
		.wsp-services-list li,
		.wsp-posts-list li,
		.wsp-authors-list li,
		.wsp-tags-list li,
		.wsp-solutions-list li,
		.wsp-policy-hubs-list li
	) {
	margin-bottom: var(--oumeon-space--400);
}

/*
==========================================================================
MARK: 4.0 LAYOUT STYLES
==========================================================================
*/

/*
 * ------------------------------------------------------------------------
 * MARK: 4.1 Bricks Builder Layout
 * ------------------------------------------------------------------------
 */

:where(body:not([data-builder-window="main"])) #brx-content {
	display: flex; /* Turn the content area into a vertical stack */
	flex-direction: column;
	gap: var(--oumeon-space--700); /* Space BETWEEN Sections */

	/* This creates the space between the content and the Header/Footer */
	margin-top: var(--oumeon-space--550);
	margin-bottom: var(--oumeon-space--600);
}

/* --- Default Section Styles --- */
:where(.brxe-section) {
	width: 100%;
	margin-left: auto; /* Center the section */
	margin-right: auto; /* Center the section */
	padding-right: var(--oumeon-space--500);
	padding-left: var(--oumeon-space--500);
}

/* Bricks Container Settings */
:where(.brxe-container) {
	width: calc(100vw - (2 * var(--oumeon-space--500)));
	max-width: calc(
		var(--oumeon-viewport-width--max) - (2 * var(--oumeon-space--500))
	);
	column-gap: var(--oumeon-space--500);
	row-gap: var(--oumeon-space--500);
}

:where(.brxe-block) {
	column-gap: var(--oumeon-space--500);
	row-gap: var(--oumeon-space--500);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 4.2 WordPress Block Overrides
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Headings in Posts   */
/* #################################### */

:where(.wp-block-heading) {
	margin-top: var(--oumeon-space--600);
	margin-bottom: var(--oumeon-space--500);
}

:where(.brxe-post-content h2:first-of-type) {
	margin-top: calc(
		var(--oumeon-space--600) - var(--oumeon-space--500)
	); /* Set margin-top to 0 for the first h2 element */
}

/* #################################### */
/* MARK: Image with Caption in Posts   */
/* #################################### */

/* --- 1. The Main Container (<figure>) --- */
/* This just acts as a centering and spacing wrapper */
:where(body:not([data-builder-window="main"])) .wp-block-image {
	/* Use 'display: table' to shrink-wrap the container for easy centering */
	display: table;
	width: auto;
	max-width: 100%;
	margin: var(--oumeon-space--600) auto; /* Vertical and horizontal centering */
}

/* --- 2. The Image (<img>) --- */
/* The image itself gets the primary border and shadow */
:where(body:not([data-builder-window="main"])) .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--oumeon-colour-neutral-200);
	box-shadow: var(--oumeon-box-shadow-300);
	border-radius: var(--oumeon-border-radius--default);
}

/* --- 3. The Caption Plaque (<figcaption>) --- */
:where(body:not([data-builder-window="main"])) .wp-block-image figcaption {
	width: 85%; /* Make the caption narrower than the image */
	margin: var(--oumeon-space--450) auto 0; /* Add space above and center it */
	padding: var(--oumeon-space--400);
	background: var(--oumeon-colour-neutral-100);
	border-top: 3px solid var(--oumeon-colour-primary-500); /* Decorative top border */
	font-family:
		var(--oumeon-font-family__brand--body),
		var(--oumeon-font-family__default--sans);
	font-size: var(--oumeon-font-size--s);
	color: var(--oumeon-colour-neutral-800);
	text-align: center;
	line-height: var(--oumeon-line-height--600);
	border-radius: var(--oumeon-border-radius--default);
}

/*
==========================================================================
MARK: 5.0 COMPONENT STYLES
==========================================================================
*/

/*
 * ------------------------------------------------------------------------
 * MARK: 5.1 Buttons
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Button Base Style   */
/* #################################### */

.oumeon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-style: solid;
	border-width: var(--oumeon-border-width--400);
	border-radius: var(--oumeon-border-radius--800);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	font-weight: var(--oumeon-font-weight--600);
	gap: var(--oumeon-space--300);
}

/* --- ICON INJECTION (::after) --- */
.oumeon-button::after {
	content: ""; /* Required to render the pseudo-element */
	display: inline-block;
	vertical-align: middle; /* Ensures icon is centered with text */

	/* Set icon dimensions */
	width: 1.2em;
	height: 1.2em;

	/* Use mask instead of background-image */
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'%3E%3Cpath d='m256-240-56-56 384-384H240v-80h480v480h-80v-344z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;

	/* The color comes from background-color, which WILL inherit currentColor */
	background-color: currentColor;

	/* Add transition for hover effect */
	transition: transform 0.2s ease;
}

.oumeon-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--oumeon-box-shadow-200);
}

/* --- Hover State Adjustments (Optional) --- */
.oumeon-button:hover::after {
	/* Example: Slight rotation on hover */
	transform: rotate(45deg);
}

/* Active state for the "press down" effect */
.oumeon-button:active {
	transform: scale(0.98);
	box-shadow: var(--oumeon-box-shadow-100);
}

/* Focus state for accessibility */
.oumeon-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.oumeon-button:disabled,
.oumeon-button[disabled] {
	background-color: var(--oumeon-colour-neutral-300) !important;
	border-color: var(--oumeon-colour-neutral-300) !important;
	color: var(--oumeon-colour-neutral-700) !important;
	cursor: not-allowed !important;
	opacity: 0.65 !important;
	transform: none !important;
	box-shadow: none !important;
}

/* #################################### */
/* MARK: Button Size Modifiers   */
/* #################################### */

.oumeon-button--normal {
	padding: var(--oumeon-space--300) var(--oumeon-space--600);
	font-size: var(--oumeon-font-size--base);
}

.oumeon-button--large {
	padding: var(--oumeon-space--350) var(--oumeon-space--650);
	font-size: var(--oumeon-font-size--l);
}

.oumeon-button--small {
	padding: var(--oumeon-space--250) var(--oumeon-space--500);
	font-size: var(--oumeon-font-size--xs);
}

.oumeon-button--full-width {
	width: 100%;
}

/* Color & Style Modifiers */

/* #################################### */
/* MARK: Button Primary   */
/* #################################### */

.oumeon-button--primary-flat {
	background-color: var(--oumeon-colour-primary-500);
	border-color: var(--oumeon-colour-black);
	color: var(--oumeon-colour-white);
	box-shadow: var(--oumeon-box-shadow--bold-black);
}
.oumeon-button--primary-flat:hover {
	background-color: var(--oumeon-colour-primary-600);
	border-color: var(--oumeon-colour-black);
}
.oumeon-button--primary-flat:active {
	background-color: var(--oumeon-colour-primary-700);
	border-color: var(--oumeon-colour-black);
}
.oumeon-button--primary-outline {
	background-color: transparent;
	border-color: var(--oumeon-colour-black);
	color: var(--oumeon-colour-primary-500);
	box-shadow: var(--oumeon-box-shadow--bold-black);
}
.oumeon-button--primary-outline:hover {
	background-color: var(--oumeon-colour-primary-500);
	color: var(--oumeon-colour-white);
}
.oumeon-button--primary-outline:active {
	background-color: var(--oumeon-colour-primary-700);
	border-color: var(--oumeon-colour-black);
	color: var(--oumeon-colour-white);
}

/* #################################### */
/* MARK: Button Secondary   */
/* #################################### */

.oumeon-button--secondary-flat {
	background-color: var(--oumeon-colour-secondary-500);
	border-color: var(--oumeon-colour-black);
	color: var(--oumeon-colour-black);
	box-shadow: var(--oumeon-box-shadow--bold-black);
}
.oumeon-button--secondary-flat:hover {
	background-color: var(--oumeon-colour-secondary-600);
	border-color: var(--oumeon-colour-black);
}
.oumeon-button--secondary-flat:active {
	background-color: var(--oumeon-colour-secondary-700);
	border-color: var(--oumeon-colour-black);
}

.oumeon-button--secondary-outline {
	background-color: transparent;
	border-color: var(--oumeon-colour-black);
	color: var(--oumeon-colour-neutral-1000);
	box-shadow: var(--oumeon-box-shadow--bold-black);
}
.oumeon-button--secondary-outline:hover {
	background-color: var(--oumeon-colour-secondary-500);
	color: var(--oumeon-colour-black);
}
.oumeon-button--secondary-outline:active {
	background-color: var(--oumeon-colour-secondary-700);
	border-color: var(--oumeon-colour-black);
	color: var(--oumeon-colour-black);
}

/* #################################### */
/* MARK: Button Accent   */
/* #################################### */

.oumeon-button--accent-flat {
	background-color: var(--oumeon-colour-black);
	border-color: var(--oumeon-colour-black);
	color: var(--oumeon-colour-neutral-0);
	box-shadow: var(--oumeon-box-shadow--bold-secondary);
}
.oumeon-button--accent-flat:hover {
	background-color: var(--oumeon-colour-black);
	border-color: var(--oumeon-colour-black);
}
.oumeon-button--accent-flat:active {
	background-color: var(--oumeon-colour-black);
	border-color: var(--oumeon-colour-black);
}

.oumeon-button--accent-outline {
	background-color: transparent;
	border-color: var(--oumeon-colour-black);
	color: var(--oumeon-colour-black);
	box-shadow: var(--oumeon-box-shadow--bold-secondary);
}
.oumeon-button--accent-outline:hover {
	background-color: var(--oumeon-colour-accent-500);
	color: var(--oumeon-colour-neutral-0);
}
.oumeon-button--accent-outline:active {
	background-color: var(--oumeon-colour-accent-700);
	border-color: var(--oumeon-colour-black);
	color: var(--oumeon-colour-neutral-0);
}

/* #################################### */
/* MARK: Button Social: WhatsApp   */
/* #################################### */

.oumeon-button--whatsapp-flat {
	background-color: var(--oumeon-colour-system__social-whatsapp);
	border-color: var(--oumeon-colour-black);
	border-width: var(--oumeon-border-width--400);
	color: var(--oumeon-colour-white);
	box-shadow: var(--oumeon-box-shadow--bold-black);
}
.oumeon-button--whatsapp-flat:hover {
	background-color: var(--oumeon-colour-system__social-whatsapp--hover);
	border-color: var(--oumeon-colour-black);
}
.oumeon-button--whatsapp-flat:active {
	background-color: var(--oumeon-colour-system__social-whatsapp--active);
	border-color: var(--oumeon-colour-black);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.2 Links (Component)
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Links Primary and Secondary   */
/* #################################### */

/* Base Structural Styles including Post Content Links and Automatic/Unclassed Links */

.oumeon-link,
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-text):not(.fluentform *)
	)
	a:not([class]) {
	display: inline-block;
	padding: var(--oumeon-space--250) var(--oumeon-space--500);
	border-radius: var(--oumeon-border-radius--default);
	text-decoration: underline;
	box-shadow: var(--oumeon-box-shadow-100);
	/* Consolidate all transitions into one line */
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

/* Primary Color Style */

.oumeon-link--primary,
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-text):not(.fluentform *)
	)
	a:not([class]) {
	background-color: var(--oumeon-colour-primary-500);
	color: var(--oumeon-colour-neutral-0);
}

.oumeon-link--primary:hover,
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-text):not(.fluentform *)
	)
	a:not([class]):hover {
	background-color: var(--oumeon-colour-primary-600);
	color: var(--oumeon-colour-neutral-0);
	transform: translateY(-2px);
	box-shadow: var(--oumeon-box-shadow-200);
}

/* Secondary Color Style */
.oumeon-link--secondary {
	background-color: var(--oumeon-colour-secondary-500) !important;
	color: var(--oumeon-colour-system-day-night__white) !important;
}

.oumeon-link--secondary:hover {
	background-color: var(--oumeon-colour-secondary-600) !important;
	color: var(--oumeon-colour-system-day-night__white) !important;
	transform: translateY(-2px);
	box-shadow: var(--oumeon-box-shadow-200);
}

/* Visited State Handling */
/* This ensures that both types of styled links don't change color when visited */
.oumeon-link:visited,
:where(
		body:not([data-builder-window="main"])
			:is(.brxe-post-content, .brxe-text):not(.fluentform *)
	)
	a:not([class]):visited {
	color: inherit;
}

/* #################################### */
/* MARK: Utility Link Reset */
/* #################################### */

/* 
 * u-link-reset
 * ------------------------------------------------------------------
 * Purpose:
 * Resets button-like styles (used by builders/plugins)
 * and restores links to accessible, text-style hyperlinks.
 *
 * Recommended usage:
 * Apply class="u-link-reset" to inline links inside content,
 * confirmations, notices, and emails rendered in the browser.
 * 
 * <a href="example.com" class="u-link-reset">This link reverts to a standard text link.</a>
 * 
 * or
 * 
 * When editing your post content or a basic text element in Bricks Builder, 
 * add the .u-link-reset class to the link you want to revert to a standard text link.
 * 
 *
 * Conforms to WCAG & international link-state best practices.
 */

.u-link-reset {
	/* RESET STRUCTURAL / BUTTON STYLES */
	display: inline !important; /* Forces it back to inline (like normal text) */
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-color: transparent !important;
	transform: none !important;

	/* DEFAULT LINK STATE */
	color: #1f4f82; /* Brand primary blue */
	text-decoration: underline !important;
}

/* VISITED */
.u-link-reset:visited {
	color: #5a3e85; /* Muted purple-blue for orientation */
}

/* HOVER */
.u-link-reset:hover {
	color: #163a60; /* Darker brand blue */
	text-decoration-thickness: 2px;
}

/* FOCUS (KEYBOARD ACCESSIBILITY) */
.u-link-reset:focus {
	outline: 2px solid #ffbf47; /* Accessible focus ring */
	outline-offset: 2px;
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.3 Headings & Subheadings (Component)
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Headings   */
/* #################################### */

/* --- Display Headings --- */
.oumeon-heading-display {
	font-family:
		var(--oumeon-font-family__brand--heading),
		var(--oumeon-font-family__default--serif);
	font-weight: var(--oumeon-font-weight--700);
	color: var(--oumeon-colour-neutral-1000);
	line-height: var(--oumeon-line-height--200);
	text-align: left;
	letter-spacing: var(--oumeon-letter-spacing--500);
	text-transform: uppercase;
	font-size: var(--oumeon-font-size--6xl);
}

.oumeon-heading-display--large {
	font-size: var(--oumeon-font-size--7xl);
}

/* #################################### */
/* MARK: Sub-headings (with square)   */
/* #################################### */

/* Usage: <h3 class="oumeon-subheading oumeon-subheading--large oumeon-subheading--secondary"> */

/* Base class for all subheadings */
.oumeon-subheading {
	position: relative; /* To allow absolute positioning of the pseudo-element */
	padding-left: var(
		--oumeon-space--550
	); /* Add padding to make space for the square */
	font-family:
		var(--oumeon-font-family__brand--subheading),
		var(--oumeon-font-family__default--sans);
	color: var(--oumeon-colour-neutral-1000);
	font-weight: var(--oumeon-font-weight--400);
	line-height: var(--oumeon-line-height--500);
	letter-spacing: var(--oumeon-letter-spacing--500);
	text-transform: capitalize;
	font-size: var(--oumeon-font-size--s);
}

/*
 * This rule applies the smaller margin-bottom to a subheading
 * ONLY IF it is immediately followed by a heading (h1-h6).
 */
:where(
	body:not([data-builder-window="main"])
		.oumeon-subheading
		+ :is(h1, h2, h3, h4, h5, h6)
) {
	margin-bottom: calc(var(--oumeon-space--250) - var(--oumeon-space--500));
}

/* Base style for the decorative square */
.oumeon-subheading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	border-radius: var(--oumeon-border-radius--100);
	width: var(--oumeon-font-size--s);
	height: var(--oumeon-font-size--s);
	background-color: var(--oumeon-colour-primary-500);
}

/* Size Modifiers */
.oumeon-subheading--large {
	font-size: var(--oumeon-font-size--l);
}
.oumeon-subheading--large::before {
	width: var(--oumeon-font-size--l);
	height: var(--oumeon-font-size--l);
}

.oumeon-subheading--small {
	font-size: var(--oumeon-font-size--xs);
}
.oumeon-subheading--small::before {
	width: var(--oumeon-font-size--xs);
	height: var(--oumeon-font-size--xs);
}

/* Color Modifier */
.oumeon-subheading--secondary::before {
	background-color: var(--oumeon-colour-secondary-500);
}

/* #################################### */
/* MARK: Style H2 in Post Content   */
/* #################################### */

/* Style H2 in Post Content */
:where(body:not([data-builder-window="main"]) .brxe-post-content) h2 {
	position: relative; /* Crucial for positioning the ::before pseudo-element */
	padding-left: var(--oumeon-space--450);
	font-size: var(--oumeon-font-size--2xl);
	font-weight: var(--oumeon-font-weight--700);
	line-height: var(--oumeon-line-height--300);
	text-align: left;
}

/* --- Decorative Left Bar (Pseudo-element) --- */
:where(body:not([data-builder-window="main"]) .brxe-post-content) h2::before {
	content: ""; /* Required to generate the element */
	position: absolute;
	left: 0;
	top: 0;
	width: var(--oumeon-border-width--500); /* Mobile-first width */
	height: 100%;
	background-color: var(--oumeon-colour-primary-500);
	border-radius: var(--oumeon-border-radius--default);
}

/* --- Responsive Adjustments for Larger Screens --- */
@media (min-width: 768px) {
	:where(body:not([data-builder-window="main"]) .brxe-post-content) h2 {
		font-size: var(--oumeon-font-size--4xl);
		line-height: var(--oumeon-line-height--200);
	}

	:where(body:not([data-builder-window="main"]) .brxe-post-content) h2::before {
		width: var(--oumeon-border-width--500); /* Wider bar on larger screens */
	}
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.4 Tables (Responsive & Data)
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Flexible Column Table (Stacked Card Responsive) */
/* #################################### */

/* WordPress Table Overrides & Resets (Specificity Reset) */
:is(.wp-block-table) table {
	border-collapse: separate !important;
	border-spacing: 0;
	border: none;
}

:is(.wp-block-table) td,
:is(.wp-block-table) th {
	border: none;
	padding: 0;
}

/* --- Main Table Container (Desktop Default) --- */
.oumeon-responsive-table,
:is(.wp-block-table) table {
	width: 100%;
	margin-top: 0;
	margin-bottom: var(--oumeon-space--500);
	font-family:
		var(--oumeon-font-family__brand--monospace),
		var(--oumeon-font-family__default--monospace);
	font-size: var(--oumeon-font-size--base);
	table-layout: fixed;
	border: var(--oumeon-border-width--200) solid var(--oumeon-colour-neutral-200);
	border-collapse: separate;
	border-spacing: 0;
	/* border-radius: var(--oumeon-border-radius--default); */
	overflow: hidden;
}

/* --- Table Header (thead) - FIXED: Removed tbody tr:first-child reference --- */
/* This now ONLY styles the THEAD container for white text color. */
.oumeon-table-header,
:is(.wp-block-table) thead {
	color: var(--oumeon-colour-white);
}

/* --- All Table Cells (th, td) - GENERAL DEFAULT --- */
.oumeon-responsive-table th,
.oumeon-responsive-table td,
:is(.wp-block-table) table th,
:is(.wp-block-table) table td {
	padding: var(--oumeon-space--400) var(--oumeon-space--450);
	text-align: center;
	vertical-align: middle;
	word-break: break-word;
}

/* --- Header Cell Specifics (th) - FIXED BACKGROUND --- */
.oumeon-responsive-table th,
:is(.wp-block-table) table th {
	font-weight: var(--oumeon-font-weight--700);
	text-align: center;
	background-color: var(--oumeon-colour-primary-500);
	color: var(--oumeon-colour-white); /* White text for the dark header */
	border: var(--oumeon-border-width--100) solid var(--oumeon-colour-neutral-200);
	overflow: hidden;
}

/* --- Data Cell Specifics (td) - BASE BACKGROUND & TEXT COLOR FIX --- */
/* This ensures all data cells have dark text, overriding any inherited white color. */
.oumeon-responsive-table td,
:is(.wp-block-table) table td {
	border: var(--oumeon-border-width--100) solid var(--oumeon-colour-neutral-200);
	background-color: var(--oumeon-colour-neutral-0);
	color: var(
		--oumeon-colour-black
	); /* FIX: Explicitly set dark text color for data cells */
}

/* --- Zebra-striping (FIXED) --- */

/* 1. Set the Odd Rows (1st, 3rd, 5th, etc.) to the neutral stripe color */
.oumeon-table-row:nth-child(odd) td,
:is(.wp-block-table) tbody tr:nth-child(odd) td {
	background-color: var(--oumeon-colour-neutral-100);
	border: var(--oumeon-border-width--100) solid var(--oumeon-colour-neutral-300);
}

/* 2. Set the Even Rows (2nd, 4th, 6th, etc.) to the default color (This is the white stripe) */
.oumeon-table-row:nth-child(even) td,
:is(.wp-block-table) tbody tr:nth-child(even) td {
	background-color: var(--oumeon-colour-neutral-0);
}

/* Last Row Border Reset */
.oumeon-table-row:last-child,
:is(.wp-block-table) tbody tr:last-child {
	border-bottom: none;
}

/* --- Responsive Mobile View (Stacked Cards) --- */
@media screen and (max-width: 991px) {
	/* Adjusted for Tablet Portrait and smaller */
	/* 1. Reset Table Structure */
	.oumeon-responsive-table,
	:is(.wp-block-table) table {
		border: none;
		/* border-radius: 0; */
	}

	/* 2. Hide Desktop Header */
	:is(.oumeon-responsive-table) thead,
	:is(.wp-block-table) thead {
		display: none;
	}

	/* 3. Stack Rows as Cards */
	.oumeon-responsive-table tr,
	:is(.wp-block-table) tr {
		display: block;
		margin-bottom: var(--oumeon-space--500);
		border: 1px solid var(--oumeon-colour-neutral-200);
		/* border-radius: var(--oumeon-border-radius--mobile); */
		overflow: hidden;
		box-shadow: var(--oumeon-box-shadow-100);
		padding: 0;
	}

	/* 4. Stack Cells and Add Key/Value Display */
	.oumeon-responsive-table td,
	:is(.wp-block-table) td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: right;
		padding: var(--oumeon-space--400);
		border-bottom: var(--oumeon-border-width--100) solid
			var(--oumeon-colour-neutral-100);
		background-color: var(--oumeon-colour-neutral-0);
		color: var(
			--oumeon-colour-neutral-1000
		); /* Ensure readability in mobile view */
	}

	/* 5. Add Data Label (Key) via Pseudo-element */
	.oumeon-responsive-table td::before,
	:is(.wp-block-table) td::before {
		content: attr(data-label);
		float: left;
		font-weight: var(--oumeon-font-weight--700);
		color: var(--oumeon-colour-neutral-800);
		text-align: left;
		margin-right: var(--oumeon-space--400);
		text-transform: uppercase;
	}

	/* 6. Mobile Cleanup */
	.oumeon-responsive-table td:last-child,
	:is(.wp-block-table) td:last-child {
		border-bottom: none;
	}

	/* Remove redundant width rules */
	.oumeon-responsive-table td,
	.oumeon-responsive-table th {
		width: auto !important;
	}
}

/* #################################### */
/* MARK: Data Table (Key Value Pairs)   */
/* #################################### */

/* --- Main Table Container --- */
.oumeon-data-table {
	width: 100%;
	border-collapse: separate;
	/* This will apply equal vertical and horizontal spacing */
	border-spacing: var(--oumeon-space--400);
	table-layout: fixed; /* Enforces specified column widths and prevents content from breaking the layout. Renders faster than 'auto'. */
}

/* --- Table Cells (td) --- */
.oumeon-data-table td {
	padding: var(--oumeon-space--400) var(--oumeon-space--450);
	vertical-align: middle; /* Aligns content neatly */
	word-break: break-word; /* Forces long, unbreakable text to wrap */
	border: 1px solid var(--oumeon-colour-neutral-200);
	box-shadow: var(--oumeon-box-shadow-100);
	background-color: var(--oumeon-colour-neutral-0); /* Default for even rows */
	font-size: var(--oumeon-font-size--s);
}

/* HEADER ROW STYLES. This rule targets all cells (td) inside the first row (tr:first-child) */
.oumeon-data-table tr:first-child td {
	font-weight: var(--oumeon-font-weight--600);
	text-align: center;
	text-transform: uppercase;
	background-color: var(--oumeon-colour-neutral-1000);
	color: var(--oumeon-colour-neutral-0);
}

/* Zebra-striping for better readability */
.oumeon-data-table__row:nth-child(n + 2):nth-child(odd) td {
	background-color: var(--oumeon-colour-neutral-100);
}

/* --- Other Structural Rules --- */
.oumeon-data-table__row:last-child {
	border-bottom: none;
}

/* Responsive Mobile View (Stacked) */

@media screen and (max-width: 767px) {
	:where(.oumeon-data-table),
	:where(.oumeon-data-table) tbody,
	:where(.oumeon-data-table) tr,
	:where(.oumeon-data-table) td {
		display: block; /* Un-do table layout and stack everything */
		width: 100%;
	}

	/* Row-specific styles. */
	:where(.oumeon-data-table__row) {
		margin-bottom: var(--oumeon-space--500);
		border: 1px solid var(--oumeon-colour-neutral-200);
		border-radius: var(--oumeon-border-radius--mobile);
	}

	/* Remove borders from within the "card". */
	:where(.oumeon-data-table) td {
		border: none;
	}

	/* Style the "key" and "value" cells for the stacked layout. */
	:where(.oumeon-data-table) td:first-child {
		padding-bottom: var(--oumeon-space--250);
		background-color: var(--oumeon-colour-neutral-100);
	}
	:where(.oumeon-data-table) td:last-child {
		padding-top: var(--oumeon-space--250);
	}
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.5 WordPress Blocks (Quote, Verse, Code, etc.)
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Blockquote   */
/* #################################### */

/* --- 1. Main Blockquote Container --- */
:where(body:not([data-builder-window="main"])) .wp-block-quote {
	position: relative; /* Required for the quote mark */
	width: 80%; /* A wider width is generally better for responsiveness */
	max-width: var(
		--oumeon-paragraph-width--max
	); /* Ensures it's never too wide */
	margin: var(--oumeon-space--550) auto; /* Centers the blockquote */
	background: var(--oumeon-colour-neutral-100);
	border-left: 8px solid var(--oumeon-colour-primary-500);
	padding: var(--oumeon-space--450) var(--oumeon-space--500)
		var(--oumeon-space--450) var(--oumeon-space--600); /* Adjust padding to account for the large quote mark */
	border-radius: var(--oumeon-border-radius--default);
}

/* --- 2. The Large Quote Mark (::before) --- */
:where(body:not([data-builder-window="main"])) .wp-block-quote::before {
	content: "\201C"; /* The opening double quote character */
	position: absolute;
	left: var(--oumeon-space--400);
	top: 10px;
	font-family:
		var(--oumeon-font-family__brand--body),
		var(--oumeon-font-family__default--sans);
	font-size: 3em;
	color: var(--oumeon-colour-primary-500);
	line-height: 1;
}

/* --- 3. The Paragraph inside the Blockquote --- */
/* This ensures the text styling is correct and removes default margins */
:where(body:not([data-builder-window="main"]) .wp-block-quote) p {
	margin-bottom: 0;
	font-family: var(
		--oumeon-font-family__default--serif
	); /* A serif font is great for quotes */
	font-size: var(--oumeon-font-size--l);
	font-style: italic;
	line-height: var(--oumeon-line-height--600);
	color: var(--oumeon-colour-neutral-800);
}

/* --- 4. The Citation (the <cite> tag) --- */
/*
 * We use the adjacent sibling selector (+) to style the <cite> tag
 * that WordPress places immediately after the <blockquote>.
 */
:where(body:not([data-builder-window="main"]) .wp-block-quote + cite) {
	display: block; /* Puts the citation on its own line */
	width: 80%;
	max-width: var(--oumeon-paragraph-width--max);
	margin: var(--oumeon-space--450) auto 0; /* Aligns with the blockquote */
	padding-right: var(--oumeon-space--500); /* Aligns text with the right edge */
	color: var(--oumeon-colour-neutral-900);
	font-family:
		var(--oumeon-font-family__brand--body),
		var(--oumeon-font-family__default--sans);
	font-style: normal; /* Override the default italic style for <cite> */
	font-weight: var(--oumeon-font-weight--700);
	text-align: right;
}

/* #################################### */
/* MARK: Verse Block (Poem Style)       */
/* #################################### */

/* --- 1. The Main Verse Container --- */
/* This targets the <pre> tag that WordPress uses for the verse block */
:where(body:not([data-builder-window="main"])) pre.wp-block-verse {
	background-color: var(--oumeon-colour-neutral-100);
	font-family: var(
		--oumeon-font-family__default--serif
	); /* A classic font for poetry */
	padding: var(--oumeon-space--500) var(--oumeon-space--500)
		var(--oumeon-space--500) var(--oumeon-space--550);
	margin: var(--oumeon-space--600) auto;
	max-width: var(--oumeon-paragraph-width--max);
	border-left: 10px solid var(--oumeon-colour-primary-500);
	border-radius: 0 var(--oumeon-border-radius--200)
		var(--oumeon-border-radius--200) 0;
	box-shadow: var(--oumeon-box-shadow-200);
	font-size: var(--oumeon-font-size--l);
	line-height: var(--oumeon-line-height--700);
	color: var(--oumeon-colour-neutral-900);
	white-space: pre-wrap; /* Allows long lines to wrap while respecting line breaks */
	word-break: break-word;
}

/* --- 2. The Decorative Drop-Cap --- */
/* This styles the very first letter of the poem */
:where(body:not([data-builder-window="main"]))
	pre.wp-block-verse::first-letter {
	font-size: 4em;
	font-weight: var(--oumeon-font-weight--700);
	color: var(--oumeon-colour-primary-500);
	float: left; /* Floats the letter to the left and gives it space */
	margin: 0.1em 0.2em 0 0;
	line-height: 0.8; /* Pulls the following lines up slightly */
}

/* #################################### */
/* MARK: Code Block   */
/* #################################### */

/* To show the language label (e.g., "CSS", "JS"), add a class to your Code Block in the WordPress editor's "Advanced" panel. The format is language- followed by the language name.

Example for a CSS block:
Add the class language-css

Example for a JavaScript block:
Add the class language-js */

/* --- 1. The Code Block Container (<pre>) --- */
:where(body:not([data-builder-window="main"])) pre.wp-block-code {
	position: relative;
	background-color: var(--oumeon-colour-neutral-900);
	border: 1px solid var(--oumeon-colour-neutral-700);
	border-radius: var(--oumeon-border-radius--default);
	padding: var(--oumeon-space--550) var(--oumeon-space--450);
	margin: var(--oumeon-space--550) 0;
	overflow-x: auto; /* BEST PRACTICE: Enable horizontal scrolling for long lines of code */
}

/* --- 2. The Code Itself (<code>) --- */
:where(body:not([data-builder-window="main"])) pre.wp-block-code code {
	font-family: var(--oumeon-font-family__default--monospace);
	font-size: var(--oumeon-font-size--s);
	color: var(--oumeon-colour-neutral-200);
	white-space: pre; /* Keeps code formatting intact and prevents unwanted line wrapping */
}

/* --- 3. The Language Header (Generated from class name) --- */
:where(body:not([data-builder-window="main"]))
	pre.wp-block-code[class*="language-"]::before {
	position: absolute;
	top: 0;
	right: var(--oumeon-space--450);
	padding: var(--oumeon-space--250) var(--oumeon-space--400);
	background-color: var(--oumeon-colour-primary-500);
	color: var(--oumeon-colour-neutral-0);
	border-radius: 0 0 var(--oumeon-border-radius--100)
		var(--oumeon-border-radius--100);
	font-size: var(--oumeon-font-size--xs);
	font-weight: var(--oumeon-font-weight--600);
	text-transform: uppercase;
}

/* --- Adds the correct text based on the class name --- */
:where(body:not([data-builder-window="main"]))
	pre.wp-block-code.language-css::before {
	content: "CSS";
}
:where(body:not([data-builder-window="main"]))
	pre.wp-block-code.language-js::before {
	content: "JS";
}
:where(body:not([data-builder-window="main"]))
	pre.wp-block-code.language-html::before {
	content: "HTML";
}
:where(body:not([data-builder-window="main"]))
	pre.wp-block-code.language-php::before {
	content: "PHP";
}

:where(body:not([data-builder-window="main"]))
	pre.wp-block-code.language-markdown::before {
	content: "Markdown";
}

/* --- 4. Custom Scrollbar Styling --- */
:where(body:not([data-builder-window="main"]))
	pre.wp-block-code::-webkit-scrollbar {
	height: 8px;
}
:where(body:not([data-builder-window="main"]))
	pre.wp-block-code::-webkit-scrollbar-track {
	background-color: var(--oumeon-colour-neutral-800);
}
:where(body:not([data-builder-window="main"]))
	pre.wp-block-code::-webkit-scrollbar-thumb {
	background-color: var(--oumeon-colour-primary-500);
	border-radius: 8px;
}

/* #################################### */
/* MARK: Tag List Component   */
/* #################################### */

/* --- 1. The Tag Pill (<li>) --- */
:where(ul.brxe-post-taxonomy.post_tag) li {
	display: inline-block; /* Good practice for tag lists */
	position: relative; /* For positioning pseudo-elements if needed */
	margin: 5px; /* Add spacing between tags */
	background-color: var(--oumeon-colour-primary-500);
	border: var(--oumeon-border-width--100) solid var(--oumeon-colour-primary-600);
	border-radius: var(--oumeon-border-radius--300);
	box-shadow: var(--oumeon-box-shadow-100);
	transition: all 0.2s ease-in-out;
}

/* --- 2. The Link Inside the Pill (<a>) --- */
:where(ul.brxe-post-taxonomy.post_tag) li a {
	display: block;
	padding: var(--oumeon-space--250) var(--oumeon-space--400);
	color: var(--oumeon-colour-neutral-0);
	font-size: var(--oumeon-font-size--s);
	text-decoration: none;
}

:where(ul.brxe-post-taxonomy.post_tag) li:hover {
	transform: translateY(-2px);
	box-shadow: var(--oumeon-box-shadow-200);
}

/* Active state for the "press down" effect */
:where(ul.brxe-post-taxonomy.post_tag) li:active {
	transform: translateY(0);
	box-shadow: var(--oumeon-box-shadow-100);
}

/* Focus state for accessibility */
:where(ul.brxe-post-taxonomy.post_tag) li a:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--oumeon-colour-neutral-0);
	border-radius: var(--oumeon-border-radius--300);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.6 Lists (Component)
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Table of Contents   */
/* #################################### */

/* --- 4. Component: Table of Contents --- */
:where(.brxe-post-toc) .toc-list {
	list-style: disc; /* Disc for top-level list items */
	margin: 0;
	padding-left: var(--oumeon-space--450);
}

:where(.brxe-post-toc) .toc-list-item {
	margin: var(--oumeon-space--350) 0; /* Space between list items */
	font-weight: var(--oumeon-font-weight--400);
}

:where(.brxe-post-toc) .toc-link {
	text-decoration: none; /* Remove underline from links */
	transition: color 0.3s; /* Smooth transition for hover effect */
	color: var(--oumeon-colour-neutral-1000);
}

:where(.brxe-post-toc) .toc-link:hover {
	color: var(--oumeon-colour-primary-500);
}

:where(.brxe-post-toc) .is-active-link {
	color: var(--oumeon-colour-primary-600);
}

/* Nested ToC Lists */
:where(.brxe-post-toc) .toc-list .toc-list {
	padding-left: var(--oumeon-space--450); /* Indent nested lists */
	list-style-type: circle; /* Different list style for nested items */
}

:where(.brxe-post-toc) .toc-list .toc-list-item {
	margin: var(--oumeon-space--250) 0; /* Space between nested list items */
}

/* #################################### */
/* MARK: Definition List Cards   */
/* #################################### */

/* --- 1. The List Container (<dl>) --- */
/* Targets any <dl> inside the post content area */
:where(body:not([data-builder-window="main"]) .brxe-post-content) dl {
	margin-top: var(--oumeon-space--550);
	margin-bottom: var(--oumeon-space--550);
}

/* --- 2. The Term (<dt>) - The Card Header --- */
:where(body:not([data-builder-window="main"]) .brxe-post-content) dt {
	position: relative; /* Anchor for the decorative elements */
	margin-top: var(--oumeon-space--500);
	padding: var(--oumeon-space--550) var(--oumeon-space--450)
		var(--oumeon-space--450) var(--oumeon-space--650);
	background-color: var(--oumeon-colour-neutral-0);
	box-shadow: var(--oumeon-box-shadow-200);
	border-radius: var(--oumeon-border-radius--200)
		var(--oumeon-border-radius--200) 0 0;
	font-weight: var(--oumeon-font-weight--700);
	color: var(--oumeon-colour-neutral-900);
	font-size: var(--oumeon-font-size--xl);
}

/* --- 3. The Description (<dd>) - The Card Body --- */
:where(body:not([data-builder-window="main"]) .brxe-post-content) dd {
	position: relative; /* Add this */
	z-index: 1; /* Add this to ensure it overlaps the dt's shadow */
	margin-left: 0;
	margin-top: 0;
	padding: var(--oumeon-space--450);
	background-color: var(--oumeon-colour-neutral-0);
	box-shadow: var(--oumeon-box-shadow-200);
	border-radius: 0 0 var(--oumeon-border-radius--200)
		var(--oumeon-border-radius--200);
	font-size: var(--oumeon-font-size--base);
	line-height: var(--oumeon-line-height--600);
}

/* --- 4. The Decorative Top Bar --- */
:where(body:not([data-builder-window="main"]) .brxe-post-content) dt::before {
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--oumeon-colour-primary-500);
}

/* --- 5. The Decorative Circle --- */
:where(body:not([data-builder-window="main"]) .brxe-post-content) dt::after {
	content: "";
	position: absolute;
	left: var(--oumeon-space--450);
	top: calc(50% + 5px); /* Adjust the '5px' value as needed */
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--oumeon-colour-primary-500);
}

/* #################################### */
/* MARK: Query Loop Wrapper   */
/* #################################### */

/* Target the Query Loop Wrapper and display it as an unordered list */
.oumeon-list-wrapper {
	/* Resets any default block styling */
	list-style: none;
	padding-left: 0 !important; /* Ensure padding is removed if Bricks adds any */
	margin: 0;
}

/* Style the LI children and generate the square bullet (::before) */
.oumeon-list-wrapper li {
	/* Reset default LI styling */
	list-style: none;

	/* Styles necessary for the custom bullet positioning: */
	position: relative;
	padding-left: 30px; /* Space for the custom bullet */
	margin-bottom: var(--oumeon-space--350);
}

/* Style the custom SQUARE bullet (::before) */
.oumeon-list-wrapper li::before {
	content: "";
	position: absolute;
	left: 0;

	/* Style matching your existing square bullet rules: */
	top: 0.8em;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background-color: var(--oumeon-colour-primary-500);
}

/* Force the wrapper to display as an unordered list */
.oumeon-list-wrapper ul,
.oumeon-list-wrapper {
	list-style: outside disc; /* Use 'disc' for bullet points */
	padding-left: 20px; /* Add indentation for the bullets to show */
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.7 Accordions (Bricks & Kadence) (FAQs)
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Accordion Bricks Builder   */
/* #################################### */

/* --- Main Accordion Container (<ul>) --- */
:where(body:not([data-builder-window="main"])) .brxe-accordion {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* --- A Single Accordion Item (<li>) --- */
:where(body:not([data-builder-window="main"])) .accordion-item {
	margin-bottom: var(--oumeon-space--500);
}

/* --- The Clickable Title Area --- */
:where(body:not([data-builder-window="main"])) .accordion-title-wrapper {
	padding: var(--oumeon-space--400) var(--oumeon-space--500);
	background-color: var(--oumeon-colour-neutral-200);
	border-left: var(--oumeon-border-width--500) solid
		var(--oumeon-colour-primary-500);
	border-radius: var(--oumeon-border-radius--default);
	box-shadow: var(--oumeon-box-shadow-100);
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease;
}

/* --- Text and Icon Elements --- */

.accordion-title h3.title {
	font-size: var(--oumeon-font-size--base);
	color: var(--oumeon-colour-neutral-1000);
	transition: color 0.3s ease;
	margin: var(--oumeon-space--400);
}

.accordion-subtitle {
	font-size: var(--oumeon-font-size--s);
	color: var(--oumeon-colour-neutral-700);
	transition: color 0.3s ease;
	margin-top: var(--oumeon-space--250); /* Add a little space below the title */
}

.accordion-title .icon {
	color: var(--oumeon-colour-primary-500);
	font-size: var(--oumeon-font-size--xl);
	transition: color 0.3s ease;
	line-height: 1;
}

/* Hide the "expanded" (down arrow) icon by default */
.accordion-title .icon.expanded {
	display: none;
}

/* --- The Content Area --- */
.accordion-content-wrapper {
	padding: var(--oumeon-space--400);
	background-color: var(--oumeon-colour-primary-500);
	border-radius: var(--oumeon-border-radius--default);
	box-shadow: var(--oumeon-box-shadow-100);
	border: 1px solid var(--oumeon-colour-neutral-200);
	margin-top: var(--oumeon-space--400);
}

.accordion-content-wrapper p,
.accordion-content-wrapper li {
	font-size: var(--oumeon-font-size--base);
	color: var(--oumeon-colour-white);
}

.accordion-content-wrapper ul {
	list-style-type: disc; /* Use disc bullets */
	padding-left: var(--oumeon-space--500); /* Indent the list */
}

.accordion-content-wrapper li::marker {
	font-weight: bold;
}

/* --- The Open/Active State --- */
.accordion-item.brx-open .accordion-title-wrapper {
	background-color: var(--oumeon-colour-primary-500);
	border-left-color: var(--oumeon-colour-neutral-1000);
}

.accordion-item.brx-open .accordion-title h3.title,
.accordion-item.brx-open .accordion-subtitle,
.accordion-item.brx-open .accordion-title .icon {
	color: var(--oumeon-colour-white);
}

/* Icon swapping for the open state */
.accordion-item.brx-open .accordion-title .icon.expanded {
	display: inline-block;
}
.accordion-item.brx-open .accordion-title .icon:not(.expanded) {
	display: none;
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.8 Navigation & Menus
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Bricks Nav Menu   */
/* #################################### */

/* Ensure the menu items are displayed as flex containers */
:where(.bricks-nav-menu) > li {
	display: flex;
	justify-content: space-between; /* Space between the link and the icon */
	align-items: center; /* Center items vertically */
}

/* Align the submenu toggle button to the right */
:where(.brx-submenu-toggle) {
	display: flex;
	justify-content: space-between; /* Space between the link and the button */
	width: 100%; /* Make it take the full width of the parent */
}

/* Ensure the icon is aligned to the right */
:where(.menu-item-icon) {
	margin-left: auto; /* Push the icon to the right */
}

/* #################################### */
/* MARK: Max Addons Menu   */
/* #################################### */

.mab-slide-menu-nav {
	background: var(--oumeon-colour-secondary-500) !important;
}

.mab-slide-menu-nav .sub-menu {
	background: var(--oumeon-colour-secondary-500) !important;
}

.mab-slide-menu-nav .menu-item {
	border-bottom: 0 !important;
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.9 Products
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: WooCommerce In Stock Icons   */
/* #################################### */

.oumeon-in-stock {
	font-size: var(--oumeon-font-size--xs);
	color: var(--oumeon-colour-system__green--500);
	line-height: var(--oumeon-line-height--500);
	position: relative; /* Anchor for the icon pseudo-element */
	padding-left: var(--oumeon-space--500);
	margin-bottom: 0;
}

.oumeon-in-stock::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: var(--oumeon-font-size--xs);
	background-color: var(--oumeon-colour-system__green--500);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 506.139 506.139' fill='currentColor'%3E%3Cpath d='m128.621 134.599 222.768-95.506L259.149 1.2a16.003 16.003 0 0 0-12.16 0L25.444 92.213zM392.849 56.125l-222.836 95.478 83.056 34.121 227.626-93.511zM237.069 213.746l-90.147-37.033v70.118c0 8.836-7.164 16-16 16s-16-7.164-16-16v-83.264L11.081 120.908v281.668a16 16 0 0 0 9.92 14.8l216.068 88.763zM269.069 213.746v292.393l216.068-88.763a16 16 0 0 0 9.92-14.8V120.908z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 506.139 506.139' fill='currentColor'%3E%3Cpath d='m128.621 134.599 222.768-95.506L259.149 1.2a16.003 16.003 0 0 0-12.16 0L25.444 92.213zM392.849 56.125l-222.836 95.478 83.056 34.121 227.626-93.511zM237.069 213.746l-90.147-37.033v70.118c0 8.836-7.164 16-16 16s-16-7.164-16-16v-83.264L11.081 120.908v281.668a16 16 0 0 0 9.92 14.8l216.068 88.763zM269.069 213.746v292.393l216.068-88.763a16 16 0 0 0 9.92-14.8V120.908z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
}

@media (max-width: 991px) {
	.oumeon-in-stock {
		padding-left: var(--oumeon-space--550);
	}
}

@media (max-width: 767px) {
	.oumeon-in-stock {
		padding-left: var(--oumeon-space--600);
	}
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.10 Style Guides
 * ------------------------------------------------------------------------
 */

.oumeon-style-guide__element {
	flex-direction: row;
	padding-top: var(--oumeon-space--500);
	padding-right: var(--oumeon-space--500);
	padding-bottom: var(--oumeon-space--500);
	padding-left: var(--oumeon-space--500);
	border: var(--oumeon-border-width--100) solid var(--oumeon-colour-neutral-300);
}

.oumeon-style-guide__element-type-div {
	width: 30%;
}

.oumeon-style-guide__element-display-div {
	width: 70%;
	flex-direction: row;
	column-gap: var(--oumeon-space--500);
	row-gap: var(--oumeon-space--500);
}

@media (max-width: 1279px) {
	.oumeon-style-guide {
		column-gap: var(--oumeon-space--500);
		row-gap: var(--oumeon-space--500);
	}
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.11 Breadcrumbs
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Bricks Breadcrumbs   */
/* #################################### */

/* --- 1. Main Container --- */
/* We target the nav element for higher specificity */
:where(body:not([data-builder-window="main"])) nav.brxe-breadcrumbs {
	align-items: center;
}

/* --- 2. The Breadcrumb Items (Pills) --- */
:where(body:not([data-builder-window="main"]) nav.brxe-breadcrumbs) .item {
	display: flex;
	align-items: center;
	padding: var(--oumeon-space--300) var(--oumeon-space--450);
	background-color: var(--oumeon-colour-primary-500);
	color: var(--oumeon-colour-neutral-0);
	border-radius: var(--oumeon-border-radius--default);
	font-size: var(--oumeon-font-size--s);
	font-weight: var(--oumeon-font-weight--400);
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
	box-shadow: var(--oumeon-box-shadow-100);
}

/* --- 3. The Home Icon Item --- */
/* Make the first item a circle/puck shape for the icon */
:where(body:not([data-builder-window="main"]) nav.brxe-breadcrumbs)
	.item:first-child {
	padding: var(--oumeon-space--350) var(--oumeon-space--550);
}

/* Style the <i> tag directly */
:where(
		body:not([data-builder-window="main"])
			nav.brxe-breadcrumbs
			.item:first-child
	)
	i {
	font-size: var(--oumeon-font-size--base);
}

/* --- 4. The Active/Last Item --- */
:where(body:not([data-builder-window="main"]) nav.brxe-breadcrumbs)
	.item[aria-current="page"] {
	background-color: var(--oumeon-colour-neutral-100);
	color: var(--oumeon-colour-neutral-900);
	font-weight: var(--oumeon-font-weight--600);
	pointer-events: none;
}

/* --- 5. Hover Effects --- */
:where(body:not([data-builder-window="main"]) nav.brxe-breadcrumbs)
	a.item:hover {
	background-color: var(--oumeon-colour-primary-600);
	color: var(--oumeon-colour-neutral-0);
	transform: translateY(-2px);
	box-shadow: var(--oumeon-box-shadow-200);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 5.12 Dividers
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Divider Element   */
/* #################################### */

/* --- 1. The Divider Container (.brxe-divider) --- */
:where(.brxe-divider) {
	/* Set the default width for the divider component */
	width: 80%;
	margin-left: auto; /* Center the element */
	margin-right: auto; /* Center the element */
	/* Use a standard color for the ends of the gradient, 
       often matching the background color of the section it sits on */
	--divider-fade-color: var(--oumeon-colour-primary-100);
	--divider-line-color: var(--oumeon-colour-primary-300); /* Mid-point color */
}

/* --- 2. The Line Element (The visual rule) --- */
:where(.brxe-divider) .line {
	height: 2px;
	width: 100%;

	/* Create the gradient effect: fade from transparent (or background color) -> mid-color -> transparent */
	background: linear-gradient(
		90deg,
		transparent,
		/* Start transparent (matches Example CSS idea) */ var(--divider-line-color),
		transparent /* End transparent */
	);
}

/* --- 3. RESET BRICKS DEFAULT BORDER --- */
/* We target the same Bricks default selector but reset the border to none. */
:where(.brxe-divider).horizontal .line {
	border: none;
}

/*
==========================================================================
MARK: 6.0 UTILITY CLASSES
==========================================================================
*/

/*
 * ------------------------------------------------------------------------
 * MARK: 6.1 Sizing & Reading Width
 * ------------------------------------------------------------------------
 */

.oumeon-optimal-reading-max-width {
	max-width: var(--oumeon-paragraph-width--max);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 6.2 Layout Helpers (Padding, Gaps)
 * ------------------------------------------------------------------------
 */

.oumeon-border-radius-defult {
	border-radius: var(--oumeon-border-radius--default);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 6.3 Typography Helpers
 * ------------------------------------------------------------------------
 */

/* MARK: Body Text: Variations */

.oumeon-body-2xl {
	font-size: var(--oumeon-font-size--5xl);
}

.oumeon-body-xl {
	font-size: var(--oumeon-font-size--3xl);
}

.oumeon-body-l {
	font-size: var(--oumeon-font-size--xl);
}

.oumeon-body-s {
	font-size: var(--oumeon-font-size--s);
}

.oumeon-body-xs {
	font-size: var(--oumeon-font-size--xs);
}

.oumeon-body-2xs {
	font-size: var(--oumeon-font-size--2xs);
}

/*
 * ------------------------------------------------------------------------
 * MARK: 6.4 Visual Effects
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Shadows   */
/* #################################### */

/* MARK: Box Shadow                     */

.oumeon-box-shadow-100 {
	box-shadow: var(--oumeon-box-shadow-100);
}

.oumeon-box-shadow-200 {
	box-shadow: var(--oumeon-box-shadow-200);
}

.oumeon-box-shadow-300 {
	box-shadow: var(--oumeon-box-shadow-300);
}

.oumeon-box-shadow-400 {
	box-shadow: var(--oumeon-box-shadow-400);
}

.oumeon-box-shadow-500 {
	box-shadow: var(--oumeon-box-shadow-500);
}

.oumeon-box-shadow-600 {
	box-shadow: var(--oumeon-box-shadow-600);
}

.oumeon-box-shadow-700 {
	box-shadow: var(--oumeon-box-shadow-700);
}

.oumeon-box-shadow-800 {
	box-shadow: var(--oumeon-box-shadow-800);
}

.oumeon-box-shadow--bold-black {
	box-shadow: var(--oumeon-box-shadow--bold-black);
}

.oumeon-box-shadow--bold-primary {
	box-shadow: var(--oumeon-box-shadow--bold-primary);
}

.oumeon-box-shadow--bold-secondary {
	box-shadow: var(--oumeon-box-shadow--bold-secondary);
}

.oumeon-box-shadow--bold-accent {
	box-shadow: var(--oumeon-box-shadow--bold-accent);
}

/* #################################### */
/* MARK: Glassmorphism   */
/* #################################### */

.oumeon-glass-container {
	/* From https://css.glass */
	background: rgba(
		255,
		255,
		255,
		0.2
	); /* Sets a semi-transparent background color with a specific RGBA value */
	border-radius: var(--oumeon-border-radius--default);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(
		10px
	); /* Applies a blur effect to the background behind the element */
	-webkit-backdrop-filter: blur(
		10px
	); /* Applies the same blur effect for Safari compatibility */
	border: 1px solid rgba(255, 255, 255, 0.5); /* Creates a semi-transparent white border around the element */
}

.oumeon-glass-container-dark {
	/* From https://css.glass */
	background: rgba(
		0,
		0,
		0,
		0.2
	); /* Sets a semi-transparent background color with a specific RGBA value */
	border-radius: var(--oumeon-border-radius--default);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Adds a shadow effect below the element for depth */
	backdrop-filter: blur(
		10px
	); /* Applies a blur effect to the background behind the element */
	-webkit-backdrop-filter: blur(
		10px
	); /* Applies the same blur effect for Safari compatibility */
	border: 1px solid rgba(255, 255, 255, 0.5); /* Creates a semi-transparent white border around the element */
}

.oumeon-glass-container-primary {
	/* From https://css.glass */
	background: color-mix(
		in srgb,
		var(--oumeon-colour-primary-500) 50%,
		transparent
	);
	border-radius: var(--oumeon-border-radius--default);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(
		10px
	); /* Applies a blur effect to the background behind the element */
	-webkit-backdrop-filter: blur(
		10px
	); /* Applies the same blur effect for Safari compatibility */
	border: 1px solid rgba(255, 255, 255, 0.5); /* Creates a semi-transparent white border around the element */
}

.oumeon-glass-container-secondary {
	/* From https://css.glass */
	background: color-mix(
		in srgb,
		var(--oumeon-colour-secondary-500) 50%,
		transparent
	);
	border-radius: var(--oumeon-border-radius--default);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(
		10px
	); /* Applies a blur effect to the background behind the element */
	-webkit-backdrop-filter: blur(
		10px
	); /* Applies the same blur effect for Safari compatibility */
	border: 1px solid rgba(255, 255, 255, 0.5); /* Creates a semi-transparent white border around the element */
}

/* #################################### */
/* MARK: Overline Text   */
/* #################################### */

.oumeon-overline-text {
	transform: translate(-50%, -50%);
	background-image: linear-gradient(
		var(--oumeon-colour-secondary-500),
		var(--oumeon-colour-secondary-600)
	);
	background-size: 100% 10px;
	background-repeat: no-repeat;
	background-position: 100% 0%;
	transition:
		background-size 0.7s,
		background-position 0.5s ease-in-out;
}

.oumeon-overline-text:hover {
	background-size: 100% 100%;
	background-position: 0% 100%;
	transition:
		background-position 0.7s,
		background-size 0.5s ease-in-out;
}

/* #################################### */
/* MARK: Highlight Text Gradient   */
/* #################################### */

.oumeon-highlight-text {
	background: linear-gradient(
		60deg,
		var(--oumeon-colour-primary-500) 0%,
		var(--oumeon-colour-secondary-500) 100%
	);

	color: #ffffff;
	padding: 0.15em 0.35em;
	border-radius: 0.25em;

	/* IMPORTANT - makes highlight work across multiple lines */
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;

	line-height: 1.6;
}

/*
 * ------------------------------------------------------------------------
 * MARK: 6.5 Images & Backgrounds
 * ------------------------------------------------------------------------
 */

/* #################################### */
/* MARK: Background Image with Textin COntainers   */
/* #################################### */

.oumeon-background-image {
	height: 100%;
	width: 100%;
	position: absolute;
	object-fit: cover;
}

/* #################################### */
/* MARK: Images in Headings   */
/* #################################### */

/* Images in Headings - Extra Large */

.oumeon-heading-image-extra-large img {
	width: 110px;
	height: 50px;
	margin-right: 0.5rem;
	margin-left: 0.5rem;
	vertical-align: middle;
	will-change: transform;
	border-radius: 2rem;
	object-fit: cover;
}

@media only screen and (max-width: 768px) {
	.oumeon-heading-image-extra-large img {
		width: 99px;
		height: 45px;
	}
}

@media only screen and (max-width: 460px) {
	.oumeon-heading-image-extra-large img {
		width: 88px;
		height: 40px;
	}
}

/* MARK: Images in Headings - Large */

.oumeon-heading-image-large img {
	width: 88px;
	height: 44px;
	margin-right: 0.5rem;
	margin-left: 0.5rem;
	vertical-align: middle;
	will-change: transform;
	border-radius: 2rem;
	object-fit: cover;
}

/* END GLOBAL STYLES & COMPONENTS */