/* 
 * shared-hero.css - Applies FAQ-style hero styling to all page hero sections
 * This preserves the BEM structure of each template while making the heroes visually consistent
 */

/* Common hero styling properties */
/* Product page hero */
.product-header,
/* Order page hero */
.order-header,
/* Contact page hero */
.contact-header,
/* Case study page hero */
.case-header, 
.case-study-header,
/* Data security page hero */
.data-security-header,
/* Dashboard page hero */
.user-header,
.dashboard-header,
/* FAQ already has its own page header, but included for completeness */
.page-header {
  background: linear-gradient(to right, #0a2647, #1e5da8);
  padding: 3rem 1rem;
  text-align: center;
  color: #fff;
}

/* Style all hero headings */
.product-header__title,
.order-header__title,
.contact-header__title,
.case-header__title,
.case-study-header__title,
.data-security-header__title,
.user-header__title,
.dashboard-header__title,
.page-header h1,
/* Various subtitle classes */
.product-header__subtitle,
.order-header__subtitle,
.contact-header__subtitle,
.case-header__subtitle,
.case-study-header__subtitle,
.data-security-header__subtitle,
.user-header__subtitle,
.dashboard-header__subtitle,
.page-header p {
  color: #fff;
}

/* Style all hero titles */
.product-header__title,
.order-header__title,
.contact-header__title,
.case-header__title,
.case-study-header__title,
.data-security-header__title,
.user-header__title,
.dashboard-header__title,
.page-header h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Style all hero subtitles */
.product-header__subtitle,
.order-header__subtitle,
.contact-header__subtitle,
.case-header__subtitle,
.case-study-header__subtitle,
.data-security-header__subtitle,
.user-header__subtitle,
.dashboard-header__subtitle,
.page-header p {
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Container styling for consistent width */
.product-container,
.order-container,
.contact-container,
.case-container,
.case-study-container,
.data-security-container,
.user-container,
.dashboard-container,
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Compact header variant — used on account/settings pages */
.user-header--small {
  padding: 1.5rem 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .product-header,
  .order-header,
  .contact-header,
  .case-header,
  .case-study-header,
  .data-security-header,
  .user-header,
  .dashboard-header,
  .page-header {
    padding: 2rem 1rem;
  }

  .user-header--small {
    padding: 1rem;
  }
  
  .product-header__title,
  .order-header__title,
  .contact-header__title,
  .case-header__title,
  .case-study-header__title,
  .data-security-header__title,
  .user-header__title,
  .dashboard-header__title,
  .page-header h1 {
    font-size: 1.75rem;
  }
  
  .product-header__subtitle,
  .order-header__subtitle,
  .contact-header__subtitle,
  .case-header__subtitle,
  .case-study-header__subtitle,
  .data-security-header__subtitle,
  .user-header__subtitle,
  .dashboard-header__subtitle,
  .page-header p {
    font-size: 1rem;
  }
}