/*
 * EnergyFix AI — public design system: "Liquid Glass".
 *
 * Direction: the audience is still mid-problem (a flickering light, a
 * tripped breaker, a dead car battery), often on a phone, often in a
 * hurry — that hasn't changed. What's changed is the material: instead
 * of a flat field-manual page, the whole site now reads as a workshop
 * glass counter with live current glowing beneath it. A fixed, slowly
 * drifting field of amber/copper/teal glow sits behind everything
 * (.energyfix::before); every panel — cards, the quick-answer box, the
 * step list — is frosted glass floating above it, blurred and saturated
 * so that glow visibly diffuses through. It's "liquid glass" applied to
 * an energy brand rather than borrowed wholesale from anywhere else:
 * the thing behind the glass is meant to read as electricity, not just
 * a pretty gradient.
 *
 * Signature element: unchanged from before, and deliberately so — the
 * breaker-switch step number (.ef-step__num) already encoded "electricity
 * flowing through a physical switch," which is the same idea the new
 * glow backdrop is expressing at a bigger scale. It gets an inset amber
 * glow to match the new material rather than being replaced by a
 * separate, competing signature.
 *
 * Text-contrast note: every "loose" page-level text element (page
 * titles, breadcrumbs, section headings that sit directly on the glow
 * backdrop rather than inside a card) uses the *-on-glow color tokens
 * below, which are deliberately brighter/lighter than their in-panel
 * counterparts. Every glass panel explicitly re-asserts `color:
 * var(--ef-ink)` for its own contents rather than relying on
 * inheritance, specifically so this doesn't turn into a fragile
 * "remember which background you're on" bug hunt later.
 *
 * Everything is scoped under .energyfix so it survives being dropped
 * into an arbitrary theme via the [energyfix] shortcode or a virtual
 * page — see .energyfix's `isolation: isolate` below, which keeps the
 * glow backdrop's negative z-index safely contained rather than
 * bleeding into the surrounding theme's own stacking context.
 */

.energyfix {
    /* ---- surface tokens (unchanged from the original palette — this
       is what text and accents look like *inside* a glass panel) ---- */
    --ef-paper:       #EFEFE8;
    --ef-panel:       #FFFFFF;
    --ef-panel-dark:  #14181D;
    --ef-ink:         #171B21;
    --ef-ink-2:       #565C6E;
    --ef-line:        #DCDACD;
    --ef-amber:       #E2992F;
    --ef-amber-soft:  #FBEBD2;
    --ef-copper:      #A6512F;
    --ef-green:       #2E8B57;
    --ef-green-soft:  #E4F2EA;
    --ef-blue:        #35588A;
    --ef-blue-soft:   #E6ECF4;
    --ef-danger:      #B23A2E;
    --ef-danger-soft: #F7E2DE;

    /* ---- glow backdrop tokens — the "liquid" half of liquid glass ---- */
    --ef-glow-void:   #150D06;
    --ef-glow-amber:  #FF9D2E;
    --ef-glow-copper: #E8663A;
    --ef-glow-teal:   #22B8AE;

    /* ---- text on the glow backdrop directly (not inside a panel) ---- */
    --ef-ink-on-glow:    #F7F3EA;
    --ef-ink-2-on-glow:  #C9BFAE;
    --ef-amber-on-glow:  #FFB454;
    --ef-copper-on-glow: #F0916A;

    /* ---- glass material tokens ---- */
    --ef-glass-panel:      rgba(255,252,247,0.82);
    --ef-glass-panel-deep: rgba(20,13,7,0.62);
    --ef-glass-border:     rgba(255,255,255,0.55);
    --ef-glass-border-deep:rgba(255,255,255,0.14);
    --ef-glass-blur:       22px;
    --ef-glass-blur-sm:    13px;
    --ef-glass-shadow:
        0 1px 0 rgba(255,255,255,0.65) inset,
        0 -1px 0 rgba(21,13,6,0.06) inset,
        0 14px 40px rgba(21,13,6,0.35),
        0 2px 10px rgba(21,13,6,0.16);
    --ef-glass-shadow-sm:
        0 1px 0 rgba(255,255,255,0.55) inset,
        0 8px 22px rgba(21,13,6,0.28),
        0 1px 4px rgba(21,13,6,0.14);
    --ef-glass-shadow-deep:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 14px 40px rgba(0,0,0,0.45);

    --ef-radius:      22px;
    --ef-radius-sm:   16px;
    --ef-radius-pill: 999px;
    --ef-shadow:      var(--ef-glass-shadow); /* kept for any external reference to the old token name */

    --ef-font-display: 'Space Grotesk', system-ui, sans-serif;
    --ef-font-body:    'IBM Plex Sans', system-ui, sans-serif;
    --ef-font-mono:    'IBM Plex Mono', 'SF Mono', Consolas, monospace;

    position: relative;
    isolation: isolate;
    font-family: var(--ef-font-body);
    color: var(--ef-ink-on-glow);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* The glow field itself — fixed to the viewport (not the element's own
   box) so it reads as a consistent "window onto live current" regardless
   of how tall the page's actual content is; see file header. */
.energyfix::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--ef-glow-void);
    background-image:
        radial-gradient(ellipse 820px 620px at 12% -8%,  rgba(255,157,46,0.38), transparent 60%),
        radial-gradient(ellipse 720px 720px at 108% 18%, rgba(232,102,58,0.30), transparent 60%),
        radial-gradient(ellipse 640px 560px at 46% 118%, rgba(34,184,174,0.16), transparent 58%);
    background-attachment: fixed, fixed, fixed;
    background-repeat: no-repeat;
    animation: ef-glow-drift 22s ease-in-out infinite alternate;
}
@keyframes ef-glow-drift {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
    100% { background-position: 4% 6%, 96% 10%, 54% 92%; }
}
@media (prefers-reduced-motion: reduce) {
    .energyfix::before { animation: none; }
}
/* Older browsers without backdrop-filter support get a solid, fully
   opaque glow void instead of a half-transparent one sitting under
   panels that also won't be blurred — see the @supports fallback below
   for the panel side of this pairing. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .energyfix::before { opacity: 1; }
}

.energyfix, .energyfix *, .energyfix *::before, .energyfix *::after { box-sizing: border-box; }
.energyfix a { color: var(--ef-copper-on-glow); text-decoration: none; }
.energyfix a:hover { text-decoration: underline; }
.energyfix a:focus-visible,
.energyfix button:focus-visible,
.energyfix input:focus-visible,
.energyfix summary:focus-visible { outline: 2px solid var(--ef-amber-on-glow); outline-offset: 2px; border-radius: 3px; }
.energyfix ul { list-style: none; margin: 0; padding: 0; }
.energyfix p { margin: 0 0 1em; }
.energyfix h1, .energyfix h2, .energyfix h3 { font-family: var(--ef-font-display); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; color: inherit; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}

.ef-wrap { max-width: 960px; margin: 0 auto; padding: 20px 16px 64px; background: transparent; }

.ef-kicker {
    font-family: var(--ef-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: var(--ef-ink-2-on-glow);
}
.ef-kicker--amber  { color: var(--ef-amber-on-glow); }
.ef-kicker--danger { color: var(--ef-copper-on-glow); }
.ef-kicker--inline { display: inline-block; margin: 0 8px 0 0; color: var(--ef-copper-on-glow); }
/* Inside a light glass panel a kicker needs the in-panel tone instead —
   every such panel sets this scoped override once, near its own rules,
   rather than fighting specificity against the loose-text default above. */

/* ---------------------------------------------------------------- *
 * Buttons, chips, badges — all glass pills, so they stay legible
 * regardless of whether they land on the glow backdrop or inside a
 * panel, without needing separate loose/in-panel variants.
 * ------------------------------------------------------------- */

.ef-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ef-font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: var(--ef-radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ef-btn--amber {
    background: linear-gradient(180deg, #FFB454, var(--ef-glow-amber));
    color: #2B1701;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 18px rgba(255,157,46,0.35);
}
.ef-btn--amber:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 10px 26px rgba(255,157,46,0.45); }
.ef-btn--copper {
    background: linear-gradient(180deg, #F0916A, var(--ef-glow-copper));
    color: #2B1000;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 6px 18px rgba(232,102,58,0.32);
}
.ef-btn--copper:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 10px 26px rgba(232,102,58,0.42); }
.ef-btn--ghost {
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    color: var(--ef-ink);
    box-shadow: var(--ef-glass-shadow-sm);
}
.ef-btn--ghost:hover { color: var(--ef-copper); text-decoration: none; box-shadow: var(--ef-glass-shadow); }

.ef-pagenav {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.ef-btn--nav {
    padding: 8px 16px;
    font-size: 13px;
}
.ef-btn--nav span { font-size: 15px; line-height: 1; }

.ef-chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 4px 0 14px; -webkit-overflow-scrolling: touch; }
.ef-chips--difficulty { flex-wrap: wrap; overflow-x: visible; }
.ef-chip {
    flex: 0 0 auto;
    font-family: var(--ef-font-mono);
    font-size: 12px;
    font-weight: 500;
    padding: 7px 13px;
    border-radius: var(--ef-radius-pill);
    border: 1px solid var(--ef-glass-border);
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    box-shadow: var(--ef-glass-shadow-sm);
    color: var(--ef-ink-2);
    white-space: nowrap;
}
.ef-chip:hover { border-color: var(--ef-copper); color: var(--ef-copper); text-decoration: none; }
.ef-chip.is-active { background: linear-gradient(180deg, #2A2118, var(--ef-panel-dark)); border-color: var(--ef-glow-amber); color: var(--ef-glow-amber); }
.ef-chip__count { opacity: 0.65; margin-left: 3px; }

.ef-badge {
    display: inline-block;
    font-family: var(--ef-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: var(--ef-radius-pill);
}
.ef-badge--easy       { background: var(--ef-green-soft); color: var(--ef-green); }
.ef-badge--moderate   { background: var(--ef-blue-soft);  color: var(--ef-blue); }
.ef-badge--call-a-pro { background: var(--ef-danger-soft); color: var(--ef-danger); }

/* ---------------------------------------------------------------- *
 * Hero — "Problem of the Day"
 * ------------------------------------------------------------- */

.ef-hero {
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.6);
    border: 1px solid var(--ef-glass-border);
    border-left: 6px solid var(--ef-glow-amber);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-glass-shadow);
    padding: 22px 20px;
    margin-bottom: 24px;
    color: var(--ef-ink);
}
.ef-hero__title { font-size: 22px; margin-bottom: 10px; }
.ef-hero__title a { color: var(--ef-ink); }
.ef-hero__title a:hover { color: var(--ef-copper); }
.ef-hero__excerpt { color: var(--ef-ink-2); }

/* ---------------------------------------------------------------- *
 * Search
 * ------------------------------------------------------------- */

.ef-search { display: flex; gap: 8px; margin: 0 0 14px; }
.ef-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ef-font-body);
    font-size: 15px;
    padding: 12px 16px;
    border: 1px solid var(--ef-glass-border);
    border-radius: var(--ef-radius-pill);
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    box-shadow: var(--ef-glass-shadow-sm);
    color: var(--ef-ink);
}
.ef-search input[type="search"]::placeholder { color: var(--ef-ink-2); }
.ef-search input[type="search"]:focus-visible { outline: 2px solid var(--ef-copper); outline-offset: 1px; }

/* ---------------------------------------------------------------- *
 * Fix Finder wizard — already the site's one "dark panel"; kept dark
 * but now genuinely translucent, so the glow shows through it directly
 * rather than sitting behind an opaque twin of the same color.
 * ------------------------------------------------------------- */

.ef-finder {
    background: var(--ef-glass-panel-deep);
    backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.3);
    border: 1px solid var(--ef-glass-border-deep);
    color: #F0EFE9;
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-glass-shadow-deep);
    padding: 20px;
    margin: 8px 0 24px;
}
.ef-finder .ef-kicker { color: var(--ef-glow-amber); }
.ef-finder .ef-finder__title { color: #fff; font-size: 19px; margin-bottom: 14px; }
.ef-finder__section + .ef-finder__section { margin-top: 20px; }
.ef-finder__section-label {
    font-family: var(--ef-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(240, 239, 233, 0.55);
    margin: 0 0 8px;
}
.ef-finder__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ef-finder__tile {
    display: block;
    font-family: var(--ef-font-body);
    font-weight: 500;
    font-size: 13px;
    color: #F0EFE9;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--ef-radius-sm);
    padding: 12px 10px;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ef-finder__tile:hover,
.ef-finder__tile.is-active {
    background: linear-gradient(180deg, #FFB454, var(--ef-glow-amber));
    color: #241503;
    border-color: var(--ef-glow-amber);
    text-decoration: none;
}
.ef-finder__back {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--ef-font-mono);
    font-size: 12px;
    color: var(--ef-glow-amber);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.ef-help { color: #C7C4B8; font-size: 13px; }

/* ---------------------------------------------------------------- *
 * Results grid / cards
 * ------------------------------------------------------------- */

.ef-results__count { font-family: var(--ef-font-mono); font-size: 12px; color: var(--ef-ink-2-on-glow); margin-bottom: 12px; }
.ef-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ef-grid--compact { gap: 10px; }

.ef-card {
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-glass-shadow-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--ef-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ef-card:hover { transform: translateY(-2px); box-shadow: var(--ef-glass-shadow); }
.ef-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ef-card__cat {
    font-family: var(--ef-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ef-ink-2);
}
.ef-card__cat:hover { color: var(--ef-copper); }
.ef-card__title { font-size: 17px; margin: 0; }
.ef-card__title a { color: var(--ef-ink); }
.ef-card__title a:hover { color: var(--ef-copper); }
.ef-card__excerpt { color: var(--ef-ink-2); font-size: 14px; margin: 0; }
.ef-card__link { font-family: var(--ef-font-mono); font-size: 12px; font-weight: 600; margin-top: auto; color: var(--ef-copper); }
.ef-card--compact { padding: 12px; }
.ef-card--compact .ef-card__title { font-size: 15px; }

.ef-empty { color: var(--ef-ink-2-on-glow); padding: 24px 0; }

.ef-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.ef-pagination__pos { font-family: var(--ef-font-mono); font-size: 12px; color: var(--ef-ink-2-on-glow); }

.ef-noscript-index { color: var(--ef-ink-on-glow); }
.ef-noscript-index h2 { margin-top: 24px; }
.ef-noscript-index h3 { font-size: 15px; margin-top: 18px; color: var(--ef-amber-on-glow); }
.ef-noscript-index li { padding: 3px 0; }
.ef-noscript-index a { color: var(--ef-copper-on-glow); }

/* ---------------------------------------------------------------- *
 * Breadcrumb — each crumb its own small glass pill (the same visual
 * language as .ef-chip) rather than plain text links strung together
 * with slashes; the current page gets a distinct amber-tinted "you are
 * here" pill instead of just a color change, so it reads as a state,
 * not just quieter text.
 * ------------------------------------------------------------- */

.ef-breadcrumb {
    font-family: var(--ef-font-mono);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
}
.ef-breadcrumb a {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: var(--ef-radius-pill);
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    box-shadow: var(--ef-glass-shadow-sm);
    color: var(--ef-ink-2);
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.ef-breadcrumb a:hover {
    color: var(--ef-copper);
    transform: translateY(-1px);
    box-shadow: var(--ef-glass-shadow);
}
.ef-breadcrumb [aria-current] {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: var(--ef-radius-pill);
    background: linear-gradient(180deg, rgba(255,180,84,0.22), rgba(255,157,46,0.10));
    border: 1px solid rgba(255,157,46,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
    color: var(--ef-ink-on-glow);
    font-weight: 500;
    max-width: 100%;
}
.ef-breadcrumb__sep {
    color: var(--ef-ink-2-on-glow);
    opacity: 0.55;
    font-size: 13px;
    user-select: none;
}
@media (max-width: 480px) {
    /* The final crumb can be a full fix question — plenty of room to wrap
       across two lines on a tablet/desktop pill, but on a narrow phone
       screen that starts to look like a broken pill rather than a
       deliberate shape, so it truncates instead; the full text is still
       available via the pill's title attribute (see single-fix.php /
       category.php) and, more importantly, as the page's own <h1> right
       below the breadcrumb — this is wayfinding, not the only copy of it. */
    .ef-breadcrumb [aria-current] {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------- *
 * Single fix
 * ------------------------------------------------------------- */

.ef-single__head { margin-bottom: 18px; position: relative; }
.ef-single__title { font-size: 28px; margin-top: 8px; color: var(--ef-ink-on-glow); letter-spacing: -0.01em; }

.ef-print-btn {
    display: inline-block;
    margin: 0 0 12px;
    font-family: var(--ef-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    box-shadow: var(--ef-glass-shadow-sm);
    border-radius: var(--ef-radius-pill);
    padding: 8px 14px;
    cursor: pointer;
    color: var(--ef-ink-2);
}
.ef-print-btn:hover { color: var(--ef-copper); }

.ef-quickanswer {
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.6);
    border: 1px solid var(--ef-glass-border);
    border-left: 6px solid var(--ef-glow-amber);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-glass-shadow);
    padding: 20px 22px;
    margin: 0 0 20px;
    color: var(--ef-ink);
}
.ef-quickanswer .ef-kicker { color: var(--ef-copper); }
.ef-quickanswer__text { font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--ef-ink); margin: 0; }

.ef-infostrip {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 16px 18px;
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.5);
    border: 1px solid var(--ef-glass-border);
    border-radius: var(--ef-radius-sm);
    box-shadow: var(--ef-glass-shadow-sm);
    margin: 0 0 20px;
    color: var(--ef-ink);
}
.ef-infostrip li { display: flex; flex-direction: column; gap: 3px; margin: 0 18px 8px 0; }
.ef-infostrip li:last-child { margin-right: 0; }
.ef-infostrip__label {
    font-family: var(--ef-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ef-ink-2);
}
.ef-infostrip__value { font-size: 14px; font-weight: 500; }

.ef-safety {
    background: rgba(247,226,222,0.88);
    backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.4);
    border: 1px solid rgba(178,58,46,0.3);
    border-left: 6px solid var(--ef-danger);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-glass-shadow-sm);
    padding: 16px 18px;
    margin: 0 0 24px;
    color: var(--ef-ink);
}
.ef-safety p:last-child { margin-bottom: 0; color: #5c2119; }

.ef-steps { margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; }
.ef-step { display: flex; gap: 14px; align-items: flex-start; }
.ef-step__num {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #23282f, var(--ef-panel-dark));
    color: var(--ef-glow-amber);
    font-family: var(--ef-font-mono);
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--ef-radius-sm);
    position: relative;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 0 1px rgba(255,157,46,0.18),
        0 2px 10px rgba(255,157,46,0.22);
}
/* the small nub at the top of the tile suggests a breaker switch, matching
   the site's utility-panel identity — now with a matching amber glow so it
   reads as the same "current flowing through glass" idea as the backdrop */
.ef-step__num::after {
    content: "";
    position: absolute;
    top: 4px; left: 50%;
    width: 12px; height: 3px;
    margin-left: -6px;
    background: var(--ef-glow-amber);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255,157,46,0.85);
}
.ef-step__body { flex: 1 1 auto; padding-top: 2px; color: var(--ef-ink-on-glow); }
.ef-step__title { font-size: 16px; margin: 0 0 4px; }
.ef-step__text { margin: 0 0 4px; color: var(--ef-ink-2-on-glow); }
.ef-step__tip { font-size: 13px; color: var(--ef-copper-on-glow); font-style: italic; margin: 0; }

.ef-faq { margin: 0 0 28px; }
.ef-faq__heading { font-size: 20px; margin-bottom: 12px; color: var(--ef-ink-on-glow); }
.ef-faq__item {
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    border-radius: var(--ef-radius-sm);
    box-shadow: var(--ef-glass-shadow-sm);
    padding: 14px 16px;
    margin-bottom: 8px;
    color: var(--ef-ink);
}
.ef-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: baseline;
}
.ef-faq__item summary::-webkit-details-marker { display: none; }
.ef-faq__item summary::after { content: "+"; margin-left: auto; color: var(--ef-ink-2); font-family: var(--ef-font-mono); }
.ef-faq__item[open] summary::after { content: "\2212"; color: var(--ef-copper); }
.ef-faq__item p { margin: 10px 0 0; color: var(--ef-ink-2); }

/* ---------------------------------------------------------------- *
 * Community Feedback — "did this fix work for you?"
 * ------------------------------------------------------------- */

.ef-feedback {
    margin: 0 0 28px;
    padding: 20px 22px;
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-glass-shadow-sm);
    color: var(--ef-ink);
}
.ef-feedback__heading { font-size: 18px; margin-bottom: 10px; }
.ef-feedback__flash {
    padding: 10px 14px;
    border-radius: var(--ef-radius-sm);
    font-size: 14px;
    margin: 0 0 14px;
}
.ef-feedback__flash--success { background: rgba(166,81,47,0.12); color: var(--ef-copper); }
.ef-feedback__flash--error   { background: var(--ef-danger-soft); color: var(--ef-danger); }
.ef-feedback__stat { font-size: 14px; color: var(--ef-ink-2); margin: 0 0 14px; }
.ef-feedback__stat strong { color: var(--ef-ink); font-size: 16px; }

.ef-feedback__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ef-feedback__ratings { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.ef-feedback__details { display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.ef-feedback__details input,
.ef-feedback__details textarea {
    font-family: var(--ef-font-body);
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius-sm);
    background: rgba(255,255,255,0.9);
    color: var(--ef-ink);
    resize: vertical;
}
.ef-feedback__details input:focus,
.ef-feedback__details textarea:focus { outline: 2px solid var(--ef-copper); outline-offset: 1px; }

.ef-feedback__note {
    font-size: 13px;
    color: var(--ef-ink-2);
    margin: 10px 0 0;
}

.ef-feedback__list { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ef-line); }
.ef-feedback__list-heading { font-size: 15px; margin-bottom: 12px; }
.ef-testimonial {
    padding: 12px 14px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.7);
    border-radius: var(--ef-radius-sm);
    border-left: 3px solid var(--ef-line);
}
.ef-testimonial--worked     { border-left-color: var(--ef-copper); }
.ef-testimonial--didnt_work { border-left-color: var(--ef-danger); }
.ef-testimonial__text { margin: 0 0 6px; font-size: 14px; font-style: italic; color: var(--ef-ink); }
.ef-testimonial__meta { margin: 0; font-size: 12px; color: var(--ef-ink-2); display: flex; gap: 8px; align-items: center; }
.ef-testimonial__name { font-weight: 600; }
.ef-testimonial__badge {
    padding: 2px 8px;
    border-radius: var(--ef-radius-pill);
    background: var(--ef-line);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- *
 * Community Chat — threaded public comments. Same glass-panel outer
 * shell as .ef-feedback right above it; individual comment bubbles get
 * a lighter, semi-opaque "paper note" treatment rather than their own
 * full glass/blur (nesting backdrop-filter inside an already-blurred
 * parent buys nothing visually and adds real compositing cost on a
 * thread that can run to dozens of replies).
 * ------------------------------------------------------------- */

.ef-comments {
    margin: 0 0 28px;
    padding: 20px 22px;
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-glass-shadow-sm);
    color: var(--ef-ink);
}
.ef-comments__heading { font-size: 18px; margin-bottom: 14px; }
.ef-comments__count { color: var(--ef-ink-2); font-weight: 400; font-size: 14px; }

.ef-comments__flash {
    padding: 10px 14px;
    border-radius: var(--ef-radius-sm);
    font-size: 14px;
    margin: 0 0 14px;
}
.ef-comments__flash--success { background: rgba(166,81,47,0.12); color: var(--ef-copper); }
.ef-comments__flash--error   { background: var(--ef-danger-soft); color: var(--ef-danger); }

.ef-comments__list { margin-bottom: 18px; }
.ef-comments__empty { font-size: 14px; color: var(--ef-ink-2); margin: 0; }

.ef-comment { margin-bottom: 12px; }
.ef-comment__body {
    padding: 12px 14px;
    background: rgba(255,255,255,0.62);
    border-radius: var(--ef-radius-sm);
    border-left: 3px solid var(--ef-line);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.ef-comment__meta { margin: 0 0 4px; font-size: 12px; color: var(--ef-ink-2); display: flex; gap: 8px; align-items: baseline; }
.ef-comment__name { font-weight: 600; color: var(--ef-ink); }
.ef-comment__text { margin: 0 0 6px; font-size: 14px; color: var(--ef-ink); line-height: 1.5; }
.ef-comment__reply {
    font-family: var(--ef-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ef-ink-2);
}
.ef-comment__reply:hover { color: var(--ef-copper); }

.ef-comment__replies { margin-top: 10px; padding-left: 18px; border-left: 2px solid var(--ef-line); }

/* Indentation stops increasing past depth 4 — see comment-thread.php's
   $max_visual_depth — so a long back-and-forth doesn't run out of room. */
.ef-comment--depth-0 .ef-comment__body { border-left-color: var(--ef-copper); }

.ef-comments__reply-note {
    font-size: 13px;
    color: var(--ef-ink-2);
    background: var(--ef-amber-soft);
    padding: 8px 12px;
    border-radius: var(--ef-radius-sm);
    margin-bottom: 10px;
}
.ef-comments__reply-note a { color: var(--ef-copper); }

.ef-comments__form { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.ef-comments__form input[type="text"],
.ef-comments__form textarea {
    font-family: var(--ef-font-body);
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius-sm);
    background: rgba(255,255,255,0.9);
    color: var(--ef-ink);
    resize: vertical;
}
.ef-comments__form input[type="text"]:focus,
.ef-comments__form textarea:focus { outline: 2px solid var(--ef-copper); outline-offset: 1px; }
.ef-comments__form button { align-self: flex-start; }

.ef-comments__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ef-comments__note { font-size: 13px; color: var(--ef-ink-2); margin: 2px 0 0; }

/* ---------------------------------------------------------------- *
 * Community Chat — login gate, username claim, and avatars (0.10.0)
 * ------------------------------------------------------------- */

.ef-comments__gate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed var(--ef-line);
    border-radius: var(--ef-radius-sm);
}
.ef-comments__gate-text { margin: 0; font-size: 14px; color: var(--ef-ink); flex-basis: 100%; }
.ef-comments__gate-register { font-size: 13px; color: var(--ef-ink-2); }
.ef-comments__gate-register:hover { color: var(--ef-copper); }
/* Nextend Social Login renders its own buttons/markup inside this
   container (see single-fix.php) — only lightly constrained so it never
   overflows the card, not deeply styled, since that markup isn't ours. */
.ef-comments__gate :where(.nsl-container) { max-width: 100%; }

.ef-comments__claim { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
.ef-comments__claim label { font-size: 13px; font-weight: 600; color: var(--ef-ink); }
.ef-comments__claim-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ef-comments__claim-row input[type="text"] {
    flex: 1 1 200px;
    font-family: var(--ef-font-body);
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius-sm);
    background: #fff;
    color: var(--ef-ink);
}
.ef-comments__claim-row input[type="text"]:focus { outline: 2px solid var(--ef-copper); outline-offset: 1px; }

.ef-comments__as {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--ef-ink-2);
}
.ef-comments__as a { color: var(--ef-copper); font-weight: 600; }
.ef-comments__as-avatar,
.ef-comment__avatar,
.ef-profile__avatar {
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.ef-comment__name--linked { color: var(--ef-ink); }
.ef-comment__name--linked:hover { color: var(--ef-copper); }

/* ---------------------------------------------------------------- *
 * Community Chat — public profile page (0.10.0)
 * ------------------------------------------------------------- */

.ef-profile__head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding: 20px 22px;
    background: var(--ef-paper);
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius);
}
.ef-profile__avatar { border: 2px solid var(--ef-copper); }
.ef-profile__meta { margin: 4px 0 0; font-size: 14px; color: var(--ef-ink-2); }
.ef-profile__self-note { margin: 8px 0 0; font-size: 13px; color: var(--ef-ink-2); background: var(--ef-amber-soft); display: inline-block; padding: 6px 10px; border-radius: var(--ef-radius-sm); }

.ef-profile__comments .ef-comment__body { border-left-color: var(--ef-copper); }
.ef-profile__comments .ef-comment__meta a { color: var(--ef-copper); }

/* ---------------------------------------------------------------- *
 * Recently viewed ("your history") — see energyfix-public.js.
 * Rendered entirely client-side from localStorage; server-rendered
 * markup starts hidden and JS reveals it only if there's anything to
 * show, so a JS-off visitor (or one with an empty history) never sees
 * an empty shell.
 * ------------------------------------------------------------- */

.ef-recent { margin: 0 0 24px; }
.ef-recent__heading { font-size: 16px; margin-bottom: 10px; color: var(--ef-ink-on-glow); }
.ef-recent__list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.ef-recent__item {
    flex: 0 0 auto;
    max-width: 220px;
    padding: 10px 14px;
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    box-shadow: var(--ef-glass-shadow-sm);
    border-radius: var(--ef-radius-sm);
    font-size: 13px;
    color: var(--ef-ink);
    white-space: normal;
}
.ef-recent__item:hover { color: var(--ef-copper); }
.ef-recent__clear { font-size: 12px; color: var(--ef-ink-2-on-glow); background: none; border: none; padding: 0; margin-top: 6px; cursor: pointer; text-decoration: underline; }

.ef-related__heading { font-size: 18px; margin: 8px 0 12px; color: var(--ef-ink-on-glow); }

/* ---------------------------------------------------------------- *
 * Category page
 * ------------------------------------------------------------- */

.ef-category__intro { color: var(--ef-ink-2-on-glow); }
.ef-back { margin-top: 24px; font-size: 14px; }

/* ---------------------------------------------------------------- *
 * Responsive
 * ------------------------------------------------------------- */

@media (min-width: 640px) {
    .ef-wrap { padding: 32px 24px 72px; }
    .ef-grid { grid-template-columns: repeat(2, 1fr); }
    .ef-grid--compact { grid-template-columns: repeat(3, 1fr); }
    .ef-finder__grid { grid-template-columns: repeat(3, 1fr); }
    .ef-single__title { font-size: 36px; }
    .ef-single__head { padding-right: 150px; }
    .ef-print-btn { position: absolute; top: 0; right: 0; margin: 0; }
}

@media (min-width: 960px) {
    .ef-grid { grid-template-columns: repeat(3, 1fr); }
    .ef-finder__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .energyfix * { transition: none !important; animation: none !important; }
}

/* Browsers without backdrop-filter support (older Firefox/Chromium, some
   in-app webviews) get every glass surface bumped to fully opaque instead
   of translucent — see the matching .energyfix::before rule above. Without
   this, panels would render as a faint, low-contrast wash with nothing
   blurred behind them to justify the transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ef-hero, .ef-quickanswer, .ef-infostrip, .ef-safety, .ef-card,
    .ef-faq__item, .ef-feedback, .ef-comments, .ef-testimonial, .ef-recent__item,
    .ef-print-btn, .ef-btn--ghost, .ef-chip, .ef-breadcrumb a, .ef-search input[type="search"] {
        background: #FFFCF7;
    }
    .ef-finder { background: #14181D; }
}

/* ---------------------------------------------------------------- *
 * Auto-Media — hero image/panel, step photos/diagrams, info-strip
 * icons, card thumbnails. Real photos (MediaManager::picture_html())
 * and generated SVG fallbacks (Icons::hero_panel()/step_diagram())
 * share the same containers so there's never a layout jump when a
 * fix upgrades from a diagram to a real photo.
 * ------------------------------------------------------------- */

.ef-fixhero {
    position: relative;
    aspect-ratio: 16 / 8;
    border-radius: var(--ef-radius);
    overflow: hidden;
    box-shadow: var(--ef-glass-shadow);
    border: 1px solid var(--ef-glass-border-deep);
    margin-bottom: 20px;
    background: var(--ef-panel-dark);
}
.ef-fixhero__img,
.ef-fixhero__panel { display: block; width: 100%; height: 100%; }
.ef-fixhero__img img { width: 100%; height: 100%; object-fit: cover; }
.ef-fixhero__panel svg { display: block; }
.ef-fixhero__credit {
    position: absolute;
    right: 8px;
    bottom: 6px;
    margin: 0;
    font-family: var(--ef-font-mono);
    font-size: 10px;
    color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.4);
    padding: 3px 9px;
    border-radius: var(--ef-radius-pill);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Info-strip icons — grid so the icon can span both the label and
   value rows without disturbing the existing label-above-value stack. */
.ef-infostrip li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
}
.ef-infostrip__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    color: var(--ef-copper);
    flex-shrink: 0;
}
.ef-infostrip__label { grid-column: 2; grid-row: 1; }
.ef-infostrip__value { grid-column: 2; grid-row: 2; }

.ef-kicker__icon { vertical-align: -3px; margin-right: 6px; color: var(--ef-danger); }

/* Step media — small square visual to the left of each step's text.
   Sits between .ef-step__num and .ef-step__body in source order, so no
   change to .ef-step's own flex rule is needed. */
.ef-step__media {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: var(--ef-radius-sm);
    overflow: hidden;
    background: var(--ef-amber-soft);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
}
.ef-step__media img,
.ef-step__media svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.ef-step__diagram-svg { object-fit: contain !important; }

/* Card thumbnails — sits first in .ef-card's flex column so it reads as
   the top of the card without needing to touch .ef-card's own rules. */
.ef-card__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--ef-radius-sm);
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--ef-amber-soft);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
}
.ef-card__thumb img,
.ef-card__thumb svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.ef-card--compact .ef-card__thumb { aspect-ratio: 16 / 7; margin-bottom: 8px; }

@media (max-width: 480px) {
    .ef-step__media { flex-basis: 56px; width: 56px; height: 56px; }
}

/* ---------------------------------------------------------------- *
 * Print — "how to jump-start a battery while standing at the car".
 * Glass/glow effects exist purely for on-screen atmosphere; none of it
 * belongs on a printed page, so this strips every panel back to plain
 * black-on-white regardless of what backdrop-filter/box-shadow it
 * carries on screen.
 * ------------------------------------------------------------- */

@media print {
    .ef-print-btn, .ef-hero, .ef-fixhero, .ef-search, .ef-chips, .ef-finder,
    .ef-related, .ef-pagination, .ef-breadcrumb, .ef-noscript-index, .ef-pagenav,
    .ef-feedback, .ef-comments, .ef-recent { display: none !important; }
    .energyfix { background: #fff; color: #000; }
    .energyfix::before { display: none !important; }
    .ef-wrap { max-width: 100%; padding: 0; }
    .ef-single__title { color: #000; }
    .ef-quickanswer, .ef-safety, .ef-infostrip, .ef-card, .ef-faq__item,
    .ef-testimonial, .ef-recent__item {
        border: 1px solid #000;
        box-shadow: none;
        background: #fff;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .ef-step__num { background: #000 !important; color: #fff !important; box-shadow: none; }
    .ef-step__num::after { box-shadow: none; }
    a { color: #000; text-decoration: underline; }
}