/*!
Theme Name: redpanda
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: redpanda
Tags: custom-background, 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.

redpanda is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
	--primary: #222831;
	--primary-light: #393E46;
	--secondary: #00ADB5;
	--background: #f9f9f9;
	--graybook: #6B7280;
	--accent-yellow: #FEF7CD;
	--white: #ffffff;
	--black: #000000;
	--shadow-book: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--radius: 8px;
	--font-family: 'Inter', sans-serif;
	--font-family-display: 'Playfair Display', serif;
}

/* Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family);
	line-height: 1.6;
	color: var(--primary);
	background-color: var(--background);
}

img {
	max-width: 100%;
	display: block;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	/* padding: 0 1.5rem; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-display);
	font-weight: 700;
	line-height: 1.2;
}

h1 {
	font-size: 2.5rem;
	margin-bottom: 1.5rem;
}

h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	text-align: center;
	color: var(--primary);
}

a {
	text-decoration: none;
	color: inherit;
}

section {
	padding: 5rem 0;
}

p {
	font-size: 20px;
}

/* Button Styles */
.btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	font-weight: 600;
	text-align: center;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
}

.btn.primary {
	background-color: var(--primary);
	color: var(--white);
	box-shadow: var(--shadow-book);
}

.btn.primary:hover {
	background-color: var(--primary-light);
}

.btn-ghost {
	color: var(--primary);
	background: transparent;
	padding: 0.5rem 1rem;
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	transition: color 0.3s ease;
}

.btn-ghost:hover {
	color: var(--secondary);
}

/* Navbar */
.navbar {
	/* background-color: var(--white); */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.navbar .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 5rem;
}

.logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-family-display);
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--primary);
}

.nav-links {
	display: none;
}

.nav-links a {
	margin-left: 2rem;
	font-weight: 600;
	text-transform: uppercase;
	color: #4B5563;
	transition: color 0.3s ease;
}

.nav-links a:hover {
	color: var(--secondary);
}

.menu-toggle {
	background: none;
	border: none;
	cursor: pointer;
}

/* Mobile Menu */
.mobile-menu {
	position: absolute;
	top: 4rem;
	right: 1rem;
	background-color: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-book);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 1000;
}

.mobile-menu a {
	padding: 0.5rem 1rem;
	font-weight: 600;
	color: #4B5563;
	transition: color 0.3s ease;
}

.mobile-menu a:hover {
	color: var(--secondary);
}

/* Hero Section */
.hero {
	background: linear-gradient(to bottom right, #F2FCE2, #EFEAFE);
	padding-top: 5rem;
	padding-bottom: 6rem;
}

.hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
}

.hero-text {
	text-align: left;
	max-width: 600px;
}

.hero-text h1 span {
	color: var(--secondary);
}

.hero-text p {
	font-size: 1.125rem;
	margin-bottom: 1.5rem;
	color: var(--graybook);
}

.hero-image {
	display: flex;
	justify-content: center;
}

.book-image {
	width: 18rem;
	height: 24rem;
	object-fit: cover;

	box-shadow: var(--shadow-book);
	border: 4px solid var(--white);
}

/* Books Section */
.books {
	background-color: var(--background);
}

.carousel-container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}

.book-carousel {
	display: flex;
	gap: 1.5rem;
	transition: transform 0.3s ease;
}

.book-card {
	min-width: 280px;
	background-color: var(--white);

	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: var(--shadow-book);
	transition: transform 0.3s ease;
}

.book-card:hover {
	transform: scale(1.05);
}



.book-card h3 {
	font-size: 1.25rem;
	margin-bottom: 0.25rem;
}

.book-card .author {
	color: var(--graybook);
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.book-card .summary {
	font-size: 0.875rem;
	color: #4B5563;
	margin-bottom: 1rem;
}

.carousel-controls {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.carousel-prev,
.carousel-next {
	background-color: var(--primary);
	color: var(--white);
	border: none;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
	background-color: var(--primary-light);
}

.view-all {
	text-align: center;
	margin-top: 2rem;
}

/* Authors Section */
.authors {
	background-color: var(--white);
}

.authors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 2.5rem;
	margin-bottom: 2rem;
}

.author-card {
	background-color: var(--white);
	border-radius: var(--radius);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: var(--shadow-book);
	transition: transform 0.3s ease;
}

.author-card:hover {
	transform: scale(1.05);
}

.author-photo {
	width: 7rem;
	height: 7rem;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--primary);
	margin-bottom: 0.75rem;
}

.author-card h3 {
	font-size: 1.25rem;
	margin-bottom: 0.25rem;
}

.author-card .bio {
	font-size: 0.875rem;
	color: var(--graybook);
	margin-bottom: 1rem;
}

.author-books {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.book-badge {
	background-color: var(--accent-yellow);
	color: var(--primary);
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
}

/* About Section */
.about {
	background-color: var(--white);
}

.about-content {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}

.about-content .lead {
	font-size: 1.25rem;
	color: var(--graybook);
	margin-bottom: 1rem;
}

.about-content p {
	color: #4B5563;
	font-size: 1.2em;
}

/* Contact Section */
.py-8 {
	padding-top: 70px;
	/* Reduced padding */
	padding-bottom: 24px;
}

.contact {
	/* background: var(--white); */
	font-family: 'Arial', sans-serif;
	min-height: 70vh;
}

.contact-title {
	font-size: 2.2em;
	/* Slightly smaller title */
	color: var(--primary);
	margin-bottom: 8px;
	font-weight: 600;
}

.contact-subtitle {
	font-size: 1em;
	/* Smaller subtitle */
	color: var(--graybook);
	margin-bottom: 25px;
}

.contact-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	/* Reduced gap */
	margin-bottom: 25px;
}

.contact-form {
	background: #fff;
	padding: 15px;
	/* Reduced padding */
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	animation: fadeIn 0.6s ease-in-out;
}

.form-title {
	font-size: 1.3em;
	/* Smaller title */
	color: var(--primary);
	margin-bottom: 10px;
}



.info-title {
	font-size: 1.3em;
	/* Smaller title */
	color: var(--primary);
	margin-bottom: 10px;
}

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

.info-item {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Smaller gap */
	font-size: 0.9em;
	/* Smaller text */
	color: var(--graybook);
	margin-bottom: 8px;
}

.info-item svg {
	width: 18px;
	/* Smaller icons */
	height: 18px;
	stroke: var(--accent);
	flex-shrink: 0;
}

.info-link,
.info-text {
	color: var(--primary);
	text-decoration: none;
}

.info-link:hover {
	color: var(--accent);
	text-decoration: underline;
}

.contact-map {
	text-align: center;
	margin-top: 25px;
}

.contact-map iframe {
	width: 100%;
	height: 250px;
	/* Compact map height */
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* Contact Form Styling (for Contact Form 7 or similar) */
.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Smaller gap */
}

.wpcf7-form p {
	margin: 0;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: 8px;
	/* Smaller padding */
	border: 1px solid var(--primary);
	border-radius: 4px;
	font-size: 0.85em;
	/* Smaller font */
	color: var(--primary);
	background: #fff;
	transition: border-color 0.3s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 4px rgba(231, 76, 60, 0.3);
}

.wpcf7-form textarea {
	min-height: 100px;
	/* Smaller textarea */
	resize: vertical;
}

.wpcf7-form input[type="submit"] {
	padding: 8px 16px;
	/* Smaller button */
	border: none;
	border-radius: 4px;
	/* background: var(--accent);
	color: var(--white); */
	font-size: 0.85em;
	cursor: pointer;
	transition: background 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
	background: #c0392b;
	/* Darker red */
}

/* Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.contact-content {
		grid-template-columns: 1fr;
	}

	.contact-title {
		font-size: 1.8em;
	}

	.contact-subtitle {
		font-size: 0.95em;
	}

	.form-title,
	.info-title {
		font-size: 1.2em;
	}

	.contact-form,
	.contact-info {
		padding: 12px;
	}

	.contact-map iframe {
		height: 200px;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 45px 20px;
	}

	.py-8 {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.contact-title {
		font-size: 1.6em;
	}

	.contact-subtitle {
		font-size: 0.9em;
	}

	.info-item {
		font-size: 0.85em;
	}

	.info-item svg {
		width: 16px;
		height: 16px;
	}

	.wpcf7-form input[type="text"],
	.wpcf7-form input[type="email"],
	.wpcf7-form textarea {
		font-size: 0.8em;
	}

	.wpcf7-form input[type="submit"] {
		font-size: 0.8em;
		padding: 7px 14px;
	}
}

/*  */


/* Footer */
.footer {
	background: #2c3e50;
	/* Dark blue-gray */
	color: #ecf0f1;
	/* Light text */
	padding: 40px 20px;
	font-family: 'Arial', sans-serif;
	border-top: 2px solid #e74c3c;
	/* Subtle red accent */
}

.footer-container {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.footer-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	/* Reduced gap to keep it compact */
}

.contact-info {
	text-align: center;
	width: 100%;
	/* Ensure full width for alignment */
}

.contact-links {
	display: flex;
	flex-direction: row;
	/* Horizontal layout on desktop */
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	/* Allow wrapping if needed */
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95em;
	color: #ecf0f1;
}

.contact-item svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	stroke: #ecf0f1;
}

.contact-text {
	color: #ecf0f1;
	text-decoration: none;
}

.contact-text:hover {
	color: #e74c3c;
	/* Red accent on hover */
}

.social-media {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #ecf0f1;
	text-decoration: none;
	transition: color 0.3s ease;
}

.social-icon:hover {
	color: #e74c3c;
	/* Red accent on hover */
}

.social-icon svg {
	width: 20px;
	height: 20px;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	border-top: 1px solid #ecf0f122;
	/* Subtle divider */
	padding-top: 15px;
	font-size: 0.85em;
}

.copyright {
	color: #bdc3c7;
	/* Muted text */
}

.footer-logo {
	color: #e74c3c;
	/* Red accent */
	text-decoration: none;
	font-weight: bold;
}

.footer-logo:hover {
	color: #c0392b;
	/* Darker red on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
	.footer {
		padding: 30px 15px;
	}

	.footer-content {
		flex-direction: column;
		/* Ensure vertical stacking */
		gap: 20px;
		/* Increased gap for clarity */
	}

	.contact-info {
		order: 1;
		/* Contact info first */
	}

	.contact-links {
		flex-direction: column;
		/* Stack contact items vertically */
		gap: 12px;
	}

	.contact-item {
		font-size: 0.9em;
		justify-content: center;
	}

	.social-media {
		order: 2;
		/* Social media below contact info */
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.social-icon {
		width: 28px;
		height: 28px;
	}

	.contact-item svg {
		width: 18px;
		height: 18px;
	}

	.footer-logo {
		font-size: 0.95em;
	}
}


/* Responsive Styles */
@media (min-width: 768px) {
	h1 {
		font-size: 3.5rem;
	}

	h2 {
		font-size: 2.5rem;
	}

	.nav-links {
		display: flex;
	}

	.menu-toggle {
		display: none;
	}

	.hero-content {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.contact-info {
		flex-direction: row;
		justify-content: center;
	}

	.footer .container {
		flex-direction: row;
	}
}

/* Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fadeIn {
	animation: fadeIn 0.5s ease-in-out;
}


/* Additional styles specific to book details */
.book-details {
	padding: 2.5rem 0;
}

.book-container {
	display: flex;
	flex-direction: column;
	gap: 5rem;
	margin-bottom: 2.5rem;
}

.book-cover-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 400px;
	perspective: 1200px;
}

.book-cover {
	width: 100%;
	max-width: 300px;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateY(-12deg);
	transition: transform 0.5s ease, box-shadow 0.5s ease;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	position: relative;
	overflow: hidden;
}

/* Simulated spine */
.book-cover::before {
	content: '';
	position: absolute;
	left: -10px;
	top: 0;
	width: 10px;
	height: 100%;
	background: linear-gradient(to right, #bbb, #eee);
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
.book-cover:hover {
	transform: rotateY(0deg);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* 🔽 Mobile styles: Remove 3D and border */
@media (max-width: 768px) {
	.book-container {
		display: flex;
		flex-direction: column;
		gap: 5rem;
		margin-bottom: 2.5rem;
		align-items: center;
	}

	.book-cover {
		transform: none;
		box-shadow: none;
		border-radius: 0;
		align-items: center;
	}


	.book-cover::before {
		display: none;
	}
}


.book-icon {
	position: absolute;
	bottom: -1.5rem;
	right: -1.5rem;
	background-color: var(--accent-yellow);
	padding: 0.75rem;
	border-radius: 50%;
	box-shadow: var(--shadow-book);
}

.book-info {
	display: flex;
	flex-direction: column;
}

.book-cover-large {
	width: 16rem;
	height: 24rem;
	object-fit: cover;
	border-radius: 0.5rem;
	border: 4px solid rgba(34, 40, 49, 0.2);
	box-shadow: var(--shadow-book);
}

.book-title {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
}

.book-author {
	font-size: 1.25rem;
	color: var(--graybook);
	margin-bottom: 1.5rem;
}

.book-author a {
	color: var(--primary);
	transition: color 0.3s ease;
}

.book-author a:hover {
	color: var(--secondary);
	text-decoration: underline;
}

.summary-card {
	background-color: var(--white);
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: var(--shadow-book);
	margin-bottom: 1.5rem;
}

.summary-title {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

.action-buttons {
	display: flex;
	gap: 1rem;
}

.author-section {
	margin-top: 3rem;
}

.author-section h2 {
	text-align: left;
	margin-bottom: 1.5rem;
}

.author-card-horizontal {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--white);
	border-radius: var(--radius);
	padding: 1.5rem;
	gap: 1.5rem;
	box-shadow: var(--shadow-book);
}

.back-link {
	display: inline-flex;
	align-items: center;
	color: var(--primary);
	font-weight: 600;
	margin-bottom: 1rem;
	transition: color 0.3s ease;
}

.back-link:hover {
	color: var(--secondary);
}

.back-icon {
	margin-right: 0.5rem;
}

@media (min-width: 768px) {
	.book-container {
		flex-direction: row;
		align-items: center;
	}

	.author-card-horizontal {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}
}