/********************************************

CUSTOM FONTS

********************************************/

/* ROBOTO */
@font-face { font-family:Roboto-Reg; src:local("Roboto"),url("fonts/Roboto-Regular.ttf"),format("truetype"); }
@font-face { font-family:Roboto-Bold; src:local("Roboto Bold"),url("fonts/Roboto-Bold.ttf"),format("truetype"); }
@font-face { font-family:Roboto-Italic; src:local("Roboto Italic"),url("fonts/Roboto-Italic.ttf"),format("truetype"); }
@font-face { font-family:Roboto-BoldItalic; src:local("Roboto Bold Italic"),url("fonts/Roboto-BoldItalic.ttf"),format("truetype"); }

@font-face { font-family:Roboto-SemiBold; src:local("Roboto SemiBold"),url("fonts/Roboto-SemiBold.ttf"),format("truetype"); }
@font-face { font-family:Roboto-SemiBoldItalic; src:local("Roboto SemiBoldItalic"),url("fonts/Roboto-SemiBoldItalic.ttf"),format("truetype"); }


/********************************************

CUSTOM COLOUR VARIABLES

********************************************/

/* GREYSCALE */
@property --grey90 {syntax:"<color>";inherits:false;initial-value:rgb(25,25,25);}
@property --grey80 {syntax:"<color>";inherits:false;initial-value:rgb(50,50,50);}
@property --grey70 {syntax:"<color>";inherits:false;initial-value:rgb(75,75,75);}
@property --grey60 {syntax:"<color>";inherits:false;initial-value:rgb(100,100,100);}
@property --grey50 {syntax:"<color>";inherits:false;initial-value:rgb(125,125,125);}
@property --grey40 {syntax:"<color>";inherits:false;initial-value:rgb(150,150,150);}
@property --grey30 {syntax:"<color>";inherits:false;initial-value:rgb(175,175,175);}
@property --grey20 {syntax:"<color>";inherits:false;initial-value:rgb(200,200,200);}
@property --grey10 {syntax:"<color>";inherits:false;initial-value:rgb(225,225,225);}

/* NEAR BLACK AND WHITE */
@property --black {syntax:"<color>";inherits:false;initial-value:rgb(10,10,10);}
@property --white {syntax:"<color>";inherits:false;initial-value:rgb(245,245,245);}

/* MAIN COLOUR PALETTE */
@property --blue-main {syntax:"<color>";inherits:false;initial-value:rgb(2, 48, 71);}
@property --blue-med {syntax:"<color>";inherits:false;initial-value:rgb(33, 158, 188);}
@property --blue-light {syntax:"<color>";inherits:false;initial-value:rgb(142, 202, 230);}
@property --orange {syntax:"<color>";inherits:false;initial-value:rgb(251, 133, 0);}
@property --yellow {syntax:"<color>";inherits:false;initial-value:rgb(255, 183, 3);}

/* PRIMARY BUTTON COLOURS */
@property --btn-primary {syntax:"<color>";inherits:false;initial-value:rgb(2, 48, 71);}
@property --btn-primary-hover {syntax:"<color>";inherits:false;initial-value:rgb(0, 95, 143);}
@property --btn-primary-active {syntax:"<color>";inherits:false;initial-value:rgb(2, 69, 102);}
@property --btn-primary-click {syntax:"<color>";inherits:false;initial-value:rgb(33, 158, 188);}
@property --btn-primary-disabled {syntax:"<color>";inherits:false;initial-value:rgb(60, 90, 105);}




/********************************************

GLOBAL SITE LAYOUT SETTINGS AND ELEMENTS

********************************************/

html, body, section, nav, footer {
	padding: 0;
	margin: 0;
	width: 100%;
	background: rgb(255, 255, 255);
	color: var(--blue-main);
}

section {
	padding-top: 25px;
	padding-bottom: 25px;
}

div.container {
	margin: auto;
	width: 85%;
}

div.flexbox {
	display: flex;
	flex-flow: row nowrap;
}

div.flexrow {
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
}

section.odd {
	background: var(--white);
}


div.card {
	flex: 1 1 200px;
	background: var(--grey10);
	border: none;
	border-radius: 10px;
	padding: 20px;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
}



#carousel-pantrypal-prev { height:40px; aspect-ratio:1/1; z-index: 9; opacity: 50%}
#carousel-pantrypal-prev:hover { opacity: 100%}
#carousel-pantrypal-next { height:40px; aspect-ratio:1/1; z-index: 9; opacity: 50%}
#carousel-pantrypal-next:hover { opacity: 100% }

/********************************************

TEXT STYLES

********************************************/

h1,h2,h3,h4,h5,h6 {
	font-family: Roboto-SemiBold, sans-serif;
}

p,li,a,q,blockquote {
	font-family: Roboto-Reg, sans-serif;
	font-size: 14pt;
}

.center { text-align: center }

/* Mobile Screens */
@media only screen and (max-width: 768px) {
	h1 { font-size: 24pt; }
	h2 { font-size: 20pt; }
	h3 { font-size: 16pt; }
	h4,h5,h6 { font-size: 14pt; }
	p { font-size: 14pt }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
	h1 { font-size: 32pt; }
	h2 { font-size: 24pt; }
	h3 { font-size: 16pt; }
	h4,h5,h6 { font-size: 14pt; }
	p { font-size: 14pt }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
	h1 { font-size: 40pt; }
	h2 { font-size: 32pt; }
	h3 { font-size: 24pt; }
	h4,h5,h6 { font-size: 18pt; }
	p { font-size: 16pt }
}


/********************************************

BUTTON STYLES

********************************************/

/* Default button if no classes are provided (same as .primary) */
button {
	background: var(--blue-main);
	outline: none;
	border: none;
	border-radius: 10px;
	padding: 8px 24px;
	color: var(--white);
	font-size: 20pt;
}

button:hover {
	background: var(--blue-med);
}

/* Primary Buttons - background filled in */
button.primary {
	background: var(--btn-primary);
	outline: none;
	border: none;
	border-radius: 10px;
	padding: 8px 24px;
	color: var(--white);
}

button.primary:hover { background: var(--btn-primary-hover); }
button.primary:active { background: var(--btn-primary-active); }
button.primary:disabled { background: var(--btn-primary-disabled); }

/* Secondary Buttons - no bg, with outline */
button.secondary {
	background: none;
	outline: 2px solid var(--blue-main);
	border: none;
	border-radius: 10px;
	padding: 8px 24px;
	color: var(--blue-main);
}

button.secondary:hover { outline: 2px solid var(--btn-primary-hover); color: var(--btn-primary-hover);}
button.secondary:active { outline: 2px solid  var(--btn-primary-active); color: var(--btn-primary-active);}
button.secondary:disabled { outline: 2px solid var(--btn-primary-disabled); color: var(--btn-primary-disabled);}

/* Button Font Sizes */
button.size24 { font-size:24pt }
button.size16 { font-size:16pt }

/* Button Icon Placement */
button.iconOnly::after { content: ">"; }
button.iconLeft::before { content: "> "; }
button.iconRight::after { content: " >"; }






/********************************************

LINK STYLES

********************************************/


a {
	color: var(--blue-main);
	text-decoration: underline;
}

a:hover {
	color: var(--blue-med);
	text-decoration: none;
}

a:active {
	color: var(--blue-light);
	text-decoration: underline;
}

a.btn {
	text-decoration: none;
	color: inherit;
}

a.btn:hover {
	color: inherit;
}


/********************************************

LINES and SEPARATORS

********************************************/

hr.separator-null-25 { border: none; margin: 25px auto; }
hr.separator-null-50 { border: none; margin: 50px auto; }

hr.project-separator {
	width: 85%;
	border: 1px solid var(--grey10);
	margin: 50px auto;
}




/********************************************

NAV STYLES

********************************************/

nav {
	background: var(--white);
	border: 1px solid var(--white);
	box-shadow: 0px 0px 5px var(--grey50);
	font-family: Roboto-SemiBold;
	font-size: 16pt;
	color: var(--blue-main);
	align-items: center;
	a {
		display: flex;
		align-items: center;
		text-decoration: none;
	}
	a:hover {
		text-decoration: none;
		font-family: Roboto-Bold;
	}
	ul {
		flex: 1 1 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		list-style-position: inside;
		list-style: none;
		gap: 25px;
		li {
			padding: 25px;
			a {
				text-decoration: none;
			}
		}
	}
}


/********************************************

FOOTER STYLES

********************************************/

footer {
	background: var(--blue-main);
	color: var(--white);
	padding: 20px 0px;
	div.container {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: baseline;
		div {
			display: flex;
			gap: 15px;
			align-items: baseline;
		}
	}
}



/********************************************

LAYOUTS

********************************************/

div.herotext {
	width: 60%;
}

section.split-timeline {
	div.container {
		display:flex;
		flex-flow: row nowrap;
		gap: 50px;
		div.desc {
			flex: 1 1 0;
		}
		div.timeline {
			flex: 2 1 0;
			display: flex;
			flex-flow: column nowrap;
			gap: 20px;
			border-left-color: var(--blue-med);
			border-left-style: dashed;
			border-left-width: 2px;
			div.item {
				padding:0px 25px;
				h2,h3,h4,p { margin:0;padding:0; }
				div.dot { position: relative; top:18px; left:-31px; height:10px; width:10px; border-radius:50%; background:var(--blue-main); }
			}
		}
	}
}