/* ==========================
   Import Style Templates
========================== */

@import url('templates/colours.css');
@import url('templates/header.css');
@import url('templates/footer.css');
@import url('templates/landing.css');
@import url('templates/sidebar.css');
@import url('templates/auth.css');
@import url('templates/dashboard.css');
@import url('templates/explore.css');
@import url('templates/club.css');
@import url('templates/event.css');
@import url('templates/profile.css');
@import url('templates/card.css');
@import url('templates/user-clubs.css');
@import url('templates/user-events.css');
@import url('templates/add-event.css');
@import url("templates/comment.css");
@import url("templates/edit-event.css");
@import url('templates/admin-users.css');
@import url('templates/admin.css');
@import url('templates/notif.css');

.is-hidden {
    display: none !important;
}

/* =======================
   Font Styles
======================= */

@font-face {
  font-family: JosefinSans;
  src: url('fonts/JosefinSans-Regular.ttf');
}

@font-face {
  font-family: Cubao;
  src: url('fonts/Cubao_Regular.otf');
}

/* ==========================
   General Styles 
==========================  */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'JosefinSans', sans-serif;
    line-height: 1.6;
}

html, body {
    height: 100%;
}

body {
    background: var(--light-blue);
    color: var(--dark-blue);
    margin: 0;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.scroll-top-btn {
    position: fixed;
    bottom: 60px;
    right: 32px;

    width: clamp(44px, 7vw, 64px);
    height: clamp(44px, 7vw, 64px);

    background: var(--red);
    border-radius: 10px;
    border: 3px solid var(--cream);
    padding: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 9999;

    /* Start hidden */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;

    /* Smooth fade + slide */
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}

/* When visible */
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top-btn img {
    width: 70%;
    height: auto;
    display: block;
}

/* Hover effect*/
.scroll-top-btn.visible:hover {
    transform: translateY(-2px) scale(1.05);
}

/* On smaller screens, tuck it closer to the edges */
@media (max-width: 600px) {
    .scroll-top-btn {
        bottom: 18px;
        right: 18px;
    }
}

/* ==========================
   Responsive Design 
========================== */
@media (max-width: 1100px) {
    .container {
        flex-direction: column;
        text-align: center;
    }

    .nav-links {
        flex-direction: column;
        padding: 0;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .features {
        flex-direction: column;
    }

    .feature {
        margin: 20px 10px;
    }
}

@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section p {
        font-size: 1rem;
    }

    .btn {
        padding: 10px 20px;
    }

    .feature h2 {
        font-size: 1.5rem;
    }

    .feature p {
        font-size: 0.9rem;
    }
}