:root{
    --text-color:#012169;
    --muted-color:rgba(234,244,255,0.75);
    --muted-2:rgba(234,244,255,0.6);
    --card-bg:rgba(255,255,255,0.02);
    --radius:12px;
    --hero-shadow: 0 6px 22px rgba(0,0,0,0.45);
   
}

/* Base typography improvements for clarity */
html,body{
    font-family:'Work Sans',sans-serif;
    font-size:16px;line-height:1.6;
    color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--primary-color)}

/* Button focus and primary overrides to ensure contrast */
.btn-primary, .btn.btn-primary{background:var(--primary-color);border-color:var(--primary-color);color:#fff}
.btn:focus, .btn:active{outline:3px solid rgba(255,255,255,0.06);outline-offset:3px}

/* Improve readability inside rich descriptions */
.rich-description{font-size:16px;color:var(--muted-2)}

.schedule .schedule-card{
    border: 0;
    overflow: hidden;
    transition: transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb),1) 0%, rgba(var(--primary-color-rgb),0.88) 60%, rgba(var(--primary-color-rgb),0.72) 100%);
    color: var(--primary-contrast);
    box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 -2px 0 rgba(255,255,255,0.02);
    position:relative;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.schedule .schedule-card:hover{
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 30px 60px rgba(var(--primary-color-rgb),0.72);
}

/* decorative diagonal accent */
.schedule .schedule-card:before{
    content:"";
    position:absolute;
    right:-30%;
    top:-40%;
    width:180%;
    height:120%;
    background:linear-gradient(120deg, rgba(var(--primary-color-rgb),0.06), rgba(var(--primary-color-rgb),0.02));
    transform:rotate(18deg);
    pointer-events:none;
    z-index:0;
}

.schedule .date-circle{
    width:76px;
    height:76px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(var(--primary-color-rgb),1) 0%, rgba(var(--primary-color-rgb),0.82) 100%);
    color:#fff;
    font-weight:800;
    box-shadow:0 8px 22px rgba(var(--primary-color-rgb),0.18), inset 0 -6px 12px rgba(255,255,255,0.03);
    display:flex;align-items:center;justify-content:center;font-size:18px;z-index:2
}

.schedule .card-title{font-family:'Work Sans',sans-serif;font-weight:800;color:#ffffff;z-index:2}
.schedule .card-body{padding:24px;z-index:2}
.schedule .card .btn{min-width:120px}
@media (max-width:767px){
    .schedule .date-circle{width:64px;height:64px;font-size:14px}
    .schedule .card-body{padding:16px}
    .schedule .schedule-card:before{display:none}
}
/* subtle divider */
.schedule .card-footer{padding:12px}
/* ensure images fit */
.schedule-content img{width:100px;height:100px;object-fit:cover;border-radius:8px}

/* tabs styling */
.schedule-tabs .schedule-tab{border-radius:12px;padding:10px 16px;border:1px solid transparent;transition:all .18s ease;background:transparent;color:#eaf4ff}
.schedule-tabs .nav-link{display:flex;align-items:center}
.schedule-tabs .nav-link.active{box-shadow:0 10px 30px rgba(2,6,23,0.5);border-color:rgba(255,255,255,0.04)}
.schedule-tab .date-circle{width:56px;height:56px}
.schedule-card{border-radius:10px}

/* make the card a positioned container so .stretched-link works properly */

.schedule .schedule-card{position:relative}

/* When the whole card is wrapped in a link, show pressed / focus styles */
.schedule a:active .schedule-card{transform:translateY(-6px) scale(.997);box-shadow:0 16px 30px rgba(var(--primary-color-rgb),0.6)}
.schedule a:focus .schedule-card,.schedule a:focus-visible .schedule-card{outline:3px solid rgba(var(--primary-color-rgb),0.14);outline-offset:4px}

/* stronger hover/focus visual for keyboard users */
.schedule a:hover .schedule-card,.schedule .schedule-card:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 30px 60px rgba(var(--primary-color-rgb),0.72)}

/* ensure interactive footer element is visible above shadows */
.schedule .card-footer{position:relative;z-index:2;background:transparent}

/* footer button style for dark cards */
.schedule .card-footer .btn{pointer-events:auto;background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#fff}
.schedule .card-footer .btn:hover{background:linear-gradient(90deg, rgba(var(--primary-color-rgb),1), rgba(var(--primary-color-rgb),0.12));border-color:transparent}

/* small screens adjustments */
@media (max-width:576px){
    .schedule .schedule-card{border-radius:10px}
    .visually-hidden-focusable:focus{outline-offset:1px}
}

/* Event cards on schedule date page */
.event-card{
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg, rgba(var(--primary-color-rgb),1) 0%, rgba(var(--primary-color-rgb),0.78) 70%);
    border-radius:12px;
    overflow:hidden;
    position:relative;
    box-shadow:0 18px 40px rgba(0,0,0,0.45);
    transition:transform .28s ease,box-shadow .28s ease;
}
.event-card:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(var(--primary-color-rgb),0.6)}
.event-media{background-size:cover;background-position:center;height:160px;flex:0 0 160px;filter:brightness(.62)}
.event-body{padding:18px 20px 16px;color:var(--primary-contrast)}
.event-title{font-size:20px;margin:0 0 8px}
.event-title a{color:#ffffff;font-weight:800;text-decoration:none}
.event-title a:hover{text-decoration:underline}
.event-meta{font-size:14px;color:rgba(246,251,255,0.9);margin-bottom:10px}
.event-meta .time{background:rgba(255,255,255,0.06);padding:6px 10px;border-radius:8px;margin-right:10px;color:#eaf4ff}
.event-excerpt{color:rgba(246,251,255,0.92);font-size:15px;line-height:1.45;margin:0}
.event-footer{display:flex;gap:10px;padding:16px 18px 18px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.06));z-index:2}
.event-footer .btn{font-weight:700;padding:7px 12px}
.event-card .stretched-link{z-index:1}

@media (max-width:767px){
    .event-media{height:140px}
    .event-card{border-radius:10px}
}

/* Action button specifics to improve clarity */
.action-calendar{background:linear-gradient(90deg, rgba(var(--primary-color-rgb),1) 0%, rgba(var(--primary-color-rgb),0.9) 100%);border:0;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.28)}
.action-calendar:hover{filter:brightness(1.06)}
.action-watch{background:rgba(255,255,255,0.95);color:var(--primary-color);border:0}
.action-watch:hover{opacity:.95}

/* Two-column layout styles */
.event-inner{gap:0}
.event-left{flex:0 0 30%;max-width:30%;display:flex;align-items:center;justify-content:center;padding:12px}
.event-right{flex:1;padding:0}
/* make image a fixed, modest box so it doesn't dominate the card */
.event-image{width:140px;height:120px;max-height:140px;background-size:cover;background-position:center;border-radius:8px;}
.event-body{padding:20px 22px 14px;color:#f6fbff}
.event-excerpt{color:rgba(246,251,255,0.95);font-size:15px;line-height:1.5;margin:0}
.event-footer{display:flex;gap:12px;padding:14px 22px 18px;background:transparent;align-items:center}

/* Decorative vertical accent between image and content */
.event-left:after{
    content:"";
    position:relative;
    display:block;
}

/* Make layout stacked on small screens */
@media (max-width:991px){
    .event-inner{flex-direction:column}
    .event-left{flex:0 0 auto;max-width:100%}
    .event-image{height:160px}
    .event-right{padding:0}
}

/* Tweak legacy .event-media (used elsewhere) to avoid large visual footprint */
.event-media{height:120px;min-height:120px}

/* Extra polish: subtle glass panel on content */
.event-right{background:linear-gradient(180deg,rgba(var(--primary-color-rgb),0.02),transparent);}
.event-title a{color:#ffffff}

/* Event single page hero and speaker styles */
.event-hero{position:relative;background-size:cover;background-position:center;padding:80px 0 90px;color:var(--primary-contrast);background-color:var(--primary-color)}
.event-hero .overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0.60) 0%,rgba(0,0,0,0.40) 100%),linear-gradient(180deg,rgba(var(--primary-color-rgb),0.70) 0%,rgba(var(--primary-color-rgb),0.55) 100%)!important;pointer-events:none}
.hero-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}
.hero-left{max-width:70%}
.hero-title{font-size:36px;margin:0 0 8px;font-weight:800;color:var(--primary-contrast)}
.hero-sub{color:rgba(255,255,255,0.95);font-size:15px}
.hero-actions .btn{padding:12px 20px;font-weight:700}
.hero-meta{display:flex;flex-direction:column;gap:10px}
.meta-item{background:rgba(var(--primary-color-rgb),0.04);padding:10px 12px;border-radius:8px;color:var(--primary-contrast)}
.meta-item strong{display:block;font-weight:700}

.event-page .event-card-lg{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(0,0,0,0.03));padding:22px;border-radius:12px;box-shadow:0 18px 40px rgba(var(--primary-color-rgb),0.06)}
.event-page .rich-description{color:rgba(255,255,255,0.95);line-height:1.7}

.speaker-card{background:linear-gradient(180deg, rgba(var(--primary-color-rgb),0.95) 0%, rgba(var(--primary-color-rgb),0.85) 100%);border-radius:12px;overflow:hidden;color:var(--primary-contrast);box-shadow:0 18px 40px rgba(var(--primary-color-rgb),0.12)}
.speaker-photo{height:220px;background-size:cover;background-position:center}
.speaker-body{padding:16px; text-align: center;}
.speaker-body h5{margin:0 0 6px ; color: #ffffff;}
.speaker-role{margin-bottom:10px}

@media (max-width:991px){
    .hero-inner{flex-direction:column;align-items:flex-start}
    .hero-left{max-width:100%}
}

/* Typography and contrast fixes for clarity */
.schedule, .event-page, .event-card, .event-hero, .speaker-card{
    color:var(--text-color);
    font-family:'Work Sans',sans-serif;
}
.hero-title{font-size:44px;line-height:1.02;text-shadow:0 6px 18px rgba(var(--primary-color-rgb),0.6)}
.event-hero:not(.hero--plain) .hero-sub{font-size:15px;color:rgba(255,255,255,0.95)}
.event-hero:not(.hero--plain) .hero-sub a{color:rgba(255,255,255,0.98);text-decoration:none}
.event-hero:not(.hero--plain) .hero-sub a:hover{text-decoration:underline}
.event-hero:not(.hero--plain) .hero-sub .dot{color:rgba(255,255,255,0.85)}
.event-hero:not(.hero--plain) .meta-item{background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.96)}
.event-hero:not(.hero--plain) .meta-item strong{color:rgba(255,255,255,0.98)}
.event-hero:not(.hero--plain) .meta-item span{color:rgba(255,255,255,0.92)}
.event-page .event-card-lg{background:linear-gradient(180deg,var(--card-bg),transparent)}
.event-page .event-card-lg h2{font-size:26px;margin-bottom:8px}
.rich-description p{color:var(--muted-2);line-height:1.8}
.speaker-card .speaker-body a.btn{background:var(--primary-color);border:0;color:#fff}

/* Ensure readable text when the card background is light */
.event-page .event-card-lg{color:#071026}
.event-page .event-card-lg h2{color:#071026}
.event-page .event-card-lg .muted{color:rgba(7,16,38,0.65)}
.event-page .event-card-lg .rich-description,
.event-page .event-card-lg .rich-description p{color:rgba(7,16,38,0.95)}

/* Ensure links inside content are visible */
.rich-description a{color:var(--primary-color);text-decoration:underline}

/* Clean list styling for converted Word lists */
.clean-list{margin:8px 0 16px 20px;padding:0;}
.clean-list li{margin:6px 0;line-height:1.6}

/* Styles for plain/light hero (default placeholder image) */
.event-hero.hero--plain{background-image:none!important;background-color:#f5f7fb;color:#071026}
.event-hero.hero--plain .overlay{display:none}
.event-hero.hero--plain .hero-title{color:#071026;text-shadow:none}
.event-hero.hero--plain .hero-sub{color:rgba(7,16,38,0.75)}
.event-hero.hero--plain .meta-item{background:rgba(7,16,38,0.06);border:1px solid rgba(7,16,38,0.10);color:rgba(7,16,38,0.92)}
.event-hero.hero--plain .meta-item strong{color:#071026}
.event-hero.hero--plain .meta-item span{color:rgba(7,16,38,0.82)}
.event-hero.hero--plain .hero-actions .btn{color:inherit}
.event-hero.hero--plain .btn.btn-outline-dark{background:transparent;border:1px solid rgba(7,16,38,0.08);color:rgba(7,16,38,0.9)}
.event-hero.hero--plain .btn.btn-primary{background:var(--primary-color);border-color:var(--primary-color);color:#fff}
.event-hero.hero--plain .hero-inner{align-items:center}

/* Modal-specific styles for event details */
#eventDetailModal .modal-content{background:#ffffff;color:#071026;border-radius:12px;overflow:hidden}
#eventDetailModal .modal-header{border-bottom:0;padding:1rem 1.25rem}
#eventDetailModal .modal-title{color:var(--primary-color);font-weight:700}
#eventDetailModal .modal-body{padding:1.25rem;max-height:72vh;overflow:auto}
#eventDetailModal .modal-footer{border-top:0;padding:0.75rem 1rem}

/* Ensure the loaded .event-page content looks like a form section inside the modal */
#eventDetailContent .event-page{background:transparent;padding:0;margin:0}
#eventDetailContent .event-card-lg{background:transparent;padding:0;border-radius:0;box-shadow:none}
#eventDetailContent h2, #eventDetailContent .event-card-lg h2{color:#071026;font-size:20px;margin-bottom:8px}
#eventDetailContent .muted{color:rgba(7,16,38,0.65)}
#eventDetailContent .rich-description, #eventDetailContent p, #eventDetailContent li{color:rgba(7,16,38,0.95);line-height:1.7}

/* Speaker panel inside modal */
#eventDetailContent .speaker-card{background:linear-gradient(180deg, rgba(var(--primary-color-rgb),0.04), rgba(var(--primary-color-rgb),0.01));color:#071026;box-shadow:none;border-radius:10px}
#eventDetailContent .speaker-photo{height:160px;background-size:cover;background-position:center}
#eventDetailContent .speaker-body{padding:12px}
#eventDetailContent .speaker-body h5{margin:0 0 6px}
#eventDetailContent .speaker-role{margin-bottom:10px}
#eventDetailContent .speaker-body h5{color:#ffffff;}
#eventDetailContent .speaker-body a.btn{width:100%;display:block}

/* Tidy lists inside modal */
#eventDetailContent .clean-list{margin:6px 0 14px 20px}
#eventDetailContent .clean-list li{margin:6px 0}

/* Hide full hero if accidentally included in AJAX payload */
#eventDetailContent .event-hero{display:none}

/* Buttons in modal: primary accent and accessible sizing */
#eventDetailContent .btn-primary{background:var(--primary-color);border-color:var(--primary-color);color:#fff}
#eventDetailContent .btn{min-width:0}

@media (max-width:767px){
    #eventDetailModal .modal-dialog{max-width:95%;margin:0 1rem}
    #eventDetailModal .modal-body{max-height:60vh}
}