/*
 Theme Name:   MilkanasDecorum (picostrap)
 Theme URI:    https://picostrap.com
 Description:  Child theme for Picostrap5. Experience the power of SASS, merged with the WordPress Customizer. Implementing Bootstrap 5.3.6. Please refer to the <a target="_blank" href="https://picostrap.com/documentation/">documentation</a> to get started. 
 Author:       The LiveCanvas Team
 Author URI:   https://livecanvas.com
 Version:      4.0.1
 Template: picostrap5 
 Text Domain:  milkanasdecorum
 License: GPL-2.0
 License URI: http://www.opensource.org/licenses/gpl-license.php
*/

/*

Do not edit this file.

To add your own CSS, edit  the file: 

sass/_custom.scss 

...and add your own CSS (or SCSS!) statements.

To recompile the SASS bundle, click the "RECOMPILE SASS" link on top.

To edit the  SCSS pipeline, view and edit the file: sass/main.scss

*/

/*

# BEM – Bootstrap Approach (Draft V1: 2025-12-24)

Use this approach if your use case is somewhere between going full-BEM with `@extends`, and writing long rows of utility classes in your HTML.

The use of BEM here is solely for mapping out component modifiers in a clearly distinguishable way.

*At this stage* modifier classes take on one of two roles:

1. To prevent long rows of utility classes (although you should avoid "highly asimmetric layouts" and/or high complexity as a general rule for your designs).
2. To introduce CSS functionality not covered by Bootstrap (i.e. animations).

In its longest form, in a nutshell:

Start with a component class (card), add prefixed modifier (maw-card--animated), add responsive utility classes, finish-up with helpers.

---

Goals

1. Readability
2. Prevent long lines of classes
3. Namespaced, custom component modifiers for customization and reusability
4. Preserving Bootstrap functionality
5. Avoid unnecessary complexity (i.e. combining BEM with Atomic Design and @extend-ing Bootstrap SCSS into the BEM classes)

## Rules

Classes are written for an element in the following **order**:  

NB1: The curly braces are used for illustrative purposes.  
NB2: All classes groups mirror the titles from the Bootstrap docs.
NB3: Namespaced, BEM modifier classes are added after the component class (i.e. 2nd place), for improved visibility

### For Structure

1. Layout class (i.e. container, row, col)
2. Namespaced, BEM modifier class (if applicable)
3. Utilities: display, flex, opacity, overflow, etc.
4. Utilities: everything else
3. Helpers

### For Components

1. Component class (i.e. card, nav, modal)
2. Namespaced, BEM modifier class (if applicable)
3. Utilities: display, flex, opacity, overflow, etc.
4. Utilities: everything else
3. Helpers

NB: The word 'components' applies to inline and block-level elements. If a certain group of classes does not apply, simply omit it.

#### A Note on Responsive Classes

When writing responsive classes, always write breakpoints in order – from mobile to XXL.

Examples:

`<div class="p-3 p-md-4 p-lg-5 p-xxl-6">`

`<div class="d-none d-md-block d-lg-flex justify-content-lg-between">`

## Namespaced, custom component modifiers for customization and reusability

### Modifier classes

Example:

`ysc-card--animated`

### Namespacing

For prefixing, abbreviate the first three letters of the full domain name.

If the website name is 'MyAwesomeWebsite.com', then all classes must be prefixed with `maw-`.
If the website name is 'YourSite.Com', then all classes must be prefixed with `ysc-`.
If the website name is 'Site.Com', then all classes must be prefixed with `sic-`.

This approach strongly mitigates the probability of namespacing collisions.

## Preserving Bootstrap Functionality

1. Component classes are preserved in order for BS Javascript functionality to remain untouched.
2. Utilities and Helpers are used in order to preserve BS's responsive features and avoid the need for media queries.

*/