/*
Theme Name:  Penny Child
Template:    hello-elementor
Description: Child theme for Penny Hardaway — pennyhardaway.com
Version:     1.0.0
Author:      Brook
Text Domain: penny-child
*/

/* ─── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  --color-bg:      #09090E;
  --color-text:    #ffffff;
  --color-accent:  #2756F0;
  --color-accent-hover: #1E47D4;
  --font-headline: 'Archivo Black', sans-serif;
  --font-body:     'Inter', sans-serif;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Offset all anchor targets so the sticky nav doesn't cover them */
[id] {
  scroll-margin-top: 80px;
}

html,
body {
  background-color: var(--color-bg);
  color:            var(--color-text);
  font-family:      var(--font-body);
  font-size:        16px;
  line-height:      1.6;
  margin:           0;
  padding:          0;
}

/* ─── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  color:       var(--color-text);
  margin-top:  0;
}

a {
  color:           var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ─── Accent utilities ───────────────────────────────────────────────────── */
.accent,
.gold {
  color: var(--color-accent);
}

.btn-accent,
.elementor-button.accent {
  background-color: var(--color-accent);
  color:            #ffffff;
  border:           none;
  font-family:      var(--font-headline);
  letter-spacing:   0.04em;
  text-transform:   uppercase;
}

.btn-accent:hover,
.elementor-button.accent:hover {
  background-color: #1E47D4;
  color:            #ffffff;
  text-decoration:  none;
}

/* ============================================================
   PENNY HARDAWAY — GLOBAL STYLE OVERRIDES
   Kills all Hello Elementor defaults. Never remove.
   ============================================================ */

/* Reset Hello Elementor defaults */
body { background-color: #09090E !important; color: #ffffff !important; }
html { background-color: #09090E !important; }
a, a:visited, a:hover { color: #ffffff !important; text-decoration: none !important; }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Archivo Black', sans-serif !important;
  color: #ffffff !important;
}
p, body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: 'Inter', sans-serif !important;
  color: #999999 !important;
}

/* ── Kill pink/green Hello Elementor link colors ─────────────── */
.site-title a,
.site-title a:hover,
.site-branding a { color: #ffffff !important; }

/* ── Logo / Site title ───────────────────────────────────────── */
.site-title,
.site-title a {
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 1.4rem !important;
  color: #ffffff !important;
  letter-spacing: 0.05em !important;
}

/* ── Nav ─────────────────────────────────────────────────────── */
.main-navigation a,
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item,
header nav a {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
header,
.site-header,
#masthead {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ── Kill ALL green / teal / default Elementor buttons ──────── */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button,
button.elementor-button,
.elementor-widget-button .elementor-button {
  background-color: #2756F0 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  transition: background-color 0.25s ease !important;
}
.elementor-button:hover,
a.elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
  background-color: #1E47D4 !important;
  color: #ffffff !important;
}

/* ── Eyebrow labels ──────────────────────────────────────────── */
.eyebrow .elementor-heading-title {
  color: #2756F0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* ── Remove "Home" page title above content ──────────────────── */
.page-title,
.entry-title,
.elementor-page-title,
h1.entry-title,
.page-header { display: none !important; }

/* ── Section / container backgrounds ────────────────────────── */
.elementor-section,
.e-con,
.elementor-page,
.elementor-inner-section { background-color: #09090E; }

/* Specific section bg overrides (set via Elementor settings) */
.section-hero           { background-color: #09090E !important; }
.section-ventures       { background-color: #09090E !important; }
.section-nike-pm        { background-color: #09090E !important; }
.section-tigers         { background-color: #09090E !important; }
.section-foundation     { background-color: #06060A !important; }
.section-news           { background-color: #09090E !important; }
.section-media          { background-color: #09090E !important; }
.section-appearances    { background-color: #06060A !important; }
.section-shop           { background-color: #09090E !important; }
.section-partners       { background-color: #06060A !important; }
.section-contact        { background-color: #09090E !important; }
.site-footer-section    { background-color: #06060A !important; }

/* ── Hide stats band entirely ────────────────────────────────── */
.section-stats,
.stats-band,
.stats-section { display: none !important; }

/* ── Ventures grid — force 3 columns ─────────────────────────── */
/* Target via JS-added class AND :has() fallback */
.section-ventures.e-con,
.e-con:has(> .e-con-inner > .e-con:has(.venture-num)) {
  flex-wrap: wrap !important;
}
/* Header row full width */
.section-ventures > .e-con-inner > .e-con:first-child,
.e-con:has(.venture-num):not(.e-child) > .e-con-inner > .e-con:first-child {
  width: 100% !important;
  flex: 0 0 100% !important;
}
/* Venture cards: 3 per row — JS adds .venture-card; :has() is fallback */
.venture-card,
.e-con.e-child:has(.venture-num) {
  width: calc(33.333% - 2px) !important;
  flex: 0 0 calc(33.333% - 2px) !important;
  max-width: calc(33.333% - 2px) !important;
  background: #131622 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-left: 3px solid transparent !important;
  padding: 40px !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease !important;
}
/* Last card alone on a row spans 2 cols; solo row spans full width */
.venture-card:last-child:nth-child(3n+2),
.e-con.e-child:has(.venture-num):last-child:nth-child(3n+2) {
  width: calc(66.666% - 2px) !important;
  flex: 0 0 calc(66.666% - 2px) !important;
  max-width: calc(66.666% - 2px) !important;
}
.venture-card:last-child:nth-child(3n+1),
.e-con.e-child:has(.venture-num):last-child:nth-child(3n+1) {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.venture-card:hover,
.e-con.e-child:has(.venture-num):hover {
  border-left-color: #2756F0 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5) !important;
}
.venture-card .venture-num .elementor-heading-title {
  color: #2756F0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
}
.venture-card .venture-title .elementor-heading-title {
  color: #ffffff !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 20px !important;
  margin: 8px 0 !important;
}
.venture-card .venture-body .elementor-text-editor p {
  color: #999999 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
/* Arrow button inside venture card — override global gold bg */
.venture-card .elementor-button,
.e-con.e-child:has(.venture-num) .elementor-button {
  background-color: transparent !important;
  color: rgba(255,255,255,0.35) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
}
.venture-card:hover .elementor-button,
.e-con.e-child:has(.venture-num):hover .elementor-button {
  color: #2756F0 !important;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.section-hero { min-height: 90vh !important; }
.hero-h1 .elementor-heading-title {
  font-size: clamp(48px, 6vw, 84px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
}
.hero-body .elementor-text-editor p {
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.6) !important;
  max-width: 460px !important;
}
/* Hero primary button (Explore) */
.section-hero .e-con:first-child > .e-con .elementor-button:first-child {
  background-color: #2756F0 !important;
  color: #ffffff !important;
}

/* ── Split sections image panels ─────────────────────────────── */
.section-nike-pm .split-parallax,
.section-tigers  .split-parallax {
  background-color: #0E0F1A !important;
  min-height: 520px !important;
}

/* ── Foundation quote ────────────────────────────────────────── */
.foundation-quote {
  border-left: 3px solid #2756F0 !important;
  padding: 16px 28px !important;
  margin: 28px 0 !important;
  background: transparent !important;
}
.foundation-quote p {
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 22px !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  font-style: normal !important;
  margin: 0 !important;
}

/* ── Tabs widget (Shop) ──────────────────────────────────────── */
.elementor-tabs-wrapper {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.elementor-tab-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  background: transparent !important;
  border: none !important;
  padding: 12px 20px !important;
}
.elementor-tab-title.elementor-active,
.elementor-tab-title:hover { color: #ffffff !important; }
.elementor-tab-title.elementor-active {
  border-bottom: 2px solid #2756F0 !important;
}

/* ── CF7 form ────────────────────────────────────────────────── */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100% !important;
  background: #0E0F1A !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  outline: none !important;
  display: block !important;
}
.wpcf7-form input[type="submit"] {
  background: #2756F0 !important;
  color: #ffffff !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 16px 40px !important;
  cursor: pointer !important;
  width: auto !important;
}
.wpcf7-form input[type="submit"]:hover {
  background: #1E47D4 !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer-section { border-top: 1px solid rgba(39,86,240,0.18) !important; }
.footer-logo .elementor-heading-title {
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
  color: #ffffff !important;
}
.footer-tagline .elementor-heading-title,
.footer-copy .elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.28) !important;
  letter-spacing: 0.05em !important;
}

/* ── Page / wrapper backgrounds ──────────────────────────────── */
#page, #content, #primary, #secondary,
.site, .site-content, main,
.elementor-page-content { background-color: #09090E !important; }