/* =========================================================================
   pp-divi-compat.css
   Bridges the original .pp-* stylesheet (assets/pp-styles.css) onto Divi 5's
   native module markup, now that the page is built from real Divi modules
   instead of Code Modules.

   Nothing here invents new design. Every value is lifted from pp-styles.css;
   the only job of this file is to re-point selectors at Divi's DOM
   (.et_pb_section / .et_pb_row / .et_pb_group / .et_pb_module_header /
   .et_pb_text_inner / .et_pb_button) and to beat Divi's default specificity.
   ========================================================================= */

/* --- 1. Structural resets: let .pp-* own the box model again --------------- */
.et_pb_section.pp-section { padding: 0; }
.et_pb_section.pp-section > .et_pb_row { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.et_pb_section.pp-section > .et_pb_row > .et_pb_column { padding: 0; }
/* Zero-specificity so per-component margins further down still apply. */
.et_pb_section.pp-section :where(.et_pb_module) { margin-bottom: 0; }
.et_pb_section.pp-section .et_pb_text_inner > *:last-child { margin-bottom: 0; }

/* Section padding, restored from pp-styles.css at Divi-beating specificity */
.et_pb_section.pp-header          { padding: 0; }
.et_pb_section.pp-hero,
.et_pb_section.pp-featured-course,
.et_pb_section.pp-courses,
.et_pb_section.pp-benefits,
.et_pb_section.pp-testimonials,

@media (max-width: 480px) {
  .et_pb_section.pp-section > .et_pb_row { padding: 0 15px; }
  .et_pb_section.pp-hero            { padding: 60px 0; }
  .et_pb_section.pp-featured-course,
  .et_pb_section.pp-benefits,
  .et_pb_section.pp-testimonials,
}

/* --- 2. Group modules used as layout containers ---------------------------- */
.et_pb_group.pp-nav             { display: flex; flex-direction: row; justify-content: space-between;
                                  align-items: center; padding: 1rem 0; flex-wrap: wrap; width: 100%; }
.et_pb_group.pp-hero-content    { display: block; position: relative; z-index: 2; width: 100%; }
.et_pb_group.pp-hero-cta        { display: flex; flex-direction: row; gap: 1rem; justify-content: center;
                                  flex-wrap: wrap; margin-bottom: 3rem; }
.et_pb_group.pp-section-header  { display: block; text-align: center; width: 100%; }
.et_pb_group.pp-noncert-option  { display: block; margin-top: 1.5rem; }
.et_pb_group.pp-course-stats    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
                                  margin-top: 2rem; position: relative; z-index: 2; }
.et_pb_group.pp-stat            { display: block; text-align: center; }
.et_pb_group.pp-courses-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
                                  gap: 2rem; margin-top: 3rem; }
.et_pb_group.pp-benefits-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                                  gap: 2rem; margin-top: 3rem; }
.et_pb_group.pp-testimonial-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
                                  gap: 2rem; margin-top: 3rem; }
.et_pb_group.pp-course-card     { display: flex; flex-direction: column; }
.et_pb_group.pp-course-content  { display: flex; flex-direction: column; flex-grow: 1; padding: 1.5rem; }
.et_pb_group.pp-benefit-card    { display: block; }
.et_pb_group.pp-testimonial     { display: block; }

@media (max-width: 768px) {
  .et_pb_group.pp-courses-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .et_pb_group.pp-hero-cta     { flex-direction: column; align-items: center; }
}

/* --- 3. The featured-course showcase row ----------------------------------- */
.et_pb_row.pp-course-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.et_pb_row.pp-course-showcase > .et_pb_column { width: 100%; margin: 0; padding: 0; }
.et_pb_column.pp-course-info   { text-align: left; }
.et_pb_column.pp-course-visual { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px;
                                 padding: 3rem !important; color: white; text-align: center;
                                 position: relative; overflow: hidden; }
.et_pb_column.pp-course-visual .et_pb_text_inner { text-align: center; color: #fff; }
.et_pb_column.pp-course-visual .et_pb_text_inner p { margin: 0; padding: 0; }
@media (max-width: 768px) {
  .et_pb_row.pp-course-showcase { grid-template-columns: 1fr; gap: 2rem; }
}

/* --- 4. Heading modules: style the real <hN>, not the wrapper -------------- */
/* :where() keeps this reset at zero specificity so the rules below always win. */
.pp-section :where(.et_pb_heading .et_pb_module_header) { margin: 0; padding: 0; }

.pp-logo .et_pb_module_header            { font-size: 1.5rem; font-weight: 700; color: #2c5aa0; }

.pp-course-info .et_pb_heading .et_pb_module_header   { font-size: 2rem; color: #2c5aa0; margin-bottom: 1rem; }
.pp-course-visual .et_pb_heading .et_pb_module_header { font-size: 1.5rem; margin-bottom: 2rem; color: #fff;
                                                        position: relative; z-index: 2; }


@media (max-width: 768px) {
  
}

/* --- 5. Image module inside a course card ---------------------------------- */
.et_pb_image.pp-course-image { width: 100%; height: 200px; overflow: hidden; margin: 0; }
.et_pb_image.pp-course-image .et_pb_image_wrap { display: block; width: 100%; height: 100%; }
.et_pb_image.pp-course-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.pp-course-card:hover .pp-course-image img { transform: scale(1.05); }

/* --- 6. Button modules ------------------------------------------------------
   Buttons are styled here rather than through the Design tab.

   This was tried the other way round: the appearance was set as native module
   attributes so the Design tab would own it. Divi emitted the rules, but its
   own static stylesheet kept winning for size, weight, radius and padding with
   no competing rule to explain it, which left the buttons rendering as Divi
   defaults. Rather than ship something visually broken, the appearance stays
   here. If Divi resolves that, this block is the thing to delete.

   Class names are pp-b-* (not pp-btn-*) so the legacy rules in pp-styles.css
   no longer match these elements.
   ------------------------------------------------------------------------- */
body #page-container .et_pb_section a.et_pb_button.pp-b-primary,
body #page-container .et_pb_section a.et_pb_button.pp-b-secondary,
body #page-container .et_pb_section a.et_pb_button.pp-b-white,
body #page-container .et_pb_section a.et_pb_button.pp-b-nav,
body #page-container .et_pb_section a.et_pb_button.pp-b-link {
  border: none; border-radius: 999px; font-family: inherit; font-weight: 600;
  letter-spacing: normal; line-height: 1.6;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
body #page-container .et_pb_section a.et_pb_button.pp-b-primary:before,
body #page-container .et_pb_section a.et_pb_button.pp-b-primary:after,
body #page-container .et_pb_section a.et_pb_button.pp-b-secondary:before,
body #page-container .et_pb_section a.et_pb_button.pp-b-secondary:after,
body #page-container .et_pb_section a.et_pb_button.pp-b-white:before,
body #page-container .et_pb_section a.et_pb_button.pp-b-white:after,
body #page-container .et_pb_section a.et_pb_button.pp-b-nav:before,
body #page-container .et_pb_section a.et_pb_button.pp-b-nav:after,
body #page-container .et_pb_section a.et_pb_button.pp-b-link:before,
body #page-container .et_pb_section a.et_pb_button.pp-b-link:after {
  display: none !important; content: none !important; margin: 0 !important;
}

body #page-container .et_pb_section a.et_pb_button.pp-b-primary {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%); color: #FFFFFF !important;
  padding: 16px 32px !important; font-size: 1.1rem;
  box-shadow: 0 6px 20px rgba(102, 126, 234, .3);
}
body #page-container .et_pb_section a.et_pb_button.pp-b-primary:hover {
  transform: translateY(-3px); box-shadow: 0 8px 25px rgba(102, 126, 234, .4); color: #FFFFFF !important;
}

body #page-container .et_pb_section a.et_pb_button.pp-b-lg {
  padding: 18px 38px !important; font-size: 1.05rem;
}

body #page-container .et_pb_section a.et_pb_button.pp-b-secondary {
  background: #FFFFFF; color: #2C5AA0 !important; padding: 16px 32px !important;
  font-size: 1.1rem; border: 2px solid #2C5AA0;
}
body #page-container .et_pb_section a.et_pb_button.pp-b-secondary:hover {
  background: #2C5AA0; color: #FFFFFF !important; transform: translateY(-2px);
}

body #page-container .et_pb_section a.et_pb_button.pp-b-white {
  background: #FFFFFF; color: #2C5AA0 !important; padding: 16px 32px !important; font-size: 1.1rem;
}
body #page-container .et_pb_section a.et_pb_button.pp-b-white:hover {
  transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, .2); color: #2C5AA0 !important;
}

body #page-container .et_pb_section a.et_pb_button.pp-b-nav {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%); color: #FFFFFF !important;
  padding: 12px 24px !important; font-size: 1rem;
  box-shadow: 0 4px 15px rgba(102, 126, 234, .3);
}
body #page-container .et_pb_section a.et_pb_button.pp-b-nav:hover {
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, .4); color: #FFFFFF !important;
}

body #page-container .et_pb_section a.et_pb_button.pp-b-link {
  background: transparent; color: #2C5AA0 !important; padding: 0 !important;
  border-radius: 0; font-size: 1rem; align-self: flex-start; margin-top: auto;
}
body #page-container .et_pb_section a.et_pb_button.pp-b-link:hover {
  color: #764BA2 !important; transform: translateX(5px);
}

/* Layout, not appearance. */
.pp-section .et_pb_button_module_wrapper { margin: 0; padding: 0; }
.pp-course-content .et_pb_button_module_wrapper { margin-top: auto; }

/* --- 7. Final CTA text colour ---------------------------------------------- */


/* --- 8. Sticky header ------------------------------------------------------ */
.et_pb_section.pp-header { position: sticky; top: 0; z-index: 1000; }
/* --- 9. Divi's `.et_pb_text_inner p` rule outranks the .pp-* paragraph rules,
       which kills `margin: 0 auto` centring. Restore it explicitly. ---------- */

.pp-section .et_pb_text_inner p.pp-course-description { margin-bottom: 2rem; }
.pp-section .et_pb_text_inner p.pp-testimonial-text   { margin-bottom: 1rem; }
.pp-section .et_pb_text_inner p.pp-benefit-description,
/* --- 10. Divi zeroes module margins with
       `.et_pb_section .et_pb_row .et_flex_column > .et_pb_module` (0-4-0),
       which outranks the .pp-* container rules above. These restore the
       original spacing at a weight Divi cannot beat. ------------------------ */

.et_pb_group.pp-hero-cta         { margin-bottom: 3rem !important; }
.et_pb_group.pp-noncert-option   { margin-top: 1.5rem !important; }
.et_pb_group.pp-course-stats     { margin-top: 2rem !important; }
.et_pb_group.pp-courses-grid,
.et_pb_group.pp-benefits-grid,
.et_pb_group.pp-testimonial-grid { margin-top: 3rem !important; }
.et_pb_image.pp-course-image     { margin-bottom: 0 !important; }
/* --- 11. In the original markup the badge was a direct flex child of
       .pp-course-content, so it stretched to the full card width. Inside a
       Text module it is no longer a flex item, so restore the block display. */
.pp-course-content .et_pb_text_inner .pp-course-badge { display: block; }
/* --- 12. Video module: same framing the old .vimeo-player wrapper gave it.
       (Border radius and shadow are also editable in the module's Design tab.) */
.et_pb_video.pp-course-video {
  width: 100%; max-width: 800px; margin: 0 auto;
  border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
}
@media (max-width: 768px) {
  .et_pb_video.pp-course-video { margin: 0 15px; }
}
/* --- 13. Harden the card image slot: a missing or oddly-sized image must be
       clipped to the 200px band instead of pushing alt text out of the card. */
.et_pb_group.pp-course-card > .et_pb_image.pp-course-image { flex: 0 0 200px; }
.et_pb_image.pp-course-image,
.et_pb_image.pp-course-image .et_pb_image_wrap { overflow: hidden; line-height: 0; }
.et_pb_image.pp-course-image img { display: block; }