/*
 * Block adaptations: design components (design/components/bundle.css) applied to core block wrappers.
 * Hand-written, tokens only (no new values). Loaded after theme.css, on the front end and in the editor.
 */

/* Pattern wrappers are core/group blocks: drop the flow-layout top margins inside the components. */
.nd-tip > *,
.nd-proscons > *,
.nd-proscons__col > *,
.nd-cta > *,
.nd-faq > * {
  margin-block-start: 0;
}

.nd-proscons__col > .nd-proscons__title + * {
  margin-block-start: 0;
}

/* Comparison table pattern: core/table with the .nd-table-wrap frame. */
.nd-table-wrap.wp-block-table {
  margin: var(--space-8) 0;
}

.nd-table-wrap.wp-block-table table {
  margin: 0;
  min-width: 520px;
  border: 0;
}

.nd-table-wrap.wp-block-table figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

/* CTA pattern: the button sits in core/buttons. */
.nd-cta .wp-block-buttons {
  margin: 0;
}

@media (max-width: 720px) {
  .nd-cta .wp-block-button,
  .nd-cta .wp-block-button__link {
    width: 100%;
  }
}

/* Mobile menu group label links to the top-level item (production URL kept on mobile). */
.nd-mobile-menu__group a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: inherit;
  text-decoration: none;
}

.nd-mobile-menu__group a:hover {
  color: var(--color-magenta);
  text-decoration: underline;
}

/* Long unbroken strings in production content (bare URLs) must not cause horizontal scroll at 320 px. */
.nd-content {
  overflow-wrap: break-word;
}

/* Mobile menu: a top-level item without children after a group starts its own block, so it does not read as
   part of the group above (production order: Deittipalvelut, Deittisivut, Rakkaustestit, Kokemuksia, Blogi). */
.nd-mobile-menu .nd-nav__list + .nd-nav__list--single,
.nd-mobile-menu .nd-nav__list--single + .nd-mobile-menu__group {
  margin-top: var(--space-5);
}

.nd-mobile-menu .nd-nav__list--single + .nd-nav__list--single {
  margin-top: 0;
}

/* core/table: wp-block-styles adds dark cell borders; the design uses horizontal lines only. */
.nd-content .wp-block-table th,
.nd-content .wp-block-table td {
  border: 0;
  border-bottom: 1px solid var(--color-line);
}

/* Editor: editor.css maps .nd-content to the root container; centre it like the front-end column. */
.editor-styles-wrapper .is-root-container {
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.editor-styles-wrapper .editor-post-title {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Pros and cons pattern: the design's plus and minus icons. The paragraph block cannot keep an SVG, so the icon
   is a CSS mask in the text colour (same 22 px size and stroke as design/components/ProsCons). */
.nd-proscons__title::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--nd-proscons-icon) center / contain no-repeat;
  mask: var(--nd-proscons-icon) center / contain no-repeat;
}

.nd-proscons__col--pros .nd-proscons__title {
  --nd-proscons-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

.nd-proscons__col--cons .nd-proscons__title {
  --nd-proscons-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}

/* Service card, malli "ilman-kuvaa" (Elementor loop template 1032): logo and button only. */
.nd-service--compact {
  grid-template-columns: 180px 1fr;
  grid-template-areas: "logo action";
}

.nd-service--compact .nd-service__action {
  justify-items: end;
}

.nd-service--compact .nd-service__action .nd-button {
  width: auto;
}

.nd-service--compact.nd-service--no-image {
  grid-template-columns: 1fr auto;
  grid-template-areas: "body action";
}

/* Logo and name link to the service like in production (templates 856 and 1032). */
.nd-service__logo a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.nd-service__name a {
  color: inherit;
  text-decoration: none;
}

.nd-service__name a:hover,
.nd-service__name a:focus-visible {
  color: var(--color-magenta);
  text-decoration: underline;
}

@container (max-width: 480px) {
  .nd-service--compact {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "action";
  }

  .nd-service--compact .nd-service__action {
    justify-items: stretch;
  }

  .nd-service--compact .nd-service__action .nd-button {
    width: 100%;
  }
}

/* Single service page: the H1 carries the name, the card has logo, description and button. */
.nd-service--single {
  grid-template-columns: 180px 1fr;
  grid-template-areas:
    "logo body"
    "logo action";
}

.nd-service--single .nd-service__action {
  justify-items: start;
}

.nd-service--single.nd-service--no-image {
  grid-template-columns: 1fr;
  grid-template-areas:
    "body"
    "action";
}

@container (max-width: 480px) {
  .nd-service--single {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "body"
      "action";
  }

  .nd-service--single .nd-service__action {
    justify-items: stretch;
  }
}

/* [nd_artikkelit sarakkeet="n"]: at most n cards per row, fewer on narrow screens (auto-fill below). */
@media (min-width: 900px) {
  .nd-card-grid--cols-1 {
    grid-template-columns: 1fr;
  }

  .nd-card-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nd-card-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nd-card-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Front page: converted content uses the full container, text keeps the reading measure. */
.nd-content--front {
  max-width: none;
}

.nd-content--front > .nd-card-grid {
  max-width: none;
}

/* Elementor builder pages (spec 6): full width, Elementor handles the layout. */
.nd-builder {
  width: 100%;
}

/* Rank Math FAQ block (LS-NETT5: converted Elementor FAQs keep their FAQPage schema): same frame as the FAQ pattern. */
.rank-math-block {
  margin: var(--space-8) 0;
}

.rank-math-list-item {
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-line-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-ink);
}

.rank-math-list-item + .rank-math-list-item {
  margin-top: var(--space-3);
}

.rank-math-list-item .rank-math-question {
  margin: 0;
  font-size: var(--text-label);
}

.rank-math-list-item .rank-math-answer > * {
  margin-block: var(--space-3) 0;
}