/* =========================================================
   Woolland — FAQ page ("duk")

   Styles the WordPress core Accordion block
   (core/accordion, accordion-item, accordion-heading, accordion-panel).

   Every rule below is scoped to .page--faq, a class that
   template-parts/page.php adds to the page wrapper only when
   is_page('duk') is true. Core Accordion blocks used anywhere
   else on the site are therefore completely unaffected.

   Colours come from the theme tokens in main.css; the tints below
   are the --accent-1 green (#485B48) at low opacity.
   ========================================================= */

.page--faq {
    --wl-faq-line: rgba(72, 91, 72, 0.18);
    --wl-faq-line-strong: rgba(72, 91, 72, 0.38);
    --wl-faq-tint: rgba(72, 91, 72, 0.06);
    --wl-faq-tint-strong: rgba(72, 91, 72, 0.12);

    padding: 40px 0 72px;
}

.page--faq .page__inner {
    gap: 20px;
}

/* ---------------------------------------------------------
   Page title
   --------------------------------------------------------- */

.page--faq .page__title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--font-1);
}

/* ---------------------------------------------------------
   Category headings — core Heading blocks placed between
   the accordions (Užsakymai, Pristatymas, Grąžinimai, ...)
   --------------------------------------------------------- */

.page--faq .wp-block-heading {
    margin-top: 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wl-faq-line);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--accent-1);
}

/* The first category heading sits directly under the page title,
   so it needs far less space above it. */
.page--faq .page__title + .wp-block-heading {
    margin-top: 8px;
}

.page--faq > .page__inner > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--font-2);
}

/* ---------------------------------------------------------
   Accordion wrapper
   --------------------------------------------------------- */

.page--faq .wp-block-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Core's flow layout adds margins between children; the flex gap
   above already handles spacing, so clear them to avoid doubling. */
.page--faq .wp-block-accordion > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* ---------------------------------------------------------
   Accordion item (one question + answer)
   --------------------------------------------------------- */

.page--faq .wp-block-accordion-item {
    border: 1px solid var(--wl-faq-line);
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page--faq .wp-block-accordion-item:hover {
    border-color: var(--wl-faq-line-strong);
}

.page--faq .wp-block-accordion-item.is-open {
    border-color: var(--wl-faq-line-strong);
    box-shadow: 0 2px 14px rgba(72, 91, 72, 0.08);
}

/* ---------------------------------------------------------
   Question row — the whole row is a <button>, so the entire
   width is clickable, keyboard focusable and screen-reader safe.
   --------------------------------------------------------- */

.page--faq .wp-block-accordion-heading {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--font-1);
}

.page--faq .wp-block-accordion-heading__toggle {
    gap: 20px;
    padding: 18px 22px;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page--faq .wp-block-accordion-heading__toggle:hover {
    background-color: var(--wl-faq-tint);
    color: var(--accent-1);
}

/* Core underlines the question on hover — too busy for this design. */
.page--faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}

.page--faq .wp-block-accordion-heading__toggle:focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: -2px;
    background-color: var(--wl-faq-tint);
}

.page--faq .wp-block-accordion-heading__toggle-title {
    flex: 1;
}

/* ---------------------------------------------------------
   + / − icon

   Core renders a literal "+" text node and rotates it 45° when
   open (making an ×). We hide that glyph with font-size: 0,
   cancel the rotation, and draw the bars ourselves so the closed
   state is a clean + and the open state a clean −.
   --------------------------------------------------------- */

.page--faq .wp-block-accordion-heading__toggle-icon {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(72, 91, 72, 0.22);
    border-radius: 50%;
    background-color: var(--wl-faq-tint);
    color: var(--accent-1);
    font-size: 0;
    line-height: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Outweighs core's .wp-block-accordion-item.is-open > ... rotate(45deg) */
.page--faq .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    transform: none;
}

.page--faq .wp-block-accordion-heading__toggle-icon::before,
.page--faq .wp-block-accordion-heading__toggle-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: currentColor;
    border-radius: 1px;
}

/* Horizontal bar — present in both states */
.page--faq .wp-block-accordion-heading__toggle-icon::before {
    width: 11px;
    height: 1.5px;
}

/* Vertical bar — only when closed, completing the + */
.page--faq .wp-block-accordion-heading__toggle-icon::after {
    width: 1.5px;
    height: 11px;
    transition: opacity 0.15s ease;
}

.page--faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after {
    opacity: 0;
}

.page--faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
    border-color: var(--wl-faq-line-strong);
    background-color: var(--wl-faq-tint-strong);
}

.page--faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    border-color: var(--accent-1);
    background-color: var(--accent-1);
    color: var(--font-3);
}

/* ---------------------------------------------------------
   Answer panel
   --------------------------------------------------------- */

.page--faq .wp-block-accordion-panel {
    padding: 16px 22px 20px;
    border-top: 1px solid rgba(72, 91, 72, 0.12);
}

.page--faq .wp-block-accordion-panel > * + * {
    margin-top: 12px;
}

.page--faq .wp-block-accordion-panel p,
.page--faq .wp-block-accordion-panel li {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--font-1);
}

/* main.css resets all padding, so list indentation is restored here. */
.page--faq .wp-block-accordion-panel ul,
.page--faq .wp-block-accordion-panel ol {
    padding-left: 20px;
}

.page--faq .wp-block-accordion-panel li + li {
    margin-top: 6px;
}

.page--faq .wp-block-accordion-panel a {
    color: var(--accent-1);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page--faq .wp-block-accordion-panel a:hover {
    text-decoration: none;
}

.page--faq .wp-block-accordion-panel strong {
    font-weight: 600;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media screen and (max-width: 1023px) {
    .page--faq {
        padding: 32px 0 56px;
    }

    .page--faq .page__title {
        font-size: 30px;
    }

    .page--faq .wp-block-heading {
        margin-top: 24px;
        font-size: 20px;
    }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {
    .page--faq {
        padding: 24px 0 48px;
    }

    .page--faq .page__title {
        font-size: 26px;
    }

    .page--faq .wp-block-heading {
        margin-top: 20px;
        font-size: 18px;
    }

    .page--faq .wp-block-accordion {
        gap: 10px;
    }

    .page--faq .wp-block-accordion-heading {
        font-size: 15px;
    }

    .page--faq .wp-block-accordion-heading__toggle {
        gap: 14px;
        padding: 16px;
    }

    .page--faq .wp-block-accordion-heading__toggle-icon {
        width: 24px;
        height: 24px;
    }

    .page--faq .wp-block-accordion-panel {
        padding: 14px 16px 18px;
    }

    .page--faq .wp-block-accordion-panel p,
    .page--faq .wp-block-accordion-panel li {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .page--faq .wp-block-accordion-item,
    .page--faq .wp-block-accordion-heading__toggle,
    .page--faq .wp-block-accordion-heading__toggle-icon,
    .page--faq .wp-block-accordion-heading__toggle-icon::after {
        transition: none;
    }
}