/* global color palettes */
/* used with hsl() function for better color control */
/* COPIED from bcbgstyle.css - update if changes made there */
:root {
	--color-primary: #CC6600; /* orange */
	--color-secondary: #781F19; /* dark red/brown */
	--color-accent: #FFCC33; /* yellow */
	--color-background: #FFFFFF; /* white */
	--color_highlight: #FFFF99; /* light yellow */
	--color-text: #000000; /* black */
}
/* top title banner on blog home page */
.quarto-title-banner {
    position: relative; 
	width: 100%; 
	min-height: 120px;
	height: 150px;
	display: flex;
	justify-content: center;
	overflow: hidden; 
	align-items: center;
	padding: 0px;
	margin: 0px;
	background-color: hsl(from var(--color-primary) h 10% 95% );
	z-index: -2; /* larger number = higher in stack; keep below banner image */
}
/* top title banner - with background image overlay */
.quarto-title-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-image: url("img/top_bkgrnd_mid_gemini.png");
	background-size: cover; /* Ensure the background image covers the entire div */
	background-position: center; /* Center the background image */
    /*background: linear-gradient(rgba(255,252,153,0.1), rgba(255,252,153,0.25));*/
	/* The "Wash Out" Magic */
    opacity: 0.7;      /* lower values fade image against the white page background */
    filter: grayscale(0%); /* Optional: mutes the colors slightly */
    z-index: 1; /* Place the overlay behind the title text, above bkground */
	border-bottom: hsl(from var(--color-secondary) h s l ) 1px solid;
}
/* h1 style from main site css */
/* set up to match h1 style from main site, used for top banner */
/* works for blog home page BUT also blog posts - not as good */
.quarto-title h1.title {
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 3em; 
	font-weight: 700px; 
	color: hsl(from var(--color-text) h s l );
	margin-bottom: 0px; 
	margin-top: 6px;
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: center;
	border: none; /* for testing */
	letter-spacing: 4px; 
	z-index: 0; /* above (if higher) or below (if lower) than background image */
	text-shadow: 
	   0.5px 0.5px 0px hsl(from var(--color-primary) h 10% 95% ),
	   1px 1px 2px hsl(from var(--color-accent) h s l ),
	   2px 2px 4px hsl(from var(--color-secondary) h s l );
}
/* subtitle in blog header - also used in blog posts */
p.subtitle {
	color: hsl(from var(--color-text) h 80% 5% );
	text-align: center;
	margin-top: 0.25em;
	margin-bottom: .25em;
	font-size: 1.25em;
	text-shadow: 2px 2px 4px hsl(from var(--color-background) h s l );
}
/* BLOG POST STYLES */
/* blog post title style - overrides h1.title above */
#quarto-document-content .title{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	font-weight: 200;
	margin-top: 2px;
	color: hsl(from var(--color-secondary) h 30% l );
	text-shadow: none;
	letter-spacing: normal;
	text-align: left;
}
/* blog post subtitle style */
#quarto-document-content .subtitle{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: 300;
	margin-top: 0px;
	margin-bottom: 8px;
	color: hsl(from var(--color-primary) h 10% 40% );
	text-shadow: none;
	letter-spacing: normal;
	text-align: left;
}
/* Meta data at top (author, date, etc.) - override default grid layout */
/* Mirroring the specific ID and classes to override the grid */
#title-block-header.quarto-title-block.default .quarto-title-meta {
	display: flex !important;      /* Overrides 'display: grid' */
	flex-direction: row;           /* Put items in a line */
	flex-wrap: wrap;               /* Allow wrapping on mobile */
	gap: 3em;                      /* Space between Author, Date, etc. */
	grid-template-columns: none;   /* Explicitly kill the grid columns */
	font-size: 0.9em;
	font-weight: normal;
	color: hsl(from var(--color-text) h 0% 33% );
	margin-top: 0px;
	margin-bottom: 16px;
}

/* NAVIGATION - align style with main site */
/* while also favouring defaults as much as possible for simplicity */
.navbar {
	background: hsl(from var(--color-accent) h 80% 80% ); /*!important;*/
	height: 50px; /* set top banner to 3x this height */
	border-bottom: hsl(from var(--color-secondary) h s l ) 1px solid;
}

.navbar-nav .nav-link {
	color: hsl(from var(--color-primary) h s l);
}
.navbar-nav .nav-link:hover {
	color: hsl(from var(--color-secondary) h s 20%) !important;
}
.navbar-nav .nav-link.active {
	color: hsl(from var(--color-secondary) h s l) !important; /* Active link text color */
	font-weight: bold;
}
/* used to provide correct vertical alignment for navbar brand/title */
/* don't know why it is needed but it is - best method i could find */
span.navbar-title {
	display: inline-block;
	font-size: 0.85em;
	color: hsl(from var(--color-secondary) h s l );
	padding-bottom: 5px;
}

.navbar-toggler {
	padding: 2px 5px; /* Smaller toggle button */
}
/* social icons/links in navbar */
.navbar-nav .ms-auto {
  display: flex;
  align-items: center;
}
/* x/twitter & email logos use font awesome */
/* not sure why requires separate styling but it does */
/* attribute selector will match any nav item with 'class' containing '...fa..' */
.nav-item i[class*="fa"] {
	font-size: 1.3rem;
	padding-top: 3px;
}

/* MAIN CONTENT - incl headers but not nav bar */
main.content {
	max-width: 90ch; /* 75ch considered optimal max for readability */
	margin-inline: auto;
}
main.content h2	{ 
	font-family: Arial; 
}

/* h2 tags in articles which are 'anchored' as part of TOC*/
h2.anchored {
    border: none;
}

h3 { 
	font-family: Arial; 
	color: hsl(from var(--color-text) h s 22% );
	margin-top: 1.2rem;
}

/* FOOTER at bottom of page */
.site-footer {
	display: flex;
	font-size: 0.9em;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	justify-content: center;
	border-top: 1px solid hsl(from var(--color-secondary) h s l);
}
.site-footer a {
  color: inherit;
  text-decoration: underline;
}

.site-footer a:hover {
  text-decoration: none;
}