/* test styling partial: */
@import url('partials/test.css');

/* necessary wordpress overrides (mostly admin bar) */
@import url('./partials/wp-overrides.css');

/* original styling:  */
/* @import url('./style-partials/original.css'); */

/* font import (jp - will probably be replaced) */
@import url('./partials/fonts.css');    

/* new styling system (jp): */
@import url('./partials/variables.css');    
@import url('./partials/base.css');
@import url('./partials/structure.css');
@import url('./partials/look.css');
@import url('./partials/look_typography.css');
@import url('./partials/look_spacing.css');
@import url('./partials/animation.css');
@import url('./partials/components.css');

/* a few debuggin classes (jp): */
@import url('./partials/debug.css');


/* 
jp: STYLING SYSTEM ==================================================================== 

1) BEM (block__element--modifier)

css: 
.aed-parallax__layer {  ... } 
.aed-parallax__layer--ship { ... }

--------------------------------------- 

2) utility & component class mix (see https://cube.fyi/)

html:
class=" structure-classes | look-utility-classes | animation-utility-classes || bem-component-class "

html:
class=" relative flex-row | glow px-sm | slide-in || some-block__some-element " 
class=" wrapper | bg-dark "
class=" || menu-icon-bar__mask "

---------------------------------------

3) states and temporal classes via attributes

html: 
class=" || some-component " data-state="playing" 

css: 
.some-component { ... }
.some-component[data-state="playing"] { ... }
.some-component[data-state="finished"] { ... }

js: 
someComponent.setAttribute('data-state', 'finished');

(or) 

html:
class=" || aed-nav-icon--menu " data-small

css: 
.aed-nav-icon--menu[data-small] { ... }

js: 
aedNavIconMenu.removeAttribute('data-small');
aedNavIconMenu.setAttribute('data-small', '')

=========================================================================================== 
*/

/*
jp: ANIMATION SYSTEM ======================================================================== 

utility-based-animations: 

there are currently three animation utility classes (in 'animation.css'):
.introduce-up
.introduce-sideward ([data-introduce-direction="left"])
.introduce-fade

...each of which can be modified to be more or less impactful with: 
[data-introduce-version="sm"]
[data-introduce-version="lg"

...and delayed with: 
[data-introduce-stagger="1"]
[data-introduce-stagger="2"]
[data-introduce-stagger="..."]
[data-introduce-stagger="9"]

the animations are triggered via [data-introduce-play] in 'theme-script.js'

=========================================================================================== 
*/