/**
 * Kent Cleaning Solutions: the MLT modules (Menu, Page Hero, Blog, FAQ,
 * Portfolio, Testimonials) read these shared variables, so they all pick
 * up the KCS brand without their own colour settings.
 */

:root {
  --mt-color-primary: var(--kcs-accent);
  --mt-color-primary-dark: var(--kcs-accent-strong);
  --mt-color-primary-contrast: #fff;
  --mt-color-dark: var(--kcs-ink);
  --mt-color-dark-colored: var(--kcs-ink);
  --mt-color-dark-contrast: #fff;
  --mt-color-dark-contrast-value: 255, 255, 255;
  --mt-color-default-light: var(--kcs-surface);
  --mt-color-default-contrast: var(--kcs-text);
  --mt-surface: #fff;
  --mt-radius: var(--kcs-radius);
  --mt-radius-sm: var(--kcs-radius-sm);
  --mt-hff: var(--kcs-font);
  --mt-pff: var(--kcs-font);

  --mlt-text: var(--kcs-ink);
  --mlt-link: var(--kcs-primary);
  --mlt-line: var(--kcs-line);
  --mlt-surface: #fff;
  --mlt-ink: var(--kcs-ink);
  --mlt-max: var(--kcs-container);
  --mlt-gutter: var(--kcs-gutter);
  --mlt-radius-pill: 999px;
}

/* Menu: hover tint and the quote button. */
.mlt-menu {
  --mlt-menu-link-hover-bg: var(--kcs-primary-soft);
  --mlt-menu-sub-link-hover-bg: var(--kcs-primary-soft);
  --mlt-menu-radius: 8px;
}

.mlt-menu__item--cta .mlt-menu__link {
  border-radius: 999px !important;
  padding-inline: 1.3em !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--kcs-accent) 35%, transparent);
}

/* Page Hero: edge to edge in place of the title banner. */
.hero-top--mlt .region {
  margin: 0;
  padding: 0;
}

.hero-top .mlt-hero {
  background-color: var(--kcs-ink);
}

.hero-top .mlt-hero__title {
  color: #fff;
  letter-spacing: -0.03em;
}

.hero-top .mlt-hero__actions a.mt-button {
  border-radius: 999px !important;
  background: var(--kcs-accent) !important;
  border-color: var(--kcs-accent) !important;
}

.hero-top .mlt-hero a.mlt-hero__contact {
  border-color: rgb(255 255 255 / 60%) !important;
  background: transparent !important;
}

/* The pasted contact button carries a Font Awesome icon we do not load. */
.mlt-hero__actions .fa {
  display: none;
}

/* Blog and portfolio item pages sit in the page width with section spacing. */
.mltb-post {
  padding: var(--kcs-section) var(--kcs-gutter);
  box-sizing: content-box;
}

.mltp-item {
  max-width: var(--kcs-container);
  margin-inline: auto;
  padding: var(--kcs-section) var(--kcs-gutter);
}

.mltb-post__body,
.mltb-post .field--name-field-mlt-blog-body {
  font-size: 1.075rem;
}

.mltb-card,
.mltp-card {
  border-radius: var(--kcs-radius);
  transition: transform 0.2s, box-shadow 0.2s;
}

.mltb-card:hover,
.mltp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kcs-shadow-lg);
}

.mltb-btn,
.mltp-btn {
  border-radius: 999px !important;
}

/* FAQ accordion: light cards to match the rest of the site. */
.mlt-faq {
  --mlt-faq-bg: #fff;
  --mlt-faq-text: var(--kcs-ink);
  --mlt-faq-text-rgb: 16, 40, 60;
  max-width: 860px;
}

.mlt-faq__item[open] {
  box-shadow: inset 4px 0 0 var(--mlt-faq-accent), var(--kcs-shadow);
}

.mlt-faq__answer {
  color: var(--kcs-muted);
}

/* Areas and services index pages: link grid. */
.view-areas-we-cover .view-content,
.view-cleaning-services .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.6rem;
}

.view-areas-we-cover .views-row a,
.view-cleaning-services .views-row a {
  display: block;
  padding: 0.8em 1em;
  font-weight: 650;
  color: var(--kcs-ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--kcs-line);
  border-radius: var(--kcs-radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.view-areas-we-cover .views-row a:hover,
.view-cleaning-services .views-row a:hover {
  border-color: var(--kcs-accent);
  box-shadow: var(--kcs-shadow);
}