/**
 * @file
 * EP Typography Styles - Page titles, headings, text
 * 
 * Purpose: Centralized typography styles for all EP modules
 * Location: /themes/custom/occasia_elegant/css/ep/components/ep-typography.css
 * Category: components/ (reusable UI components)
 * 
 * This file contains:
 * - Page title styles (standardized)
 * - Heading styles (h1, h2, h3, etc.)
 * - Text styles
 * 
 * Design: Clean, classy, consistent typography
 * Requirement: Standardize all page titles across the site
 * 
 * Decision Rule: If it's a reusable UI component → components/
 * 
 * See: /bitnami/drupal/modules/.cursor/THEME_STRUCTURE.md for structure documentation
 */

/**
 * Page Titles
 * 
 * Standardized page title styling - use on all pages
 */

.ep-page-title {
  font-family: var(--ep-font-family-title);
  font-size: var(--ep-font-size-3xl);
  font-weight: var(--ep-font-weight-normal);
  color: var(--ep-color-title);
  line-height: var(--ep-line-height-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--ep-spacing-lg) 0; /* Grid-based spacing */
  padding: 0;
  outline: none !important; /* Remove focus outline that causes flashing black line */
  border: none !important;
}

.ep-page-title:focus,
.ep-page-title:active,
.ep-page-title:focus-within {
  outline: none !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

.ep-page-title--large {
  font-size: var(--ep-font-size-3xl); /* 30px - same as default */
}

.ep-page-title--small {
  font-size: var(--ep-font-size-2xl); /* 24px */
}

/**
 * Page Title with Actions
 * 
 * Page title with actions (buttons) on the same line
 */

.ep-page-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--ep-component-gap); /* Grid-based spacing */
  margin-bottom: var(--ep-spacing-lg); /* Grid-based spacing */
}

.ep-page-header__title {
  margin: 0;
}

.ep-page-header__actions {
  display: flex;
  gap: var(--ep-form-grid-gap); /* Grid-based spacing */
  align-items: center;
}

/**
 * Section Titles
 * 
 * Section headings within pages
 */

.ep-section-title {
  font-family: var(--ep-font-family-heading);
  font-size: var(--ep-font-size-xl);
  font-weight: var(--ep-font-weight-medium);
  color: var(--ep-color-title-secondary); /* Easy to change - update in ep-base.css */
  line-height: var(--ep-line-height-tight);
  margin: 0 0 var(--ep-spacing-md) 0; /* Grid-based spacing */
  padding: 0;
}

.ep-section-title--large {
  font-size: var(--ep-font-size-2xl); /* 24px */
}

.ep-section-title--small {
  font-size: var(--ep-font-size-lg); /* 18px */
}

/**
 * Standardized Headings
 * 
 * Override default h1-h6 to use EP design system
 * 
 * NOTE: Secondary header headings are excluded - they have their own styling
 */

/* Exclude secondary header headings from EP typography styles */
.ep-event-secondary-header h1,
.ep-event-secondary-header h2,
.ep-event-secondary-header h3,
.ep-event-secondary-header h4,
.ep-event-secondary-header h5,
.ep-event-secondary-header h6,
.ep-event-secondary-header .ep-section-title,
.ep-event-secondary-header .ep-page-title {
  /* Secondary header headings use their own styles - do not override */
  /* Styles are in /themes/custom/occasia_elegant/css/secondary-header.css */
}

h1.ep-heading,
.ep-heading--h1 {
  font-family: var(--ep-font-family-heading);
  font-size: var(--ep-font-size-3xl);
  font-weight: var(--ep-font-weight-medium);
  color: var(--ep-color-text-primary);
  line-height: var(--ep-line-height-tight);
  margin: 0 0 var(--ep-spacing-lg) 0; /* Grid-based spacing */
}

h2.ep-heading,
.ep-heading--h2 {
  font-family: var(--ep-font-family-heading);
  font-size: var(--ep-font-size-2xl); /* 24px */
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-color-text-primary);
  line-height: var(--ep-line-height-tight);
  margin: 0 0 var(--ep-spacing-md) 0; /* Grid-based spacing */
}

h3.ep-heading,
.ep-heading--h3 {
  font-family: var(--ep-font-family-heading);
  font-size: var(--ep-font-size-xl); /* 20px */
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-color-text-primary);
  line-height: var(--ep-line-height-tight);
  margin: 0 0 var(--ep-spacing-md) 0; /* Grid-based spacing */
}

h4.ep-heading,
.ep-heading--h4 {
  font-family: var(--ep-font-family-heading);
  font-size: var(--ep-font-size-lg); /* 18px */
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-color-text-primary);
  line-height: var(--ep-line-height-tight);
  margin: 0 0 var(--ep-spacing-sm) 0; /* Grid-based spacing */
}

/**
 * Subtitle/Description Text
 * 
 * Text that appears below page titles
 */

.ep-page-subtitle {
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-font-size-base);
  font-weight: var(--ep-font-weight-normal);
  color: var(--ep-color-text-secondary);
  line-height: var(--ep-line-height-normal);
  margin: var(--ep-spacing-xs) 0 var(--ep-spacing-lg) 0; /* Grid-based spacing */
}

/**
 * Legacy Support
 * 
 * Support for existing page title classes during migration
 */

.page-title {
  /* Legacy class - will be replaced with .ep-page-title */
  font-family: var(--ep-font-family-heading);
  font-size: var(--ep-font-size-3xl);
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-color-text-primary);
  line-height: var(--ep-line-height-tight);
  margin: 0 0 var(--ep-spacing-lg) 0;
}

/**
 * Heading underlines
 *
 * Page title underlines use --ep-color-heading-underline at --ep-heading-underline-width (same as list row dividers).
 * See ep-budget-page-header, ep-calendar-header, ep-checklist-page-header, etc.
 */

/**
 * Back navigation links (below secondary header)
 */
.ep-layout-form__back-link,
.ep-layout-canvas__back-link,
.ep-checklist-back-link,
.ep-contact-back-button,
.ep-contact-back-button.button,
.ep-contact-back-button.button--small,
.ep-guest-back-button,
.ep-guest-back-button.button,
.ep-guest-back-button.button--small,
.ep-guest-back-button.ep-button,
.ep-guest-back-button.ep-button--secondary,
.calendar-event-view .back-link a {
  color: var(--ep-color-back-link);
  text-decoration: none;
  text-decoration-color: currentColor;
}

.ep-layout-form__back-link:hover,
.ep-layout-form__back-link:focus,
.ep-layout-canvas__back-link:hover,
.ep-layout-canvas__back-link:focus,
.ep-checklist-back-link:hover,
.ep-checklist-back-link:focus,
.ep-contact-back-button:hover,
.ep-contact-back-button.button:hover,
.ep-contact-back-button.button--small:hover,
.ep-guest-back-button:hover,
.ep-guest-back-button.button:hover,
.ep-guest-back-button.button--small:hover,
.ep-guest-back-button.ep-button:hover,
.ep-guest-back-button.ep-button--secondary:hover,
.calendar-event-view .back-link a:hover,
.calendar-event-view .back-link a:focus {
  color: var(--ep-color-back-link-hover);
  text-decoration: underline;
  text-decoration-color: currentColor;
  -webkit-text-decoration-color: currentColor;
}