:root { 
    --pghs-blue: #0033A0; 
    --pghs-gold: #FFC72C; 
    --pghs-white: #ffffff; 
    --bg-color: #f4f7fb; 
    --text-main: #333333; 
    --container-bg: #ffffff;
    --border-color: #e0e6ed;
    --input-bg: #ffffff;
    --input-text: #333333;
    --table-header-bg: #e6f0ff;
}

/* DARK MODE OVERRIDES */
[data-theme="dark"] {
    --pghs-blue: #6699ff; 
    --pghs-gold: #FFC72C; 
    --pghs-white: #121212; 
    --bg-color: #1a1a2e; 
    --text-main: #e0e0e0; 
    --container-bg: #2d2d3a;
    --border-color: #444455;
    --input-bg: #3d3d4a;
    --input-text: #ffffff;
    --table-header-bg: #222233;
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background: var(--bg-color); color: var(--text-main); transition: background-color 0.3s, color 0.3s; }
header { background: linear-gradient(135deg, #001133, #0033A0); color: #ffffff; padding: 2rem; text-align: center; border-bottom: 6px solid var(--pghs-gold); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
header h1 { margin: 0; font-size: 2.8rem; text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 8px rgba(0,0,0,0.3); }
.mascot-subtitle { color: var(--pghs-gold); font-weight: bold; font-size: 1.3rem; margin-top: 8px; letter-spacing: 1px; }

nav { background: var(--container-bg); padding: 15px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--border-color); }
nav a { color: var(--pghs-blue); margin: 0 10px; text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: all 0.3s ease; padding: 8px 12px; border-radius: 8px; vertical-align: middle; }
nav a:hover { background: rgba(0, 51, 160, 0.1); color: var(--pghs-gold); }
nav a.admin-link { color: #d32f2f; }

/* FIXING THE DARK HERO IMAGES: Opacity reduced from 0.7 to 0.25 */
.hero { background-size: cover; background-position: center; height: 400px; display: flex; align-items: center; justify-content: center; color: white; text-align: center; border-bottom: 5px solid var(--pghs-gold); position: relative; }
.hero::before { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,17,51,0.25); }
.hero-content { position: relative; z-index: 1; text-shadow: 2px 2px 8px rgba(0,0,0,0.8); }

.container { max-width: 1100px; margin: 40px auto; padding: 35px; background: var(--container-bg); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 1px solid var(--border-color); }
.notice-item { border-left: 6px solid var(--pghs-gold); padding: 25px; margin-bottom: 25px; background: var(--bg-color); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid var(--border-color); }
.notice-item h3 { margin-top: 0; color: var(--pghs-blue); }

.btn { padding: 12px 24px; background: #0033A0; color: white; border: none; font-weight: bold; cursor:pointer; border-radius: 8px; transition: all 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.2); text-decoration:none; display: inline-block; border: 1px solid transparent;}
.btn:hover { background: var(--pghs-gold); color: #001133; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(255,199,44,0.3); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"], select, textarea { 
    padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-family: inherit; transition: border 0.3s; 
    background: var(--input-bg); color: var(--input-text);
}
input:focus, textarea:focus, select:focus { border-color: var(--pghs-blue); outline: none; box-shadow: 0 0 0 3px rgba(0,51,160,0.1); }

table { width: 100%; border-collapse: collapse; margin-top: 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); background: var(--container-bg); border: 1px solid var(--border-color); }
th, td { padding: 15px; border-bottom: 1px solid var(--border-color); text-align: left; }
th { background: var(--table-header-bg); color: var(--pghs-blue); font-weight: bold; }

/* Utility Classes */
.privacy-box { background: rgba(255, 199, 44, 0.1); padding: 15px; border-left: 4px solid var(--pghs-gold); border-radius: 4px; font-size: 0.95rem; margin-bottom: 15px; }
.action-link { font-size: 0.85rem; font-weight: bold; text-decoration: none; padding: 4px 10px; border-radius: 4px; background: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-main); transition: 0.2s; display: inline-block;}
.action-link:hover { background: var(--border-color); }