/**
 * TGL FAQ - accordion styles.
 *
 * Scoped entirely to the `.tgl-blog-faq*` classes emitted by
 * `\TGL\Rentals\Faq\FaqHtml`. Two surfaces render this markup: the `[tgl_faq]`
 * shortcode and the FAQ Elementor widget, which reuses the shortcode's style
 * handle so both ship byte-identical HTML and CSS.
 *
 * The class prefix is still `tgl-blog-` on purpose: these rules were born in the
 * blog builder's stylesheet (removed along with the builder). Renaming the
 * classes would mean touching the emitter, this file, 13 test assertions and any
 * Elementor custom CSS pointing at them. The file and the handle moved; the
 * class names did not.
 *
 * Colors come from the design-system tokens (--tgl-teal #31b8c6, --tgl-orange
 * #F28f52) with hard fallbacks. Mobile-first (80% of traffic).
 */

.tgl-blog-faq {
    /* The nine --tgl-blog-* colour props that used to live here belonged to
       the compiler components (takeaways, cards, CTAs), not to the FAQ: the
       accordion reads design-system tokens directly. They went with them. */
    margin: 2.75rem 0;
}

/* ==========================================================================
   FAQ — native <details> disclosure, restyled from Figma `FAQ` (157:2158),
   read in Dev Mode on 2026-09-09.

   This block renders in two very different places: as a full-width section on
   the Home, and inside a blog post's prose column. So the breakpoint is a
   CONTAINER query, not a media query — on a 1440px desktop the same markup is
   1144px wide on the Home and ~700px wide inside a post, and a media query
   would give both the wide layout. It has to answer to the width it was given.

   Below the query it is a plain stacked list, which is also the mobile layout
   (80% of traffic) and the safe fallback anywhere container queries are not
   supported: narrow is the default, wide is the enhancement.

   LEGACY MARKUP: posts compiled before 2026-09-09 have their HTML stored in the
   database WITHOUT the __inner/__intro/__items wrappers, and they are not
   recompiled until someone edits them. Nothing below REQUIRES those wrappers —
   every item rule is a descendant selector, so old posts get the new type and
   rules and simply skip the two-column layout.

   DIVERGENCE FROM THE FILE — the container. Every measurement inside this
   section is internally consistent (360 + 80 gap + 920 = 1360, node 157:2159),
   but 1360 is not the container the rest of the page uses: `Islands`, `Homes`
   and `Testimonials` agree on 1144 three independent ways. The file also places
   this section off-centre (288px of gutter on the left, 272 on the right), which
   is the fingerprint of a frame resized without re-centring, not a decision.
   A section 216px wider than its neighbours would break the vertical alignment
   of the whole page, so it uses the shared container and keeps the intro column
   at its designed 360px — that width is what wraps the heading onto its four
   designed lines. The accordion column absorbs the difference.
   ========================================================================== */

.tgl-blog-faq {
    container-type: inline-size;
    container-name: tgl-faq;
}

/* The price of the line above, and the fix for it.

   `container-type` turns on size containment. Elementor's container is a column
   flex box that ships with `flex-wrap: wrap`, and a wrapping column flex
   container has to resolve a definite size before it can decide where to wrap.
   That intrinsic pass measures this section at a width it never actually gets
   and hands back a height roughly 2.2x the real one. The widget box keeps the
   wrong number: on the Home at 375px it was 2081px of box around 956px of FAQ,
   which put the contact form more than a screen of scroll below the last
   question. Measured on development, not deduced — forcing the parent to
   `nowrap` collapsed the widget to exactly the section's height. Desktop never
   showed it: at 1440 the box already matched.

   Three things this is NOT, each ruled out by measurement: an Elementor setting
   (nothing in the editor, no inline style, no rule in 57 stylesheets naming the
   element), WP Rocket's lazy rendering (`content-visibility: visible`,
   `contain: none`), and our own spacing (the same widget cloned outside the
   container measures the section's height exactly).

   Feeding Elementor's own custom property instead of overriding `flex-wrap`
   with `!important`: the value flows through its `flex-wrap: var(--flex-wrap)`,
   so this cooperates with the cascade rather than fighting it.

   `:has()` because the property has to land on an ANCESTOR and custom
   properties only inherit downwards — a widget cannot style its own container.
   Browsers without `:has()` keep today's behaviour.

   `HomesSection` also uses `container-type` and is NOT affected: there it sits
   on a card inside a grid, whose width the track already fixes, so the
   intrinsic pass has a definite width to work with. The trap is putting it on
   the element a widget hands straight to a flex container. */
.e-con-inner:has(.tgl-blog-faq) {
    --flex-wrap: nowrap;
}

/* The wrapper owns the spacing when it exists, so the section band can sit flush
   against its neighbours on the Home. Legacy markup has no wrapper and keeps the
   shared 2.75rem rhythm from the group at the top of this file. */
.tgl-blog-faq:has(> .tgl-blog-faq__inner) {
    margin: 0;
}

.tgl-blog-faq__inner {
    margin-block: 2.75rem;
    /* The gutter lives in the base state, not only in the wide one: on the Home
       this section is full-bleed, and without it the questions run into both
       screen edges on a phone — 80% of the traffic. The same max() that centres
       the 1144 container on a wide page falls back to the gutter on a narrow
       one, so it is one formula for both. */
    padding-inline: max(1.25rem, (100% - var(--tgl-container, 71.5rem)) / 2);
}

.tgl-blog-faq__intro > :first-child {
    margin-top: 0;
}

/* Stacked, the intro and the accordion are two blocks in normal flow with only
   the lead's own paragraph margin between them, which is not enough to read as
   a boundary. Two columns do not need it — there the gap is horizontal. */
.tgl-blog-faq__intro {
    margin-bottom: 2rem;
}

.tgl-blog-faq h2 {
    font-family: var(--tgl-font-heading, Georgia, serif);
    /* 400, not a bolder cut: the 56px heading in the file is Raleway Regular
       (157:2164). At that size the weight is carried by the size. */
    font-weight: 400;
    letter-spacing: var(--tgl-tracking-display, -0.012em);  /* -0.672/56 */
    color: var(--tgl-faq-ink, #1b1d1c);
    /* 32 stacked, the same step `Testimonials` takes for its own heading. 56 on
       a 375px screen is four words per line. A single class selector on purpose:
       wherever this drops into a page that styles its own h2 more specifically,
       the host page's heading scale should win. */
    font-size: 2rem;
    line-height: var(--tgl-leading-heading, 1.12);
    margin: 0 0 1rem;
}

.tgl-blog-faq__lead {
    font-size: var(--tgl-text-body-sm, .86875rem);          /* 13.9 — 157:2166 */
    line-height: var(--tgl-leading-body, 1.67);             /* 23.25/13.9 */
    color: var(--tgl-body-color, #3a3d38);
}

/* Hidden while stacked, on purpose. The mobile design drops this link entirely,
   and stacked it lands flush against the first question with nothing to
   separate the two — it reads as a broken row rather than as a link. Nothing is
   lost: on a phone the contact form is the next section down, which is where
   the link was sending people anyway. */
.tgl-blog-faq__link {
    display: none;
    align-items: center;
    gap: .375rem;                                            /* 6 — 157:2167 */
    padding-bottom: .1875rem;
    border-bottom: 1px solid currentColor;
    font-size: var(--tgl-text-link, .875rem);                /* 14 — 157:2168 */
    line-height: var(--tgl-leading-ui, 1.55);                /* 21.7/14 */
    letter-spacing: var(--tgl-tracking-link, .01em);         /* 0.14/14 */
    color: var(--tgl-faq-ink, #1b1d1c);
    text-decoration: none;
}

.tgl-blog-faq__link svg {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform .2s ease;
}

.tgl-blog-faq__link:hover svg,
.tgl-blog-faq__link:focus-visible svg {
    transform: translateX(3px);
}

/* ── The accordion ─────────────────────────────────────────────────────────
   Hairlines instead of boxes: the file draws one rule above the first item and
   one under each (157:2171 and each HorizontalBorder), in warm sand — not the
   cool translucent grey the rest of the page uses for dividers. */

.tgl-blog-faq__items {
    border-top: 1px solid var(--tgl-faq-rule, var(--tgl-primitive-sand-300));
}

.tgl-blog-faq__item {
    border-bottom: 1px solid var(--tgl-faq-rule, var(--tgl-primitive-sand-300));
    background: none;
}

.tgl-blog-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    /* 26 top and bottom over a 27px line is the 80px row of 157:2173. */
    padding: 1.625rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.0625rem;
    line-height: 1.39;                                       /* 26.4/19 */
    font-weight: 400;
    color: var(--tgl-faq-ink, #1b1d1c);
}

.tgl-blog-faq__item summary::-webkit-details-marker {
    display: none;
}

/* The marker is a 28px ring with a "+" in it (157:2176). Open, the file rotates
   the WHOLE ring 45deg and fills it — the bounding box goes to 39.598, which is
   28 × √2, so it is a rotation and not a second icon. The + becomes an × for
   free, which is why there is no separate close glyph anywhere in the file. */
.tgl-blog-faq__item summary::after {
    content: "+";
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-box explicitly: this stylesheet does not set a global one, and the
       file draws the stroke INSIDE the 28x28 frame (157:2176). Without it the
       ring renders 30px and the closed row measures 83 instead of the 81 the
       file specifies — measured, not assumed. */
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 1px solid var(--tgl-faq-marker-border, #b5a88a);
    border-radius: 50%;
    /* The file sets Inter here and nowhere else in the design. Same call as the
       JetBrains Mono eyebrow: a fourth family for one glyph is explore drift,
       so it uses the UI family. */
    font-family: var(--tgl-font-display, system-ui, sans-serif);
    font-size: 1rem;                                         /* 16 — 157:2177 */
    line-height: 1.2;                                        /* 19.2/16 */
    color: var(--tgl-faq-ink, #1b1d1c);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.tgl-blog-faq__item[open] summary::after {
    content: "+";
    transform: rotate(45deg);
    background: var(--tgl-faq-ink, #1b1d1c);
    border-color: var(--tgl-faq-ink, #1b1d1c);
    color: var(--tgl-faq-marker-on-ink, #f3efe7);
}

.tgl-blog-faq__answer {
    padding: 0 0 1.75rem;                                    /* 28 — 157:2197 */
    /* 34.5rem = 551.7 (157:2197). Kept as an absolute measure rather than a
       share of the column: it is ~75 characters, which is the reason it exists. */
    max-width: 34.5rem;
    font-size: .90625rem;                                    /* 14.5 — 157:2198 */
    line-height: 1.76;                                       /* 25.58/14.5 */
    color: var(--tgl-body-color, #3a3d38);
}

.tgl-blog-faq__answer > :first-child { margin-top: 0; }
.tgl-blog-faq__answer > :last-child { margin-bottom: 0; }

/* ── Wide: the section band and the two columns ────────────────────────────
   900 and not 1144: the split needs the intro column at 360 plus a readable
   accordion, and it reads well from ~900 up. Below that they stack. */

@container tgl-faq (min-width: 900px) {

    .tgl-blog-faq__inner {
        display: grid;
        /* 360 fixed + 80 gap (157:2160 to 157:2171). The intro column keeps its
           designed width; the accordion takes what is left. */
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 5rem;
        align-items: start;
        margin-block: 0;
        /* Full-bleed band, 1144 of content, without a second wrapper: the
           padding centres the content itself. In a prose column the subtraction
           goes negative and max() falls back to the gutter. */
        padding-block: 7.5rem;                               /* 120 — 157:2158 */
        padding-inline: max(var(--tgl-gutter, 3rem), (100% - var(--tgl-container, 71.5rem)) / 2);
        background: var(--tgl-section-bg, #f8f9fb);
        border-top: 1px solid var(--tgl-faq-rule, var(--tgl-primitive-sand-300));
    }

    .tgl-blog-faq h2 {
        font-size: var(--tgl-text-h2-lg, 3.5rem);            /* 56 — 157:2164 */
        line-height: var(--tgl-leading-tight, 1.05);         /* 58.8/56 */
        margin: 0 0 1.5rem;                                  /* 24 — 157:2160 */
    }

    .tgl-blog-faq__lead {
        margin: 0 0 1.5rem;
    }

    /* Back in the layout the file actually draws it in (157:2167). */
    .tgl-blog-faq__link {
        display: inline-flex;
    }

    .tgl-blog-faq__intro {
        margin-bottom: 0;
    }

    .tgl-blog-faq__item summary {
        font-size: 1.1875rem;                                /* 19 — 157:2175 */
    }
}