/*
Theme Name:   DISCconnector
Theme URI:    https://discconnector.com
Description:  DISCconnector child theme for Hello Elementor. DISC brand colors, global CSS variables, typography, and utility classes. Designed for use with Elementor Pro and MemberPress.
Author:       Parker / DISCconnector
Author URI:   https://discconnector.com
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  discconnector
*/

/* ============================================================
   IMPORT GOOGLE FONTS
   Loaded here as fallback. Elementor also loads these via
   its Global Fonts setting — configure both for reliability.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES — DISC BRAND SYSTEM
   TTI International aligned color convention:
     D = Red, I = Yellow/Gold, S = Green, C = Blue
   ============================================================ */
:root {
  /* DISC Style Colors */
  --disc-d:           #C0392B;   /* D – Dominance */
  --disc-i:           #F39C12;   /* I – Influence  */
  --disc-s:           #27AE60;   /* S – Steadiness */
  --disc-c:           #2980B9;   /* C – Conscientiousness */

  /* Brand Colors */
  --brand-purple:     #6B2D8B;   /* Primary brand / signature */
  --brand-purple-dk:  #531f6e;   /* Darker purple for hover states */
  --brand-purple-lt:  #f3eaf8;   /* Very light purple tint for backgrounds */

  /* Neutrals */
  --charcoal:         #3D3D3D;   /* Body text, secondary UI */
  --charcoal-dk:      #2a2a2a;   /* Darker text, high contrast */
  --mid-gray:         #888888;   /* Subdued labels, captions */
  --light-gray:       #F5F5F5;   /* Section backgrounds */
  --border-gray:      #E2E2E2;   /* Card borders, dividers */
  --white:            #FFFFFF;

  /* Typography */
  --font-display:     'Poppins', sans-serif;
  --font-body:        'Inter', sans-serif;

  /* Spacing scale */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  96px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-card:   0 2px 12px rgba(0,0,0,0.08);
  --shadow-hover:  0 6px 24px rgba(107,45,139,0.15);
  --shadow-deep:   0 8px 32px rgba(0,0,0,0.14);
}

/* ============================================================
   BASE RESET & BODY
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family:  var(--font-body);
  font-size:    17px;
  line-height:  1.7;
  color:        var(--charcoal);
  background:   var(--white);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family:  var(--font-display);
  line-height:  1.2;
  color:        var(--charcoal-dk);
  font-weight:  700;
  margin-top:   0;
}

h1 { font-size: clamp(36px, 5vw, 52px); }
h2 { font-size: clamp(26px, 3.5vw, 36px); }
h3 { font-size: clamp(20px, 2.5vw, 24px); }
h4 { font-size: 20px; }
h5 { font-size: 17px; }

p {
  font-family: var(--font-body);
  color:       var(--charcoal);
  margin-bottom: var(--space-sm);
}

a {
  color:           var(--brand-purple);
  text-decoration: none;
  transition:      color 0.2s ease;
}
a:hover {
  color: var(--brand-purple-dk);
}

/* ============================================================
   ELEMENTOR OVERRIDES
   ============================================================ */

/* Section base */
.elementor-section,
.e-container {
  position: relative;
}

/* Headings inside Elementor */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
}

/* Body text inside Elementor */
.elementor-widget-text-editor p,
.elementor-widget-text-editor {
  font-family: var(--font-body);
}

/* Buttons — global base */
.elementor-button {
  font-family:   var(--font-display) !important;
  font-weight:   600 !important;
  border-radius: var(--radius-md) !important;
  transition:    all 0.2s ease !important;
  letter-spacing: 0.3px;
}

.elementor-button:hover {
  transform:  translateY(-1px);
  box-shadow: var(--shadow-hover);
}

/* ============================================================
   DISC COLOR BAR  — .disc-bar
   Use as a full-width four-color horizontal band.
   Add CSS class "disc-bar" to an Elementor section.
   ============================================================ */
.disc-bar {
  background: linear-gradient(
    to right,
    var(--disc-d) 25%,
    var(--disc-i) 25% 50%,
    var(--disc-s) 50% 75%,
    var(--disc-c) 75%
  );
  height: 6px;
  width: 100%;
}

/* Taller version for decorative use */
.disc-bar-lg {
  background: linear-gradient(
    to right,
    var(--disc-d) 25%,
    var(--disc-i) 25% 50%,
    var(--disc-s) 50% 75%,
    var(--disc-c) 75%
  );
  height: 12px;
  width: 100%;
}

/* ============================================================
   DISC STYLE CHIPS  — .disc-chip-[d|i|s|c]
   Add to Elementor button/text widgets for style badges.
   ============================================================ */
.disc-chip {
  display:        inline-block;
  padding:        4px 12px;
  border-radius:  var(--radius-pill);
  font-family:    var(--font-display);
  font-weight:    600;
  font-size:      13px;
  letter-spacing: 0.5px;
  color:          var(--white);
}

.disc-chip-d { background: var(--disc-d); }
.disc-chip-i { background: var(--disc-i); }
.disc-chip-s { background: var(--disc-s); }
.disc-chip-c { background: var(--disc-c); }
.disc-chip-purple { background: var(--brand-purple); }

/* ============================================================
   CARDS — .dc-card
   ============================================================ */
.dc-card {
  background:    var(--white);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-card);
  padding:       var(--space-md);
  transition:    box-shadow 0.2s ease, transform 0.2s ease;
  border:        1px solid var(--border-gray);
}

.dc-card:hover {
  box-shadow: var(--shadow-hover);
  transform:  translateY(-2px);
}

.dc-card-header {
  height:        4px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin:        calc(-1 * var(--space-md));
  margin-bottom: var(--space-sm);
}

.dc-card-header-d { background: var(--disc-d); }
.dc-card-header-i { background: var(--disc-i); }
.dc-card-header-s { background: var(--disc-s); }
.dc-card-header-c { background: var(--disc-c); }

/* ============================================================
   SECTION UTILITIES
   ============================================================ */

/* Purple background section */
.bg-purple      { background-color: var(--brand-purple); }
.bg-purple *,
.bg-purple h1,
.bg-purple h2,
.bg-purple h3,
.bg-purple p    { color: var(--white); }

/* Charcoal background section */
.bg-charcoal    { background-color: var(--charcoal-dk); }
.bg-charcoal *  { color: var(--white); }

/* Light gray background section */
.bg-light       { background-color: var(--light-gray); }

/* DISC color section backgrounds */
.bg-disc-d      { background-color: var(--disc-d); }
.bg-disc-i      { background-color: var(--disc-i); }
.bg-disc-s      { background-color: var(--disc-s); }
.bg-disc-c      { background-color: var(--disc-c); }

/* Centered text utility */
.text-center    { text-align: center; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.site-hero {
  min-height:    90vh;
  display:       flex;
  align-items:   center;
  background-color: var(--charcoal-dk);
  position:      relative;
  overflow:      hidden;
}

.site-hero::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(135deg, rgba(107,45,139,0.85) 0%, rgba(42,42,42,0.95) 100%);
  z-index:  1;
}

.site-hero .elementor-container {
  position: relative;
  z-index:  2;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
  position:   sticky;
  top:        0;
  z-index:    1000;
  background: var(--white);
  box-shadow: 0 1px 0 var(--border-gray);
}

/* Member nav — shown only to logged-in users */
.member-nav-item { display: none; }
.logged-in .member-nav-item { display: inline-block; }

.guest-nav-item  { display: inline-block; }
.logged-in .guest-nav-item { display: none; }

/* ============================================================
   MEMBER DASHBOARD
   ============================================================ */
.dashboard-wrapper {
  background:   var(--light-gray);
  min-height:   100vh;
  padding:      var(--space-md) 0 var(--space-xl);
}

.dashboard-welcome-bar {
  background:  var(--charcoal-dk);
  padding:     var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.dashboard-disc-card {
  border-radius: var(--radius-lg);
  padding:       var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow:    var(--shadow-card);
}

/* Quick nav tiles grid */
.quick-nav-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-sm);
  margin-bottom:         var(--space-md);
}

@media (max-width: 768px) {
  .quick-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .quick-nav-grid {
    grid-template-columns: 1fr;
  }
}

.quick-nav-tile {
  background:    var(--white);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  text-align:    center;
  box-shadow:    var(--shadow-card);
  transition:    all 0.2s ease;
  cursor:        pointer;
  text-decoration: none;
}

.quick-nav-tile:hover {
  box-shadow:  var(--shadow-hover);
  transform:   translateY(-2px);
}

.quick-nav-tile-icon {
  font-size:     32px;
  margin-bottom: var(--space-xs);
}

.quick-nav-tile-label {
  font-family:  var(--font-display);
  font-weight:  600;
  font-size:    14px;
  color:        var(--charcoal);
}

/* Progress stat boxes */
.stat-box {
  background:    var(--white);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  text-align:    center;
  box-shadow:    var(--shadow-card);
}

.stat-box-number {
  font-family:  var(--font-display);
  font-weight:  700;
  font-size:    36px;
  color:        var(--brand-purple);
  display:      block;
}

.stat-box-label {
  font-family: var(--font-body);
  font-size:   14px;
  color:       var(--mid-gray);
}

/* Membership status strip */
.membership-status-strip {
  background:    var(--brand-purple-lt);
  border:        1px solid rgba(107,45,139,0.2);
  border-radius: var(--radius-md);
  padding:       var(--space-sm) var(--space-md);
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           var(--space-xs);
}

/* ============================================================
   BLOG
   ============================================================ */
.post-disc-chip {
  margin-bottom: var(--space-xs);
}

/* ============================================================
   RESOURCE CARDS
   ============================================================ */
.resource-format-badge {
  display:        inline-block;
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding:        2px 8px;
  border-radius:  var(--radius-sm);
  background:     var(--light-gray);
  color:          var(--mid-gray);
  margin-bottom:  var(--space-xs);
}

/* ============================================================
   PRICING TABLE
   ============================================================ */
.pricing-card {
  background:    var(--white);
  border-radius: var(--radius-lg);
  padding:       var(--space-lg) var(--space-md);
  box-shadow:    var(--shadow-card);
  border:        2px solid transparent;
  text-align:    center;
  transition:    all 0.2s ease;
}

.pricing-card.featured {
  border-color:  var(--brand-purple);
  box-shadow:    var(--shadow-hover);
  position:      relative;
}

.pricing-card.featured::before {
  content:       'Best Value';
  position:      absolute;
  top:           -14px;
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--brand-purple);
  color:         var(--white);
  font-family:   var(--font-display);
  font-size:     12px;
  font-weight:   700;
  padding:       4px 16px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
}

.pricing-price {
  font-family:  var(--font-display);
  font-size:    48px;
  font-weight:  800;
  color:        var(--brand-purple);
  line-height:  1;
  margin:       var(--space-sm) 0;
}

.pricing-period {
  font-size:  14px;
  color:      var(--mid-gray);
}

.pricing-features {
  list-style:  none;
  padding:     0;
  margin:      var(--space-md) 0;
  text-align:  left;
}

.pricing-features li {
  padding:      8px 0;
  border-bottom: 1px solid var(--border-gray);
  font-size:    15px;
  display:      flex;
  align-items:  center;
  gap:          8px;
}

.pricing-features li::before {
  content:       '✓';
  color:         var(--disc-s);
  font-weight:   700;
  flex-shrink:   0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background:  var(--charcoal-dk);
  color:       var(--white);
  padding:     var(--space-xl) 0 var(--space-md);
}

.site-footer a {
  color:       rgba(255,255,255,0.75);
}

.site-footer a:hover {
  color:       var(--white);
}

.footer-bottom {
  border-top:   1px solid rgba(255,255,255,0.1);
  padding-top:  var(--space-sm);
  margin-top:   var(--space-lg);
  font-size:    13px;
  color:        rgba(255,255,255,0.5);
  display:      flex;
  justify-content: space-between;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          var(--space-xs);
}

/* ============================================================
   MEMBERPRESS OVERRIDES
   ============================================================ */
.mepr-login-form,
.mepr-signup-form {
  max-width:     480px;
  margin:        0 auto;
  background:    var(--white);
  padding:       var(--space-md);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-card);
}

.mepr_submit,
.mepr-btn {
  background:    var(--brand-purple) !important;
  color:         var(--white) !important;
  border:        none !important;
  border-radius: var(--radius-md) !important;
  font-family:   var(--font-display) !important;
  font-weight:   600 !important;
  padding:       12px 32px !important;
  cursor:        pointer !important;
  transition:    background 0.2s ease !important;
}

.mepr_submit:hover,
.mepr-btn:hover {
  background: var(--brand-purple-dk) !important;
}

/* Account page table */
.mepr-account-table th {
  background:    var(--brand-purple);
  color:         var(--white);
  font-family:   var(--font-display);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .site-hero { min-height: 70vh; }
}

@media (max-width: 768px) {
  :root {
    --space-lg: 48px;
    --space-xl: 64px;
  }

  body { font-size: 16px; }

  .pricing-price { font-size: 38px; }
}

@media (max-width: 480px) {
  :root {
    --space-md: 24px;
    --space-lg: 40px;
  }
}