/*
 Theme Name:   Authors on the Web Starter Theme
 Theme URI:    https://authorsontheweb.com
 Description:  Authors on the Web starter child theme for GeneratePress.
 Author:       Authors on the Web
 Author URI:   https://authorsontheweb.com
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  aotw-starter
*/

/* ==========================================================================
   ROOT VARIABLES
   ========================================================================== */

:root {
	/* Site colors
	   Map these to GeneratePress Global Colors where practical.
	*/
	--body-background-color: var(--base, #f3f6f7);
	--body-outside-color: var(--body-outside-container, var(--base, #f3f6f7));

	/* Optional mobile navigation artwork.
	   Example:
	   --mobile-menu-background: url("/wp-content/uploads/mobile-menu-background.jpg");
	*/
	--mobile-menu-background: none;

	/* Social media */
	--facebook-color: #3b5998;
	--twitter-color: #55acee;
	--twitter-x-color: #000;
	--instagram-color: #833ab4;
	--pinterest-color: #cb2027;
	--goodreads-color: #553b08;

	/* Form messages */
	--response-msg-green: #9dd4ab;
	--response-msg-green-text: #2c6e3d;

	/* Font weights */
	--thin: 100;
	--extra-light: 200;
	--light: 300;
	--regular: 400;
	--normal: 400;
	--medium: 500;
	--semibold: 600;
	--bold: 700;
	--extra-bold: 800;

	/* Type scale */
	--text-xxs: 0.25rem;
	--text-xs: 0.5rem;
	--text-small: 0.75rem;
	--text-medium: 1rem;
	--text-large: 1.25rem;
	--text-xl: 1.5rem;
	--text-xxl: 2rem;

	/* Frequently used effects */
	--drop-shadow: 0 2px 2px rgb(55 55 55 / 50%);
	--text-shadow: 0.5px 1px 3px rgb(0 17 48 / 20%);
	--standard-shadow: 0 5px 16px -5px rgb(33 33 33 / 20%);
	--standard-shadow-hover: 0 8px 32px rgb(33 33 33 / 10%);

	/* Misc. */
	--accolades-star: "★";

	/* Optional gradient ingredients.
	   Define these per project when used.
	*/
	--main-linear-gradient:
		linear-gradient(
			to bottom,
			var(--base, transparent) 0%,
			var(--base-2, transparent) 100%
		);

	--hero-linear-gradient:
		linear-gradient(
			to bottom,
			var(--hero-gradient-top, transparent) 30%,
			var(--hero-gradient-bottom, transparent) 100%
		);

	--background-linear-gradient:
		linear-gradient(
			0.25turn,
			var(--linear-gradient-top-left, transparent),
			var(--linear-gradient-middle, transparent),
			var(--linear-gradient-bottom-right, transparent)
		);

	--background-linear-gradient-reversed:
		linear-gradient(
			0.25turn,
			var(--linear-gradient-bottom-right, transparent),
			var(--linear-gradient-middle, transparent),
			var(--linear-gradient-top-left, transparent)
		);

	--background-circle-gradient:
		radial-gradient(
			circle at center,
			var(--circle-gradient-1, transparent),
			var(--circle-gradient-2, transparent)
		);

	--background-ellipse-gradient:
		radial-gradient(
			ellipse at left,
			var(--ellipse-gradient, transparent),
			transparent
		),
		radial-gradient(
			ellipse at bottom,
			var(--accent, transparent),
			transparent
		),
		radial-gradient(
			ellipse at right,
			var(--ellipse-gradient, transparent),
			transparent
		),
		radial-gradient(
			ellipse at center,
			var(--ellipse-gradient, transparent),
			var(--ellipse-gradient, transparent)
		);

	--footer-background-1:
		radial-gradient(
			circle at top,
			rgb(0 0 0 / 30%),
			transparent
		);
}


/* ==========================================================================
   SITE STRUCTURE
   ========================================================================== */

/* Keep short pages from collapsing vertically. */
#main {
	min-height: 65vh;
}

/*
 * Optional outer wrapper.
 * GeneratePress does not create .site-wrapper automatically; use this only
 * when the project markup includes that class.
 */
.site-wrapper {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	position: relative;
	background-color: var(--body-background-color);
}

body {
	background-color: var(--body-outside-color);
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/*
 * Do not globally remove focus outlines.
 * This gives keyboard users a visible fallback while allowing project colors
 * to override currentColor naturally.
 */
:where(
	a,
	button,
	input,
	select,
	textarea,
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/* ==========================================================================
   HELPER CLASSES
   ========================================================================== */

/* Shadows */

.shadow-standard {
	box-shadow: var(--standard-shadow);
	transition: box-shadow 0.2s ease-in;
}

.shadow-standard:hover {
	box-shadow: var(--standard-shadow-hover);
}


/* Max widths */

.max-width-1920 {
	max-width: 1920px;
}

.max-width-1800 {
	max-width: 1800px;
}

.max-width-1024 {
	max-width: 1024px;
}

.max-width-768 {
	max-width: 768px;
}

.max-width-640 {
	max-width: 640px;
}

.max-width-480 {
	max-width: 480px;
}


/* Alignment */

.margin-auto {
	margin-inline: auto;
}


/* Positioning */

.relative {
	position: relative;
}

.absolute {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
}

.sticky {
	position: sticky;
	top: 24px;
}


/* Aspect ratios */

.aspect-1-1 img,
.aspect-3-2 img,
.aspect-2-3 img,
.aspect-4-3 img,
.aspect-3-4 img,
.aspect-16-9 img,
.aspect-9-16 img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.aspect-1-1 img {
	aspect-ratio: 1 / 1;
}

.aspect-3-2 img {
	aspect-ratio: 3 / 2;
}

.aspect-2-3 img {
	aspect-ratio: 2 / 3;
}

.aspect-4-3 img {
	aspect-ratio: 4 / 3;
}

.aspect-3-4 img {
	aspect-ratio: 3 / 4;
}

.aspect-16-9 img {
	aspect-ratio: 16 / 9;
}

.aspect-9-16 img {
	aspect-ratio: 9 / 16;
}


/* ==========================================================================
   SOCIAL MEDIA
   ========================================================================== */

a.facebook-icon {
	color: var(--facebook-color);
}

a.twitter-icon {
	color: var(--twitter-color);
}

a.twitter-x-icon {
	color: var(--twitter-x-color);
}

a.instagram-icon {
	color: var(--instagram-color);
}

a.pinterest-icon {
	color: var(--pinterest-color);
}

a.goodreads-icon {
	color: var(--goodreads-color);
}


/* ==========================================================================
   GENERATEPRESS
   ========================================================================== */

/* Optional decorative image behind the slide-out navigation. */
#generate-slideout-menu {
	position: relative;
}

#generate-slideout-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--mobile-menu-background);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.3;
	pointer-events: none;
}


/* ==========================================================================
   ADMIN / TEMPORARY NOTICE
   ========================================================================== */

.admin-notice {
	transform: translateY(-100vh);
	animation: banner-fade-in 1s 1s ease-in forwards;
}

.hide-me {
	transform: translateY(0);
	animation: banner-fade-out 1s 1s ease-in-out forwards;
}

@keyframes banner-fade-in {
	from {
		transform: translateY(-100vh);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes banner-fade-out {
	from {
		transform: translateY(0);
		max-height: 100vh;
		opacity: 1;
	}

	to {
		transform: translateY(-100vh);
		max-height: 0;
		opacity: 0;
		padding-block: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.admin-notice,
	.hide-me {
		animation-duration: 0.01ms;
		animation-delay: 0s;
	}
}


/* ==========================================================================
   NINJA FORMS
   ========================================================================== */

.recaptcha-wrap > .nf-field-label,
.nf-form-fields-required {
	display: none;
}

.nf-field-label label {
	font-weight: var(--normal);
	text-transform: uppercase;
}

.label-above label {
	margin-bottom: 10px;
}

.ninja-forms-req-symbol {
	display: none;
}

.nf-response-msg {
	color: var(--response-msg-green-text);
}

.nf-response-msg p {
	padding: 20px;
	background-color: var(--response-msg-green);
	font-size: 1.125rem;
	font-style: italic;
	letter-spacing: -0.005em;
}