@charset "utf-8";

/** 
 * [GLOBAL CSS VARIABLES]
 */

/** 
 * [MASTER STYLESHEET CONTENTS]
 *
 * Original idea from Smashing Magazine
 * https://www.smashingmagazine.com/2008/05/improving-code-readability-with-css-styleguides/
 * 
 * Augmented by principles of CSS Guidelines
 * https://cssguidelin.es/#table-of-contents
 * 
 * Further expanded into layer structures
 * https://www.smashingmagazine.com/2025/09/integrating-css-cascade-layers-existing-project/
 * 
 * Refer to BEM-like naming for more efficient selectors and to avoid specifity
 * problems. BEM splits components’ classes into three groups:
 *	- Block: The sole root of the component. For example, A table or list
 * 	- Element: A component part of the Block. For example: A table cell or list item
 *	- Modifier: A variant or extension of the Block. Can be based on state or statefulness
 * 	- and looks like: .block__element--modifier
 * 
 * SETTINGS
 * Global...............Globally-available variables and config.
 *
 * TOOLS
 * Mixins...............Useful mixins.
 *
 * GENERIC
 * Normalize.css........A level playing field.
 * Box-sizing...........Better default `box-sizing`.
 *
 * BASE
 * Headings.............H1–H6 styles.
 *
 * OBJECTS
 * Wrappers.............Wrapping and constraining elements.
 *
 * COMPONENTS
 * Page-head............The main page header.
 * Page-foot............The main page footer.
 * Buttons..............Button elements.
 *
 * TRUMPS
 * Text.................Text helpers.
 */

/*----------------------------------------------------------------------------*\
	[LAYOUTS]
\*----------------------------------------------------------------------------*/

/**
 * [LAYOUT AND FLEXBOX NOTES]
 * CSS Grids are for LAYOUT, 2 dimensions
 * Define layout grid containers, then place content areas into them.
 * Example:
 * .grid_header 		{ display: grid; grid-template-areas: "grid_header_logo"; }
 * .grid_header_logo 	{ grid-area: grid_header_logo; }
 * Layouts can change according to media query.
 * https://css-tricks.com/snippets/css/complete-guide-grid/
 * 
 * CSS Flexbox is for a BOX, either row or column.
 * Place into a layout grid.
 * https://medium.com/flexbox-and-grids/how-to-efficiently-master-the-css-grid-in-a-jiffy-585d0c213577
 */

/**
 *
 * [Typography]
 * 
 * [VIEWS AND BREAKPOINTS]
 * - Screen (Layout grids defined here)
 * 
 * [Media queries modify layout grids]
 * - Max 80 characters wide, portrait mode, thumb navigation at BOTTOM of screen
 * - Max 80 characters wide, landscape mode, thumb navigation at BOTTOM of screen
 * - 90-150 characters wide, portrait mode, thumb navigation at SIDES of screen
 * - 90-150 characters wide, landscape mode, thumb navigation at BOTTOM of screen
 * - 150+ characters wide, portrait mode, standard navigation
 * - 150+ characters wide, landscape mode, standard navigation
 * 
 * - Print
 * - Speech (not yet implemented)
 * - Ads
 * - Elements
 * - Colour
 * -------------------------------------------------------------------*/

/*-------------------------------------------------------------------
[LAYERS]
-------------------------------------------------------------------*/
/* @layer layout, elements, ads, typography, colours; */

/*-------------------------------------------------------------------
[TYPOGRAPHY]
-------------------------------------------------------------------*/
@import "kemosite-wordpress-typography.css" all;

/*-------------------------------------------------------------------
[COLOURS]
-------------------------------------------------------------------*/
@import "kemosite-wordpress-colours.css" all;

/* [ALL] */
@import "kemosite-wordpress-layout-all.css" all; /* General variables and settings */

/* [SCREEN] */
@import "kemosite-wordpress-layout-screen.css" screen; /* Screen specific variables and settings */

/* [PRINT] */
@import "kemosite-wordpress-layout-print.css" print; /* Print specific variables and settings */

/* [SPEECH] */
@import "kemosite-wordpress-layout-speech.css" speech; /* Speech charactistics */


/* [DEVICE, PORTRAIT ORIENTATION] */

/* Single Column */
@import "kemosite-wordpress-layout-screen-LT90-portrait.css" screen and (max-width: 90ch) and (orientation: portrait);
@import "kemosite-wordpress-layout-screen-LT90-landscape.css" screen and (max-width: 90ch) and (orientation: landscape);

/* 2-Column, Left Sidebar */
@import "kemosite-wordpress-layout-screen-90-150-portrait.css" screen and (min-width: 90ch) and (max-width: 150ch) and (orientation: portrait);
@import "kemosite-wordpress-layout-screen-90-150-landscape.css" screen and (min-width: 90ch) and (max-width: 150ch) and (orientation: landscape);

/* 3-Column, Both Sidebars */
@import "kemosite-wordpress-layout-screen-150-portrait.css" screen and (min-width: 150ch) and (orientation: portrait);
@import "kemosite-wordpress-layout-screen-150-landscape.css" screen and (min-width: 150ch) and (orientation: landscape);

/* # ADS # */
@import "kemosite-wordpress-layout-screen-ads.css" screen;

/* [ELEMENTS] */
@import "kemosite-wordpress-elements.css" all; /* Common variables and settings */