<?php
/*
Template Name: Glossary Page
*/
get_header();
?>

<style>

/* =====================================================
   BASE STYLES
===================================================== */

html {
    scroll-behavior: smooth !important;
}

/* =====================================================
   ALPHABET NAV (ALL ORIGINAL VERSIONS)
===================================================== */

.alphabet-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.alphabet-nav a {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #000;
    font-size: 14px;
}

.alphabet-nav a:hover {
    background: #0d6efd;
    color: #fff;
}

/* Sticky versions */
.alphabet-nav {
    position: sticky;
    top: 120px;
    background: #fff;
    z-index: 99;
    padding: 10px 0;
}

.alphabet-nav {
    position: sticky;
    top: 130px;
    width: 100%;
    background: #fff;
    z-index: 999;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

/* duplicate links (same as original) */
.alphabet-nav a {
    display: inline-block;
    margin: 4px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #000;
    font-size: 14px;
}

.alphabet-nav a:hover {
    background: #0d6efd;
    color: #fff;
}

.alphabet-nav {
    flex-wrap: nowrap !important;
}

/* =====================================================
   SECTION + BLOG FIX
===================================================== */

.letter-section {
    margin-bottom: 50px;
}

.blog-listing-section {
    overflow: visible !important;
}

/* =====================================================
   GRID SYSTEM (ALL ORIGINAL)
===================================================== */

.grid-col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .grid-col-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* second grid version */
.grid-col-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

@media (max-width: 768px) {
    .grid-col-3 {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   CARD DESIGN (ALL ORIGINAL)
===================================================== */

.glossary-card {
    display: block;
    height: auto;
}

.glossary-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.glossary-card .blog-item-text {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.glossary-card p {
    flex-grow: 1;
}

.glossary-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 22px;
    transition: all 0.25s ease;
    height: 100%;
}

.glossary-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.glossary-card h6 a {
    color: #1a56db;
    text-decoration: underline !important;
}

.glossary-card h6 a:hover {
    text-decoration: underline;
}

.glossary-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.glossary-card {
    display: flex;
    flex-direction: column;
}

.glossary-card p {
    flex-grow: 1;
}

/* =====================================================
   HEADING
===================================================== */

.letter-section h2 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #1d2b2a;
    scroll-margin-top: 185px;
}

/* =====================================================
   DESKTOP A-Z
===================================================== */

@media (min-width: 769px) {

    .alphabet-nav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
    }

    .alphabet-nav a {
        flex: 1;
        text-align: center;
    }
}

/* perfect desktop */
@media (min-width: 769px) {

    .alphabet-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        gap: 8px;
        overflow: hidden;
    }

    .alphabet-nav a {
        flex: 0 0 auto !important;
        min-width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        padding: 0 !important;
        font-size: 13px;
        border: 1px solid #ddd;
        border-radius: 6px;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .alphabet-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        gap: 12px;
        padding: 10px 15px;
    }

    .alphabet-nav a {
        flex: 0 0 auto;
        display: inline-block;
        min-width: 32px;
        text-align: center;
    }

    .grid-col-3 {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .glossary-card {
        width: 100%;
        display: block !important;
        height: auto !important;
    }

    .letter-section h2 {
        scroll-margin-top: 200px;
    }
}

</style>


<!-- =========================
     PAGE CONTENT
========================= -->

<section class="blog-detail-section com-padding">
    <div class="container">

        <?php if (have_posts()): while (have_posts()): the_post(); ?>

            <h1 class="mb-3"><?php the_title(); ?></h1>

            <div class="content mb-5">
                <?php the_content(); ?>
            </div>

        <?php endwhile; endif; ?>

    </div>
</section>


<!-- =========================
     RECOMMENDED SECTION
========================= -->

<section class="recommended-section com-padding">
    <div class="container">

        <div class="flex-box justify-between align-center mb-4">
            <h3>Recommended for you</h3>
        </div>

        <div class="grid grid-col-4 grid-gap-3">

            <?php
            $current_id = get_the_ID();

            $args = array(
                'post_type' => 'glossary',
                'posts_per_page' => 4,
                'post__not_in' => array($current_id),
                'orderby' => 'rand'
            );

            $related = new WP_Query($args);

            if ($related->have_posts()):
                while ($related->have_posts()): $related->the_post();
            ?>

                <a href="<?php the_permalink(); ?>" class="recommended-card">

                    <div class="recommended-img">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/placeholder.webp" alt="">
                    </div>

                    <div class="recommended-text">
                        <span class="tag">Glossary</span>
                        <h6><?php the_title(); ?></h6>
                    </div>

                </a>

            <?php endwhile; endif; wp_reset_postdata(); ?>

        </div>

    </div>
</section>

<?php get_footer(); ?>