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

    MICHAEL'S HANDS CUSTOMIZATION

    Decoration ported from the classic-ASP site's Design/Custom.css.
    Colors and fonts live in 02.SiteColors.css and 03.SiteFonts.css;
    this sheet carries the shapes, shadows and background images that
    give the site its particular look.

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

/********************************************************************
    HEADER
    Banner.png is the site's identity, so the text site title and the
    section title stay hidden, exactly as div.SiteTitle was set to
    display:none on the old site. The page title is what shows.
*********************************************************************/

header h1,
header h2 {
	display: none;
}

header h3 {
	color: var(--clr_Header_PageTitle);
	font-family: var(--fnt_Header_PageTitle);
	font-weight: bold;
	text-shadow: var(--clr_Header_Shadow) 4px 4px 4px;
	/* The header is a flex column with justify-content: space-between, which
	   spreads three visible headings across it. Michael's site hides the site
	   and section titles, so the page title was the only child left and landed
	   at the top. margin-top:auto pushes it to the bottom of the banner panel
	   where it belongs, however many siblings are visible. */
	margin-top: auto;
}

@media only screen and (min-width: 1000px) {
	header {
		border-radius: 10px;
		box-shadow: 5px 5px 10px MidnightBlue;
	}

	#SidebarToggle { display: none; }
}

#SidebarToggle {
	position: absolute;
	top: 0px;
	right: 0px;
}

/********************************************************************
    SIDEBAR
    Transparent over the page photo, bold light green with a
    midnight-blue shadow so it stays readable against the image.
*********************************************************************/

#Sidebar {
	background-color: transparent;
	border-radius: 0px;
	font-family: var(--fnt_Sidebar_Text);
	font-weight: bold;
	text-shadow: MidnightBlue 4px 4px 4px;
}

#Sidebar p {
	font-size: 10pt;
	font-weight: normal;
	/* The heading-weight shadow the sidebar uses made body text read as bold
	   even at normal weight, so paragraphs get a lighter one. */
	text-shadow: MidnightBlue 1px 1px 2px;
}

#Sidebar h4,
#Sidebar h6 {
	color: var(--clr_Sidebar_Heading);
	text-shadow: MidnightBlue 1px 1px 1px;
}

#Sidebar img { border-radius: 10px; }

/* Michael's gateway buttons are rounded with a midnight-blue shadow. */
a.Gateway {
	border-radius: 10px;
	border-style: inset;
	box-shadow: 3px 3px 8px 3px MidnightBlue;
}

	a.Gateway:hover {
		border-style: outset;
		color: var(--clr_Sidebar_Button_Hover_Link) !important;
		background-color: var(--clr_Sidebar_Button_Hover);
	}

@media only screen and (min-width: 1000px) {
	#Sidebar {
		border-radius: 10px;
		box-shadow: 5px 5px 10px MidnightBlue;
	}
}

/********************************************************************
    CONTENT
*********************************************************************/

/* AI: The white panel is <article>, which 50.Article.css already paints --
   NOT <main>. Painting main white put the button bars inside the panel; the
   classic site had them outside div.Content, on the page photo. main stays
   transparent so they sit above and below the panel as they always did. */
main {
	background-color: transparent;
	color: var(--clr_Content_Text);
}

@media only screen and (min-width: 1000px) {
	article {
		border-radius: 10px;
		box-shadow: 5px 5px 10px MidnightBlue;
	}
}

article h1, article h2, article h3, article h4, article h5, article h6 {
	color: var(--clr_Content_Heading);
}

article p { color: var(--clr_Content_Text); }

/* AI: 57.Details.css fills a details panel with --clr_Panel_Background, which in
   this palette is the very same navy as --clr_Content_Text. The rule above then
   painted navy text on a navy panel, which is why "Loading..." was invisible on
   the Sitemap. Inside a details panel, text takes the panel's own color. */
article details p,
article details summary {
	color: inherit;
}

article img { border-radius: 10px; }

/* Book covers and icons keep their own edges, as on Paul's sites. */
article img.Book,
article img.Icon { border-radius: 0px; }

article ol li {
	font-family: var(--fnt_Michael_Display);
	font-weight: bold;
	font-style: italic;
	color: var(--clr_Content_Accent);
}

	article ol li p {
		font-family: var(--fnt_Quote);
		font-weight: normal;
		font-style: normal;
		color: var(--clr_Table_MainText);
	}

article li.CompressedList,
article li.compressedlist {
	margin-bottom: 0pt;
	min-height: 0;
}

article blockquote {
	min-height: 85px;
	background-image: url('/Design/Images/Quote.jpg');
	background-repeat: no-repeat;
	font-family: var(--fnt_Quote);
	font-style: italic;
	font-weight: bold;
	color: MidnightBlue;
}

/********************************************************************
    INSERT BARS
    Michael's asides: a doubled midnight-blue border, italic.
*********************************************************************/

article .InsertBar {
	border: 3px MidnightBlue double;
	border-radius: 5px;
	box-shadow: 5px 5px 10px MidnightBlue;
	color: MidnightBlue;
	font-style: italic;
	padding: 8px;
	margin: 8px;
}

	article .InsertBar i { font-style: normal; }

/********************************************************************
    NAVIGATION
    The nav faces are images rather than CSS backgrounds now, so the
    hover state brightens the glyph instead of swapping the file.
*********************************************************************/

nav.NavBar a,
#SharePageButton,
#ReadAloudButton {
	color: var(--clr_Nav_Link);
	font-family: var(--fnt_Nav_Link);
	font-size: 9pt;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
}

	nav.NavBar a:hover img,
	#SharePageButton:hover img,
	#ReadAloudButton:hover img {
		filter: brightness(1.35) saturate(1.15);
	}

/* Michael's nav faces are round chrome discs on a transparent background.
   30.Navigation.css frames them for square photo buttons -- a grey border,
   a 4px radius and a rectangular drop shadow -- all of which box them in.
   The discs carry their own bevel, so strip the frame and keep them round. */
#SharePageButton img,
#ReadAloudButton img,
nav.NavBar a img {
	border: none;
	border-radius: 50%;
	box-shadow: none;
}

/* Drop the whole top row slightly clear of the content panel's edge. */
#OptionsBar {
	padding-top: 5px;
}

/* The bottom nav is width:100% and inherits nav's 6pt side margins, which
   pushed it past the content panel so its buttons sat further right than the
   top ones. Zeroing those margins lines the two rows up. */
main > nav.NavBar {
	margin-left: 0;
	margin-right: 0;
}

@media only screen and (max-width: 1000px) {
	main nav.Gateways { display: none; }
}

/********************************************************************
    PAGE BARS
    The child-page listings sit on Michael's PageHeader graphic.
*********************************************************************/

/* AI: details div.PageBar in 59.Pagebars.css is more specific than a bare
   div.PageBar, so on the Sitemap the bar kept the original navy-topped gradient
   while the title stayed navy -- unreadable until hover filled the bar. Both
   selectors are listed here so a PageBar looks the same wherever it renders. */
div.PageBar,
details div.PageBar {
	/* A 2px transparent border is reserved up front so the hover outline
	   appears without nudging the layout. background-color is deliberately
	   NOT set here: 59.Pagebars.css puts the panel color there, and its
	   higher-specificity hover rule drops this gradient to reveal it. */
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	background-image: linear-gradient(to bottom, var(--clr_PageBar_Top), var(--clr_PageBar_Bottom));
	padding: 10px;
	transition: border-color 0.4s ease;
}

	div.PageBar:hover,
	div.PageBar.Link:hover {
		border-color: var(--clr_PageBar_Edge);
	}

/* The bar at the top of a page is its own metadata, not a clickable child
   card. Its table is its only child, and the table's bottom margin left 16px
   of dead space inside the padded box -- 128px of bar for 85px of rows. The
   trailing margin goes, and the padding tightens. :not(.Link) picks this bar
   out; every child bar is a link. */
article div.PageBar:not(.Link) {
	padding: 6px 10px;
}

	article div.PageBar:not(.Link) table:last-child {
		margin-bottom: 0;
	}

/* Unhovered, the bar is a pale gradient, so the title takes the same blue as
   the table rows. Hovered, the bar fills with that blue and the title goes
   white along with the rest of the text. */
/* AI: The .Link form is listed explicitly because 59.Pagebars.css styles
   `article div.PageBar.Link h1` -- two classes to this rule's one, so a bare
   `article div.PageBar h1` loses the weight to it. */
article div.PageBar h1,
article div.PageBar.Link h1 {
	color: var(--clr_Panel_Background);
	/* AI: 59.Pagebars.css sets weight 100 unhovered, rising to 700 on hover.
	   At 100 Harrington's strokes are too fine to read comfortably, so the
	   resting weight is normal and the hover still thickens for the affordance. */
	font-weight: 400;
}

	article div.PageBar:hover h1,
	article div.PageBar.Link:hover h1 {
		color: var(--clr_Panel_Text_Light);
	}

	/* AI: 59.Pagebars.css already colors these rows from the panel variables
	   set in 02.SiteColors.css. Forcing Michael's teal here put teal text on
	   the navy row background, which was barely legible -- his original teal
	   sat on the light PageHeader graphic, not on a filled row. Only the
	   heading spacing is worth keeping. */
	div.PageBar h3 {
		padding-top: 10px;
		text-shadow: none;
	}

.Solid { background-color: var(--clr_Content_Accent); }

/********************************************************************
    AUDIO
*********************************************************************/

audio {
	box-shadow: 5px 5px 10px black;
	border-radius: var(--DefaultBorderRadius);
}