/*
 * This stylesheet holds common styles to be applied to every page: index page as well 
 * as course pages. This includes site-wide 'content' styles for things like the 
 * current year, and floating warning texts, which can appear on every page.
 */

:root {
	/* LJMU brand colours */
	--ljmuDarkColour: #00205B;         /* Dark blue */ /* #193177; */
	--ljmuMidColour: #2cd5c4;          /* Lime green */
	--ljmuHighColour: #d8e2e9;         /* Light blue */
	--ljmuGreyColour: #cccccc;         /* 80% grey */
	--ljmuWhiteColour: #ffffff;        /* 100% white */

	/* 0: Black/white/grey */
	--themeColour0: #ffffff;
	--themeColour0High: #f2f2f2;
	--themeColour0Mid3: #dddddd;
	--themeColour0Mid2: #999999;
	--themeColour0Mid: #666666;
	--themeColour0Low: #000000;
	
	/* 1: Blue */
	--themeColour1: #006EA9;
	--themeColour1High: #E8F4F8;
	--themeColour1Mid: #66b0d0;
	
	/* FIXME - is this ever used? */
	/*--themeColour1Transparent: #006EA9cc;  /* FIXME: use new-ish 'color=mix' function. */
	--themeColour1Transparent: color-mix( in srgb , var(var(--themeColour1)) , transparent 20% );
	
	/* 2: Green */
	--themeColour2: var(--ljmuMidColour);
	--themeColour2High: #d0fff0;
	--themeColour2Mid: #88e0d8;
	
	/*--themeColour2Transparent: #2cd5c4cc;*/
	--themeColour2Transparent: color-mix( in srgb , var(--ljmuMidColour) , transparent 20% );
	
	--themeBorderThickness: 2px;       /* Used for border lines on tabs, tables, accordions, etc. */
	--themeBorderRadius: 5px;          /* Rounded corners. */
	
	--shadowColour: #dadada;         /* FIXME, never used? */
	
	--fontList: Roboto, Arial, Helvetica, Sans-Serif;
	--fontMasterSize: 12pt;
	--headerLRPadding: 1rem;           /* L+R spacing for elements above the <header> and <main> */
	--mainLRMargin: 0.5rem;            /* L+R spacing for elements inside <header> and <main> */
	--listPadding: 1.5rem;             /* Padding at left side of lists, for markers. */
	--selectedBorderWidth: 5px;        /* The thick one-side border used to indicate buttons and tabs. */
	
	
	/* Buttons */
	--buttonTextColour: var(--themeColour1);
	--buttonTextColourHover: var(--themeColour1);
	
	--buttonTextSubColour: var(--themeColour0Mid);
	--buttonTextSubColourHover: var(--themeColour1);
	
	--buttonBorderWidth: 0px 0px 0px var(--selectedBorderWidth);
	--buttonBorderColour: var(--themeColour1);
	--buttonBorderColourSelected: var(--themeColour1);
	--buttonBorderColourHover: var(--themeColour1);
	
	--buttonBackgroundColour: var(--themeColour0High);
	--buttonBackgroundColourSelected: var(--themeColour2High);
	--buttonBackgroundColourHover: var(--themeColour2High);
		
	--focusOutline: 2px Dashed var(--themeColour1);
}

@font-face {
	font-family: Roboto;
	src: url('./fonts/Roboto/Roboto-Regular.ttf');
	font-weight: Normal;
	font-style: Normal;
}

/* https://fontawesome.com/v4/license/ */
@font-face {
	font-family: FontAwesome;
	src: url('./fonts/FontAwesome/fontawesome-webfont.ttf');
	font-weight: Normal;
	font-style: Normal;
}
/*
class starts with fontawesome or has " fontawesome" in its content
	*[class^="fontawesome-"], *[class*=" fontawesome-"] {  font: FontAwesome;  font-size: Inherit; } 
*/

@font-face {
	font-family: Tahu;
	src: url('./fonts/Tahu/Tahu!.ttf');
	font-weight: Normal;
	font-style: Normal;
}



/* ---------------------------------------------------------------------------- 
 * Site year, for copyright in footer, etc.
 * ---------------------------------------------------------------------------- */

.siteYear , .siteYearRange { 
	display: Unset !important;  text-align: Unset !important;  
	color: Unset !important;  font-size: Unset !important;  padding: Unset !important;
}
.siteYear::before { content: '2026'; }
.siteYearRange::before { content: '2026-27'; }


/* ---------------------------------------------------------------------------- 
 * Preview mode -- places yellow warning box in corner.
 * ---------------------------------------------------------------------------- */

.floatingWarning {  /* Change to display: None to hide. */
	display: None;  position: Fixed;
	right: 0px;  top: 0px;  z-index: 1000; 
	padding: 0.25em 0.5em;
	background-color: Yellow; color: Red; 
	font-size: 16pt;
}
.floatingWarning::before {
	content: '2026/27 PREVIEW';
}


/* ---------------------------------------------------------------------------- 
 * Switch sections / pages off and on.
 * This affects what is shown in navigation menus and links.
 * ---------------------------------------------------------------------------- */

/*
 * These classes enable entire sections to be hidden in the navigation.
 *   display: None !important; 
 */
/*.sectionA { display: Initial; }
.sectionB { display: Initial; }
.sectionC { display: Initial; }
.sectionD { display: Initial; }
.sectionE { display: Initial; } 
.sectionF { display: None !important; } 
.sectionG { display: None !important; } */

/*
 * Hide or show sitemap. 
 */
/* .sitemap { display: None !important; } */

/*
 * Never show Section G in UG Primary and UG Secondary.
 */
body.ugPrimary .sectionG , 
body.ugSecondary .sectionG { display: None !important; }