/* style.css */

        /* --- PAGE-SPECIFIC LAYOUT --- */
  /*  <!---    body { 
            line-height: 1.6; 
            color: #1a1a1a; 
            margin: 0; 
            padding: 0; 
            background-color: #FFFFFF; 
        }

        .content-wrapper { 
            max-width: 1100px; 
            margin: 0 auto; 
            padding: 20px; 
        }   */

		.form-label {
            font-family: Arial, sans-serif;
            font-weight: bold;
            font-size: 14px;
        }
		
        /* --- FEATURE ROWS --- */
        .feature-row { 
            display: flex; 
            align-items: center; 
            margin-bottom: 100px; 
            gap: 50px; 
        }
        
        .feature-text { flex: 0 0 65%; } 
        .feature-text h3 { margin-top: 0; }

        .feature-thumb-container { 
            flex: 0 0 320px; 
            height: 210px; 
        }
        
        .feature-image-placeholder {
            width: 100%; 
            height: 100%; 
            background: #ffffff; 
            border: 2px solid #000;
            cursor: pointer; 
            position: relative; 
            overflow: hidden; 
            display: flex;
            transition: transform 0.3s ease;
        }

        .feature-image-placeholder img { 
            width: 100%; 
            height: 100%; 
            object-fit: contain; 
        }

        .feature-image-placeholder:hover { 
            transform: scale(1.03); 
        }

        /* --- CLICK TO VIEW BADGE --- */
        .click-hint {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            font-family: 'Arial Black', sans-serif;
            font-size: 10px;
            text-transform: uppercase;
            color: #000;
            padding: 6px 0;
            text-align: center;
            z-index: 5;
            border-bottom: 2px solid;
            border-image-slice: 1;
            border-image-source: linear-gradient(to right, #009246 33.3%, #ffffff 33.3%, #ffffff 66.6%, #ce2b37 66.6%);
        }

        /* --- FULLSCREEN WHITE MODAL --- */
        #floatWindow {
            display: none; 
            position: fixed; 
            z-index: 9999; 
            left: 0; 
            top: 0;
            width: 100vw; 
            height: 100vh; 
            background-color: #ffffff; 
            align-items: center; 
            justify-content: center;
            overflow: hidden;
            cursor: pointer;
        }

        .float-content {
            position: relative; 
            width: 95%; 
            max-width: 1200px; 
            display: flex; 
            justify-content: center; 
            align-items: center;
        }

        .float-content img {
            width: 100%; 
            height: auto; 
            max-height: 90vh;
            display: block; 
            object-fit: contain; 
            border: 1px solid #000; 
            box-shadow: 0 5px 25px rgba(0,0,0,0.1);
        }

        /* --- RESPONSIVE LOGIC --- */
        @media screen and (max-width: 1024px) {
            .feature-row { flex-direction: column !important; text-align: center; gap: 30px; }
            .feature-thumb-container { width: 100%; max-width: 320px; height: auto; }
        }

        @media (min-width: 768px) { 
            .feature-row:nth-child(even) { flex-direction: row-reverse; } 
            /* Tricolore Shadows for alternating rows */
            .feature-row:nth-child(odd) .feature-image-placeholder { box-shadow: 15px 15px 0px #009246; }
            .feature-row:nth-child(even) .feature-image-placeholder { box-shadow: -15px 15px 0px #ce2b37; }
        }



/* ============================================================
   1. GLOBAL DEFAULTS & TYPOGRAPHY
   (Applies to every page)
   ============================================================ */
body { 
	font-family: Arial, sans-serif; 
	margin: 0; 
	overflow-x: hidden; 
	}

.header-main {
	font-family: 'Arial Black', Gadget, sans-serif !important;	
	font-size: 24px !important;
	text-transform: uppercase !important;
	text-align: center !important;
	margin-top: 20px !important;
	margin-bottom: 5px !important;
	color: #000000 !important;
	line-height: 1.2 !important;
	}
        
.header-sub {
	font-family: Arial, sans-serif !important;
	font-size: 18px !important;
	font-weight: bold !important;
	text-align: center !important;
	margin-bottom: 30px !important;
	color: #333333 !important;
    }
		
h1, h2, h3 {
	color: #333; 
	} /* Global Heading Styles */
	
footer { text-align: center; padding: 60px 40px; color: #888; border-top: 1px solid #eee; }

.page-container {
            max-width: 1100px;
            margin: 20px auto !important; /* Centers the table */
            padding: 0 20px;
            background: #ffffff;
            font-family: Arial, sans-serif;
            box-sizing: border-box;
        }

/* ============================================================
   2. NAVIGATION BAR STYLES
   (The code we worked on earlier)
   ============================================================ */
#nav-bar-outer {
    width: 100%;
    background: #ffffff;
    border-bottom: 2px solid #000000;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9999;
}

#nav-bar-inner {
    display: flex;
    flex-grow: 1;
    gap: 8px;
    margin-left: 20px;
    position: relative;
    overflow: visible; 
}

/* --- THEME RESTORATION (TRICOLORE) --- */
.nav-btn-group { 
    position: relative; 
    display: inline-block; 
    flex-shrink: 0; 
}

.tri-border-wrap {
    display: inline-block;
    padding: 1px;
    background: linear-gradient(to right, #009246 33.3%, #ffffff 33.3%, #ffffff 66.6%, #ce2b37 66.6%);
    border: 1px solid #000000;
}

.tri-inner-box { 
    background: #ffffff; 
    border: 1px solid #000000; 
}

.nav-anchor {
    display: block;
    padding: 6px 12px;
    font-family: 'Arial Black', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
}

.arrow-down {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 8px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #000000;
}

/* --- SUB-MENU (TRANSPARENT & BORDERLESS) --- */
/* --- SUB-MENU (SOLID BACKGROUND & BORDER) --- */
.sub-menu-layer {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* Updated styles below */
    background: #ffffff; 
    border: 1px solid #000000;
    /* -------------------- */
    padding: 10px 0; 
    z-index: 10000;
    min-width: 180px;
}

.sub-menu-item { 
    display: block; 
    margin-bottom: 5px; 
}

/* Visibility */
.nav-btn-group:hover > .sub-menu-layer,
.nav-btn-group.active > .sub-menu-layer { 
    display: block; 
}

/* Fix for items inside 'More' menu */
/* --- 1. THE MORE LIST (LEVEL 1) --- */
#more-layer {
    overflow: visible !important;
    padding: 10px;
}

/* Maintain spacing between buttons in the More list */
#more-layer .nav-btn-group {
    display: block;
    width: 100%;
    /* Reduced to 8px to match the grandchild menu spacing */
    margin-bottom: 8px !important; 
}

/* Remove margin from the very last item in the More list */
#more-layer .nav-btn-group:last-child {
    margin-bottom: 0 !important;
}

/* --- 2. THE SIDE-POP SUB-MENU (LEVEL 2) --- */
#more-layer .nav-btn-group .sub-menu-layer {
    top: -2px !important;
    left: auto !important;
    right: 100% !important;
    margin-right: 2px; /* Tight gap to the left of parent */
    
    /* Alignment */
    display: none;
    flex-direction: column;
    align-items: flex-end; /* Right-justifies the buttons inside */
}


/* Force display when active/hovered */
#more-layer .nav-btn-group:hover > .sub-menu-layer,
#more-layer .nav-btn-group.active > .sub-menu-layer {
    display: flex !important; /* Changed to flex to honor align-items */
}

/* --- 3. THE BUTTONS INSIDE THE SUB-MENU --- */
#more-layer .sub-menu-layer .sub-menu-item {
    display: block;
    width: max-content;
    margin-bottom: 8px; /* Vertical spacing between sub-menu buttons */
}

#more-layer .sub-menu-layer .sub-menu-item:last-child {
    margin-bottom: 0;
}

/* Add padding to the right side of the text inside the side-popping menus */
#more-layer .sub-menu-layer .nav-anchor {
    text-align: right;
    width: 100%;
    /* 15px padding on the right to move text away from the border */
    padding-right: 15px !important; 
    padding-left: 10px;
    box-sizing: border-box; /* Ensures padding doesn't increase the total width */
}

/* Ensure the tricolore box allows the anchor to fill the space */
#more-layer .sub-menu-layer .tri-inner-box {
    display: flex;
    justify-content: flex-end;
}
/* ============================================================
   3. REUSABLE COMPONENTS (Buttons, Cards, etc.)
   (Theme your page buttons here)
   ============================================================ */
.btn-primary { 
    background-color: #008C45; /* Italian Green */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

/* ============================================================
   4. PAGE-SPECIFIC LAYOUTS
   (Unique code for Dashboard, Quiz, etc.)
   ============================================================ */
#dashboard-grid { display: grid; gap: 20px; }