/*
 * Custom TipTap Editor Styles - VW-Based Typography
 * Matches your existing aps-default.css pattern
 *
 * USAGE INSTRUCTIONS FOR CONTENT EDITORS:
 *
 * 1. Use Source Editor (</> button) to add custom classes
 * 2. Available classes:
 *    - Font sizes: .text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl
 *    - Colors: .text-primary, .text-secondary, .text-dark
 *    - Fonts: .font-quicksand, .font-source-sans, .font-open-sans
 *    - Weights: .font-light, .font-regular, .font-medium, .font-semibold, .font-bold
 *
 * Example: <p class="text-xl text-primary font-bold">Large teal bold text</p>
 *
 * Sizing note: all sizes are pure vw so text scales uniformly with the layout
 * (no clamp() freezing at a min/max). The vw rates are the design's intended
 * rates and match aps-default.css (paragraph 1.2vw, headings 3.2/3/2.2vw, ...).
 */

/* Base Typography */
.umb-rte {
  font-family: "Quicksand", sans-serif;
  line-height: 1.6;
}

/* IMPORTANT: Apply styles to both editor and frontend */
.umb-rte,
.text-content,
.text-content-1,
.text-content-2 {
  font-family: "Quicksand", sans-serif;
  /* Prevent long words / unbroken strings from pushing past their box and
     causing horizontal page overflow on mobile (HPI, MVPI, Blended Learning). */
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* Headings with VW-based sizing (matching your aps-default.css pattern) */
.umb-rte h1 {
  font-size: 3.2vw; /* Large heading */
  font-weight: 700;
  color: #333;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.umb-rte h2 {
  font-size: 3vw; /* Medium heading */
  font-weight: 600;
  color: #333;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.umb-rte h3 {
  font-size: 2.2vw; /* Small heading */
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.umb-rte h4 {
  font-size: 1.8vw;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.875rem;
  line-height: 1.4;
}

.umb-rte h5 {
  font-size: 1.5vw;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.umb-rte h6 {
  font-size: 1.2vw;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.625rem;
  line-height: 1.5;
}

/* Paragraph Text */
.umb-rte p {
  font-size: 1.2vw;
  font-weight: 400;
  color: #737373;
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* Legacy Color Classes - Keep for backward compatibility */
.umb-rte .text-primary,
.text-content .text-primary {
  color: #00a99d !important;
}

.umb-rte .text-secondary,
.text-content .text-secondary {
  color: #737373 !important;
}

.umb-rte .text-dark,
.text-content .text-dark {
  color: #333 !important;
}

.umb-rte .text-light,
.text-content .text-light {
  color: #f8f9fa !important;
}

/* APS Font Family Classes - Unique naming */
.umb-rte .aps-font-quicksand,
.text-content .aps-font-quicksand {
  font-family: "Quicksand", sans-serif !important;
}

.umb-rte .aps-font-source-sans,
.text-content .aps-font-source-sans {
  font-family: "Source Sans Pro", sans-serif !important;
}

.umb-rte .aps-font-open-sans,
.text-content .aps-font-open-sans {
  font-family: "Open Sans", sans-serif !important;
}

.umb-rte .aps-font-condensed,
.text-content .aps-font-condensed {
  font-family: "Open Sans Condensed", sans-serif !important;
  font-stretch: condensed;
}

/* APS Heading Styles - Matching your block1 VW system */
.umb-rte .aps-heading-main,
.text-content .aps-heading-main {
  font-size: 3.2vw !important;
  font-weight: bold !important;
  font-family: "Open Sans Condensed", sans-serif !important;
  font-stretch: condensed !important;
  line-height: 1 !important;
  color: #333 !important;
}

.umb-rte .aps-heading-section,
.text-content .aps-heading-section {
  font-size: 3vw !important;
  font-weight: 600 !important;
  font-family: "Quicksand", sans-serif !important;
  color: #333 !important;
}

.umb-rte .aps-heading-sub,
.text-content .aps-heading-sub {
  font-size: 2.2vw !important;
  font-weight: 600 !important;
  font-family: "Quicksand", sans-serif !important;
  color: #333 !important;
}

.umb-rte .aps-heading-small,
.text-content .aps-heading-small {
  font-size: 1.8vw !important;
  font-weight: 500 !important;
  font-family: "Quicksand", sans-serif !important;
  color: #333 !important;
}

.umb-rte .aps-subtitle,
.text-content .aps-subtitle {
  font-size: 2.2vw !important;
  font-weight: 400 !important;
  font-family: "Quicksand", sans-serif !important;
  color: #737373 !important;
}

.umb-rte .aps-paragraph,
.text-content .aps-paragraph {
  font-size: 1.2vw !important;
  font-weight: 400 !important;
  font-family: "Quicksand", sans-serif !important;
  color: #737373 !important;
  line-height: 1.6 !important;
  margin: 1.5vw 0 !important; /* VW-based margin */
}

.umb-rte .aps-paragraph-tight,
.text-content .aps-paragraph-tight {
  font-size: 1.2vw !important;
  font-weight: 400 !important;
  font-family: "Quicksand", sans-serif !important;
  color: #737373 !important;
  line-height: 1.6 !important;
  margin: 0 !important; /* No margin */
}

.umb-rte .aps-paragraph-compact,
.text-content .aps-paragraph-compact {
  font-size: 1.2vw !important;
  font-weight: 400 !important;
  font-family: "Quicksand", sans-serif !important;
  color: #737373 !important;
  line-height: 1.6 !important;
  margin: 0.8vw 0 !important; /* Small VW-based margin */
}

/* APS Brand Colors - Unique naming */
.umb-rte .aps-color-primary,
.text-content .aps-color-primary {
  color: #00a99d !important;
}

.umb-rte .aps-color-secondary,
.text-content .aps-color-secondary {
  color: #737373 !important;
}

.umb-rte .aps-color-dark,
.text-content .aps-color-dark {
  color: #333 !important;
}

.umb-rte .aps-color-light,
.text-content .aps-color-light {
  color: #f8f9fa !important;
}

/* APS Text Sizes - Unique naming with VW units */
.umb-rte .aps-text-xs,
.text-content .aps-text-xs {
  font-size: 0.8vw !important;
}

.umb-rte .aps-text-sm,
.text-content .aps-text-sm {
  font-size: 1vw !important;
}

.umb-rte .aps-text-base,
.text-content .aps-text-base {
  font-size: 1.2vw !important;
}

.umb-rte .aps-text-lg,
.text-content .aps-text-lg {
  font-size: 1.5vw !important;
}

.umb-rte .aps-text-xl,
.text-content .aps-text-xl {
  font-size: 1.8vw !important;
}

.umb-rte .aps-text-2xl,
.text-content .aps-text-2xl {
  font-size: 2.2vw !important;
}

.umb-rte .aps-text-3xl,
.text-content .aps-text-3xl {
  font-size: 3vw !important;
}

.umb-rte .aps-text-4xl,
.text-content .aps-text-4xl {
  font-size: 3.5vw !important;
}

/* APS Underline Blocks - Like your block1 underline system */
.umb-rte .aps-underline-teal,
.text-content .aps-underline-teal {
  width: 9vw !important;
  height: 1.2vw !important;
  margin: 1rem 0 !important;
  border-radius: 2px !important;
  background-color: #00a99d !important;
  display: block !important;
}

.umb-rte .aps-underline-gray,
.text-content .aps-underline-gray {
  width: 9vw !important;
  height: 1.2vw !important;
  margin: 1rem 0 !important;
  border-radius: 2px !important;
  background-color: #737373 !important;
  display: block !important;
}

.umb-rte .aps-underline-dark,
.text-content .aps-underline-dark {
  width: 9vw !important;
  height: 1.2vw !important;
  margin: 1rem 0 !important;
  border-radius: 2px !important;
  background-color: #333 !important;
  display: block !important;
}

.umb-rte .aps-underline-red,
.text-content .aps-underline-red {
  width: 9vw !important;
  height: 1.2vw !important;
  margin: 1rem 0 !important;
  border-radius: 2px !important;
  background-color: #ff6b6b !important;
  display: block !important;
}

.umb-rte .aps-underline-blue,
.text-content .aps-underline-blue {
  width: 9vw !important;
  height: 1.2vw !important;
  margin: 1rem 0 !important;
  border-radius: 2px !important;
  background-color: #45b7d1 !important;
  display: block !important;
}

/* Mobile responsive underlines - Like your block1 */
@media screen and (max-width: 680px) {
  .umb-rte .aps-underline-teal,
  .umb-rte .aps-underline-gray,
  .umb-rte .aps-underline-dark,
  .umb-rte .aps-underline-red,
  .umb-rte .aps-underline-blue,
  .text-content .aps-underline-teal,
  .text-content .aps-underline-gray,
  .text-content .aps-underline-dark,
  .text-content .aps-underline-red,
  .text-content .aps-underline-blue {
    width: 42vw !important;
    height: 6vw !important;
  }
}

/* APS Font Weight Classes - Unique naming */
.umb-rte .aps-weight-light,
.text-content .aps-weight-light {
  font-weight: 300 !important;
}

.umb-rte .aps-weight-regular,
.text-content .aps-weight-regular {
  font-weight: 400 !important;
}

.umb-rte .aps-weight-medium,
.text-content .aps-weight-medium {
  font-weight: 500 !important;
}

.umb-rte .aps-weight-semibold,
.text-content .aps-weight-semibold {
  font-weight: 600 !important;
}

.umb-rte .aps-weight-bold,
.text-content .aps-weight-bold {
  font-weight: 700 !important;
}

/* APS Special Styling Classes */
.umb-rte .aps-highlight,
.text-content .aps-highlight {
  background-color: #fff3cd !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
}

.umb-rte .aps-accent-text,
.text-content .aps-accent-text {
  color: #00a99d !important;
  font-weight: 600 !important;
}

.umb-rte .aps-caption,
.text-content .aps-caption {
  font-size: 1vw !important;
  color: #737373 !important;
  font-style: italic !important;
  font-family: "Quicksand", sans-serif !important;
}

/* Mobile Responsive Adjustments - Matching your block1 system */
@media screen and (max-width: 680px) {
  /* APS Headings - Mobile VW adjustments like your block1 */
  .umb-rte .aps-heading-main,
  .text-content .aps-heading-main {
    font-size: 11vw !important;
    line-height: 13vw !important;
  }

  .umb-rte .aps-heading-section,
  .text-content .aps-heading-section {
    font-size: 10.2vw !important;
  }

  .umb-rte .aps-heading-sub,
  .text-content .aps-heading-sub {
    font-size: 8vw !important;
  }

  .umb-rte .aps-subtitle,
  .text-content .aps-subtitle {
    font-size: 10.2vw !important;
  }

  .umb-rte .aps-paragraph,
  .text-content .aps-paragraph {
    font-size: 5.8vw !important;
    line-height: 7vw !important;
  }

  /* Mobile text sizes */
  .umb-rte .aps-text-xs,
  .text-content .aps-text-xs {
    font-size: 3vw !important;
  }

  .umb-rte .aps-text-sm,
  .text-content .aps-text-sm {
    font-size: 4vw !important;
  }

  .umb-rte .aps-text-base,
  .text-content .aps-text-base {
    font-size: 5vw !important;
  }

  .umb-rte .aps-text-lg,
  .text-content .aps-text-lg {
    font-size: 6vw !important;
  }

  .umb-rte .aps-text-xl,
  .text-content .aps-text-xl {
    font-size: 7vw !important;
  }

  .umb-rte .aps-text-2xl,
  .text-content .aps-text-2xl {
    font-size: 8vw !important;
  }

  .umb-rte .aps-text-3xl,
  .text-content .aps-text-3xl {
    font-size: 9vw !important;
  }

  .umb-rte .aps-text-4xl,
  .text-content .aps-text-4xl {
    font-size: 10vw !important;
  }
}

/* APS Link Styles */
.umb-rte .aps-link-underlined,
.text-content .aps-link-underlined,
.umb-rte a.aps-link-underlined,
.text-content a.aps-link-underlined {
  color: #00a99d !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

.umb-rte .aps-link-underlined:hover,
.text-content .aps-link-underlined:hover,
.umb-rte a.aps-link-underlined:hover,
.text-content a.aps-link-underlined:hover {
  color: #007a73 !important;
}

.umb-rte .aps-link-clean,
.text-content .aps-link-clean,
.umb-rte a.aps-link-clean,
.text-content a.aps-link-clean {
  color: #00a99d !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

.umb-rte .aps-link-clean:hover,
.text-content .aps-link-clean:hover,
.umb-rte a.aps-link-clean:hover,
.text-content a.aps-link-clean:hover {
  color: #007a73 !important;
  text-decoration: underline !important;
}

.umb-rte .aps-link-button,
.text-content .aps-link-button,
.umb-rte a.aps-link-button,
.text-content a.aps-link-button {
  color: white !important;
  background-color: #00a99d !important;
  padding: 0.8vw 1.5vw !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  display: inline-block !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.umb-rte .aps-link-button:hover,
.text-content .aps-link-button:hover,
.umb-rte a.aps-link-button:hover,
.text-content a.aps-link-button:hover {
  background-color: #007a73 !important;
  transform: translateY(-2px) !important;
  color: white !important;
}

.umb-rte .aps-link-dark,
.text-content .aps-link-dark,
.umb-rte a.aps-link-dark,
.text-content a.aps-link-dark {
  color: #333 !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

.umb-rte .aps-link-dark:hover,
.text-content .aps-link-dark:hover,
.umb-rte a.aps-link-dark:hover,
.text-content a.aps-link-dark:hover {
  color: #00a99d !important;
}