/*
Theme Name:   SCSFSC
Theme URI:    https://scsfsc.org
Description:  Child theme for the St. Clair Shores Figure Skating Club. Built on Lexa by FlexiThemes. Red, navy, and tan palette matching the club logo.
Author:       St. Clair Shores Figure Skating Club
Author URI:   https://scsfsc.org
Template:     Lexa
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  scsfsc
Tags:         sports, skating, club, child-theme
*/

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

/* ── CSS CUSTOM PROPERTIES ── */
:root {
  --scsfsc-navy:        #0B2545;
  --scsfsc-navy-mid:    #1A3A6B;
  --scsfsc-navy-light:  #2A5298;
  --scsfsc-red:         #C8102E;
  --scsfsc-red-dark:    #A00D24;
  --scsfsc-tan:         #8B7355;
  --scsfsc-tan-light:   #B89A6A;
  --scsfsc-tan-pale:    #F5F0E8;
  --scsfsc-ice:         #EAF3FA;
  --scsfsc-ice-mid:     #D0E8F5;
  --scsfsc-white:       #FFFFFF;
  --scsfsc-bg:          #F7FAFD;
  --scsfsc-text:        #0B2545;
  --scsfsc-text-mid:    #3A4D6B;
  --scsfsc-text-muted:  #6B7FA3;
  --scsfsc-border:      #D0DCE8;
}

/* ── GLOBAL BASE ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Source Sans 3', sans-serif !important;
  background-color: var(--scsfsc-bg) !important;
  color: var(--scsfsc-text) !important;
  font-size: 16px;
  line-height: 1.6;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif !important;
  color: var(--scsfsc-navy);
  line-height: 1.2;
}

p {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--scsfsc-text-mid);
  line-height: 1.7;
}

a {
  color: var(--scsfsc-navy-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--scsfsc-red);
  text-decoration: underline;
}

/* ── OVERRIDE LEXA HEADER ── */
#header,
#header-wrap,
.site-header {
  background: var(--scsfsc-white) !important;
  border-bottom: 3px solid var(--scsfsc-red) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

#site-title a,
.site-title a {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: var(--scsfsc-navy) !important;
}

#site-description,
.site-description {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--scsfsc-red) !important;
}

/* ── OVERRIDE LEXA NAVIGATION ── */
#nav, #nav ul, #nav li,
.main-navigation, .main-navigation ul {
  background: var(--scsfsc-white) !important;
}

#nav li a,
.main-navigation li a {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--scsfsc-text-mid) !important;
}

#nav li a:hover,
#nav li.current-menu-item > a,
.main-navigation li a:hover,
.main-navigation li.current-menu-item > a {
  color: var(--scsfsc-red) !important;
  text-decoration: none !important;
}

/* ── OVERRIDE LEXA FOOTER ── */
#footer, #footer-wrap, .site-footer {
  background: var(--scsfsc-navy) !important;
  color: rgba(255,255,255,0.55) !important;
  border-top: none !important;
}

#footer a, .site-footer a {
  color: #7EB6E8 !important;
}

#footer a:hover, .site-footer a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* ── OVERRIDE LEXA CONTENT AREA ── */
#content, #main, .site-content {
  background: var(--scsfsc-bg) !important;
}

#content-wrap {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ── UTILITY CLASSES ── */
.scsfsc-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--scsfsc-text-muted);
  display: block;
  margin-bottom: 1rem;
}

/* ── HIDE LEXA SITE TITLE (logo handles branding in hero) ── */
#site-title,
#site-description,
.site-title,
.site-description,
#header .site-branding,
#header h1,
#header h2 {
  display: none !important;
}

/* ── NAVY NAVIGATION BAR ── */
/* Lexa's actual nav wrapper uses .menu-primary-container with a bg image */
#nav,
#nav-wrap,
.main-navigation,
#header .nav-wrap,
.menu-primary-container,
.menu-primary-responsive-container {
  background: #0B2545 !important;
  background-image: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

#nav li a,
.main-navigation li a,
.menu-primary-container li a,
.menu-primary-container ul li a {
  color: #fff !important;
  background: transparent !important;
  text-shadow: none !important;
}

#nav li a:hover,
#nav li.current-menu-item > a,
.main-navigation li a:hover,
.main-navigation li.current-menu-item > a,
.menu-primary-container li a:hover,
.menu-primary-container li.current-menu-item > a,
.menu-primary-container li.current_page_item > a {
  background-color: #C8102E !important;
  color: #fff !important;
}

/* ── CLEAN UP HEADER WHITESPACE ── */
/* Hide the site-title/description area; collapse any remaining header height */
#header,
#header-wrap {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Lexa sometimes wraps header content in #header-inner or .header-inner */
#header-inner,
.header-inner {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}