/**
 * Hero Section Block Styles
 * 
 * Extracted from assets/scss/templates/_homepage.scss
 * Includes hero section and floating contact card styles
 * 
 * Note: These styles apply to both the ACF block (when used in Gutenberg)
 * and the legacy homepage template (until fully migrated).
 * 
 * WordPress block wrapper classes (wp-block-tax-court-hero-section) are
 * handled automatically by get_block_wrapper_attributes() in the template.
 * 
 * Related: ACF-013, ACF-014
 */
/**
 * Brand Token System
 * 
 * Centralized design tokens for the Tax Court USWDS Theme.
 * All color, typography, spacing, layout, and accessibility values are defined here.
 */
/**
 * Apply text style from a typography token map
 * 
 * @param {Map} $style-map - Typography token map (e.g., $text-page-heading)
 */
/**
 * Apply focus ring styling for keyboard navigation
 */
/**
 * Ensure minimum touch target size for accessibility
 */
/**
 * Mobile breakpoint media query
 */
/**
 * Desktop breakpoint media query
 */
/* =============================================================================
   Hero Section
   ============================================================================= */
.hero-section,
.wp-block-tax-court-hero-section {
  position: relative;
  overflow: hidden;
  padding: 128px 0 160px; /* Extra bottom padding to accommodate service strip overlap */
}
@media (max-width: 767px) {
  .hero-section,
  .wp-block-tax-court-hero-section {
    padding: 48px 0; /* Mobile doesn't have overlap, so standard padding */
  }
}

.hero-section__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #103052; /* Fallback if no image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero-section__cover {
	display:block;
	height: 100%;
	background-color: #103052e0;
}

/*
.hero-section__geometric-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  opacity: 0.1;
}
.hero-section__geometric-accent::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: linear-gradient(135deg, transparent 40%, #ECBF44 40%, #ECBF44 60%, transparent 60%);
  transform: rotate(15deg);
}
.hero-section__geometric-accent::after {
  content: "";
  position: absolute;
  bottom: -5%;
  right: 10%;
  width: 40%;
  height: 40%;
  background: linear-gradient(45deg, transparent 30%, #ECBF44 30%, #ECBF44 50%, transparent 50%);
  transform: rotate(-20deg);
}
*/

.hero-section__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .hero-section__container {
    padding: 0 20px;
  }
}

.hero-section__content {
  max-width: 600px;
}
@media (max-width: 767px) {
  .hero-section__content {
    max-width: 100%;
  }
}

.hero-section__heading {
  font-family: "Merriweather", Georgia, serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 32px;
}
@media (max-width: 767px) {
  .hero-section__heading {
    font-size: 2rem;
  }
}

.hero-section__subheading {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 48px;
}
@media (max-width: 767px) {
  .hero-section__subheading {
    font-size: 16px;
    margin-bottom: 32px;
  }
}

.hero-section__actions {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .hero-section__actions {
    flex-direction: column;
  }
  .hero-section__actions .button {
    width: 100%;
    text-align: center;
  }
}

/* =============================================================================
   Floating Contact Card
   ============================================================================= */
.floating-contact-card {
  position: absolute;
  bottom: 64px;
  right: 80px;
  max-width: 320px;
  background-color: #FFFFFF;
  border: 1px solid #F2F4F7;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 32px;
}
@media (max-width: 767px) {
  .floating-contact-card {
    position: static;
    max-width: 100%;
    margin-top: 48px;
  }
}

.floating-contact-card__heading {
  font-family: "Merriweather", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #103052;
  margin: 0 0 8px;
}

.floating-contact-card__prompt {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #6B7280;
  margin: 0 0 24px;
}

.floating-contact-card__phone,
.floating-contact-card__hours {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.floating-contact-card__phone:last-child,
.floating-contact-card__hours:last-child {
  margin-bottom: 0;
}

.floating-contact-card__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.floating-contact-card__link {
  font-family: "Merriweather", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #103052;
  text-decoration: none;
}
.floating-contact-card__link:hover {
  text-decoration: underline;
}
.floating-contact-card__link:focus {
  outline: 2px solid #103052;
  outline-offset: 2px;
  border-radius: 2px;
}

.floating-contact-card__text {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1E2A3A;
}