/*
========================================
PESO Biñan - Main Stylesheet
Author: PESO Biñan
Version: 1.0
========================================
*/

/*---------------------------------------
   TABLE OF CONTENTS
-----------------------------------------
1. ROOT VARIABLES
2. GLOBAL STYLES
3. NAVBAR
4. SYSTEM STATUS BAR
5. HERO SECTION
6. CALENDAR STYLES
7. FUNCTIONS WRAPPER
8. STATS SECTION
9. ABOUT PESO SECTION
10. PROGRAMS SECTION
11. AWARDS SECTION
12. PRE-REGISTRATION SECTION
13. LOGIN OPTIONS SECTION
14. FOOTER
15. ANIMATIONS
16. RESPONSIVE DESIGN
---------------------------------------*/

/*---------------------------------------
   1. ROOT VARIABLES
---------------------------------------*/
:root {
    --primary-color: #03dbfc;
    --secondary-color: #0066cc;
    --dark-color: #1a2b3c;
    --light-color: #f8f9fa;
    --accent-color: #ff6b35;
    
    /* Gradients */
    --gradient-blue: linear-gradient(135deg, #03dbfc 0%, #0066cc 100%);
    --gradient-dark: linear-gradient(135deg, #1a2b3c 0%, #2c3e50 100%);
    --gradient-orange: linear-gradient(135deg, #ff6b35 0%, #ff8e53 100%);
    --gradient-gold: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
    --gradient-silver: linear-gradient(135deg, #e5e7eb 0%, #6b7280 100%);
    --gradient-bronze: linear-gradient(135deg, #d97706 0%, #92400e 100%);
    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Status Colors */
    --success-color: #28a745;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --danger-color: #dc3545;
    
    /* Calendar Colors */
    --calendar-event-1: #4361ee;
    --calendar-event-2: #06d6a0;
    --calendar-event-3: #ef476f;
    --calendar-event-4: #ffd166;
    --calendar-event-5: #8338ec;
    --calendar-event-6: #fb5607;
    
    /* Spacing */
    --section-padding: 100px;
    --section-padding-mobile: 60px;
    
    /* Border Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    --border-radius-circle: 50%;
    
    /* Box Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    /* Transitions */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.6s ease;
    
    /* Z-index layers */
    --z-navbar: 1000;
    --z-modal: 1050;
    --z-tooltip: 1100;
}

/*---------------------------------------
   2. GLOBAL STYLES
---------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: var(--dark-color);
    overflow-x: hidden;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

a {
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Section Titles */
.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--dark-color);
}

.section-title h2 span {
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Buttons */
.btn-primary-custom {
    background: var(--gradient-blue);
    color: white;
    border: none;
    padding: 14px 35px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(3, 219, 252, 0.2);
    cursor: pointer;
}

.btn-primary-custom:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(3, 219, 252, 0.3);
    color: white;
}

.btn-secondary-custom {
    background: white;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    padding: 14px 35px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-secondary-custom:hover {
    background: var(--secondary-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.15);
}

/*---------------------------------------
   3. NAVBAR
---------------------------------------*/
.navbar-custom {
    background: white;
    box-shadow: var(--shadow-sm);
    padding: 10px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-navbar);
    transition: var(--transition-normal);
}

.navbar-custom.scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.navbar-brand-container {
    display: flex;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-image {
    height: 60px;
    width: auto;
    object-fit: contain;
    transition: var(--transition-normal);
}

.navbar-custom.scrolled .logo-image {
    height: 50px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-main-text {
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--secondary-color);
    letter-spacing: 0.5px;
    transition: var(--transition-normal);
}

.navbar-custom.scrolled .logo-main-text {
    font-size: 1.6rem;
}

.logo-sub-text {
    font-size: 0.8rem;
    color: var(--dark-color);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.logo-sub-text-2 {
    font-size: 0.65rem;
    color: #666;
    font-weight: 500;
}

.nav-link {
    font-weight: 500;
    color: var(--dark-color);
    margin: 0 10px;
    transition: var(--transition-fast);
    font-size: 1rem;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link.active {
    color: var(--primary-color);
    font-weight: 600;
}

.login-btn {
    background: var(--gradient-blue);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: var(--transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(3, 219, 252, 0.2);
    color: white;
}

/* User Status */
.user-status {
    display: inline-flex;
    align-items: center;
    background: rgba(3, 219, 252, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-left: 15px;
}

.user-status i {
    margin-right: 5px;
    color: var(--primary-color);
}

/* Navbar Toggler */
.navbar-toggler {
    border: none;
    background: transparent;
    color: var(--dark-color);
    font-size: 1.5rem;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

/*---------------------------------------
   4. SYSTEM STATUS BAR
---------------------------------------*/
.system-status {
    background: var(--dark-color);
    color: white;
    padding: 8px 0;
    font-size: 0.85rem;
    margin-top: 80px;
}

.status-item {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
}

.status-item i {
    margin-right: 5px;
    color: var(--primary-color);
}

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--border-radius-circle);
    margin-right: 8px;
}

.status-online {
    background-color: var(--success-color);
    animation: pulse 2s infinite;
}

/*---------------------------------------
   5. HERO SECTION
---------------------------------------*/
.hero-section {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e3f2fd 100%);
    padding: 50px 0 60px;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.03"><text y="50" x="50" font-size="80" text-anchor="middle" dominant-baseline="middle" fill="%230066cc">PESO</text></svg>') repeat;
    pointer-events: none;
}

.hero-tagline {
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
    background: rgba(3, 219, 252, 0.1);
    padding: 10px 30px;
    border-radius: var(--border-radius-xl);
    border-left: 4px solid var(--primary-color);
}

.hero-quote {
    background: var(--gradient-orange);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    display: inline-block;
    margin: 20px 0 30px;
    box-shadow: 0 10px 25px rgba(255, 107, 53, 0.3);
    font-size: 1.4rem;
    text-align: center;
    border: 2px solid white;
}

.hero-quote small {
    font-size: 1rem;
    display: block;
    font-weight: 400;
    margin-top: 5px;
}

/* status-bar-fix.css - Add this to ensure no gap */

/* Force remove any spacing */
.navbar-custom {
    margin-bottom: 0 !important;
    padding-bottom: 0.8rem !important;
}

.system-status {
    margin-top: -2px !important; /* Negative margin to pull it up */
    position: relative;
    z-index: 99;
}

/* Fix for any Bootstrap conflicts */
.navbar + .system-status {
    margin-top: -1px !important;
}

/* Ensure container doesn't add spacing */
.navbar-custom .container,
.system-status .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Smooth transition between nav and status bar */
.navbar-custom,
.system-status {
    transition: all 0.3s ease;
}

/* When navbar scrolls, keep status bar attached */
.navbar-custom.scrolled + .system-status {
    margin-top: -1px !important;
}