/*
 * CCS Communications - WordPress-specific additions on top of the Webflow export CSS.
 * (1) Class-based replacements for Webflow's per-node #w-node-... grid rules, so repeater items
 *     and menu-driven markup keep the original layout without the generated ids.
 * (2) Contact Form 7 styling so CF7 output matches the Webflow form.
 * (3) Fallback behaviours (accordion items past the IX2-bound set, interaction-engine failsafes).
 * (4) WordPress content niceties (rich text, pagination, uploaded logo sizing).
 */

/* ---------- (1) node-id grid rules -> classes ---------- */
.layout7_content-left { align-self: stretch; }
.layout7_item { align-self: start; }

.layout611_row .card-wrap { grid-area: span 2 / span 1 / span 2 / span 1; }
.layout611_row .layout611_item { grid-area: span 1 / span 1 / span 1 / span 1; }

.footer3_menu-wrapper { align-self: stretch; }
.footer3_menu-wrapper > .footer-partner-logo { grid-area: span 1 / span 1 / span 1 / span 1; align-self: end; }
.footer-extra-links > .footer-partner-logo { align-self: end; }

.logo3_wrapper { justify-self: stretch; }

.contact5_item { place-self: start; }
.contact5_form .w-button,
.ccs-form-block .wpcf7-form .wpcf7-submit { justify-self: start; }

/* WordPress adds width/height attributes to images; keep the aspect ratio when CSS shrinks them.
   Zero specificity so every Webflow class rule still wins. */
:where(img[width][height]) { height: auto; }

/* ---------- uploaded logo in the navbar embed ---------- */
.navbar16_logo-link .code-embed img.navbar16_logo { height: 40px; width: auto; display: block; }
.navbar16_social-link img,
.faq2_icon-wrapper img,
.contact5_icon-wrapper img,
.icon-embed-xsmall.btn img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- (2) Contact Form 7 -> Webflow form look ---------- */
.ccs-form-block .wpcf7 { width: 100%; }
.ccs-form-block .wpcf7-form {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.ccs-form-block .wpcf7-form > p,
.ccs-form-block .wpcf7-form .form_field-wrapper > p { margin: 0; }
.ccs-form-block .wpcf7-form .form_field-wrapper br { display: none; }
.ccs-form-block .wpcf7-form-control-wrap { display: block; width: 100%; }
.ccs-form-block .wpcf7-form .form_input,
.ccs-form-block .wpcf7-form .wpcf7-text,
.ccs-form-block .wpcf7-form .wpcf7-textarea {
  border: 1px solid var(--base-color-neutral--black);
  background-color: var(--base-color-neutral--white);
  width: 100%;
  height: auto;
  min-height: 2.75rem;
  color: var(--base-color-neutral--black);
  border-radius: 0;
  margin-bottom: 0;
  padding: .5rem .75rem;
  font-size: 1rem;
  line-height: 1.6;
  display: block;
}
.ccs-form-block .wpcf7-form .wpcf7-textarea { height: 11.25rem; min-height: 11.25rem; padding-top: .75rem; padding-bottom: .75rem; }
.ccs-form-block .wpcf7-form .form_field-label { display: block; margin-bottom: .5rem; font-weight: 400; }
.ccs-form-block .wpcf7-form .wpcf7-not-valid-tip { color: #e23939; margin-top: .25rem; font-size: .875rem; }
.ccs-form-block .wpcf7-form .wpcf7-spinner { margin-left: .5rem; }
.ccs-form-block .wpcf7-form .wpcf7-response-output {
  margin: 0;
  padding: 1rem;
  border: 0;
  text-align: center;
  font-weight: 600;
}
.ccs-form-block .wpcf7-form.sent .wpcf7-response-output {
  background-color: var(--background-color--background-success);
  color: var(--text-color--text-success);
  padding: 2.5rem;
}
.ccs-form-block .wpcf7-form.invalid .wpcf7-response-output,
.ccs-form-block .wpcf7-form.failed .wpcf7-response-output,
.ccs-form-block .wpcf7-form.aborted .wpcf7-response-output,
.ccs-form-block .wpcf7-form.spam .wpcf7-response-output,
.ccs-form-block .wpcf7-form.unaccepted .wpcf7-response-output {
  background-color: var(--background-color--background-error);
  color: #e23939;
}
.ccs-form-block .w-form-done,
.ccs-form-block .w-form-fail { padding: 0; background: none; margin-top: 1rem; }

/* ---------- (3) fallbacks ---------- */
.ccs-accordion-fallback .faq2_answer { overflow: hidden; transition: height .4s ease; }
.ccs-accordion-fallback .faq2_icon-wrapper { transition: transform .4s ease; }
.ccs-accordion-fallback.is-open .faq2_icon-wrapper { transform: rotate(180deg); }
.faq2_question { cursor: pointer; }

/* Only applied by theme.js when webflow.js never booted its interaction engines. */
html.ccs-ix-failed [data-w-id],
html.ccs-ix-failed .stats2_number,
html.ccs-ix-failed .stats2_item .heading-style-h6 { opacity: 1 !important; transform: none !important; }

/* ---------- (4) WordPress content ---------- */
.text_col-2.w-richtext p { margin-bottom: 1rem; }
.text_col-2.w-richtext p:last-child { margin-bottom: 0; }
.faq9_item .w-richtext p:last-child { margin-bottom: 0; }

.ccs-pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.ccs-pagination .page-numbers {
  border: 1px solid var(--base-color-brand--black);
  color: var(--base-color-brand--black);
  background-color: #0000;
  padding: .5rem 1rem;
  text-decoration: none;
  line-height: 1.5;
}
.ccs-pagination .page-numbers.current {
  background-color: var(--base-color-brand--red);
  border-color: var(--base-color-brand--red);
}
.ccs-pagination .page-numbers.dots { border: 0; }

.ccs-copy-link.is-copied { opacity: .5; }

/* ---------- (5) Service + Service Area landing pages ----------
   Built only from the Webflow design tokens already in use (1px black borders, red accent,
   square corners, the layout7 / layout399 / layout611 / faq9 / testimonial18 components). */

/* Breadcrumbs above the hero heading */
.ccs-breadcrumbs { margin-bottom: 1.5rem; flex-wrap: wrap; }
.ccs-breadcrumbs .breadcrumb-link { opacity: .75; }
.ccs-breadcrumbs .breadcrumb-link:hover { opacity: 1; }
.ccs-breadcrumbs .breadcrumb-link.w--current { opacity: 1; }
.ccs-breadcrumbs .breadcrumb-divider { opacity: .5; }

/* Overview: rich text column */
.ccs-overview .layout7_content { align-items: start; }
.ccs-overview .ccs-overview--no-image { grid-template-columns: 1fr; }
.ccs-overview .ccs-overview--no-image .layout7_content-left { max-width: 48rem; }
.ccs-overview-text h3 { font-size: 1.5rem; line-height: 1.4; margin-top: 2rem; margin-bottom: .75rem; }
.ccs-overview-text h4 { font-size: 1.25rem; line-height: 1.4; margin-top: 1.5rem; margin-bottom: .5rem; }
.ccs-overview-text p { margin-bottom: 1rem; }
.ccs-overview-text ul { margin-top: 0; margin-bottom: 1rem; }
.ccs-overview .layout7_image-wrapper { position: sticky; top: 7rem; }
@media screen and (max-width: 991px) { .ccs-overview .layout7_image-wrapper { position: static; } }

/* Checklist ("What is included") */
.ccs-check-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.ccs-check-item { display: flex; align-items: flex-start; gap: .75rem; margin: 0; padding: 0 0 1rem; border-bottom: 1px solid var(--border-color--border-primary); }
.ccs-check-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--base-color-brand--red); margin-top: .15rem; }
.ccs-check-icon svg { width: 100%; height: 100%; display: block; }
@media screen and (max-width: 767px) { .ccs-check-list { grid-template-columns: 1fr; } }

/* USP cards: 3-up grid of the home page value cards */
.ccs-usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ccs-usp-grid.ccs-usp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ccs-usp-grid .ccs-usp-item { display: flex; }
.ccs-usp-grid .ccs-usp-card { width: 100%; min-height: 14rem; padding: 2rem; justify-content: flex-start; gap: 0; }
.ccs-usp-grid .ccs-usp-card.bg-red { color: var(--base-color-brand--black); }
@media screen and (max-width: 991px) { .ccs-usp-grid { grid-template-columns: repeat(2, 1fr); } .ccs-usp-grid .ccs-usp-card { min-height: 0; } }
@media screen and (max-width: 767px) { .ccs-usp-grid { grid-template-columns: 1fr; } .ccs-usp-grid .ccs-usp-card { padding: 1.5rem; } }

/* Service / area image cards (layout399 made clickable) */
.ccs-cards-row.ccs-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ccs-cards-row.ccs-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ccs-cards-row.ccs-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media screen and (max-width: 991px) { .ccs-cards-row.ccs-cols-3, .ccs-cards-row.ccs-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) { .ccs-cards-row.ccs-cols-2, .ccs-cards-row.ccs-cols-3, .ccs-cards-row.ccs-cols-4 { grid-template-columns: 1fr; } }
.ccs-card-link { text-decoration: none; color: inherit; }
.ccs-card-link .ccs-card-media { min-height: 320px; transition: transform .35s ease; }
.ccs-card-link .layout399_card-content-top { align-items: flex-end; }
.ccs-card-link .layout399_card-text { margin-bottom: 0; }
.ccs-card-link .ccs-card-cta { color: var(--base-color-brand--white); display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.ccs-card-link .ccs-card-cta .w-embed { width: .75rem; height: .75rem; display: inline-flex; }
.ccs-card-link .ccs-card-cta svg { width: 100%; height: 100%; }
.ccs-card-link:hover .heading-style-h5 { color: var(--base-color-brand--red); }
.ccs-card-link:hover .ccs-card-cta { text-decoration: underline; }
.ccs-cards .heading-style-h5 { transition: color .2s ease; }

/* Area link tiles */
.ccs-area-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ccs-area-item { margin: 0; padding: 0; }
.ccs-area-link { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border: 1px solid var(--border-color--border-primary); background-color: var(--base-color-neutral--white); text-decoration: none; color: inherit; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ccs-area-link .ccs-area-pin { flex: none; width: 1rem; height: 1rem; color: var(--base-color-brand--red); }
.ccs-area-link .ccs-area-arrow { flex: none; width: .75rem; height: .75rem; margin-left: auto; opacity: 0; transform: translateX(-.25rem); transition: opacity .2s ease, transform .2s ease; }
.ccs-area-link .ccs-area-pin svg, .ccs-area-link .ccs-area-arrow svg { width: 100%; height: 100%; display: block; }
.ccs-area-link:hover { background-color: var(--base-color-brand--black); border-color: var(--base-color-brand--black); color: var(--base-color-neutral--white); }
.ccs-area-link:hover .ccs-area-pin { color: var(--base-color-brand--red); }
.ccs-area-link:hover .ccs-area-arrow { opacity: 1; transform: translateX(0); }
@media screen and (max-width: 991px) { .ccs-area-list { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 767px) { .ccs-area-list { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) { .ccs-area-list { grid-template-columns: 1fr; } }

/* Area page extras */
.ccs-communities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ccs-communities li { margin: 0; padding: .375rem .75rem; border: 1px solid var(--border-color--border-primary); font-size: .9375rem; }
.ccs-map { margin-top: 2rem; border: 1px solid var(--border-color--border-primary); }
.ccs-map iframe { display: block; width: 100%; height: 22rem; border: 0; }

/* Testimonials on landing pages: a real 3-column grid instead of Webflow's CSS columns, so three cards
   always sit side by side across the full width (CSS columns stack uneven cards). */
.ccs-testimonials .testimonial18_list { column-count: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.ccs-testimonials .testimonial18_card { display: flex; margin-bottom: 0; height: 100%; }
@media screen and (max-width: 991px) { .ccs-testimonials .testimonial18_list { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 767px) { .ccs-testimonials .testimonial18_list { grid-template-columns: 1fr; } }

/* FAQ question as a heading element; testimonial quotes as blockquotes */
.faq9_question h3 { line-height: 1.5; }
.ccs-quote { border: 0; margin: 0; padding: 0; font-size: inherit; line-height: inherit; }

/* ---------- (6) Responsive fixes to the Webflow export ----------
   The home hero only stacked its button + paragraph below 480px; between 480px and 767px the paragraph
   was squeezed beside the button and spilled out of the hero. Stack it on all phone / small tablet widths. */
@media screen and (max-width: 767px) {
  .hero-content-low { flex-flow: column; grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; padding-top: 1.5rem; align-items: flex-start; }
  .hero-content-low .max-width-large { max-width: 100%; }
}

/* Admin bar offset for the fixed navbar when logged in. */
body.admin-bar .navbar16_component { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .navbar16_component { top: 46px; } }

/* Fallback form honeypot */
.ccs-hp { position: absolute; left: -9999px; }