/* 
Description: Stylesheet for static home page, based on Senorita Mia Wordpress theme, which in turn was based on Senorita by Sadish Balasubramanian, the 6th Theme from WPThemes.Info
Author: Karen Smiley, (c) 2025 - all rights reserved.
Author URI: http://karensmiley.com/karen.html
See CSS default values here: https://www.w3schools.com/cssref/css_default_values.php
*/

/* Section: Body --------- */

/* 2025-01-25 For accessibility: 
   replacing 'peru' with #875423 - #543415 is too dark (from https://icolorpalette.com/color/cd853f)
   replacing 'forestgreen' with #196819 (from https://icolorpalette.com/color/228b22) */

body {
	/* font-family:Verdana, Tahoma, Arial, Helvetica, SanSerif; */
	font-family:Georgia, Garamond, Serif;

  	voice-family: "\"}\""; 
  	voice-family: inherit;

	text-align: left;

	/* margin: 0vw auto; */
	margin-top:    0; 
	margin-bottom: 0;
	margin-right:  0.5vw auto;
	margin-left:   0.5vw auto;
	width: 98%; /* allow for these margins */
	
	/* padding-top:    0; */ 
	/* top padding is required to prevent overlap of fixed top nav bar with content */
	padding-top: clamp(max(18px,2.5rem), 6.6vw, max(4.0rem,40px));
	/* menubar reference: line-height: clamp(max(18px,1rem), 3.2vw, max(1.6rem,32px)); */

	padding-bottom:	0;
	padding-right:  0; /* clamp(2px,.1vw, 12px); */
	padding-left:   0; /* clamp(2px,.1vw, 12px); */
	
	/* default small size and line spacing */
	line-height: clamp(max(14px,1.1rem), 1.4vw, min(18px,2.2rem));
	font-size:   clamp(max(12px,1.0rem), 1.2vw, min(16px,2.0rem));
		
	/* background: white; */
	background: #f2f9ec; /* slightly more yellowish, very light green */
	
    color: #474747;    /* medium-dark gray - default for all text not assigned to a class */
	/* for testing ONLY */
	color: blue;  /* to make it easier for now to see where the defaults are being used */
}
/* for shifting jump menu sections downward to not be overwritten by the pinned menu bar */
.jumpmenu {
	/* add a bit more so the upper bar on the section isn't lost */
	/*padding-top: clamp(max(32px,3.0rem), 8.8vw, max(5.0rem,54px)); */
	margin-top: clamp(max(32px,3.0rem), 8.8vw, max(5.0rem,54px));
}

/* Edge shadow */
#rap {
	position: relative;
	/* margin: 0 auto ; */
	/* padding:0;	*/
	margin: 0 auto;
	padding: 0 0 0 0; /* top, right, bottom, left */
	
	text-align: left;

	background: #f2f9ec; /* slightly more yellowish, very light green */
	
	/* box model hack */
	width: 620px;
	voice-family: "\"}\""; 
  	voice-family: inherit;
	width: 620px;
}

html>body #rap { /* be nice to Opera */
	width: 620px;
}
/* Sub-Section:  FONT SIZES --------- */

h1, .h1text {
	font-family:Verdana, Tahoma, Arial, Helvetica, SanSerif;
	/* font-family: 'Calibri', 'Lucida Grande', 'Trebuchet MS', sans-serif; */	/* TO DO: make this match our Substack theme */
	
	/* was 5.0vw/4.8vw, downsized 2025-02-17 to 4.0 and 3.8 */
	line-height: clamp(max(26px,1.4rem), 4.0vw, max(2rem,52px));
	font-size:   clamp(max(24px,1.4rem), 3.8vw, max(2rem,48px));
	text-align: center;
	
	/* padding was 1vw 1vw 1vw 1vw; changed to top and bottom clamp(0.0em, 0.05vw, 0.1em) then 0 */
	padding: 1.5vw 0 0.25vw 0; /* avoid overlap with fixed navbar at top - only if not in a section title?? */
	margin: 0 auto;

	/* border-bottom:#c7c7c7 1px dotted;	 */
	/* border-bottom:#78a947 1px dotted;  /* 6P pea green */
	text-decoration:none; 
	font-weight:bold; 
}
h2, .h2text {
	font-family:Verdana, Tahoma, Arial, Helvetica, SanSerif;
	/* font-family: 'Lucida Grande', 'Trebuchet MS', sans-serif;*/
	
	/* was 4.6vw/4.4vw, downsized 2025-02-17 to 3.8 and 3.6 */
	line-height: clamp(max(24px,1.3rem), 3.6vw, max(1.8rem,48px));
	font-size:   clamp(max(22px,1.3rem), 3.4vw, max(1.8rem,44px));
	text-align: center;
	
	/*padding: 1.5vw 0 0.5vw 0; /* avoid overlap with fixed navbar at top */
	padding: 0.25vw 0 0.25vw 0; /* H1 should be at the top - don't top-pad H2 */
	margin: 0 auto;

	/* border-bottom:#c7c7c7 1px dotted;  */
	/* border-bottom:#78a947 1px dotted;  */ /* 6P pea green */
	/* border-bottom:#474747 1px dotted;  */ /* dark gray */
	text-decoration:none; 
	font-weight:bold; 
}
h3, .h3text {
	font-family:Verdana, Tahoma, Arial, Helvetica, SanSerif;
	/* font-family: 'Calibri', 'Lucida Grande', 'Trebuchet MS', sans-serif; */	/* TO DO: make this match our Substack theme */
	
	/* was 4.2vw/4.0vw, downsized 2025-02-17 to 3.3 and 3.0 */
	line-height: clamp(max(22px,1.2rem), 3.4vw, max(1.7rem,44px));
	font-size:   clamp(max(20px,1.2rem), 3.1vw, max(1.7rem,40px));
	text-align: center;
	
	/* padding was 1vw 1vw 1vw 1vw; changed to top and bottom clamp(0.0em, 0.05vw, 0.1em) then 0 */
	padding: 0; 
	margin: 0 auto;
	
	/* border-bottom:#c7c7c7 1px dotted;	 */
	/* border-bottom:#78a947 1px dotted;  */ /* 6P pea green */
	/* border-bottom:#474747 1px dotted;  */ /* dark gray */
	text-decoration:none; 
	font-weight:bold; 
}
h4, .h4text { /* controls the menu bar as well as header4 */
	font-family:Verdana, Tahoma, Arial, Helvetica, SanSerif;
	/* font-family: 'Calibri', 'Lucida Grande', 'Trebuchet MS', sans-serif; */	/* TO DO: make this match our Substack theme */
	
	/* was 3.3vw/3.2vw, downsized 2025-02-17 to 2.8 and 2.5 */
	line-height: clamp(max(20px,1.1rem), 2.8vw, max(1.6rem,36px));
	font-size:   clamp(max(18px,1.1rem), 2.5vw, max(1.6rem,32px));
	text-align: center;
	
	/* padding was 4px 0 0 0; changed to top and bottom clamp(0.0em, 0.05vw, 0.1em) then 0 */
	padding: 0; 
	margin: 0 auto;
	text-decoration:none; 
	font-weight:bold; 
}
h5, .h5text {
	font-family:Verdana, Tahoma, Arial, Helvetica, SanSerif;
	/* font-family: 'Calibri', 'Lucida Grande', 'Trebuchet MS', sans-serif; */	/* TO DO: make this match our Substack theme */

	/* H5 needs to be larger than standard Body text size: 
		line-height: clamp(max(14px,1.1rem), 1.4vw, min(18px,2.2rem));
		font-size:   clamp(max(12px,1.0rem), 1.2vw, min(16px,2.0rem));
		
		was 3.2vw/3.0vw, downsized 2025-02-17 to 2.5 and 2.0
	*/
	line-height: clamp(max(16px,1rem), 2.5vw, max(32px,1.6rem));
	font-size:   clamp(max(14px,1rem), 2.0vw, max(30px,1.5rem));	
	/* font-style:italic;		 */
	text-align: center;
	
	/* padding changed to top and bottom clamp(0.0em, 0.05vw, 0.1em) then 0 */
	padding: 0; 
	margin: 0 auto;
	text-decoration:none; 
	font-weight:bold; 
}

img.border-white { border: 1px solid black; margin-top: 1vw; background-color:white; }
img.border-black { border: 1px solid black; margin-top: 1vw; }
img.borderless, img.border-none { border: 0; margin-top: 0; margin-bottom: 0; outline:none; } /* border: none and 0 do not seem to work with pageicon */

a.menubar { /* controls the menu bar at top and bottom - was the same as h4, now same as h5 */
	line-height: clamp(max(18px,1.0rem), 3.2vw, max(1.6rem,32px)); /* match to body padding-top + HR margins */
	font-size:   clamp(max(14px,0.9rem), 3.0vw, max(1.5rem,30px));	
	
	/* padding changed to top and bottom clamp(0.0em, 0.05vw, 0.1em) then 0 */
	padding: 0; 
	margin: 0 0 0 0; /* do not use auto here? */
}
img.podcasticons { /* for podcast icons - not resizing correctly */
	vertical-align:text-bottom;
	height:auto; /* was 1.2em; */
	width:1.2rem;
	min-height:32px;
	min-width:32px;
	max-height:8rem;
	max-width:8rem; /* max(128px,4em,20%); */
	padding-top:0.1vw;
	padding-left:1.25vw;
	padding-right:1.25vw;
}
img.iconbar { /* for contact info images on index page - not resizing correctly */
	vertical-align:text-bottom;
	height:auto; /* was 1.2em; */
	width:1.2rem;
	min-height:32px;
	min-width:32px;
	max-height:10rem;
	max-width:10rem;
	margin-top:.5vw; /* was 2vw */
}
img.pageicons { /* for standard transparent borderless icons reused on pages - with padding (not resizing correctly?) */
	height:auto;
	width:1.5em;
	min-height:24px;
	min-width:24px;
	max-height:8rem;
	max-width:64px; /* max(10%,8rem); - formerly max(128px,4em,20%); */
	padding-top:0.5vw;
	padding-left:0.25vw;
	padding-right:0.25vw;
	vertical-align:text-bottom;
	border:0;
	outline:none;
}
img.headericons { /* for use in H1 H2 ... */
	border:0;
	vertical-align:middle;
	width:1.5em;
	min-height:24px;
	min-width:24px;
	max-height::max(15%,10rem,64px);
	max-width:max(15%,10rem,64px); /* max(128px,4em,20%); */
	height:auto;
	padding-top:0.25vw;
	padding-left:0.25vw;
	padding-right:0.25vw;
	margin-bottom:0.25em;
}
img.iconmini { /* for icon images used on the Contact pages, with outlines on white backgrounds - twice the size of 'deco' images */
	vertical-align:text-bottom; /* was middle */
	height:auto; /* was 2em; */
	width:2em;
	min-height:24px;
	min-width:24px;
	max-height:128px;
	max-width:128px;
	/* make the borders right on the white icon edges */
	padding-top:0vw;
	padding-left:0vw;
	padding-right:0vw;
}
img.deco { /* for icon images used inline with text, as decorative */
	vertical-align:text-bottom; /* was middle */
	height:auto; /* was 2em; */
	width:1.5em;  /* use EM not REM here - we want the size to go with its text */
	min-height:12px;
	min-width:12px;
	max-height:64px;
	max-width:64px;
	/* make any borders right on the white icon edges */
	padding-top:0;
	padding-left:0.5;
	padding-right:0.5;
}

img.menubar { /* for icon images used in the header menu bar: pad L and R, not T and B */
	border:0; 
	/* border: 2px solid white; /* purposely make it invisible (white) but take up the same space as the logo so they line up? didn't work quite right */
	height:auto; /* was 1.6em */
	vertical-align:middle;
 	width:1.6em; /* using REM here makes these icons too small */
	/*min-height:16px;
	min-width:16px;
	max-height:8em;
	max-width:8em; */

	min-height:1.75rem; /* try to match the logo */
	min-width:1.75rem;
	max-height:4.25rem;
	max-width:4.25em;

	padding-top:.2rem;	     /* 2px at top for aligning vertically with logo border */
	padding-bottom:.2rem;	 /* 2top at bottom for aligning vertically with logo border*/
	padding-left:1.1vw;     /* was 1.15vw */
	padding-right:1.1vw;    /* was 1.15vw */
	/* margin-top:.1vw; /* .3 rem did not work well here */
}
img.logo, .logo {  /* for anchoring a logo image to the far left of the menu bar, allowing for the HR at top */
	position:fixed; top:0; left:0;
	overflow-x: hidden; /* try hiding the horizontal scrollbar */
	z-index: 99; /* always on very top (above the sticky toolbar rules and space) */

	border:.2rem solid black; /* offset for img.menubar by top and bottom padding of 2px */
	border-radius: 4px;

	vertical-align:middle;
 	/* width:1.6em; /* doesn't scale when sticky */
	width:6.8vw; /* this seems to be working for scaling when sticky */
	/* TO DO: make the top toolbar icons match this, so they resize smoothly together */
	height:auto;
	min-height:2.4rem;
	min-width:2.4rem;
	max-height:4.25rem;
	max-width:4.25rem;
		
	padding-top:0;
	padding-left:0;
	padding-right:0;
	padding-bottom:0;
	margin-left:6px;
	margin-top:.3rem;
}


div.menubar, div.sectitle { 
	font-family:Verdana, Tahoma, Arial, Helvetica, SanSerif;
	vertical-align: middle;
	background-color: white; 
	/* background-color: #f2f9ec; /* light green */
	margin: 0 auto;	
}
div.menu-icons { text-align: right; }  /* for icon bar pinned at top */
div.menu-texts { text-align: center; } /* for menu bar at bottom */
div.sectitle   { text-align: middle; vertical-align:middle; }

div.iconbar, p.iconbar, div.podcasticons, p.podcasticons { text-align: center; }

.banner, div.banner, p.banner {
	/* background-image:linear-gradient(to bottom, #aaa, #eee); */
	background-image: white url('photos/K_ShenandoahValley_2460x936.jpg'); /* white */
	height:auto;
	width:100%;
	max-width:100%;
	margin: 0; /* removed auto */
	padding-top: 0; 
	position: relative;  /* below the now-fixed navbar */
	top:0;
	z-index: 1;
}
h1.sectitle, h2.sectitle, h3.sectitle, h4.sectitle, h5.sectitle, h6.sectitle, .sectitle 
{ background: white; } /* was #f2f9ec light green */

/* Sub-Section:  FONT COLORS FOR LINKS BY CLASS --------- */
.todo { color: red; font-weight:bold; font-style:italic; } /* to make it easier to see before going live */
.boldtext { font-weight:bold; }
.ullink   { text-decoration:underline; }
.noull    { text-decoration:none; }
.vtop   { vertical-align:text-top; }
.vmid   { vertical-align:middle; }
.vbot   { vertical-align:text-bottom; }

.linkheader6p { text-decoration:none; color: #196819; font-style:italic; }
.linkheaderAb { text-decoration:none; color: #875423; font-style:italic; }
.linkheaderSw { text-decoration:none; color: blue;    font-style:italic; }

/* Sub-Section: Body Links --------- */
a { text-decoration: none; }
a:link { color:blue; } /* was #69c */
a:visited { }
a:hover  { text-decoration:underline; } /* removed overline */
a:active { text-decoration:underline; background-color: gray; }	
a.ai6p:link,    a.ai6p:visited,    a.ai6p:active    { color: #196819; } /* was forestgreen or #78a947 6P pea green */
a.aaab:link,    a.aaab:visited,    a.aaab:active    { color: #875423; } /* was peru; */
a.swai:link,    a.swai:visited,    a.swai:active    { color: #6832E2; } /* was purple #800080 */
a.ks:link,      a.ks:visited,      a.ks:active      { color: #875423; } /* was peru, was blue */
a.legal:link,   a.legal:visited,   a.legal:active   { color: #696969; } /* dimgray, was black */
a.generic:link, a.generic:visited, a.generic:active { color: #010101; } /* very dark gray */
a.primary:link, a.primary:visited, a.primary:active { color: #010101; } /* very dark gray */
a.menubar:link, a.menubar:visited, a.menubar:active { color: #474747; } /* need a darker gray than darkgray; #010101 is even darker, too dark for the bold links */

a.legal, h1.legal, h2.legal, h3.legal, h4.legal, h5.legal, ul.legal, ul.papers, li.legal, li.a.legal, .legal { color: #696969; } /* was black */

a.generic, h1.generic, h2.generic, h3.generic, h4.generic, h5.generic, ul.generic, li.generic, li.a.generic, .generic { color: #010101; } /* very dark gray */
p.a.primary, p.li.a.primary, blockquote.a.primary, div.blockquote.a.primary {  color: #010101; text-decoration:underline; } /* very dark gray */
h1.primary, h2.primary, h3.primary, h4.primary, h5.primary, ul.primary, li.primary, .primary { color: #010101; } /* very dark gray */
a.menubar { color: #010101; } /* very dark gray; previously #474747 */

p.ks, h1.ks, h2.ks, h3.ks, h4.ks, h5.ks, figcaption.ks, .ks                   { color: #875423; } /* was peru; previously blue */
p.a.ks, p.li.a.ks, blockquote.a.ks                                            { color: #875423; text-decoration:underline; } /* was peru; previously blue */
p.aaab, li.aaab, h1.aaab, h2.aaab, h3.aaab, h4.aaab, h5.aaab, figcaption.aaab, .aaab { color: #875423; } /* was peru; */
p.a.aaab, p.li.a.aaab, blockquote.a.aaab, div.blockquote.a.aaab               { color: #875423; text-decoration:underline; } /* was peru; */
p.ai6p, li.ai6p, h1.ai6p, h2.ai6p, h3.ai6p, h4.ai6p, h5.ai6p, figcaption.ai6p, .ai6p { color: #196819; } /* was forestgreen; was #78a947 6P pea green  */
p.a.ai6p, p.li.a.ai6p, blockquote.a.ai6p           { text-decoration:underline; color: #196819; } /* was forestgreen; was #78a947 6P pea green  */
p.swai, li.swai, h1.swai, h2.swai, h3.swai, h4.swai, h5.swai, figcaption.swai, .swai { color: #6832E2; } /* was purple #800080 */
p.a.swai, p.li.a.swai, blockquote.a.swai           { text-decoration:underline; color: #6832E2; } /* was purple #800080 */

/* use these to only make a menu link bold if it's the current link */
.notbold-menubar, .notbold-link { font-weight:normal; }
.bold-menubar,    .bold-link    { font-weight:bold; }

a.offsite,a.offsite:link,a.offsite:visited { text-decoration:underline; text-decoration-color: darkblue; font-style: italic; color: darkblue; } /* was #010101 */  /* was none */

/* keep the same as offsite for now, consider changing later and making a JS fcn to format it consistently */
/* #darkorange #FF8C00 is too light for text - not enough contrast. Try this darker shade #DC582A */
/* keep the base text color that's appropriate for the content (do not set 'color') */
a.substack,      a.substack:link,      a.substack:visited      { text-decoration:underline; text-decoration-color: #dc582a;  font-style: italic; } /* keep base color */
a.substack-link, a.substack-link:link, a.substack-link:visited { text-decoration:underline; text-decoration-color: #dc582a;  font-style: italic; color: #dc582a; }
a.datawrapper,   a.datawrapper:link,   a.datawrapper:visited   { text-decoration:underline; text-decoration-color: darkblue; font-style: italic; } /* no color: darkblue */
.dwtable           { background-color:white; border:2px solid darkblue; padding:1em; margin:0; }
figure.datawrapper { background-color:white; border:2px solid darkblue; padding:1em; margin:0; }
figure.ssembed     { background-color:white; border:2px solid darkgray; padding:1em; margin:0; }
.article           { background-color:white; border:2px solid darkgray; padding:0em; margin:0; width:99%; height:auto; text-align:center;}

abbr, acronym { font-style: normal; border-bottom: 1px dotted; }

/* slightly smaller than H4, H5 but more spaced out vertically, like body text */
blockquote{
	margin-top:  2vw; margin-right:  0vw auto; margin-bottom:  2vw; margin-left:  0vw auto; 
	padding-top: 1vw; padding-right: 1vw;      padding-bottom: 1vw; padding-left: 1vw; 
	line-height: clamp(max(20px,1.5rem), 3.5vw, max(2.4rem,36px));
	font-size:   clamp(max(14px,1.0rem), 2.2vw, max(1.2rem,24px));	
	border: 1px solid #010101; /* was #DDD very light gray, 86.67% RGB */
	/* use white if the main background is not white. right now it's light green. */
	background: white; color: black; 
	max-width: 97%;
}
blockquote.ai6p    { border: 2px solid #196819; } /* was forestgreen; */
blockquote.aaab    { border: 2px solid #875423; } /* was peru; */
blockquote.swai    { border: 2px solid #6832E2; } /* was purple #800080 */
blockquote.ks      { border: 2px solid #875423; } /* was peru; */
blockquote.legal   { border: 2px solid #696969; } /* dimgray, was black */
blockquote.callout { border: 2px solid #474747; }
blockquote.generic { border: 2px solid #010101; } /* very dark gray */
blockquote.primary { border: 2px solid #010101; } /* very dark gray */

div.embed6p,      img.ai6p    {  /* for the Substack widgets we embed - not quite working */
	border: 2px solid #196819; /* was forestgreen; */
	/* TO DO: set font size - the embed subtitles are bigger than the titles, looks weird (not working) */
	line-height: clamp(max(18px,1.5rem), 2.5vw, max(2.4rem,28px));
	font-size:   clamp(max(14px,1.0rem), 2.2vw, max(1.2rem,24px));	
} 
div.embedswai,    img.swai    { border: 2px solid #6832E2; } /* was purple #800080 */
div.embedaaab,    img.aaab    { border: 2px solid #875423; } /* was peru; */
div.embedks,      img.ks      { border: 2px solid #875423; } /* was peru; */
div.embedgeneric, img.generic { border: 2px solid #010101; }
div.embedprimary, img.primary { border: 2px solid #010101; }

hr {
	width: 99%;   /* max-width? */
	text-align: center;
	margin-top:  clamp(0.2em, 0.2vw, 0.25em); margin-right:  0; margin-bottom:  clamp(0.2em, 0.2vw, 0.25em); margin-left:  0;
	padding-top: clamp(0.1em, 0.2vw, 0.25em); padding-right: 0; padding-bottom:	clamp(0.1em, 0.2vw, 0.25em); padding-left: 0; 
}
/* use all 3 designators for cross-browser compatibility to make them solid. but only use background-color to make the line solid. */
.menubar-line { background-color: darkgray; border-color: darkgray; color: darkgray; }
.primary-line { border: 2px solid #010101; color: #010101;} /* very dark gray */
.generic-line { border: 2px solid #010101; color: #010101;} /* very dark gray */
.legal-line   { border: 2px solid #696969; color: #696969;}  /* dimgray, was black */
.ks-line      { border: 2px solid #875423; color: #875423; } /* was peru; */
.aaab-line    { border: 2px solid #875423; color: #875423; } /* was peru; */
.ai6p-line    { border: 2px solid #196819; color: #196819; } /* was forestgreen; */
.swai-line    { border: 2px solid #6832E2; color: #6832E2; } /* was purple #800080 */

.primary-text, .primary  { color: #010101; } /* very dark gray */
.generic-text, .generic  { color: #010101; } /* very dark gray */
.legal-text,   .legal    { color: #696969; } /* dimgray, was black */
.aaab-text,    .aaab     { color: #875423; } /* was peru; */
.ks-text,      .ks       { color: #875423; } /* was peru; */
.ai6p-text,    .ai6p     { color: #196819; } /* was forestgreen; */
.swai-text,    .swai     { color: #6832E2; } /* was purple #800080 */

/* for changing icon colors on the fly */
/* based on https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element */
/* "As noted in the CodePen, if your SVG isn't black (mine was grey), adding brightness(0) saturate(100%) to the beginning of the list of filters will first turn it 100% black, which enables the other filters to change it to the correct color." */
/* filters originally calculated with https://isotropic.co/tool/hex-color-to-css-filter/ . Wordpress site is 
broken as of 2025-06-19; used https://codepen.io/Keybit/pen/wvNjpyp instead for swai */
.filter-ks, .filter-aaab{ /* for #875423 */
    filter: brightness(0) saturate(100%) invert(34%) sepia(19%) saturate(1467%) hue-rotate(348deg) brightness(99%) contrast(97%);
}
.filter-ai6p{ /* for #196819 */
    filter: brightness(0) saturate(100%) invert(26%) sepia(65%) saturate(812%) hue-rotate(75deg) brightness(97%) contrast(89%);
}
.filter-swai{ /* for purple #800080 */
    /* blue filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7410%) hue-rotate(247deg) brightness(91%) contrast(144%); */
	/* purple #800080 filter: brightness(0) saturate(100%) invert(7%) sepia(99%) saturate(5281%) hue-rotate(295deg) brightness(101%) contrast(112%); /*
	/* #6832E2 bluish purple  */
	filter: brightness(0) saturate(100%) invert(20%) sepia(79%) saturate(3550%) hue-rotate(254deg) brightness(89%) contrast(99%);
}

.filter-legal{ /* for #A9A9A9, dark gray */
    filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(73%) hue-rotate(314deg) brightness(95%) contrast(81%);
}
.filter-primary, .filter-generic{ /* for #010101, very dark gray */
    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7500%) hue-rotate(320deg) brightness(115%) contrast(99%);
}
.filter-menubar-current{ /* #196819 doesn't contrast well. Need to change this. Try forestgreen (228b22) */
    filter: brightness(0) saturate(100%) invert(31%) sepia(69%) saturate(3106%) hue-rotate(94deg) brightness(94%) contrast(73%);
}
.filter-menubar-notcurrent{ /* try the same darkgray (medium) as legal, for now */
    filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(73%) hue-rotate(314deg) brightness(95%) contrast(81%);
}


/* new formats for semantic HTML features */
details > summary {
  padding: 4px;
  background-color: white; /* #f8f8ff; ghost white, slightly grayish */
  border: 1px dashed black;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > div.detailcontent {
	background-color: #f8f8ff; /* ghost white, slightly grayish */
    border: 1px dashed black;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}
details > div.detailwidget {
    background-color: white; /* #f8f8ff; ghost white, slightly grayish */
    border: 1px dashed black;
	padding: 0;
}
/* None of these are working to hide the vertical scroll bar at some intermediate screen sizes. ??? had to remove the div around the h1 h2 */
/* .header { overflow-y:hidden; }
header { overflow-y:hidden; } 
section > header { overflow-y:hidden; } 
*/
#header {width:100%; text-align:center;}

p, details > summary, details, detailcontent > p { /* same as blockquote tag but with less padding */
	margin-top:  clamp(0.4rem, 0.8vw, 0.8rem);  margin-right:  0 auto; margin-bottom:  clamp(0.4rem, 0.8vw, 0.8rem);  margin-left:  0 auto;
	padding-top: clamp(0.1rem, 0.2vw, 0.25rem); padding-right: 0;      padding-bottom: clamp(0.1rem, 0.2vw, 0.25rem); padding-left:	0; 
	line-height: clamp(max(20px,1.5rem), 3.5vw, max(2.4rem,36px));
	font-size:   clamp(max(14px,1.0rem), 2.2vw, max(1.2rem,24px));	
	color: #010101;    /* dark gray - was 474747, default for all text not assigned to a link class */
	vertical-align:middle; /* see what this does to our paragraphs - seemingly nothing? */
}
p.compact { /* don't use the 1.5x line spacing for these few */
	line-height:  clamp(max(14px,1.0rem), 2.2vw, max(1.2rem,24px));	
}

/* same as generic P tag but with more spacing between list items */
ul, li, div.ul, div.ul.li, div.li, p.ul, p.ol, p.li, p.ul.li, p.ul.li.ul.li, full.li, righthalf.li, lefthalf.li, smallleft.li, bigright.li, bigleft.li, smallright.li, fixedleft.li, fixedright.li, li, detailcontent > li {	
	line-height: clamp(max(20px,1.5rem), 3.5vw, max(2.4rem,36px));
	font-size:   clamp(max(14px,1.0rem), 2.2vw, max(1.2rem,24px));	
	padding-top: clamp(0.1rem, 0.2vw, 0.25rem); 
	padding-bottom:	0.5rem; /* clamp(0.5em, 0.5vw, 0.5em); */
}

/* Special formats for having the AI6P and AAAB icons as the 'bullets' */
/* OK, this kind of works, but it looks weird with the white backgrounds and no border. */
/* Fix that in the near future - either switch to transparent images or make one with a border already on it. Also note that these images don't dynamically resize. And they don't have any border. */
/* border: 2px solid black; puts a border around the whole box, not just the background image. Using transparent images for now. */
ul.ai6paaab   { list-style:none; padding:0;}
li.ai6paaab   { padding-left: 5em; }
li.ai6pbullet { background: white url(img/logos/6P/6plogo64T.png) no-repeat 0 20%; padding-right:4px; border: 2px solid forestgreen; }
li.aaabbullet { background: white url(img/logos/AAaB/AAaB_logo_64x64T.png) no-repeat 0 20%; padding-right:4px; border: 2px solid peru; margin-top:1em;}
li.swaibullet { background: white url(img/logos/SheWritesAI/SWAI_logo_64x64T.png) no-repeat 0 20%; padding-right:4px; border: 2px solid #6832E2; margin-top:1em;} /* was purple #800080 */

/* partnerlist attempt for support.html didn't work - image is too small */
ul.partnerlist { 
	/* also want style filter-ks applied to these bullets - ?? */
	list-style-image: url(img/icons/heart-partner-handshake.svg); 	
}
li.partnerlist      { font-size:1.5em; }
li.partnerlist name { font-size:1.0em; }


/* Section: special formats --------- */

#toolbar { /* smaller than generic P tag. use rem instead of em? */
	line-height: clamp(0.3rem, 1.1vw, 1.1rem); 
	font-size:   clamp(0.2rem, 1.0vw, 1.0rem);	
	/* line-height: clamp(max(8px,0.6em), 2.0vw, max(1.4em,28px)); */
	/* font-size:   clamp(max(7px,0.5em), 1.5vw, max(1.2em,24px)); */

	padding-top:    clamp(0rem, 0.1vw, 0.1rem);
	padding-right:  0;
	padding-bottom:	clamp(0rem, 0.1vw, 0.1rem);
	padding-left:	0; 
	margin: 0 auto;
}

/* menuitem not working as class designator?? */
a.menuitem {
	/* same as generic P tag ? */
	line-height: clamp(max(16px,1.1em), 2.5vw, max(1.4em,28px));
	font-size:   clamp(max(14px,1.0em), 2.2vw, max(1.2em,24px));		
	
	/* padding: 4px 0 0 0; */
	padding-top:    clamp(4px, 0.2vw, 0.2em);
	padding-right:  0.0vw;
	padding-bottom:	clamp(4px, 0.2vw, 0.2em);
	padding-left:	0.0vw; 

	/* margin: 0; */
	margin: 0vw;
}

/* consider setting accent-color: property for these boxes? */
input[type=text] { /* used on SEARCH page */
	background:white; 
	color: black; 
	border: 2px solid black;
	max-width: 90%;
	margin: 0 auto;
}
input[type=submit] { /* used on SEARCH page */
	background: #196819; /* was forestgreen; */
	color: white;
	border: 1px solid white;
	border-radius: 8px;
	margin-top: 4px;
}
input[type=text], input[type=submit] { /* used on SEARCH page */	
	font-family:Verdana, Tahoma, Arial, Helvetica, SanSerif;
	font-weight: bold;
	
	/* same as blockquote - slightly smaller than H4, H5 but more spaced out than body text */
	line-height: clamp(max(20px,1.5rem), 3.5vw, max(2.4rem,36px));
	font-size:   clamp(max(14px,1.0rem), 2.2vw, max(1.2rem,24px));	

	padding-top:    clamp(4px, 0.4vw, 0.4em);
	padding-right:  clamp(4px, 0.4vw, 0.4em);
	padding-bottom:	clamp(4px, 0.4vw, 0.4em);
	padding-left:	clamp(4px, 0.4vw, 0.4em);	
}

ss-embed-pub { /* for the big newsletter widgets from Substack in newsletters.html */
	/* was 390w x 540h. now 480x320? width=max(98%,390) did not work, height was also wrong */
	width="480"; 	
	height="320";
	/* max-width="390"; */
	/* max-height="540"; */
	background:white;
	border:2px solid darkgray; 
	padding: 4px;
}

/* Section: Misc --------- */

.leftalign   { text-align:left;   }
.centeralign { text-align:center; }
.rightalign  { text-align:right;  }
.fillalign   { text-align:justify; padding-right:.5em; }
.floatleft   { float: left; }
.floatright  { float: right; }

/* from w3schools/html/htmp_responsive.asp, 2024-12-17 */
.left  { float: left;  width: max(25%,200px); margin: 0; } /* Default width was 20% */
.main  { float: left;  width: max(49%,396px); margin: 0; } /* Default width was 60% */
.right { float: right; width: max(25%,200px); margin: 0; } /* Default width was 20% */

.lefthalf, .fixedleft  { float: left;  width: 48.5%; margin: 0; }  /* Default width was 50% */
.righthalf, fixedright { float: right; width: 48.5%; margin: 0; }  /* Default width was 50% */

.smallleft  { float: left;  width: min(16%,16rem); margin: 0; }
.bigright   { float: right; width: max(75%,75rem); margin: 0; padding-left:1rem; padding-right:1rem; }

.bigleft    { float: left;  width: min(64%,780px); margin: 0; }
.smallright { float: right; width: max(35%,220px); margin: 0; }

/* This is full width on narrow screens, centered on wide screens */
/* The -left and -right divs need to have at least a non-breaking space in them */
.centered-left  { float: left;  width: 4%;  }
.centered-right { float: right; width: 4%;  }
.centered-main  { float: left;  width: 90%; margin: 0 auto; }
.centered-2col  { float: left;  width: 90%; margin: 0 auto; columns: 2; column-width: 400px; }
.middle-main    { float: center; width: 90%; max-width: 90%; margin: 0 auto; overflow-x:hidden; overflow-y:hidden; }

.full { float: left; width: 99%; margin: 0; } /* always maximum width on all screens */

/* For these, we always want full width - 100%, by default */
/* try hiding the horizontal and vertical scrollbars - they show up weirdly */
.menubar,.footer,.toolbar { width:99%; color:#010101; text-align:center; overflow-x:hidden; overflow-y:hidden; } /* much darker than darkgray; was #474747 */

/* refer to https://www.w3schools.com/css/css_positioning.asp to work on this - it isn't working with our divs */
#navbar { /* use id="navbar" to stick the top icon bar to the top of the page, even with scrolling. make sure the banner doesn't overlap with it. */
	position:fixed;
	/* position: sticky; does not work */
	top:0px;
    overflow: hidden;
	z-index: 98; /* always on top except for logo */
}

/*************************************************************************/
/* leave .full, .menubar, .footer, .toolbar  at 99% width on all screens */

/* Use a media query to add a breakpoint at 800px: */
/* purposely omit fixedleft and fixedright from this dynamic resizing */
/* for screens <= 800px wide */
@media only screen and (max-width: 800px) {
  .left, .main, .right, .lefthalf, .righthalf, .smallleft, .bigright, .full, .menubar, .footer, .toolbar, .podcasticons, .bigleft, .smallright, .centered-main, .middle-main {
    width: 98.5%; /* The width is 100%, when the viewport is 800px or smaller */
	overflow-x: hidden; /* try hiding the horizontal scrollbar */
  }
  .centered-left, .centered-right {         /* suppress the spacers */
    width: 0%; 
	overflow-x: hidden; /* try hiding the horizontal scrollbar */
  }
}

/* Use a media query to add a breakpoint at 800px - stop spreading the text wide: */
@media only screen and (min-width: 801px) {  
   .middle-main {
    width: min(80%,1200px);  
 	overflow-x: hidden;    /* try hiding the horizontal scrollbar */
	margin: 0 auto;
   }  
   .bigright {
    width: max(75%,75rem); /* min(80%,1200px);  */
 	overflow-x: hidden;    /* try hiding the horizontal scrollbar */
   }  
  .centered-left, .centered-right {         /* suppress the spacers */
    width: 0%; 
	overflow-x: hidden; /* try hiding the horizontal scrollbar */
  }
}

/* Use a media query to add another breakpoint at 1200px? */
@media only screen and (min-width: 1201px) {  
   .middle-main, .bigright {
    max-width: min(70%,1500px);  
 	overflow-x: hidden;    /* try hiding the horizontal scrollbar */
	margin: 0 auto;
   }  
  .centered-left, .centered-right {         /* suppress the spacers */
    width: 0%; 
	overflow-x: hidden; /* try hiding the horizontal scrollbar */
  }
}


/*****************************************************************/
/* Code below for dropdown button and contents is from https://www.w3schools.com/howto/howto_js_dropdown.asp */

/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 4px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  /* this pushes the hamburger menu all the way to the right edge */
  /* float: right; */
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  /* z-index of 1 did not push the dropdown menu above the other page elements */
  /* z-index: 1; */
  z-index: 9999;
  
  /* Only one menu item is visible; none of these suggestions helped */
  /* top:0; */
  /* right:0; */
  /* height: 300px; */
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/*****************************************************************/
/* for text sizing in the Substack feed embeds - they use Bootstrap and I don't yet, so try setting these values for now */
.text-sm { /* Small font size in Bootstrap */
	line-height: clamp(max(12px,0.6rem),  2.0vw, max(1.4rem,16px));
	font-size:   clamp(max(10px, 0.5rem), 1.8vw, max(1.2rem,14px));		
}
.text-base { /* Base font size (default), implicitly used for post subtitle in embeds? */
	/* line-height: clamp(14px, 1.4em, 18px); */
	/* font-size:   clamp(12px, 1.2em, 16px);	*/
	line-height: clamp(max(15px,0.9rem), 2.5vw, max(2.0rem,20px));
	font-size:   clamp(max(12px,0.8rem), 2.0vw, max(1.8rem,18px));		
}
.text-lg { /* Large font size, used for post title in embed */
	line-height: clamp(max(18px,1.4rem), 3.0rem, max(3.0rem,28px));
	font-size:   clamp(max(14px,1.2rem), 2.8rem, max(2.8rem,24px));	
}
/* embed image is square, no matter what I do :( */
/* no obvious way to override it */