/*
Theme Name:       WBTR 2025
Theme URI:        https://instagram.com/wbtrailrun
Author:           Reyog Runners
Author URI:       https://tiktok.com/@reyogrunners
Description:      Tema WordPress yang bersih, modern, dan cepat, dirancang khusus untuk event Waduk Bendo Trail Run 2025. Tema ini berfokus pada penyajian informasi yang jelas, akses pendaftaran yang mudah, dan merayakan satu dekade Reyog Runners.
Tags:             one-column, custom-logo, custom-menu, full-width-template, event, running, sport, accessibility-ready, responsive-layout
Version:          1.0.0
Requires at least: 6.0
Tested up to:     6.9
Requires PHP:     7.4
License:          GNU General Public License v2 or later
License URI:      https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:      wbtr

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/*
  1. Gunakan border-box sizing yang lebih intuitif.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Hapus margin default dari semua elemen.
*/
* {
  margin: 0;
}

/*
  3. Izinkan persentase tinggi (%) untuk berfungsi.
*/
html, body {
  height: 100%;
}

/*
  4. Perbaiki line-height di semua browser dan cegah penyesuaian font setelah perubahan orientasi.
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  5. Buat gambar, video, dan elemen media lainnya lebih mudah diatur.
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  6. Hapus gaya default dari elemen form.
*/
input, button, textarea, select {
  font: inherit;
}

/*
  7. Hindari teks meluap (text overflow).
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
  8. Buat root stacking context. Ini adalah praktik yang baik untuk animasi dan z-index.
*/
#root, #__next {
  isolation: isolate;
}

/* Tambahan: Hapus gaya daftar default */
ul, ol {
  padding: 0;
  list-style: none;
}

/* Tambahan: Hapus dekorasi teks dari link */
a {
  text-decoration: none;
  color: inherit;
}




/* --- Global Styles & Variables --- */
:root {
    --primary-color: #ff0149;
    --secondary-color-5k: #76a300;
    --dark-color: #000000;
    --light-gray: #e5e7e9;
    --white-color: #ffffff;
    --font-family: 'Poppins', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    background-color: var(--white-color);
    color: #333;
	background-image: url('https://wbtr.run/wp-content/uploads/2025/09/bg-body.avif');
	background-size: contain;
}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 4rem 2rem;
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark-color);
    text-transform: uppercase;
}

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

ul {
    list-style: none;
}

/* --- Header & Navigation --- */
header {
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-logo img {
    height: 50px;
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    font-weight: 600;
    color: var(--dark-color);
    transition: color 0.3s;
}

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

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--dark-color);
    transition: all 0.3s ease-in-out;
}

.add-height {
	display: block;
	width: 100%;
	height: 82px;
}


/* --- Hero Section --- */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
 /*   align-items: center; */
    text-align: center;
    color: var(--white-color);
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: none;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.hero-content {
	margin-top: 40px;
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-content .tagline {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 2rem;
}

.event-info { font-size: 1.2rem; margin-bottom: 40px; }
.event-info span { margin: 0 15px; }
.event-info i { color: var(--primary-color); margin-right: 8px; }

.countdown {
    margin: 2rem 0;
}

.countdown h2 {
    color: var(--white-color);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 400;
}

#countdown-timer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

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

.timer-unit span {
    font-size: 3rem;
    font-weight: 700;
}

.timer-unit label {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.cta-button {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 1rem 3rem;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: transform 0.3s, background-color 0.3s;
}

.cta-button:hover {
    background-color: #e70148;
    transform: scale(1.05);
}

/* --- About Section --- */
#about {
    text-align: center;
}
.about-content {
    max-width: 800px;
    margin: 0 auto 2rem auto;
}

.about-content > p:nth-child(1), .about-content > p:nth-child(2) {
		margin-bottom: 20px;
}

#about h3 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}
.objectives {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.objective-item {
    background: var(--light-gray);
    padding: 0.8rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
}

.objective-item i {
	color: #ff0149;
}


/* --- Categories Section --- */
#categories {
    background: #f9f9f9;
}
.category-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.category-card {
    background: var(--white-color);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s;
	color: #fff;
}
.category-card:hover {
    transform: translateY(-10px);
}

.category-card.cat-5k {
	background: #76a300;
}

.category-card.cat-15k {
	background: #ff0149;
}

.category-card h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.category-card.cat-5k h3 { color: #fff; }
.category-card.cat-15k h3 { color: #fff; }
.race-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    border-top: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
    padding: 1rem 0;
}
.category-card h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
	color: yellow;
}
.ticket-prices, .podium-prizes {
    padding-left: 0;
}
.ticket-prices li, .podium-prizes li {
    margin-bottom: 0.3rem;
}
.terms {
    text-align: center;
    margin-top: 1.5rem;
    font-style: italic;
    font-size: 0.9rem;
}


/* --- Facilities & Mandatory Gear --- */
.facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 1rem;
    text-align: center;
}
.facility-item {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 1.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.facility-item i{
	display: block;
	font-size: 40px;
	margin-bottom: 5px;
}
#mandatory-gear {
    background: #f9f9f9;
}
.gear-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.gear-list h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid;
    padding-bottom: 0.5rem;
	margin-top: 15px;
}
.gear-list ul {
    list-style-type: '✓ ';
    padding-left: 1.5rem;
}
.gear-list li { margin-bottom: 0.5rem; }
.gear-list.recommended h4 { border-color: var(--secondary-color-5k); }


.jersey {
	width: 100%;
}

.jersey-content {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}


.jersey-content img {
	display: inline-block;
	width: 100%;
	max-width: 255px;
	margin-right: 6px;
	margin-bottom: 10px;
}

/* --- Venue & Gallery Section --- */
#venue {
    background: #f9f9f9;
}
.venue-info {
    max-width: 800px;
    margin: 0 auto 2rem auto;
    text-align: center;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
.gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* --- Image Modal (Pop Up) --- */
.modal {
    display: none; /* Sembunyi secara default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}
.modal.active {
    display: flex; /* Tampilkan saat aktif */
}
.modal-content {
    margin: auto;
    display: block;
    max-width: 85%;
    max-height: 85vh;
    animation: zoomIn 0.3s ease;
}
@keyframes zoomIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
.close-button {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}
.close-button:hover {
    color: #bbb;
}


/* --- Rules & FAQ --- */
#rules .rules-container {
    max-width: 800px;
    margin: 0 auto;
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
}
#rules h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; margin-left: 20px; }
.link-to-rules { font-weight: bold; margin-top: 1.5rem; display: inline-block; }

.rules-container h3 {
	margin-top: 20px;
	margin-bottom: 10px;
}

.rules-container ul {
	list-style-type: disc;
	margin-left: 40px;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--light-gray);
}
.faq-question {
    width: 100%;
    text-align: left;
    padding: 1.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    transition: transform 0.3s;
}
.faq-item.active .faq-question::after {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.faq-answer p {
    padding: 0 0 1.5rem 0;
}


/* --- Rules Modal Styling --- */
.modal-dialog {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    position: relative;
    animation: slideIn 0.4s ease-out;
}

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

.modal-content-text {
    max-height: 75vh;
    overflow-y: auto;
    color: #333;
}

.modal-content-text h2 {
    margin-top: 0;
    margin-bottom: 2rem;
    color: var(--primary-color);
	font-size: 26px;
}

.modal-content-text h3 {
	margin-bottom: 10px;
	margin-top: 20px;
}

.modal-content-text h4 {
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 0.5rem;
	margin-left: 20px;
}

#pembebasan-tanggung-jawab h4 {
	margin-left: 0;
}

#pembebasan-tanggung-jawab p {
	margin-left: 20px;
}

.modal-content-text ul {
    list-style-type: disc;
    padding-left: 20px;
	margin-left: 20px;
}

.modal-content-text ul li {
    margin-bottom: 0.5rem;
}

.modal-content-text ol {
	 list-style-type: decimal !important; /* Memaksa tampilan menjadi angka (1, 2, 3) */
  padding-left: 20px;       /* Memberi ruang di kiri untuk angka */
	margin-top: 20px;
}

.close-button-rules {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button-rules:hover {
    color: var(--dark-color);
}

/* Custom scrollbar for modal content */
.modal-content-text::-webkit-scrollbar {
    width: 8px;
}
.modal-content-text::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.modal-content-text::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.modal-content-text::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* DOWNLOAD GPX */

.gpx-wrapper {
	width: 100%;
	box-sizing: border-box;
}

.gpx-content {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
	box-sizing: border-box;
	margin-top: 50px;
	margin-bottom: 50px;
}

a.download-gpx-5 {
	color: #fff;
	font-weight: bold;
	display: inline-block;
	padding: 10px 15px;
	background: #76a300;
	text-align: center;
	border-radius: 20px;
	margin-top: 25px;
	margin-right: 20px;
	font-size: 20px;
}

a.download-gpx-15 {
	color: #fff;
	font-weight: bold;
	display: inline-block;
	padding: 10px 15px;
	background: #ff0149;
	text-align: center;
	border-radius: 20px;
	margin-top: 25px;
	font-size: 20px;
}

a.download-gpx-5:hover {
	background: #5e8200;
}

a.download-gpx-15:hover {
	background: #cc013a;
}




/* --- Sponsors & Footer --- */
#sponsors {
    background: var(--light-gray);
    text-align: center;
}
.sponsor-slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.sponsor-slider a {
	margin: 0;
	padding: 0;
}

.sponsor-slider img {
    height: 70px;
    /* filter: grayscale(100%); */
    /* opacity: 0.7; */
    transition: filter 0.3s, opacity 0.3s;
}
.sponsor-slider img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

footer {
    background: var(--dark-color);
	background-image: url('https://wbtr.run/wp-content/uploads/2025/09/Frame_Bawah.avif');
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
    color: var(--white-color);
    padding-top: 3rem;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 0 2rem 3rem 2rem;
}
.footer-logo {
    height: 60px;
    margin-bottom: 1rem;
}
.footer-contact a, .footer-social a {
    color: var(--white-color);
    display: block;
    margin-bottom: 0.5rem;
}
.footer-contact a:hover, .footer-social a:hover {
    text-decoration: underline;
}

.footer-content h4 {
	margin-bottom: 15px;	
}

.footer-bottom {
    text-align: center;
    padding: 1rem;
    background: #000;
    font-size: 0.9rem;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 82px; /* Tinggi header */
        flex-direction: column;
        background-color: var(--white-color);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    }
    .nav-menu.active {
        left: 0;
    }
    .nav-item {
        padding: 1.5rem 0;
    }
    .hamburger {
        display: block;
    }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .hero-content h1 { font-size: 2.5rem; }
    .hero-content .tagline { font-size: 1.2rem; }
    .timer-unit span { font-size: 2rem; }
    
    .category-wrapper, .gear-columns {
        grid-template-columns: 1fr;
    }
	
	.event-info span {
		display: block;
	}
	
	.add-height: {
		height: 0;
	}
	
	.facility-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
	h2 {
		font-size: 34px;
	}
	
	.jersey-content img {
		max-width: 320px;
		margin-right: 0;
	}
	
	a.download-gpx-5 {
		margin-right: 0;
	}
}








/* === CSS KHUSUS UNTUK VENUE SLIDER === */
.venue-slider-wrapper {
    position: relative;
    width: 100%; /* Mengisi lebar kontainer induk */
    margin: 2rem auto; /* Memberi jarak atas/bawah */
    overflow: hidden;
    border-radius: 15px;
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); */
	max-width: 1100px;
}

.venue-slider-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.venue-slide {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 5px;
}

.venue-slide img {
    width: 100%;
    height: 350px; /* Sesuaikan tinggi jika perlu */
    display: block;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
    /* Jika ingin gambar bisa diklik untuk popup, tambahkan cursor pointer */
    /* cursor: pointer; */
}

.venue-slider-prev,
.venue-slider-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 10px 15px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    user-select: none;
    z-index: 10; /* Pastikan di atas gambar slider */
}

.venue-slider-next { right: 10px; }
.venue-slider-prev { left: 10px; }

.venue-slider-prev:hover,
.venue-slider-next:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* --- RESPONSIVE UNTUK SLIDER --- */
/* Mobile: 2 gambar per tampilan */
.venue-slide {
    width: 50%;
}

/* Desktop: 4 gambar per tampilan (cocok dengan @media (max-width: 768px) Anda) */
@media (min-width: 769px) {
    .venue-slide {
        width: 25%;
    }
	
	
    
}
}