/* ==========================================================================
   HERCO ASESORES - BLOCK STYLES
   Maps the theme design onto core block markup so pages can be edited
   from the WordPress block editor. Loaded after main.css (front + editor).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page content wrapper
   Full-width sections (alignfull) span the viewport; any other top-level
   block is kept inside the 1366px content column.
   -------------------------------------------------------------------------- */
.herco-page-content > :not(.alignfull) {
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.herco-page-content > :not(.alignfull):first-child {
  margin-top: 3rem;
}

.herco-page-content > :not(.alignfull):last-child {
  margin-bottom: 3rem;
}

.herco-page-content > p,
.herco-page-content > ul,
.herco-page-content > ol {
  margin-bottom: 1rem;
}

.herco-page-content > h2,
.herco-page-content > h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Classic themes wrap every group's children in .wp-block-group__inner-container
   (front end and editor). Make that wrapper transparent so the theme's grid and
   flex layouts apply to the real children. */
.wp-block-group__inner-container {
  display: contents;
}

/* --------------------------------------------------------------------------
   2. Badges (paragraph block styles)
   -------------------------------------------------------------------------- */
p.is-style-herco-badge,
p.is-style-herco-badge-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: none;
  padding: 0.35rem 1rem;
  border-radius: var(--herco-radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin: 0 0 1rem 0;
  opacity: 1;
}

p.is-style-herco-badge-light {
  background: var(--herco-accent-light);
  color: var(--herco-primary) !important;
  border-color: var(--herco-border);
}

/* --------------------------------------------------------------------------
   3. Buttons (button block styles)
   -------------------------------------------------------------------------- */
.wp-block-buttons {
  gap: 1.25rem;
}

.wp-block-button[class*="is-style-herco-"] .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.8rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--herco-radius-md);
  border: 2px solid transparent;
  box-shadow: var(--herco-shadow-sm);
  transition: var(--herco-transition);
}

.wp-block-button.is-style-herco-primary .wp-block-button__link {
  background-color: var(--herco-primary);
  border-color: var(--herco-primary);
  color: #FFFFFF;
}

.wp-block-button.is-style-herco-primary .wp-block-button__link:hover {
  background-color: var(--herco-primary-hover);
  border-color: var(--herco-primary-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--herco-shadow-glow);
}

.wp-block-button.is-style-herco-secondary .wp-block-button__link {
  background-color: var(--herco-secondary);
  border-color: var(--herco-secondary);
  color: #FFFFFF;
}

.wp-block-button.is-style-herco-secondary .wp-block-button__link:hover {
  background-color: var(--herco-secondary-hover);
  border-color: var(--herco-secondary-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.wp-block-button.is-style-herco-outline .wp-block-button__link {
  background-color: transparent;
  border-color: var(--herco-primary);
  color: var(--herco-primary);
}

.wp-block-button.is-style-herco-outline .wp-block-button__link:hover {
  background-color: var(--herco-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.wp-block-button.is-style-herco-outline-white .wp-block-button__link {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

.wp-block-button.is-style-herco-outline-white .wp-block-button__link:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--herco-primary);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   4. Lists with check icons (list block style)
   -------------------------------------------------------------------------- */
.is-style-herco-checks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.is-style-herco-checks li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--herco-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   5. Icon block
   -------------------------------------------------------------------------- */
.wp-block-herco-icon svg {
  display: block;
}

.wp-block-herco-icon.herco-why-icon {
  color: var(--herco-primary);
}

.wp-block-herco-icon.herco-service-icon-box {
  color: var(--herco-secondary);
}

.wp-block-herco-icon.herco-service-icon-box svg {
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   6. Home: hero, stats, trust, services, why-us, CTA
   -------------------------------------------------------------------------- */
.herco-hero-inner {
  max-width: calc(860px + 3rem);
  text-align: center;
}

.herco-hero h1 {
  color: #FFFFFF;
  font-size: 3rem;
  margin-bottom: 1.25rem;
}

.herco-hero p.herco-hero-lead {
  color: #FFFFFF;
  font-size: 1.25rem;
  max-width: 680px;
  margin: 0 auto 2.25rem auto;
  opacity: 0.95;
}

.herco-hero .wp-block-buttons {
  justify-content: center;
}

p.herco-stat-number,
p.herco-stat-label {
  margin: 0;
}

p.herco-stat-number {
  margin-bottom: 0.5rem;
}

p.herco-trust-icon {
  margin: 0;
}

.herco-trust-header h2 {
  text-align: center;
}

.herco-service-card p.herco-service-link {
  flex-grow: 0;
  margin-bottom: 0;
}

.herco-service-link a {
  color: inherit;
}

.herco-service-list {
  padding-left: 0;
}

.herco-cta-section p {
  margin-bottom: 1.5rem;
}

.herco-cta-section .wp-block-buttons {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Inner pages: header banner
   -------------------------------------------------------------------------- */
.herco-page-hero {
  background: linear-gradient(135deg, var(--herco-primary) 0%, var(--herco-secondary) 100%);
  color: #FFFFFF;
  padding: 4rem 0 3rem 0;
  text-align: center;
}

.herco-page-hero h1 {
  color: #FFFFFF;
  margin-top: 0.5rem;
}

.herco-page-hero p:not(.is-style-herco-badge):not(.is-style-herco-badge-light) {
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 0.5rem auto 0 auto;
}

.herco-page-section {
  padding: 5rem 0;
}

/* --------------------------------------------------------------------------
   8. Services catalog
   -------------------------------------------------------------------------- */
.herco-catalog-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 2.5rem;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  scroll-margin-top: 100px;
}

.herco-catalog-card-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.herco-catalog-card-header h2 {
  color: var(--herco-secondary);
  font-size: 1.6rem;
  margin: 0 0 0.2rem 0;
}

.herco-catalog-card-header p {
  color: #AD513E;
  font-weight: 600;
  margin: 0;
}

.herco-catalog-card > p,
.herco-catalog-card > .wp-block-group__inner-container > p {
  flex-grow: 1;
}

.herco-catalog-card h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.herco-catalog-card > .wp-block-buttons,
.herco-catalog-card > .wp-block-group__inner-container > .wp-block-buttons {
  margin-top: auto;
}

.herco-catalog-card .wp-block-buttons .wp-block-button {
  flex: 1 1 100%;
}

.herco-catalog-card .wp-block-buttons .wp-block-button__link {
  width: 100%;
}

/* --------------------------------------------------------------------------
   9. About page
   -------------------------------------------------------------------------- */
.herco-about-intro {
  gap: 3.5rem;
  margin-bottom: 5rem;
}

.herco-about-intro h2 {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
}

.herco-values-box {
  background: var(--herco-primary);
  color: #FFFFFF;
  padding: 3rem;
  border-radius: 16px;
}

.herco-values-box h3 {
  color: #FFFFFF;
  margin-bottom: 1.5rem;
}

.herco-values-box h4 {
  color: #FFFFFF;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.herco-values-box p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.herco-value-item + .herco-value-item {
  margin-top: 1.2rem;
}

.herco-section-title.herco-section-title-spaced {
  margin-top: 4rem;
}

.herco-leader-card {
  max-width: 860px;
  margin: 0 auto;
  background: var(--herco-surface);
  border: 1px solid var(--herco-border);
  border-radius: var(--herco-radius-xl);
  padding: 3rem;
  box-shadow: var(--herco-shadow-lg);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: center;
}

.herco-leader-photo {
  margin: 0;
  border-radius: var(--herco-radius-lg);
  overflow: hidden;
  box-shadow: var(--herco-shadow-md);
  border: 3px solid var(--herco-accent-light);
  aspect-ratio: 1;
}

.herco-leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

p.herco-leader-role {
  color: var(--herco-primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.herco-leader-info h3 {
  font-size: 2rem;
  color: var(--herco-text-dark);
  margin-bottom: 0.75rem;
}

.herco-leader-info p:not(.herco-leader-role) {
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.herco-leader-info .wp-block-button__link {
  padding: 0.7rem 1.4rem !important;
  font-size: 0.95rem !important;
}

/* --------------------------------------------------------------------------
   10. Contact page
   -------------------------------------------------------------------------- */
.herco-contact-info-box p {
  margin-bottom: 0;
}

.herco-contact-details p {
  margin: 0;
}

.herco-map-embed.herco-map-tall {
  height: 300px;
}

.herco-contact-form-box h3 {
  margin-bottom: 0.5rem;
}

.herco-contact-form-box > p,
.herco-contact-form-box > .wp-block-group__inner-container > p {
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.herco-form-alert {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.herco-form-alert-success {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}

.herco-form-alert-error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .herco-hero h1 {
    font-size: 2.2rem;
  }

  .herco-leader-card {
    grid-template-columns: 1fr;
    padding: 2rem;
    text-align: center;
  }

  .herco-leader-photo {
    max-width: 200px;
    margin: 0 auto;
  }

  .herco-leader-info .wp-block-buttons {
    justify-content: center;
  }

  .herco-values-box,
  .herco-catalog-card {
    padding: 2rem 1.5rem;
  }
}