/* =============================================================================
 * Regilyze — FAQ PAGE STYLES
 * =============================================================================
 * EXTRACTED FROM faq.php ON 2026-08-18 (SXO fix S1).
 *
 * WHY. This was 20.5 KB of CSS inlined into a <style> tag in the page body.
 * Inline CSS is never cached: the browser re-downloads and re-parses every byte
 * of it on each page view. Across the public pages the site was re-sending
 * ~92 KB of uncacheable CSS per homepage view (49.6 KB here, 24.7 KB from
 * includes/header.php, 18 KB from includes/footer.php).
 *
 * As an external file under /css/ it is fetched once and then served from cache
 * for a year — .htaccess already sets `Cache-Control: public, max-age=31536000,
 * immutable` for that directory. The ?v= cache-buster on the <link> means a
 * deploy still invalidates it immediately.
 *
 * ORDER IS LOAD-BEARING. The <link> that replaced the <style> sits at the exact
 * same position in the document, which keeps the cascade identical:
 *     styles.min.css → ux-enhancements.css → rgz-shell.css (all in <head>)
 *       → THIS FILE (page body, top)
 *         → rgz-footer.css (page body, bottom)
 * Do not hoist it into <head>: it must stay after rgz-shell.css, and it must
 * stay before rgz-footer.css. It depends on the :root custom properties that
 * rgz-shell.css defines.
 * =============================================================================
 */
/* ============================================================
   FIX #1 (2026-08-10 front-end audit) — STICKY WAS DEAD ON THIS PAGE.
   css/ux-enhancements.css sets `html, body { overflow-x: hidden }` site-wide.
   `hidden` on <body> turns it into a scroll container, which neutralises
   every `position: sticky` descendant — here that was BOTH the global site
   header and this page's own .faq-sidebar. index/services/about/contact and
   the three legal pages already carried this override; faq.php did not.
   `clip` contains overflow without creating a scroll container.
   (ux-enhancements.css has been corrected too; this stays as a local
   guarantee in case that file is reverted or cached.)
   ============================================================ */
html { overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* ============================================================
   DESKTOP-SITE-MODE GRACEFUL DEGRADATION
   Same approach as landing/about/contact pages: when mobile/tablet
   users toggle "Desktop site" their browser forces a wide viewport
   (~980-1024px). These styles ensure the FAQ page still renders
   cleanly without horizontal scroll.
   ============================================================ */
.page-header, .section {
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
}
@supports not (overflow-x: clip) {
    .page-header, .section { overflow-x: hidden; }
}
.page-header .container, .section .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}
/* Long question/answer text breaks instead of overflowing */
.faq-question, .faq-answer-content,
.faq-category-title, .faq-contact h3, .faq-contact p,
.faq-no-results h3, .faq-no-results p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
/* iOS auto-zoom prevention on search input */
.faq-search input { font-size: 16px; }

/* FAQ Layout */
.faq-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    align-items: start;
}

/* Sidebar */
/* FIX N4 (2026-08-10 regression audit) — `calc(100vh - 140px)`.
   On mobile browsers `100vh` is the LARGE viewport (address bar hidden), so
   the box could be taller than the space actually visible; and in landscape
   on a phone (~375px tall) it evaluated to ~235px, turning the sidebar into a
   cramped scroll sliver. `100dvh` tracks the dynamic viewport, with `100vh`
   kept as the fallback for browsers without dvh support. */
/* FIX N6 (same audit) — `top` was 120px. The top utility bar is NOT sticky, so
   once the page scrolls only the 70px header remains: 120px left a ~50px gap
   of empty space above the sidebar. */
.faq-sidebar {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.faq-sidebar-inner { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.faq-search { position: relative; margin-bottom: 1.25rem; }
.faq-search input { width: 100%; padding: 0.875rem 1rem 0.875rem 2.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9375rem; font-family: inherit; transition: all 0.2s ease; box-sizing: border-box; }
.faq-search input:focus { outline: none; border-color: #ff6b35; box-shadow: 0 0 0 3px rgba(255,107,53,0.15); }
.faq-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: #9ca3af; pointer-events: none; }
.faq-nav-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; margin-bottom: 0.75rem; }
.faq-nav-list { list-style: none; padding: 0; margin: 0; }
.faq-nav-item { margin-bottom: 0.25rem; }
.faq-nav-link { display: block; padding: 0.625rem 0.875rem; font-size: 0.875rem; color: #6b7280; text-decoration: none; border-radius: 6px; transition: all 0.2s ease; cursor: pointer; }
.faq-nav-link:hover { background: rgba(255,107,53,0.05); color: #ff6b35; }
.faq-nav-link.active { background: rgba(255,107,53,0.1); color: #ff6b35; font-weight: 500; }

/* FAQ Content */
.faq-content { min-width: 0; }
/* FIX R3 (2026-08-10 regression audit) — SCROLL OFFSET WAS COUNTED TWICE.
   FIX #9 added `html { scroll-padding-top: 90px }` in includes/header.php as
   a single global offset for the sticky header, but the per-page
   `scroll-margin-top` values were left in place. For scroll-into-view
   operations the two ADD: scroll-padding insets the scrollport, scroll-margin
   grows the target's box. The result was a 120 + 90 = 210px gap above every jump target —
   the heading landed near the middle of a phone screen instead of just under
   the 70px header. The global value is now the single source of truth; what
   remains here is only a few px of breathing room. */
.faq-category { margin-bottom: 3rem; scroll-margin-top: 8px; }
.faq-category-title { font-size: 1.5rem; font-weight: 700; color: #1f2937; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid #ff6b35; display: inline-block; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }

/* FAQ Item - MATCHING HOME PAGE STYLE */
.faq-item { 
    background: #fff; 
    border: 1px solid #e5e7eb; 
    border-radius: 12px; 
    overflow: hidden; 
    transition: all 0.2s ease;
}
.faq-item:hover { 
    border-color: #ff6b35; 
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-item.active { 
    border-color: #ff6b35; 
    box-shadow: 0 4px 15px rgba(255,107,53,0.15);
    transform: translateX(0);
}
.faq-question { 
    width: 100%;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1.25rem 1.5rem; 
    font-size: 1rem; 
    font-weight: 600; 
    color: #1f2937; 
    cursor: pointer; 
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
    transition: all 0.2s ease;
}
.faq-question:hover { 
    background: rgba(255,107,53,0.03); 
    color: #ff6b35;
}
.faq-question svg { 
    width: 20px; 
    height: 20px; 
    stroke: #ff6b35; 
    flex-shrink: 0; 
    transition: transform 0.2s ease;
}
.faq-item.active .faq-question svg { 
    transform: rotate(45deg);
}
/* FIX #7 (2026-08-10 audit) — TRUNCATED ANSWERS.
   The accordion used `max-height: 0` -> `max-height: 500px`. On a phone
   (13-15px text, line-height 1.8 => ~24-27px per line) 500px is roughly 18
   lines, and several answers here — "How much does it cost to form a UK
   limited company?", the hidden-fees answer — run well past that. Everything
   below the 500px mark was clipped by `overflow: hidden` with no scrollbar
   and no indication anything was missing: the user simply could not read the
   rest of the answer.

   `max-height` also can't be set to the real content height without JS, and a
   too-large value makes the CLOSING transition feel laggy (it spends most of
   its duration animating through empty space).

   The grid `0fr -> 1fr` technique animates to the content's ACTUAL height, so
   answers of any length open fully and close crisply. The @supports block
   keeps a generous max-height fallback for older engines. */

/* ═══════════════════════════════════════════════════════════════════
   FIX A (2026-08-10) — ACCORDION ANSWERS WERE VISIBLE WHILE CLOSED.

   WHAT WENT WRONG WITH THE GRID TECHNIQUE
   ---------------------------------------
   FIX #7 replaced `max-height` with `grid-template-rows: 0fr -> 1fr`. That
   pattern is correct ONLY when the collapsed child has no padding, because
   `overflow: hidden` clips to the element's PADDING box, not its content box.

   .faq-answer-content carries `padding-top: 1.25rem` and
   `padding-bottom: 1.5rem`. So at `0fr` the content box collapsed to 0 as
   intended, but the padding box was still ~44px tall — and the first line or
   two of the answer rendered inside that padding strip, permanently visible
   under every closed question. Exactly what the screenshots showed.

   The textbook fix is to move the padding onto an inner wrapper, but that
   means new markup in two files and a third revision of the same component.

   WHY max-height IS BACK
   ----------------------
   `max-height` clips reliably regardless of padding, needs no markup change,
   and works in every browser with no @supports fallback. Its only real
   drawback is that the cap must exceed the tallest answer — the ORIGINAL bug
   (FIX #7) was simply that 500px was too small, not that the technique was
   wrong. 1500px is ~55 lines at this font size; the longest answer here is
   about 20 lines on a 360px phone, so there is generous headroom.

   THE !important IS LOAD-BEARING
   ------------------------------
   css/styles.min.css (previous design, still linked from includes/header.php)
   declares `.faq-item.active .faq-answer { max-height: 300px }` at specificity
   (0,3,0). This page's rule has the same specificity, so without !important
   whichever file loads last would win — and that ordering is exactly what
   caused regression R1. !important removes the ambiguity.
   ═══════════════════════════════════════════════════════════════════ */
.faq-answer {
    display: block;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer {
    max-height: 1500px !important;
    transition: max-height 0.45s ease-in;
}
@media (prefers-reduced-motion: reduce) {
    .faq-answer, .faq-item.active .faq-answer { transition: none; }
}
.faq-answer-content { 
    padding: 0 1.5rem 1.5rem; 
    color: #4b5563; 
    line-height: 1.8; 
    font-size: 0.9375rem; 
    border-top: 1px solid #f3f4f6; 
    padding-top: 1.25rem;
    animation: faqFadeIn 0.2s ease-out;
}
@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* No Results */
.faq-no-results { text-align: center; padding: 3rem; background: #faf8f5; border-radius: 16px; display: none; }
.faq-no-results.show { display: block; }
.faq-no-results svg { width: 48px; height: 48px; stroke: #9ca3af; margin-bottom: 1rem; }
.faq-no-results h3 { font-size: 1.125rem; margin-bottom: 0.5rem; color: #1f2937; }
.faq-no-results p { color: #6b7280; margin-bottom: 1.5rem; }

/* ============================================================
   STILL HAVE QUESTIONS? — premium redesign
   Matches landing-page Why Us cards / checkout sidebar style.
   ============================================================ */
.faq-contact {
    margin-top: 4rem;
    padding: 2.5rem 2rem;
    background: var(--bg-white, #FFFFFF);
    border: 1px solid var(--border-light, #EAEAEA);
    border-radius: 20px;
    box-shadow: 0 14px 44px rgba(26,26,27,0.06);
    position: relative;
    overflow: hidden;
}

/* Subtle ambient orange glow at top-right */
.faq-contact::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255,107,53,0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Top highlight gradient line (glass effect) */
.faq-contact::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,107,53,0.4), transparent);
}

.faq-contact-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #FF8E53 0%, #FF6B35 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(255,107,53,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
    position: relative;
    z-index: 1;
}
.faq-contact-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 55%);
    pointer-events: none;
}
.faq-contact-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.faq-contact h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #1A1A1A);
    text-align: center;
    letter-spacing: -0.01em;
    font-family: var(--font-display, 'Sora', sans-serif);
    position: relative;
    z-index: 1;
}
.faq-contact p {
    color: var(--text-secondary, #6B6B6B);
    margin: 0 auto 1.75rem;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 480px;
    position: relative;
    z-index: 1;
}

/* Premium contact-method cards — replace 3 plain buttons */
.faq-contact-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.faq-contact-method {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-cream, #FAF9F7);
    border: 1px solid var(--border-light, #EAEAEA);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary, #1A1A1A);
    transition: all 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
    text-align: left;
    min-height: auto;
}
.faq-contact-method:hover {
    transform: translateY(-2px);
    border-color: var(--accent-orange, #FF6B35);
    background: var(--bg-white, #FFFFFF);
    box-shadow: 0 12px 28px rgba(255,107,53,0.12);
}
.faq-contact-method-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px var(--cm-shadow, rgba(255,107,53,0.25)), inset 0 1px 0 rgba(255,255,255,0.25);
    position: relative;
}
.faq-contact-method-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 55%);
    pointer-events: none;
}
.faq-contact-method-icon svg {
    width: 18px;
    height: 18px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
/* 3 distinct gradient colors per method */
.faq-contact-method.cm-orange .faq-contact-method-icon {
    background: linear-gradient(135deg, #FF8E53 0%, #FF6B35 100%);
    --cm-shadow: rgba(255,107,53,0.3);
}
.faq-contact-method.cm-blue .faq-contact-method-icon {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --cm-shadow: rgba(37,99,235,0.3);
}
.faq-contact-method.cm-green .faq-contact-method-icon {
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    --cm-shadow: rgba(16,185,129,0.3);
}
.faq-contact-method-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}
.faq-contact-method-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #1A1A1A);
    margin-bottom: 2px;
}
.faq-contact-method-text span {
    font-size: 12px;
    color: var(--text-tertiary, #9A9A9A);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* ============================================================
   RESPONSIVE — landing-page-grade coverage
   1280 / 1024 / 768 / 640 / 480 / 360 + touch
   ============================================================ */
@media (max-width: 1280px) {
    .faq-layout { gap: 2.5rem; }
    .faq-sidebar { top: 110px; }
}

@media (max-width: 1024px) {
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .faq-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .faq-contact { padding: 2.25rem 1.75rem; }
    .faq-contact-actions { max-width: 600px; }
}

@media (max-width: 768px) {
    /* FIX #8 (2026-08-10 audit) — the sidebar used to be `display: none`
       here. The search input lives INSIDE that sidebar, so on every phone the
       only way through 30+ questions was to scroll the whole page: the FAQ
       search simply did not exist below 768px, on the device where it matters
       most. The sidebar now stays in the flow and only the category jump-nav
       (which duplicates the headings already visible while scrolling) is
       hidden — so there is still exactly ONE #faqSearch in the DOM, no
       duplicate ids, and no extra markup. */
    .faq-sidebar {
        display: block;
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: 1.25rem;
    }
    .faq-sidebar-inner {
        padding: 0.875rem;
        border-radius: 12px;
    }
    .faq-nav-title,
    .faq-nav-list { display: none; }
    .faq-search { margin-bottom: 0; }

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .faq-category {
        scroll-margin-top: 8px;   /* FIX R3 — html{scroll-padding-top} supplies the header offset */
        margin-bottom: 2rem;
    }
    .faq-category-title { font-size: 1.25rem; }
    .faq-question {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
    }
    .faq-answer-content {
        padding: 0 1.25rem 1.25rem;
        font-size: 0.875rem;
        padding-top: 1.125rem;
    }

    /* Still have questions? — stack contact methods vertically */
    .faq-contact {
        padding: 2rem 1.5rem;
        margin-top: 2rem;
        border-radius: 16px;
    }
    .faq-contact-icon { width: 52px; height: 52px; }
    .faq-contact-icon svg { width: 26px; height: 26px; }
    .faq-contact h3 { font-size: 1.25rem; }
    .faq-contact p { font-size: 0.875rem; margin-bottom: 1.25rem; }
    .faq-contact-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .faq-contact-method-text span { max-width: none; }
}

@media (max-width: 640px) {
    .faq-contact { padding: 1.75rem 1.25rem; }
    .faq-contact-icon { width: 48px; height: 48px; margin-bottom: 12px; }
    .faq-contact-icon svg { width: 24px; height: 24px; }
    .faq-contact h3 { font-size: 1.125rem; }
    .faq-contact-method { padding: 14px 16px; gap: 12px; }
    .faq-contact-method-icon { width: 36px; height: 36px; }
    .faq-contact-method-icon svg { width: 16px; height: 16px; }
    .faq-contact-method-text strong { font-size: 13px; }
    .faq-contact-method-text span { font-size: 11.5px; }
}

@media (max-width: 480px) {
    .page-header { padding: 32px 0 24px; }
    .faq-category-title { font-size: 1.125rem; padding-bottom: 0.5rem; }
    .faq-question {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        gap: 8px;
    }
    .faq-question svg { width: 18px; height: 18px; }
    .faq-answer-content {
        padding: 0 1rem 1rem;
        padding-top: 1rem;
        font-size: 0.8125rem;
    }
    .faq-no-results { padding: 2rem 1.25rem; }
    .faq-no-results svg { width: 40px; height: 40px; }
    .faq-no-results h3 { font-size: 1rem; }

    .faq-contact {
        padding: 1.5rem 1rem;
        border-radius: 14px;
    }
    .faq-contact-icon { width: 44px; height: 44px; }
    .faq-contact-icon svg { width: 22px; height: 22px; }
    .faq-contact h3 { font-size: 1.0625rem; }
    .faq-contact p { font-size: 0.8125rem; margin-bottom: 1rem; }
    .faq-contact-method { padding: 12px 14px; gap: 10px; }
    .faq-contact-method-icon { width: 34px; height: 34px; border-radius: 9px; }
    .faq-contact-method-icon svg { width: 15px; height: 15px; }
    .faq-contact-method-text strong { font-size: 12.5px; }
    .faq-contact-method-text span { font-size: 11px; }
}

@media (max-width: 360px) {
    .faq-question { padding: 0.75rem 0.875rem; font-size: 0.8125rem; }
    .faq-question svg { width: 16px; height: 16px; }
    .faq-answer-content {
        padding: 0 0.875rem 0.875rem;
        padding-top: 0.875rem;
        font-size: 0.75rem;
    }
    .faq-contact { padding: 1.25rem 0.875rem; }
    .faq-contact h3 { font-size: 1rem; }
    .faq-contact-method { padding: 10px 12px; gap: 9px; }
    .faq-contact-method-icon { width: 32px; height: 32px; }
    .faq-contact-method-text strong { font-size: 12px; }
    .faq-contact-method-text span { font-size: 10.5px; }
}

/* Touch device hover guards — no stuck-up transforms */
@media (hover: none) and (pointer: coarse) {
    .faq-item:hover {
        transform: none;
        border-color: #e5e7eb;
        box-shadow: none;
    }
    .faq-question:hover {
        background: none;
        color: #1f2937;
    }
    .faq-contact-method:hover {
        transform: none;
        border-color: var(--border-light, #EAEAEA);
        background: var(--bg-cream, #FAF9F7);
        box-shadow: none;
    }
}
