/**
 * Page Headers - Markite Child Theme
 *
 * Custom header layouts for various page types:
 * - Markite Child Header 1 (Title Area with Background Image)
 * 
 * @package markite-child
 * @since 1.0.0
 * @updated December 16, 2024
 */

/* =============================================================================
   MARKITE CHILD HEADER 1 - TITLE AREA
   ============================================================================= */

/* Layout */
.markite-child-header-1.page__title-area {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.markite-child-header-1 .container {
  position: relative;
  z-index: 1;
}

.markite-child-header-1 .page__title-content {
  text-align: center;
}

/* Title */
.markite-child-header-1 .page__title {
  color: #ffffff !important;
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.2;
  display: block !important;
}

/* Description */
.markite-child-header-1 .page__title-desc p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

/* Tablets (991px and below) */
@media (max-width: 991px) {
  .markite-child-header-1 .page__title {
    font-size: 28px;
  }
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
  .markite-child-header-1 .page__title {
    font-size: 24px;
  }

  .markite-child-header-1 .page__title-desc p {
    font-size: 15px;
  }
}