/*
 * Mike Grayson Website
 * Overrides for BootstrapMade BookLanding template
 * Bootstrap 5.3.6
 */

/* ============================================================
   COLOR SYSTEM
   ============================================================ */

:root {
    /* Typography */
    --default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --nav-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Main palette */
    --background-color: #ffffff;
    --default-color: #334155;
    --heading-color: #17365d;
    --accent-color: #25639a;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    /* MG-specific colors */
    --mg-navy: #17365d;
    --mg-blue: #25639a;
    --mg-blue-dark: #194b77;
    --mg-gold: #b88a3d;
    --mg-muted: #64748b;
    --mg-border: #e2e8f0;
    --mg-soft: #f5f7fa;
    --mg-soft-blue: #eef4fa;
    /* Navigation */
    --nav-color: #17365d;
    --nav-hover-color: #25639a;
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #334155;
    --nav-dropdown-hover-color: #25639a;
}


/* ============================================================
   GLOBAL
   ============================================================ */

body {
    background: #ffffff;
    color: var(--default-color);
    font-family: var(--default-font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
    letter-spacing: -0.02em;
}

a {
    color: var(--accent-color);
}

    a:hover {
        color: var(--mg-blue-dark);
    }


/* ============================================================
   BACKGROUNDS
   ============================================================ */

.light-background {
    --background-color: #f5f7fa;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #17365d;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #21466f;
    --contrast-color: #ffffff;
}


/* ============================================================
   HEADER
   ============================================================ */

.header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--mg-border);
    padding: 12px 0;
    backdrop-filter: blur(10px);
}

    .header .logo h1 {
        color: var(--mg-navy);
        font-size: 24px;
        font-weight: 650;
        letter-spacing: -0.025em;
    }

.scrolled .header {
    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.07);
}

.mobile-nav-toggle {
    color: var(--mg-navy);
}

    .mobile-nav-toggle:hover {
        color: var(--mg-blue);
    }


/* ============================================================
   SECTIONS
   ============================================================ */

section,
.section {
    padding: 20px 0;
}

.section-title {
    padding-bottom: 45px;
}

    .section-title h2 {
        font-size: 36px;
        font-weight: 700;
        letter-spacing: -0.035em;
        margin-bottom: 12px;
    }

    .section-title p {
        color: var(--mg-muted);
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
    }


/* ============================================================
   HERO
   ============================================================ */

.hero {
    padding: 90px 0 100px;
    background: linear-gradient( 135deg, #ffffff 0%, #f8fafc 55%, #eef3f8 100% );
}

    .hero .book-hero-content {
        max-width: 610px;
    }

        .hero .book-hero-content .book-genre {
            background: var(--mg-soft-blue);
            color: var(--mg-blue);
            border: 1px solid #d7e4ef;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.02em;
            padding: 7px 14px;
            margin-bottom: 22px;
        }

        .hero .book-hero-content h1 {
            color: var(--mg-navy);
            font-size: 54px;
            line-height: 1.08;
            font-weight: 750;
            letter-spacing: -0.045em;
            margin-bottom: 22px;
        }

        .hero .book-hero-content .book-subtitle {
            color: #4c6580;
            font-size: 20px;
            line-height: 1.45;
            font-weight: 400;
            margin-bottom: 24px;
        }

        .hero .book-hero-content .author {
            margin-bottom: 25px;
        }

            .hero .book-hero-content .author span {
                color: var(--mg-muted);
            }

            .hero .book-hero-content .author h3 {
                color: var(--mg-navy);
                font-size: 17px;
                font-weight: 650;
            }

        .hero .book-hero-content .book-description {
            color: #374151;
            font-size: 16px;
            line-height: 1.7;
            max-width: 590px;
            margin-bottom: 34px;
        }


        /* ============================================================
   HERO BUTTONS
   ============================================================ */

        .hero .book-hero-content .hero-cta {
            gap: 12px;
        }

            .hero .book-hero-content .hero-cta .btn-primary {
                background: var(--mg-blue);
                border: 1px solid var(--mg-blue);
                color: #ffffff;
                padding: 12px 25px;
                border-radius: 9px;
                font-weight: 600;
                box-shadow: 0 4px 12px rgba(37, 99, 154, 0.18);
            }

                .hero .book-hero-content .hero-cta .btn-primary:hover {
                    background: var(--mg-blue-dark);
                    border-color: var(--mg-blue-dark);
                    transform: translateY(-2px);
                    box-shadow: 0 7px 18px rgba(37, 99, 154, 0.22);
                }

            .hero .book-hero-content .hero-cta .btn-outline {
                background: #ffffff;
                border: 1px solid #b9c7d5;
                color: var(--mg-navy);
                padding: 12px 25px;
                border-radius: 9px;
                font-weight: 600;
            }

                .hero .book-hero-content .hero-cta .btn-outline:hover {
                    background: var(--mg-soft-blue);
                    border-color: var(--mg-blue);
                    color: var(--mg-blue);
                    transform: translateY(-2px);
                }


    /* ============================================================
   BOOK COVER
   ============================================================ */

    .hero .book-cover {
        max-width: 390px;
        transform: none;
        transition: transform 0.3s ease;
    }

        .hero .book-cover img {
            display: block;
            width: 100%;
            box-shadow: 0 25px 55px rgba(15, 23, 42, 0.18), 0 5px 15px rgba(15, 23, 42, 0.10);
        }

        .hero .book-cover .book-shadow {
            display: none;
        }

        .hero .book-cover:hover {
            transform: translateY(-5px);
        }

            .hero .book-cover:hover img {
                filter: none;
            }


/* ============================================================
   CARDS
   ============================================================ */

.features .feature-card,
.features .feature-chapters,
.testimonials .critic-reviews .critic-review,
.testimonials .testimonials-container .testimonial-item,
.testimonials .overall-rating,
.purchase .book-format-card,
.purchase .bundle-offer,
.contact .contact-card,
.contact .contact-form-wrapper,
.related-books .related-book-card,
.related-books .coming-soon {
    background: #ffffff;
    border: 1px solid var(--mg-border);
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03), 0 8px 24px rgba(15, 23, 42, 0.05);
}


    /* Reduce the exaggerated BootstrapMade hover movement */

    .features .feature-card:hover,
    .testimonials .critic-reviews .critic-review:hover,
    .purchase .book-format-card:hover,
    .related-books .related-book-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04), 0 12px 30px rgba(15, 23, 42, 0.08);
    }


    /* ============================================================
   FEATURE ICONS
   ============================================================ */

    .features .feature-card .feature-icon {
        background: var(--mg-soft-blue);
        border-radius: 12px;
    }

        .features .feature-card .feature-icon i {
            color: var(--mg-blue);
        }

    .features .feature-card::before {
        background: var(--mg-blue);
    }


    /* ============================================================
   CHAPTERS
   ============================================================ */

    .features .feature-chapters .chapters-grid .chapter-item {
        background: #f8fafc;
        border: 1px solid var(--mg-border);
        border-radius: 10px;
    }

        .features .feature-chapters .chapters-grid .chapter-item:hover {
            border-color: #b7cade;
            background: #ffffff;
            transform: translateY(-3px);
        }

        .features .feature-chapters .chapters-grid .chapter-item .chapter-number {
            color: var(--mg-blue);
        }


    /* ============================================================
   GENERIC CALL-TO-ACTION BUTTONS
   ============================================================ */

    .about .about-book-content .about-book-cta,
    .purchase .book-format-card .buy-options .btn-purchase,
    .purchase .bundle-offer .btn-bundle,
    .contact .contact-form-wrapper .php-email-form button {
        background: var(--mg-blue);
        color: #ffffff;
        border-radius: 9px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(37, 99, 154, 0.15);
    }

        .about .about-book-content .about-book-cta:hover,
        .purchase .book-format-card .buy-options .btn-purchase:hover,
        .purchase .bundle-offer .btn-bundle:hover,
        .contact .contact-form-wrapper .php-email-form button:hover {
            background: var(--mg-blue-dark);
            transform: translateY(-2px);
        }


    /* ============================================================
   FORMS
   ============================================================ */

    .contact .contact-form-wrapper .php-email-form .form-group .form-control {
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 11px 14px;
        background: #ffffff;
    }

        .contact .contact-form-wrapper .php-email-form .form-group .form-control:focus {
            border-color: var(--mg-blue);
            box-shadow: 0 0 0 3px rgba(37, 99, 154, 0.10);
        }


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 992px) {

    .hero {
        padding: 70px 0;
    }

        .hero .book-hero-content h1 {
            font-size: 42px;
        }
}

@media (max-width: 768px) {

    section,
    .section {
        padding: 20px 0;
    }

    .hero {
        padding: 55px 0 65px;
    }

        .hero .book-hero-content h1 {
            font-size: 36px;
            line-height: 1.12;
        }

        .hero .book-hero-content .book-subtitle {
            font-size: 18px;
        }

        .hero .book-cover {
            max-width: 310px;
        }

    .section-title h2 {
        font-size: 30px;
    }
}