/* /public/css/layout/page-header.css */
/* V11 - Standardized Page Headers (Professional UI) */

/*
 * 1. Main Header Container
 */
 .page-header {
  padding: 0;
  margin-bottom: var(--space-6);
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/*
 * 2. Title & Subtitle Grouping
*/
.page-header__title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px; /* Consistent gap between text and icon */
  flex-wrap: nowrap;
}

.page-header__title {
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.2;
  margin: 0;
  flex-grow: 0;
}

.page-header__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: var(--space-3) 0 0 0;
  max-width: 75ch;
}

/* 
   PROFESSIONAL TOOLTIP ICON STYLE
   - White background with border for high visibility/contrast.
   - Alignment corrected to center perfectly with title text.
*/
.page-header__title-wrapper .info-modal-trigger,
.page-header__title-wrapper .info-icon {
  /* Dimensions */
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;

  /* Visuals */
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-600);
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);

  /* Flex Centering (Internal Icon content) */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Positioning relative to Title */
  margin: 0 0 0 var(--space-2); /* Spacing from text */
  padding: 0;
  cursor: pointer;

  /* ★ ALIGNMENT FIX: Vertically center relative to text */
  align-self: center;

  /* ★ OPTICAL ADJUSTMENT: Pull up slightly to match text cap-height */
  margin-top: -2px;

  /* Ensure no clipping */
  overflow: visible;
  flex-shrink: 0;
  box-sizing: border-box;
  
  transition: all 0.2s ease-in-out;
}

/* Hover State */
.page-header__title-wrapper .info-modal-trigger:hover,
.page-header__title-wrapper .info-icon:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  /* No transform needed on hover to avoid jumping */
}

/*
 * 3. Sales Page Variant
*/
.page-header--sales {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  margin-bottom: var(--space-10);
  background: var(--color-gray-800);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.page-header--sales .page-header__content {
  max-width: 800px;
  margin: 0 auto;
}

.page-header--sales .page-header__title-wrapper {
  justify-content: center;
}

.page-header--sales .page-header__title {
  color: var(--color-white);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.page-header--sales .page-header__subtitle {
  color: var(--color-slate-300);
  font-size: var(--font-size-xl);
  max-width: 65ch;
  margin: var(--space-4) auto 0;
}

/*
 * 4. Responsive Adjustments
*/
@media (max-width: 767px) {
  .page-header {
    margin-bottom: var(--space-5);
  }
  .page-header__title {
    font-size: 1.65rem;
  }
  .page-header__subtitle {
    font-size: var(--font-size-base);
  }

  /* Mobile Optimization for Sales Header */
  .page-header--sales {
    /* Drastically reduced padding for mobile screens */
    padding: var(--space-8) var(--space-4); 
    margin-bottom: var(--space-8);
    border-radius: var(--radius-xl);
    /* Ensure it breaks out of container slightly if needed */
    width: 100%;
    box-sizing: border-box;
  }
  
  .page-header--sales .page-header__title {
    /* Smaller font size to prevent wrapping/crowding */
    font-size: 1.75rem; 
    line-height: 1.2;
    margin-bottom: var(--space-3);
  }
  
  .page-header--sales .page-header__subtitle {
    font-size: 1rem;
    line-height: 1.5;
    margin-top: var(--space-2);
    /* Ensure text doesn't touch edges */
    padding: 0 var(--space-2);
  }
}
@media (max-width: 480px) {
  .page-header--sales {
    padding: var(--space-8) var(--space-4);
    margin-bottom: var(--space-8);
  }
  .page-header--sales .page-header__title {
    font-size: 1.75rem;
  }
  .page-header--sales .page-header__subtitle {
    font-size: 1rem;
  }
}

/* =================================================================
   PRICING PAGE: Mobile Header Override
   ================================================================= */
   @media (max-width: 767px) {
    /*
      This block overrides the default dark "sales" header on the pricing page
      for mobile devices, creating a cleaner, more integrated look.
    */
    .pricing-page .page-header--sales {
      background: transparent;
      box-shadow: none;
      /* Reduced top padding for a more compact feel */
      padding: var(--space-4) 0 var(--space-8);
      margin-bottom: 0;
      width: auto; /* Reset width to not break out of container */
    }
  
    .pricing-page .page-header--sales .page-header__title {
      color: var(--color-gray-900);
      /* Responsive font size for better fit on all mobile screens */
      font-size: clamp(1.75rem, 6vw, 2rem);
      text-shadow: none; /* Removed the text glow/shadow */
    }
  
    .pricing-page .page-header--sales .page-header__subtitle {
      color: var(--color-gray-600);
      padding: 0; /* Remove horizontal padding */
      /* Slightly smaller font for better balance on small screens */
      font-size: 0.95rem;
    }
  }