/* ==========================================================================
   Base CSS - Dra. Rubia Martins Website
   Foundation styles for consistent development

   This file provides semantic typography and utility classes for new pages.
   CSS Variables are defined in mobirise/css/mbr-additional.css
   ========================================================================== */

/* ===== Global background — prevents bare html from showing below footer ===== */
html {
  background-color: var(--color-primary);
}

/* ===== Footer ===== */
.footer7 {
  padding: 20px 0;
  text-align: center;
}

.footer7 p,
.footer7 .mbr-text {
  color: var(--color-white);
}

/* ===== Typography - Headings ===== */
h1,
.h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2.2rem;
  line-height: 110%;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

h2,
.h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  line-height: 110%;
  color: var(--color-primary);
  margin-bottom: 0.875rem;
}

h3,
.h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
}

h4,
.h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 130%;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

h5,
.h5,
h6,
.h6 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  line-height: 140%;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

/* ===== Typography - Body Text ===== */
p,
.paragraph {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 170%;
  color: var(--color-dark);
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.2rem;
  line-height: 160%;
}

.small,
small {
  font-size: 0.875rem;
}

/* ===== Section Utilities ===== */
.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section-sm {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section-lg {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

/* ===== Background Utilities ===== */
.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-accent {
  background-color: var(--color-accent) !important;
}

.bg-light {
  background-color: var(--color-light-gray) !important;
}

.bg-dark {
  background-color: var(--color-dark) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

/* ===== Text Color Utilities ===== */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

.text-light {
  color: var(--color-light-gray) !important;
}

.text-dark {
  color: var(--color-dark) !important;
}

.text-white {
  color: var(--color-white) !important;
}

/* ===== Spacing Utilities ===== */
.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 1rem !important;
}

.mb-3 {
  margin-bottom: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 2rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.5rem !important;
}

.mt-2 {
  margin-top: 1rem !important;
}

.mt-3 {
  margin-top: 1.5rem !important;
}

.mt-4 {
  margin-top: 2rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

/* ===== Responsive Typography ===== */
@media (max-width: 992px) {

  h1,
  .h1 {
    font-size: 1.76rem;
  }

  h2,
  .h2 {
    font-size: 1.4rem;
  }

  h3,
  .h3 {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {

  h1,
  .h1 {
    font-size: 1.5rem;
  }

  h2,
  .h2 {
    font-size: 1.28rem;
  }

  h3,
  .h3 {
    font-size: 1.12rem;
  }

  .section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section-lg {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* ===== Hero Section Component ===== */
.hero {
  padding-top: 9rem;
  padding-bottom: 8rem;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero .mbr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero--cursos {
  background-image: url("../../../assets/images/mbr-1920x1280.webp");
}

.hero--descriminaliza {
  background-image: url("../../../assets/images/mbr-5-1920x1280.jpg");
}

.hero--portfolio-empresas {
  background-image: url("../../../assets/images/mbr-1920x1080.jpg");
}

.hero--telequalidade {
  background-image: url("../../../assets/images/mbr-6-1920x1280.jpg");
}

@media (max-width: 768px) {
  .hero {
    padding-top: 6rem;
    padding-bottom: 5rem;
  }
}

/* ===== Course Card Component ===== */
.course-card {
  background-color: var(--color-white);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: var(--transition-default);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border-radius: 0;
}

.course-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

.course-card__image {
  height: 220px;
  overflow: hidden;
  border-radius: 0;
}

.course-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-default);
  border-radius: 0;
}

.course-card:hover .course-card__image img {
  transform: scale(1.05);
}

.course-card__content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.course-card__content h4 {
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.course-card__content p {
  color: var(--color-dark);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.course-card__content .mbr-section-btn {
  margin-top: auto;
}

.course-card__content .mbr-section-btn .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 992px) {
  .course-card__content {
    padding: 1.5rem;
  }

  .course-card__image {
    height: 180px;
  }
}

/* ===== Novidades / News Section ===== */
.novidades-featured {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: var(--color-white);
}

.novidades-grid {
  padding-top: 3rem;
  padding-bottom: 5rem;
  background-color: var(--color-light-gray);
}

.novidades-grid .card-wrapper {
  background: var(--color-white);
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ===== Videos Section ===== */
.videos-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: var(--color-white);
}

/* ===== Single Post ===== */
.single-post-hero {
  padding-top: 8rem;
  padding-bottom: 4rem;
  background-color: var(--color-primary);
  color: var(--color-white);
}

.single-post-hero h1,
.single-post-hero h2,
.single-post-hero p {
  color: var(--color-white) !important;
}

.single-post-content {
  padding-top: 4rem;
  padding-bottom: 6rem;
  background-color: var(--color-white);
}

.single-post-content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 2rem;
}