/*
Theme Name: GremlinDroppings
Theme URI: 
Author: muddassirnasim
Author URI: https://profiles.wordpress.org/muddassirnasim/
Description: GremlinDroppings is a minimal and lightweight WordPress block theme, designed with full site editing capabilities. It’s perfect for achieving top scores on tools like Google PageSpeed, GTmetrix, and Pingdom. Ideal for blogs, this responsive theme offers four unique styles, easy-to-read fonts, well-balanced color schemes, and a built-in dark mode. Best of all, it’s free to use!
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gremlindroppings
Tags: blog, one-column, wide-blocks, block-styles, featured-images, full-site-editing, rtl-language-support, threaded-comments, translation-ready
*/

a {
	transition: all 0.3s ease-in-out;
}

/* GremlinDroppings visual system. Generated artwork is kept local to the
 * theme so the site remains self-contained and does not depend on a CDN. */
:root {
	--gd-asset-path: "assets/gremlindroppings/";
}

@font-face {
	font-family: "Gremlins";
	font-style: normal;
	font-weight: 400;
	src: url("assets/fonts/gremlins/Gremlins.ttf") format("truetype");
}

body {
	background-image: url("assets/gremlindroppings/gd-texture-light.png");
	background-attachment: fixed;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.wp-block-site-title,
.wp-block-site-title a {
	font-family: "Halant", Georgia, serif !important;
	font-size: clamp(1.8rem, 3.5vw, 3.1rem);
	font-weight: 700 !important;
	letter-spacing: .055em;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
}

.gd-site-header {
	background-image: url("assets/gremlindroppings/gd-banner-light-v2.png");
	background-position: center;
	background-size: cover;
	border-bottom: 1px solid rgba(73, 55, 24, .3);
	box-shadow: 0 8px 28px rgba(50, 34, 14, .12);
}

.gd-site-header-inner {
	backdrop-filter: blur(1px);
}

/* The title is rendered into the high-resolution masthead with the supplied
 * Gremlins typeface; retain the live site-title link for accessibility. */
.gd-site-header .wp-block-site-title {
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.gd-home-main {
	background-image: linear-gradient(180deg, rgba(255, 250, 236, .28), rgba(255, 250, 236, .88) 72%), url("assets/gremlindroppings/gd-hero-wide.png");
	background-position: center top;
	background-size: cover;
	border-radius: 4px;
	box-shadow: 0 10px 32px rgba(58, 40, 18, .12);
	padding-top: clamp(2rem, 5vw, 4rem) !important;
	padding-bottom: clamp(2rem, 5vw, 4rem) !important;
}

.gd-home-main .wp-block-post-template > li {
	position: relative;
	padding: 1.25rem clamp(1rem, 3vw, 3rem) 2.8rem;
}

.gd-home-main .wp-block-post-template > li::after {
	background: url("assets/gremlindroppings/gd-editorial-divider-transparent.png") center / contain no-repeat;
	bottom: .25rem;
	content: "";
	height: 2rem;
	left: 20%;
	position: absolute;
	right: 20%;
}

.gd-content-main .wp-block-post-featured-image img {
	border: 1px solid rgba(73, 55, 24, .3);
	box-shadow: 0 12px 26px rgba(42, 28, 12, .18);
}

body.is-style-dark {
	background-image: url("assets/gremlindroppings/gd-texture-dark.png");
}

body.is-style-dark .gd-site-header {
	background-image: linear-gradient(90deg, rgba(8, 10, 8, .9), rgba(8, 10, 8, .35) 55%, rgba(8, 10, 8, .7)), url("assets/gremlindroppings/gd-header-dark.png");
}

body.is-style-dark .gd-home-main {
	background-image: linear-gradient(180deg, rgba(7, 10, 8, .2), rgba(7, 10, 8, .88) 75%), url("assets/gremlindroppings/gd-hero-wide.png");
}

/* GremlinDroppings desktop-first reading layout. */
@media (min-width: 782px) {
	.wp-site-blocks {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.wp-block-post-content,
	.wp-block-post-comments-form {
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	main.wp-block-group.has-global-padding {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	main.wp-block-group > .wp-block-group {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.wp-block-post-comments-form {
		margin-block-start: 2rem !important;
	}

	.wp-block-post-comments-form .comment-form {
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
	}

	.wp-block-post-comments-form input[type="text"],
	.wp-block-post-comments-form input[type="email"],
	.wp-block-post-comments-form input[type="url"],
	.wp-block-post-comments-form textarea {
		box-sizing: border-box;
		width: 100%;
		max-width: 620px;
	}

	.wp-block-post-comments-form .comment-form > * {
		margin-block-start: 0.75rem;
		margin-block-end: 0.75rem;
	}
}

/* Keep controls usable on phones without making mobile the design baseline. */
@media (max-width: 781px) {
	.wp-block-post-comments-form input[type="text"],
	.wp-block-post-comments-form input[type="email"],
	.wp-block-post-comments-form input[type="url"],
	.wp-block-post-comments-form textarea {
		box-sizing: border-box;
		max-width: 100%;
	}
}

/*
* Control the hover stylings of outline block style.
*/
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--background);
}

/* PRIMARY NAV LIST */
.primary-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav-list.footer-nav {
	justify-content: center;
}

.wp-block-navigation__responsive-container {
	padding: 30px !important;
}