avusd/lib/modules/apostrophe-assets/public/css/main.sass

@use './common'

@font-face
	font-family: 'Merriweather'
	src: url('/modules/theme/fonts/Merriweather-Regular.ttf') format("truetype")
@font-face
	font-family: 'MerriweatherSans'
	src: url('/modules/theme/fonts/MerriweatherSans-VariableFont_wght.ttf') format("truetype")
@font-face
	font-family: "LibreFranklin"
	src: url('/modules/theme/fonts/LibreFranklin[wght].ttf') format("truetype")
@font-face
	font-family: "Montserrat-ExtraBold"
	src: url('/modules/theme/fonts/Montserrat-ExtraBold.ttf') format("truetype")
@font-face
	font-family: "AlexBrush"
	src: url('/modules/theme/fonts/AlexBrush-Regular.ttf') format("truetype")

p
	text-indent: 0
	// The important is necessary here because for some reason CKEditor outputs style="padding: 0; margin: 0" for every <p></p> tag.
	// Remove !important if we can figure out how to remove the style CKEditor outputs.
	margin: 0.3rem 0 0.7rem 0 !important
	padding: 0 !important
	font-family: "Merriweather", "serif"
	font-size: 1.1rem
	line-height: 1.4rem
p.indent
	text-indent: 1rem

.apos-rich-text
	td, th
		text-indent: 0
		margin: 0.3rem 0 0.7rem 0
		padding: 0.25rem 0
		font-family: "Merriweather", "serif"
		font-size: 1.1rem
		line-height: 1.4rem
		p
			margin: 0 !important
			padding: 0 !important
	td + td, th + th  // All table data elements following another table data element should have a bit of space between element contents.
		padding-left: 1rem
	th
		font-family: "MerriweatherSans", "sans-serif"
		font-weight: 700

h2.h2, h3.h3, h4.h4
	font-family: "MerriweatherSans", "sans-serif"
	margin-bottom: 1rem
// Remove the margin-top from the paragraphs that follow a heading.  Make !important because we have to override the styles set by CKEditor.
h2.h2 + p, h3.h3 + p, h4.h4 + p
	margin-top: 0 !important
// Add more margin-top to headings when following content (p, unordered / ordered lists)
p + h2.h2, p + h3.h3, p + h4.h4, ul + h2.h2, ul + h3.h3, ul + h4.h4, ol + h2.h2, ol + h3.h3, ol + h4.h4, table + h2.h2, table + h3.h3, table + h4.h4
	margin-top: 1.7rem
h2.h2
	font-size: 2.2rem
	line-height: 2.8rem
	font-family: "MerriweatherSans", "sans-serif"
	font-weight: 700
h3.h3
	font-size: 1.5rem
	line-height: 2rem
	font-family: "MerriweatherSans", "sans-serif"
	font-weight: 700
h4.h4
	font-size: 1.2rem
	line-height: 1.5rem
	font-family: "MerriweatherSans", "sans-serif"
	font-weight: 900

//Links using Apostrophe Files or Rich Text Widgets
div[data-apos-widget='apostrophe-files'], .apos-rich-text
	a
		margin: 0.3rem 0 0.7rem 0 !important
		font-family: "MerriweatherSans", 'sans-serif'
		font-size: 1.4rem
		line-height: 1.6rem
		color: #1c1cc4
		text-shadow: 0 0 0.6rem rgb(158, 243, 113)
		transition: text-shadow 0.5s, color 0.5s
	a:hover
		color: #3d1cd0
		text-shadow: 0 0 0.6rem rgb(123, 238, 238)
	a:active
		color: #7a29ec
div[data-apos-widget='apostrophe-files']
	margin: 1rem 0 1.5rem 0.5rem
	padding: 0.5rem 0.5rem 0 0.5rem
	border: 1px solid #5b5b5b
	a
		display: block
		padding: 0
		font-size: 1.2rem
//Links embedded in a rich text widget.
.apos-rich-text
	a
		font-size: 1.2rem
		line-height: 1.5rem

h5
	font-size: 1.2rem
	font-weight: 900
	margin-top: 0.8rem
	margin-bottom: 0.3rem

.navbar sup
	font-weight: 700
	font-size: 0.7rem
	bottom: 0.25rem

.apos-slideshow h4
	display: none

.apos-area-widget a
	display: inline
	padding-bottom: 0.8rem

.apos-rich-text ul
	list-style-type: disc
	list-style-position: inside
	margin: 0.3rem 0 0.7rem 2rem
	text-indent: -1.5rem
	padding: 0
	font-family: "Merriweather", "serif"
	font-size: 1.1rem
	line-height: 1.4rem
.apos-rich-text ul ul
	margin-left: 2.5rem
	text-indent: -1.7rem
	list-style-type: circle
	list-style-position: inside

.apos-rich-text ol
	list-style-type: decimal
	list-style-position: inside
	margin: 0.3rem 0 0.7rem 2rem
	text-indent: -1.5rem
	padding: 0
	font-family: "Merriweather", "serif"
	font-size: 1.1rem
	line-height: 1.4rem
.apos-rich-text ol ol
	margin-left: 2.5rem
	text-indent: -1.7rem
	list-style-type: lower-alpha
	list-style-position: inside

blockquote
	font-family: AlexBrush, Serif
	font-size: 1.2rem
	line-height: 1.3rem
	margin: .2rem 0
	&:before
		content: '\201C'
	&:after
		content: '\201D'
	&:after, &:before
		font-size: 4rem
		line-height: 0
		position: relative
		top: 0.5rem
		color: lighten(#000, 40%)
	p
		font-family: AlexBrush, Serif
		font-size: 2rem
		line-height: 2rem
		display: inline

.apos-indent1
	margin-left: 1rem

.apos-indent2
	margin-left: 2rem

//.apos-rich-text > div  //This was a work around to the rich text widget 'class' property not working in the style.
.highlighted
	background: rgba(215, 187, 161, 0.3)
	margin: 0 0 0 0
	padding: 0.2rem 0 0.2rem 1rem
	font-size: 1.1rem
	font-weight: 700
	color: #006400
	a
		font-size: 1rem
		line-height: 1.2rem
		text-shadow: 0 0 0.6rem rgba(158, 243, 113, 0.3)

.alert
	//background: #581d17
	margin: 0
	padding: 0.4rem 0 0.4rem 1rem
	font-size: 1.3rem
	font-family: "Montserrat-ExtraBold", "sans-serif"
	line-height: 1.4rem
	font-weight: 700
	color: #000
	&:before
		content: "Alert:"
		//color: #FFF
		//background: #98025c
		//background-image: linear-gradient(45deg, #3023AE 0%, #98025C 100%)
		border-radius: .5rem/1rem
		padding: 0.5rem
		letter-spacing: 0.2rem
		margin-right: 1rem
		color: #98025c
		border: 1px black solid
	a
		font-size: 1.2rem
		line-height: 1.3rem
		text-shadow: 0 0 0.6rem rgba(158, 243, 113, 0.3)

.date
	background: black
	color: white
	text-align: right
	padding: 1rem 1.5rem
	margin-bottom: 1rem
	margin-top: 2rem
	font-weight: 700

//
// Redefine some of the Apostrophe administrative UI.
//
$bg-dark: #4F3A28
$bg-light: #d29a6b
.apos-login-logo
	margin-bottom: 0
.apos-login-logo svg
	width: 200px
	height: 200px
.apos-login.apos-ui
	background-color: $bg-light
.apos-ui
	.apos-field
		margin-bottom: 1rem
	.apos-field-input
		padding: 0.5rem
	.apos-login-submit
		margin-top: 3rem
	.apos-button--major
		background-color: saddlebrown
	.apos-button--global
		background-color: $bg-dark
	.apos-field-input:focus
		box-shadow: 0 0 15px 0 $bg-dark
.apos-login-wrapper, .apos-login-content, .apos-ui .apos-admin-bar
	background-color: $bg-dark
@media only screen and (min-width: 1450px)
	.apos-ui .apos-admin-bar-logo, .apos-ui .apos-admin-bar-logo svg
		max-height: 40px
		max-width: 40px
		margin-right: 30px
//
// Everything scales off of the HTML tag font sizes since the whole site uses REM units.
//

@media only screen and (max-width: 1100px)
	html
		font-size: 14px !important

@media only screen and (max-width: 950px)
	html
		font-size: 12px !important

@media only screen and (max-width: 760px)
	html
		font-size: 10px !important

@media only screen and (max-width: 500px)
	html
		font-size: 8.5px !important