/* =============================================================
   CNTC DESIGN SYSTEM -- Marketing 360 Global CSS
   Contractors Network & Training Center
   chicagoroofingschool.com
   Last Updated: May 5, 2026
   Changes: Added button color overrides to fix washed-out
            text caused by Marketing 360 platform link styles;
            Added background fill to cntc-btn-outline (CNTC blue)
   ============================================================= */

/* -- DESIGN TOKENS -- */
:root {
  --cntc-blue: #022DC1;
  --cntc-blue-dark: #011a75;
  --cntc-blue-mid: #1a47d4;
  --cntc-blue-light: #E8EDF9;
  --cntc-green: #06C633;
  --cntc-green-dark: #036B1A;
  --cntc-green-light: #E6F8EB;
  --cntc-dark: #0D1220;
  --cntc-gray: #6B7280;
  --cntc-off-white: #F5F6FA;
  --cntc-border: #E2E6F0;
  --cntc-radius: 10px;
  --cntc-radius-lg: 16px;
  --cntc-radius-xl: 24px;
  --cntc-shadow: 0 8px 28px rgba(2,45,193,.10);
}

/* -- BLOCK RESETS -- */
.cntc-block * { box-sizing: border-box; margin: 0; padding: 0; }
.cntc-block { font-family: 'DM Sans', sans-serif; color: var(--cntc-dark); line-height: 1.6; }
.cntc-block a { text-decoration: none; }

/* -- TYPOGRAPHY -- */
.cntc-block h1,
.cntc-block h2,
.cntc-block h3,
.cntc-block .cntc-display {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.01em;
}

/* -- BUTTONS -- */
.cntc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 24px; border-radius: var(--cntc-radius);
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: .9rem; cursor: pointer; border: none;
  text-decoration: none; transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.cntc-btn:hover { transform: translateY(-2px); }

.cntc-btn-green {
  background: var(--cntc-green);
  box-shadow: 0 4px 14px rgba(6,198,51,.3);
}
.cntc-btn-green:hover { box-shadow: 0 6px 20px rgba(6,198,51,.45); }

.cntc-btn-blue {
  background: var(--cntc-blue);
  box-shadow: 0 4px 14px rgba(2,45,193,.25);
}
.cntc-btn-blue:hover { box-shadow: 0 6px 20px rgba(2,45,193,.4); }

.cntc-btn-outline {
  background: var(--cntc-blue);
  border: 2px solid var(--cntc-blue);
}
.cntc-btn-outline:hover { background: var(--cntc-blue-dark); }

.cntc-btn-white {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.cntc-btn-ghost {
  background: #0a1a4a;
  border: 1px solid rgba(255,255,255,.2);
}
.cntc-btn-ghost:hover { background: #112266; }

.cntc-btn-lg { padding: 14px 32px; font-size: 1rem; border-radius: 11px; }

/* -- BUTTON COLOR OVERRIDES --
   Marketing 360 applies global a { color } styles that override
   button text. These pseudo-class rules force correct colors
   on every button state, site-wide, without touching page files. */
.cntc-btn-green,
.cntc-btn-green:link,
.cntc-btn-green:visited,
.cntc-btn-green:hover,
.cntc-btn-green:active { color: #ffffff !important; }

.cntc-btn-blue,
.cntc-btn-blue:link,
.cntc-btn-blue:visited,
.cntc-btn-blue:hover,
.cntc-btn-blue:active { color: #ffffff !important; }

.cntc-btn-white,
.cntc-btn-white:link,
.cntc-btn-white:visited,
.cntc-btn-white:hover,
.cntc-btn-white:active { color: #022DC1 !important; }

.cntc-btn-outline,
.cntc-btn-outline:link,
.cntc-btn-outline:visited,
.cntc-btn-outline:hover,
.cntc-btn-outline:active { color: #ffffff !important; }

.cntc-btn-ghost,
.cntc-btn-ghost:link,
.cntc-btn-ghost:visited,
.cntc-btn-ghost:hover,
.cntc-btn-ghost:active { color: #ffffff !important; }

.cntc-aside-cta .a-green,
.cntc-aside-cta .a-green:link,
.cntc-aside-cta .a-green:visited,
.cntc-aside-cta .a-green:hover,
.cntc-aside-cta .a-green:active { color: #ffffff !important; }

.cntc-aside-cta .a-ghost,
.cntc-aside-cta .a-ghost:link,
.cntc-aside-cta .a-ghost:visited,
.cntc-aside-cta .a-ghost:hover,
.cntc-aside-cta .a-ghost:active { color: #ffffff !important; }

.cntc-sidebar-cta a,
.cntc-sidebar-cta a:link,
.cntc-sidebar-cta a:visited,
.cntc-sidebar-cta a:hover,
.cntc-sidebar-cta a:active { color: #ffffff !important; }

/* -- HERO SECTIONS -- */
.cntc-hero {
  position: relative; overflow: hidden;
  padding: 80px 48px 72px;
}
.cntc-hero-blue { background: var(--cntc-blue); }
.cntc-hero-green { background: linear-gradient(145deg, var(--cntc-green-dark) 0%, #027a1a 100%); }
.cntc-hero-orange { background: linear-gradient(145deg, #6b2a00 0%, #c96000 100%); }
.cntc-hero-teal { background: linear-gradient(145deg, #004f66 0%, #0095b6 100%); }
.cntc-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.cntc-hero-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.cntc-hero-inner {
  position: relative; max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start;
}
.cntc-hero-inner-center {
  position: relative; max-width: 760px; margin: 0 auto; text-align: center;
}
.cntc-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(6,198,51,.12); border: 1px solid rgba(6,198,51,.3);
  color: var(--cntc-green); padding: 5px 14px; border-radius: 99px;
  font-size: .75rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 16px;
}
.cntc-eyebrow::before {
  display: none;
}
.cntc-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 900;
  color: #fff; line-height: 1.04; margin-bottom: 16px;
}
.cntc-hero h1 em { font-style: normal; color: var(--cntc-green); }
.cntc-hero-sub {
  color: rgba(255,255,255,.75); font-size: 1rem; line-height: 1.75;
  margin-bottom: 28px; max-width: 520px;
}
.cntc-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cntc-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.cntc-pill {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.8); padding: 5px 13px; border-radius: 99px;
  font-size: .78rem; font-weight: 500;
}
.cntc-pill-urgent {
  background: rgba(255,100,100,.15); border-color: rgba(255,100,100,.3);
  color: #ffaaaa;
}

/* -- ASIDE / SCHEDULE CARD -- */
.cntc-aside-card {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px); border-radius: var(--cntc-radius-xl); padding: 28px;
}
.cntc-aside-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.05rem; color: #fff; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.cntc-aside-title::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background: var(--cntc-green); border-radius: 50%;
  box-shadow: 0 0 6px var(--cntc-green);
}
.cntc-aside-row {
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding: 11px 0; display: flex; justify-content: space-between; align-items: center;
}
.cntc-aside-row:last-of-type { border-bottom: none; }
.cntc-aside-label { font-size: .82rem; color: rgba(255,255,255,.5); font-weight: 500; }
.cntc-aside-val { font-size: .88rem; font-weight: 700; color: #fff; text-align: right; }
.cntc-aside-cta { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.cntc-aside-cta a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; border-radius: var(--cntc-radius); font-weight: 700;
  font-size: .875rem; text-decoration: none; text-align: center;
}
.cntc-aside-cta .a-green { background: var(--cntc-green); }
.cntc-aside-cta .a-ghost { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); }

/* -- ACCENT BAR -- */
.cntc-accent-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--cntc-blue) 0%, var(--cntc-green) 100%);
}

/* -- CONTENT SECTIONS -- */
.cntc-section { padding: 72px 48px; }
.cntc-section-inner { max-width: 1100px; margin: 0 auto; }
.cntc-section-white { background: #fff; }
.cntc-section-off { background: var(--cntc-off-white); }
.cntc-section-blue { background: var(--cntc-blue); }
.cntc-section-eyebrow {
  font-size: .72rem; font-weight: 700; color: var(--cntc-green-dark);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.cntc-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900;
  color: var(--cntc-blue); line-height: 1.1;
}
.cntc-section-sub {
  color: var(--cntc-gray); font-size: .95rem; margin-top: 10px; line-height: 1.75;
}

/* -- TWO-COL LAYOUT -- */
.cntc-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.cntc-two-col-even { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }

/* -- CONTENT CARDS -- */
.cntc-card {
  background: var(--cntc-off-white); border-radius: var(--cntc-radius-lg);
  padding: 30px; margin-bottom: 22px; border: 1px solid var(--cntc-border);
}
.cntc-card:last-child { margin-bottom: 0; }
.cntc-card-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.2rem; color: var(--cntc-blue); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.cntc-card-icon {
  width: 36px; height: 36px; background: var(--cntc-blue-light);
  border-radius: 9px; display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.cntc-card-body { font-size: .9rem; color: var(--cntc-gray); line-height: 1.75; }
.cntc-card-body p { margin-bottom: 12px; }
.cntc-card-body p:last-child { margin-bottom: 0; }
.cntc-card-body strong { color: var(--cntc-dark); }
.cntc-card-body ul { padding-left: 0; list-style: none; }
.cntc-card-body ul li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .875rem; color: var(--cntc-dark); margin-bottom: 9px;
}
.cntc-card-body ul li::before { content: '\276F'; font-size: .9rem; flex-shrink: 0; }

/* -- CALLOUT BOXES -- */
.cntc-callout {
  border-left: 4px solid; border-radius: 0 var(--cntc-radius) var(--cntc-radius) 0;
  padding: 15px 18px; font-size: .875rem; line-height: 1.65; margin-top: 16px;
}
.cntc-callout-blue { background: var(--cntc-blue-light); border-left-color: var(--cntc-blue); color: var(--cntc-dark); }
.cntc-callout-blue strong { color: var(--cntc-blue); }
.cntc-callout-green { background: var(--cntc-green-light); border-left-color: var(--cntc-green-dark); color: var(--cntc-dark); }
.cntc-callout-green strong { color: var(--cntc-green-dark); }
.cntc-callout-red { background: #fdf0f0; border-left-color: #c0000a; color: var(--cntc-dark); }
.cntc-callout-red strong { color: #c0000a; }
.cntc-callout-orange { background: #FFF3E0; border-left-color: #c96000; color: var(--cntc-dark); }
.cntc-callout-orange strong { color: #c96000; }

/* -- FAQ ACCORDION -- */
.cntc-faq { display: flex; flex-direction: column; gap: 10px; }
.cntc-faq-item {
  border: 1px solid var(--cntc-border); border-radius: var(--cntc-radius);
  overflow: hidden; background: #fff;
}
.cntc-faq-q {
  padding: 16px 20px; font-weight: 700; color: var(--cntc-blue);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-size: .9rem; user-select: none;
}
.cntc-faq-q:hover { background: var(--cntc-off-white); }
.cntc-faq-q::after { content: '+'; font-size: 1.2rem; font-weight: 300; color: var(--cntc-gray); }
.cntc-faq-item.open .cntc-faq-q::after { content: '-'; }
.cntc-faq-a {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  font-size: .875rem; color: var(--cntc-gray); line-height: 1.7;
}
.cntc-faq-item.open .cntc-faq-a { max-height: 400px; }
.cntc-faq-a-inner { padding: 0 20px 16px; }

/* -- STEPS -- */
.cntc-steps { display: flex; flex-direction: column; gap: 18px; }
.cntc-step { display: flex; gap: 16px; align-items: flex-start; }
.cntc-step-num {
  width: 38px; height: 38px; background: var(--cntc-blue); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: 1.1rem; flex-shrink: 0;
}
.cntc-step-title { font-weight: 700; color: var(--cntc-blue); margin-bottom: 4px; font-size: .9rem; }
.cntc-step-body { font-size: .875rem; color: var(--cntc-gray); line-height: 1.65; }

/* -- DEADLINE BOXES -- */
.cntc-deadline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cntc-deadline-box {
  border-radius: var(--cntc-radius-lg); padding: 24px; text-align: center;
}
.cntc-deadline-blue { background: var(--cntc-blue-light); border: 2px solid var(--cntc-blue); }
.cntc-deadline-red { background: #fdf0f0; border: 2px solid rgba(192,0,10,.3); }
.cntc-deadline-days {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 3rem; font-weight: 900; line-height: 1;
  white-space: nowrap;
}
.cntc-deadline-blue .cntc-deadline-days { color: var(--cntc-blue); }
.cntc-deadline-red .cntc-deadline-days { color: #c0000a; }
.cntc-deadline-type { font-weight: 700; font-size: .9rem; margin: 8px 0 4px; }
.cntc-deadline-desc { font-size: .78rem; color: var(--cntc-gray); line-height: 1.5; }

/* -- SIDEBAR -- */
.cntc-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
.cntc-sidebar-card {
  background: var(--cntc-off-white); border: 1px solid var(--cntc-border);
  border-radius: var(--cntc-radius-lg); padding: 24px;
}
.cntc-sidebar-card-blue { background: var(--cntc-blue); border-color: var(--cntc-blue); }
.cntc-sidebar-card-red { background: #fdf0f0; border-color: rgba(192,0,10,.2); }
.cntc-sidebar-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1rem; color: var(--cntc-blue); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 14px;
}
.cntc-sidebar-card-blue .cntc-sidebar-title { color: #fff; }
.cntc-sidebar-card-red .cntc-sidebar-title { color: #c0000a; }
.cntc-sidebar-row {
  display: flex; justify-content: space-between; font-size: .84rem;
  padding: 9px 0; border-bottom: 1px solid var(--cntc-border);
}
.cntc-sidebar-row:last-of-type { border-bottom: none; }
.cntc-sidebar-key { color: var(--cntc-gray); font-weight: 500; }
.cntc-sidebar-val { font-weight: 700; color: var(--cntc-dark); }
.cntc-sidebar-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.cntc-sidebar-cta a {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; border-radius: var(--cntc-radius); font-weight: 700;
  font-size: .875rem; text-decoration: none; width: 100%;
}

/* -- VALUE GRID -- */
.cntc-value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cntc-value-box {
  background: #fff; border: 1px solid var(--cntc-border);
  border-radius: var(--cntc-radius-lg); padding: 20px;
}
.cntc-value-icon { font-size: 1.5rem; margin-bottom: 10px; }
.cntc-value-title { font-weight: 700; color: var(--cntc-blue); font-size: .875rem; margin-bottom: 5px; }
.cntc-value-body { font-size: .82rem; color: var(--cntc-gray); line-height: 1.6; }

/* -- CURRICULUM LIST -- */
.cntc-curriculum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cntc-curriculum li {
  display: flex; align-items: center; gap: 9px;
  font-size: .875rem; color: var(--cntc-dark); list-style: none;
}
.cntc-curriculum li::before { content: '\1F4CC'; font-size: .85rem; }

/* -- TESTIMONIALS -- */
.cntc-tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cntc-tcard {
  background: var(--cntc-off-white); border: 1px solid var(--cntc-border);
  border-radius: var(--cntc-radius-lg); padding: 24px;
}
.cntc-tcard-dark {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.11);
}
.cntc-tcard-stars { color: #FFD600; font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px; }
.cntc-tcard-text {
  font-size: .875rem; color: var(--cntc-gray); line-height: 1.72;
  font-style: italic; margin-bottom: 14px;
}
.cntc-tcard-dark .cntc-tcard-text { color: rgba(255,255,255,.75); }
.cntc-tcard-author { font-weight: 700; color: var(--cntc-blue); font-size: .85rem; }
.cntc-tcard-dark .cntc-tcard-author { color: #fff; }
.cntc-tcard-course { font-size: .75rem; color: var(--cntc-green-dark); margin-top: 3px; font-weight: 600; }
.cntc-tcard-dark .cntc-tcard-course { color: var(--cntc-green); }

/* -- CTA BAND -- */
.cntc-cta-band { padding: 72px 48px; text-align: center; }
.cntc-cta-band-green { background: linear-gradient(135deg, var(--cntc-green-dark) 0%, var(--cntc-green) 100%); }
.cntc-cta-band-blue { background: linear-gradient(135deg, var(--cntc-blue) 0%, var(--cntc-blue-mid) 100%); }
.cntc-cta-band-orange { background: linear-gradient(135deg, #6b2a00 0%, #c96000 100%); }
.cntc-cta-band-teal { background: linear-gradient(135deg, #004f66 0%, #0095b6 100%); }
.cntc-cta-inner { max-width: 700px; margin: 0 auto; }
.cntc-cta-band h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; margin-bottom: 12px;
}
.cntc-cta-band p { color: rgba(255,255,255,.82); font-size: 1rem; margin-bottom: 30px; }
.cntc-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* -- STAT BOXES -- */
.cntc-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.cntc-stat-box {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--cntc-radius); padding: 18px; text-align: center;
}
.cntc-stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem; font-weight: 900; color: var(--cntc-green);
}
.cntc-stat-label {
  font-size: .72rem; color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 4px;
}

/* -- DARK FEATURE CARD -- */
.cntc-dark-card {
  background: linear-gradient(135deg, var(--cntc-blue) 0%, var(--cntc-blue-dark) 100%);
  border-radius: var(--cntc-radius-lg); padding: 28px; color: #fff;
}
.cntc-dark-card-badge {
  display: inline-block; background: var(--cntc-green); color: #fff;
  font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 99px;
  margin-bottom: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.cntc-dark-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; color: #fff;
}
.cntc-dark-card p { font-size: .875rem; color: rgba(255,255,255,.72); line-height: 1.65; margin-bottom: 16px; }

/* -- TAGS -- */
.cntc-tag {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-size: .72rem; font-weight: 700;
}
.cntc-tag-roofing { background: var(--cntc-blue-light); color: var(--cntc-blue); }
.cntc-tag-pa { background: var(--cntc-green-light); color: var(--cntc-green-dark); }
.cntc-tag-masonry { background: #FFF3E0; color: #7a4900; }
.cntc-tag-xact { background: #E3F2FD; color: #0055a0; }
.cntc-tag-limited { background: rgba(255,180,0,.18); color: #a07000; }

/* -- MISC -- */
.cntc-block-faq-init { display: none; }

/* -- MARKETING 360 NAV OVERRIDES --
   Makes the M360 nav sticky, clean, and on-brand.
   These target M360's native nav classes. ----------------------------------------- */

/* Sticky frosted nav */
header, .site-header, [class*="header"], [class*="Header"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 0 #E2E6F0, 0 4px 16px rgba(2,45,193,.06) !important;
}

/* Nav link styling */
nav a, .nav-link, [class*="nav"] a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: #0D1220 !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
nav a:hover, .nav-link:hover, [class*="nav"] a:hover {
  color: #022DC1 !important;
}

/* -- PAGE BACKGROUND + MOBILE HERO FIX --
   Forces white page background and removes green bleed
   around hero sections on mobile. ----------------------------------------- */
body, html,
[class*="page"], [class*="Page"],
[class*="site"], [class*="Site"],
main, .main {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Remove margin/padding causing hero to not fill full width on mobile */
@media (max-width: 768px) {
  .cntc-hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .cntc-hero-inner-center { padding: 0 4px; }
  /* Keep 16px breathing room on sides for content sections */
  .cntc-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .cntc-cta-band {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* -- PAGE TOP GAP FIX --
   Removes whitespace between nav and first HTML block content.
   M360 adds margin/padding to its block containers. ----------------------------------------- */
.page-content > *:first-child,
.page-content-wrapper > *:first-child,
[class*="pageContent"] > *:first-child,
[class*="PageContent"] > *:first-child,
[class*="block"]:first-child,
[class*="Block"]:first-child,
main > *:first-child,
main > section:first-child,
.site-content > *:first-child,
[class*="siteContent"] > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Also zero out any wrapper divs M360 adds above HTML blocks */
[class*="html-block"]:first-child,
[class*="htmlBlock"]:first-child,
[class*="content-block"]:first-child,
[class*="contentBlock"]:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* -- LOGO BOX FIX --
   Removes any background, border, padding or box-shadow
   from the logo container in the nav. ----------------------------------------- */
nav img, header img,
[class*="logo"] img, [class*="Logo"] img,
[class*="logo"], [class*="Logo"],
[class*="brand"], [class*="Brand"],
[class*="logo-wrap"], [class*="logoWrap"],
[class*="logo-container"], [class*="logoContainer"],
[class*="site-logo"], [class*="siteLogo"],
[class*="header-logo"], [class*="headerLogo"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Target any div/span wrapping the logo image */
header a img,
header > * img,
[class*="header"] a img {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Remove background from logo link wrapper */
header a[href="/"],
header a[href="https://www.chicagoroofingschool.com"],
header a[href="https://chicagoroofingschool.com"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* -- DROPDOWN MENU -- Desktop only
   CNTC Blue background + white text on submenus only.
   Scoped to min-width:769px so mobile menu is not affected. ----------------------------------------- */
@media (min-width: 769px) {
  nav ul ul,
  nav ol ol,
  .dropdown-menu,
  [class*="sub-menu"],
  [class*="submenu"],
  [class*="SubMenu"],
  [class*="subMenu"] {
    background: #022DC1 !important;
    background-color: #022DC1 !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(2,45,193,.3) !important;
    padding: 6px !important;
  }

  nav ul ul a,
  nav ul ul a:link,
  nav ul ul a:visited,
  nav ul ul a:hover,
  nav ul ul a:active,
  nav ol ol a,
  nav ol ol a:link,
  nav ol ol a:visited,
  .dropdown-menu a,
  .dropdown-menu a:link,
  .dropdown-menu a:visited,
  [class*="sub-menu"] a,
  [class*="sub-menu"] a:link,
  [class*="sub-menu"] a:visited,
  [class*="submenu"] a,
  [class*="submenu"] a:link,
  [class*="submenu"] a:visited,
  [class*="SubMenu"] a,
  [class*="subMenu"] a {
    color: #ffffff !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    padding: 9px 14px !important;
    border-radius: 6px !important;
    display: block !important;
  }

  nav ul ul a:hover,
  nav ol ol a:hover,
  .dropdown-menu a:hover,
  [class*="sub-menu"] a:hover,
  [class*="submenu"] a:hover,
  nav ul ul li:hover,
  nav ul ul li.active,
  nav ul ul a.active,
  [class*="sub-menu"] li:hover,
  [class*="submenu"] li:hover {
    background: #06C633 !important;
    background-color: #06C633 !important;
    color: #ffffff !important;
  }

  /* Remove any platform blue highlight on dropdown items */
  nav ul ul li,
  [class*="sub-menu"] li,
  [class*="submenu"] li,
  nav ul ul a,
  [class*="sub-menu"] a {
    background-color: transparent !important;
  }
  nav ul ul li:hover > a,
  [class*="sub-menu"] li:hover > a {
    background: #06C633 !important;
    color: #ffffff !important;
  }
}

/* -- NAV BUTTON TEXT COLOR FIX --
   Forces white text on Marketing 360's native green nav buttons
   regardless of platform link color overrides. ----------------------------------------- */
a[href*="tel"],
a[href*="contact"],
.btn-primary,
[class*="btn"][style*="background"],
[class*="button"][style*="background"],
nav a[style*="background"],
header a[style*="background:#06C633"],
header a[style*="background: #06C633"],
header a[style*="background:var(--green)"],
header a[style*="background:#022DC1"],
header a[style*="background: #022DC1"] {
  color: #ffffff !important;
}

/* -- MOBILE NAV MENU FIX --
   Green background + white text for the mobile hamburger menu ---- */
@media (max-width: 768px) {
  /* Mobile menu overlay/panel -- CNTC green background */
  [class*="mobile-menu"], [class*="mobileMenu"],
  [class*="mobile-nav"], [class*="mobileNav"],
  [class*="nav-mobile"], [class*="navMobile"],
  [class*="menu-overlay"], [class*="menuOverlay"],
  [class*="nav-overlay"], [class*="navOverlay"],
  [class*="hamburger-menu"], [class*="hamburgerMenu"],
  [class*="slide-menu"], [class*="slideMenu"],
  [class*="drawer"], [class*="Drawer"],
  nav[class*="open"], nav[class*="active"],
  .mobile-open nav, .nav-open nav,
  header nav ul, header nav ol,
  nav > ul, nav > ol {
    background: #06C633 !important;
    background-color: #06C633 !important;
  }

  /* All mobile nav links -- white text */
  header nav a, header nav li a,
  nav > ul > li > a, nav > ol > li > a,
  nav ul a, nav ol a,
  [class*="mobile"] a, [class*="Mobile"] a,
  [class*="nav"] a, [class*="menu"] a {
    color: #ffffff !important;
  }

  /* Mobile nav link hover */
  header nav a:hover, nav ul a:hover, nav ol a:hover {
    color: rgba(255,255,255,.8) !important;
    background: rgba(0,0,0,.1) !important;
  }
}

/* ================================================================
   RESPONSIVE -- Clean mobile rules
   ================================================================ */
@media (max-width: 768px) {

  /* Claim services page - force all grids to respect mobile width */
  .cntc-block { overflow-x: hidden !important; }
  .cntc-block * { max-width: 100%; box-sizing: border-box; }
  .cntc-block p, .cntc-block div { word-break: break-word; }

  /* Services strip -- switch from grid to list on mobile */
  .cntc-services-desktop { display: none !important; }
  .cntc-services-mobile { display: flex !important; }

  /* Logo -- shrink aggressively on mobile so hamburger stays visible */
  header img, [class*="logo"] img, [class*="Logo"] img,
  [class*="brand"] img, [class*="Brand"] img {
    max-height: 48px !important;
    max-width: 120px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Mobile "Menu" bar -- force CNTC blue */
  [class*="mobile-nav"], [class*="mobileNav"],
  [class*="mobile-menu-bar"], [class*="mobileMenuBar"],
  [class*="nav-mobile"], [class*="navMobile"],
  [class*="menu-bar"], [class*="menuBar"],
  [class*="mobile-header"], [class*="mobileHeader"] {
    background: #022DC1 !important;
    background-color: #022DC1 !important;
    color: #ffffff !important;
  }

  /* Target the specific dark navy bar style */
  [style*="background-color: rgb(26, 35, 64)"],
  [style*="background: rgb(26, 35, 64)"],
  [style*="background-color:#1a2340"],
  [style*="background:#1a2340"] {
    background: #022DC1 !important;
    background-color: #022DC1 !important;
  }

  /* Hamburger / mobile menu button -- force visible and push right */
  [class*="hamburger"], [class*="Hamburger"],
  [class*="menu-toggle"], [class*="menuToggle"],
  [class*="nav-toggle"], [class*="navToggle"],
  [class*="mobile-menu"], [class*="mobileMenu"],
  button[class*="menu"], button[class*="nav"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: relative !important;
  }

  /* Hero -- full width, centered, good padding */
  .cntc-hero {
    padding: 48px 24px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  .cntc-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .cntc-hero-inner-center {
    text-align: center !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Hide aside card on mobile -- designed for desktop only */
  .cntc-aside-card { display: none !important; }

  /* Stack all grids to single column */
  .cntc-two-col { grid-template-columns: 1fr !important; }
  .cntc-two-col-even { grid-template-columns: 1fr !important; }
  .cntc-curriculum { grid-template-columns: 1fr !important; }
  .cntc-value-grid { grid-template-columns: 1fr !important; }
  .cntc-deadline-grid { grid-template-columns: 1fr !important; }
  .cntc-stat-grid { grid-template-columns: 1fr 1fr !important; }
  .cntc-course-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr !important; }

  /* Section padding */
  .cntc-section { padding: 40px 20px !important; }
  .cntc-cta-band { padding: 48px 24px !important; }
  .cntc-sidebar { position: static !important; }

  /* Hide course card descriptions */
  .cntc-mobile-hide { display: none !important; }

  /* Calendar */
  .cntc-desktop-calendar { display: none !important; }
  .cntc-mobile-calendar { display: flex !important; }
}

/* ================================================================
   DESKTOP ONLY
   ================================================================ */
@media (min-width: 769px) {
  .cntc-mobile-hide { display: block !important; }
  .cntc-mobile-calendar { display: none !important; }
  .cntc-desktop-calendar { display: block !important; }
  .cntc-aside-card { display: block !important; }
  .cntc-services-desktop { display: grid !important; }
  .cntc-services-mobile { display: none !important; }
}

/* ============================================================
   CNTC -- M360 FORM STYLING (Global Site CSS)
   ============================================================
   Append this to the END of your existing site CSS in
   M360 Developer Tools -> CSS.

   This styles M360 forms embedded via the script-based loader
   (<script src="https://forms.marketing360.com/load.js?id=..." />)
   which render INLINE on the page (not in an iframe).

   The earlier Advanced Styling we put in the form editor will
   still apply to the iframe version of the same form.
   ============================================================ */

/* ----- FORM CONTAINER ----- */
.cntc-block form[id^="5e2b6593"],
.cntc-block .madform,
form[id^="5e2b6593"] {
  background: #FFFFFF !important;
  padding: 28px 24px !important;
  border: 1px solid #E2E6F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(2, 29, 77, 0.08) !important;
  max-width: 600px;
  margin: 0 auto !important;
}

/* ----- FORM TITLE ("Contact Us") ----- */
form[id^="5e2b6593"] h1,
form[id^="5e2b6593"] h2,
form[id^="5e2b6593"] .h1-field-wrapper,
form[id^="5e2b6593"] .h2-field-wrapper {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 900 !important;
  color: #022DC1 !important;
  line-height: 1.15 !important;
  margin: 0 0 22px !important;
  padding: 0 0 4px !important;
  border: none !important;
  letter-spacing: -0.01em !important;
  background: transparent !important;
}

/* Hide M360's default heading divider/hr */
form[id^="5e2b6593"] hr,
form[id^="5e2b6593"] .h2-field-wrapper hr,
form[id^="5e2b6593"] .h2-field-wrapper::after,
form[id^="5e2b6593"] .h2-field-wrapper::before {
  display: none !important;
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
  content: none !important;
}

/* ----- FIELD LABELS (Full Name*, Email*, Phone*, etc.) ----- */
form[id^="5e2b6593"] label,
form[id^="5e2b6593"] .madform-label-wrapper label,
form[id^="5e2b6593"] .madform-label-wrapper {
  display: block !important;
  font-family: 'DM Sans', 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #022DC1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
  padding: 0 !important;
}

/* Required asterisk green */
form[id^="5e2b6593"] .required,
form[id^="5e2b6593"] .required-asterisk,
form[id^="5e2b6593"] label .required {
  color: #06C633 !important;
  font-weight: 900 !important;
  margin-left: 2px !important;
}

/* ----- INPUT FIELDS ----- */
form[id^="5e2b6593"] input[type="text"],
form[id^="5e2b6593"] input[type="email"],
form[id^="5e2b6593"] input[type="tel"],
form[id^="5e2b6593"] input[type="number"],
form[id^="5e2b6593"] input[type="url"],
form[id^="5e2b6593"] textarea,
form[id^="5e2b6593"] select,
form[id^="5e2b6593"] .form-control {
  width: 100% !important;
  display: block !important;
  font-family: 'DM Sans', 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #1F2937 !important;
  background: #F5F8FF !important;
  background-color: #F5F8FF !important;
  border: 1.5px solid #D1D9E8 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  margin: 0 0 18px 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

form[id^="5e2b6593"] input:focus,
form[id^="5e2b6593"] textarea:focus,
form[id^="5e2b6593"] select:focus,
form[id^="5e2b6593"] .form-control:focus {
  border-color: #022DC1 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(2, 45, 193, 0.12) !important;
  outline: none !important;
}

/* Textarea */
form[id^="5e2b6593"] textarea {
  min-height: 110px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

/* ----- CHECKBOXES ----- */
form[id^="5e2b6593"] input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  margin: 0 12px 0 0 !important;
  accent-color: #06C633 !important;
  cursor: pointer !important;
  flex: 0 0 18px !important;
  vertical-align: middle !important;
}

/* Checkbox row -- flexbox to keep checkbox and label aligned */
form[id^="5e2b6593"] .checkbox-field-wrapper,
form[id^="5e2b6593"] .checkbox-wrapper,
form[id^="5e2b6593"] .checkboxes-field-wrapper > div,
form[id^="5e2b6593"] .websites360.checkboxes-field-wrapper > div {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

/* Checkbox option labels (override the global uppercase blue label rule) */
form[id^="5e2b6593"] input[type="checkbox"] + label,
form[id^="5e2b6593"] input[type="checkbox"] ~ label,
form[id^="5e2b6593"] .checkbox-field-wrapper label,
form[id^="5e2b6593"] .checkbox-wrapper label {
  display: inline !important;
  font-family: 'DM Sans', 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #1F2937 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  flex: 1 1 auto !important;
}

/* ----- SUBMIT BUTTON ----- */
form[id^="5e2b6593"] .madform-submit,
form[id^="5e2b6593"] input[type="submit"],
form[id^="5e2b6593"] button[type="submit"] {
  display: block !important;
  width: 100% !important;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  background: #06C633 !important;
  background-color: #06C633 !important;
  border: none !important;
  border-color: #06C633 !important;
  border-radius: 10px !important;
  padding: 16px 28px !important;
  margin-top: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(6, 198, 51, 0.25) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

form[id^="5e2b6593"] .madform-submit:hover,
form[id^="5e2b6593"] input[type="submit"]:hover,
form[id^="5e2b6593"] button[type="submit"]:hover {
  background: #04a52a !important;
  background-color: #04a52a !important;
  border-color: #04a52a !important;
  box-shadow: 0 6px 18px rgba(6, 198, 51, 0.35) !important;
}

/* ----- ERROR STATES ----- */
form[id^="5e2b6593"] .invalid-input,
form[id^="5e2b6593"] .form-error,
form[id^="5e2b6593"] .error-message {
  color: #DC2626 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin: -12px 0 14px !important;
}

form[id^="5e2b6593"] input.form-error,
form[id^="5e2b6593"] input.invalid {
  border-color: #DC2626 !important;
  background: #FEF2F2 !important;
}

/* ----- PLACEHOLDER ----- */
form[id^="5e2b6593"] input::placeholder,
form[id^="5e2b6593"] textarea::placeholder {
  color: #9CA3AF !important;
  font-style: italic !important;
  opacity: 1 !important;
}

/* ----- MOBILE ----- */
@media (max-width: 600px) {
  form[id^="5e2b6593"] {
    padding: 22px 18px !important;
    border-radius: 12px !important;
  }
  form[id^="5e2b6593"] h2 {
    font-size: 1.45rem !important;
  }
  form[id^="5e2b6593"] input[type="text"],
  form[id^="5e2b6593"] input[type="email"],
  form[id^="5e2b6593"] input[type="tel"],
  form[id^="5e2b6593"] textarea {
    padding: 14px 14px !important;
  }
  form[id^="5e2b6593"] .madform-submit {
    padding: 18px 28px !important;
    font-size: 1.05rem !important;
  }
}