/* app/static/css/components/masthead.css */
/* Masthead Component using base CSS variables */

.masthead {
  text-align: center;
  border-bottom: var(--border-width-default) solid var(--color-border);
  padding: var(--spacing-md) 0;
  margin-bottom: var(--spacing-lg);
}

.masthead__date {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary); /* Use semantic color */
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-family-base); /* Use base font */
}

/* Style the link wrapping the title */
.masthead__title-link {
  text-decoration: none;
  color: inherit; /* Inherit color from parent (likely body text color) */
  display: inline-block;
}

.masthead__title-link:hover,
.masthead__title-link:focus {
  text-decoration: none;
  color: inherit;
}

.masthead__title {
  font-family: var(--font-family-heading); /* Use heading font */
  font-weight: var(--font-weight-bold);
  /* Use clamp for responsive font size */
  font-size: clamp(
    var(--font-size-2xl),
    /* Minimum size */ 8vw,
    /* Scales with viewport width */ var(--font-size-4xl) /* Maximum size */
  );
  line-height: var(--line-height-heading); /* Use heading line height */
  margin: var(--spacing-xs) 0 0 0; /* Adjust margins */
  color: var(--color-text-primary); /* Use primary text color */
}

.masthead__tagline {
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary); /* Use semantic color */
  margin: var(--spacing-xs) 0 0 0; /* Add top margin */
  font-family: var(--font-family-base); /* Use base font */
}