/* ==========================================================================
   21 COMMONIZED UI COMPONENTS & VARIANTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS (.c-button)
   -------------------------------------------------------------------------- */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height-md);
  padding: 0.65rem 1.5rem;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-normal);
}

.c-button--primary {
  background: var(--color-gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-glow);
}
.c-button--primary:hover {
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0px 8px 20px -2px rgba(79, 70, 229, 0.4);
}

.c-button--secondary {
  background-color: var(--color-white);
  color: var(--color-gray-900);
  border-color: var(--color-border);
  box-shadow: var(--shadow-xs);
}
.c-button--secondary:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-primary-600);
}

.c-button--dark {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}
.c-button--dark:hover {
  background-color: var(--color-gray-800);
}

.c-button--light {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

.c-button--lg {
  min-height: var(--btn-height-lg);
  padding: 0.85rem 2rem;
  font-size: var(--font-size-lg);
  border-radius: var(--radius-xl);
}

.c-button--sm {
  min-height: var(--btn-height-sm);
  padding: 0.4rem 1rem;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}

/* Full Width Button Modifier on Mobile */
@media (max-width: 767px) {
  .c-button--full-mobile {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   2. BADGE (.c-badge)
   -------------------------------------------------------------------------- */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  width: fit-content;
}

.c-badge--primary {
  background-color: var(--color-primary-50);
  color: var(--color-primary-600);
  border: 1px solid var(--color-primary-200);
}

.c-badge--secondary {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-border);
}

.c-badge--success {
  background-color: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

/* --------------------------------------------------------------------------
   3. SECTION HEADING (.c-section-heading)
   -------------------------------------------------------------------------- */
.c-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--space-10);
  gap: var(--space-3);
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .c-section-heading {
    margin-bottom: var(--space-12);
  }
}

.c-section-heading--left {
  align-items: flex-start;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.c-section-heading__title {
  font-size: clamp(1.65rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-gray-900);
  line-height: 1.2;
}

.c-section-heading__description {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
}

/* --------------------------------------------------------------------------
   4. SERVICE CARD (.c-service-card)
   -------------------------------------------------------------------------- */
.c-service-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all var(--transition-normal);
}

@media (min-width: 768px) {
  .c-service-card {
    padding: var(--space-8);
  }
}

.c-service-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-lg);
}

.c-service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--color-gradient-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  shrink: 0;
}

.c-service-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
}

.c-service-card__description {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

.c-service-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.c-service-card__feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.c-service-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-600);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   5. PROJECT CARD (.c-project-card)
   -------------------------------------------------------------------------- */
.c-project-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all var(--transition-normal);
}

.c-project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary-200);
}

.c-project-card__image-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  background-color: var(--color-gray-100);
}

.c-project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.c-project-card:hover .c-project-card__image {
  transform: scale(1.05);
}

.c-project-card__content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.c-project-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.c-project-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.c-project-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-4);
}

/* Horizontal Project Card Modifier */
.c-project-card--horizontal {
  flex-direction: column;
}
@media (min-width: 768px) {
  .c-project-card--horizontal {
    flex-direction: row;
  }
  .c-project-card--horizontal .c-project-card__image-wrap {
    width: 45%;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   6. INDUSTRY CARD (.c-industry-card)
   -------------------------------------------------------------------------- */
.c-industry-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: all var(--transition-normal);
  text-decoration: none;
  color: inherit;
}
.c-industry-card:hover {
  border-color: var(--color-primary-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   7. STATISTIC CARD (.c-stat-card)
   -------------------------------------------------------------------------- */
.c-stat-card {
  text-align: center;
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.c-stat-card__value {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary-600);
  line-height: 1.1;
  margin-bottom: var(--space-1);
}

.c-stat-card__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
}

/* --------------------------------------------------------------------------
   8. TESTIMONIAL CARD (.c-testimonial-card)
   -------------------------------------------------------------------------- */
.c-testimonial-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (min-width: 768px) {
  .c-testimonial-card { padding: var(--space-8); }
}

.c-testimonial-card__quote {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  margin-bottom: var(--space-6);
}

.c-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   9. TEAM CARD (.c-team-card)
   -------------------------------------------------------------------------- */
.c-team-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-align: center;
  padding: var(--space-6);
}

.c-team-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-4) auto;
  object-fit: cover;
  border: 3px solid var(--color-primary-100);
}

/* --------------------------------------------------------------------------
   10. CTA BANNER (.c-cta-banner)
   -------------------------------------------------------------------------- */
.c-cta-banner {
  background: var(--color-gradient-primary);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-6);
  color: var(--color-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .c-cta-banner { padding: var(--space-16) var(--space-10); }
}

.c-cta-banner__title {
  color: var(--color-white);
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: var(--font-weight-extrabold);
}

/* --------------------------------------------------------------------------
   11. FAQ ACCORDION (.c-faq-item)
   -------------------------------------------------------------------------- */
.c-faq-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.c-faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  text-align: left;
  cursor: pointer;
}
@media (min-width: 768px) {
  .c-faq-item__trigger {
    font-size: var(--font-size-lg);
    padding: var(--space-5) var(--space-6);
  }
}

.c-faq-item__content {
  padding: 0 var(--space-5) var(--space-5) var(--space-5);
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
}

/* --------------------------------------------------------------------------
   12. TABS (.c-tabs)
   -------------------------------------------------------------------------- */
.c-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.c-tab-btn {
  padding: 0.75rem 1.25rem;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.c-tab-btn.is-active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-600);
}

/* --------------------------------------------------------------------------
   13. BREADCRUMB (.c-breadcrumb)
   -------------------------------------------------------------------------- */
.c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--space-6);
}
.c-breadcrumb a {
  color: var(--color-gray-600);
  text-decoration: none;
}
.c-breadcrumb a:hover { color: var(--color-primary-600); }
.c-breadcrumb [aria-current="page"] { color: var(--color-gray-900); font-weight: 600; }

/* Light variant for dark hero backgrounds. */
.c-breadcrumb--light { color: rgba(255, 255, 255, 0.55); }
.c-breadcrumb--light a { color: rgba(255, 255, 255, 0.75); }
.c-breadcrumb--light a:hover { color: var(--color-white); }
.c-breadcrumb--light [aria-current="page"] { color: var(--color-white); }

/* --------------------------------------------------------------------------
   14. FORM FIELD (.c-form-field)
   -------------------------------------------------------------------------- */
.c-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  width: 100%;
}

.c-form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

.c-form-input,
.c-form-select,
.c-form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.c-form-input:focus,
.c-form-select:focus,
.c-form-textarea:focus {
  border-color: var(--color-primary-600);
  outline: none;
}

/* --------------------------------------------------------------------------
   15. PAGINATION (.c-pagination)
   -------------------------------------------------------------------------- */
.c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}

.c-pagination a,
.c-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.c-pagination .current {
  background-color: var(--color-primary-600);
  color: var(--color-white);
  border-color: var(--color-primary-600);
}

/* --------------------------------------------------------------------------
   16. MOBILE MENU DRAWER
   -------------------------------------------------------------------------- */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 380px;
  height: 100vh;
  background-color: var(--color-white);
  z-index: var(--z-drawer);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  transition: right var(--transition-normal);
}

.mobile-nav-drawer.is-open {
  right: 0;
}

/* --------------------------------------------------------------------------
   17. SITE HEADER — responsive navigation
   The nav collapses to a hamburger + drawer below 1024px. These rules were
   missing, so the desktop nav and hamburger both showed at every width.
   -------------------------------------------------------------------------- */

/* Mobile-first: show the hamburger, hide the desktop nav and desktop actions. */
.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-900);
}
.site-navigation,
.header-actions .desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .mobile-nav-toggle {
    display: none;
  }
  .site-navigation {
    display: block;
  }
  .header-actions .desktop-only {
    display: flex;
  }
}

/* Lock background scroll while the drawer is open. */
body.overflow-hidden {
  overflow: hidden;
}

/* Drawer backdrop (fades in/out; visibility keeps it out of the a11y + tab
   order while closed). */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: calc(var(--z-drawer) - 1);
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Header scrolled state (set by the IntersectionObserver in main.js). */
.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

/* Active nav item — covers both the fallback menu (styled inline in PHP) and a
   WordPress-assigned menu via its current-item classes. */
.site-navigation .main-menu .current-menu-item > a,
.site-navigation .main-menu .current_page_item > a,
.site-navigation .main-menu .current-menu-ancestor > a {
  color: var(--color-primary-600);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-drawer,
  .mobile-nav-backdrop {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   18. LANGUAGE SWITCHER (.c-lang-switcher) — used in the standard header/drawer
   -------------------------------------------------------------------------- */
.c-lang-switcher {
  position: relative;
}
.c-lang-switcher__current {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.c-lang-switcher__current:hover {
  border-color: var(--color-primary-400);
  color: var(--color-primary-600);
}
.c-lang-switcher__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 170px;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-dropdown);
}
.c-lang-switcher:hover .c-lang-switcher__dropdown,
.c-lang-switcher:focus-within .c-lang-switcher__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.c-lang-switcher__dropdown a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-size-sm);
}
.c-lang-switcher__dropdown a:hover {
  background: var(--color-gray-50);
}
.c-lang-switcher__dropdown a.is-active {
  color: var(--color-primary-600);
  font-weight: 700;
}