/*
Theme Name:  OVR SCCA Custom Theme 2026
Description: Child theme for Ohio Valley Region SCCA. Red/black SCCA branding,
             light/dark mode, MEC events integration, ACF results display.
Template:    kadence
Version:     2.1.1
Author:      OVR SCCA
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap');

/* ============================================================
   CSS VARIABLES — light mode (default)
   ============================================================ */
:root {
    --ovr-red:       #cc0000;
    --ovr-red-dark:  #990000;
    --ovr-black:     #111111;
    --ovr-white:     #ffffff;
    --ovr-bg:        #ffffff;
    --ovr-text:      #111111;
    --ovr-text-muted:#555555;
    --ovr-border:    #e0e0e0;
    --ovr-surface:   #f5f5f5;
}

/* ============================================================
   DARK MODE — only when body.ovr-dark is set
   ============================================================ */
body.ovr-dark {
    --ovr-bg:        #111111;
    --ovr-text:      #f0f0f0;
    --ovr-text-muted:#aaaaaa;
    --ovr-border:    #333333;
    --ovr-surface:   #1e1e1e;
}

body.ovr-dark,
body.ovr-dark .content-bg,
body.ovr-dark .site,
body.ovr-dark .entry,
body.ovr-dark #main,
body.ovr-dark .site-main {
    background: var(--ovr-bg) !important;
    color: var(--ovr-text) !important;
}

body.ovr-dark p,
body.ovr-dark li,
body.ovr-dark td,
body.ovr-dark th,
body.ovr-dark h1,
body.ovr-dark h2,
body.ovr-dark h3,
body.ovr-dark h4,
body.ovr-dark h5,
body.ovr-dark h6 {
    color: var(--ovr-text) !important;
}

body.ovr-dark a {
    color: #ff6666 !important;
}

/* ============================================================
   GLOBAL TEXT — light mode hardcoded defaults
   ============================================================ */
body, p, li, td, th {
    color: #111111 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #111111 !important;
    font-family: 'Barlow Condensed', sans-serif !important;
}

/* Global link colors controlled via Appearance → Customize → General → Links */

/* ============================================================
   HEADER
   ============================================================ */
#masthead,
.site-header-row-container-inner,
.site-main-header-wrap .site-header-row-container-inner {
    background: #111111 !important;
}

/* Site title */
#masthead .site-title-wrap .site-title,
.site-branding .site-title-wrap .site-title,
#masthead p.site-title {
    color: #ffffff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

#masthead .site-title-wrap .site-description,
.site-branding .site-title-wrap .site-description,
#masthead p.site-description {
    color: #aaaaaa !important;
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

/* Navigation */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: #cccccc !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
    color: #ffffff !important;
}

/* ============================================================
   DARK/LIGHT TOGGLE
   ============================================================ */
.ovr-theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-left: 12px !important;
    transition: border-color 0.2s !important;
}

.ovr-theme-toggle:hover {
    border-color: rgba(255,255,255,0.7) !important;
}

.ovr-toggle-track {
    display: inline-block !important;
    width: 28px !important;
    height: 16px !important;
    background: #444 !important;
    border-radius: 8px !important;
    position: relative !important;
    transition: background 0.2s !important;
}

.ovr-toggle-knob {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    background: #fff !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    transition: left 0.2s !important;
}

body.ovr-dark .ovr-toggle-track { background: #cc0000 !important; }
body.ovr-dark .ovr-toggle-knob  { left: 14px !important; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.ovr-hero {
    position: relative !important;
    min-height: 420px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background: #111111 !important;
}

.ovr-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.ovr-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(150,0,0,0.4) 100%) !important;
}

.ovr-hero-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 48px !important;
    max-width: 700px !important;
}

.ovr-hero-eyebrow {
    color: #cc0000 !important;
    font-size: 0.75rem !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    margin: 0 0 8px !important;
}

.ovr-hero-title {
    color: #ffffff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(2.5rem, 6vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 0 16px !important;
    text-transform: uppercase !important;
}

.ovr-hero-subtitle {
    color: rgba(255,255,255,0.85) !important;
    font-size: 1rem !important;
    margin: 0 0 24px !important;
    max-width: 500px !important;
}

.ovr-hero-cta {
    display: inline-block !important;
    background: #cc0000 !important;
    color: #ffffff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 12px 28px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
}

.ovr-hero-cta:hover {
    background: #990000 !important;
    color: #ffffff !important;
}

.ovr-hero-picker {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 3px !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
}

/* ============================================================
   NEXT EVENT BAR
   ============================================================ */
.ovr-next-event-bar {
    background: #cc0000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 24px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.ovr-bar-label {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.65rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.ovr-bar-name {
    color: #ffffff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.ovr-bar-date {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.85rem !important;
}

.ovr-bar-btn {
    display: inline-block !important;
    background: #ffffff !important;
    color: #cc0000 !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 8px 18px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ovr-bar-btn:hover {
    background: #f0f0f0 !important;
    color: #cc0000 !important;
}

/* ============================================================
   FEATURED IMAGE — cap height
   ============================================================ */
.post-thumbnail,
.post-thumbnail.article-post-thumbnail,
div[class*="kadence-thumbnail-position"],
div[class*="kadence-thumbnail-ratio"] {
    max-height: 200px !important;
    overflow: hidden !important;
}

.post-thumbnail-inner,
div[class*="kadence-thumbnail-position"] .post-thumbnail-inner,
div[class*="kadence-thumbnail-ratio"] .post-thumbnail-inner {
    max-height: 200px !important;
    height: 200px !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

img.post-top-featured,
.post-thumbnail-inner img,
div[class*="kadence-thumbnail-position"] img,
div[class*="kadence-thumbnail-ratio"] img {
    max-height: 200px !important;
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ============================================================
   OVR EVENT LIST — [ovr_events] shortcode output
   ============================================================ */
.ovr-event-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ovr-event-list li {
    display: flex !important;
    gap: 14px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--ovr-border) !important;
    align-items: flex-start !important;
}

.ovr-event-date-block {
    min-width: 54px !important;
    text-align: center !important;
    background: var(--ovr-surface) !important;
    border-radius: 3px !important;
    padding: 8px 6px !important;
    border-top: 3px solid #cc0000 !important;
    flex-shrink: 0 !important;
}

.ovr-event-month {
    display: block !important;
    font-size: 0.65rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #cc0000 !important;
}

.ovr-event-day {
    display: block !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--ovr-text) !important;
    line-height: 1 !important;
}

.ovr-event-info { flex: 1 !important; }

.ovr-event-cat {
    font-size: 0.7rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--ovr-text-muted) !important;
    margin: 0 0 3px !important;
}

.ovr-event-title {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--ovr-text) !important;
    margin: 0 0 4px !important;
}

.ovr-event-title a {
    color: var(--ovr-text) !important;
    text-decoration: none !important;
}

.ovr-event-title a:hover { color: #cc0000 !important; }

.ovr-event-meta {
    font-size: 0.8rem !important;
    color: var(--ovr-text-muted) !important;
    margin: 0 !important;
}

/* ============================================================
   RESULTS — buttons and archive table
   ============================================================ */
.ovr-results-wrap,
.ovr-results-archive,
.ovr-mec-results {
    margin-top: 24px !important;
}

/* Results archive table — transparent background, dark text */
.ovr-results-archive table {
    background: transparent !important;
}

.ovr-results-archive td,
.ovr-results-archive tr {
    background: transparent !important;
    color: #111111 !important;
}

.ovr-results-archive td a {
    color: #111111 !important;
}

.ovr-results-archive {
    overflow-x: auto !important;
}

/* Result file buttons — keep red background with white text */
.ovr-results-wrap a,
.ovr-results-archive td a[target="_blank"],
.ovr-mec-results a,
.ovr-mec-results-buttons a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.ovr-mec-results a:hover,
.ovr-mec-results-buttons a:hover {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* Event list — transparent background, dark text */
.ovr-event-list {
    background: transparent !important;
}

.ovr-event-list li {
    background: transparent !important;
}

.ovr-event-list .ovr-event-title a {
    color: #111111 !important;
}

.ovr-event-list .ovr-event-meta,
.ovr-event-list .ovr-event-cat {
    color: #555555 !important;
}

.ovr-event-list .ovr-event-day {
    color: #111111 !important;
}

/* Dark mode adjustments */
body.ovr-dark .ovr-event-list .ovr-event-title a,
body.ovr-dark .ovr-event-list .ovr-event-day,
body.ovr-dark .ovr-results-archive td,
body.ovr-dark .ovr-results-archive td a {
    color: #f0f0f0 !important;
}

body.ovr-dark .ovr-event-list .ovr-event-meta,
body.ovr-dark .ovr-event-list .ovr-event-cat {
    color: #aaaaaa !important;
}

/* ============================================================
   EVENT DETAIL PAGE — [ovr_event_detail]
   ============================================================ */
.ovr-event-detail .ovr-event-description {
    color: #222222 !important;
    line-height: 1.7 !important;
    font-size: 1rem !important;
}

.ovr-event-detail .ovr-event-description p {
    color: #222222 !important;
}

body.ovr-dark .ovr-event-detail h1 { color: #f0f0f0 !important; }
body.ovr-dark .ovr-event-detail .ovr-event-description,
body.ovr-dark .ovr-event-detail .ovr-event-description p {
    color: #e0e0e0 !important;
}

/* ============================================================
   MEC SINGLE EVENT — results section appended after content
   ============================================================ */
.ovr-mec-results {
    margin-top: 28px !important;
    padding-top: 18px !important;
    border-top: 2px solid #cc0000 !important;
}

.ovr-mec-results h3 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #cc0000 !important;
    margin-bottom: 14px !important;
}

.ovr-mec-results-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 767px) {
    .ovr-hero { min-height: 280px !important; }
    .ovr-hero-content { padding: 24px !important; }
    .ovr-hero-title { font-size: 2.2rem !important; }
    .ovr-next-event-bar { flex-direction: column !important; }
    .ovr-event-list li { flex-direction: column !important; gap: 8px !important; }
    .ovr-event-date-block { display: flex !important; gap: 8px !important; align-items: center !important; }
}

/* ============================================================
   SECONDARY NAV — Kadence header builder top row
   Black background, white text, right-aligned, small font
   ============================================================ */
/* Top header row background */
.site-top-header-wrap,
.site-top-header-wrap .site-header-row-container-inner,
.site-header-row-container.site-top-header-wrap {
    background: #0a0a0a !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Secondary nav links */
.site-top-header-wrap .header-navigation .header-menu-container > ul > li > a,
.site-top-header-wrap nav a,
.site-top-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: #aaaaaa !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.site-top-header-wrap .header-navigation .header-menu-container > ul > li > a:hover,
.site-top-header-wrap nav a:hover {
    color: #ffffff !important;
}

/* Hide on mobile */
@media (max-width: 1024px) {
    .site-top-header-wrap { display: none !important; }
}

/* ============================================================
   NAVIGATION DROPDOWN — fix red text on dark background
   ============================================================ */

/* Dropdown background and text */
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
    background: #1a1a1a !important;
}

.header-navigation .header-menu-container ul ul li.menu-item > a,
.header-navigation .header-menu-container ul ul li.menu-item > a:visited {
    color: #cccccc !important;
}

.header-navigation .header-menu-container ul ul li.menu-item > a:hover {
    color: #ffffff !important;
    background: #cc0000 !important;
}

.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
    color: #ffffff !important;
    background: #cc0000 !important;
}

/* Mobile drawer dropdown items */
.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
    color: #cccccc !important;
}

.mobile-navigation ul li > a:hover {
    color: #ffffff !important;
}

/* ============================================================
   RESULTS ARCHIVE — event title links use Kadence link color
   Only ensure no background color bleeds through
   ============================================================ */
.ovr-results-archive td:first-child a {
    background: transparent !important;
    background-color: transparent !important;
}

/* Event list title links — no background */
.ovr-event-list .ovr-event-title a {
    background: transparent !important;
    background-color: transparent !important;
}



/* ============================================================
   MOBILE DRAWER NAVIGATION — fix red text on dark background
   ============================================================ */
#mobile-drawer .mobile-navigation ul li a,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap a,
.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap,
.drawer-navigation ul li a {
    color: #cccccc !important;
}

#mobile-drawer .mobile-navigation ul li a:hover,
.mobile-navigation ul li > a:hover {
    color: #ffffff !important;
}

#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item > a {
    color: #ffffff !important;
}

/* Mobile drawer toggle button */
.drawer-sub-toggle {
    color: #cccccc !important;
}

/* Mobile drawer background */
#mobile-drawer .drawer-inner {
    background: #111111 !important;
}

#mobile-drawer .drawer-inner a {
    color: #cccccc !important;
}

#mobile-drawer .drawer-inner a:hover {
    color: #ffffff !important;
}

/* ============================================================
   MOBILE DRAWER — top level items with submenus
   ============================================================ */
.drawer-nav-drop-wrap a,
.drawer-nav-drop-wrap a:visited,
#mobile-drawer .drawer-nav-drop-wrap a {
    color: #cccccc !important;
    background: transparent !important;
}

.drawer-nav-drop-wrap a:hover,
#mobile-drawer .drawer-nav-drop-wrap a:hover {
    color: #ffffff !important;
}