/* ============================================================================
 * Loveable landing overrides
 * ----------------------------------------------------------------------------
 * The theme's own style.css ships a vendored Tailwind build whose utilities
 * collide with the landing build (e.g. it defines `.grid-cols-1` but none of
 * the `lg:` responsive variants, so landing grids get stuck at one column).
 * These rules are scoped under `.zt-loveable`, giving them a higher specificity
 * (0,2,0) than the theme's bare utilities (0,1,0) so they win regardless of
 * stylesheet load order. Loaded only on the Loveable Landing template.
 * ========================================================================== */

/* --- Responsive grids (hero + section two-column layouts) ----------------- */
@media (min-width: 1024px) {
  .zt-loveable .lg\:grid-cols-2            { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zt-loveable .lg\:grid-cols-\[1\.1fr_1fr\] { grid-template-columns: 1.1fr 1fr; }
  .zt-loveable .lg\:grid-cols-\[1fr_1\.1fr\] { grid-template-columns: 1fr 1.1fr; }
  .zt-loveable .lg\:grid-cols-\[1\.4fr_1fr\] { grid-template-columns: 1.4fr 1fr; }
  .zt-loveable .lg\:grid-cols-\[1fr_1\.4fr\] { grid-template-columns: 1fr 1.4fr; }
  .zt-loveable .lg\:grid-cols-\[auto_1fr\]   { grid-template-columns: auto 1fr; }
}

/* --- CTA links: the theme's `a { color/text-decoration: inherit }` preflight
 *     bled a dark colour + underline onto the button links. Force the design
 *     colours and decoration. The hover state is re-asserted at higher
 *     specificity so the outline button still flips to white text on hover. -- */
.zt-loveable .btn-primary,
.zt-loveable .btn-outline {
  text-decoration: none;
}
.zt-loveable a.btn-primary { color: var(--accent-foreground); }
.zt-loveable a.btn-outline { color: var(--primary); }
.zt-loveable a.btn-outline:hover { color: var(--primary-foreground); } /* teal bg + white text */

/* --- FAQ accordion --------------------------------------------------------
 *  The export emits a plain, semantic structure:
 *    .faq-list > .faq-item > (h3.faq-question + .faq-answer)
 *  These classes aren't Tailwind utilities, so the theme styles them here and
 *  the JS toggles `.is-open` on the .faq-item. Collapsed by default. */
.zt-loveable .faq-list { width: 100%; }

.zt-loveable .faq-item { border-bottom: 1px solid var(--border, #e5e7eb); }

.zt-loveable .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1rem 0;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--foreground, #1a2c2c);
  transition: color .2s ease;
}
.zt-loveable .faq-question:hover { color: var(--primary, #0d657d); }

/* CSS chevron (down) drawn from borders — rotates up when open */
.zt-loveable .faq-question::after {
  content: "";
  flex: 0 0 auto;
  width: .6rem;
  height: .6rem;
  margin-top: -.25rem;
  border-right: 2px solid var(--muted-foreground, #5a7282);
  border-bottom: 2px solid var(--muted-foreground, #5a7282);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.zt-loveable .faq-answer {
  display: none;
  padding: 0 0 1.25rem;
  color: var(--foreground, #1a2c2c);
  opacity: .85;
  line-height: 1.7;
}
.zt-loveable .faq-answer p { margin: 0 0 .75rem; }
.zt-loveable .faq-answer p:last-child { margin-bottom: 0; }

.zt-loveable .faq-item.is-open .faq-answer { display: block; }
.zt-loveable .faq-item.is-open .faq-question { color: var(--primary, #0d657d); }
.zt-loveable .faq-item.is-open .faq-question::after { transform: rotate(-135deg); }

/* --- In-page anchor scroll: keep targets clear of the sticky header. ------ */
.zt-loveable section[id],
.zt-loveable [id] {
  scroll-margin-top: 96px;
}