/**
 * District 219 Transition Page Styles
 * Official Toastmasters Brand Colors
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');

/* Hide footer on transition page */
body:has(.d219-transition-page) footer,
body:has(.d219-transition-page) #footer,
body:has(.d219-transition-page) .site-footer,
body:has(.d219-transition-page) .footer,
body:has(.d219-transition-page) #colophon {
    display: none !important;
}

/* Variables */
.d219-transition-page {
    --d219-blue-dark: #004165;
    --d219-blue-light: #006094;
    --d219-maroon-dark: #3B0104;
    --d219-maroon-light: #781327;
    --d219-gray-dark: #A9B2B1;
    --d219-gray-light: #F5F5F5;
    --d219-white: #ffffff;
    --d219-text: #333333;
    --d219-text-light: #666666;
    --d219-yellow: #F2DF74;
    
    font-family: 'Source Sans Pro', Arial, sans-serif !important;
    line-height: 1.6 !important;
    color: var(--d219-text) !important;
    box-sizing: border-box !important;
}

.d219-transition-page *, .d219-transition-page *::before, .d219-transition-page *::after { box-sizing: border-box !important; }
.d219-transition-page h1, .d219-transition-page h2, .d219-transition-page h3, .d219-transition-page h4 {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
.d219-transition-page p { margin: 0 !important; }
.d219-transition-page a { text-decoration: none !important; transition: all 0.2s ease !important; }

.d219-container { max-width: 1100px !important; margin: 0 auto !important; padding: 0 16px !important; width: 100% !important; }

/* =====================================================
   BANNER - Sitewide (stronger specificity)
   ===================================================== */
body .d219-transition-banner,
html body .d219-transition-banner,
.d219-transition-banner {
    background: #004165 !important;
    background-color: #004165 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-family: 'Source Sans Pro', Arial, sans-serif !important;
    display: block !important;
    width: 100% !important;
}
body .d219-transition-banner a,
.d219-transition-banner a {
    color: rgba(255,255,255,0.7) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}
body .d219-transition-banner a:hover,
.d219-transition-banner a:hover {
    color: #F2DF74 !important;
}
body .d219-banner-219,
.d219-banner-219 {
    color: #F2DF74 !important;
    font-weight: 700 !important;
}

/* =====================================================
   HERO - Fixed title visibility
   ===================================================== */
.d219-hero {
    background: linear-gradient(180deg, #004165 0%, #006094 100%) !important;
    color: #ffffff !important;
    padding: 48px 0 !important;
    text-align: center !important;
}
.d219-hero .d219-container {
    text-align: center !important;
}
.d219-hero .d219-title,
.d219-transition-page .d219-hero .d219-title,
.d219-title {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    color: #ffffff !important;
    text-align: center !important;
}
.d219-hero .d219-subtitle,
.d219-transition-page .d219-hero .d219-subtitle,
.d219-subtitle {
    font-size: 1.1rem !important;
    opacity: 1 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    color: rgba(255,255,255,0.95) !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

/* =====================================================
   INTRO / WHAT'S HAPPENING
   ===================================================== */
.d219-intro-section {
    padding: 40px 0 !important;
    background: var(--d219-white) !important;
}
.d219-intro-content {
    max-width: 800px !important;
    margin: 0 auto 32px auto !important;
}
.d219-intro-content h2 {
    font-size: 1.5rem !important;
    margin: 0 0 16px 0 !important;
    text-align: center !important;
    color: #004165 !important;
}
.d219-intro-content > p {
    font-size: 1.05rem !important;
    text-align: center !important;
    margin: 0 0 24px 0 !important;
    color: #333333 !important;
}

/* Timeline */
.d219-timeline {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding-left: 40px !important;
    margin: 24px 0 !important;
}
.d219-timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 15px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: var(--d219-gray-dark) !important;
}
.d219-timeline-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 10px 0 !important;
    position: relative !important;
}
.d219-timeline-marker {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--d219-white) !important;
    border: 3px solid var(--d219-gray-dark) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--d219-text-light) !important;
    position: absolute !important;
    left: -40px !important;
    z-index: 1 !important;
}
.d219-timeline-marker.d219-complete {
    background: #004165 !important;
    border-color: #004165 !important;
    color: #ffffff !important;
}
.d219-timeline-marker.d219-current {
    background: #F2DF74 !important;
    border-color: #781327 !important;
    color: #3B0104 !important;
    animation: d219-marker-pulse 2s ease-in-out infinite !important;
}
@keyframes d219-marker-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 223, 116, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(242, 223, 116, 0); }
}
.d219-timeline-marker.d219-final {
    background: #781327 !important;
    border-color: #781327 !important;
    color: #ffffff !important;
}
.d219-timeline-content { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.d219-timeline-content strong { color: #004165 !important; font-size: 0.95rem !important; }
.d219-timeline-content span { color: #666666 !important; font-size: 0.9rem !important; }

/* Nomination CTA Box */
.d219-nomination-cta {
    background: linear-gradient(135deg, #004165 0%, #006094 100%) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin: 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    text-align: center !important;
}
.d219-nomination-cta-content h3 {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    margin: 0 0 8px 0 !important;
}
.d219-nomination-cta-content h3 i { margin-right: 8px !important; color: #F2DF74 !important; }
.d219-nomination-cta-content p { color: rgba(255,255,255,0.9) !important; font-size: 0.95rem !important; }
.d219-btn-cta {
    background: #F2DF74 !important;
    color: #004165 !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.d219-btn-cta:hover { background: #ffffff !important; }

@media (min-width: 600px) {
    .d219-nomination-cta {
        flex-direction: row !important;
        justify-content: space-between !important;
        text-align: left !important;
    }
}

/* FAQ Grid */
.d219-faq-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}
.d219-faq-item {
    background: var(--d219-gray-light) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}
.d219-faq-item h3 {
    font-size: 1rem !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #004165 !important;
}
.d219-faq-item h3 i { color: #781327 !important; }
.d219-faq-item p { font-size: 0.9rem !important; line-height: 1.5 !important; color: #333333 !important; }
.d219-faq-item a { color: #004165 !important; text-decoration: underline !important; }

@media (min-width: 768px) {
    .d219-faq-grid { grid-template-columns: repeat(3, 1fr) !important; }
}


/* =====================================================
   SLIDESHOW
   ===================================================== */
.d219-slides-section {
    padding: 40px 0 !important;
    background: var(--d219-gray-light) !important;
}
.d219-slides-section h2 {
    text-align: center !important;
    font-size: 1.5rem !important;
    margin: 0 0 8px 0 !important;
    color: #004165 !important;
}
.d219-slides-intro {
    text-align: center !important;
    color: #666666 !important;
    margin: 0 0 24px 0 !important;
}
.d219-slideshow { max-width: 900px !important; margin: 0 auto !important; }
.d219-slide-main {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.d219-slide-viewer {
    flex: 1 !important;
    aspect-ratio: 16/9 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}
.d219-slide-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}
.d219-slide-image.d219-active { opacity: 1 !important; }
.d219-slide-nav {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #004165 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.d219-slide-nav:hover { background: #781327 !important; }
.d219-slide-counter {
    text-align: center !important;
    padding: 12px 0 !important;
    font-size: 0.9rem !important;
    color: #666666 !important;
}
.d219-slide-thumbnails {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px 0 !important;
    justify-content: center !important;
}
.d219-thumbnail {
    flex-shrink: 0 !important;
    width: 80px !important;
    height: 45px !important;
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    padding: 0 !important;
    background: none !important;
    opacity: 0.5 !important;
}
.d219-thumbnail:hover { opacity: 0.8 !important; }
.d219-thumbnail.d219-active { border-color: #781327 !important; opacity: 1 !important; }
.d219-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* Slides Download Button */
.d219-slides-download {
    text-align: center !important;
    margin-top: 20px !important;
}
.d219-btn-download {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: #004165 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}
.d219-btn-download:hover {
    background: #781327 !important;
    color: #ffffff !important;
}

/* =====================================================
   MAP SECTION - Equal height maps
   ===================================================== */
.d219-map-section {
    padding: 40px 0 !important;
    background: #ffffff !important;
}
.d219-map-section > .d219-container > h2 {
    text-align: center !important;
    font-size: 1.5rem !important;
    margin: 0 0 24px 0 !important;
    color: #004165 !important;
}
.d219-maps-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin: 0 0 32px 0 !important;
}
.d219-map-card {
    background: #F5F5F5 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}
.d219-map-card h3 {
    font-size: 1.1rem !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
    color: #004165 !important;
}
.d219-map-card > p {
    text-align: center !important;
    font-size: 0.9rem !important;
    color: #666666 !important;
    margin: 0 0 16px 0 !important;
}
.d219-map-frame {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid #781327 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e8e4d9 !important;
    min-height: 250px !important;
}
.d219-map-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

@media (min-width: 768px) {
    .d219-maps-grid { 
        grid-template-columns: 1fr 1fr !important; 
        align-items: stretch !important;
    }
    .d219-map-frame {
        min-height: 300px !important;
    }
}

/* Boundaries */
.d219-boundaries {
    background: #F5F5F5 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}
.d219-boundaries h3 {
    font-size: 1.1rem !important;
    margin: 0 0 16px 0 !important;
    color: #004165 !important;
}
.d219-boundaries h3 i { color: #781327 !important; margin-right: 8px !important; }
.d219-boundary-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}
.d219-boundary-list li {
    padding: 10px 0 !important;
    border-bottom: 1px solid #A9B2B1 !important;
    font-size: 0.9rem !important;
    color: #333333 !important;
}
.d219-boundary-list li:last-child { border-bottom: none !important; }
.d219-boundary-list strong { color: #781327 !important; }
.d219-map-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #004165 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}
.d219-map-link:hover { color: #781327 !important; }


/* =====================================================
   IMPORTANT DATES - Better spacing before buttons
   ===================================================== */
.d219-dates-section {
    padding: 40px 0 !important;
    background: linear-gradient(180deg, #3B0104 0%, #781327 100%) !important;
    color: #ffffff !important;
}
.d219-dates-section h2 {
    text-align: center !important;
    font-size: 1.5rem !important;
    color: #ffffff !important;
    margin: 0 0 24px 0 !important;
}
.d219-dates-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}
.d219-date-card {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    padding: 24px 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 220px !important;
}
.d219-date-icon { 
    font-size: 2rem !important; 
    margin-bottom: 12px !important; 
    color: #F2DF74 !important; 
}
.d219-date-card h3 { 
    font-size: 1rem !important; 
    margin: 0 0 10px 0 !important; 
    color: #ffffff !important; 
}
.d219-date-value { 
    font-size: 1.15rem !important; 
    font-weight: 700 !important; 
    color: #F2DF74 !important; 
    margin: 0 0 6px 0 !important; 
}
.d219-date-time { 
    font-size: 0.9rem !important; 
    opacity: 0.9 !important; 
    margin: 0 0 6px 0 !important; 
}
.d219-date-desc { 
    font-size: 0.85rem !important; 
    opacity: 0.8 !important; 
    margin: 0 !important; 
    flex-grow: 1 !important; 
}
.d219-date-action { 
    margin-top: 16px !important;
    padding-top: 8px !important;
}
.d219-date-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    background: #F2DF74 !important;
    color: #3B0104 !important;
    border: none !important;
}
.d219-date-btn:hover { background: #ffffff !important; }
.d219-date-btn.d219-disabled {
    background: rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.6) !important;
    cursor: not-allowed !important;
}

@media (min-width: 600px) {
    .d219-dates-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =====================================================
   COMMITTEE SECTION
   ===================================================== */
.d219-committee-section {
    padding: 40px 0 !important;
    background: #ffffff !important;
}
.d219-committee-section h2 {
    text-align: center !important;
    font-size: 1.5rem !important;
    margin: 0 0 24px 0 !important;
    color: #004165 !important;
}
.d219-group-chair {
    text-align: center !important;
    margin: 0 auto 24px auto !important;
    padding: 20px !important;
    background: #F5F5F5 !important;
    border-radius: 12px !important;
    max-width: 280px !important;
}
.d219-group-chair .d219-chair-photo { width: 100px !important; height: 100px !important; margin: 0 auto 12px auto !important; }
.d219-group-chair h3 { font-size: 1rem !important; margin: 0 0 6px 0 !important; color: #004165 !important; }
.d219-group-chair .d219-chair-name { font-size: 0.9rem !important; font-weight: 600 !important; color: #781327 !important; margin: 0 0 10px 0 !important; }

.d219-chair-photo {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3px solid #781327 !important;
    background: #F5F5F5 !important;
    flex-shrink: 0 !important;
}
.d219-chair-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.d219-chair-links { display: flex !important; justify-content: center !important; gap: 10px !important; }
.d219-chair-link {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #004165 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
}
.d219-chair-link:hover { background: #781327 !important; color: #ffffff !important; }

.d219-chairs-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}
.d219-chair-card {
    background: #F5F5F5 !important;
    border-radius: 10px !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
.d219-chair-card .d219-chair-photo { margin: 0 0 12px 0 !important; }
.d219-chair-card h4 { font-size: 0.95rem !important; margin: 0 0 6px 0 !important; color: #004165 !important; }
.d219-chair-card .d219-chair-name { font-size: 0.85rem !important; font-weight: 600 !important; color: #781327 !important; margin: 0 0 10px 0 !important; }
.d219-chair-card .d219-chair-links { margin-bottom: 12px !important; }
.d219-chair-card .d219-chair-desc { font-size: 0.85rem !important; color: #333333 !important; margin: 0 !important; line-height: 1.5 !important; text-align: left !important; }

@media (min-width: 768px) {
    .d219-chairs-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =====================================================
   CTA SECTION
   ===================================================== */
.d219-cta-section {
    padding: 48px 0 !important;
    background: linear-gradient(180deg, #004165 0%, #006094 100%) !important;
    color: #ffffff !important;
    text-align: center !important;
}
.d219-cta-section h2 { font-size: 1.5rem !important; margin: 0 0 12px 0 !important; color: #ffffff !important; }
.d219-cta-section > .d219-container > p { max-width: 550px !important; margin: 0 auto 20px auto !important; opacity: 0.9 !important; }
.d219-cta-buttons { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: center !important; }
.d219-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 28px !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    border: none !important;
    min-width: 200px !important;
    justify-content: center !important;
}
.d219-btn-primary { background: #F2DF74 !important; color: #004165 !important; }
.d219-btn-primary:hover { background: #ffffff !important; }
.d219-btn-secondary { background: transparent !important; color: #ffffff !important; border: 2px solid #ffffff !important; }
.d219-btn-secondary:hover { background: #ffffff !important; color: #004165 !important; }

@media (min-width: 600px) {
    .d219-cta-buttons { flex-direction: row !important; justify-content: center !important; }
}

/* =====================================================
   RESOURCES FOOTER
   ===================================================== */
.d219-resources-footer {
    padding: 24px 0 !important;
    background: #333333 !important;
    text-align: center !important;
}
.d219-resources-label {
    font-size: 0.7rem !important;
    color: rgba(255,255,255,0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 10px 0 !important;
}
.d219-resources-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 20px !important;
}
.d219-resources-links a { color: rgba(255,255,255,0.6) !important; font-size: 0.8rem !important; }
.d219-resources-links a:hover { color: #ffffff !important; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (min-width: 900px) {
    .d219-container { padding: 0 24px !important; }
    .d219-hero { padding: 60px 0 !important; }
    .d219-hero .d219-title,
    .d219-title { font-size: 2.75rem !important; }
    .d219-hero .d219-subtitle,
    .d219-subtitle { font-size: 1.15rem !important; }
    .d219-intro-section, .d219-slides-section, .d219-map-section, .d219-dates-section, .d219-committee-section {
        padding: 56px 0 !important;
    }
    .d219-intro-content h2, .d219-slides-section h2, .d219-map-section > .d219-container > h2, 
    .d219-dates-section h2, .d219-committee-section h2, .d219-cta-section h2 { font-size: 1.75rem !important; }
    .d219-cta-section { padding: 60px 0 !important; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .d219-transition-page *, .d219-banner-highlight { transition: none !important; animation: none !important; }
}
.d219-transition-page a:focus, .d219-transition-page button:focus {
    outline: 3px solid #F2DF74 !important;
    outline-offset: 2px !important;
}