/* Semantic Section Headers Component
 * 
 * This file contains styles for the semantic section headers used 
 * across different page types in the application.
 */

/* Variables are now globally defined in styles/base/variables.css */

/* Base section header style - Outfit for headers */
.section-header {
  display: flex;
  align-items: center;
  font-family: var(--font-family-outfit); /* Outfit for headers */
  font-weight: var(--weight-semibold); /* 600 for section headers */
  font-size: 13px; /* Smaller, sophisticated */
  color: var(--text-hook-label); /* Use warmer gray from variables */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Refined letter spacing */
  
  margin-top: 32px; /* More spacing between hook sections (within a card) */
  margin-bottom: 16px; /* More space above content following the hook */
}

/* Chip within section header */
.section-header .chip {
  margin-left: 10px; /* Space from the header text */
  margin-top: 0; /* Ensure vertical alignment */
  margin-bottom: 0;
}

/* First section header in a card should have less top margin */
.section-header:first-of-type {
  margin-top: 0; /* Remove top margin for first section */
  
  background: none;
  border: none;
  padding: 0;
}

/* Hook label refinement - Outfit for headers */
.hook-label {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Tighter */
  font-size: 12px; /* Smaller */
  font-weight: var(--weight-semibold); /* 600 for better hierarchy */
  letter-spacing: 0.06em;
  color: var(--text-hook-label);
  text-transform: uppercase;
  font-family: var(--font-family-outfit); /* Outfit for headers */
}

.section-header .icon, /* For a <span> or <i> wrapping an icon font or SVG */
.section-header .emoji, /* For a <span> wrapping a direct emoji character */
.hook-emoji { /* Additional class for emoji treatment */
  margin-right: 8px; /* Space between emoji/icon and text */
  font-size: 20px; /* Perfect size for impact without overwhelming */
  line-height: 1; /* Helps align emojis/icons */
  display: inline-block; /* Better emoji rendering */
  font-family: "Noto Color Emoji", "Noto Emoji" !important; /* Force Google emojis */
  font-style: normal; /* Ensure not italic */
  font-weight: normal; /* Ensure normal weight */
  color: initial !important; /* Reset color to show emoji colors */
  -webkit-text-fill-color: initial !important; /* Safari fix */
  filter: none !important; /* Remove any filters */
}

/* Specific header type classes are now mainly for semantic purposes in HTML. */
/* They no longer need to set colors if all hook labels share the same text color. */
/* If some hooks DO need different text colors, those overrides can be added back here. */

/* Example: If 'Why it matters' needed a different text color */
/* .why-it-matters-header { color: var(--some-other-color); } */

/* Removing previous color overrides for .why-it-matters-header, .context-header, etc. */
/* as the base .section-header now defines the consistent hook label color. */

/* Figure & Decode Page Headers also use the default .section-header style now. */

/* The .core-evidence-header class can be kept if it helps semantically, */
/* but it will also use the default .section-header styling. */

/* Old .hook-label and .hook-separator are fully superseded by .section-header */
/* and the new spacing strategy (margins on .section-header and .content-card) */

/* .section-header-refined class is obsolete with this new design. */

/* HTML Structure Expected:
  <div class="content-card">
    <div class="section-header why-it-matters-header">
      <span class="emoji">⚡</span> WHY IT MATTERS
    </div>
    <p>Climate claims influence policy...</p>

    <div class="section-header context-header">
      <span class="emoji">📍</span> CONTEXT
    </div>
    <p>In March 2023, Congressman...</p>

    </div>
*/

/* Section content container - This might be deprecated if content flows directly in .content-card */
.section-content {
  margin-bottom: 24px; /* Spacing between hook sections, if this container is still used */
  padding: 0; /* Reset padding, .content-card handles overall padding */
}

/* For nested sections - review if this is still needed with card-based layout */
.section-nested {
  margin-left: 0; /* Reset, nesting might be achieved by nested cards or indentation within a card */
  padding-left: 0;
  border-left: none;
}

/* Optional subtle background for section content - also likely deprecated */
.section-content-bg {
  background-color: transparent;
}

/* Example usage:
   <div class="section-header why-it-matters-header">
     <span class="icon">🔍</span> Why It Matters
   </div>

   <div class="hook-label">
     <span class="hook-icon">🔬</span> <span class="hook-text">Key Findings</span>
   </div>
   <hr class="hook-separator" />
*/