/*
Theme Name:     Continuum Suite Child (JGE)
Theme URI:      https://jgesoftware.com
Description:     Child theme for Divi that modernizes the Continuum Suite site with a consistent, responsive card system for Blurbs, pricing tables, the blog grid, testimonials and CTAs, plus refined typography, buttons, forms and accessibility. All visual changes live here so they survive Divi updates.
Author:         JGE Innovative Software
Template:       Divi
Version:        1.25.0
Text Domain:    continuum-child
*/

/* =============================================================
   DESIGN TOKENS
   Change these values to retune the whole site in one place.
   Defaults read as "fresh produce + credible B2B software":
   a grounded evergreen, clean surfaces, soft depth.
   ============================================================= */
:root {
  /* Brand */
  --jge-ink:          #15241b;  /* primary text / headings           */
  --jge-muted:        #51635a;  /* secondary text (AA on white)      */
  --jge-brand:        #1f7a45;  /* primary green                     */
  --jge-brand-dark:   #155f35;  /* hover / pressed                   */
  --jge-accent:       #8cc63f;  /* fresh leaf — used sparingly       */

  /* Surfaces */
  --jge-surface:      #ffffff;  /* card background                   */
  --jge-tint:         #f3f7f4;  /* soft section/icon wash            */
  --jge-border:       #e4eae5;  /* hairline                          */

  /* Card system */
  --card-radius:      16px;
  --card-pad:         clamp(1.25rem, 1rem + 1.4vw, 2rem);
  --card-shadow:      0 1px 2px rgba(21,36,27,.04), 0 8px 24px -12px rgba(21,36,27,.18);
  --card-shadow-hov:  0 2px 4px rgba(21,36,27,.06), 0 18px 40px -16px rgba(21,36,27,.28);
  --ease:             cubic-bezier(.2,.7,.2,1);
}

/* =============================================================
   1. TYPOGRAPHY — refine scale, weight and rhythm.
   NOTE: font *family* is intentionally left to the Divi Builder
   so your brand fonts are untouched; we only tune size/spacing.
   ============================================================= */
.et_pb_text,
.et_pb_blurb_description,
body .et_pb_module p {
  line-height: 1.7;
}

h1, h2, h3, h4,
.et_pb_module_header {
  letter-spacing: -0.015em;
  line-height: 1.18;
}

/* A gentle fluid floor for headings that have no Builder size set */
.et_pb_text h2:not([style*="font-size"]) { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
.et_pb_text h3:not([style*="font-size"]) { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem); }

/* =============================================================
   2. THE CARD SYSTEM — the signature.
   One coherent surface applied to the modules used across the
   site: Blurbs, Pricing Tables, Blog posts, Testimonials, CTAs.
   ============================================================= */
.et_pb_blurb,
.et_pb_pricing_table,
.et_pb_blog_grid .et_pb_post,
.et_pb_testimonial,
.et_pb_promo {              /* promo = Call To Action module */
  position: relative;
  background: var(--jge-surface);
  border: 1px solid var(--jge-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  overflow: hidden;
}

/* A quiet brand accent line that draws in on hover */
.et_pb_blurb::before,
.et_pb_pricing_table::before,
.et_pb_blog_grid .et_pb_post::before,
.et_pb_testimonial::before,
.et_pb_promo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--jge-brand), var(--jge-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}

.et_pb_blurb:hover,
.et_pb_pricing_table:hover,
.et_pb_blog_grid .et_pb_post:hover,
.et_pb_testimonial:hover,
.et_pb_promo:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hov);
  border-color: #d4ded8;
}
.et_pb_blurb:hover::before,
.et_pb_pricing_table:hover::before,
.et_pb_blog_grid .et_pb_post:hover::before,
.et_pb_testimonial:hover::before,
.et_pb_promo:hover::before {
  transform: scaleX(1);
}

/* Blog grid images: tidy rounded top, no double padding */
.et_pb_blog_grid .et_pb_post {
  padding: 0;
}
.et_pb_blog_grid .et_pb_post .entry-featured-image-url img {
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  display: block;
}
.et_pb_blog_grid .et_pb_post .post-content,
.et_pb_blog_grid .et_pb_post .post-meta,
.et_pb_blog_grid .et_pb_post h2,
.et_pb_blog_grid .et_pb_post .post-content-inner {
  padding-left: var(--card-pad);
  padding-right: var(--card-pad);
}
.et_pb_blog_grid .et_pb_post h2 { padding-top: 1.1rem; }
.et_pb_blog_grid .et_pb_post .post-content { padding-bottom: 1.4rem; }

/* =============================================================
   3. BLURB ICON — give the icon a tinted "chip"
   ============================================================= */
.et_pb_blurb .et_pb_main_blurb_image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: var(--jge-tint);
}
.et_pb_blurb .et_pb_main_blurb_image .et-pb-icon { color: var(--jge-brand); }
.et_pb_blurb .et_pb_main_blurb_image img { width: 38px; height: auto; }
.et_pb_blurb .et_pb_module_header { margin-bottom: .5rem; }

/* =============================================================
   4. BUTTONS — consistent, modern, accessible
   ============================================================= */
.et_pb_button {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .7em 1.6em;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              box-shadow .25s var(--ease), transform .15s var(--ease);
}
.et_pb_button:hover { transform: translateY(-1px); }
.et_pb_button:active { transform: translateY(0); }

/* =============================================================
   5. PRICING TABLES — let the "featured" plan stand out
   ============================================================= */
.et_pb_pricing_table.et_pb_featured_table {
  border-color: var(--jge-brand);
  box-shadow: var(--card-shadow-hov);
}
.et_pb_pricing_table .et_pb_pricing_heading { border-radius: var(--card-radius) var(--card-radius) 0 0; }

/* =============================================================
   6. FORMS — Contact + Email signup consistency
   ============================================================= */
.et_pb_contact_field input,
.et_pb_contact_field textarea,
.et_pb_newsletter_form input[type="text"],
.et_pb_newsletter_form input[type="email"] {
  border: 1px solid var(--jge-border) !important;
  border-radius: 10px !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.et_pb_contact_field input:focus,
.et_pb_contact_field textarea:focus,
.et_pb_newsletter_form input:focus {
  border-color: var(--jge-brand) !important;
  box-shadow: 0 0 0 3px rgba(31,122,69,.15) !important;
  outline: none;
}

/* =============================================================
   7. ACCESSIBILITY — visible focus + reduced motion
   (quality floor: keyboard users and motion-sensitive users)
   ============================================================= */
a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--jge-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .et_pb_blurb,
  .et_pb_pricing_table,
  .et_pb_blog_grid .et_pb_post,
  .et_pb_testimonial,
  .et_pb_promo,
  .et_pb_blurb::before,
  .et_pb_pricing_table::before,
  .et_pb_blog_grid .et_pb_post::before,
  .et_pb_testimonial::before,
  .et_pb_promo::before,
  .et_pb_button {
    transition: none !important;
    transform: none !important;
  }
}

/* =============================================================
   8. RESPONSIVE — spacing for stacked cards + comfy tap targets
   Divi already stacks columns on mobile; this just keeps the
   rhythm right and makes buttons easy to tap.
   ============================================================= */
@media (max-width: 980px) {
  .et_pb_blurb,
  .et_pb_pricing_table,
  .et_pb_testimonial,
  .et_pb_promo {
    margin-bottom: 1.25rem;
  }
}
@media (max-width: 767px) {
  .et_pb_button {
    display: inline-block;
    min-height: 44px;          /* WCAG-friendly tap target */
    line-height: 1.4;
  }
  :root { --card-radius: 14px; }
}

/* =============================================================
   9. OPT-IN: EQUAL-HEIGHT CARD ROW
   Divi columns float by default, so cards in a row can end at
   different heights. To make a specific row's cards equal height,
   add the CSS class  jge-cards-equal  to that ROW in the Builder
   (Row settings > Advanced > CSS Class). Applied only on desktop.
   ============================================================= */
@media (min-width: 981px) {
  .jge-cards-equal.et_pb_row,
  .jge-cards-equal .et_pb_row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .jge-cards-equal > .et_pb_column { float: none; display: flex; }
  .jge-cards-equal > .et_pb_column > .et_pb_module { width: 100%; }
}

/* ============================================================
   Custom EN / ES language switcher (replaces Google Language Translator plugin)
   ============================================================ */
.continuum-lang { display: flex; align-items: center; }
.continuum-lang .clang { position: relative; top: -20px; }
.clang { display: inline-flex; align-items: center; gap: 6px; font: inherit; line-height: 1; }
.clang-btn {
	background: none; border: 0; margin: 0; padding: 2px 3px; cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .03em;
	color: #51635a; line-height: 1; transition: color .2s ease;
}
.clang-btn:hover, .clang-btn:focus-visible { color: #1f7a45; }
.clang-btn.is-active { color: #1f7a45; text-decoration: underline; text-underline-offset: 3px; }
.clang-sep { color: #c7d2cb; font-size: 13px; user-select: none; }

/* Suppress Google Translate's injected chrome (top banner, tooltip, highlight) */
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate,
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-te-gadget-icon { display: none !important; }
#google_translate_element { display: none !important; }
body { top: 0 !important; position: static !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ============================================================
   Header logo: keep mark at size + show "Continuum Suite" beside it
   ============================================================ */
#logo { width: auto !important; }
.et_header_style_left #logo,
.et_header_style_split #logo { max-height: 54px; }

.logo_container::after {
	content: "Continuum Suite";
	display: inline-block;
	margin-left: 14px;
	font-family: "Bricolage Grotesque", sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #13241c;
	white-space: nowrap;
	vertical-align: middle;
}
@media (max-width: 1100px) { .logo_container::after { display: none; } }

/* ============================================================
   Homepage product cards: make the WHOLE card clickable
   Stretches each card's existing "Explore →" link to cover the
   entire card, so clicking the product name or anywhere on the
   card navigates to that product's page (QC / Food Safety /
   Traceability). No nested links, accessible name preserved.
   ============================================================ */
#products .card { cursor: pointer; }
#products .card .more { position: static; }
#products .card .more::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}