/* ==============================================
   Component Styles
   ============================================== */

/* ---- Buttons ---- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  font-size: 18px;
  padding: 18px 36px;
  border-radius: 4px;
  box-shadow: 0 4px 0 var(--color-accent-dark);
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: center;
}

.btn-primary:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--color-accent-dark);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: var(--color-main);
  color: #FFFFFF;
  font-weight: var(--fw-bold);
  padding: 16px 32px;
  border-radius: 4px;
  transition: background 0.2s;
  text-align: center;
}

.btn-secondary:hover {
  background: var(--color-main-dark);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-main);
  border: 2px solid var(--color-main);
  font-weight: var(--fw-bold);
  padding: 14px 28px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  text-align: center;
}

.btn-ghost:hover {
  background: var(--color-main);
  color: #FFFFFF;
}

.btn-ghost-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  font-weight: var(--fw-bold);
  padding: 14px 28px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  text-align: center;
}

.btn-ghost-white:hover {
  background: #FFFFFF;
  color: var(--color-text);
}

.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: #06C755;
  color: #FFFFFF;
  font-weight: var(--fw-bold);
  padding: 16px 32px;
  border-radius: 4px;
  transition: opacity 0.2s;
  text-align: center;
}

.btn-line:hover {
  opacity: 0.9;
}

/* ---- Breadcrumb ---- */

.breadcrumb {
  padding: var(--space-sm) 0;
  background: var(--color-bg-warm);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}

.breadcrumb__list li:not(:last-child)::after {
  content: ">";
  margin-left: var(--space-xs);
}

.breadcrumb__list a {
  color: var(--color-main);
}

.breadcrumb__list a:hover {
  text-decoration: underline;
}

/* ---- CTA Banner ---- */

.cta-banner {
  background: var(--color-accent);
  padding: var(--space-xxl) 0;
  text-align: center;
}

.cta-banner__inner {
  max-width: var(--container-content);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.cta-banner h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-sm);
}

.cta-banner p {
  margin-bottom: var(--space-lg);
}

.cta-banner__buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-banner .btn-primary {
  background: var(--color-bg-dark);
  color: #FFFFFF;
  box-shadow: 0 4px 0 #000;
}

.cta-banner .btn-primary:hover {
  box-shadow: 0 2px 0 #000;
}

/* ---- Sub Hero (Category pages) ---- */

.subhero {
  background: var(--color-bg-dark);
  color: #FFFFFF;
  padding: var(--space-xxl) 0;
  text-align: center;
}

.subhero__tag {
  font-family: var(--font-en);
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.subhero__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-sm);
}

.subhero__lead {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
  .subhero {
    padding: var(--space-xl) 0;
  }

  .subhero__title {
    font-size: var(--fs-h2);
  }
}

/* ---- Contact Form 7 ---- */

.contact__form .form-group {
  margin-bottom: var(--space-md);
}

.contact__form label {
  display: block;
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-xs);
  font-size: var(--fs-body);
}

.contact__form .required {
  color: #e53e3e;
  font-size: var(--fs-small);
  margin-left: 4px;
}

.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: var(--fs-body);
  background: #fff;
  transition: border-color 0.2s;
}

.contact__form input[type="text"]:focus,
.contact__form input[type="email"]:focus,
.contact__form input[type="tel"]:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(30, 64, 120, 0.1);
}

.contact__form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact__form .wpcf7-list-item {
  margin-right: var(--space-sm);
}

.contact__form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  font-size: 18px;
  padding: 18px 48px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px 0 var(--color-accent-dark);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: var(--space-md);
}

.contact__form input[type="submit"]:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--color-accent-dark);
}

.contact__form .wpcf7-response-output {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
}

.contact__form .wpcf7-not-valid-tip {
  color: #e53e3e;
  font-size: var(--fs-small);
  margin-top: 4px;
}