/**
 * Hero Section Styles
 *
 * Component-specific styling only.
 * Layout handled by primitives (stack, center, grid, frame, box).
 *
 * @package Author_Theme
 */

/* ============================================
   Section Container
   ============================================ */

.hero-section {
  position: relative;
  padding-block: var(--space-12);
  color: var(--text);
}


.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M30 0L35 25L60 30L35 35L30 60L25 35L0 30L25 25Z" fill="%23000" opacity="0.02"/></svg>');
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-section h1 {
  margin: 0;
}

/* ============================================
   Decorative Typography
   (Locked fonts - don't respond to Font Style buttons)
   ============================================ */

.hero-main {
  font-family: "Licorice", cursive !important;
}

.hero-tagline {
  font-family: "Licorice", cursive !important;
  margin-top: var(--space-4);
}

.hero-intro {
  color: var(--text-muted);
}