/* ============================================
   FLEX BOX SHIPPING - Shared Styles
   Styles common across all pages
   ============================================ */

/* === Base & Typography === */
:lang(en) body { font-family: 'Outfit', 'Plus Jakarta Sans', 'Figtree', 'Geist', sans-serif; font-weight: 300; }
:lang(zh) body { font-family: 'Outfit', 'Plus Jakarta Sans', 'Figtree', 'Geist', sans-serif; font-weight: 300; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
.font-medium { font-weight: 400; }
.font-semibold, .font-bold { font-weight: 500; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* === Scroll Animations === */
.animated-element { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.animated-element.is-visible { opacity: 1; transform: translateY(0); }

/* === Page Load Animation (new visual polish) === */
main { animation: pageIn 0.4s ease-out; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* === Nav Link Styles === */
.nav-link { position: relative; padding-bottom: 4px; display: block; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: #1d4ed8; transition: width 0.3s ease; }
.nav-link:hover::after { width: 100%; }

/* Active nav link */
.nav-link.active { color: #2069ab; }
.nav-link.active::after { width: 100%; background-color: #2069ab; }

/* === Header Scroll Effect === */
#main-header { transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
#main-header:not(.scrolled) { background-color: rgba(0, 0, 0, 0.2); }
#main-header:not(.scrolled) .nav-link,
#main-header:not(.scrolled) .header-title,
#main-header:not(.scrolled) #mobile-menu-button { color: #fff; }
#main-header:not(.scrolled) .nav-link::after { background-color: #fff; }
#main-header:not(.scrolled) #lang-switcher {
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    font-weight: 600;
}
#main-header:not(.scrolled) #lang-switcher span { color: rgba(255, 255, 255, 0.55) !important; font-weight: 400; }
#main-header:not(.scrolled) #lang-switcher span.font-semibold { color: #fff !important; font-weight: 600; }
#main-header:not(.scrolled) #lang-switcher:hover { background-color: rgba(0, 0, 0, 0.8); }
#main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
#main-header.scrolled .nav-link,
#main-header.scrolled .header-title,
#main-header.scrolled #mobile-menu-button { color: #374151; }
#main-header.scrolled .nav-link:hover { color: #1d4ed8; }

/* For sub-pages that start with white header */
#main-header.initially-scrolled { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
#main-header.initially-scrolled .nav-link,
#main-header.initially-scrolled .header-title,
#main-header.initially-scrolled #mobile-menu-button { color: #374151; }

/* === Floating Contact Bar === */
#floating-contact {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
#floating-contact.visible-floating { transform: translateY(0); }
#floating-contact.hidden-floating { transform: translateY(100%); }

/* === Responsive Nav Font Size === */
@media (min-width: 768px) {
    .header-title { font-size: 1.125rem; }
    .nav-link { font-size: 1.125rem; }
}

/* === Utilities === */
p.p-justify { text-align: justify; }
.mobile-menu-none { margin: 0px 8px; }
@media (max-width: 480px) { .mobile-menu-none { display: none; } }

/* === Card Hover Effects === */
.milestone-card, .news-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.milestone-card:hover, .news-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); }

/* === Ship Modal === */
#ship-modal { transition: opacity 0.3s ease; }

/* === Header placeholder to prevent layout shift (sub-pages only) === */
body.is-subpage #header-placeholder { min-height: 64px; }

/* === Floating Contact responsive === */
@media (max-width: 768px) {
    #floating-contact .grid { grid-template-columns: 1fr; gap: 1rem; }
    #floating-contact p.text-lg { font-size: 1rem; }
}

/* === Navi alignment === */
.navi { place-items: center; }