/**
 * Sitewide design refresh — July 2026
 *
 * Loaded after keaco.css/bootstrap.css so these rules can override the
 * legacy styles without editing them directly (keeps a clean rollback
 * path: disable this one file to go back to the old look).
 *
 * Scope: typography, color, spacing, buttons/links, and card-style
 * components used across every page (banner, .b-btn, .solution,
 * .why-content, footer). Deliberately does NOT touch layout properties
 * (float, width, display, grid columns) so existing page structure is
 * left intact — this is a cosmetic pass, not a rebuild.
 */

:root {
  --keaco-blue: #0399fe;
  --keaco-blue-dark: #0277c6;
  --keaco-navy: #1a1f2b;
  --keaco-ink: #2b2f36;
  --keaco-body: #4a4f57;
  --keaco-line: #e5e7eb;
  --keaco-bg-soft: #f6f8fa;
  --keaco-radius: 10px;
  --keaco-space-sm: 12px;
  --keaco-space-md: 24px;
  --keaco-space-lg: 48px;
}

/* ---------------------------------------------------------------------
   Typography — one font everywhere, one consistent heading scale.
   Previously body{} declared Open Sans then immediately overrode it
   with Helvetica/Arial on the next line, so most body text was
   actually rendering in Helvetica while buttons/nav used Open Sans.
------------------------------------------------------------------------ */
body,
p,
li,
td,
th,
input,
textarea,
select {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  color: var(--keaco-body);
  -webkit-font-smoothing: antialiased;
}

p {
  color: var(--keaco-body);
  font-size: 15px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--keaco-ink);
}

h1 { font-size: 34px; line-height: 1.2; }
h2 { font-size: 26px; line-height: 1.25; }
h3 { color: var(--keaco-blue); font-weight: 700; font-size: 20px; margin: 0 0 12px; }
h4 { font-size: 16px; font-weight: 600; color: var(--keaco-ink); }

a { color: var(--keaco-blue); }
a:hover { color: var(--keaco-blue-dark); }

/* ---------------------------------------------------------------------
   Buttons / CTA links — one consistent pill-button component for the
   two actual calls-to-action (hero button, .cta-block buttons) plus a
   matching treatment for the .solution sidebar-card link. Deliberately
   does NOT touch the plain .b-btn nav-link bar (Electronics/
   Manufacturing/Medical) — those are simple text links, not buttons,
   and were getting swept up by earlier blanket ".b-btn a" rules.
------------------------------------------------------------------------ */
a.button {
  display: inline-block;
  background: var(--keaco-blue);
  background-image: none !important; /* drop the legacy arrow.png icon */
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 26px !important;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
  margin: 8px 0 0 !important;
}

/* .cta-block sits on the same blue as a.button's default background,
   so its buttons need to invert (white pill / blue text) to actually
   be visible instead of blue-on-blue. */
.b-btn.cta-block a {
  display: inline-block;
  background: #fff;
  background-image: none !important;
  color: var(--keaco-blue) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 13px 26px !important;
  border-radius: 999px;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin: 8px 0 0 !important;
}

/* .solution a keeps its original float:right position within the
   sidebar card (used across product/industry pages) — only the
   visual treatment (color, shape, spacing) is updated here. */
.solution a {
  background: var(--keaco-blue);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px !important;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
}

a.button:hover,
.solution a:hover {
  background: var(--keaco-blue-dark);
  color: #fff !important;
  transform: translateY(-1px);
}

.b-btn.cta-block a:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   .b-btn — plain nav-link bar (Electronics / Manufacturing / Medical
   quick links). Left as a slim strip, just cleaned up typography —
   this is NOT a card and shouldn't get card padding/rounding.
------------------------------------------------------------------------ */
.b-btn {
  background: var(--keaco-blue);
}

.b-btn p { margin: 0; }
.b-btn p a {
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.b-btn p a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   .cta-block — the two actual CTA banners ("Why Keaco", "Have a part
   that needs automating?"). Rounded card treatment lives here instead
   of on bare .b-btn so it can't leak onto the plain nav-link bar above.
------------------------------------------------------------------------ */
.b-btn.cta-block {
  padding: var(--keaco-space-lg) var(--keaco-space-md) !important;
  margin-bottom: var(--keaco-space-md) !important;
}

.b-btn.cta-block h2 { color: #fff; margin-bottom: 8px; }
.b-btn.cta-block p { color: rgba(255,255,255,0.92) !important; }

/* .regularslide had the same leftover literal red border as the
   footer — matching it to the same neutral divider color. */
.regularslide {
  border-top: 1px solid var(--keaco-line);
}

/* ---------------------------------------------------------------------
   .why-content — replace the flat hard-edged blue header bar with a
   rounded, more generously spaced heading treatment.
------------------------------------------------------------------------ */
.why-content h2 {
  padding: 14px 20px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   .solution — sidebar card. Replace the dated diagonal head-bg.png
   watermark + flat gray body with a clean minimal card: white body,
   soft border, subtle shadow, blue accent kept as a top border only.
------------------------------------------------------------------------ */
.solution {
  background: #fff !important;
  border: 1px solid var(--keaco-line);
  border-top: 4px solid var(--keaco-blue) !important;
  border-radius: var(--keaco-radius);
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.06);
  padding: 4px 0 20px !important;
}

.solution h2 {
  background-image: none !important;
  color: var(--keaco-ink) !important;
  text-align: left;
  padding: 16px 20px 0 !important;
  height: auto !important;
  line-height: 1.3 !important;
  font-size: 18px;
}

.solution p { color: var(--keaco-body); padding: 8px 20px !important; }

/* ---------------------------------------------------------------------
   About-page section blocks (added for the July 2026 copy refresh) —
   constrain to a readable width (same pattern as .why-keaco-inner on the
   home page) instead of stretching to the full, uncapped .container
   width, and give the intro paragraph and stacked sections consistent
   breathing room.
------------------------------------------------------------------------ */
.about-intro {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--keaco-space-sm) 0 var(--keaco-space-lg);
  text-align: center;
}

.about-intro p:first-child {
  font-size: 19px;
  font-weight: 600;
  color: var(--keaco-ink);
  line-height: 1.5;
}

/* About sections — 2x2 card grid instead of a long stack of dividers,
   matching the card language used for products/solution/why-keaco. */
.about-sections { margin-bottom: var(--keaco-space-lg); }

.about-sections-inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.about-section-block {
  background: #fff;
  border: 1px solid var(--keaco-line);
  border-top: 4px solid var(--keaco-blue);
  border-radius: var(--keaco-radius);
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.06);
  padding: 24px 28px 28px;
}

.about-section-block h3 { margin-bottom: 8px; }
.about-section-block p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .about-sections-inner { grid-template-columns: 1fr; }
}

/* About page FAQ — align width, spacing, and card accent with the rest
   of the page's cards (about-intro / about-sections-inner both sit at
   a constrained, centered width with the same blue-top-border card
   language used throughout the refresh). */
.page-template-template-partsabout-php .faq-section {
  padding: var(--keaco-space-md) 0 var(--keaco-space-lg);
}

.page-template-template-partsabout-php .faq-section .container {
  max-width: 980px;
  margin: 0 auto;
}

.page-template-template-partsabout-php .faq-item.panel-default {
  border-top: 4px solid var(--keaco-blue);
}

/* ---------------------------------------------------------------------
   Product grid cards (.product — used on the main Products listing
   page). Replace the dated black icon-header, heavy drop shadow, and
   absolutely-positioned button with the same clean card language used
   for .solution and the home page's Why Keaco cards: white body, soft
   border, blue top accent, subtle shadow.
------------------------------------------------------------------------ */
.product {
  background: #fff;
  border: 1px solid var(--keaco-line);
  border-top: 4px solid var(--keaco-blue);
  border-radius: var(--keaco-radius);
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.06);
  padding-bottom: 20px;
  min-height: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product p:has(a) { margin-top: auto; }

/* The Products listing page grid (.about-content) used floated
   col-md-4 children with no clearfix between rows, so cards of
   different heights caused the next row to start at an uneven
   offset per column ("waterfall" layout). CSS Grid replaces the
   float behavior with a clean, evenly-aligned 3-column layout. */
.about-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  clear: both;
}

.about-content > [class*="col-md-4"] {
  float: none;
  width: auto;
  padding: 0;
}

@media (max-width: 991px) {
  .about-content { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .about-content { grid-template-columns: 1fr; }
}

.product h2 {
  background: none !important;
  color: var(--keaco-ink);
  padding: 16px 15px 0 !important;
  height: auto !important;
  line-height: 1.3 !important;
  font-size: 17px;
  border-radius: 0;
}

.product p a {
  position: static;
  display: inline-block;
  float: none;
  background: var(--keaco-blue);
  border-radius: 999px;
  padding: 8px 18px !important;
  margin: 6px 15px 0 !important;
  font-size: 14px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   FAQ accordion (Bootstrap panel defaults were unstyled — plain gray
   boxes). Reskin to match the card language used elsewhere: white
   panels, soft border, blue active-state accent, no heavy borders.
------------------------------------------------------------------------ */
.faq-item.panel-default {
  background: #fff;
  border: 1px solid var(--keaco-line);
  border-radius: var(--keaco-radius);
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.05);
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-item .panel-heading {
  background: #fff;
  border: 0;
  padding: 0;
}

.faq-item .panel-title a {
  display: block;
  padding: 16px 20px;
  color: var(--keaco-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.faq-item .panel-title a:hover { color: var(--keaco-blue); }

.faq-item .panel-body {
  border-top: 1px solid var(--keaco-line) !important;
  padding: 16px 20px;
}

.faq-item .panel-body p { margin: 0; }

.faq-section h2 { margin-bottom: 20px; }

/* ---------------------------------------------------------------------
   Product specification table — plain, minimal styling instead of the
   default Bootstrap table-bordered look.
------------------------------------------------------------------------ */
.spec-table-section h2 { margin-bottom: 16px; }

.spec-table {
  background: #fff;
  border: 1px solid var(--keaco-line) !important;
  border-radius: var(--keaco-radius);
  overflow: hidden;
}

.spec-table th,
.spec-table td {
  border: 0 !important;
  border-bottom: 1px solid var(--keaco-line) !important;
  padding: 12px 16px !important;
  font-size: 14px;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0 !important; }

.spec-table th {
  color: var(--keaco-ink);
  font-weight: 600;
  background: var(--keaco-bg-soft);
  width: 35%;
}

.spec-table td { color: var(--keaco-body); }

/* ---------------------------------------------------------------------
   RFQ / contact form — Gravity Forms shortcode output had no custom
   styling beyond browser/theme defaults. Give inputs a consistent,
   minimal treatment matching the rest of the refresh.
------------------------------------------------------------------------ */
.rfq-form input[type="text"],
.rfq-form input[type="email"],
.rfq-form input[type="tel"],
.rfq-form input[type="number"],
.rfq-form textarea,
.rfq-form select {
  border: 1px solid var(--keaco-line) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 14px;
  transition: border-color 0.15s ease;
}

.rfq-form input:focus,
.rfq-form textarea:focus,
.rfq-form select:focus {
  border-color: var(--keaco-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 134, 229, 0.12);
}

.rfq-form label { color: var(--keaco-ink); font-weight: 600; }

/* ---------------------------------------------------------------------
   Contact page — give the address sidebar and RFQ form matching card
   treatment, add page-level breathing room, and lay the form fields
   out in two columns (via CSS Grid on CF7's default markup — no need
   to touch the form's field configuration) so the page doesn't read
   as one long single-column scroll.
------------------------------------------------------------------------ */
.contact-page { padding: var(--keaco-space-lg) 0; }

.contact-info,
.rfq-form-card {
  background: #fff;
  border: 1px solid var(--keaco-line);
  border-top: 4px solid var(--keaco-blue);
  border-radius: var(--keaco-radius);
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.06);
  padding: 24px 28px 28px;
  height: 100%;
}

.contact-info p { margin: 0 0 14px; }
.contact-info p:last-child { margin-bottom: 0; }

.rfq-form-card h2 { margin-top: 0; }

.rfq-form .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-top: 20px;
}

.rfq-form .wpcf7-form > p { margin: 0 0 16px; }

/* Full-width rows: long text field, file upload, textarea, submit,
   and CF7's own status/response elements. */
.rfq-form .wpcf7-form > p:has(textarea),
.rfq-form .wpcf7-form > p:has(input[type="file"]),
.rfq-form .wpcf7-form > p:has(input[type="submit"]),
.rfq-form .wpcf7-form > .wpcf7-response-output {
  grid-column: 1 / -1;
}

.rfq-form .wpcf7-form input[type="submit"] {
  background: var(--keaco-blue);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.rfq-form .wpcf7-form input[type="submit"]:hover { background: var(--keaco-blue-dark); }

.contact-return-link {
  margin-top: 8px;
  font-size: 13px;
}
.contact-return-link a { color: var(--keaco-body); }

@media (max-width: 767px) {
  .rfq-form .wpcf7-form { grid-template-columns: 1fr; }
  .rfq-form-card { margin-top: var(--keaco-space-md); }
}

/* ---------------------------------------------------------------------
   Footer — fix a leftover literal red debug border, and calm down the
   all-caps/heavy footer link weight to match the lighter overall feel.
------------------------------------------------------------------------ */
footer {
  border-top: 1px solid var(--keaco-line) !important;
}

.footer-section h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--keaco-ink) !important;
}

.foot ul li a {
  color: var(--keaco-body) !important;
  font-weight: 500 !important;
}

.foot ul li a:hover { color: var(--keaco-blue) !important; }

/* ---------------------------------------------------------------------
   Page banner ribbon (.inner-title-top) — keep the existing diagonal
   graphic (it's a recognizable brand element), just tighten spacing
   and weight for a cleaner, less cramped read.
------------------------------------------------------------------------ */
.inner-title-top h1,
.inner-title-top .category-label {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.inner-title-top h2 {
  font-weight: 600;
}

.inner-title-top .row {
  display: flex;
  align-items: center;
}

.inner-title-top .banner-text {
  color: var(--keaco-blue);
  font-weight: 700;
  font-size: 20px;
  margin: 0;
}

.inner-title-top .case-study-title {
  padding: 0 20px 0 0;
}