@import url("https://fonts.googleapis.com/css?family=Nunito:italic,bold,bolditalic|EB+Garamond:italic");

/* Any @import e.g. Google Web Font, goes ABOVE HERE, on the first line, BEFORE any comments */
/* The above came from CNPS-SCV Gantry template

/* CNPS-SCV Cassiopeia template CSS overrides, started July 2025 by CEM, some copied from bikex.org and autovis.com */

/* TO DO: change the colors to match what we need for CNPS.  Update the variable names as you update the colors */

:root {
  --cnps-font-family-body: Helvetica, Arial, Verdana, sans-serif;		/* Popular, accessible fonts */
  --body-text-align: left;		/* template.min.css looks for this */
  --cnps-pale-cream: white;		/* Website background, was #fffbf2, a very pale cream */
  --cnps-old-background: #ffefcc;	/* "wheat-like": For menu, sidebar titles, and footer BG.  Was #fffbf2 */
  --cnps-font-color: #6e6e6e;
  --cnps-heading-color: #303030;
  --cnps-link-color: #435f35;	/* A dark moss green.  Was #496a3b but darker color passes WCAG AAA */
  --link-hover-color: #435f35;	/* Otherwise the template sets it to an attractive dark purple, but that doesn't match our CNPS theme */
  --gantry-border-color: #d5d5d5;
}

body {  
  color: var(--cnps-font-color);
  font-size: 15px;	/* Was 14px, but .font-size-is-large for Gantry body is 15px */
  font-family: var(--cnps-font-family-body);
  line-height: 1.7em;	/* From Gantry, body font-size-is-large class it's 1.7em.  Note the em. */
  background-color: var(--cnps-pale-cream); 
}
/* See below for heading and more font styles */

div.container-nav {
	border-bottom: 2px solid var(--cnps-link-color);
	/*background-color: white;		* var(--cnps-pale-cream); */
	background-color: var(--cnps-old-background);
}
.container-header .mod-menu > li a {
	color: var(--cnps-heading-color);
}

/* Color the menu button - default is white, which doesn't show up against our light green menu bar background.  Instead use brown from the logo and green from the header background. */

.container-header .navbar-toggler {
	color: var(--cnps-heading-color);
	border: 4px solid var(--cnps-link-color);
	background-color: var(--cnps-pale-cream);
}
.navbar-toggler:hover {
	background-color: white;
}
.navbar-toggler {
	font-size: 1.5rem;	/* larger */
	border-radius: 0.4rem;	/* smoother for the larger size */
	margin-bottom: 2px;	/* just a bit larger - sets height of menu bar when menu is gone for phones */
}
.breadcrumb {
	background-color: inherit;
}
a.pathway {
	color: var(--cnps-link-color);
	text-decoration: none;
}
a.pathway:hover {
	text-decoration: underline;
}

/* Show submenu on hover, from https://forum.joomla.org/viewtopic.php?t=999105 */
/* THANK YOU to zema2023 For posting newer code that works!!! */
/* Copied from bikex.org and autovis.com Jul/Jan 2025 */

/* Hide sub-menu by default */
.mod-menu .metismenu.mod-menu .mm-collapse {
  display: none;
}
/* Show sub-menu on hover */
.mod-menu .metismenu-item:hover .mm-collapse {
  display: block;
}

/* Now, we need the disclosure triangles to also be dark, not white */
.metismenu.mod-menu .mm-toggler {
	color: var(--cnps-font-color);
}

/* Make the submenu text color lighter, with less line height, to match Novitas bikex */
.metismenu.mod-menu .metismenu-item {
	font-size: 1.2em;	/* This applies to main menu text */
	padding: 0.4em 0.5em;
}
.metismenu.mod-menu .metismenu-item ul li a {
	color: #666;
	font-size: 1rem;		/* This applies to submenu text */
}
.metismenu.mod-menu .metismenu-item ul li a:hover {
	color: var(--cnps-font-color);
	text-decoration: none;
}

/* Color each submenu item on hover */

.metismenu.mod-menu .metismenu-item ul li a:hover {
	color: var(--cnps-link-color);	/* too subtle? */
}
/* Background color for 3rd level menu items */
li.metismenu-item.level-3 {
	background-color: var(--cnps-old-background);
}

/* Now reduce space above and below the main menu */
.container-header nav {
	margin-top: 0;		/* was .5em */
}
.container-header .container-nav {
	padding-top: 0.2em;	/* not sure what this was, but it was more */
	padding-bottom: 0.2em;	/* was 1em */
}

/* "Depress" the current top level menu item, to show on what page we are */
/* Also show this effect upon hover */
nav li.active.level-1, nav li.level-1:hover {
	box-shadow: inset 0 3px 8px rgba(0,0,0,0.125);
}

/* Style the breadcrumbs and search modules across the top-b module */

div.top-b.card {
	border: none;
}
div.top-b.card div.card-body {
	padding: 1rem 0 0 0;
}
div.top-b.card div.card-body form.mod-finder {
	text-align: right;
}

div.grid-child main {
	margin-top: 0;			/* reduce vertical space between top-b and title */
}

/* Restrict text width on wide screens.  Accomplish by restricting width of entire display within main content area.  WAI (Web Accessibility Initiative) says max length 80 chars but that looks really narrow.  A compromise?  60em = ~125 char width, looks pretty narrow already.  */

@supports (display: grid) {
	@media (width >= 992px) {
		body:not(.has-sidebar-right) .site-grid {
			max-width: 60em;
			margin: 0 auto 0;		/* Also center the content within this content area */
		}
	}
}


/************************************************************/
/* Styles from gantry-custom.css, from the Joomla 3 website */
/* The "rt" prefix comes from Rocket Theme, the provider of the Gantry template.  So note the Cassiopeia template code doesn't necessarily use the "rt" styles.  However my code for the banner uses some "rt" styles, so remove them with care. */

/* Header background image.  For Cassiopeia add the rules to container-below-top class, which is enclosed by <header, that also encloses below-top module */

div.container-below-top {
	background-image: url("/images/logo/table-mt-flower-carpet-april-vivian-neou.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
/* To get the border between the header and the menu: */	
	background-color: #f1f1f1;
	/* text-shadow: 0 2px 3px white;  Gantry has but text is clearer against bg without */
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);  /* How to get that nice inset shadow? */
	box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
	border-bottom: 2px solid white;		/* Since inset shadow won't show, set 2px instead of 1px */
}

/* For header: we also need rt-block styles to wrap the logo and text, to give them some padding and margin.  I copied the styles from what inspector showed me - CEM Aug 2025.  Wrap the code in the custom module with a div class="rt-block."  We MIGHT not need so much border after all, but try for the live/J3 site look first */

div.rt-block {
	padding: 15px;
	margin: 10px;
	position: relative;
}
.container-header .grid-child {
	padding: inherit;	/* Was 0.5em, but makes the header just a little larger than in Gantry */
}

/* Trying to get the header logo and text more stretchy and centered like in Gantry, instead of more left-justified.  This code comes from grid-responsive.css and it's only a subset. */

.rt-container {
	width: 1200px;
	margin: 0 auto;
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	.rt-container {width: 960px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.rt-container {width: 768px;}
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
	.rt-container {width: 480px;}
}
@media only screen and (max-width: 480px) {
   .rt-container {width: 95%;}
}


/* Buttons in the header - do we HAVE buttons at the Joomla 3 live site?  (Gantry -- note back to top button in footer.)  For Cassiopeia we have the occasional dark blue button e.g. admin log in/out.  Let's comment these out for now.

.btn {
	border-radius: 6px;		* was 4px *
	font-weight: bold;
	font-size: 105%;
	margin-bottom: 0.5em;
}
.btn-cnps-scv {
	background-image: none;		* Override Bootstrap default *
	background-color: #fffbf2;	
	border-color: #496a3b;
	color: #496a3b;
	margin-right: 7px;	* In case they wrap *
}
.btn-cnps-scv:hover { 
	background-color: #ffffff;
}
.btn-cnps-scv:active, .btn-cnps-scv:focus {
	background-color: #ffffff;
}
*/

.title-first-line {
	font-size: 280%;
}
.title-second-line {
	font-size: 350%;
}
.title-lines {
	margin-top: 2.0em;
}

/* Push the logo down for small devices, so it doesn't underlap the menu button */
/* Also make the title font a little smaller for these handhelds */

@media (max-width: 415px) {		/* Means: If device width is <= 414px then do ... */
	.push-me-down-on-phone {
		margin-top: 30px;
	}
	.title-first-line {
		font-size: 200%;
	}
	.title-second-line {
		font-size: 240%
	}
	.title-lines {
		margin-top: 0.5em;
	}
}

/**************************************************************************
 * Typography
 **************************************************************************/

h1, h2, h3, h4, h5, h6 {
   color: var(--cnps-heading-color);
   font-weight: bold;
	font-family: inherit;		/* Really?  From Gantry. */
	text-rendering: optimizelegibility;
}

h1, h2 {
	text-shadow: 1px 1px 0 white;
	box-shadow: 0 1px 0 white;
	line-height: 30px;
	padding-bottom: 15px;
	margin-bottom: 15px;
	font-family: Nunito, Helvetica, arial, serif;		/* FYI Nunito Sans looks bolder */
	margin: 10px 0;
}
h2 {
	padding-bottom: 10px;		/* In Gantry was 15px */
	border-bottom: 1px solid #d1d1d1;		/* underline JUST for H2, not for H1? */
}	

/* Font sizes, from Gantry */
h1 {
	font-size: 2.0em;		/* Was 1.9em */
}
h2 {
	font-size: 1.7em;
}
h3 {
	font-size: 1.5em;
	color: var(--cnps-link-color);
}
h4 {
	font-size: 1.3em;
}
h4, h5, h6 {
	margin-bottom: 0.4rem;
}

main a {
	color: var(--cnps-link-color);
}
main a:hover {
	text-decoration: none;
}

/* Separate list items vertically a little - by adding a little space (padding) BELOW each list item.
*/

main ul li, main ol li {
	line-height: 1.5;
	padding-bottom: 0.5em;
}

/* Events Calendar */

div.eventstyle {
	line-height: 1.7;		/* Inheriting the 1.7em line height from body is just too much vertical space.  Note the "em" is different than the non-unit which means % of font size. */
}
/* For JEvents item overrides that don't work here, try adding CSS to in JEvents left menu > CUSTOM CSS - yes that works!  For: */
/* Calendar header row, white on dark gray needs more contrast for accessibility.  Change #828282 to #6d6d6d ... and a few other text and background color changes */

/* Overrides for if we're changing the background to white */

.card-header {
	background-color: var(--cnps-old-background);
}

/* Footer */

.footer {
	color: var(--cnps-heading-color);
	background-color: var(--cnps-old-background);		/* the old CNPS-SCV pale cream, for contrast */
	background-image: none;
	/*border-top: 1px solid var(--gantry-border-color); for when the website background was cream */
	border-top: 2px solid var(--cnps-link-color);
}
div.footer-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;		/* Vertical alignment: top */
}
div.footer-item {
	flex-grow: 1;		/* Distribute space evenly */
	padding: 0.5em 2em;
	width: 100%;		/* Center each footer item ... */
	text-align: center;	/* Within its box */
}
@media screen and (max-width: 600px) {		/* if 600px or less ... */
	div.footer-container {
		flex-direction: column;
	}
}
.footer .grid-child {		/* Turn off flexbox for footer, so items spread full page width */
	display: inline;
	padding-bottom: 0;		/* Also we have extra white space below the footer, so eliminate the 2.5rem padding that comes at the bottom of the footer.  Trying to reduce the padding-top has no effect. */
}
/* Style the footer's built-in back to top link */
.back-to-top-link {
	border: 3px solid var(--cnps-link-color);
	background-color: var(--cnps-pale-cream);
}
.back-to-top-link:hover {
	background-color: white;
	color: #112855;	/* keep unhovered color */
	border-color: var(--cnps-link-color);	/* override Cassiopeia "dark mode on hover" defaults */
}

/* For the back to top button in the footer.  See footer custom module for the HTML *
#gantry-totop {
	background: var(--cnps-pale-cream);
	border: 1px solid var(--gantry-border-color);
	box-shadow: inset 0 0 0 1px white, 0 1px 2px rgba(0,0,0,0.2);
	color: var(--cnps-link-color);
	text-decoration: none;
	
	display: inline-block;
	padding: 4px 10px;
	border-radius: 3px;
}
#gantry-totop:hover {
	text-decoration: underline;
}*/

/* Color the inside of the search box in the footer.  I'm not sure what else class form-control applies to, so I'm writing a very specific selector */
footer form.mod-finder input.form-control {
	background-color: var(--cnps-pale-cream);		/* was white */
	padding: 4px 10px;		/* Match gantry-totop.  Was .6rem 1rem */
}

/* On error page, replace gantryrocket.png 350 x 315 with our Panamint logo */
.rt-error-rocket {
	background: url("/images/logo/panamint-scv-ellipse-200.png");
	width: 200px;
	height: 241px;
	/* background-size: auto;		* Needed?  Because original CSS sizes this attribute in pixels */
}