/* File: css/style.css
   Complete stylesheet for Tayal Publication website
   Organized into logical sections with detailed comments
   --- VERSION 2.0: ENHANCED FOR MOBILE RESPONSIVENESS ---
*/

/* ========================================
   CSS VARIABLES & GLOBAL STYLES
   ======================================== */
:root {
    /* Color Palette */
    --primary-color: #ef4444; /* Primary red color */
    --primary-color-light: #fee2e2; /* Light red for backgrounds */
    --dark-color: #111827; /* Dark gray for text */
    --gray-color: #4b5563; /* Medium gray */
    --light-gray-color: #f3f4f6; /* Light gray for backgrounds */
    --white-color: #ffffff; /* White */
    --border-color: #e5e7eb; /* Light border color */
    
    /* Typography */
    --font-heading: 'Playfair Display', serif; /* Heading font */
    --font-body: 'Inter', sans-serif; /* Body font */

    /* Layout Variables */
    --header-height: 80px; /* Fixed header height */
    --border-radius: 8px; /* Standard border radius */
    --transition-speed: 0.3s; /* Standard transition speed */
}

/* ========================================
   CSS RESET & BASE STYLES
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-body);
    color: var(--gray-color);
    background-color: var(--white-color);
    line-height: 1.6; /* Improved readability */
    overflow-x: hidden; /* --- ADDED --- Prevents horizontal scroll on poorly sized elements */
}

/* --- CHANGED --- Ensure height: auto to maintain aspect ratio */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed) ease;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--dark-color);
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

/* Layout Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem; /* --- CHANGED --- Added a bit more padding for smaller screens */
}

.section-padding {
    padding: 6rem 0;
}
.section-padding-top {
    padding-top: 6rem;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--primary-color);
    margin: 0.5rem auto 0;
    border-radius: 2px;
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 2rem;
}

.hidden {
    display: none !important;
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    text-align: center;
    transition: all var(--transition-speed) ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

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

/* ========================================
   HEADER & NAVIGATION STYLES
   ======================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: top var(--transition-speed) ease;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo img {
    height: 60px; /* --- CHANGED --- Slightly smaller logo for better balance */
}

.main-nav ul {
    display: flex;
    gap: 2rem;
}

.nav-link {
    font-weight: 500;
    color: var(--dark-color);
    position: relative;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-speed) ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-link.active {
    color: var(--primary-color);
    font-weight: 700;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--dark-color);
    cursor: pointer;
    padding: 0.5rem; /* --- ADDED --- Makes it easier to tap */
    z-index: 1100; /* --- ADDED --- Ensures it's above other nav elements */
}

/* ========================================
   FOOTER STYLES
   ======================================== */
.footer {
    background-color: var(--dark-color);
    color: #d1d5db;
    padding-top: 4rem;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* --- CHANGED --- Adjusted ratio for better balance */
    gap: 3rem;
    padding-bottom: 3rem;
}

.footer-column h4 {
    color: var(--white-color);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.brand-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.brand-info p {
    margin-bottom: 1rem;
    max-width: 350px; /* --- CHANGED --- Allow a bit more width */
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    transition: all var(--transition-speed) ease;
}

.footer-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.map-container {
    width: 100%;
    height: 250px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid var(--gray-color);
}

/* --- ADDED --- Making iframe responsive */
.map-container iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-top: 1px solid var(--gray-color);
    font-size: 0.9rem;
    flex-wrap: wrap; /* --- ADDED --- Allows wrapping on small screens */
    gap: 1rem; /* --- ADDED --- */
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    color: #d1d5db;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gray-color);
    border-radius: 50%;
    transition: all var(--transition-speed) ease;
}

.social-icons a:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-3px);
}

/* ========================================
   HERO CAROUSEL STYLES (HOMEPAGE)
   ======================================== */
.hero-carousel-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px; /* --- ADDED --- fallback for very short screens */
    overflow: hidden;
}

.hero-carousel {
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-color: #000;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.slide-content {
    position: absolute;
    bottom: 15%; /* --- CHANGED --- More vertical space */
    left: 10%;
    color: var(--white-color);
    max-width: 60%;
    z-index: 2;
}

.slide-content blockquote {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.cta-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--white-color);
    font-size: 1.2rem;
    font-weight: 500;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    transition: all var(--transition-speed) ease;
}

.cta-link:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--white-color);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
}

.carousel-nav:hover {
    background-color: var(--primary-color);
}

.carousel-nav.prev { left: 2rem; }
.carousel-nav.next { right: 2rem; }

/* ========================================
   QUICK LINKS SECTION STYLES (HOMEPAGE)
   ======================================== */
.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.quick-link-card {
    background-color: var(--white-color);
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: all var(--transition-speed) ease;
}

.quick-link-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

/* --- CHANGED --- Removed redundant background color on hover */
.quick-link-card:hover {
    border-color: var(--primary-color);
}


.quick-link-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.quick-link-card h3 {
    margin-bottom: 1rem;
}

.quick-link-card p {
    margin-bottom: 2rem;
}

/* ========================================
   LATEST RELEASES SECTION STYLES (HOMEPAGE)
   ======================================== */
.latest-releases-section {
    background-color: var(--light-gray-color);
}

.book-slider-wrapper {
    position: relative;
    padding: 0 4rem;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: var(--white-color);
    color: var(--dark-color);
    border: 1px solid var(--border-color);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.slider-nav:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.slider-nav.prev { left: 0; }
.slider-nav.next { right: 0; }

.book-slider {
    overflow: hidden;
}

.book-slider-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s ease-in-out;
}

/* --- CHANGED --- Removed flex-basis, will handle in media queries */
.book-card {
    text-align: center;
    position: relative;
    flex-shrink: 0; /* --- ADDED --- Prevents cards from shrinking */
    width: calc(20% - 1.2rem); /* --- ADDED --- 5 cards per view by default (1.5rem * 4 gaps / 5 cards = 1.2rem) */
}


.book-cover {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-speed) ease;
}

.book-cover img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.book-card:hover .book-cover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.book-cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
    pointer-events: none;
}

/* --- ADDED --- Hide overlay on touch devices as hover is unreliable */


.book-card:hover .book-cover-overlay {
    opacity: 1;
    pointer-events: auto;
}

.overlay-icon {
    color: var(--white-color);
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform var(--transition-speed) ease;
}

.overlay-icon:hover {
    color: var(--primary-color);
    transform: scale(1.2);
}

.book-card h4 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    color: var(--dark-color);
}

/* ========================================
   COMMITMENT SECTION STYLES (HOMEPAGE)
   ======================================== */
.commitment-card {
    padding: 2.5rem 2rem;
    text-align: center;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
}

.commitment-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.1);
}

.commitment-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.commitment-card h3 {
    margin-bottom: 1rem;
}

/* ========================================
   GENERIC HERO BANNER STYLES
   ======================================== */
.hero-banner {
    position: relative;
    padding: 8rem 0;
    color: var(--white-color);
    text-align: center;
    /* --- REMOVED --- Background images now in HTML for better semantics */
}

.hero-banner .hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2; /* --- CHANGED --- ensures it is behind overlay */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.6);
    z-index: -1; /* --- ADDED --- */
}

.hero-banner .container {
    position: relative;
    z-index: 2;
}

.hero-banner h1 {
    color: var(--white-color);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* ========================================
   ABOUT PAGE STYLES
   ======================================== */
.grid-2-col-uneven {
    display: grid;
    grid-template-columns: 1fr 0.8fr; /* --- CHANGED --- Adjusted ratio */
    gap: 4rem;
    align-items: center;
}

.philosophy-content p {
    margin-bottom: 1.5rem;
}

.philosophy-images {
    position: relative;
}

.collage-img-1 {
    width: 90%;
    border-radius: var(--border-radius);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.collage-img-2 {
    position: absolute;
    bottom: -10%;
    right: 0;
    width: 45%;
    border-radius: 50%;
    border: 8px solid var(--white-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.core-values-section {
    background-color: var(--light-gray-color);
    padding-bottom: 6rem; /* --- CHANGED --- Synced with section padding */
}

.value-card {
    background-color: var(--white-color);
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.value-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.value-card h3 {
    margin-bottom: 1rem;
}

/* ========================================
   BOOKS PAGE STYLES
   ======================================== */
.books-collection-section {
    background-color: #f9fafb;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    margin-bottom: 3rem;
}

.filter-group {
    flex-grow: 1;
    position: relative;
    min-width: 150px; /* --- ADDED --- Prevents squishing */
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: var(--light-gray-color);
}

.filter-group select {
    padding-right: 2.5rem;
    appearance: none;
}

.filter-group::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free'; /* --- CHANGED --- Use correct font family name */
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gray-color);
}

.filter-group:has(input)::after {
    content: none;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.filter-group .fa-search {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--gray-color);
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2rem;
}

.no-results-message {
    text-align: center;
    padding: 4rem 1rem;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
}

.no-results-message i {
    font-size: 4rem;
    color: #9ca3af;
    margin-bottom: 1.5rem;
}

.no-results-message p {
    font-size: 1.2rem;
    color: var(--gray-color);
}

.pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    flex-wrap: wrap; /* --- ADDED --- Allow pagination to wrap */
}

.pagination-nav button {
    background: none;
    border: 1px solid var(--border-color);
    min-width: 40px; /* --- CHANGED --- use min-width for flexibility */
    height: 40px;
    padding: 0 0.5rem; /* --- ADDED --- */
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

.pagination-nav button:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.pagination-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-nav .page-numbers {
    display: flex; /* --- ADDED --- */
    gap: 0.5rem; /* --- ADDED --- */
}

.pagination-nav .page-numbers button.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    font-weight: 700;
}

/* ========================================
   MANUALS PAGE STYLES
   ======================================== */
.manuals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.manual-card {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-speed) ease;
    display: flex; /* --- ADDED --- */
    flex-direction: column; /* --- ADDED --- For better alignment */
    justify-content: space-between; /* --- ADDED --- */
}

.manual-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.manual-card i {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.manual-card h3 {
    margin-bottom: 0.5rem;
}

.manual-card p {
    color: var(--gray-color);
    margin-bottom: 1.5rem;
    flex-grow: 1; /* --- ADDED --- Pushes button down */
}

.btn-download {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    width: 80%;
    margin: 0 auto; /* --- ADDED --- center the button */
    transition: all var(--transition-speed) ease; /* --- CHANGED --- */
    opacity: 0; /* --- CHANGED --- Use opacity for smoother animation */
    transform: translateY(20px); /* --- CHANGED --- */
}

.manual-card:hover .btn-download {
    opacity: 1; /* --- CHANGED --- */
    transform: translateY(0); /* --- CHANGED --- */
}

/* ========================================
   CONTACT PAGE STYLES
   ======================================== */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    background-color: var(--white-color);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-form-container h3,
.contact-info-container h3 {
    margin-bottom: 1.5rem;
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--dark-color);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 1rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.contact-form button {
    width: 100%;
}

.form-success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.form-success i {
    font-size: 1.5rem;
}

.contact-info-container p {
    margin-bottom: 2rem;
}

.contact-details li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-details i {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 4px;
    flex-shrink: 0; /* --- ADDED --- Prevents icon from squishing */
}

/* ========================================
   SCROLL ANIMATION STYLES
   ======================================== */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ===================================================================
   ===================================================================
      RESPONSIVE DESIGN STYLES (COMPLETELY REVISED)
   ===================================================================
   =================================================================== */

/* ========================================
   LARGE TABLETS & SMALL DESKTOPS (<= 1200px)
   ======================================== */
@media (max-width: 1200px) {
    .book-card {
        width: calc(25% - 1.125rem); /* 4 books */
    }
}


/* ========================================
   TABLETS (<= 1024px)
   ======================================== */
@media (max-width: 1024px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }
    .section-padding { padding: 4rem 0; }
    .section-padding-top { padding-top: 4rem; }

    .grid-3-col {
        grid-template-columns: repeat(2, 1fr); /* --- CHANGED --- 2 columns for tablets */
    }

    .book-card {
        width: calc(33.33% - 1rem); /* 3 books */
    }
    
    .grid-2-col-uneven, .contact-wrapper, .footer-main {
        grid-template-columns: 1fr;
    }
    
    .philosophy-images { margin-top: 3rem; text-align: center; }
    .collage-img-1 { width: 80%; }
    .collage-img-2 { display: none; } /* --- CHANGED --- Hide secondary image that complicates layout */

    .footer-main { gap: 2.5rem; }
    .brand-info { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer-column.location { grid-row: 1; } /* --- ADDED --- Move map to top on tablet */
}

/* ========================================
   SMALL TABLETS & LARGE PHONES (<= 768px)
   ======================================== */
@media (max-width: 768px) {
    :root { --header-height: 70px; }
    
    /* --- ADDED --- Responsive font sizing */
    html {
        font-size: 15px;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .logo img { height: 50px; }

    /* --- IMPROVED --- Mobile Navigation */
    .main-nav {
        position: fixed;
        top: 0; /* --- CHANGED --- Aligns to top */
        left: 0;
        width: 100%;
        height: 100vh; /* --- CHANGED --- Full screen overlay */
        background-color: var(--white-color);
        display: flex; /* --- ADDED --- For centering */
        justify-content: center; /* --- ADDED --- */
        align-items: center; /* --- ADDED --- */
        transform: translateX(100%); /* --- CHANGED --- Slide in from right */
        transition: transform var(--transition-speed) ease-in-out;
    }
    
    .main-nav.active {
        transform: translateX(0);
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        font-size: 1.5rem; /* --- ADDED --- Bigger text for mobile nav */
    }

    .hamburger {
        display: block;
    }

    /* --- IMPROVED --- Carousel adjustments */
    .hero-carousel-section {
        height: 80vh; /* --- CHANGED --- Reduce height on mobile */
    }

    .slide-content {
        left: 50%; /* --- ADDED --- */
        transform: translateX(-50%); /* --- ADDED --- Center content */
        text-align: center; /* --- ADDED --- */
        width: 90%; /* --- CHANGED --- Use more width */
        max-width: 90%; /* --- ADDED --- */
        bottom: 10%;
    }
    .slide-content blockquote {
        font-size: 1.8rem; /* --- CHANGED --- */
    }
    .carousel-nav {
        display: none; /* --- CHANGED --- Hide arrows, rely on swipe */
    }

    /* --- IMPROVED --- Quick Links & Commitment Cards now single column */
    .grid-3-col {
        grid-template-columns: 1fr;
    }

    /* --- IMPROVED --- Book slider becomes a scrollable container */
    .book-slider-wrapper { padding: 0; }
    .slider-nav { display: none; }
    .book-slider {
        overflow-x: auto; /* Allow horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        scroll-snap-type: x mandatory; /* Snap scrolling */
    }
    .book-slider::-webkit-scrollbar { display: none; } /* Hide scrollbar for Chrome/Safari */
    .book-slider-track {
        transition: none; /* Let native scroll handle it */
        transform: none !important; /* Override JS transform */
    }
    .book-card {
        width: 60%; /* Show one full card and part of the next */
        scroll-snap-align: start;
    }

    /* --- IMPROVED --- Footer adjustments */
    .footer-bottom {
        flex-direction: column-reverse; /* Put social icons first */
        gap: 1.5rem;
        text-align: center;
    }
    
    /* --- IMPROVED --- Books page adjustments */
    .filter-bar { flex-direction: column; }
    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1.5rem;
    }
    
    /* --- IMPROVED --- Contact page adjustments */
    .contact-wrapper {
        padding: 2rem 1.5rem;
    }
    .contact-details span {
        word-break: break-word; /* --- ADDED --- Prevent long addresses from overflowing */
    }
}

/* ========================================
   MOBILE PHONES (<= 480px)
   ======================================== */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    .container { padding: 0 1rem; }

    .hero-banner { padding: 6rem 0; }
    .slide-content blockquote { font-size: 1.5rem; }
    
    .book-card {
        width: 75%; /* Show a bit less on very small screens */
    }
    
    /* Make the book grid on the books page 2-columns */
    .book-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ========================================
   FIX FOR DESKTOP BOOKS PAGE LAYOUT
   ======================================== */
/* This code specifically targets the book cards ONLY when they are inside the book grid 
  on the Books page. It resets their width to be controlled by the grid, 
  restoring the correct desktop layout.

  It does NOT affect the homepage slider or any mobile styles.
*/
.book-grid .book-card {
    width: auto;
}


/* ========================================
   STYLING FOR NEW BOOK CARD LINKS
   ======================================== */
/* This ensures the new <a> tags don't have underlines and fit the grid properly. */
.book-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* This keeps the hover animation working on the new link structure */
.book-card-link:hover .book-cover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}