/*
Theme Name: CueContactPro Child
Theme URI: https://cuecontactpro.com
Description: Divi child theme for the CueContactPro site templates.
Author: CueContactPro
Template: Divi
Version: 1.0.0
*/

/* ============================================================
   1. BRAND TOKENS
   ============================================================ */
:root {
  --ccp-accent:        #3EDC8A;
  --ccp-accent-hover:  #7CF0B4;
  --ccp-on-accent:     #04120B;
  --ccp-accent-fill:   rgba(62,220,138,.08);
  --ccp-accent-line:   rgba(62,220,138,.40);
  --ccp-accent-glow:   rgba(62,220,138,.18);

  --ccp-bg:            #060807;
  --ccp-section:       #0A0C0B;
  --ccp-section-alt:   #0C100E;
  --ccp-deep:          #080A09;
  --ccp-card:          #0D110F;
  --ccp-input:         #111614;

  --ccp-border:        #1C2420;
  --ccp-border-strong: #2A352F;

  --ccp-text:          #F2F5F3;
  --ccp-body:          #A6B4AC;
  --ccp-muted:         #8FA098;
  --ccp-faint:         #6E7D75;

  --ccp-radius-card:   16px;
  --ccp-radius-lg:     18px;
  --ccp-gutter:        56px;
}

/* ============================================================
   2. BASE
   ============================================================ */
/* NOTE: selectors are `html body`, not `body#top`. Divi usually puts
   id="top" on the body but does not on every install, so #top cannot be
   relied on. `html body` always matches and still outranks Divi's own
   `body` declarations. */
html body {
  background: var(--ccp-bg);
  color: var(--ccp-body);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html body #page-container,
html body #et-main-area,
html body .et_pb_section { background-color: transparent; }

html body h1, html body h2, html body h3, html body h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--ccp-text);
  text-wrap: balance;
}
html body p { text-wrap: pretty; }
html body a { color: var(--ccp-accent); text-decoration: none; }
html body a:hover { color: var(--ccp-accent-hover); }

/* Default post/page content (non-builder pages like "Hello world!") */
html body .entry-content,
html body .et_pb_post_content,
html body #main-content .container { color: var(--ccp-body); }

/* ============================================================
   3. SECTION UTILITIES  — add as a Divi CSS Class on the Section
   ============================================================ */
.ccp-section        { background: var(--ccp-section); padding: 72px 0; }
.ccp-section--alt   { background: var(--ccp-section-alt); }
.ccp-section--deep  { background: var(--ccp-deep); }
.ccp-section--tall  { padding: 104px 0; }
.ccp-section--hairline-top    { border-top: 1px solid var(--ccp-border); }
.ccp-section--hairline-bottom { border-bottom: 1px solid var(--ccp-border); }
.ccp-section .et_pb_row { width: 90%; max-width: 1440px; padding-left: 0; padding-right: 0; }

/* Radial mint glow behind a CTA band */
.ccp-glow { position: relative; overflow: hidden; }
.ccp-glow::before {
  content: ''; position: absolute; left: 50%; top: -220px;
  width: 700px; height: 700px; margin-left: -350px; border-radius: 50%;
  background: radial-gradient(circle, var(--ccp-accent-glow), transparent 66%);
  pointer-events: none;
}
.ccp-glow > * { position: relative; }

/* Faint 80px grid-line texture behind hero + closing CTA sections (matches mockup); combine with .ccp-glow */
.ccp-grid {
background-image:
linear-gradient(var(--ccp-border) 1px, transparent 1px),
linear-gradient(90deg, var(--ccp-border) 1px, transparent 1px);
background-size: 80px 80px;
background-position: -1px -1px;
}

/* ============================================================
   4. TYPE UTILITIES  — add on Text / Blurb modules
   ============================================================ */
.ccp-eyebrow, .ccp-eyebrow p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ccp-accent); margin: 0;
}
.ccp-eyebrow--faint, .ccp-eyebrow--faint p { color: var(--ccp-faint); }

.ccp-h1 h1, .ccp-h1 h2 { font-size: 80px; line-height: .94; letter-spacing: -.04em; }
.ccp-h1--xl h1         { font-size: 104px; line-height: .90; letter-spacing: -.045em; }
.ccp-h1--inner h1      { font-size: 64px; line-height: 1; letter-spacing: -.035em; }
.ccp-h2 h2             { font-size: 40px; line-height: 1.05; letter-spacing: -.025em; }
.ccp-h3 h3, .ccp-h3 h4 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }

.ccp-lead p     { font-size: 20px; line-height: 1.55; color: var(--ccp-body); }
.ccp-body p     { font-size: 16px; line-height: 1.65; color: var(--ccp-muted); }
.ccp-article p  { font-size: 19px; line-height: 1.75; color: #C3CFC9; }
.ccp-mono, .ccp-mono p {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .1em; color: var(--ccp-faint);
}
.ccp-stat, .ccp-stat p {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 56px; line-height: 1; letter-spacing: -.035em;
  color: var(--ccp-accent); margin: 0;
}

/* ============================================================
   5. CARDS  — add on a Blurb, Text or Column
   ============================================================ */
.ccp-card {
  background: var(--ccp-card);
  border: 1px solid var(--ccp-border);
  border-radius: var(--ccp-radius-card);
  padding: 30px;
}
.ccp-card--raised {
  border-color: var(--ccp-border-strong);
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.ccp-card .et_pb_module_header { color: var(--ccp-text); }

/* Numbered chip used above pillar titles */
.ccp-chip {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ccp-accent-fill); border: 1px solid var(--ccp-accent-line);
  font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--ccp-accent);
}

/* Divider between stacked list rows */
.ccp-row-divider { border-bottom: 1px solid #161D19; padding-bottom: 18px; margin-bottom: 18px; }

/* Vertical rule between grid columns (pillars, stats) */
.ccp-col-rule { border-right: 1px solid var(--ccp-border); }
.ccp-col-rule:last-child { border-right: 0; }

/* ============================================================
   6. BUTTONS  — add on Button modules
   ============================================================ */
.ccp-btn.et_pb_button,
.ccp-btn.et_pb_button:hover {
  background: var(--ccp-accent) !important;
  color: var(--ccp-on-accent) !important;
  border: 0 !important; border-radius: 999px !important;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16px;
  padding: 15px 26px !important;
}
.ccp-btn.et_pb_button:hover { background: var(--ccp-accent-hover) !important; }
.ccp-btn.et_pb_button:after { display: none !important; }

.ccp-btn--ghost.et_pb_button,
.ccp-btn--ghost.et_pb_button:hover {
  background: transparent !important;
  color: #E7EEEA !important;
  border: 1px solid var(--ccp-border-strong) !important;
}
.ccp-btn--ghost.et_pb_button:hover { border-color: var(--ccp-accent) !important; color: var(--ccp-accent) !important; }

/* Pills (filters, category chips) */
.ccp-pill {
  display: inline-block; padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--ccp-border); color: var(--ccp-body);
  font-size: 14px; font-weight: 600;
}
.ccp-pill--on {
  background: rgba(62,220,138,.14);
  border-color: var(--ccp-accent-line);
  color: var(--ccp-accent);
}

/* ============================================================
   7. EMAIL OPTIN  — add on the Email Optin module
   ============================================================ */
.ccp-optin .et_pb_newsletter_field input,
.ccp-optin .et_pb_newsletter_field input[type="text"],
.ccp-optin .et_pb_newsletter_field input[type="email"] {
  background: var(--ccp-input) !important;
  border: 1px solid var(--ccp-border-strong) !important;
  border-radius: 999px !important;
  color: var(--ccp-text) !important;
  padding: 17px 22px !important;
  font-size: 16px !important;
}
.ccp-optin .et_pb_newsletter_field input::placeholder { color: var(--ccp-faint) !important; }
.ccp-optin .et_pb_newsletter_button,
.ccp-optin .et_pb_newsletter_button:hover {
  background: var(--ccp-accent) !important;
  color: var(--ccp-on-accent) !important;
  border: 0 !important; border-radius: 999px !important;
  font-weight: 700 !important; padding: 17px 30px !important;
}
.ccp-optin .et_pb_newsletter_button:after { display: none !important; }
/* Field + button on one line */
.ccp-optin--inline .et_pb_newsletter_form { display: flex; gap: 10px; align-items: center; }
.ccp-optin--inline .et_pb_newsletter_field { flex: 1; margin: 0 !important; }

/* ============================================================
   8. FAQ TOGGLE / ACCORDION
   ============================================================ */
.ccp-faq .et_pb_toggle {
  background: transparent !important;
  border: 0 !important; border-bottom: 1px solid var(--ccp-border) !important;
  border-radius: 0 !important; padding: 22px 4px !important;
}
.ccp-faq .et_pb_toggle_title {
  font-family: 'Space Grotesk', sans-serif !important; font-weight: 500 !important;
  font-size: 20px !important; color: var(--ccp-text) !important; padding: 0 !important;
}
.ccp-faq .et_pb_toggle_title:before { color: var(--ccp-accent) !important; font-size: 22px; }
.ccp-faq .et_pb_toggle_content {
  font-size: 16px; line-height: 1.7; color: var(--ccp-muted);
  padding: 14px 0 0 !important; max-width: 720px;
}

/* ============================================================
   9. BLOG GRID
   ============================================================ */
.ccp-blog .et_pb_post {
  background: transparent; border: 0; padding: 0;
}
.ccp-blog .et_pb_image_container { margin: 0 0 14px; }
.ccp-blog .et_pb_image_container img { border-radius: 14px; }
.ccp-blog .entry-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 23px; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 8px;
}
.ccp-blog .entry-title a { color: var(--ccp-text); }
.ccp-blog .entry-title a:hover { color: var(--ccp-accent); }
.ccp-blog .post-meta,
.ccp-blog .post-meta a {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ccp-faint);
}
.ccp-blog .post-content p { font-size: 15px; line-height: 1.6; color: var(--ccp-muted); }

/* ============================================================
   10. TOURNAMENT LIST ROWS  (rendered by the CPT shortcode)
   ============================================================ */
.ccp-events { display: flex; flex-direction: column; gap: 10px; }
.ccp-events__head,
.ccp-event {
  display: grid;
  grid-template-columns: 110px 1fr 200px 130px 120px 130px;
  gap: 20px; align-items: center;
}
.ccp-events__head {
  padding: 0 24px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .12em; color: var(--ccp-faint);
}
.ccp-event {
  padding: 22px 24px; background: var(--ccp-card);
  border: 1px solid var(--ccp-border); border-radius: 14px;
  transition: border-color .2s, background .2s;
}
.ccp-event:hover { border-color: #3A4A42; background: var(--ccp-input); }
.ccp-event__date,
.ccp-event__prize { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--ccp-accent); }
.ccp-event__entry { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--ccp-text); }
.ccp-event__name { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 19px; color: var(--ccp-text); }
.ccp-event__time { font-size: 13px; color: var(--ccp-muted); margin-top: 3px; }
.ccp-event__venue { font-size: 14px; color: var(--ccp-body); }
.ccp-event__format {
  justify-self: start; font-size: 13px; color: var(--ccp-body);
  border: 1px solid #232C27; border-radius: 999px; padding: 6px 12px;
}

/* ============================================================
   11. IMAGE PLACEHOLDER  — remove once real photography lands
   ============================================================ */
.ccp-placeholder {
  display: grid; place-items: center; min-height: 300px;
  border: 1px solid #232C27; border-radius: var(--ccp-radius-lg);
  background: repeating-linear-gradient(135deg, #0E1311 0 14px, #121815 14px 28px);
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .08em; color: #5F6F67;
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .ccp-section { padding: 56px 0; }
  .ccp-section--tall { padding: 72px 0; }
  .ccp-h1 h1, .ccp-h1 h2 { font-size: 52px; }
  .ccp-h1--xl h1 { font-size: 60px; }
  .ccp-h1--inner h1 { font-size: 44px; }
  .ccp-h2 h2 { font-size: 30px; }
  .ccp-stat, .ccp-stat p { font-size: 40px; }
  .ccp-col-rule { border-right: 0; }
  .ccp-events__head { display: none; }
  .ccp-event { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 767px) {
  .ccp-section { padding: 48px 0; }
  .ccp-h1 h1, .ccp-h1 h2 { font-size: 38px; }
  .ccp-h1--xl h1 { font-size: 42px; }
  .ccp-h1--inner h1 { font-size: 34px; }
  .ccp-h2 h2 { font-size: 26px; }
  .ccp-lead p { font-size: 17px; }
  .ccp-optin--inline .et_pb_newsletter_form { flex-direction: column; align-items: stretch; }
  .ccp-event { grid-template-columns: 1fr; }
  /* Divi already drops true parallax to a fixed background on phone */
}


/* === Footer polish additions === */
.ccp-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}
.ccp-footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ccp-accent);
  color: var(--ccp-accent);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.ccp-footer-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ccp-faint);
  margin: 0 0 16px;
}
.ccp-footer-links,
.ccp-footer-links li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding: 0;
}
.ccp-footer-links li {
  margin: 0 0 12px;
}
.ccp-footer-links li:last-child {
  margin-bottom: 0;
}
.ccp-footer-copyright {
  color: var(--ccp-faint);
  font-size: 13px;
  margin-top: 16px;
}


/* ============================================================
 * 13. LAYOUT FIX - remove default WP/Divi white content wrapper
 * ============================================================ */
#main-content { background: transparent; }
.container { padding-top: 0 !important; }


/* ============================================================
 * 14. HERO + HOW-IT-WORKS VISUALS (right-hand app mockup column)
 * ============================================================ */
.ccp-hero-visual { position: relative; height: 100%; min-height: 460px; }
.ccp-hero-shot { min-height: 460px; height: 100%; }
.ccp-hero-float {
	  position: absolute;
	  left: 24px;
	  bottom: 32px;
	  max-width: 260px;
	  z-index: 2;
}
.ccp-hiw-shot { min-height: 420px; height: 100%; }
@media (max-width: 980px) {
	.ccp-hero-visual { min-height: 0; margin-top: 32px; }
	.ccp-hero-shot { min-height: 320px; }
	.ccp-hero-float { position: static; max-width: 100%; margin-top: 16px; }
	
	/* ============================================================
	 *    15. MOBILE NAV FIX
	 *    The flyout menu's positioned ancestor (.et_pb_menu_inner_container)
	 *    shrinks to just the hamburger icon's width once the desktop nav
	 *    links are hidden on mobile, so .et_mobile_menu was stretching
	 *    between left:0/right:0 of a ~44px box instead of being a real
	 *    dropdown. Anchor it to the right edge with an explicit width.
	 *    ============================================================ */
	@media (max-width: 1280px) {
		.et_pb_menu .et_mobile_menu {
			    left: auto !important;
			    right: 0 !important;
			    width: min(320px, 92vw) !important;
		}
		
		/* ============================================================
		 *    16. MOBILE HEADER CTA CLEANUP
		 *    "Sign in" is placeholder text (no link behind it yet) and the
		 *    header's "Get early access" button duplicates the one already
		 *    in the hero just below it, so on mobile: drop the dead text,
		 *    tighten the remaining button, and give the wrapped row real
		 *    spacing so it reads as an intentional bar, not an overflow.
		 *    ============================================================ */
		@media (max-width: 1320px) {
			.et_pb_column_2_tb_header { display: none !important; }
		}
		.ccp-hiw-shot { min-height: 260px; margin-top: 32px; }
	}
}


	/* 16b. Style the "Sign in" / "Get early access" items that
	   functions.php (section 5) injects at the top of the mobile
	   dropdown once the column above is hidden. */
	.et_mobile_menu li.ccp-mobile-cta a {
		display: block;
		text-align: center;
		background: var(--ccp-accent);
		color: var(--ccp-on-accent) !important;
		font-weight: 600;
		border-radius: 999px;
		margin: 4px 16px 10px;
		padding: 10px 0;
	}
	.et_mobile_menu li.ccp-mobile-signin {
		text-align: center;
		color: var(--ccp-muted) !important;
		font-size: 13px;
		padding: 0 16px 10px;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--ccp-border);
	}

/* ============================================================
   17. MOBILE NAV DROPDOWN CONTRAST FIX
   Divi's compiled unified CSS hard-codes a white background on
   .et_mobile_menu, but this site's nav link color is a light
   green-gray meant for dark surfaces — on white it's nearly
   invisible. Force the dropdown back to the site's dark surface
   color so menu items are actually readable.
   ============================================================ */
@media (max-width: 1280px) {
	html body .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu,
	html body .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul {
		background-color: var(--ccp-section) !important;
	}
	html body .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li {
		border-bottom: 1px solid var(--ccp-border) !important;
	}
}


/* ============================================================
   18. MOBILE NAV DROPDOWN POSITIONING FIX (BIS)
   Even after anchoring .et_mobile_menu to right:0 (fix #15), its
   nearest positioned ancestor (.et_pb_menu_inner_container, and
   the .et_pb_menu module + column wrapping it) shrinks to just
   the ~44px hamburger icon once desktop nav links are hidden on
   mobile. "right: 0" relative to a 44px box pushes the 320px
   dropdown almost entirely off-screen to the left instead of
   right-aligning it to the header. Fix: strip position:relative
   from that shrunk chain so the dropdown's containing block
   bubbles up to the full-width header row instead.
   ============================================================ */
@media (max-width: 1280px) {
	html body .et_pb_menu_0_tb_header,
	html body .et_pb_menu_0_tb_header .et_pb_menu_inner_container,
	html body .et_pb_column_1_tb_header {
		position: static !important;
	}
}


/* ============================================================
   19. MOBILE NAV DROPDOWN — SIGN IN / GET EARLY ACCESS
   The header's "Sign in" text and "Get early access" button are
   hidden above (section 16) on mobile/tablet; functions.php clones
   them into this same dropdown (li.ccp-mobile-cta / .ccp-mobile-signin)
   so they're still reachable, just relocated instead of overflowing
   the header once Divi's nav collapses to the hamburger.
   ============================================================ */
@media (max-width: 1280px) {
	html body .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.ccp-mobile-cta {
		margin-top: 8px;
		padding: 16px 20px 0;
		border-top: 1px solid var(--ccp-border);
		border-bottom: none;
	}
	html body .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.ccp-mobile-cta a {
		display: block;
		text-align: center;
		background: var(--ccp-accent);
		color: var(--ccp-on-accent) !important;
		border-radius: 999px;
		padding: 12px 20px;
		font-weight: 600;
	}
	html body .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.ccp-mobile-signin {
		padding: 14px 20px 18px;
		text-align: center;
		font-size: 13px;
		opacity: 0.6;
		border-bottom: none;
	}
}

/* ============================================================
   18. MOBILE HEADER CTA CLEANUP - SPECIFICITY FIX
   Divi's own generated CSS (et-core-unified) forces every header
   row column back to display:flex !important below 1320px via
   ".et_pb_row_0_tb_header > .et_pb_column", which outranks the
   simpler single-class rule in section 16 above. Match its
   specificity (row class + two column classes) so ours wins, and
   keep it as its own top-level media query so it isn't trapped
   inside the narrower 980px wrapper section 16 lives in.
   ============================================================ */
@media (max-width: 1320px) {
	.et_pb_row_0_tb_header > .et_pb_column.et_pb_column_2_tb_header { display: none !important; }
}