/*
Theme Name: EKG Base
Theme URI: https://ekgmarketing.com/
Author: EKG Marketing
Author URI: https://ekgmarketing.com/
Description: Thin parent block theme for all EKG sites. Holds the shared token STRUCTURE (theme.json slugs, layout, spacing, base block styles) plus header/footer template-part scaffolding. Brand identity — palette, fonts, logo, chrome — lives in each child theme (e.g. Heavenly Puppies). Keep this parent thin; a quiet parent is what stops inheritance becoming drift.
Version: 0.1.6
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ekg-base
*/

/* Parent ships almost no front-end CSS on purpose — styling is token-driven via
   theme.json, and each child theme owns its chrome stylesheet. Shared, genuinely
   universal rules live here (first one landed 2026-07-03: the Fluent Forms baseline). */

/* =========================================================================
   Fluent Forms — EKG house baseline (fleet-wide)     v0.1.3 · 2026-07-03
   Ref: Development/EKG-Forms-Contact-Standard.md
   -------------------------------------------------------------------------
   Restyles Fluent Forms' DEFAULT skin to the EKG house look using theme.json
   TOKENS only — no hardcoded brand colors. Each child theme's palette/fonts
   flow through automatically because children override the shared slugs:
     eric  → navy/clay/paper + IBM Plex   ·   neutral ekg-base → parent defaults.
   So there is NO per-site form CSS. A child that needs to tweak its forms
   overrides just the --ekg-form-* vars below (one place), never the rules.

   Scope: rules are prefixed `.fluentform .frm-fluent-form` (specificity 0,3,0)
   so they win over Fluent Forms' shipped default-skin CSS regardless of
   stylesheet load order — without !important. Verified against the live
   contact form markup (eric form id 1), which uses labelPlacement:top +
   asterisk-right + inline errors + Akismet honeypot.
   ========================================================================= */

.fluentform {
  /* Form token layer — the single rebrand surface. Each maps to a house
     token with a safe fallback for a site that hasn't defined that slug. */
  --ekg-form-font:         var(--wp--preset--font-family--body, inherit);
  --ekg-form-text:         var(--wp--preset--color--ink,     #1a1f29);
  --ekg-form-label:        var(--wp--preset--color--ink,     #1a1f29);
  --ekg-form-muted:        var(--wp--preset--color--sub,     #6b7280);
  --ekg-form-control-bg:   var(--wp--preset--color--panel,   #ffffff);
  --ekg-form-border:       var(--wp--preset--color--line,    rgba(0,0,0,.16));
  --ekg-form-accent:       var(--wp--preset--color--accent,  #2f77b0);
  --ekg-form-error:        var(--wp--preset--color--clay,    #b62935);
  --ekg-form-success:      var(--wp--preset--color--success, #3fa45c);
  --ekg-form-btn-bg:       var(--wp--preset--color--navy,    var(--wp--preset--color--ink, #1a1f29));
  --ekg-form-btn-bg-hover: var(--wp--preset--color--accent,  #2f77b0);
  --ekg-form-btn-text:     var(--wp--preset--color--on-dark, #ffffff);
  --ekg-form-radius:       5px;                       /* eric square; sane fleet default */
  --ekg-form-row-gap:      var(--wp--preset--spacing--50, 22px);
}

/* form-wide type */
.fluentform .frm-fluent-form,
.fluentform .frm-fluent-form .ff-el-form-control,
.fluentform .frm-fluent-form .ff-btn { font-family: var(--ekg-form-font); }

/* rows */
.fluentform .frm-fluent-form .ff-el-group { margin-bottom: var(--ekg-form-row-gap); }

/* labels */
.fluentform .frm-fluent-form .ff-el-input--label { margin-bottom: 7px; }
.fluentform .frm-fluent-form .ff-el-input--label label {
  font-size: .9rem; font-weight: 600; line-height: 1.35;
  letter-spacing: .005em; color: var(--ekg-form-label);
}
/* required asterisk → house error hue (recolor only; keep FF's mark) */
.fluentform .frm-fluent-form .ff-el-is-required.asterisk-right label:after,
.fluentform .frm-fluent-form .ff-el-input--label.ff-el-is-required label:after {
  color: var(--ekg-form-error);
}

/* inputs · textarea · select */
.fluentform .frm-fluent-form .ff-el-form-control {
  width: 100%; box-sizing: border-box; min-height: 46px;
  padding: .68rem .85rem;
  font-size: var(--wp--preset--font-size--medium, 1rem);   /* 16px → no iOS zoom-on-focus */
  line-height: 1.5; color: var(--ekg-form-text);
  background: var(--ekg-form-control-bg);
  border: 1px solid var(--ekg-form-border);
  border-radius: var(--ekg-form-radius); box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fluentform .frm-fluent-form textarea.ff-el-form-control { min-height: 140px; line-height: 1.6; resize: vertical; }
.fluentform .frm-fluent-form .ff-el-form-control::placeholder { color: var(--ekg-form-muted); opacity: 1; }
.fluentform .frm-fluent-form .ff-el-form-control:hover {
  border-color: color-mix(in srgb, var(--ekg-form-border) 55%, var(--ekg-form-text));
}
.fluentform .frm-fluent-form .ff-el-form-control:focus,
.fluentform .frm-fluent-form .ff-el-form-control:focus-visible {
  outline: none; border-color: var(--ekg-form-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ekg-form-accent) 22%, transparent);
}

/* two-column name row → flex; auto-stacks on narrow screens (no media query) */
.fluentform .frm-fluent-form .ff-t-container { display: flex; flex-wrap: wrap; gap: 0 clamp(14px, 3vw, 22px); margin: 0; }
.fluentform .frm-fluent-form .ff-t-cell { flex: 1 1 200px; padding: 0; }

/* error state */
.fluentform .frm-fluent-form .ff-el-form-control[aria-invalid="true"],
.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: var(--ekg-form-error); }
.fluentform .frm-fluent-form .ff-el-form-control[aria-invalid="true"]:focus,
.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ekg-form-error) 20%, transparent);
}
.fluentform .frm-fluent-form .ff-el-group .error,
.fluentform .frm-fluent-form .text-danger {
  margin-top: 6px; font-size: var(--wp--preset--font-size--small, .8125rem);
  line-height: 1.4; color: var(--ekg-form-error);
}

/* submit — mirrors eric's site button (navy · 5px · weight 600) via tokens */
.fluentform .frm-fluent-form .ff_submit_btn_wrapper { margin-top: 4px; }
.fluentform .frm-fluent-form .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.9rem;
  font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ekg-form-btn-text); background: var(--ekg-form-btn-bg);
  border: 0; border-radius: var(--ekg-form-radius); cursor: pointer;
  transition: background-color .15s ease, transform .05s ease;
}
.fluentform .frm-fluent-form .ff-btn-submit:hover { background: var(--ekg-form-btn-bg-hover); }
.fluentform .frm-fluent-form .ff-btn-submit:active { transform: translateY(1px); }
.fluentform .frm-fluent-form .ff-btn-submit:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ekg-form-accent) 35%, transparent);
}

/* success message + form-level error stack (plain fallbacks first, then tinted) */
.fluentform .ff-message-success {
  padding: 1rem 1.15rem; font-size: 1rem; line-height: 1.55; color: var(--ekg-form-text);
  background: #f1f7f2; background: color-mix(in srgb, var(--ekg-form-success, #3fa45c) 12%, #fff);
  border: 1px solid #cfe6d6; border: 1px solid color-mix(in srgb, var(--ekg-form-success, #3fa45c) 35%, #fff);
  border-left: 3px solid var(--ekg-form-success, #3fa45c); border-radius: var(--ekg-form-radius);
}
.fluentform .ff-errors-in-stack:not(:empty) {
  margin-bottom: 1rem; color: var(--ekg-form-error);
  font-size: var(--wp--preset--font-size--small, .8125rem);
}

/* spam honeypot must never render (belt-and-suspenders; FF also hides inline) */
.fluentform .akismet-fields-container { display: none !important; }

/* =========================================================================
   FAQ accordion — EKG house baseline (fleet-wide)    v0.1.6 · 2026-08-06
   Pattern: patterns/faq-section.php
   Ref: Development/EKG-Site-Architecture-Standard.md
   -------------------------------------------------------------------------
   Skins NATIVE core/details blocks. Native is not a style preference here: the
   `ekg-seo` FAQPage scanner reads core/details specifically, so a custom block
   or hand-rolled markup would render the same and be invisible to answer
   engines. Keeping the house look on the core block is what lets the two stay
   in step — and what keeps the next editor able to add a question in the
   editor rather than in a file.

   Same token discipline as the form baseline above: theme.json slugs with safe
   fallbacks, no hardcoded brand colors. A child restyles by overriding the
   --ekg-faq-* vars in ONE place, never by rewriting these rules.

   Details/summary is natively keyboard-operable and screen-reader-announced,
   and its content stays in the DOM while collapsed — which is both why it is
   accessible and why the collapsed answers still count for schema.
   ========================================================================= */

.ekg-faq {
  --ekg-faq-text:      var(--wp--preset--color--ink,   #1a1f29);
  --ekg-faq-muted:     var(--wp--preset--color--sub,   #6b7280);
  --ekg-faq-line:      var(--wp--preset--color--line,  rgba(0,0,0,.12));
  --ekg-faq-accent:    var(--wp--preset--color--accent,#2f77b0);
  --ekg-faq-q-font:    var(--wp--preset--font-family--head, inherit);
  --ekg-faq-q-size:    1.0625rem;
  --ekg-faq-q-weight:  600;
  --ekg-faq-gap:       var(--wp--preset--spacing--50, 24px);
  --ekg-faq-pad:       18px;
}

.ekg-faq-head { margin-bottom: var(--ekg-faq-gap); }
.ekg-faq-intro { color: var(--ekg-faq-muted); margin: .5em 0 0; }

/* the stack — hairline between questions, none above the first */
.ekg-faq-list > .wp-block-details { border-top: 1px solid var(--ekg-faq-line); }
.ekg-faq-list > .wp-block-details:first-child { border-top: 0; }
.ekg-faq-list > .wp-block-details:last-child { border-bottom: 1px solid var(--ekg-faq-line); }

.ekg-faq .wp-block-details { margin: 0; }

/* the question */
.ekg-faq summary {
  display: flex; align-items: flex-start; gap: 14px;
  padding: var(--ekg-faq-pad) 0;
  cursor: pointer; list-style: none;
  font-family: var(--ekg-faq-q-font);
  font-size: var(--ekg-faq-q-size);
  font-weight: var(--ekg-faq-q-weight);
  line-height: 1.45; color: var(--ekg-faq-text);
}
.ekg-faq summary::-webkit-details-marker { display: none; }   /* Safari's default triangle */
.ekg-faq summary::marker { content: ""; }
.ekg-faq summary:hover { color: var(--ekg-faq-accent); }
.ekg-faq summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ekg-faq-accent) 30%, transparent);
  border-radius: 4px;
}

/* The +/− marker, drawn as two crossed gradient bars so it needs no icon font,
   no SVG, and no extra markup. Open state drops the vertical bar → minus.
   Deliberately not animated: the two states differ in background-layer COUNT,
   which CSS cannot interpolate, so a transition here buys nothing (and the
   180° rotation it used to pair with was a no-op on a horizontal bar). */
.ekg-faq summary::after {
  content: ""; flex: 0 0 auto; order: 2; margin-left: auto;
  width: 13px; height: 13px; margin-top: .34em;
  background:
    linear-gradient(var(--ekg-faq-muted), var(--ekg-faq-muted)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--ekg-faq-muted), var(--ekg-faq-muted)) center / 1.5px 13px no-repeat;
}
.ekg-faq details[open] > summary::after {
  background:
    linear-gradient(var(--ekg-faq-accent), var(--ekg-faq-accent)) center / 13px 1.5px no-repeat;
}

/* the answer */
.ekg-faq details > *:not(summary) { margin-top: 0; }
.ekg-faq details > p,
.ekg-faq details > ul,
.ekg-faq details > ol {
  margin: 0 0 var(--ekg-faq-pad);
  padding-right: 27px;                 /* clear the marker column */
  color: var(--ekg-faq-text); line-height: 1.65;
}
.ekg-faq details > *:last-child { margin-bottom: var(--ekg-faq-pad); }