/**
 * CSS Variables
 * Centralized theme variables for
 * standardizing card styles, layout spacing,
 * background, and step-by-step layout.
 */
:root {
  /* Card */
  --card-bg: #fff;
  --card-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  --card-radius: 0.5rem;

  /* Landing Page */
  --landing-gap: 1.5rem;
  --landing-gap-mobile: 1rem;
  --landing-mb: 2rem;
  --landing-mb-mobile: 1rem;
  --page-width: min(100%, 96.875rem); /* 1550px */

  /* Thumbnails */
  --thumbnail-padding: 1.5rem;
  --thumbnail-radius: 0.5rem;

  /* Footer */
  --footer-border: 0.75rem solid #ffc107;
  --footer-bg: #000;
  --footer-color: #fff;
  --footer-gap: 0.75rem;
  --footer-social-icon-size: 1.25rem;
  --footer-social-icon-height: 1.5rem;
  --footer-social-gap: 0.75rem;

  /* Swiper */
  --swiper-slide-mb: 1.25rem;
  --swiper-pagination-active: #ffb71b;

  /* Forms */
  --form-width: 30rem;
  --form-height: 10rem;

  /* Badges */
  --badge-mr: 0.3125rem;

  /* Workflow CTA */
  --workflow-cta-mt: 2.5rem;
  --workflow-cta-mb: 2rem;
  --workflow-cta-padding: 1.5rem 2rem;
  --workflow-cta-bg: #ececec;
  --workflow-cta-radius: 1.5rem;
  --workflow-cta-gap: 2rem;
  --workflow-cta-icon-size: 3rem;
  --workflow-cta-icon-gap: 0.625rem;

  /* Workflow CTA Button */
  --workflow-cta-btn-h: 2.5rem;
  --workflow-cta-btn-maxw: 17.5rem;
  --workflow-cta-btn-padding: 0.5rem 1rem;
  --workflow-cta-btn-bg: #fff;
  --workflow-cta-btn-color: #000;
  --workflow-cta-btn-radius: 0.25rem;
  --workflow-cta-btn-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
  --workflow-cta-btn-hover-bg: #ececec;

  /* Stars */
  --star-text-color: #353535;
}

/**
 * Dark Theme Variables
 */
html[data-theme="dark"] {
  --card-bg: #1e1e1e;
  --card-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
  --footer-bg: #121212;
  --footer-color: #fff;
  --workflow-cta-bg: #353535;
  --workflow-cta-btn-bg: #000;
  --workflow-cta-btn-color: #fff;
  --workflow-cta-btn-border: 1px solid #353535;
  --workflow-cta-btn-hover-bg: #ccc;
  --star-text-color: #ececec;
}

/**
 * Card Styles
 */
.testimonial-card {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-radius: var(--card-radius);
  height: 100%;
}

/**
 * Landing Page Layout
 */
.projects-landingpage,
.blogs-landingpage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--landing-gap);
  margin-bottom: var(--landing-mb);
}

@media (max-width: 1200px) {
  .projects-landingpage,
  .blogs-landingpage {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--landing-gap-mobile);
  }
}

.bd-page-width {
  max-width: var(--page-width) !important;
}

/**
 * Thumbnails
 */
.project-lp-thumbnail {
  padding: var(--thumbnail-padding);
  border-radius: var(--thumbnail-radius);
}

.project-card .sd-card {
  padding: var(--thumbnail-padding);
}

/**
 * Footer
 */
.bd-footer {
  border-top: var(--footer-border);
  width: 100%;
  color: var(--footer-color);
  background-color: var(--footer-bg);
}

.footer-left h4,
.footer-right h4 {
  color: var(--footer-color);
}

.bd-footer a {
  color: var(--footer-color);
}

.carousel {
  background-color: var(--footer-bg) !important;
}

/**
 * Footer Links
 */
.external-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 0.5rem;
}

.external-link .link-text {
  display: inline-block;
  width: 7.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.external-link i {
  font-size: 0.85rem;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: var(--footer-gap);
  justify-content: flex-end;
  width: 100%;
}

/**
 * Swiper (Project Carousel)
 */
.swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.swiper-slide {
  display: flex;
}

.swiper-slide .project-card {
  height: 29.375rem; /* 470px */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: var(--swiper-slide-mb);
}

.swiper-pagination {
  position: initial !important;
}

/**
 * General Overrides
 */
.bd-header-article {
  display: none !important;
}

.bd-main .bd-content {
  display: flex !important;
  height: 100% !important;
  justify-content: center !important;
}

.bd-main .bd-content .bd-article-container {
  width: 100% !important;
}

.center {
  margin: 0 auto !important;
}

#hero-image {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}

/**
 * Contact Us
 */
.mb-3 .form-control {
  width: var(--form-width);
}

textarea.form-control {
  height: var(--form-height);
}

.swiper-pagination-clickable .swiper-pagination-bullet-active {
  background: var(--swiper-pagination-active) !important;
}

/**
 * Footer Social Icons
 */
.footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
  width: 100%;
}

.footer-right .social-icons {
  display: flex;
  gap: 0.5rem;
}

.footer-right .social-icons .icon {
  display: inline-block;
  width: var(--footer-social-icon-size);
  height: var(--footer-social-icon-height);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.2s;
}

.footer-right .social-icons .icon-youtube {
  background-image: url(https://www.ansys.com/etc.clientlibs/ansysincprogram/clientlibs/clientlib-site/resources/images/icon-youtube-white.png);
  width: 1.8125rem;
}

.footer-right .social-icons .icon-youtube:hover {
  background-image: url(https://www.ansys.com/etc.clientlibs/ansysincprogram/clientlibs/clientlib-site/resources/images/icon-youtube-color.png);
}

.footer-right .social-icons .icon-facebook {
  background-image: url(https://www.ansys.com/etc.clientlibs/ansysincprogram/clientlibs/clientlib-site/resources/images/icon-facebook-white.png);
}

.footer-right .social-icons .icon-facebook:hover {
  background-image: url(https://www.ansys.com/etc.clientlibs/ansysincprogram/clientlibs/clientlib-site/resources/images/icon-facebook-color.png);
}

.footer-right .social-icons .icon-linkedin {
  background-image: url(https://www.ansys.com/etc.clientlibs/ansysincprogram/clientlibs/clientlib-site/resources/images/icon-linkedin-white.png);
}

.footer-right .social-icons .icon-linkedin:hover {
  background-image: url(https://www.ansys.com/etc.clientlibs/ansysincprogram/clientlibs/clientlib-site/resources/images/icon-linkedin-color.png);
}

.footer-right .social-icons .icon-github {
  background: none;
  font-size: 1.375rem;
}

.footer-right .social-icons .icon-github:hover {
  color: #000;
}

/**
 * Features Section
 */
.step .icon {
  background: var(--workflow-cta-bg);
  color: var(--workflow-cta-btn-color);
}

.sd-badge {
  margin-right: var(--badge-mr);
}

@media (max-width: 600px) {
  .blog-meta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.2rem;
  }
}

/**
 * PyAnsys Landing Page
 */
.workflow-cta {
  margin: var(--workflow-cta-mt) 0 var(--workflow-cta-mb) 0;
  padding: var(--workflow-cta-padding);
  background: var(--workflow-cta-bg);
  border-radius: var(--workflow-cta-radius);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--workflow-cta-gap);
}

.workflow-cta-left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
  min-width: 18.75rem;
}

.workflow-cta-icon {
  margin-top: 0.2rem;
  display: flex;
  width: var(--workflow-cta-icon-size);
  height: var(--workflow-cta-icon-size);
  justify-content: center;
  align-items: center;
  gap: var(--workflow-cta-icon-gap);
  aspect-ratio: 1/1;
  background: var(--workflow-cta-btn-bg);
}

.workflow-cta-title {
  margin: 0 0 0.5rem 0;
}

.workflow-cta-btn {
  display: flex;
  height: var(--workflow-cta-btn-h);
  max-width: var(--workflow-cta-btn-maxw);
  padding: var(--workflow-cta-btn-padding);
  justify-content: center;
  align-items: center;
  background: var(--workflow-cta-btn-bg);
  color: var(--workflow-cta-btn-color) !important;
  border-radius: var(--workflow-cta-btn-radius);
  box-shadow: var(--workflow-cta-btn-shadow);
  border-color: var(--workflow-cta-btn-bg);
  text-decoration: none;
}

.workflow-cta-btn:hover {
  background: var(--workflow-cta-btn-hover-bg) !important;
}

/**
 * GitHub Stars
 */
.star-starcount-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  vertical-align: middle;
}

/**
 * Project Card Star Badge
 */
.project-star-badge {
  color: #615655;
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: #f7f7f7;
  box-shadow: 0 1px 2px 0
    var(rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12));
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  z-index: 2;
  padding: 0 0.25rem;
}

.project-star-count {
  font-weight: 600;
}