/*
 * 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.
 * 
 * It also holds site-wide switching styles for hiding or showing various site sections 
 * in the navigation. (These are included in this common sheet because they are required
 * by the sitemap pages.)
 */

: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: White;
	--themeColour0High: #f2f2f2;
	--themeColour0Mid3: #dddddd;
	--themeColour0Mid2: #999999;
	--themeColour0Mid: #666666;
	--themeColour0Low: #000000;
	
	/* 1: Blue */
	--themeColour1: #006EA9;  /* #2196da then #0176ba; */
	--themeColour1High: #E8F4F8;
	--themeColour1Mid: #66b0d0; /* #66b0d0;  #5fa8df */
	
	--themeColour1Transparent: #006EA9cc; /* #2196dacc  then #0176bacc */
	
	/* 2: Green */
	--themeColour2: var(--ljmuMidColour);
	--themeColour2High: #d0fff0;       /* #e0F8e8 */
	--themeColour2Mid: #88e0d8;
	
	--themeColour2Transparent: #2cd5c4cc;
	
	--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);
	
	--buttonTextColourActive: var(--ljmuDarkColour);
	--buttonActiveTransform: scale(0.97,0.95);  /* TODO: did we every actually use this? */
	
	--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: '2025'; }
.siteYearRange::before { content: '2025-26'; }


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

.floatingWarning {
	display: None;  position: Fixed;  /* display: Block; */
	right: 0px;  top: 0px;  z-index: 1000; 
	padding: 0.25em 0.5em;
	background-color: Yellow; color: Red; 
	font-size: 16pt;
}
.floatingWarning::before {
	content: '2025/26 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; }


/* ---------------------------------------------------------------------------- 
 * Coming soon.
 * Note: there is also a comingSoon style in coursepage.css .
 * ---------------------------------------------------------------------------- */
main.comingSoon::before {
	content: 'Coming soon.';
	color: Red;
}
main.comingSoon * {
	display: None;
}