/* ===========================================
   Nova FAQ — Premium (NovaFolio)
   Token-first, stable vs Gutenberg
   =========================================== */

.nvf-faq {
  /* layout */
  --nvf-faq-max: var(--nvf-layout-faq-width, var(--nvf-layout-content-width, 1080px));
  --nvf-faq-gap: var(--nvf-space-s, 14px);
  max-width: var(--nvf-layout-max-width, 1440px);
  margin-inline: auto;

  /* user vars (block attrs / per-item overrides) */
  --nvf-faq-radius: var(--nvf-radius-l, 18px);
  --nvf-faq-q-bg: var(--nvf-color-soft, #F3F4F6);
  --nvf-faq-q-fg: var(--nvf-color-ink-deep, #0F172A);
  --nvf-faq-a-fg: var(--nvf-faq-muted);
  --nvf-faq-toggle-bg: color-mix(in srgb, var(--nvf-color-white, #fff) 86%, transparent);
  --nvf-faq-a-pad-y: 16px;
  --nvf-faq-toggle-fg: var(--nvf-faq-q-fg);
  /* derived */
  --nvf-faq-paper: color-mix(in srgb, var(--nvf-color-white, #fff) 92%, transparent);
  --nvf-faq-border: color-mix(in srgb, var(--nvf-color-ink-deep, #0F172A) 10%, transparent);
  --nvf-faq-muted: color-mix(in srgb, var(--nvf-color-ink-deep, #0F172A) 72%, transparent);
  --nvf-faq-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 6px 18px rgba(15, 23, 42, .06);
  --nvf-faq-transition: var(--nvf-transition, 180ms ease);
}

.nvf-faq :where(details.wp-block-details) {
  transition: box-shadow .25s ease, transform .25s ease;
}

@media (hover:hover) {
  .nvf-faq :where(details.wp-block-details:hover) {
    transform: translateY(-2px);
    box-shadow:
      0 4px 10px rgba(15, 23, 42, .06),
      0 14px 28px rgba(15, 23, 42, .08);
  }
}

.nvf-faq__inner {
  max-width: var(--nvf-faq-max);
  margin: 0 auto;
}

.nvf-faq__items {
  display: grid;
  gap: var(--nvf-faq-gap);
}

.nvf-faq.nvf-faq .nvf-faq__title {
  margin: 0 0 var(--nvf-space-s, 14px);
  font-size: var(--nvf-faq-title-fs, clamp(22px, 2.4vw, 34px));
  font-family: var(--nvf-headings-font-family, inherit);
  font-weight: var(--nvf-faq-title-weight, inherit);
  letter-spacing: var(--nvf-faq-title-ls, -.02em);
  text-transform: var(--nvf-faq-title-transform, none);
  color: var(--nvf-color-ink-deep, #0F172A);
}

/* Card shell */
.nvf-faq :where(details.wp-block-details) {
  border: 1px solid var(--nvf-faq-border);
  border-radius: var(--nvf-faq-radius);
  background: var(--nvf-faq-paper);
  box-shadow: var(--nvf-faq-shadow);
  overflow: clip;
  color: var(--nvf-faq-q-fg);
}

/* Safety net: if WP injects a background on <summary>/<div>/<p>, keep the card paper. */
.nvf-faq :where(details.wp-block-details) {
  background: var(--nvf-faq-paper) !important;
}

/* Summary row */
.nvf-faq :where(details.wp-block-details > summary) {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  font-weight: var(--nvf-faq-q-weight, 700);
  letter-spacing: var(--nvf-faq-q-ls, .01em);
  text-transform: var(--nvf-faq-q-transform, none);

  color: var(--nvf-faq-q-fg);
  background: var(--nvf-faq-q-bg);
  user-select: none;
  position: relative;

  font-size: inherit;
  line-height: inherit;
}

.nvf-faq summary::-webkit-details-marker {
  display: none;
}

/* Ensure summary text inherits our fg (Gutenberg wraps RichText) */
.nvf-faq :where(details.wp-block-details > summary, details.wp-block-details > summary *) {
  color: inherit !important;
}

/* Toggle circle (+/-) */
.nvf-faq :where(details.wp-block-details > summary)::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: var(--nvf-radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--nvf-faq-toggle-fg) 10%, transparent);

  background:
    linear-gradient(var(--nvf-faq-toggle-fg), var(--nvf-faq-toggle-fg)) center/12px 1.6px no-repeat,
    linear-gradient(var(--nvf-faq-toggle-fg), var(--nvf-faq-toggle-fg)) center/1.6px 12px no-repeat,
    var(--nvf-faq-toggle-bg);

  box-shadow: var(--nvf-shadow-s, 0 6px 16px rgba(15,23,42,.06));
  flex: 0 0 34px;
  transition: transform var(--nvf-faq-transition),
              box-shadow var(--nvf-faq-transition),
              background var(--nvf-faq-transition);
}

.nvf-faq :where(details[open].wp-block-details > summary)::after {
  background:
    linear-gradient(var(--nvf-faq-toggle-fg), var(--nvf-faq-toggle-fg)) center/12px 1.6px no-repeat,
    var(--nvf-faq-toggle-bg);
}

@media (hover:hover) {
  .nvf-faq :where(details.wp-block-details > summary:hover)::after {
    transform: translateY(-1px);
    box-shadow: var(--nvf-shadow-m, 0 12px 28px rgba(0, 0, 0, .10));
  }
}

/* Answer */
.nvf-faq :where(details.wp-block-details > :not(summary)) {
  padding: var(--nvf-faq-a-pad-y) 18px var(--nvf-faq-a-pad-y);
  color: var(--nvf-faq-a-fg, var(--nvf-faq-muted));
  background: var(--nvf-faq-paper) !important;

  font-size: inherit;
  line-height: inherit;
}

.nvf-faq :where(details.wp-block-details > :not(summary) p) {
  margin: 10px 0 0;
}

/* Resist theme typography overrides on <p> inside answers */
.nvf-faq.nvf-faq details p {
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
}

/* Micro-animation */
@media (prefers-reduced-motion: no-preference) {
  .nvf-faq :where(details.wp-block-details > :not(summary)) {
    animation: nvfFaqIn .18s ease both;
  }

  @keyframes nvfFaqIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Focus */
.nvf-faq summary:focus {
  outline: none;
}

.nvf-faq summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 55%, transparent);
  outline-offset: 2px;
  border-radius: calc(var(--nvf-faq-radius) - 4px);
}

/* Fallback if color-mix unsupported */
@supports not (color-mix(in srgb, #000 10%, transparent)) {
  .nvf-faq {
    --nvf-faq-paper: rgba(255, 255, 255, .92);
    --nvf-faq-border: rgba(15, 23, 42, .10);
    --nvf-faq-muted: rgba(15, 23, 42, .72);
    --nvf-faq-toggle-bg: rgba(255, 255, 255, .86);
  }
}

/* -----------------------------------------
   Mobile responsive (max-width: 768px)
   Reduce padding and border-radius on small screens
----------------------------------------- */
@media (max-width: 768px) {
  .nvf-faq {
    /* Reduce radius on mobile for tighter layout */
    --nvf-faq-radius: var(--nvf-radius-m, 12px);
    
    /* Reduce gap between FAQ items */
    --nvf-faq-gap: var(--nvf-space-xs, 8px);
    
    /* Reduce answer padding for compact mobile view */
    --nvf-faq-a-pad-y: 12px;
  }
  
  /* Reduce summary padding on mobile */
  .nvf-faq :where(details.wp-block-details > summary) {
    padding: 12px 14px;
    gap: 10px;
  }
  
  /* Smaller toggle button on mobile */
  .nvf-faq :where(details.wp-block-details > summary)::after {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
  
  /* Answer padding mobile */
  .nvf-faq :where(details.wp-block-details > :not(summary)) {
    padding: 12px 14px;
  }
  
  /* Reduce font size on mobile for readability */
  .nvf-faq.nvf-faq .nvf-faq__title {
    font-size: var(--nvf-faq-title-fs-mobile, clamp(18px, 5vw, 34px));
    margin-bottom: var(--nvf-space-xs, 8px);
  }
}

/* -----------------------------------------
   WordPress blockGap reset
   is-layout-flow / is-layout-constrained inject margin-block-start
   on children. FAQ manages its own spacing.
----------------------------------------- */
:where(.is-layout-flow) > .wp-block-novafolio-faq,
:where(.is-layout-constrained) > .wp-block-novafolio-faq {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* -----------------------------------------
   Defensive horizontal padding
   Blocks using get_block_wrapper_attributes() are excluded from
   the .entry-content > * containment rule (main.css). When placed
   directly in post content, horizontal padding prevents the inner
   content from touching viewport edges on narrow screens.
----------------------------------------- */
:is(.entry-content, .nvf-prose) > .wp-block-novafolio-faq {
  box-sizing: border-box;
}