/* ==========================================================================
   Snug Scent - block-editor content (journal posts)

   Posts are written in the WordPress block editor and rendered by the Bricks
   Post Content element. That markup is not made of Bricks elements, so no
   global class can reach it: its styling lives here, in one file loaded on the
   front end (inside .ss-prose, the class on the Post Content element) AND in
   the block editor (.editor-styles-wrapper), so both read the same.

   Values come from the article comp (Website/article.css) and DS tokens only.
   Block styles registered in inc/editor-blocks.php:
     core/paragraph  is-style-ss-label         label line (spaced caps, olive)
     core/paragraph  is-style-ss-capsule       answer capsule (sage rule, left)
     core/group      is-style-ss-short-answer  "The short answer" panel
     core/group      is-style-ss-callout       "Insider tip" / "If you have pets"
     core/group      is-style-ss-pick          product pick ("Our pick for ...")
   ========================================================================== */

/* ---------- Rhythm ---------- */

/* Long URLs written out as link text (the policies have several) wrap
   instead of pushing the page sideways on a phone. */
:is(.ss-prose, .editor-styles-wrapper) {
  overflow-wrap: break-word;
}

:is(.ss-prose, .editor-styles-wrapper) p {
  margin: 0 0 var(--ss-space-4);
}

.ss-prose > :last-child,
.ss-prose p:last-child {
  margin-bottom: 0;
}

:is(.ss-prose, .editor-styles-wrapper) h2 {
  margin: var(--ss-space-8) 0 var(--ss-space-4);
  scroll-margin-top: var(--ss-space-9);
}

.ss-prose > h2:first-child {
  margin-top: 0;
}

:is(.ss-prose, .editor-styles-wrapper) h3 {
  margin: var(--ss-space-6) 0 var(--ss-space-3);
  font-size: var(--ss-text-md);
  scroll-margin-top: var(--ss-space-9);
}

:is(.ss-prose, .editor-styles-wrapper) h4 {
  margin: var(--ss-space-5) 0 var(--ss-space-3);
  font-size: var(--ss-text-base);
}

:is(.ss-prose, .editor-styles-wrapper) a:not([class*="wp-block-button"]) {
  color: var(--ss-text-brand);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* ---------- Lists (comp .art-list) ---------- */

:is(.ss-prose, .editor-styles-wrapper) :is(ul, ol):not(.blocks-gallery-grid, .wp-block-gallery, .wp-block-rank-math-toc-block *) {
  margin: 0 0 var(--ss-space-5);
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ss-space-3);
}

:is(.ss-prose, .editor-styles-wrapper) ul:not(.blocks-gallery-grid, .wp-block-gallery, .wp-block-rank-math-toc-block *) > li {
  position: relative;
  padding-left: var(--ss-space-6);
}

:is(.ss-prose, .editor-styles-wrapper) ul:not(.blocks-gallery-grid, .wp-block-gallery, .wp-block-rank-math-toc-block *) > li::before {
  content: "";
  position: absolute;
  left: var(--ss-space-2);
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-olive-600);
}

:is(.ss-prose, .editor-styles-wrapper) ol:not(.wp-block-rank-math-toc-block *) {
  counter-reset: ss-steps;
}

:is(.ss-prose, .editor-styles-wrapper) ol:not(.wp-block-rank-math-toc-block *) > li {
  position: relative;
  padding-left: var(--ss-space-6);
  counter-increment: ss-steps;
}

:is(.ss-prose, .editor-styles-wrapper) ol:not(.wp-block-rank-math-toc-block *) > li::before {
  content: counter(ss-steps) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--ss-text-sm);
  font-weight: 600;
  color: var(--ss-olive-600);
}

:is(.ss-prose, .editor-styles-wrapper) li :is(ul, ol) {
  margin: var(--ss-space-3) 0 0;
}

/* ---------- Images ---------- */

:is(.ss-prose, .editor-styles-wrapper) .wp-block-image {
  margin: var(--ss-space-6) 0;
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-image img {
  border-radius: var(--ss-radius-md);
  height: auto;
}

:is(.ss-prose, .editor-styles-wrapper) :is(.wp-block-image, .wp-block-table, .wp-block-gallery) .wp-element-caption {
  margin-top: var(--ss-space-3);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--ss-text-xs);
  line-height: var(--ss-leading-label);
  color: var(--ss-text-muted);
  text-align: left;
}

/* ---------- Tables (comp .art-table) ---------- */

:is(.ss-prose, .editor-styles-wrapper) .wp-block-table {
  margin: var(--ss-space-6) 0;
  overflow-x: auto;
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ss-surface-card);
  border: var(--ss-border-width) solid var(--ss-border-hairline);
  border-radius: var(--ss-radius-md);
  overflow: hidden;
}

/* Auto layout, as the comp: columns size to their content and the figure
   scrolls sideways when they do not fit. Core's "Fixed width table cells" (on
   by default for new tables) splits the width equally instead, which breaks
   words mid-way and spills the nowrap headers into their neighbours. */
:is(.ss-prose, .editor-styles-wrapper) .wp-block-table table.has-fixed-layout {
  table-layout: auto;
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-table :is(th, td) {
  padding: var(--ss-space-3) var(--ss-space-4);
  text-align: left;
  vertical-align: top;
  font-size: var(--ss-text-sm);
  line-height: var(--ss-leading-small);
  border: 0;
  border-bottom: var(--ss-border-width) solid var(--ss-border-hairline);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-table :is(thead th, thead td) {
  background: var(--ss-olive-100);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--ss-text-xs);
  line-height: var(--ss-leading-label);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
  color: var(--ss-olive-600);
  white-space: nowrap;
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-table tbody th {
  font-weight: 500;
  color: var(--ss-text-strong);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-table thead {
  border-bottom: 0;
}

/* ---------- Quote (DS pull quote) ---------- */

:is(.ss-prose, .editor-styles-wrapper) .wp-block-quote {
  margin: var(--ss-space-7) 0;
  padding: 0 0 0 var(--ss-space-5);
  border-left: 2px solid var(--ss-olive-600);
  color: var(--ss-olive-700);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-quote p {
  font-family: "Lustria", Georgia, "Times New Roman", serif;
  font-size: var(--ss-text-lg);
  line-height: var(--ss-leading-snug);
  color: inherit;
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-quote cite {
  display: block;
  margin-top: var(--ss-space-3);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--ss-text-xs);
  font-style: normal;
  line-height: var(--ss-leading-label);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
  color: var(--ss-text-muted);
}

/* ---------- Separator ---------- */

:is(.ss-prose, .editor-styles-wrapper) .wp-block-separator {
  margin: var(--ss-space-7) 0;
  border: 0;
  border-top: var(--ss-border-width) solid var(--ss-border-hairline);
  opacity: 1;
}

/* ---------- FAQ: core Details block as the comp accordion (.pdp-acc) ---------- */

:is(.ss-prose, .editor-styles-wrapper) .wp-block-details {
  margin: 0;
  border-bottom: var(--ss-border-width) solid var(--ss-border-hairline);
}

:is(.ss-prose, .editor-styles-wrapper) :not(.wp-block-details) + .wp-block-details {
  margin-top: var(--ss-space-5);
  border-top: var(--ss-border-width) solid var(--ss-border-hairline);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-5);
  padding-block: var(--ss-space-5);
  cursor: pointer;
  list-style: none;
  font-family: "Lustria", Georgia, "Times New Roman", serif;
  font-size: var(--ss-text-lg);
  line-height: var(--ss-leading-snug);
  color: var(--ss-olive-600);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-details > summary::-webkit-details-marker {
  display: none;
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-details > summary::after {
  content: "";
  flex-shrink: 0;
  width: var(--ss-icon-md);
  height: var(--ss-icon-md);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--ss-duration-normal) var(--ss-ease-out);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-details[open] > summary::after {
  transform: rotate(180deg);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-details > summary:hover {
  color: var(--ss-olive-700);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-details > summary:focus-visible {
  outline: var(--ss-focus-ring-width) solid var(--ss-focus-ring);
  outline-offset: var(--ss-focus-ring-offset);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-details > :not(summary) {
  padding-right: var(--ss-space-7);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-details > :last-child:not(summary) {
  padding-bottom: var(--ss-space-5);
}

/* ---------- Buttons (core Buttons, mirrors Theme Style primary / secondary) ---------- */

:is(.ss-prose, .editor-styles-wrapper) .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-3);
  margin: 0 0 var(--ss-space-4);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ss-tap-min);
  padding: var(--ss-space-3) var(--ss-space-6);
  border: 1.5px solid var(--ss-action);
  border-radius: var(--ss-radius-pill);
  background: var(--ss-action);
  color: var(--ss-action-text);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--ss-text-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ss-duration-normal) var(--ss-ease-out), color var(--ss-duration-normal) var(--ss-ease-out);
}

:is(.ss-prose, .editor-styles-wrapper) .wp-block-button__link:hover {
  background: var(--ss-action-hover);
  border-color: var(--ss-action-hover);
  color: var(--ss-action-text);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--ss-border-strong);
  color: var(--ss-olive-600);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-outline .wp-block-button__link:hover {
  background: var(--ss-olive-100);
  color: var(--ss-olive-700);
}

/* ---------- Block style: Label (paragraph) ---------- */

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-label {
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
  margin: 0 0 var(--ss-space-3);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--ss-text-xs);
  font-weight: 500;
  line-height: var(--ss-leading-label);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
  color: var(--ss-olive-600);
}

/* ---------- Block style: Lead (paragraph) ---------- */

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-lead {
  font-size: var(--ss-text-md);
  line-height: var(--ss-leading-snug);
  color: var(--ss-text-strong);
}

/* ---------- Block style: Answer capsule (paragraph; comp .art-capsule) ---------- */

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-capsule {
  margin: 0 0 var(--ss-space-5);
  padding-left: var(--ss-space-5);
  border-left: 2px solid var(--ss-sage-300);
  font-size: var(--ss-text-md);
  line-height: var(--ss-leading-snug);
  color: var(--ss-text-strong);
}

/* ---------- Block style: The short answer (group; comp .art-tldr) ---------- */

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-short-answer {
  margin: 0 0 var(--ss-space-7);
  padding: var(--ss-space-5) var(--ss-space-6);
  background: var(--ss-olive-100);
  border-left: 3px solid var(--ss-olive-600);
  border-radius: var(--ss-radius-md);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-short-answer p:not(.is-style-ss-label) {
  max-width: var(--ss-measure-lead);
  font-size: var(--ss-text-md);
  line-height: var(--ss-leading-snug);
  color: var(--ss-text-strong);
}

/* ---------- Block style: Callout (group; comp .art-callout) ---------- */

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-callout {
  margin: var(--ss-space-6) 0;
  padding: var(--ss-space-5);
  background: var(--ss-cream-100);
  border-radius: var(--ss-radius-md);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-callout .is-style-ss-label::before {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9.536V7a4 4 0 0 1 4-4h1.5a.5.5 0 0 1 .5.5V5a4 4 0 0 1-4 4 4 4 0 0 0-4 4c0 2 1 3 1 5a5 5 0 0 1-1 3'/%3E%3Cpath d='M4 9a5 5 0 0 1 8 4 5 5 0 0 1-8-4'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9.536V7a4 4 0 0 1 4-4h1.5a.5.5 0 0 1 .5.5V5a4 4 0 0 1-4 4 4 4 0 0 0-4 4c0 2 1 3 1 5a5 5 0 0 1-1 3'/%3E%3Cpath d='M4 9a5 5 0 0 1 8 4 5 5 0 0 1-8-4'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A group's blocks sit in .wp-block-group__inner-container on the front end
   (Bricks is a classic theme) and directly in the group in the editor. */
:is(.ss-prose, .editor-styles-wrapper) :is(.is-style-ss-callout, .is-style-ss-short-answer, .is-style-ss-pick) > :last-child,
:is(.ss-prose, .editor-styles-wrapper) :is(.is-style-ss-callout, .is-style-ss-short-answer, .is-style-ss-pick) > .wp-block-group__inner-container > :last-child {
  margin-bottom: 0;
}

/* ---------- Block style: Product pick (group; comp .art-cta) ----------
   Pattern shape: group.is-style-ss-pick > columns > [copy column, image column].
   Core Columns does the two-up and stacks it on small screens. */

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick {
  margin: var(--ss-space-8) 0;
  padding: var(--ss-space-6);
  background: var(--ss-surface-card);
  border: var(--ss-border-width) solid var(--ss-olive-600);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow-sm);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick .wp-block-columns {
  margin: 0;
  gap: var(--ss-space-6);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick :is(h2, h3) {
  margin: 0 0 var(--ss-space-4);
  font-size: var(--ss-text-lg);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick .wp-block-image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ss-radius-md);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick .wp-block-image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--ss-duration-slow) var(--ss-ease-out);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick .wp-block-image a:hover img {
  transform: scale(1.03);
}

/* Review excerpts under the buttons: a Quote block inside the pick reads as proof. */
:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick .wp-block-quote {
  margin: var(--ss-space-4) 0 0;
  padding: var(--ss-space-4) 0 0;
  border-left: 0;
  border-top: var(--ss-border-width) solid var(--ss-border-hairline);
  color: var(--ss-text-body);
}

:is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick .wp-block-quote p {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--ss-text-sm);
  line-height: var(--ss-leading-small);
}

/* ---------- Front end only ---------- */

/* The template's sticky table of contents replaces Rank Math's in-content one
   (26 older posts carry it); the block stays in the content and in the editor. */
.ss-prose .wp-block-rank-math-toc-block {
  display: none;
}

@media (max-width: 767px) {
  :is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick {
    padding: var(--ss-space-5);
  }

  :is(.ss-prose, .editor-styles-wrapper) .is-style-ss-pick .wp-block-image img {
    aspect-ratio: 16 / 9;
  }
}