/* ── Simple Mode — accessibility overrides, applied via body.fg-simple-mode ──
   FIXED VERSION — the previous version broke the homepage because it scaled
   the whole page from two blanket, high-impact rules:

     1. `body.fg-simple-mode { font-size: 120% !important; }`
        Bumping font-size on <body> inflates every EM-based measurement
        nested inside it — Elementor sections/columns, icon sizes, gaps and
        paddings that the theme defines in `em` all scale together with the
        text, which is what pushed the homepage hero/grid out of alignment.

     2. `body.fg-simple-mode button, input, select, a.fg-btn { min-height:56px !important; }`
        This targeted EVERY button/input/link on the whole site, including
        Elementor's own nav toggle, icon buttons and hero buttons that were
        never meant to grow — that's what visibly broke the homepage layout.

   This version keeps Simple Mode site-wide (per the client's requirement —
   it's not restricted to specific pages), but only touches actual text
   content (headings, paragraphs, links, list items, labels, form fields)
   using fixed rem values instead of a compounding % increase, and scopes
   the "bigger touch target" treatment to Fed & Good's own controls
   (.fg-btn, .fg-generate-btn, .fg-pill, and the meal planner's own inputs)
   instead of every button/input on the site. Elementor's structural
   containers, icons and widget wrappers are left alone. */

.fg-simple-toggle-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #1D4E35;
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.fg-simple-toggle-btn:hover { border-color: #1D9E75; }
.fg-simple-toggle-btn[aria-pressed="true"] {
    background: #1D9E75;
    color: #fff;
    border-color: #1D9E75;
}

/* ── NEW — Floating wrapper, auto-injected via wp_footer ──────────────────
   Fixed to the bottom-left corner so it doesn't collide with any bottom-right
   chat widget the site may add later. Sits above normal content but below
   modal/overlay z-indexes a theme might use (kept at 9999, adjust if needed). */
.fg-simple-mode-float {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9999;
}
.fg-simple-mode-float .fg-simple-toggle-btn {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
/* Bigger, easier-to-hit floating button once Simple Mode itself is on */
body.fg-simple-mode .fg-simple-mode-float .fg-simple-toggle-btn {
    font-size: 15px;
    padding: 12px 20px;
}

@media (max-width: 600px) {
    .fg-simple-mode-float { left: 12px; bottom: 12px; }
}

/* ── Site-wide text scale-up (revision round 1: significantly larger) ─────
   Still fixed rem sizes on real text tags only (never a % on body/html, never on
   containers, wrappers, icons or SVGs), so nothing compounds through Elementor's
   own em/rem-based layout math. Roughly 24px body text, up from ~18px before. */
body.fg-simple-mode p,
body.fg-simple-mode li,
body.fg-simple-mode label,
body.fg-simple-mode a:not(.elementor-button):not([class*="elementor-icon"]),
body.fg-simple-mode span:not([class*="elementor-icon"]):not(.fg-snap-leaf):not(.fg-snap-badge) {
    font-size: 1.5rem;
    line-height: 1.6;
}

body.fg-simple-mode h1 { font-size: 3rem;   line-height: 1.25; }
body.fg-simple-mode h2 { font-size: 2.5rem; line-height: 1.3; }
body.fg-simple-mode h3 { font-size: 2rem;   line-height: 1.35; }
body.fg-simple-mode h4,
body.fg-simple-mode h5,
body.fg-simple-mode h6 { font-size: 1.7rem; line-height: 1.4; }

body.fg-simple-mode .fg-snap-leaf { font-size: 1.3rem; }

/* The site header / menu gets a smaller (but still clearly larger) bump so the
   navigation bar keeps fitting on one row and the layout is not pushed around. */
html body.fg-simple-mode header a:not(.elementor-button):not([class*="elementor-icon"]),
html body.fg-simple-mode nav a:not(.elementor-button):not([class*="elementor-icon"]),
html body.fg-simple-mode header span:not([class*="elementor-icon"]):not(.fg-snap-leaf),
html body.fg-simple-mode nav span:not([class*="elementor-icon"]):not(.fg-snap-leaf) {
    font-size: 1.25rem;
    line-height: 1.4;
}

/* ── Bigger buttons and tap areas (revision round 1) ──────────────────────
   Covers Fed & Good's own controls, Elementor's real call-to-action buttons and
   the menu links. Icon-only buttons (menu toggles, social icons) are left alone so
   the header and homepage layout are not distorted. */
body.fg-simple-mode .fg-btn,
body.fg-simple-mode .fg-generate-btn,
body.fg-simple-mode .fg-again-btn,
body.fg-simple-mode .fg-download-btn,
body.fg-simple-mode .fg-upgrade-btn,
body.fg-simple-mode .fg-pill,
body.fg-simple-mode .fg-crisis-opt,
body.fg-simple-mode .fg-btn-checkout-full,
body.fg-simple-mode .fg-btn-checkout-inline,
body.fg-simple-mode a.elementor-button,
body.fg-simple-mode .elementor-button,
body.fg-simple-mode input[type="submit"] {
    min-height: 64px;
    font-size: 1.4rem;
    padding: 16px 28px;
    cursor: pointer;
}

body.fg-simple-mode .fg-planner-wrap input,
body.fg-simple-mode .fg-planner-wrap select,
body.fg-simple-mode .fg-hero input {
    min-height: 64px;
    font-size: 1.4rem;
    padding: 14px 16px;
}

body.fg-simple-mode .fg-crisis-opt { min-width: 96px; }

body.fg-simple-mode .main-header-menu a,
body.fg-simple-mode .ast-builder-menu a,
body.fg-simple-mode .elementor-nav-menu a,
body.fg-simple-mode .fg-avatar-menu-item {
    min-height: 52px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* The floating Simple Mode button itself gets bigger once it is on */
body.fg-simple-mode .fg-simple-mode-float .fg-simple-toggle-btn {
    font-size: 1.2rem;
    min-height: 60px;
    padding: 14px 26px;
}

body.fg-simple-mode .fg-planner-wrap a,
body.fg-simple-mode .fg-hero a {
    text-decoration: underline;
}

/* Extra breathing room inside the meal planner only — never a site-wide gap change */
body.fg-simple-mode .fg-input-grid,
body.fg-simple-mode .fg-prefs-pills {
    gap: 24px;
}

/* ── Higher contrast (revision round 1) ───────────────────────────────────
   Applied to the default text colour and to Fed & Good's own screens, where the
   background is known. Deliberately NOT a blanket colour override across the whole
   site: that would turn text black on any dark Elementor section and make it
   unreadable. */
body.fg-simple-mode {
    color: #000;
}

body.fg-simple-mode .fg-planner-wrap,
body.fg-simple-mode .fg-planner-title,
body.fg-simple-mode .fg-planner-subtitle,
body.fg-simple-mode .fg-prefs-label,
body.fg-simple-mode .fg-clearance-label,
body.fg-simple-mode .fg-field label,
body.fg-simple-mode .fg-summary,
body.fg-simple-mode .fg-meal-name,
body.fg-simple-mode .fg-meal-desc,
body.fg-simple-mode .fg-item-name,
body.fg-simple-mode .fg-item-qty,
body.fg-simple-mode .fg-tip,
body.fg-simple-mode .fg-snap-legend,
body.fg-simple-mode .fg-snap-disclaimer,
body.fg-simple-mode .fg-limit-note,
body.fg-simple-mode .fg-recipe-locked,
body.fg-simple-mode .fg-crisis-msg,
body.fg-simple-mode .fg-crisis-choice-label,
body.fg-simple-mode .fg-input-prefix span {
    color: #000;
}

body.fg-simple-mode .fg-meal-day,
body.fg-simple-mode .fg-item-price,
body.fg-simple-mode .fg-budget-badge,
body.fg-simple-mode .fg-recipe-locked a,
body.fg-simple-mode .fg-limit-note a {
    color: #0B5A3F;
}

/* Clear, dark outlines on everything you type into or tap */
body.fg-simple-mode .fg-planner-wrap input,
body.fg-simple-mode .fg-planner-wrap select,
body.fg-simple-mode .fg-pill,
body.fg-simple-mode .fg-crisis-opt {
    border: 2px solid #111;
    color: #000;
    background: #fff;
}

/* Selected states use a darker green so white text stays easy to read */
body.fg-simple-mode .fg-pill.active,
body.fg-simple-mode .fg-crisis-opt.active,
body.fg-simple-mode .fg-simple-toggle-btn[aria-pressed="true"] {
    background: #0B5A3F;
    border-color: #0B5A3F;
    color: #fff;
}

body.fg-simple-mode .fg-generate-btn,
body.fg-simple-mode .fg-generate-btn span {
    background-color: #0B3D2A;
    color: #fff;
}
body.fg-simple-mode .fg-generate-btn span { background: transparent; }

body.fg-simple-mode .fg-crisis-box {
    background: #fff;
    border: 2px solid #0B5A3F;
}
body.fg-simple-mode .fg-crisis-people-msg {
    background: #FFF1B8;
    color: #000;
}

/* ── Keep only the core inputs (revision round 1) ─────────────────────────
   In Simple Mode the meal planner shows just: budget, number of people and the
   generate button. Everything else is hidden (values fall back to sensible
   defaults — see meal-planner.js). The Crisis Mode prompt stays, because it is
   part of the budget field and only appears for budgets of $15 or less. */
body.fg-simple-mode .fg-planner-wrap .fg-field-days,
body.fg-simple-mode .fg-planner-wrap .fg-field-skill,
body.fg-simple-mode .fg-planner-wrap .fg-prefs-section,
body.fg-simple-mode .fg-planner-wrap .fg-clearance-section,
body.fg-simple-mode .fg-planner-wrap .fg-limit-note {
    display: none;
}

@media (max-width: 600px) {
    body.fg-simple-mode h1 { font-size: 2.3rem; }
    body.fg-simple-mode h2 { font-size: 2rem; }
    body.fg-simple-mode h3 { font-size: 1.7rem; }
}

/* Line the inputs up along the bottom even when a plain-language label wraps to two lines,
   and give the budget field a single clear outline (the $ box and the input share one border). */
body.fg-simple-mode .fg-input-grid {
    align-items: end;
}
body.fg-simple-mode .fg-input-prefix {
    border: 2px solid #111;
    background: #fff;
}
body.fg-simple-mode .fg-planner-wrap .fg-input-prefix input {
    border: none;
}
body.fg-simple-mode .fg-input-prefix span {
    background: #F3F4F6;
    border-right: 2px solid #111;
}