/* 
   MASJID ISLAMIC CENTER PADANG PANJANG 
   Premium Responsive Design System 
*/

/* 1. VARIABEL & RESET */
:root {
    --primary: #064e3b;
    --primary-light: #0f5132;
    --primary-dark: #022c22;
    --primary-glow: rgba(6, 78, 59, 0.15);
    --accent: #d97706;
    --accent-hover: #b45309;
    --accent-glow: rgba(217, 119, 6, 0.2);
    --bg-base: #fbfbf9;
    --bg-card: #ffffff;
    --text-main: #1c1917;
    --text-muted: #6b6661;
    --border-color: #e7e5e4;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-main);
    line-height: 1.6;
}

/* 2. HEADER */
header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
    color: white;
    padding: 40px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03) 0%, transparent 80%);
    pointer-events: none;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.mosque-icon {
    font-size: 45px;
    display: inline-block;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.3));
    animation: float 4s ease-in-out infinite;
}

header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

header .tagline {
    font-size: 14px;
    color: #e2e8f0;
    letter-spacing: 1px;
    font-weight: 300;
}

/* 3. NAVIGASI (NAVBAR) */
nav {
    background-color: var(--primary-dark);
    border-bottom: 3px solid var(--accent);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 10px;
}

nav a.nav-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 18px 24px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: var(--transition);
    display: inline-block;
}

nav a.nav-link:hover,
nav .dropdown:hover > a.nav-link {
    color: white;
    background-color: var(--primary);
}

/* Admin Button */
nav a.nav-admin-btn {
    background-color: var(--accent);
    color: white !important;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 15px;
    padding: 10px 18px !important;
}

nav a.nav-admin-btn:hover {
    background-color: var(--accent-hover) !important;
    transform: translateY(-1px);
}

/* Hamburger Menu Toggle */
.menu-toggle {
    display: none;
    text-align: right;
    padding-right: 20px;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--primary-dark);
    user-select: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.menu-toggle:hover {
    background-color: var(--primary);
}

/* 4. DROPDOWN MENU */
.dropdown {
    position: relative;
}

.dropdown-toggle::after {
    content: " ▾";
    font-size: 11px;
    opacity: 0.8;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    min-width: 200px;
    box-shadow: var(--shadow-hover);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    border-top: 3px solid var(--accent);
    overflow: hidden;
    animation: slideDown 0.2s ease-out forwards;
}

.dropdown-menu a {
    display: block;
    padding: 14px 20px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-color);
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background-color: #f5f5f4;
    color: var(--primary-light);
    padding-left: 24px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* 5. HERO SECTION */
.hero {
    width: 100%;
    height: 480px;
    background-image: linear-gradient(rgba(2, 44, 34, 0.45), rgba(2, 44, 34, 0.7)), url("gambar.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    position: relative;
    padding: 20px;
}

.hero h4 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 0.8s ease-out;
}

#clock-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 35px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    margin-top: 10px;
    animation: fadeInUp 1s ease-out;
}

#tanggal {
    font-size: 16px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 5px;
}

#jam {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    font-family: monospace;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* 6. LAYOUT CONTAINER */
main {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 40px auto;
    padding: 0 20px;
}

.container {
    background: var(--bg-card);
    padding: 40px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.container-slim {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* HOMEPAGE GRID */
.home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: -50px;
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) {
    .home-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .home-grid {
        grid-template-columns: 1.2fr 2fr 1fr;
    }
}

/* CARDS */
.glass-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-glow);
}

.card-title {
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 7. TYPOGRAPHY */
h2 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

.title-underline {
    width: 60px;
    height: 3px;
    background-color: var(--accent);
    margin: 10px auto 30px auto;
    border-radius: 2px;
}

p {
    margin-bottom: 15px;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
}

.lead {
    font-size: 17px;
    font-weight: 500;
    color: var(--primary-light);
    margin-bottom: 20px;
}

ul.misi {
    list-style: none;
    margin: 20px 0;
}

ul.misi li {
    padding: 12px 15px 12px 40px;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-size: 15px;
    font-weight: 500;
}

ul.misi li:last-child {
    border-bottom: none;
}

ul.misi li::before {
    content: "🕌";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

/* 8. TABEL DESIGN (PREMIUM) */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 15px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

th, td {
    padding: 16px;
    text-align: left;
    font-size: 14px;
}

th {
    background-color: var(--primary);
    color: white;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px;
}

td {
    background-color: white;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

tr:last-child td {
    border-bottom: none;
}

tr:nth-child(even) td {
    background-color: #fafaf9;
}

tr:hover td {
    background-color: #f0fdf4;
}

/* Center alignments for values if needed */
.text-center {
    text-align: center;
}

/* 9. WIDGET JADWAL SHOLAT HOME */
.sholat-widget-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sholat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    background-color: #fbfbf9;
    border-left: 4px solid var(--border-color);
    transition: var(--transition);
}

.sholat-item.active-sholat {
    background-color: #f0fdf4;
    border-left-color: var(--primary);
    box-shadow: 0 4px 6px -1px rgba(6, 78, 59, 0.05);
}

.sholat-item.active-sholat .sholat-name {
    color: var(--primary);
    font-weight: 700;
}

.sholat-item.active-sholat .sholat-time {
    color: var(--primary);
    font-weight: 700;
}

.sholat-name {
    font-weight: 600;
    color: var(--text-main);
}

.sholat-time {
    font-weight: 700;
    color: var(--accent-hover);
    font-family: monospace;
    font-size: 16px;
}

/* 10. KAS MASJID HOME WIDGET */
.kas-widget-card {
    text-align: center;
    padding: 25px 15px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: var(--radius-sm);
    border: 1px solid #bbf7d0;
}

.kas-widget-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-light);
    font-weight: 600;
    margin-bottom: 5px;
}

.kas-widget-balance {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-dark);
    font-family: monospace;
}

/* 11. FOOTER */
footer {
    background-color: var(--primary-dark);
    color: white;
    padding: 40px 20px 20px 20px;
    margin-top: auto;
    border-top: 5px solid var(--accent);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.footer-info p {
    color: #a8a29e;
    text-align: center;
    font-size: 13px;
    margin-bottom: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.footer-divider {
    border: 0;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 25px 0;
}

.footer-container .copyright {
    color: #78716c;
    font-size: 12px;
    text-align: center;
    margin-bottom: 0;
}

/* 12. ANIMATION KEYFRAMES */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 13. RESPONSIVE DESIGN */
/* Tablet & Small Desktop (768px) */
@media (max-width: 768px) {
    header h1 {
        font-size: 26px;
    }
    header .tagline {
        font-size: 13px;
    }
    .hero {
        height: 400px;
    }
    .hero h4 {
        font-size: 32px;
    }
    #jam {
        font-size: 40px;
    }
    nav {
        padding: 0;
    }
    .menu-toggle {
        display: block;
    }
    .nav-container {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 0;
    }
    .nav-container.active {
        display: flex;
        animation: slideDown 0.3s ease-out forwards;
    }
    nav a.nav-link {
        width: 100%;
        text-align: left;
        padding: 15px 20px;
        font-size: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .dropdown {
        width: 100%;
    }
    .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        border-top: none;
        background-color: rgba(255, 255, 255, 0.95);
        display: none; /* Let the user hover to open or use JS, but simple CSS hover works if clicked on mobile sometimes, better to keep hover or add active class. Actually hover works on mobile tap. */
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu a {
        padding: 12px 30px;
        border-bottom: 1px solid #e7e5e4;
    }
    .dropdown-menu a:hover {
        padding-left: 35px;
    }
    nav a.nav-admin-btn {
        margin: 15px 20px;
        width: auto;
        text-align: center;
        padding: 10px 15px !important;
    }
    .container {
        padding: 25px;
    }
    .home-grid {
        margin-top: -30px;
        gap: 20px;
    }
}

/* Mobile Devices (450px) */
@media (max-width: 450px) {
    header {
        padding: 30px 15px;
    }
    header h1 {
        font-size: 22px;
    }
    header .tagline {
        font-size: 11px;
    }
    .mosque-icon {
        font-size: 35px;
    }
    .hero {
        height: 300px;
        padding: 15px;
    }
    .hero h4 {
        font-size: 24px;
    }
    #jam {
        font-size: 30px;
    }
    #clock-container {
        padding: 10px 20px;
    }
    .nav-container {
        gap: 5px;
    }
    nav a.nav-link {
        padding: 6px 10px;
        font-size: 12px;
    }
    nav a.nav-admin-btn {
        padding: 5px 10px !important;
        font-size: 12px;
    }
    .container {
        padding: 15px;
    }
    .glass-card {
        padding: 20px;
    }
    h2 {
        font-size: 22px;
    }
    .title-underline {
        margin: 10px auto 20px auto;
    }
    p, ul.misi li {
        font-size: 14px;
    }
    th, td {
        padding: 10px;
        font-size: 12px;
    }
    .kas-widget-balance {
        font-size: 20px;
    }
    .footer-info h3 {
        font-size: 18px;
    }
    .footer-info p {
        font-size: 12px;
    }
}