/* ============================================================================
   STALLYONS DESIGN SYSTEM  v1.0
   ----------------------------------------------------------------------------
   Reusable, class/token-based standards extracted from the approved homepage
   (home-consistency-fixed). Contains NO element IDs, so it applies identically
   on any page. Loaded only on pages that opt in (via inc/design-system.php —
   the "Stallyons Design System" checkbox), so un-migrated pages stay untouched.

   Everything keyed to specific element IDs on the homepage (colour/radius
   remediation, the 6-card buttons, section-specific spacing, icon swaps, the
   appointment text, etc.) is legacy page-fixing and is NOT included here — see
   PHASE0-mapping.md for the full origin/classification of every rule.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   Semantic variables so colours/spacing/radii are defined once and reused.
   'text' variants are the WCAG-AA-safe steps to use when an accent is TEXT.
--------------------------------------------------------------------------- */
:root {
  /* Brand core */
  --sty-ink:          #0C1428;   /* primary text / headings */
  --sty-red:          #DD0513;   /* primary CTA fill (AA on white) */
  --sty-red-hover:    #AF000B;   /* primary CTA hover */
  --sty-teal:         #00ACD2;   /* brand accent (focus ring, large display) */

  /* Text-safe accent steps (use when the accent is used as TEXT) */
  --sty-teal-text:    #03677E;   /* was #00ACD2 / #1A9CA1 */
  --sty-blue-text:    #035CAC;   /* was #2480E0 */
  --sty-orange-text:  #BF4E04;   /* was #FF6A00 */
  --sty-green-text:   #046F30;   /* was #22C55E */

  /* Neutrals */
  --sty-slate:        #475569;   /* secondary / body-muted text */
  --sty-muted:        #64748B;   /* meta / captions */
  --sty-muted-2:      #98A2B3;   /* faint meta (footer, dates) */
  --sty-surface:      #F8FAFC;   /* section band background */
  --sty-border:       #E2E8F0;   /* input & divider border */

  /* Accent tints (icon tiles, chips) */
  --sty-tint-blue:    #EAF3FE;
  --sty-tint-indigo:  #EEF0FD;
  --sty-tint-teal:    #EAFAF8;
  --sty-tint-violet:  #F6EFFD;
  --sty-tint-orange:  #FEEFEA;

  /* Radii */
  --sty-r-sm:    8px;
  --sty-r:       12px;   /* buttons, inputs */
  --sty-r-lg:    16px;   /* media, cards */
  --sty-r-xl:    24px;   /* large panels */
  --sty-r-pill:  9999px; /* chips, badges */

  /* Vertical rhythm (section padding) */
  --sty-sec:          80px;  /* desktop standard */
  --sty-sec-tablet:   64px;
  --sty-sec-mobile:   48px;
  --sty-sec-compact:  48px;  /* light bands: logo strip, blog-card footer */

  /* Type */
  --sty-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sty-body-lh: 1.5;        /* 16px body -> 24px */
}

/* ---------------------------------------------------------------------------
   2. BASE / TYPOGRAPHY   (origin: C-2 + fix [A])
   One brand typeface everywhere, WITHOUT breaking icon-fonts.
--------------------------------------------------------------------------- */
#page, #page *, #masthead, #masthead *, footer, footer * {
  font-family: var(--sty-font) !important;
}
/* keep Font Awesome / eicons glyphs on their icon fonts */
#page i[class*="fa"], #page i[class*="icon"], #page .elementor-icon i,
#page [class^="fa-"], #page [class*=" fa-"], #page .fa, #page .fas, #page .far,
#page .fal, #page .fab, #page .fad, #page [class^="eicon-"], #page [class*=" eicon-"] {
  font-family: "Font Awesome 6 Free","Font Awesome 6 Brands","Font Awesome 5 Free",
               "Font Awesome 5 Brands","FontAwesome","eicons" !important;
}

/* Body / card paragraph text -> one line-height (origin: ROUND-14) */
#page p.elementor-heading-title,
#page .elementor-widget-text-editor p { line-height: 24px !important; }

/* ---------------------------------------------------------------------------
   3. BUTTONS   (origin: B-1 + ROUND-4/8 primary fill)
--------------------------------------------------------------------------- */
.elementor-button, a.elementor-button, .tf-btn {
  border-radius: var(--sty-r) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), background-color .15s, box-shadow .15s !important;
}
.elementor-button:hover, a.elementor-button:hover, .tf-btn:hover { transform: translateY(-1px) !important; }

/* small category "chips" stay pills (tags, not buttons) */
.elementor-widget-button a.elementor-button-link[href="#"],
a.elementor-button-link.elementor-size-xs { border-radius: var(--sty-r-pill) !important; }

/* Primary CTA helper — add class `sty-btn-primary` to any button (origin: ROUND-4) */
.sty-btn-primary a.elementor-button, a.elementor-button.sty-btn-primary, .sty-btn-primary.tf-btn {
  background-color: var(--sty-red) !important; color: #fff !important;
}
.sty-btn-primary a.elementor-button:hover, a.elementor-button.sty-btn-primary:hover { background-color: var(--sty-red-hover) !important; }

/* ---------------------------------------------------------------------------
   4. FORMS   (origin: F-1, fixes [B][C][D][H], ROUND-8)
--------------------------------------------------------------------------- */
#page input[type="text"], #page input[type="email"], #page input[type="tel"],
#page input[type="search"], #page textarea, #page select,
footer input[type="email"], footer input[type="text"] {
  border: 1px solid var(--sty-border) !important;
  border-radius: var(--sty-r) !important;
  background: #FFFFFF !important;
  font-family: var(--sty-font) !important;
}
#page input:focus, #page textarea:focus, #page select:focus {
  border-color: var(--sty-teal) !important;
  box-shadow: 0 0 0 3px rgba(0,172,210,.20) !important;
  outline: none !important;
}

/* Contact Form 7 submit = primary red button */
#page input.wpcf7-submit, #page .wpcf7-submit.stly_cf7_submit_btn,
.wpcf7 input[type="submit"], .wpcf7 button[type="submit"] {
  background: var(--sty-red) !important; background-color: var(--sty-red) !important;
  color: #FFFFFF !important; border: none !important; border-radius: var(--sty-r) !important;
  opacity: 1 !important; cursor: pointer !important; font-weight: 600 !important;
  padding: 12px 28px !important; box-shadow: none !important;
  transition: background-color .15s, transform .15s !important;
}
#page input.wpcf7-submit:hover, .wpcf7 input[type="submit"]:hover {
  background: var(--sty-red-hover) !important; transform: translateY(-1px) !important;
}

/* required-field asterisk */
.wpcf7-form p:has(.wpcf7-validates-as-required) .stly_cf7_label::after,
.wpcf7-form p:has([aria-required="true"]) .stly_cf7_label::after {
  content: " *"; color: var(--sty-red); font-weight: 700; margin-left: 2px;
}

/* validation / response message */
.wpcf7-response-output {
  border: 1px solid #FCA5A5 !important; background: #FEF2F2 !important; color: #B91C1C !important;
  border-radius: var(--sty-r) !important; padding: 12px 16px !important; font-size: 14px !important;
  margin: 18px 0 0 !important; line-height: 1.5 !important; font-family: var(--sty-font) !important;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #86EFAC !important; background: #F0FDF4 !important; color: var(--sty-green-text) !important; }
.wpcf7-response-output:empty { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
.wpcf7-not-valid-tip { color: #DC2626 !important; font-size: 13px !important; font-weight: 600 !important; margin-top: 6px !important; display: block !important; }
.wpcf7-form-control.wpcf7-not-valid { border-color: #F87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.15) !important; }

/* footer newsletter (Noptin) — subscribe button + validation messages */
.sty-ft__news input.noptin-form-submit, .sty-ft__news .noptin-form-submit,
.sty-ft__form button, .sty-ft__news input[type="submit"], .noptin-form-submit { border-radius: var(--sty-r) !important; }
.sty-ft__news .noptin-alert.noptin-error {
  background: rgba(249,37,37,.14) !important; color: #FCA5A5 !important;
  border: 1px solid rgba(249,37,37,.35) !important; border-radius: 10px !important;
  padding: 9px 14px !important; font-size: 13px !important; text-align: left !important; box-shadow: none !important;
}
.sty-ft__news .noptin-alert.noptin-success {
  background: rgba(34,197,94,.14) !important; color: #86EFAC !important;
  border: 1px solid rgba(34,197,94,.35) !important; border-radius: 10px !important;
  padding: 9px 14px !important; font-size: 13px !important; text-align: left !important;
}

/* ---------------------------------------------------------------------------
   5. ELEVATION   (origin: E-1)
--------------------------------------------------------------------------- */
[style*="rgba(0, 0, 0, 0) 0px 0px 10px"] { box-shadow: none !important; }

/* ---------------------------------------------------------------------------
   6. SECTION SPACING UTILITIES   (origin: ROUND-12/13)
   Add these classes to a section's Advanced > CSS Classes field, or set the
   same px values directly in Elementor when building a new section.
   Standard content gap between two `.sty-sec` sections = 160 / 128 / 96px.
--------------------------------------------------------------------------- */
.sty-sec { padding-top: var(--sty-sec) !important; padding-bottom: var(--sty-sec) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.sty-sec--compact { padding-top: var(--sty-sec-compact) !important; padding-bottom: var(--sty-sec-compact) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.sty-sec--tight-bottom { padding-bottom: 24px !important; }  /* intro heading hugging its content section */
.sty-sec--flush-top { padding-top: 0 !important; }           /* content section paired under a --tight-bottom intro */

@media (max-width: 1024px) {
  .sty-sec { padding-top: var(--sty-sec-tablet) !important; padding-bottom: var(--sty-sec-tablet) !important; }
  .sty-sec--compact { padding-top: 40px !important; padding-bottom: 40px !important; }
  .sty-sec--tight-bottom { padding-bottom: 20px !important; }
}
@media (max-width: 767px) {
  .sty-sec { padding-top: var(--sty-sec-mobile) !important; padding-bottom: var(--sty-sec-mobile) !important; }
  .sty-sec--compact { padding-top: 32px !important; padding-bottom: 32px !important; }
  .sty-sec--tight-bottom { padding-bottom: 16px !important; }
}

/* ---------------------------------------------------------------------------
   7. ICON TILE UTILITY   (origin: ROUND-17 pattern)
   A 54x54 rounded accent tile with a white icon. Put `sty-icon-tile` (+ a
   colour modifier) on the Image widget; point the image at a white line-icon.
--------------------------------------------------------------------------- */
.sty-icon-tile img {
  width: 54px !important; height: 54px !important;
  border-radius: 15px !important; padding: 14px !important;
  box-sizing: border-box !important; object-fit: contain !important;
}
.sty-icon-tile.is-blue   img { background-color: #2480E0 !important; }
.sty-icon-tile.is-violet img { background-color: #774BD5 !important; }
.sty-icon-tile.is-teal   img { background-color: #1A9CA1 !important; }
.sty-icon-tile.is-indigo img { background-color: #4D53D8 !important; }
.sty-icon-tile.is-orange img { background-color: #E35D40 !important; }

/* ---------------------------------------------------------------------------
   8. COMPONENTS   (class-based — reusable wherever these components appear)
--------------------------------------------------------------------------- */

/* 8a. Comparison table (origin: fixes [E][F][G]) */
.comparison-table thead tr { background: #EEF4FF !important; }
.comparison-table tbody tr:nth-last-child(2) { background: #F6F6F6 !important; }
.comparison-table tbody tr:last-child { background: #FAFAFA !important; }
.comparison-table .icon-check::before { content: "✓"; }
.comparison-table .icon-check, .comparison-table .icons-x {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 24px !important; height: 24px !important; min-width: 24px !important; padding: 0 !important;
  font-size: 13px !important; line-height: 1 !important; border-radius: 999px !important;
  vertical-align: middle !important; box-sizing: border-box !important; margin-right: 2px !important;
}
.comparison-table thead th:not(:first-child), .comparison-table tbody td:not(:first-child) { text-align: left !important; }
.comparison-table th, .comparison-table td, .comparison-table td span { vertical-align: middle !important; }

/* 8b. Blog / post cards (origin: ROUND-7) — titles ink, category slate, not red */
.elementskit-post-image-card .entry-title a, .elementskit-post-body .entry-title a,
.elementskit-post-image-card h2.entry-title a, .entry-title a { color: var(--sty-ink) !important; }
.elementskit-post-image-card .entry-title a:hover, .entry-title a:hover { color: var(--sty-red) !important; }
.elementskit-post-image-card .elementskit-meta-categories a,
.elementskit-post-image-card .elementskit-meta-categories span,
.elementskit-meta-categories a, .elementskit-meta-categories .elementskit-meta-wraper a,
.elementskit-post-image-card .elementskit-post-category a { color: var(--sty-muted) !important; }

/* 8c. Mobile nav (RMM) — desktop white / ink / red scheme (origin: fix [I]) */
.rmm-mobile-nav .rmm-mobile-header { background: #FFFFFF !important; border-bottom: 1px solid var(--sty-border) !important; }
.rmm-mobile-nav .rmm-mobile-title, .rmm-mobile-nav .rmm-close-btn,
.rmm-mobile-nav .rmm-mobile-header [class*="close"], .rmm-mobile-nav .mobile-heading-text { color: var(--sty-ink) !important; }
.rmm-mobile-nav .rmm-mobile-title { font-weight: 700 !important; }
.rmm-mobile-nav a, .rmm-mobile-nav .mobile-item-row > a { color: var(--sty-ink) !important; }
.rmm-mobile-nav a:hover, .rmm-mobile-nav .mobile-item-row > a:hover { color: var(--sty-red) !important; }
.rmm-mobile-nav .mobile-toggle { background: #F3F4F6 !important; color: var(--sty-ink) !important; box-shadow: none !important; }
.rmm-mobile-nav .mobile-toggle.open, .rmm-mobile-nav .mobile-toggle.active { background: var(--sty-red) !important; color: #FFFFFF !important; }
.rmm-mobile-nav .mobile-item-row { padding: 8px 20px !important; }
.rmm-mobile-nav .mobile-item-row > a { min-height: 40px !important; }