/* 
 * UNIVERSAL ALIGNMENT FIX
 * Based on your working homepage styling
 * Save as assets/css/title-fix.css and include in head.html
 */

/* Hero Section - Apply homepage styling universally */
.hero, 
.hero-section, 
.nonsense-header,
.photography-page .hero-section {
  padding: 4rem 0 2rem !important;
  text-align: center !important;
}

/* Hero Content - Center all content */
.hero-content,
.container,
.intro-content,
.nonsense-description,
.photography-page .hero-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Headings - Direct from your homepage */
.heading-large,
.page-title,
.section-title,
h1, 
h2.section-title,
.photography-page .page-title {
  font-size: 3rem !important;
  line-height: 1.2 !important;
  margin-bottom: 1.5rem !important;
  color: white !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Description Text - Direct from your homepage */
.subtitle,
.page-subtitle,
.series-description,
.photography-page .page-subtitle {
  font-size: 1.4rem !important;
  color: #bbbbbb !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* Description Paragraphs - Direct from your homepage */
.series-description p,
.nonsense-description p,
.intro-content p,
.hero-content p {
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
  color: #aaaaaa !important;
  text-align: center !important;
}

/* Content Cards Section - From your homepage */
.content-cards {
  padding: 3rem 0 4rem !important;
  text-align: center !important;
}

/* Section Headers */
.section-heading h2,
.section-title,
.content-title {
  font-size: 2.2rem !important;
  margin-bottom: 2.5rem !important;
  position: relative !important;
  display: inline-block !important;
  color: white !important;
  text-align: center !important;
}

.section-title:after,
.content-title:after {
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 3px !important;
  background-color: #ff3366 !important;
  margin: 0.75rem auto 0 !important;
}

/* Main Content Alignment - From your homepage */
.main-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Reset any flex layouts that might interfere */
.container {
  display: block !important;
}

/* Fix any flexbox layouts that use justify-content */
.hero .container,
.hero-section .container {
  display: block !important;
}