/* Reeoka Gallery Blue - scoped to the Stories section only.
   Tokens mirror the active Novamira design 'reeoka-gallery-blue'.
   Series accent (--rk-series) is used for eyebrow rules and heading
   underlines only, never on a button. */

body.reeoka-stories {
  --rk-bg: #F4F6F9;
  --rk-surface: #FFFFFF;
  --rk-ink: #141A21;
  --rk-muted: #5A6573;
  --rk-border: #DDE3EA;
  --rk-accent: #005AA4;
  --rk-series: #D99A2B;
  --rk-r-md: 12px;
  --rk-r-pill: 999px;

  background-color: var(--rk-bg);
  color: var(--rk-ink);
}

body.reeoka-stories,
body.reeoka-stories p,
body.reeoka-stories li,
body.reeoka-stories .wp-block-button__link {
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

body.reeoka-stories h1,
body.reeoka-stories h2,
body.reeoka-stories h3,
body.reeoka-stories h4,
body.reeoka-stories .wp-block-heading,
body.reeoka-stories .product_title {
  font-family: "Readex Pro", system-ui, sans-serif;
  font-weight: 600;
  color: var(--rk-ink);
  letter-spacing: -0.005em;
}

body.reeoka-stories h1,
body.reeoka-stories .product_title {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.06;
  margin-bottom: 14px;
}

body.reeoka-stories h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.14;
}

body.reeoka-stories h3 {
  font-size: 1.2rem;
  line-height: 1.25;
}

body.reeoka-stories .entry-content p,
body.reeoka-stories .entry-content li {
  line-height: 1.65;
  font-size: 1.0125rem;
}

/* A constrained layout centres any child narrower than the content width, which
   would float a short paragraph away from the heading above it. Keep the block
   at full content width and hold the reading measure with padding instead, so
   the text column starts on exactly the same left edge as the headings. */
body.reeoka-stories .entry-content > p {
  max-width: none;
  padding-right: max(0px, calc(100% - 66ch));
}

body.reeoka-stories .entry-content > p.rk-lead {
  padding-right: max(0px, calc(100% - 58ch));
}

body.reeoka-stories .entry-content > p.rk-note {
  padding-right: max(0px, calc(100% - 52ch));
}

body.reeoka-stories .rk-measure p {
  max-width: 66ch;
}

/* Eyebrow: the only place the series accent appears. */
body.reeoka-stories .rk-eyebrow {
  display: inline-block;
  max-width: none;
  margin: 0 0 18px;
  padding-top: 13px;
  border-top: 3px solid var(--rk-series);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rk-muted);
}

body.reeoka-stories .rk-lead {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--rk-muted);
  max-width: 56ch;
}

body.reeoka-stories .rk-note {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--rk-muted);
  max-width: 48ch;
}

body.reeoka-stories .rk-card {
  background: var(--rk-surface);
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-r-md);
  box-shadow: none;
}

body.reeoka-stories .wp-block-image img,
body.reeoka-stories .rk-card .wp-block-image img {
  border-radius: var(--rk-r-md);
}

/* Buttons: one locked action colour, pill radius, no shadow. */
body.reeoka-stories .wp-block-button__link,
body.reeoka-stories .wp-block-button .wp-block-button__link {
  background-color: var(--rk-accent);
  border: 1px solid var(--rk-accent);
  color: #FFFFFF;
  border-radius: var(--rk-r-pill);
  padding: 14px 30px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
}

body.reeoka-stories .wp-block-button__link:hover,
body.reeoka-stories .wp-block-button__link:focus {
  background-color: #004B8A;
  border-color: #004B8A;
  color: #FFFFFF;
}

body.reeoka-stories .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--rk-ink);
  border: 1px solid var(--rk-accent);
}

body.reeoka-stories .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--rk-accent);
  border-color: var(--rk-accent);
}

body.reeoka-stories a:focus-visible,
body.reeoka-stories .wp-block-button__link:focus-visible {
  outline: 2px solid var(--rk-accent);
  outline-offset: 2px;
}

body.reeoka-stories .entry-content a:not(.wp-block-button__link) {
  color: var(--rk-ink);
  text-decoration: underline;
  text-decoration-color: var(--rk-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.reeoka-stories .entry-content a:not(.wp-block-button__link):hover {
  color: var(--rk-accent);
}

/* Feeling chips */
body.reeoka-stories ul.rk-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.reeoka-stories ul.rk-chips li {
  background: var(--rk-surface);
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-r-pill);
  padding: 8px 17px;
  font-size: 0.94rem;
  color: var(--rk-ink);
}

/* Numbered steps */
body.reeoka-stories ol.rk-steps {
  margin: 0;
  padding-left: 1.25em;
}

body.reeoka-stories ol.rk-steps li {
  margin-bottom: 12px;
  max-width: 62ch;
}

body.reeoka-stories ol.rk-steps li::marker {
  color: var(--rk-accent);
  font-weight: 600;
}

body.reeoka-stories .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--rk-border);
  opacity: 1;
  margin: 0;
}

body.reeoka-stories .rk-hero .wp-block-column {
  align-self: center;
}

@media (max-width: 781px) {
  body.reeoka-stories .rk-hero .wp-block-column:first-child {
    margin-bottom: 8px;
  }
  body.reeoka-stories .rk-card {
    padding: 22px !important;
  }
}