/* =========================================
   WNM Website - Base Styles
   Design Language: Deep-Sea Blue (#0A1C2E) & Vitality Green (#00D170)
   Typography: Inter (Sans-Serif)
========================================= */

:root {
    --color-primary: #0A1C2E;
    /* Deep-Sea Blue */
    --color-primary-light: #1A3654;
    --color-accent: #00D170;
    /* Vitality Green */
    --color-accent-hover: #10B981;
    --color-text-main: #333333;
    --color-text-muted: #666666;
    --color-text-light: #F8F9FA;
    --color-bg-light: #F8F9FA;
    --color-bg-white: #FFFFFF;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;

    --transition-fast: 0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 40px rgba(10, 28, 46, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-text-main);
    line-height: 1.6;
    background-color: var(--color-bg-white);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

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

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.bg-light {
    background-color: var(--color-bg-light);
}

.text-center {
    text-align: center;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-smooth);
}

.btn-primary {
    background-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 209, 112, 0.3);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 209, 112, 0.4);
    color: #fff;
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2);
}

/* Universal Center for Heroes */
section[class*="-hero"], section[class*="hero-"] {
    padding: 0 !important;
    margin: 0 !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

section[class*="-hero"] .container, section[class*="hero-"] .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100%;
}


section[class*="-hero"] h1, section[class*="hero-"] h1 {
    margin: 0 !important;
    padding: 0 !important;
}

/* Background Image Mapping */
.about-hero {
    background: linear-gradient(rgba(15,23,42,0.6), rgba(15,23,42,0.6)), url('../../images/bg_about.png') center/cover !important;
}
.official-hero {
    background: linear-gradient(rgba(15,23,42,0.7), rgba(15,23,42,0.7)), url('../../images/bg_community.png') center/cover !important;
}
.journal-hero, .j-hero {
    background: linear-gradient(rgba(15,23,42,0.7), rgba(15,23,42,0.7)), url('../../images/bg_journal.png') center/cover !important;
}
.page-hero, .events-hero {
    background: linear-gradient(rgba(15,23,42,0.6), rgba(15,23,42,0.6)), url('../../images/bg_events.png') center/cover !important;
}
.news-hero {
    background: linear-gradient(rgba(15,23,42,0.6), rgba(15,23,42,0.6)), url('../../images/bg_news.png') center/cover !important;
}
.education-hero {
    background: linear-gradient(rgba(15,23,42,0.6), rgba(15,23,42,0.6)), url('../../images/bg_education.png') center/cover !important;
}
.academic-hero {
    background: linear-gradient(rgba(15,23,42,0.6), rgba(15,23,42,0.6)), url('../../images/bg_academic.png') center/cover !important;
}
.wst-hero, .public-health-hero, .public-hero {
    background: linear-gradient(135deg, rgba(15,23,42,0.8), rgba(15,23,42,0.9)), url('../../images/hero_bg.png') center/cover !important;
}

/* Universal Pagination */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    background: var(--color-bg-white, #fff);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast, 0.2s ease);
}

.page-btn:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.page-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    pointer-events: none;
}

.page-btn[disabled], .page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg-light, #F8F9FA);
    color: var(--color-text-muted, #666);
}