/**
 * Sprout Health - Block editor styles
 *
 * Loaded on the front end and inside the block editor (via add_editor_style),
 * so blocks look the same while editing as they do on the live site.
 * style.css resets all margins/padding and list bullets; these rules restore
 * sensible defaults for content built with blocks.
 */

/* ==========================================================================
   Buttons (core/button) - match .btn pill style
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  border-radius: var(--radius-pill);
  border: none;
  background-color: var(--color-pink);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
  filter: brightness(0.92);
  color: #fff;
}

/* Keep the chosen text colour when a palette colour is picked */
.wp-block-button__link.has-text-color:hover,
.wp-block-button__link.has-text-color:focus {
  color: inherit;
}

/* Outline style */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  border: 2px solid currentColor;
  color: var(--color-primary);
  box-shadow: none;
  padding: calc(0.875rem - 2px) calc(1.75rem - 2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  filter: none;
}

/* ==========================================================================
   Text content inside blocks
   ========================================================================== */

/* Bulleted and numbered lists (style.css removes bullets globally) */
ul.wp-block-list,
.page-content ul {
  list-style: disc;
  padding-left: 1.5rem;
}

ol.wp-block-list,
.page-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

.wp-block-list li + li {
  margin-top: 0.35rem;
}

/* Spacing between blocks on simple pages (page.php) */
.page-content > * + * {
  margin-top: 1.25rem;
}

.page-content > h2,
.page-content > h3 {
  margin-top: 2rem;
}

/* Images */
.wp-block-image img {
  border-radius: var(--radius-xl);
}

.wp-block-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Links inside simple page text stay recognisable */
.page-content p a,
.page-content li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Editor-only adjustments
   ========================================================================== */

.editor-styles-wrapper {
  font-family: var(--font-body);
  color: var(--color-text);
}

/* style.css zeroes all padding; give the editing canvas breathing room
   (full-width sections still stretch edge to edge) */
.editor-styles-wrapper .is-root-container {
  padding: 2rem var(--container-padding) 4rem;
}

.editor-styles-wrapper .is-root-container > .alignfull {
  margin-left: calc(-1 * var(--container-padding));
  margin-right: calc(-1 * var(--container-padding));
  max-width: none;
}

.editor-styles-wrapper .editor-post-title {
  margin-bottom: 1.5rem;
}

/* Show bullets while editing a list */
.editor-styles-wrapper ul.wp-block-list { list-style: disc; }
.editor-styles-wrapper ol.wp-block-list { list-style: decimal; }

/* ==========================================================================
   Converted page content
   Utility classes replacing inline styles from the original HTML pages
   ========================================================================== */

.sh-text-center { text-align: center; }
.sh-narrow { max-width: 900px; margin-left: auto; margin-right: auto; }
.sh-mt-xs { margin-top: 0.5rem; }
.sh-mt-sm { margin-top: 0.75rem; }
.sh-mt-xl { margin-top: 3.5rem; }
.sh-mb-sm { margin-bottom: 1.25rem; }
.sh-mb-md { margin-bottom: 1.5rem; }
.sh-mb-lg { margin-bottom: 2rem; }
.sh-mb-xl { margin-bottom: 2.5rem; }
.sh-lead { font-size: 1.2rem; line-height: 1.8; color: var(--color-text-light); }
.sh-lead-sm { font-size: 1.15rem; line-height: 1.8; color: var(--color-text-light); }
.sh-lead-hero { font-size: 1.3rem; line-height: 1.8; opacity: 0.95; margin-top: 1.5rem; }
.sh-img-full img { width: 100%; border-radius: var(--radius-md); }
.sh-grad-purple-pink { background: linear-gradient(135deg, var(--color-primary), var(--color-pink)); }
.sh-grad-green-aqua { background: linear-gradient(135deg, var(--color-green), var(--color-aqua)); }
.sh-grad-coral-yellow { background: linear-gradient(135deg, var(--color-coral), var(--color-yellow)); }

/* Images converted from plain <img> tags: the block's <figure> wrapper is
   layout-transparent so the theme's existing image rules apply as before */
.wp-block-image.sh-img {
  display: contents;
}

/* Paragraph inside a text label/badge: inherit the label's text styles */
p.sh-p {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  color: inherit !important;
  text-align: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  max-width: none !important;
}

/* Image blocks standing in for CSS background images (hero slides) */
.wp-block-image.sh-bg-image {
  margin: 0;
}

.wp-block-image.sh-bg-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.wp-block-image.sh-bg-image::before {
  z-index: 1;
}

.sh-pos-35 img { object-position: center 35%; }

/* Phone icon for "Call us" buttons */
.sh-icon-phone::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Button colour styles - editor preview
   (on the front end the theme's .btn--* classes are used instead,
   see sprouthealth_render_button() in functions.php)
   ========================================================================== */

.editor-styles-wrapper .wp-block-button.btn--lg > .wp-block-button__link { padding: 1rem 2.25rem; font-size: 1.1rem; }
.editor-styles-wrapper .wp-block-button.is-style-pink > .wp-block-button__link { background: var(--color-pink); color: #fff; }
.editor-styles-wrapper .wp-block-button.is-style-yellow > .wp-block-button__link { background: var(--color-yellow); color: #1F2937; }
.editor-styles-wrapper .wp-block-button.is-style-purple > .wp-block-button__link { background: var(--color-primary); color: #fff; }
.editor-styles-wrapper .wp-block-button.is-style-coral > .wp-block-button__link { background: var(--color-coral); color: #fff; }
.editor-styles-wrapper .wp-block-button.is-style-white > .wp-block-button__link { background: #fff; color: var(--color-primary); }
.editor-styles-wrapper .wp-block-button.is-style-outline-purple > .wp-block-button__link { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); box-shadow: none; }
.editor-styles-wrapper .wp-block-button.is-style-outline-white > .wp-block-button__link { background: transparent; color: #fff; border: 2px solid #fff; box-shadow: none; }

/* Editor: show hero slides stacked so every slide can be edited */
.editor-styles-wrapper .hero-carousel { min-height: 0; overflow: visible; }
.editor-styles-wrapper .hero-slide { position: relative; opacity: 1; visibility: visible; min-height: 520px; }
.editor-styles-wrapper .hero-slide + .hero-slide { margin-top: 1.5rem; }
.editor-styles-wrapper .hero__content { position: relative; z-index: 2; }

/* Editor: background-style images fill their slide */
.editor-styles-wrapper .sh-bg-image { position: absolute; inset: 0; }
.editor-styles-wrapper .sh-bg-image .components-resizable-box__container {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

/* "Read More" is now a link rather than a <button>; match the button's line height */
a.team-read-more {
  line-height: normal;
}

/* Team member full bio: hidden on the page, shown in the "Read More" pop-up */
.team-card__bio {
  display: none;
}

.editor-styles-wrapper .team-card__bio {
  display: block;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--color-primary-light);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  text-align: left;
}

.editor-styles-wrapper .team-card__bio::before {
  content: 'Full bio (shown when "Read More" is clicked)';
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.editor-styles-wrapper .team-card__bio p + p {
  margin-top: 0.5rem;
}

/* Program pages */
.sh-mt-lg { margin-top: 2.5rem; }
.sh-pad-box { padding: 4rem 2rem; }
.sh-note-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-primary); margin-bottom: 0.75rem; }
.sh-note { color: var(--color-text-light); font-size: 1.1rem; max-width: 500px; margin: 0 auto; }
.sh-pad-box svg { margin: 0 auto 1.5rem; }

/* Editor: embedded PDF shows as a file link with a hint */
.editor-styles-wrapper .wp-block-file.sh-pdf-embed {
  padding: 2rem;
  border: 2px dashed var(--color-primary-light);
  border-radius: var(--radius-lg);
  text-align: center;
}

.editor-styles-wrapper .wp-block-file.sh-pdf-embed::before {
  content: 'PDF shown on the page (use "Replace" in the toolbar to change it)';
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--color-primary);
}