/**
 * @file
 * Knowledge Hub, FAQ, Blog, Contact styles.
 * Based on wireframes 48-52.
 */

/* ===========================================
   CSS Variables
   =========================================== */
:root {
  --kh-primary-orange: #DA6630;
  --kh-primary-purple: #68468F;
  --kh-dark-text: #1a1a2e;
  --kh-gray-text: #6b7280;
  --kh-light-bg: #f9fafb;
  --kh-white: #ffffff;
  --kh-border: #e5e7eb;
  --kh-radius-sm: 6px;
  --kh-radius-md: 10px;
  --kh-radius-lg: 12px;
  --kh-radius-xl: 16px;
  --kh-radius-2xl: 20px;
  --kh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --kh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --kh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --kh-transition: 200ms ease;
}

/* ===========================================
   Knowledge Hub Hero
   =========================================== */
.knowledge-hub-hero {
  background-color: var(--kh-border);
  padding: 48px 24px;
  text-align: center;
}

.knowledge-hub-hero__container {
  max-width: 800px;
  margin: 0 auto;
}

.knowledge-hub-hero__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--kh-dark-text);
  margin-bottom: 12px;
}

.knowledge-hub-hero__subtitle {
  font-size: 16px;
  color: var(--kh-gray-text);
  margin-bottom: 32px;
}

.knowledge-hub-hero__search {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.knowledge-hub-hero__search-input {
  width: 100%;
  padding: 16px 20px;
  padding-right: 50px;
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-md);
  font-size: 14px;
  outline: none;
  background: var(--kh-white);
}

.knowledge-hub-hero__search-input:focus {
  border-color: var(--kh-dark-text);
}

.knowledge-hub-hero__search-input::placeholder {
  color: var(--kh-gray-text);
}

.knowledge-hub-hero__no-results {
  margin-top: 24px;
  padding: 16px 24px;
  background-color: var(--kh-white);
  border-radius: var(--kh-radius-md);
  text-align: center;
}

.knowledge-hub-hero__no-results p {
  color: var(--kh-gray-text);
  font-size: 15px;
  margin: 0;
}

.knowledge-hub-hero__search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--kh-gray-text);
}

/* ===========================================
   Resource Tabs
   =========================================== */
.resource-tabs {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

/* .resource-tabs__container {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--kh-border);
  margin-bottom: 32px;
} */

.resource-tabs__tab {
  padding: 12px 0;
  font-size: 14px;
  color: var(--kh-gray-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: var(--kh-transition);
}

.resource-tabs__tab:hover {
  color: var(--kh-dark-text);
}

.resource-tabs__tab--active {
  color: var(--kh-dark-text);
  border-bottom-color: var(--kh-dark-text);
}

/* ===========================================
   Guide Cards
   =========================================== */
.guide-cards {
  max-width: 1000px;
  margin: 0 auto;
}

.guide-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Guide cards column variants */
.guide-cards--cols-1 .guide-cards__grid {
  grid-template-columns: 1fr;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.guide-cards--cols-2 .guide-cards__grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.guide-cards--cols-3 .guide-cards__grid {
  grid-template-columns: repeat(3, 1fr);
}

.guide-cards--cols-4 .guide-cards__grid {
  grid-template-columns: repeat(4, 1fr);
}

.guide-cards--cols-5 .guide-cards__grid {
  grid-template-columns: repeat(5, 1fr);
}

.guide-cards--cols-6 .guide-cards__grid {
  grid-template-columns: repeat(6, 1fr);
}

/* Guide cards responsive breakpoints */
@media (max-width: 1200px) {

  .guide-cards--cols-5 .guide-cards__grid,
  .guide-cards--cols-6 .guide-cards__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 992px) {

  .guide-cards--cols-4 .guide-cards__grid,
  .guide-cards--cols-5 .guide-cards__grid,
  .guide-cards--cols-6 .guide-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {

  .guide-cards__grid,
  .guide-cards--cols-2 .guide-cards__grid,
  .guide-cards--cols-3 .guide-cards__grid,
  .guide-cards--cols-4 .guide-cards__grid,
  .guide-cards--cols-5 .guide-cards__grid,
  .guide-cards--cols-6 .guide-cards__grid {
    grid-template-columns: 1fr;
  }
}

.guide-cards__card {
  background-color: var(--kh-white);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
  padding: 24px;
  transition: var(--kh-transition);
}

.guide-cards__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kh-shadow-lg);
}

.guide-cards__icon {
  width: 48px;
  height: 48px;
  background-color: var(--kh-dark-text);
  border-radius: var(--kh-radius-md);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-cards__icon svg {
  width: 24px;
  height: 24px;
  color: var(--kh-white);
}

.guide-cards__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--kh-dark-text);
  margin-bottom: 8px;
}

.guide-cards__description {
  font-size: 14px;
  color: var(--kh-gray-text);
  margin-bottom: 16px;
  line-height: 1.5;
}

.guide-cards__link {
  font-size: 14px;
  color: var(--kh-dark-text);
  text-decoration: none;
  font-weight: 500;
}

.guide-cards__link:hover {
  text-decoration: underline;
}

/* ===========================================
   Featured Articles
   =========================================== */
.featured-articles {
  /* max-width: 1000px; */
  margin: 0 auto;
  /* padding: 0 24px 48px; */
}

.featured-articles__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--kh-dark-text);
  margin-bottom: 24px;
}

.featured-articles__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.featured-articles__card {
  background-color: var(--kh-white);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
  padding: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  transition: var(--kh-transition);
}

.featured-articles__card:hover {
  box-shadow: var(--kh-shadow-md);
}

.featured-articles__image {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--kh-radius-md);
  overflow: hidden;
}

.featured-articles__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-articles__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--kh-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-articles__image-placeholder svg {
  width: 32px;
  height: 32px;
  color: var(--kh-gray-text);
}

.featured-articles__content {
  flex: 1;
}

.featured-articles__category {
  font-size: 11px;
  color: var(--kh-gray-text);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.featured-articles__card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--kh-dark-text);
  margin-bottom: 8px;
}

.featured-articles__description {
  font-size: 14px;
  color: var(--kh-gray-text);
  margin-bottom: 8px;
}

.featured-articles__meta {
  font-size: 12px;
  color: var(--kh-gray-text);
}

.featured-articles__link {
  font-size: 14px;
  color: var(--kh-dark-text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.featured-articles__link:hover {
  text-decoration: underline;
}

/* ===========================================
   FAQ Section
   =========================================== */
.faq-section {
  padding: 48px 24px 64px;
}

.faq-section__container {
  max-width: 900px;
  margin: 0 auto;
}

.faq-section__title {
  font-size: 40px;
  font-weight: 700;
  color: var(--kh-dark-text);
  text-align: center;
  margin-bottom: 16px;
}

.faq-section__subtitle {
  font-size: 16px;
  color: var(--kh-gray-text);
  text-align: center;
  margin-bottom: 32px;
}

.faq-section__search {
  margin-bottom: 32px;
}

.faq-section__search-input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-md);
  font-size: 16px;
  background-color: var(--kh-white);
}

.faq-section__search-input:focus {
  outline: none;
  border-color: var(--kh-dark-text);
}

.faq-section__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--kh-border);
  padding-bottom: 0;
}

.faq-section__tab {
  padding: 12px 20px;
  font-size: 14px;
  color: var(--kh-gray-text);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--kh-transition);
}

.faq-section__tab:hover {
  color: var(--kh-dark-text);
}

.faq-section__tab--active {
  color: var(--kh-dark-text);
  font-weight: 500;
  border-bottom-color: var(--kh-dark-text);
}

.faq-section__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-section__item {
  background-color: var(--kh-white);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
  overflow: hidden;
}

.faq-section__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
}

.faq-section__question h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--kh-dark-text);
  margin: 0;
}

.faq-section__icon {
  color: var(--kh-gray-text);
  transition: transform var(--kh-transition);
}

.faq-section__icon svg {
  width: 20px;
  height: 20px;
}

.faq-section__item--open .faq-section__icon {
  transform: rotate(180deg);
}

.faq-section__answer {
  padding: 0 24px 20px;
  color: var(--kh-gray-text);
  font-size: 15px;
  line-height: 1.6;
  display: none;
}

.faq-section__item--open .faq-section__answer {
  display: block;
}

.faq-section__help {
  margin-top: 48px;
  background-color: var(--kh-light-bg);
  border-radius: var(--kh-radius-lg);
  padding: 48px;
  text-align: center;
}

.faq-section__help-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--kh-dark-text);
  margin-bottom: 12px;
}

.faq-section__help-text {
  font-size: 16px;
  color: var(--kh-gray-text);
  margin-bottom: 24px;
}

.faq-section__help-button {
  display: inline-block;
  padding: 14px 32px;
  background-color: var(--kh-white);
  color: var(--kh-dark-text);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-md);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--kh-transition);
}

.faq-section__help-button:hover {
  background-color: var(--kh-light-bg);
}

/* ===========================================
   Contact Hero
   =========================================== */
.contact-hero {
  padding: 48px 24px;
  text-align: center;
}

.contact-hero__container {
  max-width: 900px;
  margin: 0 auto;
}

.contact-hero__title {
  font-size: 40px;
  font-weight: 700;
  color: var(--kh-dark-text);
  margin-bottom: 12px;
}

.contact-hero__subtitle {
  font-size: 16px;
  color: var(--kh-gray-text);
}

/* ===========================================
   Contact Options
   =========================================== */
.contact-options {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.contact-options__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 767px) {
  .contact-options__grid {
    grid-template-columns: 1fr;
  }
}

.contact-options__card {
  background-color: var(--kh-white);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
  padding: 32px 24px;
  text-align: center;
}

.contact-options__icon {
  width: 48px;
  height: 48px;
  background-color: var(--kh-light-bg);
  border-radius: var(--kh-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.contact-options__icon svg {
  width: 24px;
  height: 24px;
  color: var(--kh-gray-text);
}

.contact-options__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--kh-dark-text);
  margin-bottom: 8px;
}

.contact-options__description {
  font-size: 14px;
  color: var(--kh-gray-text);
  margin-bottom: 16px;
}

.contact-options__detail {
  font-size: 14px;
  font-weight: 500;
  color: var(--kh-dark-text);
}

.contact-options__detail--link {
  text-decoration: none;
  transition: color var(--kh-transition);
}

.contact-options__detail--link:hover {
  color: var(--kh-primary-orange);
}

.contact-options__button {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--kh-dark-text);
  color: var(--kh-white);
  border-radius: var(--kh-radius-sm);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--kh-transition);
}

.contact-options__button:hover {
  background-color: #2d2d4a;
}

/* ===========================================
   Blog Hero
   =========================================== */
.blog-hero {
  padding: 48px 24px;
}

.blog-hero__container {
  margin: 0 auto;
}

.blog-hero__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--kh-dark-text);
  margin-bottom: 8px;
}

.blog-hero__subtitle {
  font-size: 14px;
  color: var(--kh-gray-text);
  margin-bottom: 32px;
}

.blog-hero__filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-hero__filter {
  padding: 10px 20px;
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-2xl);
  font-size: 14px;
  background: var(--kh-white);
  cursor: pointer;
  color: var(--kh-gray-text);
  text-decoration: none;
  transition: var(--kh-transition);
}

.blog-hero__filter:hover {
  border-color: var(--kh-dark-text);
  color: var(--kh-dark-text);
}

.blog-hero__filter--active {
  background-color: var(--kh-dark-text);
  color: var(--kh-white);
  border-color: var(--kh-dark-text);
}

.blog-hero__filter--active:hover {
  color: var(--kh-white);
}

/* ===========================================
   Blog Grid (Screen 49)
   =========================================== */
.blog-grid-wrapper {
  /* max-width: 1200px; */
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* Make Views outer wrapper transparent */
.blog-grid>.views-element-container {
  display: contents;
}

/* Apply grid to the Views JS container that holds the cards */
.blog-grid .views-element-container>div[class^="js-view-dom-id"] {
  display: grid !important;
  gap: 24px;
}

/* Ensure Views rows fill the entire grid cell height */
.blog-grid .views-element-container .views-row,
.blog-grid .views-row,
.view-blog-posts .views-row {
  display: flex;
  height: 100%;
}

/* Default layout - 3 columns */
.blog-grid--default .views-element-container>div[class^="js-view-dom-id"] {
  grid-template-columns: repeat(3, 1fr) !important;
  /* max-width: 1100px; */
  margin-left: auto;
  margin-right: auto;
}

/* 1 column layout */
.blog-grid--cols-1 .views-element-container>div[class^="js-view-dom-id"] {
  grid-template-columns: 1fr !important;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* 2 columns layout */
.blog-grid--cols-2 .views-element-container>div[class^="js-view-dom-id"] {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 3 columns layout (default) */
.blog-grid--cols-3 .views-element-container>div[class^="js-view-dom-id"] {
  grid-template-columns: repeat(3, 1fr) !important;
  /* max-width: 1100px; */
  margin-left: auto;
  margin-right: auto;
}

/* 4 columns layout */
.blog-grid--cols-4 .views-element-container>div[class^="js-view-dom-id"] {
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* 5 columns layout */
.blog-grid--cols-5 .views-element-container>div[class^="js-view-dom-id"] {
  grid-template-columns: repeat(5, 1fr) !important;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

/* 6 columns layout */
.blog-grid--cols-6 .views-element-container>div[class^="js-view-dom-id"] {
  grid-template-columns: repeat(6, 1fr) !important;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
  .blog-grid--cols-6 .views-element-container>div[class^="js-view-dom-id"] {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

@media (max-width: 1200px) {

  .blog-grid--cols-4 .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-5 .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-6 .views-element-container>div[class^="js-view-dom-id"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 992px) {

  .blog-grid--default .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-3 .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-4 .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-5 .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-6 .views-element-container>div[class^="js-view-dom-id"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {

  .blog-grid--default .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-2 .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-3 .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-4 .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-5 .views-element-container>div[class^="js-view-dom-id"],
  .blog-grid--cols-6 .views-element-container>div[class^="js-view-dom-id"] {
    grid-template-columns: 1fr !important;
  }
}

/* Blog Pagination */
.blog-grid-wrapper .pager,
.blog-grid .pager {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  grid-column: 1 / -1;
}

.blog-grid-wrapper .pager__items,
.blog-grid .pager__items {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.blog-grid-wrapper .pager__item a,
.blog-grid-wrapper .pager__item span,
.blog-grid .pager__item a,
.blog-grid .pager__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-md);
  color: var(--kh-gray-text);
  text-decoration: none;
  font-size: 14px;
  transition: var(--kh-transition);
  background: var(--kh-white);
}

.blog-grid-wrapper .pager__item a:hover,
.blog-grid .pager__item a:hover {
  border-color: var(--kh-primary-orange);
  color: var(--kh-primary-orange);
}

.blog-grid-wrapper .pager__item--active span,
.blog-grid-wrapper .pager__item.is-active span,
.blog-grid .pager__item--active span,
.blog-grid .pager__item.is-active span {
  background-color: var(--kh-primary-orange);
  border-color: var(--kh-primary-orange);
  color: var(--kh-white);
}

.blog-grid-wrapper .pager__item--previous a,
.blog-grid-wrapper .pager__item--next a,
.blog-grid .pager__item--previous a,
.blog-grid .pager__item--next a {
  font-weight: 500;
}

.blog-grid-wrapper .pager__item--first,
.blog-grid-wrapper .pager__item--last,
.blog-grid .pager__item--first,
.blog-grid .pager__item--last {
  display: none;
}

/* Blog Grid No Results */
.blog-grid__no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--kh-gray-text);
  font-size: 16px;
}

.blog-card {
  background-color: var(--kh-white);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
  overflow: hidden;
  transition: var(--kh-transition);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kh-shadow-lg);
}

/* Admin Edit Button - Only visible to users with edit permission */
.blog-card__admin-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.blog-card__admin-actions a,
.blog-card__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background-color: var(--kh-primary-orange);
  color: var(--kh-white) !important;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--kh-radius-sm);
  text-decoration: none;
  box-shadow: var(--kh-shadow-md);
  transition: var(--kh-transition);
}

.blog-card__admin-actions a:hover,
.blog-card__edit:hover {
  background-color: #c55828;
  transform: scale(1.05);
}

.blog-card__image {
  height: 180px;
  background-color: var(--kh-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kh-gray-text);
  font-size: 14px;
  overflow: hidden;
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card__meta {
  font-size: 12px;
  color: var(--kh-gray-text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-card__meta-category {
  font-weight: 600;
}

.blog-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--kh-dark-text);
  margin-bottom: 12px;
  line-height: 1.4;
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--kh-primary-orange);
}

.blog-card__desc {
  font-size: 14px;
  color: var(--kh-gray-text);
  margin-bottom: 16px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

/* CKEditor content - ensure inline styles have highest priority */
.blog-card__desc [style] {
  all: revert !important;
}

.blog-card__desc [style] * {
  all: revert !important;
}

/* Ensure CKEditor content can override parent text-align */
.blog-card__desc p,
.blog-card__desc div,
.blog-card__desc h1,
.blog-card__desc h2,
.blog-card__desc h3,
.blog-card__desc h4,
.blog-card__desc h5,
.blog-card__desc h6,
.blog-card__desc ul,
.blog-card__desc ol,
.blog-card__desc li,
.blog-card__desc blockquote {
  text-align: inherit;
}

/* CKEditor alignment classes - highest priority */
.blog-card__desc .text-align-left,
.blog-card__desc [style*="text-align: left"],
.blog-card__desc [style*="text-align:left"] {
  text-align: left !important;
}

.blog-card__desc .text-align-center,
.blog-card__desc [style*="text-align: center"],
.blog-card__desc [style*="text-align:center"] {
  text-align: center !important;
}

.blog-card__desc .text-align-right,
.blog-card__desc [style*="text-align: right"],
.blog-card__desc [style*="text-align:right"] {
  text-align: right !important;
}

.blog-card__desc .text-align-justify,
.blog-card__desc [style*="text-align: justify"],
.blog-card__desc [style*="text-align:justify"] {
  text-align: justify !important;
}

/* Preserve specific CKEditor formatting elements */
.blog-card__desc strong,
.blog-card__desc b,
.blog-card__desc em,
.blog-card__desc i,
.blog-card__desc u,
.blog-card__desc s,
.blog-card__desc sub,
.blog-card__desc sup {
  all: revert !important;
}

/* ============================================
   Blog Grid Description - CKEditor Priority Styles
   ============================================ */

/* CKEditor content in blog grid description - ensure inline styles have highest priority */
.blog-grid__description [style] {
  all: revert !important;
}

.blog-grid__description [style] * {
  all: revert !important;
}

/* CKEditor alignment classes - highest priority for blog grid description */
.blog-grid__description .text-align-left,
.blog-grid__description [style*="text-align: left"],
.blog-grid__description [style*="text-align:left"] {
  text-align: left !important;
}

.blog-grid__description .text-align-center,
.blog-grid__description [style*="text-align: center"],
.blog-grid__description [style*="text-align:center"] {
  text-align: center !important;
}

.blog-grid__description .text-align-right,
.blog-grid__description [style*="text-align: right"],
.blog-grid__description [style*="text-align:right"] {
  text-align: right !important;
}

.blog-grid__description .text-align-justify,
.blog-grid__description [style*="text-align: justify"],
.blog-grid__description [style*="text-align:justify"] {
  text-align: justify !important;
}

/* Preserve specific CKEditor formatting elements in blog grid description */
.blog-grid__description strong,
.blog-grid__description b,
.blog-grid__description em,
.blog-grid__description i,
.blog-grid__description u,
.blog-grid__description s,
.blog-grid__description sub,
.blog-grid__description sup {
  all: revert !important;
}

/* Read More link - always at bottom */
.blog-card__content .views-field-view-node,
.blog-card__content>a:last-child,
.blog-card__content .blog-card__link {
  margin-top: auto;
}

.blog-card__link {
  font-size: 14px;
  color: var(--kh-dark-text);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.blog-card__link:hover {
  color: var(--kh-primary-orange);
}

/* Blog Pagination */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 24px 48px;
}

.blog-pagination .page-btn,
.blog-pagination .pager__item a,
.blog-pagination .pager__item span {
  padding: 10px 16px;
  border: 1px solid var(--kh-border);
  border-radius: 8px;
  background: var(--kh-white);
  cursor: pointer;
  font-size: 14px;
  color: var(--kh-gray-text);
  text-decoration: none;
}

.blog-pagination .page-btn.active,
.blog-pagination .pager__item.is-active span {
  background-color: var(--kh-dark-text);
  color: var(--kh-white);
  border-color: var(--kh-dark-text);
}

/* Views integration */
.view-blog-posts {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.view-blog-posts .views-row {
  margin-bottom: 0;
  display: flex;
  height: 100%;
}

.view-blog-posts .view-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  .view-blog-posts .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .view-blog-posts .view-content {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   Blog Article Detail Page
   =========================================== */
.blog-article {
  background-color: var(--kh-white);
}

.blog-article__hero {
  background-color: var(--kh-light-bg);
  padding: 40px 24px 48px;
}

.blog-article__hero-container {
  max-width: 800px;
  margin: 0 auto;
}

/* Breadcrumb */
.blog-article__breadcrumb {
  margin-bottom: 24px;
}

.blog-article__breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.blog-article__breadcrumb-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--kh-gray-text);
}

.blog-article__breadcrumb-list li:not(:last-child)::after {
  content: '/';
  color: var(--kh-gray-text);
}

.blog-article__breadcrumb-list a {
  color: var(--kh-gray-text);
  text-decoration: none;
  transition: color var(--kh-transition);
}

.blog-article__breadcrumb-list a:hover {
  color: var(--kh-primary-orange);
}

.blog-article__breadcrumb-list li[aria-current="page"] {
  color: var(--kh-dark-text);
  font-weight: 500;
}

/* Tags */
.blog-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.blog-article__tag {
  display: inline-block;
  padding: 6px 14px;
  background-color: var(--kh-primary-orange);
  color: var(--kh-white);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--kh-radius-2xl);
  text-decoration: none;
  transition: background-color var(--kh-transition);
}

.blog-article__tag:hover {
  background-color: #c55828;
  color: var(--kh-white);
}

/* Title */
.blog-article__title {
  font-size: 36px;
  font-weight: 700;
  color: var(--kh-dark-text);
  line-height: 1.2;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .blog-article__title {
    font-size: 28px;
  }
}

/* Meta */
.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: var(--kh-gray-text);
}

.blog-article__meta>span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-article__meta svg {
  color: var(--kh-gray-text);
}

/* Featured Image */
.blog-article__image-wrapper {
  max-width: 900px;
  margin: -24px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.blog-article__image {
  border-radius: var(--kh-radius-xl);
  overflow: hidden;
  box-shadow: var(--kh-shadow-lg);
}

.blog-article__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Content */
.blog-article__content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.blog-article__content {
  font-size: 17px;
  line-height: 1.8;
  color: var(--kh-dark-text);
}

.blog-article__content h1,
.blog-article__content h2,
.blog-article__content h3,
.blog-article__content h4 {
  color: var(--kh-dark-text);
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 16px;
}

.blog-article__content h2 {
  font-size: 28px;
}

.blog-article__content h3 {
  font-size: 22px;
}

.blog-article__content p {
  margin-bottom: 20px;
}

.blog-article__content ul,
.blog-article__content ol {
  margin-bottom: 20px;
  padding-left: 24px;
}

.blog-article__content li {
  margin-bottom: 8px;
}

.blog-article__content a {
  color: var(--kh-primary-orange);
  text-decoration: underline;
}

.blog-article__content a:hover {
  color: #c55828;
}

.blog-article__content blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  background-color: var(--kh-light-bg);
  border-left: 4px solid var(--kh-primary-orange);
  border-radius: 0 var(--kh-radius-md) var(--kh-radius-md) 0;
  font-style: italic;
  color: var(--kh-gray-text);
}

.blog-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--kh-radius-md);
  margin: 24px 0;
}

/* Share Section */
.blog-article__share {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--kh-border);
}

.blog-article__share-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--kh-dark-text);
}

.blog-article__share-buttons {
  display: flex;
  gap: 12px;
}

.blog-article__share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--kh-radius-md);
  color: var(--kh-white);
  transition: transform var(--kh-transition), opacity var(--kh-transition);
}

.blog-article__share-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.blog-article__share-btn--twitter {
  background-color: #000;
}

.blog-article__share-btn--facebook {
  background-color: #1877f2;
}

.blog-article__share-btn--linkedin {
  background-color: #0a66c2;
}

/* Author Box */
.blog-article__author-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 24px;
  background-color: var(--kh-light-bg);
  border-radius: var(--kh-radius-lg);
}

.blog-article__author-avatar {
  width: 64px;
  height: 64px;
  background-color: var(--kh-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kh-gray-text);
}

.blog-article__author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blog-article__author-label {
  font-size: 12px;
  color: var(--kh-gray-text);
  text-transform: uppercase;
}

.blog-article__author-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--kh-dark-text);
}

/* Related Articles Section */
.blog-article__related {
  background-color: var(--kh-light-bg);
  padding: 64px 24px;
}

.blog-article__related .view-related-articles {
  max-width: 1100px;
  margin: 0 auto;
}

.blog-article__related .view-header h2,
.related-articles__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--kh-dark-text);
  text-align: center;
  margin-bottom: 32px;
}

.blog-article__related .view-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  .blog-article__related .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .blog-article__related .view-content {
    grid-template-columns: 1fr;
  }
}

/* Hide unwanted elements on article pages */
.node--type-article.node--view-mode-full .node__submitted,
.node--type-article.node--view-mode-full .field--name-field-tags,
.node--type-article.node--view-mode-full .links,
.node--type-article.node--view-mode-full .comment-wrapper,
.node--type-article.node--view-mode-full #comments {
  display: none;
}

/* Related Articles Grid */
.blog-article__related-container {
  max-width: 1100px;
  margin: 0 auto;
}

.related-articles__grid {
  display: grid;
  gap: 24px;
}

.related-articles__card {
  background-color: var(--kh-white);
  border-radius: var(--kh-radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--kh-transition), box-shadow var(--kh-transition);
  display: flex;
  flex-direction: column;
}

.related-articles__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kh-shadow-lg);
}

.related-articles__image {
  height: 180px;
  background-color: var(--kh-border);
  overflow: hidden;
}

.related-articles__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kh-transition);
}

.related-articles__card:hover .related-articles__image img {
  transform: scale(1.05);
}

.related-articles__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kh-gray-text);
}

.related-articles__content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.related-articles__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--kh-primary-orange);
  margin-bottom: 8px;
}

.related-articles__card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--kh-dark-text);
  margin-bottom: 8px;
  line-height: 1.3;
  transition: color var(--kh-transition);
}

.related-articles__card:hover .related-articles__card-title {
  color: var(--kh-primary-orange);
}

.related-articles__description {
  font-size: 14px;
  color: var(--kh-gray-text);
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 1;
}

.related-articles__date {
  font-size: 12px;
  color: var(--kh-gray-text);
}

/* View More Button */
.related-articles__view-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.related-articles__view-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background-color: var(--kh-primary-orange);
  color: var(--kh-white);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--kh-radius-md);
  transition: background-color var(--kh-transition), transform var(--kh-transition), box-shadow var(--kh-transition);
}

.related-articles__view-more-btn:hover {
  background-color: #c55828;
  transform: translateY(-2px);
  box-shadow: var(--kh-shadow-md);
  color: var(--kh-white);
}

.related-articles__view-more-btn svg {
  transition: transform var(--kh-transition);
}

.related-articles__view-more-btn:hover svg {
  transform: translateX(4px);
}

/* ===========================================
   Contact Form Styles
   =========================================== */
.contact-form-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.contact-form-section h2,
.contact-message-form h2,
.webform-submission-form h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--kh-dark-text);
  margin-bottom: 24px;
}

/* Form container - Card style */
.contact-message-form,
.webform-submission-form,
.contact-form {
  max-width: 800px;
  margin: 0 auto 48px;
  padding: 32px;
  background-color: var(--kh-white);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
}

/* Page wrapper for contact */
.path-contact .region-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* Form items */
.contact-message-form .form-item,
.webform-submission-form .form-item,
.contact-form .form-item {
  margin-bottom: 24px;
}

/* Two-column row for name and email */
.contact-message-form .js-form-type-textfield:first-of-type,
.contact-message-form .form-item-name,
.contact-message-form .form-item-mail,
.webform-submission-form .form-item-mail {
  display: inline-block;
  width: calc(50% - 12px);
  vertical-align: top;
}

.contact-message-form .form-item-name{
  margin-right: 24px;
}

@media (max-width: 600px) {

  .contact-message-form .form-item-name,
  .contact-message-form .form-item-mail,
  .webform-submission-form .form-item-name,
  .webform-submission-form .form-item-mail {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}

/* Labels */
.contact-message-form label,
.webform-submission-form label,
.contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--kh-dark-text);
  margin-bottom: 8px;
}

/* Required marker - small asterisk */
.contact-message-form .form-required::after,
.webform-submission-form .form-required::after,
.contact-form .form-required::after {
  content: ' *';
  color: #ef4444;
  font-size: 14px;
}

/* Fix any red labels */
.contact-message-form .form-required,
.webform-submission-form .form-required,
.contact-form .form-required,
.contact-message-form label.form-required,
.webform-submission-form label.form-required,
.contact-form label.form-required {
  color: var(--kh-dark-text) !important;
}

/* Text inputs */
.contact-message-form input[type="text"],
.contact-message-form input[type="email"],
.contact-message-form input[type="tel"],
.contact-message-form input[type="url"],
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="url"],
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border: 2px solid var(--kh-border);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-white);
  color: var(--kh-dark-text);
  transition: border-color var(--kh-transition), box-shadow var(--kh-transition);
}

.contact-message-form input[type="text"]:focus,
.contact-message-form input[type="email"]:focus,
.contact-message-form input[type="tel"]:focus,
.contact-message-form input[type="url"]:focus,
.webform-submission-form input[type="text"]:focus,
.webform-submission-form input[type="email"]:focus,
.webform-submission-form input[type="tel"]:focus,
.webform-submission-form input[type="url"]:focus,
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form input[type="url"]:focus {
  outline: none;
  border-color: var(--kh-primary-orange);
  box-shadow: 0 0 0 3px rgba(218, 102, 48, 0.1);
}

/* Select dropdown */
.contact-message-form select,
.webform-submission-form select,
.contact-form select {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border: 2px solid var(--kh-border);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-white);
  color: var(--kh-dark-text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 44px;
  transition: border-color var(--kh-transition), box-shadow var(--kh-transition);
}

.contact-message-form select:focus,
.webform-submission-form select:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--kh-primary-orange);
  box-shadow: 0 0 0 3px rgba(218, 102, 48, 0.1);
}

/* Textarea */
.contact-message-form textarea,
.webform-submission-form textarea,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border: 2px solid var(--kh-border);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-white);
  color: var(--kh-dark-text);
  min-height: 150px;
  resize: vertical;
  font-family: inherit;
  transition: border-color var(--kh-transition), box-shadow var(--kh-transition);
}

.contact-message-form textarea:focus,
.webform-submission-form textarea:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--kh-primary-orange);
  box-shadow: 0 0 0 3px rgba(218, 102, 48, 0.1);
}

/* Placeholder text */
.contact-message-form input::placeholder,
.contact-message-form textarea::placeholder,
.webform-submission-form input::placeholder,
.webform-submission-form textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--kh-gray-text);
}

/* Submit button - Full width, dark style */
.contact-message-form .form-actions,
.webform-submission-form .form-actions,
.contact-form .form-actions {
  margin-top: 32px;
}

.contact-message-form input[type="submit"],
.contact-message-form button[type="submit"],
.webform-submission-form input[type="submit"],
.webform-submission-form button[type="submit"],
.contact-form input[type="submit"],
.contact-form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  color: var(--kh-white);
  background-color: var(--kh-dark-text);
  border: none;
  border-radius: var(--kh-radius-md);
  cursor: pointer;
  transition: background-color var(--kh-transition), transform var(--kh-transition), box-shadow var(--kh-transition);
}

.contact-message-form input[type="submit"]:hover,
.contact-message-form button[type="submit"]:hover,
.webform-submission-form input[type="submit"]:hover,
.webform-submission-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
  background-color: #2d2d4a;
  transform: translateY(-2px);
  box-shadow: var(--kh-shadow-md);
}

/* File upload styling - Drag & drop style */
.contact-message-form .form-type-managed-file,
.webform-submission-form .form-type-managed-file,
.contact-form .form-type-managed-file,
.contact-message-form .form-item-field-attachment-0,
.webform-submission-form .webform-element-type-managed-file {
  margin-top: 24px;
}

.contact-message-form .form-managed-file,
.webform-submission-form .form-managed-file {
  border: 2px dashed var(--kh-border);
  border-radius: var(--kh-radius-md);
  padding: 32px 24px;
  text-align: center;
  background-color: var(--kh-light-bg);
  transition: border-color var(--kh-transition), background-color var(--kh-transition);
}

.contact-message-form .form-managed-file:hover,
.webform-submission-form .form-managed-file:hover {
  border-color: var(--kh-gray-text);
  background-color: #f3f4f6;
}

.contact-message-form .form-managed-file input[type="file"],
.webform-submission-form .form-managed-file input[type="file"] {
  margin-bottom: 12px;
}

/* Upload button styling */
.contact-message-form .form-managed-file .button,
.contact-message-form .form-managed-file input[type="submit"],
.webform-submission-form .form-managed-file .button,
.webform-submission-form .form-managed-file input[type="submit"] {
  background-color: var(--kh-primary-orange) !important;
  width: auto !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
}

/* File description text */
.contact-message-form .description,
.webform-submission-form .description {
  font-size: 12px;
  color: var(--kh-gray-text);
  margin-top: 8px;
}

/* Description/help text */
.contact-message-form .description,
.webform-submission-form .description,
.contact-form .description {
  font-size: 13px;
  color: var(--kh-gray-text);
  margin-top: 6px;
}

/* Error messages */
.contact-message-form .form-item--error input,
.contact-message-form .form-item--error select,
.contact-message-form .form-item--error textarea,
.webform-submission-form .form-item--error input,
.webform-submission-form .form-item--error select,
.webform-submission-form .form-item--error textarea {
  border-color: #ef4444;
}

.contact-message-form .form-item--error-message,
.webform-submission-form .form-item--error-message {
  color: #ef4444;
  font-size: 13px;
  margin-top: 6px;
}

/* Form title styling */
.path-contact h1.page-title,
.path-contact .block-page-title-block h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--kh-dark-text);
  text-align: center;
  margin-bottom: 16px;
}

/* Two column layout for name fields if needed */
.contact-message-form .form-item-name,
.webform-submission-form .webform-flexbox {
  display: flex;
  gap: 16px;
}

.contact-message-form .form-item-name>.form-item,
.webform-submission-form .webform-flexbox>.webform-flex {
  flex: 1;
}

/* Checkboxes and radios */
.contact-message-form input[type="checkbox"],
.contact-message-form input[type="radio"],
.webform-submission-form input[type="checkbox"],
.webform-submission-form input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  accent-color: var(--kh-primary-orange);
}

/* Privacy/terms checkbox */
.contact-message-form .form-item-privacy,
.webform-submission-form .form-item-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.contact-message-form .form-item-privacy label,
.webform-submission-form .form-item-privacy label {
  font-weight: 400;
  font-size: 14px;
  color: var(--kh-gray-text);
}

/* FAQ Link section below form */
.contact-faq-link,
.path-contact .contact-faq-cta {
  text-align: center;
  padding: 32px 24px 48px;
}

.contact-faq-link p,
.path-contact .contact-faq-cta p {
  color: var(--kh-gray-text);
  font-size: 15px;
  margin-bottom: 8px;
}

.contact-faq-link a,
.path-contact .contact-faq-cta a {
  color: var(--kh-dark-text);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.contact-faq-link a:hover,
.path-contact .contact-faq-cta a:hover {
  color: var(--kh-primary-orange);
}

/* Fix for Drupal's default label color */
.path-contact label,
.path-contact .form-required {
  color: var(--kh-dark-text) !important;
}

/* Override any system red color on labels */
.path-contact .form-item label {
  color: var(--kh-dark-text) !important;
}

/* Ensure the form card is inside content properly */
.path-contact .block-system-main-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hide page title if using contact hero block */
.path-contact .block-page-title-block {
  display: none;
}

/* Form title "Send us a Message" */
.path-contact .webform-submission-form::before,
.contact-message-form::before {
  content: 'Send us a Message';
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--kh-dark-text);
  margin-bottom: 24px;
}

/* Hide default webform title if it shows elsewhere */
.path-contact .webform-submission-form>h2:first-child {
  display: none;
}

/* Also style any block title for webform */
.path-contact .block-webform .block-title,
.path-contact .webform-block .block__title {
  display: none;
}

/* ===========================================
   Contact Page - FAQ CTA Link
   =========================================== */
.contact-faq-cta {
  text-align: center;
  padding: 40px 24px 64px;
  max-width: 900px;
  margin: 0 auto;
}

.contact-faq-cta p {
  color: var(--kh-gray-text);
  font-size: 15px;
  margin-bottom: 8px;
}

.contact-faq-cta a {
  color: var(--kh-dark-text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--kh-transition);
}

.contact-faq-cta a:hover {
  color: var(--kh-primary-orange);
}

.contact-faq-cta a span {
  transition: transform var(--kh-transition);
}

.contact-faq-cta a:hover span {
  transform: translateX(4px);
}

/* ===========================================
   Contact Page - Responsive Styles
   =========================================== */

/* --- iPad / Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
  .contact-hero {
    padding: 36px 16px;
  }

  .contact-hero__title {
    font-size: 32px;
  }

  .path-contact .region-content,
  .path-contact .block-system-main-block {
    padding: 0 16px;
  }

  .contact-message-form,
  .webform-submission-form,
  .contact-form {
    padding: 24px;
  }

  .contact-options {
    padding: 0 16px 32px;
  }

  .contact-options__card {
    padding: 24px 20px;
  }

  .webform-submission-contact-support-form {
    border: 0 !important;
  }

  .webform-submission-contact-support-form [id^=edit-actions] {
    max-width: 50% !important;
    margin: auto;
  }
}

/* --- Mobile (max-width: 767px) --- */
@media (max-width: 767px) {
  .contact-hero {
    padding: 24px 12px;
  }

  .contact-hero__title {
    font-size: 26px;
    margin-bottom: 8px;
  }

  .contact-hero__subtitle {
    font-size: 14px;
  }

  .path-contact .region-content,
  .path-contact .block-system-main-block {
    padding: 0 0;
  }

  .contact-message-form,
  .webform-submission-form,
  .contact-form {
    padding: 20px 16px;
    border-radius: 0;
    border: none;
  }

  .path-contact .webform-submission-form::before,
  .contact-message-form::before {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .webform-submission-form .form-item,
  .contact-form .form-item {
    margin-bottom: 18px;
  }

  .webform-submission-form input[type="text"],
  .webform-submission-form input[type="email"],
  .webform-submission-form input[type="tel"],
  .webform-submission-form input[type="url"],
  .webform-submission-form select,
  .webform-submission-form textarea {
    padding: 12px 14px;
    font-size: 14px;
  }

  .webform-submission-form textarea {
    min-height: 120px;
  }

  .webform-submission-form .form-actions {
    margin-top: 24px;
  }

  .webform-submission-form input[type="submit"],
  .webform-submission-form button[type="submit"] {
    padding: 14px 24px;
    font-size: 15px;
  }

  .contact-message-form .form-managed-file,
  .webform-submission-form .form-managed-file {
    padding: 20px 16px;
  }

  .contact-options {
    padding: 0 12px 24px;
  }

  .contact-options__card {
    padding: 24px 16px;
  }

  .contact-faq-cta {
    padding: 24px 16px 40px;
  }
}

/* --- Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
  .contact-hero {
    padding: 20px 8px;
  }

  .contact-hero__title {
    font-size: 22px;
  }

  .contact-hero__subtitle {
    font-size: 13px;
  }

  .contact-message-form,
  .webform-submission-form,
  .contact-form {
    padding: 16px 12px;
  }

  .path-contact .webform-submission-form::before,
  .contact-message-form::before {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .webform-submission-form label,
  .contact-form label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .webform-submission-form input[type="text"],
  .webform-submission-form input[type="email"],
  .webform-submission-form input[type="tel"],
  .webform-submission-form input[type="url"],
  .webform-submission-form select,
  .webform-submission-form textarea {
    padding: 10px 12px;
    font-size: 14px;
  }

  .contact-message-form .form-managed-file,
  .webform-submission-form .form-managed-file {
    padding: 16px 12px;
  }

  .webform-submission-form .form-managed-file .button,
  .webform-submission-form .form-managed-file input[type="submit"] {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
}

.webform-submission-contact-support-form .form-actions {
  border-top: 0 !important;
}

/* ===========================================
   FAQ Page - Contact CTA Block
   =========================================== */
.faq-contact-cta {
  background-color: var(--kh-light-bg);
  border-radius: var(--kh-radius-lg);
  text-align: center;
}

.faq-contact-cta__content h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--kh-dark-text);
  margin-bottom: 12px;
}

.faq-contact-cta__content p {
  font-size: 16px;
  color: var(--kh-gray-text);
  margin-bottom: 24px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.faq-contact-cta__btn {
  display: inline-block;
  padding: 14px 32px;
  background-color: var(--kh-white);
  color: var(--kh-dark-text);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-md);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--kh-transition), border-color var(--kh-transition), transform var(--kh-transition);
}

.faq-contact-cta__btn:hover {
  background-color: var(--kh-light-bg);
  border-color: var(--kh-dark-text);
  transform: translateY(-2px);
}