/* =============================================
   GLOBAL STYLES - AoE4Labs
   ============================================= */

/* FORCE NAVBAR LOGO SIZE - HARD FIX */
nav img,
.navbar-brand img,
.logo-container img {
    height: 45px !important;       /* Fixed height */
    width: auto !important;        /* Maintain aspect ratio */
    max-height: 100% !important;   /* Prevent overflowing */
    object-fit: contain !important;
    display: block;
    padding: 0;
    margin: 0;
}

/* FIX CONTAINER ALIGNMENT */
nav a[href="index.html"],
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Navbar link consistent spacing */
nav .hidden.md\:flex {
    gap: 1rem !important;
}

nav .hidden.md\:flex a {
    white-space: nowrap !important;
}


nav .max-w-7xl {
    padding-left: 1.5rem !important;
}

/* =============================================
   MOBILE OVERFLOW & SCROLL FIXES (2026-01-07)
   ============================================= */

/* 1. Global Safety Net: Prevent horizontal scrolling on the root */
html, body {
    color-scheme: dark;            /* FORCE DARK SCROLLBARS & BROWSER UI */
    overflow-x: hidden !important; /* Cut off anything overflowing horizontally */
    max-width: 100vw !important;   /* Strict limit to viewport width */
    margin: 0;
    padding: 0;
}

/* 2. Universal Box Sizing */
* {
    box-sizing: border-box; /* Ensure padding doesn't add to width */
}

/* 3. Main Container Constraints */
.container, .main-wrapper, #app, main {
    width: 100%;
    max-width: 100%;
    padding-left: 10px;  /* Small safe padding for mobile */
    padding-right: 10px;
    margin: 0 auto;
}

/* 4. Navbar / Header Fix */
header, .navbar, nav {
    width: 100%;
    max-width: 100vw;
    /* display: flex;  -- CAUTION: Changing display might break existing flex layouts. keeping width constraints mainly. */
    /* justify-content: space-between; */
    /* align-items: center; */
    /* padding: 10px 15px; */ 
}

/* 5. Card Responsiveness */
.card, .panel, .civ-bonuses, .villager-production, .feature-card, .glass-card {
    width: 100%;      /* Make them fluid */
    max-width: 100%;  /* Never exceed parent */
    min-width: 0;     /* Allow shrinking in flex containers */
}

/* 6. Title Text Resizing */
h1, h2, .main-title {
    word-wrap: break-word; 
    /* font-size: clamp(1.5rem, 4vw, 2.5rem); -- Disabled to prevent overriding desktop sizes unknowingly, but keeping word-wrap */
}