@charset "UTF-8";

/*
Theme Name:   BadAliens.info — Custom theme
Theme URI:    https://badaliens.info/
Description:  Child theme of Twenty Twenty-One for badaliens.info. All customizations live here so parent theme updates cannot alter the site.
Author:       Matt Hurley
Template:     twentytwentyone
Version:      2.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  badaliens
*/

/**
 * This stylesheet holds every custom rule for the site.
 *
 * It was previously an inline <style> block inside header.php. It now loads
 * normally through wp_enqueue_style(), which means browsers can cache it and
 * it can be edited without touching template files.
 *
 * Twenty Twenty-One's own stylesheet is intentionally dequeued in
 * functions.php — this design was built without it, and loading it would
 * restyle the whole site. See README-CHILD-THEME.md.
 *
 * CONTENTS
 * 1.  Base / body
 * 2.  Accessibility helpers
 * 3.  Header & logo
 * 4.  Primary navigation
 * 5.  Content
 * 6.  Galleries & media
 * 7.  Footer
 * 8.  Utilities
 * 9.  Desktop (min-width: 800px)
 */


/* 1. Base / body
   ========================================================================== */

body {
	background: #034;
	color: #fff;
}


/* 2. Accessibility helpers
   ========================================================================== */

/**
 * Standard WordPress screen-reader-text: hides content visually while keeping
 * it available to screen readers.
 *
 * The previous rule was `display: none`, which hid it from assistive
 * technology too — that removed the "Skip to content" link and the menu
 * button's label from screen readers entirely.
 */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* The skip link becomes visible when focused via keyboard. */
.screen-reader-text:focus {
	background-color: #000;
	clip: auto !important;
	clip-path: none;
	color: #fff;
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}


/* 3. Header & logo
   ========================================================================== */

header {
	background: no-repeat left url("https://badaliens.info/wp-content/uploads/2025/04/header_bg.png");
	background-position: 0 65%;
	background-size: cover;
	width: 100%;
}

.header-icon {
	width: 50%;
	padding-top: .5rem;
	margin-left: 3rem;
	margin-bottom: 1rem;
	display: inline-block;
}

.header-icon img {
	width: 24rem;
	height: 8rem;
}

/**
 * Menu toggle. This is now a <button> rather than an <a href="javascript:...">
 * with an inline onclick handler, so it is keyboard-accessible by default.
 */
.burger-icon {
	background: none;
	border: 0;
	cursor: pointer;
	color: #aaa;
	font-size: 32px;
	position: absolute;
	right: 30px;
	top: 30px;
	padding: 0;
	line-height: 1;
}

.burger-icon:hover,
.burger-icon:focus {
	color: #fff;
}


/* 4. Primary navigation
   ========================================================================== */

.menu-button-container {
	display: none;
}

.primary-menu-container {
	display: none;
	padding: 1rem 0.2rem;
	text-align: center;
	background: #000;
}

/**
 * Toggled by assets/js/navigation.js. Previously the script wrote
 * `style.display` directly onto the element, which overrode the media query
 * below and left the menu stuck open after resizing.
 */
.primary-menu-container.is-open {
	display: flex;
}

.primary-menu-container ul {
	margin-bottom: 0 !important;
	padding-left: 0;
	list-style: none;
	width: 100%;
}

.menu-item {
	color: #fff;
	width: 20rem;
	margin: 0.5rem;
	padding: 0.3rem;
	font-size: 18px;
	display: inline-block;
	text-align: center;
}

.menu-item a {
	color: #fff;
	margin: 0.5rem;
	padding: 7px;
	text-decoration: none;
	font-size: 16px;
	transition-duration: 200ms;
}

.menu-item a:hover,
.menu-item a:focus {
	color: #fff;
	text-shadow:
		rgba(255, 0, 0, 1) 0 0 12px,
		rgba(255, 0, 0, 1) 0 0 12px,
		rgba(255, 0, 0, 1) 0 0 20px;
	transition-duration: 100ms;
}

/**
 * Highlights the page you are currently on.
 *
 * The old markup hardcoded id="menu-active" on one <li>. WordPress adds
 * .current-menu-item automatically, so no manual marking is needed.
 */
.menu-item.current-menu-item > a,
.menu-item.current_page_item > a {
	text-decoration: underline;
}


/* 5. Content
   ========================================================================== */

.entry-content {
	margin: 1rem;
}

.entry-content h1 {
	font-size: 25px;
	line-height: 2;
}

.entry-content h2 {
	font-size: 20px;
	line-height: 2;
}

.entry-content p {
	font-size: 16px;
	line-height: 2;
}

.entry-content a {
	color: #fff;
	text-decoration: underline;
}

.entry-content li {
	color: #fff !important;
	font-size: 17px;
	line-height: 2;
}

.bullet-list {
	color: #fff !important;
	margin-left: 1rem;
}

.bullet-list a {
	font-size: 18px;
	line-height: 1.8;
	color: #fff !important;
	margin-left: 1rem;
}


/* 6. Galleries & media
   ========================================================================== */

.entry-content img {
	max-width: 90vw;
	max-height: 360px;
}

.blocks-gallery-grid,
.blocks-gallery-item {
	list-style-type: none;
	text-align: center;
}

.blocks-gallery-grid img,
.blocks-gallery-item img {
	max-width: 90vw;
	max-height: 360px;
}

.wp-block-image,
.wp-block-embed,
.wp-block-gallery {
	text-align: center;
}

iframe {
	max-width: 90vw;
	max-height: 380px;
}

figcaption {
	font-size: 13px;
}


/* 7. Footer
   ========================================================================== */

.site-info {
	text-align: center;
	margin: 1rem;
	font-size: 16px;
}

.powered-by {
	text-align: center;
	margin: 1rem;
	font-size: 14px;
}

.powered-by a {
	color: #fff;
	font-size: 16px;
}

.email {
	display: block;
	font-size: 20px;
	line-height: 2;
}

/**
 * Social icons in the footer. Styling moved out of inline style="" attributes
 * so it can be maintained here; the icon URLs are set at
 * Appearance → Footer Links.
 */
.social-icon {
	display: inline-block;
	color: #fff;
	border-radius: 16px;
	padding: 1rem;
	margin: 0 0.5rem;
	line-height: 1;
}

.social-icon--youtube {
	background: red;
	font-size: 24px;
}

.social-icon--twitter {
	background: #0EBFD6;
	font-size: 27px;
}

.social-icon--instagram {
	background: #F01DC9;
	font-size: 25px;
}

/**
 * Was #playicon. The original rule was missing semicolons between
 * declarations, so browsers discarded it entirely and it never applied.
 */
.playicon {
	color: #fff;
	background: red;
	padding: 1rem;
	font-size: 36px;
}

.playicon:hover {
	font-size: 42px;
}

#intext-tweety,
#footer-tweety {
	background: #5bf7ff;
	border-radius: 20px;
	padding: .5rem;
}

#intext-tweety {
	width: 36px;
	height: 36px;
}

#footer-tweety {
	width: 30px;
	height: 30px;
}

#intext-tweety:hover,
#footer-tweety:hover {
	padding: 0;
}


/* 8. Utilities
   ========================================================================== */

#author-name {
	display: inline-block;
}

.smileyscript {
	display: none;
}


/* 9. Desktop
   ========================================================================== */

@media all and (min-width: 800px) {

	.burger-icon {
		color: #aaa;
		font-size: 40px;
		right: 35px;
		top: 35px;
	}

	.primary-menu-container {
		display: flex;
		text-align: center;
		background: #000;
	}

	.menu-item {
		width: auto;
		display: inline-block;
		margin: 0.5rem;
	}

	.menu-item a {
		font-size: 18px;
		padding: 10px;
		text-decoration: none;
	}

	.header-icon {
		display: inline-block;
		width: 4.5rem;
		margin-left: 3rem;
		margin-bottom: 1rem;
	}

	.header-icon img {
		width: 42rem;
		height: 14rem;
	}

	.entry-content {
		margin: 2rem 25%;
	}

	.entry-content h1 {
		font-size: 30px;
		line-height: 2;
	}

	.entry-content h2 {
		font-size: 25px;
		line-height: 2;
	}

	.entry-content p {
		font-size: 20px;
		line-height: 2;
	}

	.entry-content img {
		max-width: 500px;
	}

	.bullet-list {
		margin-left: 1rem;
	}

	.bullet-list a {
		font-size: 18px;
		line-height: 1.8;
		color: #fff;
		margin-left: 1rem;
	}

	.email {
		color: #fff;
		font-size: 20px;
		line-height: 2;
	}
}