/*
  Scrive Help Center – Guide/article custom CSS
  Paste into: Team Management → Custom CSS
  Same rules as the "Guides and articles" part of knowledge-base-new.css,
  for guides shown outside the Knowledge Base (widget, embeds).
*/
/* Fonts must be imported first – an @import after any rule is ignored */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;1,9..40,400&family=EB+Garamond:wght@400;500&display=swap');

:root {
  --scrive-yellow: #F9FF81;
  --scrive-yellow-light: #F9FDC7;
  --scrive-yellow-dark: #F7EA41;
  --scrive-grey: #EFEEE8;
  --scrive-white: #FFFFFF;
  --scrive-black: #1D1D1B;
  --scrive-grey-dark: #494A50;
  --scrive-text-secondary: var(--scrive-grey-dark);
  --scrive-olive: #61684B;
  --scrive-line: #D6D3D1;
  --scrive-red: #4F363E;
  --scrive-serif: 'EB Garamond', Georgia, serif;
  --scrive-sans: 'DM Sans', Helvetica, Arial, sans-serif;

  /* Width of the image pane on guide pages (desktop) – the text gets the rest */
  --scrive-media-width: 40%;
}

/* =====================================================
   Guides and articles
   ===================================================== */

/* ---------- Fonts ---------- */

/* !important: the font picked in Stonly's guide settings outranks plain class rules inside a step */
.ston-content-text,
.ston-content-text p,
.ston-content-text li,
.ston-content-text td,
.ston-content-text th,
.ston-content-text h3,
.ston-content-text h4 {
  font-family: var(--scrive-sans) !important;
  color: var(--scrive-black);
}

/* Level 1–2 headings use the serif, like headings in scrive.com articles */
.guide-title,
.ston-content-title,
.ston-content-text h1,
.ston-content-text h2,
.ston-content-text blockquote,
.ston-blockquote {
  font-family: var(--scrive-serif) !important;
}

.header-link,
.ston-breadcrumbs-list,
.ston-next-step-button button,
.ston-tile-grid .tile,
.ston-progress-bar-text {
  font-family: var(--scrive-sans);
}

/* ---------- Top bar ---------- */

.guide-title {
  font-weight: 400;
  color: var(--scrive-black);
}

.header-link {
  font-weight: 600;
  color: var(--scrive-black);
}

.ston-guide-top-menu-back,
.ston-breadcrumb-link {
  color: var(--scrive-black);
}

.ston-breadcrumbs-list {
  color: var(--scrive-text-secondary);
}

/* Guide page header (Stonly's own header on guide pages; the start page uses the custom header).
   Desktop only – on phones these links and the search sit in Stonly's menu */
@media only screen and (min-width: 769px) {
  /* Contact Support as the black button, like the custom header and "Try for free" on scrive.com */
  .ston-kb-guide-header .header-link[href*="contact-support"] {
    padding: 12px 16px;
    background-color: var(--scrive-black);
    color: var(--scrive-white);
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    text-decoration: none;
  }

  .ston-kb-guide-header .header-link[href*="contact-support"]:hover {
    background-color: var(--scrive-grey-dark);
    color: var(--scrive-white);
  }

  /* Search: wide enough for the full placeholder, with the same square black border as the start page.
     !important on the border: Stonly's own rule for the header search box outranks the general one */
  .ston-kb-guide-header .ston-search-bar[mode="inHeader"] {
    width: 320px;
  }

  .ston-kb-guide-header .ston-search-bar[mode="inHeader"] .ston-search-input-wrap {
    width: 100%;
    border: 1px solid var(--scrive-black) !important;
    border-radius: 0 !important;
  }
}

/* !important: with accessibility mode on, Stonly's own progress bar colours win otherwise */
.ston-progress-bar-line {
  background-color: var(--scrive-grey) !important;
}

.ston-progress-bar-bar {
  background-color: var(--scrive-black) !important;
}

/* Percentage badge on the progress bar ("16%"): black with white text instead of Stonly's teal.
   !important: Stonly sets the badge colour itself, and with accessibility mode on its rules win otherwise */
.ston-progress-bar-text {
  background-color: var(--scrive-black) !important;
  color: var(--scrive-white) !important;
  border-radius: 0 !important;
  font-weight: 600;
}

/* ---------- Image pane ---------- */

/* Same warm grey behind every image, whatever colour was picked in the editor.
   !important: the editor colour is an inline style on an element inside the pane,
   or sits on Stonly's own background and picture layers behind each image.
   The Wistia video player is left out: its buttons also carry inline backgrounds */
.ston-guide-media-canvas,
.ston-guide-media-canvas [style*="background"]:not(.wistia_embed *),
.ston-illustration-canvas,
.ston-illustration,
.ston-illustration [style*="background"]:not(.wistia_embed *),
.ston-compact-illustration,
.ston-compact-illustration [style*="background"]:not(.wistia_embed *),
.ston-image-gallery,
.ston-image-gallery [style*="background"]:not(.wistia_embed *),
[class*="MediaCanvas"],
[class*="MediaCanvas"] [style*="background"]:not(.wistia_embed *),
[class*="Illustration__VideoPlayerWrap"],
[class*="SingleImage__VideoBackground"]::before,
[class*="Illustrations__Backgrounds"],
[class*="SingleImage__Picture"]::before {
  background-color: var(--scrive-grey) !important;
  border-radius: 0;
}

/* Previous/next arrows on image galleries: brand yellow, pale yellow on hover, like the yellow buttons on scrive.com.
   Stonly already draws the arrow itself in black, which reads well on yellow */
.ston-guide-media-canvas [class*="GalleryButton"] {
  background-color: var(--scrive-yellow) !important;
  border-radius: 0;
}

@media (hover: hover) {
  .ston-guide-media-canvas [class*="GalleryButton"]:hover {
    background-color: var(--scrive-yellow-light) !important;
  }
}

/* Wistia video player: black play button and control bar instead of each video's own player colour.
   !important: Wistia sets the player colour as an inline style.
   The whole bar and its left/right button sections are included: on some videos the coloured
   layer only spans the progress bar, leaving the buttons on a transparent background */
.wistia_embed .w-big-play-button > div,
.wistia_embed .w-bottom-bar-lower,
.wistia_embed .w-bottom-bar-left,
.wistia_embed .w-bottom-bar-right,
.wistia_embed .w-bottom-bar-lower > div > div[style*="background"] {
  background-color: var(--scrive-black) !important;
}

@media (hover: hover) {
  .wistia_embed .w-big-play-button:hover > div {
    background-color: var(--scrive-grey-dark) !important;
  }
}

/* Image pane takes --scrive-media-width instead of half; Stonly stacks the panes on smaller screens */
@media only screen and (min-width: 1024px) {
  .ston-guide-media-canvas {
    flex: 0 0 var(--scrive-media-width);
    width: var(--scrive-media-width);
    max-width: var(--scrive-media-width);
  }

  /* Only when the step has a media pane: steps without media keep the full width */
  :has(> .ston-guide-media-canvas) > .ston-guide-content-canvas {
    flex: 1 1 calc(100% - var(--scrive-media-width));
    width: calc(100% - var(--scrive-media-width));
    max-width: calc(100% - var(--scrive-media-width));
  }

  /* In case the two panes sit in a grid instead of a flex row */
  :has(> .ston-guide-media-canvas):has(> .ston-guide-content-canvas) {
    grid-template-columns: var(--scrive-media-width) 1fr;
  }
}

/* ---------- Step text ---------- */

/* Reading column of about 70 characters; space sits on the title and text,
   not the canvas, because the canvas also holds the step footer */
.ston-content-title,
.ston-content-text,
.ston-tile-grid,
.ston-next-step-button,
.ston-choice-radio-buttons {
  max-width: 720px;
}

/* Steps without a media pane: the reading column is centered on the page, like scrive.com articles */
:has(> .ston-guide-content-canvas):not(:has(> .ston-guide-media-canvas)) .ston-content-title,
:has(> .ston-guide-content-canvas):not(:has(> .ston-guide-media-canvas)) .ston-content-text,
:has(> .ston-guide-content-canvas):not(:has(> .ston-guide-media-canvas)) .ston-tile-grid,
:has(> .ston-guide-content-canvas):not(:has(> .ston-guide-media-canvas)) .ston-next-step-button,
:has(> .ston-guide-content-canvas):not(:has(> .ston-guide-media-canvas)) .ston-choice-radio-buttons {
  margin-left: auto;
  margin-right: auto;
}

/* Step title – EB Garamond on the scrive.com scale: 48px desktop, 42px tablet, 32px phone */
.ston-content-title {
  font-size: 48px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: -0.01em;
  color: var(--scrive-black);
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Body text as on scrive.com: 16px on a 26px line */
.ston-content-text {
  font-size: 16px;
  line-height: 26px;
  padding-bottom: 48px;
}

.ston-content-text p {
  margin: 0 0 1.1em;
}

/* Images in the step text never overflow narrow screens */
.ston-content-text img {
  max-width: 100%;
  height: auto;
}

.ston-content-text li {
  margin-bottom: 0.4em;
}

/* Subheadings as in scrive.com articles: level 1–2 EB Garamond, level 3–4 bold DM Sans */
.ston-content-text h1,
.ston-content-text h2 {
  font-size: 32px;
  font-weight: 400;
  line-height: 42px;
  margin: 48px 0 16px;
}

.ston-content-text h3,
.ston-content-text h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  margin: 32px 0 8px;
}

.ston-content-text hr {
  border: 0;
  border-top: 1px solid var(--scrive-line);
  margin: 40px 0;
}

.ston-content-text a {
  color: var(--scrive-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .ston-content-text a:hover {
    background-color: var(--scrive-yellow);
  }
}

/* ---------- Quotes, tips and warnings ---------- */

/* Every callout box – tips, warnings, quotes and any other type.
   !important plus the doubled .content-text.ston-content-text: an older guide stylesheet sets tips
   light blue with ".content-text aside.tip { background: … !important }", so a weaker selector loses */
.content-text.ston-content-text aside.tip,
.content-text.ston-content-text aside.warning,
.ston-content-text aside,
.ston-content-text blockquote,
.ston-blockquote,
.tip,
.warning {
  background: var(--scrive-grey) !important;
  border-radius: 0 !important;
  color: var(--scrive-black);
}

/* Notes, quotes and any other callout: black left border */
.ston-content-text aside,
.ston-content-text blockquote,
.ston-blockquote {
  border-left: 4px solid var(--scrive-black) !important;
}

/* Tips and warnings keep their own border colour (more specific, so they win over the line above) */
.tip,
.ston-content-text aside.tip,
.content-text.ston-content-text aside.tip {
  border-left: 4px solid var(--scrive-olive) !important;
}

.warning,
.ston-content-text aside.warning,
.content-text.ston-content-text aside.warning {
  border-left: 4px solid var(--scrive-red) !important;
}

.ston-content-text blockquote,
.ston-blockquote {
  font-size: 1.25em;
  margin: 32px 0;
  padding: 20px 24px;
}

/* ---------- Tables ---------- */

.ston-content-text .table-wrapper {
  border: 1px solid var(--scrive-grey);
  border-radius: 0;
}

.ston-content-text table td,
.ston-content-text table th {
  border: 1px solid var(--scrive-grey);
  padding: 8px 12px;
}

.ston-content-text table th {
  background-color: var(--scrive-grey);
  font-weight: 600;
}

/* ---------- Step buttons (Back and Next) ---------- */

/* Replaces the old blue buttons from the previous custom code.
   Comes before the choice buttons below, so those keep their outlined style */
.button-wrap button {
  background-color: var(--scrive-black);
  border: 1px solid var(--scrive-black);
  border-radius: 0;
  box-shadow: none;
  color: var(--scrive-white);
  font-family: var(--scrive-sans);
  font-weight: 700;
}

.button-wrap button svg path {
  fill: var(--scrive-white);
}

/* Square icon-only Back button */
.button-wrap .back-button {
  width: 36px;
  height: 36px;
  padding: 0 7px;
}

@media (hover: hover) {
  .button-wrap button:hover {
    background-color: var(--scrive-grey-dark);
    border-color: var(--scrive-grey-dark);
    box-shadow: none;
  }
}

/* ---------- Choice buttons and tiles ---------- */

/* Outlined button, like scrive.com: turns black with white text on hover */
.ston-next-step-button button {
  background-color: var(--scrive-white);
  border: 1px solid var(--scrive-black);
  border-radius: 0;
  color: var(--scrive-black);
  font-weight: 700;
}

@media (hover: hover) {
  .ston-next-step-button button:hover {
    background-color: var(--scrive-black);
    color: var(--scrive-white);
  }
}

.ston-next-step-button button:disabled {
  opacity: 0.4;
}

/* Arrow icons follow the text colour (black, white on hover), overriding the step button rule above */
.ston-next-step-button button svg path {
  fill: currentColor;
}

.ston-tile-grid .tile {
  background-color: var(--scrive-grey);
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--scrive-black);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Keyboard focus works on every device; mouse hover only where there's a real pointer */
.ston-tile-grid .tile:focus-visible {
  background-color: var(--scrive-black);
  box-shadow: none;
  color: var(--scrive-white);
}

@media (hover: hover) {
  .ston-tile-grid .tile:hover {
    background-color: var(--scrive-black);
    box-shadow: none;
    color: var(--scrive-white);
  }
}

.ston-tile-grid .tile * {
  color: inherit;
}

/* Tile icons are images, so a filter turns them monochrome black (white on hover) */
.ston-tile-grid .tile-image {
  filter: grayscale(1) brightness(0);
}

.ston-tile-grid .tile:focus-visible .tile-image {
  filter: grayscale(1) brightness(0) invert(1);
}

@media (hover: hover) {
  .ston-tile-grid .tile:hover .tile-image {
    filter: grayscale(1) brightness(0) invert(1);
  }
}

/* ---------- Step footer ---------- */

/* Compact bar with the feedback, history and edit buttons */
.ston-steps-footer {
  height: auto;
  min-height: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ---------- Tablets ---------- */

@media only screen and (max-width: 1023px) {
  .ston-content-title {
    font-size: 42px;
    line-height: 50px;
  }
}

/* ---------- Phones and small tablets ---------- */

@media only screen and (max-width: 768px) {
  .ston-content-title {
    font-size: 32px;
    line-height: 42px;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .ston-content-text {
    padding-bottom: 32px;
  }

  .ston-content-text h1,
  .ston-content-text h2 {
    font-size: 26px;
    line-height: 34px;
    margin: 36px 0 12px;
  }

  .ston-content-text h3,
  .ston-content-text h4 {
    font-size: 20px;
    line-height: 28px;
    margin: 28px 0 8px;
  }

  .ston-content-text hr {
    margin: 28px 0;
  }

  .ston-content-text blockquote,
  .ston-blockquote {
    font-size: 1.15em;
    margin: 24px 0;
    padding: 16px;
  }

  /* Wide tables scroll sideways instead of squeezing the columns */
  .ston-content-text .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Full-width choice buttons with a comfortable tap height */
  .ston-next-step-button button {
    width: 100%;
    min-height: 48px;
  }
}

/* =====================================================
   Accessibility
   ===================================================== */

/* Keyboard focus: black ring with a 2px gap, like scrive.com, instead of the browser's blue */
:focus-visible {
  outline: 2px solid var(--scrive-black);
  outline-offset: 2px;
}

/* Text fields: the ring sits on the field's own edge, without the gap */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0;
}

/* Stonly moves focus to page sections (tabindex="-1") after loading a page, for screen readers.
   They aren't controls, so they get no ring */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* No hover animations for visitors who have reduced motion turned on */
@media (prefers-reduced-motion: reduce) {
  .ston-tile-grid .tile {
    transition: none;
  }
}