/* CSN MODERN DESIGN SYSTEM v1.0
   Combined: B header (full-width hero) + A layout (bold athletic) */

/* Override old template */
html, body { height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; }
body { background: #fff !important; }
#main-wrapper { height: auto !important; overflow: visible !important; position: relative !important; padding: 0 !important; margin: 0 !important; min-height: 100vh !important; display: flex !important; flex-direction: column !important; }
.csn-ft { margin-top: auto !important; }
#row-main, #main-img-container, #main-img { display: none !important; }
#header_shadow { display: none !important; }
#preloader { display: none !important; }

/* Nav */
header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999; background: #ddd !important; height: 65px !important; display: flex !important; align-items: center; padding: 0 36px; }
#logo { display: flex !important; align-items: center; }
#logo a { position: relative !important; left: auto !important; top: auto !important; }
#logo a img { height: 34px; width: auto; }
header > .col-md-12 { display: flex !important; align-items: center; justify-content: flex-end; flex: 1; }
.menu_container { text-transform: uppercase; display: flex !important; align-items: center; margin: 0 !important; }
ul.menu { display: flex; align-items: center; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.menu > li { display: flex !important; align-items: center; padding: 0 !important; margin: 0 !important; }
.menu > li a { font-family: 'Barlow', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.5px !important; font-size: 12px !important; padding: 0 14px !important; line-height: 65px !important; }
.menu > li a.drop-down { padding-right: 22px !important; background-position: right 8px center !important; background-size: 8px !important; }
.menu > li .drop-down-container a { line-height: 1.4 !important; padding: 10px !important; }
.csn-social-nav { display: inline-flex; gap: 12px; margin-left: 8px; vertical-align: middle; }
.csn-social-nav a { display: inline-flex; align-items: center; color: #888 !important; transition: color 0.2s; }
.csn-social-nav a:hover { color: #c00 !important; }
.csn-social-nav svg { width: 18px; height: 18px; fill: currentColor; }

/* Announcement */
.csn-announce { background: #c00; padding: 7px 44px; text-align: center; margin-top: 65px; }
.csn-announce span { color: #fff; font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }

/* Hero — photo strip background with text overlay */
.csn-hero-strip { position: relative; overflow: hidden; height: 380px; }
.csn-hero-strip .csn-hero-imgs { display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.csn-hero-strip .csn-hero-imgs img { flex: 1; object-fit: cover; min-width: 0; }
.csn-hero-strip .csn-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 1; }
.csn-hero-strip .csn-ho { position: absolute; bottom: 0; left: 0; right: 0; padding: 48px; z-index: 2; background: linear-gradient(transparent 0%, rgba(0,0,0,0.4) 100%); }
.csn-hero-strip .csn-ho h1 { font-family: 'Bebas Neue', sans-serif; font-size: 48px; color: #fff; line-height: 1; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 6px; }
.csn-hero-strip .csn-ho h1 span { color: #c00; }
.csn-hero-strip .csn-ho p { font-family: 'Barlow', sans-serif; font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 8px; max-width: 520px; line-height: 1.7; }
.csn-hero-strip .csn-ho .csn-ctas { margin-top: 18px; display: flex; gap: 12px; }

/* Hero — full-width single image (kept for info pages using DB sideimage) */
.csn-hero-full { position: relative; overflow: hidden; }
.csn-hero-full img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center 40%; }
.csn-hero-full::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.25); z-index: 1; }
.csn-hero-full .csn-ho { position: absolute; bottom: 0; left: 0; right: 0; padding: 44px 48px; background: linear-gradient(transparent 0%, rgba(0,0,0,0.65) 100%); z-index: 2; }
.csn-hero-full .csn-ho h1 { font-family: 'Bebas Neue', sans-serif; font-size: 48px; color: #fff; line-height: 1; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.csn-hero-full .csn-ho h1 span { color: #c00; }
.csn-hero-full .csn-ho p { font-family: 'Barlow', sans-serif; font-size: 14px; color: rgba(255,255,255,0.65); margin-top: 10px; max-width: 520px; line-height: 1.7; }
.csn-hero-full .csn-ctas { margin-top: 20px; display: flex; gap: 12px; }

/* Stripe */
.csn-stripe { height: 5px; background: linear-gradient(90deg, #c00 0%, #c00 33%, #1a1a1a 33%, #1a1a1a 34%, #888 34%, #888 67%, #1a1a1a 67%, #1a1a1a 68%, #fff 68%); }

/* Buttons */
.csn-btn { padding: 12px 28px; font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border-radius: 0; text-decoration: none; display: inline-block; cursor: pointer; transition: all 0.2s; }
.csn-btn-r { background: #c00; color: #fff; border: 2px solid #c00; }
.csn-btn-r:hover { background: #a00; border-color: #a00; color: #fff; text-decoration: none; }
.csn-btn-g { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.25); }
.csn-btn-g:hover { border-color: rgba(255,255,255,0.5); color: #fff; text-decoration: none; }
.csn-btn-gd { background: transparent; color: #1a1a1a; border: 2px solid #ccc; }
.csn-btn-gd:hover { border-color: #999; color: #1a1a1a; text-decoration: none; }

/* Sections */
.csn-sec { padding: 44px; }
.csn-sec-d { background: #1a1a1a; color: #fff; }
.csn-sec-d h1, .csn-sec-d h2, .csn-sec-d h3, .csn-sec-d h4, .csn-sec-d h5 { color: #fff !important; }
.csn-sec-w { background: #fff; }
.csn-sec-g { background: #f2f2f2; }
.csn-sec-r { background: #c00; color: #fff; }

/* Section headings */
.csn-sh { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.csn-sh h3 { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 2px; white-space: nowrap; text-transform: uppercase; margin: 0; }
.csn-sh .csn-line { flex: 1; height: 2px; background: #c00; }
.csn-sec-d .csn-line { background: rgba(255,255,255,0.12); }

/* Cards */
.csn-cg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.csn-cc { padding: 22px; border-left: 3px solid #c00; background: #fafafa; transition: transform 0.15s; }
.csn-cc:hover { transform: translateX(4px); }
.csn-cc h4 { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; color: #1a1a1a; margin: 0 0 8px 0; text-transform: uppercase; }
.csn-cc-m { font-family: 'Barlow', sans-serif; font-size: 13px; color: #888; margin-bottom: 4px; }
.csn-cc-d { font-family: 'Barlow', sans-serif; font-size: 12px; color: #c00; font-weight: 700; }
.csn-cc-n { font-family: 'Barlow', sans-serif; font-size: 11px; color: #aaa; margin-top: 6px; font-style: italic; }
.csn-cc a { text-decoration: none; color: inherit; }
.csn-cc a:hover { text-decoration: none; color: inherit; }
.csn-cc-other { opacity: 0.45; border-left-color: #ccc !important; }
.csn-cc-other:hover { opacity: 0.65; }
.csn-cc-other .csn-cc-d { color: #c00 !important; font-style: italic; }

/* Stats */
.csn-stats { display: flex; justify-content: center; gap: 70px; padding: 36px 44px; text-align: center; }
.csn-sn { font-family: 'Bebas Neue', sans-serif; font-size: 52px; color: #fff; letter-spacing: 2px; }
.csn-sl { font-family: 'Barlow', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: rgba(255,255,255,0.45); margin-top: 6px; }

/* CTA */
.csn-cta-s { text-align: center; padding: 48px 44px; }
.csn-cta-s h3 { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 2px; margin: 0 0 8px 0; text-transform: uppercase; color: #fff !important; }
.csn-cta-s p { font-family: 'Barlow', sans-serif; font-size: 14px; color: rgba(255,255,255,0.45); margin-bottom: 26px; }

/* Photo strip */
.csn-ps { display: flex; height: 200px; overflow: hidden; }
.csn-ps img { flex: 1; object-fit: cover; min-width: 0; }

/* Acknowledgement */
.csn-ack { background: #f0f0f0; padding: 24px 44px; text-align: center; border-top: 1px solid #e0e0e0; }
.csn-ack p { font-family: 'Barlow', sans-serif; font-size: 11px; color: #999; max-width: 650px; margin: 0 auto; line-height: 1.6; }

/* Footer */
.csn-ft { background: #1a1a1a; padding: 18px 44px; text-align: center; }
.csn-ft p { font-family: 'Barlow', sans-serif; font-size: 12px; color: rgba(255,255,255,0.45); margin: 0; }

/* Selector bar */
.csn-selb { background: #f2f2f2; padding: 22px 44px; display: flex; gap: 22px; border-bottom: 1px solid #e0e0e0; }
.csn-selg { flex: 1; }
.csn-selg label { font-family: 'Barlow', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #1a1a1a; margin-bottom: 6px; display: block; }
.csn-selg select, .csn-selb .form-control { width: 100%; padding: 8px 12px; border: 2px solid #ddd; font-family: 'Barlow', sans-serif; font-size: 13px; background: #fff; border-radius: 0; color: #333 !important; height: 42px !important; line-height: 1.4 !important; overflow: visible !important; }

/* Hint */
.csn-hint { font-family: 'Barlow', sans-serif; background: #f5f5f5; border-left: 4px solid #c00; padding: 12px 16px; font-size: 12px; color: #666; margin-bottom: 22px; }
.csn-hint strong { color: #c00; }

/* Info blocks */
.csn-ig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.csn-ib { padding: 20px; background: #fafafa; border-left: 3px solid #c00; }
.csn-ib h4 { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; color: #1a1a1a; margin: 0 0 8px 0; text-transform: uppercase; }
.csn-ib p { font-family: 'Barlow', sans-serif; font-size: 12px; color: #666; line-height: 1.6; }

/* Map bar */
.csn-mb { display: flex; gap: 0; margin-top: 18px; overflow: hidden; border: 1px solid #eee; }
.csn-mp { flex: 1; height: 200px; }
.csn-mp iframe { width: 100%; height: 100%; border: 0; display: block; }
.csn-mi { width: 260px; background: #fff; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
.csn-mi h4 { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; color: #1a1a1a; margin: 0 0 6px 0; text-transform: uppercase; }
.csn-mi p { font-family: 'Barlow', sans-serif; font-size: 12px; color: #888; line-height: 1.5; }

/* Info content */
.csn-info-content { padding: 40px 44px 50px; background: #fff; font-family: 'Barlow', sans-serif; font-size: 14px; line-height: 1.7; color: #333; }
.csn-info-content h1 { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; color: #1a1a1a; margin: 0 0 16px; }
.csn-info-content h2 { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; color: #1a1a1a; margin: 24px 0 12px; }
.csn-info-content h3 { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; color: #1a1a1a; margin: 20px 0 10px; }
.csn-info-content h4 { font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 16px 0 8px; }
.csn-info-content blockquote { border-left: 4px solid #c00; padding: 12px 20px; margin: 16px 0; background: #f5f5f5; }
.csn-info-content .nav-tabs { border-bottom: 2px solid #eee; margin-bottom: 20px; }
.csn-info-content .nav-tabs > li > a { font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.3px; }
.csn-info-content .nav-tabs > li.active > a,
.csn-info-content .nav-tabs > li.active > a:hover,
.csn-info-content .nav-tabs > li.active > a:focus { color: #c00; border-bottom: 2px solid #c00; }
.csn-info-content .panel-title a { font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 600; color: #1a1a1a; }
.csn-info-content footer { margin-top: 40px; }

/* Responsive */
@media (max-width: 991px) {
    .csn-hero-strip { height: 320px; }
    .csn-hero-strip .csn-ho h1 { font-size: 36px; }
    .csn-hero-full .csn-ho h1 { font-size: 36px; }
    .csn-cg, .csn-ig { grid-template-columns: 1fr; }
    .csn-stats { gap: 40px; }
    .csn-sn { font-size: 40px; }
    .csn-sec { padding: 36px 30px; }
    .csn-announce { padding: 7px 20px; }
}
@media (max-width: 767px) {
    /* Header — revert to block on mobile so old menu toggle works */
    header { padding: 10px 16px !important; display: block !important; height: auto !important; min-height: 50px !important; }
    header > .col-md-12 { display: block !important; }
    #logo { float: left; display: block !important; }
    #logo a img { height: 28px; }
    .menu_container { display: block !important; }
    ul.menu { display: none; }
    .menu > li { display: block !important; padding: 5px 0 !important; }
    .menu > li a { line-height: normal !important; padding: 8px 10px !important; }
    /* Hamburger — far right */
    a#menu-button-mobile { position: absolute !important; right: 16px !important; top: 12px !important; z-index: 10001 !important; }
    /* Mobile menu — solid background, proper z-index */
    .menu_container { background: #ddd !important; position: relative; z-index: 9998; clear: both; }
    .menu_container ul.menu { background: #ddd !important; }
    .menu > li a { color: #333 !important; }
    .menu > li { border-top-color: #ccc !important; }
    .csn-social-nav { display: none !important; }
    /* Announce bar clears shorter mobile header */
    .csn-announce { margin-top: 50px; }
    /* Hero */
    .csn-hero-strip { height: 300px; }
    .csn-hero-strip .csn-ho { padding: 30px 24px; }
    .csn-hero-strip .csn-ho h1 { font-size: 28px; }
    .csn-hero-strip .csn-ho .csn-ctas { flex-direction: column; }
    .csn-hero-full .csn-ho { padding: 30px 24px; }
    .csn-hero-full .csn-ho h1 { font-size: 28px; }
    .csn-sec { padding: 30px 20px; }
    .csn-cta-s { padding: 36px 20px; }
    .csn-stats { flex-direction: column; gap: 20px; padding: 30px 20px; }
    .csn-sn { font-size: 36px; }
    .csn-ps { height: 140px; }
    .csn-hero-full .csn-ctas { flex-direction: column; }
    .csn-btn { display: block; text-align: center; width: 100%; }
    .csn-selb { flex-direction: column; gap: 12px; padding: 16px 20px; }
    .csn-mi { width: 100%; }
    .csn-mb { flex-direction: column; }
    .csn-mp { height: 180px; }
    .csn-ack { padding: 20px; }
    .csn-info-content { padding: 24px 20px 36px; }
}