/* ============================================
   PNU Conference — Landing Page Styles
   ============================================ */

:root {
    --primary: #006C6C;
    --primary-dark: #003838;
    /* Brighter accents (used for gradients, tags and highlights) so the page
       reads as vivid without moving the teal + gold brand colours themselves. */
    --primary-light: #00bcb0;
    --primary-glow: #14d9c4;
    --gold: #C5A55A;
    --gold-light: #f0d489;
    --text-body: #2c3e50;
    --text-muted: #6c7a89;
    --bg-light: #f8fafa;
    --radius: 16px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.14);
    --hero-bg: linear-gradient(160deg, #0a1c38 0%, #143868 45%, #1c4e8c 100%);
    --hero-title: white;
    --hero-text: rgba(255, 255, 255, 0.75);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Sarabun', 'Segoe UI', sans-serif;
    color: var(--text-body);
    margin: 0;
}

/* ===== NAVBAR — Two-tier ===== */
.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Base state is intentionally bare — every page now renders the white
       .landing-nav--solid bar below, which supplies background, border and
       shadow. */
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Pages without a hero banner behind the nav (everything except home):
   sticky instead of fixed so it reserves its own space in normal flow
   (no content hidden underneath it), and opaque immediately since there's
   no hero image for it to transparently float over. */
.landing-nav.landing-nav--solid {
    position: sticky;
    background: #ffffff;
    /* Gold hairline keeps the brand's second colour on an otherwise plain
       white bar and gives it a defined edge against the page. */
    border-bottom: 2px solid var(--gold, #C5A55A);
    box-shadow: 0 4px 18px rgba(15, 30, 55, 0.10);
}

.landing-nav.scrolled {
    background: #ffffff;
    /* Same gold hairline as the hero state, so the bar keeps one identity
       whether it is floating over the photo or sitting on white. */
    border-bottom: 2px solid var(--gold, #C5A55A);
    box-shadow: 0 4px 18px rgba(0, 56, 56, 0.10);
}

/* --solid pages (no hero) always render the same text/icon colors that
   .scrolled applies on the home page — otherwise nav text stays the
   hero-only white-on-transparent color and becomes invisible on the
   opaque white bar. Every ".landing-nav.scrolled X" rule below has a
   ".landing-nav--solid X" twin for exactly this reason. */

/* Row 1: Brand + Actions */
.nav-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 12px;
    transition: padding 0.35s ease;
}

/* Scrolled/solid stays a little tighter so the bar does not eat the screen
   once you are reading the page, but still taller than it used to be. */
.landing-nav.scrolled .nav-row-top,
.landing-nav--solid .nav-row-top {
    padding: 16px 16px 12px;
}

/* Nav bar gets extra horizontal room beyond Bootstrap's default .container
   max-width, since the 10 menu links need it to stay on one line down to
   smaller desktop/laptop widths — otherwise the last item wraps alone onto
   its own centered row (flex-wrap centers each line independently). */
.landing-nav > .container {
    max-width: 1300px;
}

/* Row 2: Nav links — centered */
.nav-row-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 16px 16px;
    transition: padding 0.35s ease;
    flex-wrap: wrap;
}

/* Breathing room on both sides of the link row: above it so the links are not
   crowded against the divider, below it so they do not sit on the gold edge.
   Kept as ONE rule — an identical selector used to be declared twice here and
   the later copy silently won, so edits to the first had no effect. */
.landing-nav.scrolled .nav-row-links,
.landing-nav--solid .nav-row-links {
    padding: 10px 16px 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Brand */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-short {
    font-size: 15px;
    font-weight: 700;
    color: white;
    transition: color 0.35s ease;
}

/* Ordinal prefix ("1st") — stays gold regardless of nav state (transparent
   hero or solid/scrolled), unlike the rest of the brand text. */
.brand-ordinal {
    color: var(--gold, #C5A55A);
}

.brand-sub {
    font-size: 11px;
    opacity: 0.65;
    color: white;
    transition: color 0.35s ease;
}

.landing-nav.scrolled .brand-short,
.landing-nav--solid .brand-short {
    color: var(--primary, #006C6C);
}

.landing-nav.scrolled .brand-sub,
.landing-nav--solid .brand-sub {
    color: #6b7280;
    opacity: 1;
}

/* Nav link items (Row 2) */
.nav-link-item {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
    font-weight: 500;
}

.nav-link-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.16);
}

/* Restrained gold accent for the current page — a thin underline reads more
   formal than a filled pill, while still using the brand's second colour. */
.nav-link-item.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 -2px 0 0 var(--gold, #C5A55A);
    font-weight: 600;
}

/* Scrolled — dark on white */
.landing-nav.scrolled .nav-link-item,
.landing-nav--solid .nav-link-item {
    color: #374151;
}

.landing-nav.scrolled .nav-link-item:hover,
.landing-nav--solid .nav-link-item:hover {
    color: var(--primary, #006C6C);
    background: rgba(0, 108, 108, 0.07);
}

.landing-nav.scrolled .nav-link-item.active,
.landing-nav--solid .nav-link-item.active {
    color: var(--primary, #006C6C);
    background: rgba(0, 108, 108, 0.08);
    /* Same gold underline as the hero state, so the current page is marked
       the same way on both bars. */
    box-shadow: inset 0 -2px 0 0 var(--gold, #C5A55A);
    font-weight: 600;
}

/* Actions (Row 1 right side) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Language pills */
.lang-pills {
    display: flex;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    overflow: hidden;
    transition: background 0.35s ease;
}

.landing-nav.scrolled .lang-pills,
.landing-nav--solid .lang-pills {
    background: #f0f0f0;
}

.lang-pills a {
    padding: 4px 11px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.2s;
    font-weight: 500;
}

.lang-pills a.active {
    background: white;
    color: var(--primary, #006C6C);
    font-weight: 700;
}

.landing-nav.scrolled .lang-pills a,
.landing-nav--solid .lang-pills a {
    color: #555;
}

.landing-nav.scrolled .lang-pills a.active,
.landing-nav--solid .lang-pills a.active {
    background: var(--primary, #006C6C);
    color: white;
}

/* Login button */
.btn-nav-login {
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 13px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
}

.btn-nav-login:hover {
    background: rgba(255, 255, 255, 0.18);
    color: white;
}

.landing-nav.scrolled .btn-nav-login,
.landing-nav--solid .btn-nav-login {
    color: #374151;
    border-color: #d1d5db;
}

.landing-nav.scrolled .btn-nav-login:hover,
.landing-nav--solid .btn-nav-login:hover {
    background: #f3f4f6;
    color: var(--primary, #006C6C);
}

/* Register / CTA button */
.btn-nav-register {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--gold, #C5A55A);
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
}

.btn-nav-register:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Mobile toggle */
.nav-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    padding: 4px;
    transition: color 0.35s;
    cursor: pointer;
}

.landing-nav.scrolled .nav-mobile-toggle,
.landing-nav--solid .nav-mobile-toggle {
    color: #374151;
}

/* Narrower desktop/tablet widths: shrink the link chrome further so all 10
   items still have the best chance of staying on one row before the layout
   switches to the mobile hamburger menu below. */
@media (max-width: 1250px) and (min-width: 769px) {
    .nav-link-item {
        font-size: 12px;
        padding: 5px 7px;
    }
}

/* Mobile: collapse links row */
@media (max-width: 768px) {
    .nav-mobile-toggle {
        display: block;
    }

    .nav-row-links {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 16px 12px;
        gap: 2px;
        background: rgba(0, 30, 30, 0.97);
    }

    .landing-nav.scrolled .nav-row-links,
    .landing-nav--solid .nav-row-links {
        background: #fff;
    }

    .nav-row-links.open {
        display: flex;
    }

    .nav-link-item {
        width: 100%;
        padding: 9px 14px;
        border-radius: 8px;
    }

    /* Mobile auth buttons */
    .nav-mobile-auth {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        padding: 12px 0 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 6px;
    }

    .landing-nav.scrolled .nav-mobile-auth,
    .landing-nav--solid .nav-mobile-auth {
        border-top-color: rgba(0, 0, 0, 0.08);
    }

    .nav-mobile-auth .btn-nav-login,
    .nav-mobile-auth .btn-nav-register {
        display: block;
        text-align: center;
        padding: 10px 16px;
        border-radius: 10px;
        font-size: 14px;
    }

    /* Hide desktop login/register buttons on mobile */
    .nav-row-top .btn-nav-login,
    .nav-row-top .btn-nav-register {
        display: none;
    }
}

/* Desktop: hide mobile-only auth block */
@media (min-width: 769px) {
    .nav-mobile-auth {
        display: none;
    }
}

/* ===== HERO ===== */
.hero-section {
    /* Leaves room for the bar above it, so the banner still fills the first
       screen without pushing its own content below the fold. */
    min-height: calc(100vh - 142px);
    background: var(--hero-bg, linear-gradient(160deg, #0f172a 0%, #1a365d 60%, #0f172a 100%));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* The nav sits above this in normal flow now, so no extra top padding is
       needed to clear it. */
    padding: 60px 20px 60px;
}

/* Hero with Background Image */
.hero-section.hero-bg-image {
    background: none !important;
    background-image: var(--hero-bg-image, none) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Navy wash to match the nav bar — deep enough for white hero text, but a
   clear royal blue rather than the flat grey-slate it started as. */
.hero-bg-image .hero-overlay {
    background: linear-gradient(160deg, rgba(10, 28, 56, 0.88) 0%, rgba(20, 56, 104, 0.74) 45%, rgba(28, 78, 140, 0.76) 100%) !important;
}

/* Hero with Background Video */
.hero-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-bg-video .hero-overlay {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.80) 0%, rgba(26, 54, 93, 0.60) 50%, rgba(15, 23, 42, 0.75) 100%) !important;
    z-index: 1;
}


.hero-overlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 1;
}

/* Particles */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.particle {
    position: absolute;
    background: rgba(197, 165, 90, 0.4);
    border-radius: 50%;
    animation: float linear infinite;
}

@keyframes float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-100vh) scale(0.5);
        opacity: 0;
    }
}

.hero-content {
    position: relative;
    text-align: center;
    z-index: 2;
    max-width: 1100px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(197, 165, 90, 0.2);
    border: 1px solid rgba(197, 165, 90, 0.4);
    color: var(--gold);
    border-radius: 30px;
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--hero-title);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Same fix as .hero-theme below: the Title text comes from a rich-text
   (TinyMCE) field, and a line the admin typed can carry its own inline
   font-size from the editor's own toolbar, which otherwise wins over the
   fs_title slider's size on the wrapping <h1> (a child's own inline style
   always beats an ancestor's). Forcing every descendant to inherit here
   makes the fs_title slider the single source of truth for this block's
   size again. */
.hero-title * {
    font-size: inherit !important;
}

.hero-theme {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--hero-text);
    margin-bottom: 40px;
    font-style: italic;
}

/* The Theme/Subtitle text comes from a rich-text (TinyMCE) field — each
   line the admin typed can carry its own inline font-size from the editor's
   own toolbar, which otherwise wins over the fs_theme slider's size on the
   wrapping element (a child's own inline style always beats an ancestor's).
   Forcing every descendant to inherit here makes the fs_theme slider the
   single source of truth for this block's size again. */
.hero-theme * {
    font-size: inherit !important;
}

.hero-meta {
    color: var(--hero-text);
    opacity: 0.8;
    font-size: 14px;
    margin-bottom: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Countdown */
.countdown-wrap {
    margin-bottom: 36px;
}

.countdown-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.countdown-grid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

.cd-num {
    display: block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: white;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    min-width: 64px;
    padding: 10px 12px;
    border-radius: 12px;
    line-height: 1;
}

.cd-label {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    text-transform: uppercase;
}

.cd-sep {
    color: rgba(255, 255, 255, 0.4);
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 20px;
}

.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    background: var(--gold);
    color: var(--primary-dark);
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(197, 165, 90, 0.4);
}

.btn-hero-primary:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(197, 165, 90, 0.5);
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s;
}

.btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: white;
}

/* Same outline-button shape as .btn-hero-outline, but for use OUTSIDE the
   dark hero section — .btn-hero-outline's white text/border is invisible
   against a plain white section background. */
.btn-outline-teal {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--primary, #006C6C);
    color: var(--primary, #006C6C);
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s;
    background: transparent;
}

.btn-outline-teal:hover {
    background: var(--primary, #006C6C);
    color: white;
    border-color: var(--primary, #006C6C);
}

.hero-scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 22px;
    animation: bounce 2s infinite;
    text-decoration: none;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(8px);
    }
}

/* ===== STATS BAR ===== */
.stats-bar {
    background: white;
    border-bottom: 1px solid #eee;
    padding: 28px 0;
    box-shadow: var(--shadow);
}

.stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 48px;
}

.stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.stat-lbl {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.stat-divider {
    width: 1px;
    height: 48px;
    background: #eee;
}

/* ===== GENERIC SECTION ===== */
.landing-section {
    padding: 80px 0;
}

.bg-light-teal {
    /* Soft mint wash rather than near-white, so alternating sections are
       visibly distinct as you scroll. */
    background: linear-gradient(180deg, #eafaf7 0%, #f4fbfa 100%);
}

.section-header {
    margin-bottom: 52px;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 188, 176, 0.16) 0%, rgba(197, 165, 90, 0.16) 100%);
    color: var(--primary);
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 12px;
    line-height: 1.3;
}

.section-sub {
    color: var(--text-muted);
    font-size: 15px;
    max-width: 540px;
    margin: 0 auto;
}

.section-text {
    color: #444;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
}

/* ===== ABOUT ===== */
.about-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.about-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 108, 108, 0.08);
    color: var(--primary);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
}

.about-visual {
    position: relative;
    padding: 32px 0 32px 32px;
}

.about-card-stack {
    position: relative;
}

.about-card-bg {
    position: absolute;
    top: 24px;
    left: -24px;
    right: -24px;
    bottom: -24px;
    background: linear-gradient(135deg, rgba(0, 108, 108, 0.08), rgba(197, 165, 90, 0.08));
    border-radius: 24px;
}

.about-card-main {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 1px solid rgba(0, 108, 108, 0.1);
}

.about-card-icon {
    font-size: 48px;
    color: var(--primary);
    margin-bottom: 12px;
}

.about-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.about-card-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.about-card-types {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.about-card-types span {
    background: rgba(0, 108, 108, 0.08);
    color: var(--primary);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
}

.about-badge-1,
.about-badge-2 {
    position: absolute;
    background: white;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--shadow);
    white-space: nowrap;
}

.about-badge-1 {
    top: -12px;
    right: 20px;
    color: var(--primary);
    border: 2px solid rgba(0, 108, 108, 0.2);
}

.about-badge-2 {
    bottom: -12px;
    left: 20px;
    color: var(--gold);
    border: 2px solid rgba(197, 165, 90, 0.3);
}

/* ===== DATES TIMELINE ===== */
.dates-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding: 20px 0 10px;
    scrollbar-width: none;
}

.dates-timeline::-webkit-scrollbar {
    display: none;
}

.date-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 160px;
    position: relative;
}

.date-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 2;
    flex-shrink: 0;
}

.date-line {
    position: absolute;
    top: 30px;
    left: calc(50% + 30px);
    right: calc(-50% + 30px);
    height: 2px;
    background: linear-gradient(to right, rgba(0, 108, 108, 0.3), rgba(197, 165, 90, 0.3));
}

.date-line:not(.has-line) {
    display: none;
}

.date-content {
    text-align: center;
    margin-top: 14px;
    padding: 0 8px;
}

.date-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 4px;
}

.date-value {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 4px;
}

.date-sub {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== TRACKS ===== */
.track-card {
    background: white;
    border-radius: var(--radius);
    padding: 32px 28px;
    height: 100%;
    border: 1px solid #eee;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.track-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 108, 108, 0.2);
}

.track-card-featured {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(197, 165, 90, 0.2), var(--shadow);
}

.track-featured-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--gold);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.track-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    margin-bottom: 20px;
}

.track-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.track-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 12px;
}

.track-desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 18px;
}

.track-topics {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.track-topics li {
    font-size: 13px;
    color: #444;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.track-topics li::before {
    content: '→';
    color: var(--primary);
    font-weight: 700;
}

.track-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.2s;
}

.track-btn:hover {
    gap: 12px;
    color: var(--primary);
}

/* ===== SPEAKERS ===== */
.speaker-card {
    background: white;
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s;
    box-shadow: var(--shadow);
}

.speaker-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.speaker-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 0 auto 16px;
    position: relative;
}

.speaker-track-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.speaker-title {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.speaker-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 6px;
}

.speaker-org {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.speaker-topic {
    font-size: 12px;
    color: #666;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 8px 12px;
    font-style: italic;
}

/* ===== FEES ===== */
.fee-card {
    background: white;
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    border: 2px solid #eee;
    transition: all 0.3s;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.fee-card:hover {
    box-shadow: var(--shadow-lg);
}

.fee-card-featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 108, 108, 0.08);
    transform: scale(1.02);
}

.fee-popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 4px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.fee-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.fee-type {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 12px;
}

.fee-amount {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1;
}

.fee-includes {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;
    text-align: left;
}

.fee-includes li {
    font-size: 13px;
    color: #555;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.fee-btn {
    display: block;
    margin-top: 24px;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid;
    transition: all 0.2s;
}

.fee-btn:hover {
    opacity: 0.85;
}

/* ===== VENUE ===== */
.venue-card {
    background: white;
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 108, 108, 0.1);
}

.venue-icon {
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 16px;
}

.venue-details {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.venue-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #444;
}

.venue-detail-row i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== CONTACT ===== */
.contact-card {
    background: white;
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid #eee;
    transition: all 0.3s;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.contact-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 16px;
}

.contact-card h6 {
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.contact-card a {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
}

.contact-card a:hover {
    text-decoration: underline;
}

/* CTA Banner */
.cta-banner {
    margin-top: 60px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    padding: 56px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner-bg {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-content h3 {
    font-family: 'Playfair Display', serif;
    color: white;
    font-size: 2rem;
    margin-bottom: 12px;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    margin-bottom: 28px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    background: var(--gold);
    color: var(--primary-dark);
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s;
}

.btn-cta-primary:hover {
    background: var(--gold-light);
}

.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s;
}

.btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* ===== FOOTER ===== */
.landing-footer {
    background: var(--footer-bg, var(--primary-dark));
    color: var(--footer-text, rgba(255, 255, 255, 0.8));
    padding: 60px 0 0;
}

.footer-brand h5 {
    color: var(--footer-heading, white);
    font-size: 16px;
    margin-bottom: 4px;
}

.footer-subtitle {
    opacity: 0.8;
}

.footer-heading {
    color: var(--footer-heading, white);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links li,
.footer-links a {
    font-size: 14px;
    color: var(--footer-text, rgba(255, 255, 255, 0.8));
    opacity: 0.8;
    text-decoration: none;
    transition: color 0.2s, opacity 0.2s;
}

.footer-links a:hover {
    color: var(--gold);
    opacity: 1;
}

.footer-divider {
    border-color: currentColor;
    opacity: 0.1;
    margin: 40px 0 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    font-size: 13px;
    color: var(--footer-text, rgba(255, 255, 255, 0.8));
    opacity: 0.6;
    flex-wrap: wrap;
    gap: 8px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 56, 56, 0.98);
        flex-direction: column;
        padding: 16px;
        gap: 4px;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-mobile-toggle {
        display: block;
    }

    .dates-timeline {
        justify-content: flex-start;
    }

    .stat-item {
        padding: 8px 24px;
    }
}

@media (max-width: 767px) {
    .landing-section {
        padding: 56px 0;
    }

    .hero-section {
        padding: 120px 20px 60px;
    }

    .stats-grid {
        gap: 0;
    }

    .stat-divider {
        display: none;
    }

    .stat-item {
        padding: 12px 16px;
        width: 50%;
    }

    .dates-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .date-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        min-width: 0;
        padding: 0 0 24px 0;
        width: 100%;
    }

    .date-line {
        top: 60px;
        left: 29px;
        right: auto;
        bottom: 0;
        width: 2px;
        height: auto;
        background: linear-gradient(to bottom, rgba(0, 108, 108, 0.3), rgba(197, 165, 90, 0.3));
    }

    .date-content {
        text-align: left;
        margin-top: 0;
        padding: 0;
    }

    .nav-actions .btn-nav-register,
    .nav-actions .btn-nav-login {
        display: none;
    }

    .fee-card-featured {
        transform: none;
    }

    /* Fix video on mobile */
    .hero-section.hero-bg-image {
        background-attachment: scroll !important;
    }
}

@supports (-webkit-touch-callout: none) {
    /* Fix background-attachment: fixed issue on iOS (iPad/iPhone) */
    .hero-section.hero-bg-image {
        background-attachment: scroll !important;
    }
}