/*
Theme Name: TIMS 2024
Theme URI: https://timsnavi.com
Author: TIMS Corp
Description: Custom WordPress theme for TIMS Corp based on React design prototype.
Version: 1.0.6
*/

/* 
 * NOTE: This theme relies on Tailwind CSS CDN.
 * Critical styles are defined here to prevent Flash of Unstyled Content (FOUC).
 */

body {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
}

/* --- Header Scroll Effect --- */
#masthead {
    transition: all 0.3s ease-in-out;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    padding-top: 1.25rem; /* py-5 equivalent */
    padding-bottom: 1.25rem;
}

#masthead.is-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
    padding-top: 0.75rem; /* py-3 equivalent */
    padding-bottom: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* --- Logo Color Switching --- */
/* Default (Hero) state: Text is White */
#masthead .logo-text {
    fill: #ffffff;
    transition: fill 0.3s ease;
}
/* Scrolled state: Text is Brand Blue */
#masthead.is-scrolled .logo-text {
    fill: #009add;
}

/* --- Mobile Menu Toggle Icon Color --- */
#mobile-menu-toggle {
    color: white;
}
#masthead.is-scrolled #mobile-menu-toggle {
    color: #1e293b; /* slate-800 */
}

/* --- Mobile Menu Critical CSS --- */
/* Ensures menu is hidden by default regardless of Tailwind loading speed */
#mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    visibility: hidden; /* Hide completely when closed */
}

#mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
}