/* ============================================================
   MY ENERGY CANADA — C&I BRAND STYLESHEET
   Canadian bright: red + white. NOT the dark/gold Global theme.
   Deploy to: /wp-content/themes/<child-theme>/mec-canadian-brand.css
   Enqueued by: mu-plugins/mec-schema.php
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS — VERIFY AGAINST LIVE SITE BEFORE DEPLOY
   Claude Code: run STEP 2 of the brief to extract the real Divi
   accent colour, then overwrite --mec-red below if it differs.
   Do NOT introduce gold (#F5A623) — that is the My Energy Global /
   Bahamas identity and creates cross-brand confusion on the .ca site.
   ------------------------------------------------------------ */
:root{
  --mec-red:        #D52B1E;  /* primary — Canadian flag red */
  --mec-red-deep:   #A81E14;  /* hover / pressed */
  --mec-red-wash:   #FDF2F1;  /* 4% tint for callout backgrounds */
  --mec-white:      #FFFFFF;
  --mec-mist:       #F5F7FA;  /* alternating light section bg */
  --mec-line:       #E2E8EE;  /* hairlines, table borders */
  --mec-ink:        #1A1A1A;  /* headings, primary body */
  --mec-steel:      #4A5A6A;  /* secondary body text */
  --mec-charcoal:   #1C2530;  /* sparingly: ONE dark band per page max */
  --mec-radius:     4px;
  --mec-shadow:     0 6px 24px rgba(26,26,26,.07);
  --mec-shadow-lift:0 14px 36px rgba(213,43,30,.13);
}

/* ============ HERO VIDEO OVERLAY ============ */
/* Bright treatment: white scrim, red accent, dark text.
   Falls back to a red-tinted scrim if the video is light-heavy. */
.mec-hero-section{position:relative;}
.mec-hero-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 8vw; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 42%,
    rgba(255,255,255,.28) 72%,
    rgba(255,255,255,0) 100%);
}
.mec-hero-overlay a,
.mec-hero-overlay .et_pb_button{pointer-events:auto;}

.mec-hero-eyebrow{
  color:var(--mec-red); font-size:13px; letter-spacing:3px;
  text-transform:uppercase; font-weight:700; margin-bottom:14px;
}
.mec-hero-eyebrow::before{
  content:""; display:inline-block; width:26px; height:3px;
  background:var(--mec-red); vertical-align:middle; margin-right:12px;
}
.mec-hero-h1{
  color:var(--mec-ink); font-size:clamp(32px,4.2vw,56px);
  font-weight:800; line-height:1.1; max-width:780px; margin-bottom:18px;
}
.mec-hero-h1 strong,
.mec-hero-h1 .mec-accent{color:var(--mec-red);}
.mec-hero-sub{
  color:var(--mec-steel); font-size:clamp(16px,1.35vw,19px);
  line-height:1.62; max-width:620px; margin-bottom:30px;
}

/* ============ BUTTONS ============ */
.mec-btn-primary,
.mec-btn-primary.et_pb_button{
  background:var(--mec-red)!important; color:var(--mec-white)!important;
  border:2px solid var(--mec-red)!important; border-radius:var(--mec-radius)!important;
  font-weight:700!important; letter-spacing:.6px!important;
  padding:14px 34px!important; transition:all .22s ease!important;
}
.mec-btn-primary:hover{
  background:var(--mec-red-deep)!important; border-color:var(--mec-red-deep)!important;
  transform:translateY(-2px); box-shadow:var(--mec-shadow-lift);
}
.mec-btn-outline,
.mec-btn-outline.et_pb_button{
  background:transparent!important; color:var(--mec-red)!important;
  border:2px solid var(--mec-red)!important; border-radius:var(--mec-radius)!important;
  font-weight:700!important; padding:12px 32px!important; margin-left:14px!important;
  transition:all .22s ease!important;
}
.mec-btn-outline:hover{background:var(--mec-red)!important; color:#fff!important;}
/* Divi injects an arrow via ::after — suppress so our own arrows read cleanly */
.mec-btn-primary::after,.mec-btn-outline::after{display:none!important;}

/* ============ SECTION SHELLS ============ */
.mec-sec-light{background:var(--mec-white);}
.mec-sec-mist {background:var(--mec-mist);}
.mec-sec-dark {background:var(--mec-charcoal);}         /* max one per page */
.mec-sec-dark h2,.mec-sec-dark h3,.mec-sec-dark h4{color:#fff;}
.mec-sec-dark p,.mec-sec-dark li{color:#C9D3DD;}

.mec-eyebrow{
  display:block; color:var(--mec-red); font-size:12px; font-weight:700;
  letter-spacing:2.4px; text-transform:uppercase; margin-bottom:10px;
}
.mec-h2{color:var(--mec-ink); font-size:clamp(27px,2.8vw,40px); font-weight:800; line-height:1.18;}
.mec-lede{color:var(--mec-steel); font-size:17px; line-height:1.68; max-width:760px;}

/* ============ STAT / CALLOUT ============ */
.mec-stat{
  font-size:clamp(48px,5.6vw,78px); font-weight:800;
  color:var(--mec-red); line-height:1; margin-bottom:6px;
}
.mec-callout{
  background:var(--mec-red-wash);
  border-left:5px solid var(--mec-red);
  border-radius:0 var(--mec-radius) var(--mec-radius) 0;
  padding:26px 30px; margin:30px 0;
}
.mec-callout p{color:var(--mec-ink); font-size:17px; line-height:1.6; margin:0;}
.mec-callout strong{color:var(--mec-red);}

/* ============ ROI / WORKED-EXAMPLE TABLE ============ */
.mec-roi-table{
  width:100%; border-collapse:collapse; font-size:15px;
  background:var(--mec-white); box-shadow:var(--mec-shadow);
  border-radius:var(--mec-radius); overflow:hidden;
}
.mec-roi-table th{
  background:var(--mec-red); color:var(--mec-white);
  text-align:left; padding:14px 16px;
  text-transform:uppercase; letter-spacing:1.4px; font-size:11.5px; font-weight:700;
}
.mec-roi-table td{
  color:var(--mec-steel); padding:13px 16px;
  border-bottom:1px solid var(--mec-line);
}
.mec-roi-table td:first-child{color:var(--mec-ink); font-weight:600;}
.mec-roi-table tr:last-child td{border-bottom:none;}
.mec-roi-table tr:nth-child(even) td{background:#FAFBFC;}
.mec-roi-table tr.mec-total td{background:var(--mec-red-wash); color:var(--mec-ink); font-weight:700;}

/* ============ CAPABILITY / SPEC CARDS ============ */
.mec-card{
  background:var(--mec-white);
  border:1px solid var(--mec-line);
  border-top:4px solid var(--mec-red);
  border-radius:var(--mec-radius);
  box-shadow:var(--mec-shadow);
  padding:34px 28px!important; height:100%;
  transition:transform .24s ease, box-shadow .24s ease;
}
.mec-card:hover{transform:translateY(-5px); box-shadow:var(--mec-shadow-lift);}
.mec-card h3,.mec-card h4{color:var(--mec-ink); margin-bottom:10px;}
.mec-card p{color:var(--mec-steel); font-size:15px; line-height:1.62;}
/* On a dark band, cards stay white — that is intentional contrast */
.mec-sec-dark .mec-card p{color:var(--mec-steel);}

.mec-tag{
  display:inline-block; background:var(--mec-red-wash); color:var(--mec-red);
  font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:2px; margin-bottom:12px;
}

/* ============ FAQ / GEO ANSWER BLOCKS ============ */
/* Question-formatted H2s. Keep them visually distinct — this is the
   structure LLM crawlers extract from. */
.mec-qa{padding:26px 0; border-bottom:1px solid var(--mec-line);}
.mec-qa:last-child{border-bottom:none;}
.mec-qa h2,.mec-qa h3{
  color:var(--mec-ink); font-size:clamp(20px,2vw,26px);
  font-weight:700; line-height:1.3; margin-bottom:12px;
}
.mec-qa h2::before,.mec-qa h3::before{
  content:""; display:block; width:34px; height:3px;
  background:var(--mec-red); margin-bottom:14px;
}
.mec-qa p{color:var(--mec-steel); font-size:16.5px; line-height:1.72; margin-bottom:14px;}
.mec-qa p:last-child{margin-bottom:0;}
.mec-qa strong{color:var(--mec-ink);}
.mec-qa a{color:var(--mec-red); text-decoration:underline; text-underline-offset:3px;}

/* ============ TOPOLOGY STRIP ============ */
.mec-topology{display:flex; flex-wrap:wrap; gap:18px;}
.mec-topology > div{
  flex:1; min-width:240px;
  background:var(--mec-white); border:1px solid var(--mec-line);
  border-top:3px solid var(--mec-red);
  border-radius:var(--mec-radius); padding:26px; box-shadow:var(--mec-shadow);
}
.mec-topology h4{color:var(--mec-ink); margin:0 0 8px; font-size:18px;}
.mec-topology p{color:var(--mec-steel); font-size:14.5px; line-height:1.6; margin:0;}

/* ============ CTA BLOCK ============ */
.mec-cta{
  background:var(--mec-red); border-radius:var(--mec-radius);
  padding:52px 44px; text-align:center;
}
.mec-cta h2{color:var(--mec-white); font-size:clamp(24px,2.6vw,34px); font-weight:800; margin-bottom:12px;}
.mec-cta p{color:rgba(255,255,255,.93); font-size:17px; line-height:1.6; max-width:640px; margin:0 auto 26px;}
.mec-cta .mec-btn-primary,
.mec-cta .et_pb_button{
  background:var(--mec-white)!important; color:var(--mec-red)!important;
  border-color:var(--mec-white)!important;
}
.mec-cta .et_pb_button:hover{background:var(--mec-ink)!important; color:#fff!important; border-color:var(--mec-ink)!important;}

/* ============ GEO / SEO FOOTER BAND ============ */
.mec-geo-footer{background:var(--mec-mist); border-top:4px solid var(--mec-red);}
.mec-geo-footer h2,.mec-geo-footer h3{color:var(--mec-ink);}
.mec-geo-footer p,.mec-geo-footer li{color:var(--mec-steel); font-size:14.5px; line-height:1.72;}
.mec-geo-footer a{color:var(--mec-red);}

/* ============ COMPLIANCE FOOTNOTE ============ */
.mec-disclaimer{
  color:#7A8896; font-size:12.5px; line-height:1.6; font-style:italic;
  border-top:1px solid var(--mec-line); padding-top:14px; margin-top:26px;
}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .mec-hero-overlay{
    position:relative; inset:auto;
    background:var(--mec-white); padding:44px 6vw;
  }
  .mec-btn-outline{margin-left:0!important; margin-top:12px!important; display:block; text-align:center;}
  .mec-cta{padding:38px 24px;}
  .mec-roi-table{font-size:13.5px;}
  .mec-roi-table th,.mec-roi-table td{padding:11px 12px;}
}

/* ============ ACCESSIBILITY ============ */
/* --mec-red on white = 4.6:1 — passes AA for body text.
   Do NOT lighten --mec-red without re-checking contrast. */
.mec-btn-primary:focus-visible,
.mec-btn-outline:focus-visible,
.mec-qa a:focus-visible{outline:3px solid var(--mec-ink); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .mec-card,.mec-btn-primary,.mec-btn-outline{transition:none!important;}
  .mec-card:hover,.mec-btn-primary:hover{transform:none!important;}
}

/* ============ PRINT (CFOs print these pages) ============ */
@media print{
  .mec-hero-overlay{position:relative; background:none;}
  .mec-cta,.mec-btn-primary,.mec-btn-outline{display:none;}
  .mec-roi-table{box-shadow:none; border:1px solid #000;}
}