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

    THE ONA FOUNDATION CUSTOMIZATION

    Decoration ported from the classic-ASP site's own sheets. Colors and
    fonts live in 02.SiteColors.css and 03.SiteFonts.css; this carries
    the shapes, shadows, background art and the content classes that are
    particular to ONA -- the twelve System colours and the "ONA"
    pronunciation spans.

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

/********************************************************************
    HEADER
    Logo.png is the site's identity, so the text site title and the
    section title stay hidden, exactly as div.SiteTitle was hidden on
    the old site. The page title is what shows, bottom right.
*********************************************************************/

header h1,
header h2 {
	display: none;
}

header h3 {
	color: var(--clr_Header_PageTitle);
	font-family: var(--fnt_Header_PageTitle);
	font-weight: normal;
	text-shadow: var(--clr_Header_Shadow) 4px 4px 4px;
	/* AI: The header is a flex column with justify-content: space-between,
	   which spreads its visible headings across it. With the site and section
	   titles hidden the page title is the only child left and lands at the
	   top; margin-top:auto puts it at the bottom of the banner panel where
	   ONA has always shown it. */
	margin-top: auto;
	/* The script face needs the size the old site gave it. */
	font-size: clamp(1.4em, 3vw + 0.6em, 2.4em);
}

#SidebarToggle {
	position: absolute;
	top: 0px;
	right: 0px;
	box-shadow: none;
	border-radius: 0;
}

@media only screen and (min-width: 1025px) {
	#SidebarToggle { display: none; }
}

@media only screen and (max-width: 1024px) {
	header h3 { font-size: 1.3em; }
}

/********************************************************************
    SIDEBAR
    A translucent maroon wash over the nebula, centred, with the
    infinity mark above the buttons.
*********************************************************************/

#Sidebar {
	background-color: var(--clr_Sidebar_Background);
	border-radius: var(--DefaultBorderRadius);
	box-shadow: var(--DefaultBoxShadow);
	font-family: var(--fnt_Sidebar_Text);
	padding: 10px;
	margin: 0 20px 12pt 0;
	min-width: 200px;
	width: 20%;
	text-align: center;
}

#Sidebar p {
	font-size: 10pt;
	color: var(--clr_Sidebar_Text);
	margin: 0 auto 10px auto;
	width: 90%;
}

#Sidebar img {
	margin-top: 0;
	margin-bottom: 12pt;
	box-shadow: none;
	border-radius: 0;
}

/* ONA's gateway buttons: a solid maroon bar 10em wide with a pale
   yellow label. Hovered, the shadow tightens and the button shifts
   down and right as though pressed. */
a.Gateway {
	display: block;
	width: 10em;
	padding: 2px;
	margin: 0 auto 6px auto;
	border: none;
	border-radius: 0;
	font-size: 9pt;
	font-weight: bold;
	text-align: center;
	box-shadow: 4px 4px 6px black;
}

	a.Gateway:hover {
		color: var(--clr_Sidebar_Button_Hover_Link) !important;
		background-color: var(--clr_Sidebar_Button_Hover);
		box-shadow: 1px 1px 6px black;
		transform: translate(3px, 3px);
	}

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

/* AI: The white panel is <article>, which 50.Article.css paints -- NOT
   <main>. Painting main white would put the button bars inside the panel;
   ONA has them outside it, on the nebula. */
main {
	background-color: transparent;
	color: var(--clr_Content_Text);
}

article {
	border-radius: var(--DefaultBorderRadius);
	box-shadow: var(--DefaultBoxShadow);
}

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

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

/* AI: 57.Details.css fills a details panel with --clr_Panel_Background, and
   the rule above would then paint navy headings on the maroon panel. Inside
   a details panel everything takes the panel's own colours. */
article details p,
article details summary {
	color: inherit;
}

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

article img { border-radius: 10px; }

/* Icons and diagrams keep their own edges. */
article img.Icon,
article img.Diagram { border-radius: 0px; }

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

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

/* AI: The workshops' self-assessment blocks. These were <form> tags on the
   classic site, which cannot stay: Site.Master already wraps the page in
   <form runat=server>, and a nested form is invalid HTML. They are plain
   blocks now, with the spacing a form used to get, and the reader is told to
   print and keep their answers rather than send them. */
article div.Questionnaire {
	margin-bottom: 1em;
}

	article div.Questionnaire textarea,
	article div.Questionnaire input[type="text"] {
		font-family: var(--fnt_Content_Text);
		max-width: 100%;
	}

/********************************************************************
    NAVIGATION
    ONA's nav art is one image per button: a 100x20 pill, black with a
    blue cap unhovered, inverting on hover, with the label laid over it
    as text. NamtiraWeb emits an icon <img> plus a label instead, so the
    img is hidden and the pill is painted as the anchor's background.
    Navigation.vb tags each anchor NavHome / NavPrev / NavUp / NavNext /
    NavSection so they can be told apart here.
*********************************************************************/

nav.NavBar a,
#SharePageButton,
#ReadAloudButton {
	background-repeat: no-repeat;
	background-position: top left;
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: var(--clr_Nav_Link);
	font-family: var(--fnt_Nav_Link);
	font-size: 9pt;
	font-weight: normal;
	height: 20px;
	width: 100px;
	padding: 3px 0 0 0;
	text-align: center;
	text-decoration: none;
	/* AI: The nav is a flex row, and a flex item shrinks below its width when
	   the row overflows. A long Section title pushed the row over and squeezed
	   Home and Next down to 8px of pill. Each button keeps its own size now,
	   and the row wraps instead. */
	flex: 0 0 auto;
}

	nav.NavBar a:hover,
	#SharePageButton:hover,
	#ReadAloudButton:hover {
		color: var(--clr_Nav_Hover);
		font-weight: normal;
	}

	/* The icon the framework puts inside each button is redundant here --
	   the pill behind the label is the artwork. */
	nav.NavBar a img,
	#SharePageButton img,
	#ReadAloudButton img {
		display: none;
	}

a.NavHome { background-image: url('/Design/Images/Home_Normal.gif'); }
a.NavHome:hover { background-image: url('/Design/Images/Home_Hover.gif'); }

a.NavPrev { background-image: url('/Design/Images/Prev_Normal.gif'); }
a.NavPrev:hover { background-image: url('/Design/Images/Prev_Hover.gif'); }

a.NavUp { background-image: url('/Design/Images/Up_Normal.gif'); }
a.NavUp:hover { background-image: url('/Design/Images/Up_Hover.gif'); }

a.NavNext { background-image: url('/Design/Images/Next_Normal.gif'); }
a.NavNext:hover { background-image: url('/Design/Images/Next_Hover.gif'); }

/* AI: ONA drew only the four directional faces. These three are the same
   pill with a new mark in the cap -- a list, a plus and a speaker cone --
   generated to match rather than borrowed from another site's palette. */
a.NavSection { background-image: url('/Design/Images/Section_Normal.gif'); }
a.NavSection:hover { background-image: url('/Design/Images/Section_Hover.gif'); }

#SharePageButton { background-image: url('/Design/Images/Share_Normal.gif'); }
#SharePageButton:hover { background-image: url('/Design/Images/Share_Hover.gif'); }

#ReadAloudButton { background-image: url('/Design/Images/ReadAloud_Normal.gif'); }
#ReadAloudButton:hover { background-image: url('/Design/Images/ReadAloud_Hover.gif'); }

/* A Section button carries the section's own title, which can be longer
   than "Home" -- let it have the room rather than clipping it.
   AI: Selector must be `nav.NavBar a.NavSection`, not `a.NavSection`. The
   AI: block above sets width:100px on `nav.NavBar a`, which is one class and
   AI: two elements; a bare `a.NavSection` is one class and one element and
   AI: loses, so the button stayed 100px and clipped "Guided Meditations" to
   AI: "Guided". Measured, not assumed. */
nav.NavBar a.NavSection {
	width: auto;
	min-width: 100px;
	padding-left: 20px;
	padding-right: 8px;
	white-space: nowrap;
	background-size: 100% 20px;
}

/* Line the bottom nav row up with the top one: nav's 6pt side margins
   push a width:100% bar past the content panel. */
main > nav.NavBar {
	margin-left: 0;
	margin-right: 0;
}

/* The pills are exactly as wide as their artwork, so with no gap their
   rounded ends butt together and read as one long bar. The old site
   spaced them out; this restores that. Wrapping goes with the flex:0 0 auto
   above: rather than squeezing the buttons, a row that will not fit breaks
   onto a second line. */
nav.NavBar,
#ShareBar {
	gap: 6px;
	flex-wrap: wrap;
}

/* AI: The button row floats above the white article panel, because main is
   transparent on this site. Nothing in the shared sheets puts a gap below it,
   so the buttons sat flush against the panel's top edge -- measured as zero
   pixels. The gap below roughly matches the 19px above, so the row reads as its
   own band rather than as part of the panel's border.
   AI: This is ONA's own adjustment, NOT a framework fix. cilwa.net and
   michaelshands.com measure the same zero gap and Paul says both look right as
   they are, so 30.Navigation.css stays untouched. */
#OptionsBar {
	padding-top: 5px;
	margin-bottom: 12px;
}

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

/********************************************************************
    PAGE BARS
    ONA's bars are the maroon panel fading to the white content panel,
    filling solid on hover. 59.Pagebars.css already does exactly that
    from the panel variables, so nothing is overridden here -- only the
    hover outline, which the framework leaves to the theme.
*********************************************************************/

div.PageBar,
details div.PageBar {
	border: 2px solid transparent;
	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 the page's own metadata, not a
   clickable child card, and its table is its only child. Dropping the
   table's trailing margin closes the dead space inside the padding. */
article div.PageBar:not(.Link) table:last-child {
	margin-bottom: 0;
}

/********************************************************************
    THE TWELVE SYSTEMS
    ONA's content marks each of the twelve centres with its own colour,
    four of them metallic textures. Ported unchanged from the old
    98.Customize.css, except that .System01's !important is dropped --
    nothing competes with it any more -- and the four colours whose
    contrast failed are given a text colour.
*********************************************************************/

.System01, .System02, .System03, .System04, .System05, .System06,
.System07, .System08, .System09, .System10, .System11, .System12 {
	font-weight: bold;
	font-style: italic;
}

.System01 {
	background-image: url('/Design/Images/Ground.jpg');
	color: white;
}

.System02 {
	background-image: url('/Design/Images/Bronze.jpg');
	color: white;
}

/* Red, orange and yellow at full saturation cannot carry white text, so
   these three keep black, as the original left them. */
.System03 { background-color: Red; color: black; }
.System04 { background-color: Orange; color: black; }
.System05 { background-color: Yellow; color: black; }

.System06 { background-color: Green; color: White; }
.System07 { background-color: Blue; color: White; }
.System08 { background-color: Indigo; color: White; }
.System09 { background-color: Purple; color: White; }

.System10 { background-image: url('/Design/Images/Iridescent.jpg'); color: black; }
.System11 { background-image: url('/Design/Images/Silver.jpg'); color: Black; }
.System12 { background-image: url('/Design/Images/Gold.jpg'); color: black; }

/********************************************************************
    THE "ONA" PRONUNCIATION SPANS
    Every occurrence of ONA in an article is wrapped at load time with a
    span in this face, plus a hidden "OHnah" for screen readers. See
    Design/Scripts/SiteMaster.js.
*********************************************************************/

.SoundFont {
	font-family: var(--fnt_Sound);
	font-weight: bold;
	font-style: normal;
	color: var(--clr_Content_Accent);
}

aside .SoundFont,
details .SoundFont,
div.PageBar .SoundFont { color: var(--clr_Panel_Accent); }

/* Off-screen but still read aloud by assistive technology. */
.Hidden {
	position: absolute;
	left: -9999px;
}

ruby {
	unicode-bidi: isolate;
	text-align: start;
}

	ruby > rp { display: none; }

/********************************************************************
    FOOTER
    The copyright sits directly on the nebula photo, as the old Trailer
    did. On the live classic-ASP site it renders in pure red, which is
    not a design choice: 10.Layout.css gave the footer
    color: var(--Header_Text), a variable that does not exist -- the
    real one is --clr_Header_Text -- so the footer fell through to
    --clr_Body_Text, which ONA's sheet left at the template's debugging
    red. It is white here, with a shadow so it holds up over the bright
    parts of the photo. Set --clr_Sidebar_Text's value on footer if the
    red is wanted back.
*********************************************************************/

footer p.Copyright {
	text-shadow: black 1px 1px 3px;
}

/********************************************************************
    AUDIO
    The twenty-four meditation and workshop recordings.
*********************************************************************/

audio {
	box-shadow: var(--DefaultBoxShadow);
	border-radius: var(--DefaultBorderRadius);
	max-width: 100%;
}