/* Foundations Marketing Hub - widget styles.
   Everything is scoped under .fmh-root so nothing leaks into the theme.
   The accent color is set per client via a CSS variable injected by JS
   from the Hub's branding config, defaulting to Wires R Us red.

   Host themes and page builders (Elementor especially) ship their own
   global button/link resets - default text colors, visited-link colors,
   hover states - that can and do override an unscoped plugin stylesheet.
   Every interactive element below explicitly declares color/background in
   every pseudo-class state (including :visited, since our CTA buttons are
   sometimes <a> tags) with !important, specifically to survive that. This
   is deliberate hardening, not defensive-coding-for-its-own-sake. */

.fmh-root {
    --fmh-accent: #E01726;
    --fmh-accent-dark: #B01220;
    --fmh-ink: #1d1d1f;
    --fmh-muted: #5f6368;
    --fmh-line: #e3e3e6;
    --fmh-bg: #ffffff;
    --fmh-bg-soft: #f7f7f8;
    font-family: inherit;
    color: var(--fmh-ink);
    line-height: 1.55;
    max-width: 860px;
    margin: 0 auto;
    box-sizing: border-box;
}
.fmh-root *, .fmh-root *::before, .fmh-root *::after { box-sizing: inherit; }

/* Baseline reset for every link/button inside the widget, so a theme's
   global `a`, `a:visited`, `button` rules never get a chance to apply
   before our own component classes below (which still win on specifics
   like color/background thanks to matching !important). */
.fmh-root a,
.fmh-root button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    box-shadow: none;
}

.fmh-loading { color: var(--fmh-muted); padding: 24px 0; }

.fmh-card {
    background: var(--fmh-bg);
    border: 1px solid var(--fmh-line);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.fmh-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fmh-accent) !important;
    margin-bottom: 8px;
}

.fmh-title { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--fmh-ink) !important; }
.fmh-text { font-size: 16px; color: var(--fmh-muted) !important; margin: 0 0 20px; }

/* Category picker: a grid of icon cards instead of a stacked list. */
.fmh-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.fmh-choice,
.fmh-choice:link,
.fmh-choice:visited {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: left;
    background: var(--fmh-bg-soft) !important;
    border: 1px solid var(--fmh-line);
    border-radius: 10px;
    padding: 16px;
    font-size: 16px;
    color: var(--fmh-ink) !important;
    cursor: pointer;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.fmh-choice:hover,
.fmh-choice:focus-visible,
.fmh-choice:active {
    border-color: var(--fmh-accent);
    background: #fff !important;
    color: var(--fmh-ink) !important;
    outline: 2px solid transparent;
}
.fmh-choice:focus-visible { box-shadow: 0 0 0 2px var(--fmh-accent); }
.fmh-choice-icon { color: var(--fmh-ink) !important; line-height: 1; flex-shrink: 0; }
.fmh-choice-icon svg { display: block; width: 28px; height: 28px; }
.fmh-choice-label {
    font-size: 16px;
    color: var(--fmh-ink) !important;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.fmh-outcome-emergency { border-left: 5px solid var(--fmh-accent); }
.fmh-outcome-call { border-left: 5px solid #e8a013; }
.fmh-outcome-diy { border-left: 5px solid #2c8a4b; }

.fmh-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.fmh-badge-emergency { background: #fdeaec !important; color: var(--fmh-accent-dark) !important; }
.fmh-badge-call { background: #fdf3df !important; color: #8a5c00 !important; }
.fmh-badge-diy { background: #e7f4ec !important; color: #1e6136 !important; }

/* Step-by-step outcome instructions: numbered sections divided by light
   grey rules, with the number in the client's accent color. */
.fmh-steps { margin: 4px 0 20px; }
.fmh-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #e5e7eb;
}
.fmh-step:first-child { border-top: 0; }
.fmh-step-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fmh-accent) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}
.fmh-step-body { min-width: 0; }
.fmh-step-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fmh-accent) !important;
    margin-bottom: 2px;
}
.fmh-step-text {
    color: var(--fmh-ink) !important;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Compact safety check shown above a category's first real question, so the
   safety gate and the opening question share one screen. */
.fmh-safety-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    background: #fdeaec !important;
    border: 1px solid #f5c2c7;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 18px;
}
.fmh-safety-banner-text {
    flex: 1 1 260px;
    min-width: 0;
    color: var(--fmh-ink) !important;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
}
.fmh-safety-banner-text strong { color: var(--fmh-accent-dark) !important; }
button.fmh-safety-yes,
button.fmh-safety-yes:hover,
button.fmh-safety-yes:focus,
button.fmh-safety-yes:active {
    flex-shrink: 0;
    background: var(--fmh-accent) !important;
    color: #fff !important;
    border: 0;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none !important;
}
button.fmh-safety-yes:hover { background: var(--fmh-accent-dark) !important; }
button.fmh-safety-yes:focus-visible { box-shadow: 0 0 0 2px var(--fmh-accent-dark); }

.fmh-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Content Requests: passcode-gated Q&A list for the client's expert. */
.fmh-cr-group {
    margin: 26px 0 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fmh-muted) !important;
}
.fmh-cr-item { margin-top: 14px; }
.fmh-cr-question {
    font-size: 18px;
    font-weight: 700;
    color: var(--fmh-ink) !important;
    margin: 4px 0 6px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.fmh-cr-context {
    font-size: 14px;
    line-height: 1.5;
    color: var(--fmh-muted) !important;
    margin-bottom: 10px;
}
.fmh-cr-status {
    align-self: center;
    font-size: 14px;
    color: var(--fmh-muted) !important;
}

.fmh-btn,
.fmh-btn:link,
.fmh-btn:visited {
    display: inline-block;
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.fmh-btn-primary,
.fmh-btn-primary:link,
.fmh-btn-primary:visited {
    background: var(--fmh-accent) !important;
    color: #fff !important;
}
.fmh-btn-primary:hover,
.fmh-btn-primary:focus-visible,
.fmh-btn-primary:active {
    background: var(--fmh-accent-dark) !important;
    color: #fff !important;
}
.fmh-btn-ghost,
.fmh-btn-ghost:link,
.fmh-btn-ghost:visited {
    background: transparent !important;
    color: var(--fmh-ink) !important;
    border: 1px solid var(--fmh-line);
}
.fmh-btn-ghost:hover,
.fmh-btn-ghost:focus-visible,
.fmh-btn-ghost:active {
    border-color: var(--fmh-ink);
    color: var(--fmh-ink) !important;
}

.fmh-back,
.fmh-back:link,
.fmh-back:visited {
    background: none; border: none; padding: 0; margin: 0 0 16px;
    color: var(--fmh-muted) !important; font-size: 14px; cursor: pointer;
}
.fmh-back:hover,
.fmh-back:focus-visible,
.fmh-back:active { color: var(--fmh-ink) !important; }

.fmh-progress { font-size: 13px; color: var(--fmh-muted) !important; margin-bottom: 16px; }

/* FAQ */
.fmh-faq-item { border-bottom: 1px solid var(--fmh-line); }
.fmh-faq-q {
    width: 100%; text-align: left; background: none; border: none;
    padding: 16px 4px; font-size: 17px; font-weight: 600;
    color: var(--fmh-ink) !important; cursor: pointer; display: flex;
    justify-content: space-between; align-items: center; gap: 12px;
}
.fmh-faq-q:hover, .fmh-faq-q:focus-visible, .fmh-faq-q:active { color: var(--fmh-ink) !important; }
.fmh-faq-q .fmh-faq-arrow { transition: transform 0.15s ease; color: var(--fmh-accent) !important; flex-shrink: 0; }
.fmh-faq-item.fmh-open .fmh-faq-arrow { transform: rotate(90deg); }
.fmh-faq-a { display: none; padding: 0 4px 18px; color: var(--fmh-muted) !important; font-size: 16px; }
.fmh-faq-item.fmh-open .fmh-faq-a { display: block; }

/* Hub */
.fmh-field { margin-bottom: 16px; }
.fmh-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--fmh-ink) !important; }
.fmh-input, .fmh-textarea {
    width: 100%; border: 1px solid var(--fmh-line); border-radius: 8px;
    padding: 11px 13px; font-size: 16px; font-family: inherit; background: #fff !important;
    color: var(--fmh-ink) !important;
    box-sizing: border-box;
}
.fmh-input:focus, .fmh-textarea:focus { border-color: var(--fmh-accent); outline: none; }
.fmh-textarea { min-height: 100px; resize: vertical; }

.fmh-queue-item {
    border: 1px solid var(--fmh-line); border-radius: 10px;
    padding: 16px; margin-bottom: 14px; background: var(--fmh-bg-soft);
}
.fmh-queue-meta { font-size: 13px; color: var(--fmh-muted) !important; margin-bottom: 8px; }
.fmh-notice { padding: 12px 16px; border-radius: 8px; margin: 12px 0; font-size: 15px; }
.fmh-notice-ok { background: #e7f4ec !important; color: #1e6136 !important; }
.fmh-notice-err { background: #fdeaec !important; color: var(--fmh-accent-dark) !important; }

/* Hub tabs */
.fmh-tab-bar { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--fmh-line); }
.fmh-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 10px 16px; font-size: 15px; font-weight: 600;
    color: var(--fmh-muted) !important; cursor: pointer;
}
.fmh-tab:hover, .fmh-tab:focus-visible, .fmh-tab:active { color: var(--fmh-ink) !important; }
.fmh-tab.active { color: var(--fmh-accent) !important; border-bottom-color: var(--fmh-accent); }

/* Diagnostic tree builder */
.fmh-node-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
    border: 1px solid var(--fmh-line); border-radius: 10px;
    padding: 14px; margin-bottom: 12px; background: var(--fmh-bg-soft);
}
.fmh-node-row > .fmh-input,
.fmh-node-row > .fmh-textarea,
.fmh-node-row > select.fmh-input { flex: 1 1 160px; width: auto; }
.fmh-option-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 8px 0; padding-left: 8px; border-left: 2px solid var(--fmh-line);
}
.fmh-option-row > .fmh-input { flex: 1 1 140px; width: auto; }
.fmh-checkbox-gate { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.fmh-checkbox-gate input { margin-top: 4px; }

/* Recent Projects (server-rendered) */
.fmh-projects-grid {
    max-width: 1100px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px;
}
.fmh-project-card {
    border: 1px solid var(--fmh-line); border-radius: 12px; overflow: hidden;
    background: var(--fmh-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.fmh-project-card-photo { display: block; }
.fmh-project-card-photo img { display: block; width: 100%; height: auto; }
.fmh-project-card-body { padding: 18px; }
.fmh-project-card-category {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--fmh-accent) !important; margin-bottom: 6px;
}
.fmh-project-card-title { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.fmh-project-card-title a,
.fmh-project-card-title a:link,
.fmh-project-card-title a:visited { color: var(--fmh-ink) !important; text-decoration: none; }
.fmh-project-card-title a:hover,
.fmh-project-card-title a:focus-visible { color: var(--fmh-accent) !important; }
.fmh-project-card-meta { font-size: 13px; color: var(--fmh-muted) !important; margin-bottom: 10px; }
.fmh-project-card-excerpt { font-size: 15px; color: var(--fmh-muted) !important; }

/* Photo Gallery (server-rendered) */
.fmh-photo-wall {
    max-width: 1100px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}
.fmh-photo-wall a { display: block; border-radius: 8px; overflow: hidden; line-height: 0; }
.fmh-photo-wall img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }

@media (max-width: 480px) {
    .fmh-card { padding: 20px 16px; }
    .fmh-title { font-size: 20px; }
    .fmh-cta-row { flex-direction: column; }
    .fmh-btn { width: 100%; box-sizing: border-box; }
    .fmh-choices { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .fmh-choice, .fmh-faq-q .fmh-faq-arrow { transition: none; }
}