@import url("./fonts.css");

/* @theme {
    --font-sans: "Rakuten Sans", sans-serif;
    --font-condensed: "Rakuten Condensed", sans-serif;
}

@utility container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
} */
 
:root {
    --font-sans: "Rakuten Sans", sans-serif;
    --font-condensed: "Rakuten Condensed", sans-serif;
}

.container {
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.font-sans {
    font-family: var(--font-sans);
}
.font-condensed {
    font-family: var(--font-condensed);
}

:root {
    font-family: var(--font-sans);
    line-height: 1.5;
    font-weight: 400;
    font-size: 16px;

    --navbar-height: 75px;
    --container-padding: 30px;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* @media screen and (min-width: 640px) {

} */

@media screen and (min-width: 640px) and (max-width: 767px) {
    :root {
        --container-padding: 75px;
    }
}

@media screen and (min-width: 768px) {
    :root {
        --container-padding: 45px;
    }
}

@media screen and (min-width: 1280px) {
    :root {
        --navbar-height: 105px;
    }
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    background-color: var(--rpc25-background-color);
}

.link {
    color: rgb(13, 110, 253);
    text-decoration: underline;
}

b {
    font-weight: 900;
    font-family: var(--font-sans);
}

em {
    font-family: var(--font-sans);
}


.dropdown { position: relative; display: inline-block; }
.dropdown-btn { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.dropdown-content { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: white; border: 1px solid #e0e0e0; border-radius: 6px; min-width: 140px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: none; z-index: 1000; }
.dropdown.active .dropdown-content { display: block; }
.dropdown-content a { display: block; padding: 10px 16px; color: #06174C; text-decoration: none;  border-bottom: 1px solid #f0f0f0; transition: background 0.2s; }
nav a:not(.nav-register-btn):hover, .dropdown-btn svg:hover { 
    /* background: #f5f5f5; 
    padding: 8px 12px; 
    border-radius: 4px;  */
    color: #FF3657 !important; 
    transition: all 0.2s; 
} 

/* ============================================================
   CSS Animations — triggered by JS adding .animate-active class
   ============================================================ */

/* Initial hidden states */
.animate-fade-in {
    opacity: 0;
}

.animate-slide-fade-in {
    opacity: 0;
    transform: translateX(-20px);
}

/* Header slide-down: starts off-screen, animates to normal position */
header.header {
    transform: translateY(-20px);
}

/* Keyframes */
@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes slideFadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes headerSlideDown {
    to { transform: translateY(0); }
}

/* Triggered states */
.animate-fade-in.animate-active {
    animation: fadeIn 0.75s ease-in-out forwards;
}

.animate-slide-fade-in.animate-active {
    animation: slideFadeIn 0.5s ease-in-out forwards;
}

header.header.animate-active {
    animation: headerSlideDown 0.5s ease-in-out forwards;
}

/* Animation delay utilities (used with animate-delay-100, etc.) */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }