/*
Theme Name:        Grovers Logo Design Inspiration
Theme URI:         https://example.com/grovers-logo-inspiration
Author:            Umair
Author URI:        https://example.com
Description:       A custom-coded WordPress theme built as the foundation for the Grovers Logo Design Inspiration project. Starts lean with the core template hierarchy, accessible markup, and theme supports required by any WordPress theme — ready to layer design and functionality on top.
Version:           1.0.0
Requires at least: 6.4
Tested up to:       7.0
Requires PHP:       8.0
License:            GNU General Public License v2 or later
License URI:        https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        grovers-logo-inspiration
Tags:               blog, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* -----------------------------------------------------------------------
   Table of Contents
   -----------------------------------------------------------------------
   1.0 Reset & Base
   2.0 Typography
   3.0 Layout & Containers
   4.0 Header
   5.0 Navigation
   6.0 Content
   7.0 Widgets & Sidebar
   8.0 Comments
   9.0 Footer
   10.0 Forms
   11.0 Utilities & Accessibility
   ----------------------------------------------------------------------- */

/* 1.0 Reset & Base ------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	color: #1d1d1f;
	background: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
}

img {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0 0 1.5em;
}

a {
	color: #0d6efd;
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

/* 2.0 Typography --------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	line-height: 1.25;
	font-weight: 700;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
	margin: 0 0 1.5em;
}

/* 3.0 Layout & Containers ------------------------------------------------ */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.site-content {
	flex: 1 0 auto;
	padding-block: 2.5rem;
}

.content-area {
	width: 100%;
}

.has-sidebar .content-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

@media (min-width: 782px) {
	.has-sidebar .content-area {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

/* 4.0 Header -------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid #e5e5e5;
	padding-block: 1.25rem;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.site-title {
	margin: 0;
	font-size: 1.375rem;
}

.site-title a {
	color: inherit;
}

.site-description {
	margin: 0;
	font-size: 0.875rem;
	color: #6b6b6b;
}

.custom-logo-link img {
	display: block;
	max-height: 48px;
	width: auto;
}

/* 5.0 Navigation ----------------------------------------------------------- */

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.main-navigation a {
	color: inherit;
	font-weight: 500;
}

.main-navigation .sub-menu {
	display: none;
}

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid #d1d1d1;
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

@media (max-width: 781px) {
	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 0.75rem;
	}

	.main-navigation {
		display: none;
		width: 100%;
	}

	.main-navigation.is-open {
		display: block;
	}
}

/* 6.0 Content --------------------------------------------------------------- */

.entry-title {
	margin-bottom: 0.4em;
}

.entry-title a {
	color: inherit;
}

.entry-meta {
	color: #6b6b6b;
	font-size: 0.875rem;
	margin-bottom: 1em;
}

.entry-meta a {
	color: inherit;
}

.entry-content > * + * {
	margin-top: 1.25em;
}

.entry-thumbnail {
	margin: 0 0 1.5rem;
}

.entry-thumbnail img {
	border-radius: 6px;
}

article + article {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid #e5e5e5;
}

.pagination,
.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	border: 1px solid #d1d1d1;
	border-radius: 4px;
	margin-right: 0.25rem;
}

.pagination .page-numbers.current {
	background: #1d1d1f;
	color: #fff;
	border-color: #1d1d1f;
}

/* 7.0 Widgets & Sidebar ------------------------------------------------------- */

.widget-area .widget {
	margin-bottom: 2.5rem;
}

.widget-title {
	font-size: 1.125rem;
	margin-bottom: 0.75em;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	margin-bottom: 0.5em;
}

.footer-widgets {
	background: #f7f7f7;
	padding-block: 2.5rem;
}

.footer-widgets .container {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* 8.0 Comments ---------------------------------------------------------------- */

.comments-area {
	margin-top: 3rem;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	margin: 0;
	padding-left: 1.5rem;
}

.comment-body {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #e5e5e5;
}

.comment-author .avatar {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.5rem;
}

.comment-metadata {
	font-size: 0.8125rem;
	color: #6b6b6b;
}

/* 9.0 Footer -------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid #e5e5e5;
	padding-block: 1.5rem;
	font-size: 0.875rem;
	color: #6b6b6b;
}

.site-footer .container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* 10.0 Forms ----------------------------------------------------------------------- */

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: 1rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #d1d1d1;
	border-radius: 4px;
	background: #fff;
}

.search-form {
	display: flex;
	gap: 0.5rem;
}

button,
input[type="submit"],
.wp-block-button__link {
	display: inline-block;
	background: #1d1d1f;
	color: #fff;
	border: 1px solid #1d1d1f;
	border-radius: 4px;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background: #383838;
	text-decoration: none;
}

/* 11.0 Utilities & Accessibility ----------------------------------------------------- */

.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;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.alignwide {
	max-width: 1200px;
}

.alignfull {
	max-width: none;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin-right: 1.5rem;
}

.alignright {
	float: right;
	margin-left: 1.5rem;
}

header#top.term-hero {
    margin-top: 100px !important;
}