@import url("https://use.typekit.net/yxt5svl.css");
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200..1000&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

#react-base .max-w-7xl {
  max-width: 90rem;
}

.min-h-screen {
  min-height: 100vh;
}

.w-\[220px\] {
  width: 220px;
}

.h-\[280px\] {
  height: 280px;
}

.h-\[336px\] {
  height: 336px;
}

.w-\[102\%\] {
  width: 102%;
}

.ml-\[-1\%\] {
  margin-left: -1%;
}

.text-lg {
  font-size: 24px;
}

.text-sm {
  font-size: 18px;
}

.opacity-15 {
  opacity: 0.15;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.m-12 {
  margin: 3rem;
}

.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.bg-\[\#002855\]\/95 {
  background-color: #002855f2;
}

.hover\:bg-\[\#C6AA76\]:hover {
  background-color: rgb(198 170 118);
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.gap-\[5rem\] {
  gap: 5rem;
}

.gap-\[1rem\] {
  gap: 1rem;
}

.rounded-\[10px_10px_0_0\] {
  border-radius: 10px 10px 0 0;
}

.rounded-\[10px_10px_10px_10px\] {
  border-radius: 10px 10px 10px 10px;
}

.button--primary {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  background-color: #c6aa76;
  color: #002855;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.button--primary:hover {
  filter: brightness(1.1);
}

p a,
table a,
li a {
  color: #207788;
  text-decoration: underline;
  font-weight: 700;
}

h1+p,
h2+p,
h3+p,
h4+p,
p+p,
p+ul,
ul+p {
  margin-top: 1rem;
}

@font-face {
  font-family: "icomoon";
  src: url("https://23702077.fs1.hubspotusercontent-na1.net/hubfs/23702077/Media/csu-icons.ttf");
  src:
    url("https://23702077.fs1.hubspotusercontent-na1.net/hubfs/23702077/Media/csu-icons.ttf")
      format("embedded-opentype"),
    url("https://23702077.fs1.hubspotusercontent-na1.net/hubfs/23702077/Media/csu-icons.ttf")
      format("truetype"),
    url("https://23702077.fs1.hubspotusercontent-na1.net/hubfs/23702077/Media/csu-icons.ttf")
      format("woff"),
    url("https://23702077.fs1.hubspotusercontent-na1.net/hubfs/23702077/Media/csu-icons.ttf")
      format("svg");
  font-weight: normal;
  font-style: normal;
}
[class*="csu-icon"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* better font rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#react-base ul {
  padding-left: 25px;

}

#react-base ul li::before {
  position: absolute;
  top: 1px;
  left: 0px;
  display: inline-block;
  content: "»";
  font-family: cronos-pro, sans-serif;
  color: rgb(198, 170, 118);
  line-height: 0.5;
  font-size: 1.85em;
  vertical-align: sub;
  margin: 0px;
  transform: translateX(calc(-100% - 5px));
}

#react-base ul.list-none {
  padding-left: 0px;
}

#react-base ul.list-none li:before,
#react-base ul.hs-tools-actions li:before {
  display: none;
}

.prose ol li::before,
.program-detail ul li::before,
#outcomesSection ul li::before {
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
  content: "»";
  font-family: cronos-pro, sans-serif;
  color: rgb(198, 170, 118);
  line-height: 0.7;
  font-size: 1.85em;
  vertical-align: sub;
  margin: 0px;
  transform: translateX(-20px);
}

.program-detail #bullets ul li::before {
  transform: translateX(-20px);
}

#react-base ul li.course-btn::before {
  transform: translate(-5px, 17px);
}

.program-detail ul {
  font-size: 18px;
}

.prose ol,
.curriculum-accordions ul {
  padding-left: 20px;
}

.curriculum-accordions ul li {
  margin: 1rem 0;
  border: none;
}

#react-base ul.divide-y>:not([hidden])~:not([hidden]) {
  padding-top: 11px;
}

#react-base ul.divide-y>:not([hidden])~:not([hidden]):before {
  top: 12px;
}

#react-base h1 {
  font-size: 60px;
  line-height: 1.1;
  font-weight: 800;
  font-family: "cronos-pro";
}

#react-base h2,
#react-base h3,
#react-base h4 {
  line-height: 1.1;
  font-weight: 800;
  font-family: "cronos-pro";
  
}
#react-base h2 {
  color: #002855;
  font-size: 32px;
}

#react-base h3 {
  font-size: 28px;
}

#react-base h4 {
  font-size: 18px;
}

#react-base h2.text-white,
#react-base .text-white h2,
#react-base #learning-outcomes-title h2,
#react-base section[style*="--csu-primary:#002855"] h2,
#react-base section[style*="#003366"] h2 {
  color: #fff;
}

#react-base li {
  position: relative;
}

#react-base .faq-accordions .accordion-module {
  padding: 0 24px 16px;
}

#react-base .faq-accordions .accordion-module button {
  background-color: rgb(198 170 118);
  padding: 10px 20px;
  font-size: 20px;
  font-family: "cronos-pro";
  font-weight: 600;
  border-radius: 8px;
}

#react-base .faq-accordions .accordion-module button:hover {
  color: rgb(32 119 136);
}

#react-base .faq-accordions.accordion-module .accordion-content {
  padding: 10px 20px 16px;
}

#react-base .faq-accordions .accordion-module {
  padding: 20px !important;
}

#react-base .full-accordion.accordion-module .accordion-content li {
  position: relative;
  margin-bottom: 8px;
}

#react-base .full-accordion.accordion-module .accordion-content li::before {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  display: inline-block;
  content: "»";
  font-family: "cronos-pro", sans-serif;
  color: #c6aa76;
  line-height: 0.85;
  font-size: 24px;
  vertical-align: sub;
}

#react-base li.no-marker::before,
#react-base .info-block ul li:before,
#react-base footer ul li::before {
  content: "" !important;
}

#programInterestForm button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* gap-2 */

  white-space: nowrap;
  border-radius: 0.375rem; /* rounded-md */

  transition: all 0.2s ease;

  background-color: #002855;
  color: #ffffff;

  padding: 0.5rem 2rem; /* py-2 px-8 */
  font-size: 1rem; /* text-base */
  font-weight: 600;

  height: auto;
  flex-shrink: 0;

  outline: none;
}

/* hover:bg-[#001a3d] */
#programInterestForm button:hover {
  background-color: #001a3d;
}

/* disabled:pointer-events-none disabled:opacity-50 */
#programInterestForm button:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] */
#programInterestForm button:focus-visible {
  border: 1px solid var(--ring);
  box-shadow: 0 0 0 3px rgba(var(--ring-rgb), 0.5);
}

/* aria-invalid:border-destructive */
#programInterestForm button[aria-invalid="true"] {
  border: 1px solid var(--destructive);
}

/* aria-invalid:ring-destructive/20 */
#programInterestForm button[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--destructive-rgb), 0.2);
}

/* dark:aria-invalid:ring-destructive/40 */
.dark #programInterestForm button[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--destructive-rgb), 0.4);
}

/* [&_svg]:pointer-events-none */
#programInterestForm button svg {
  pointer-events: none;
}

/* [&_svg:not([class*='size-'])]:size-4 */
#programInterestForm button svg:not([class*="size-"]) {
  width: 1rem;
  height: 1rem;
}

/* [&_svg]:shrink-0 */
#programInterestForm button svg {
  flex-shrink: 0;
}

/* has-[>svg]:px-3 */
#programInterestForm button:has(> svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

#programInterestForm select,
#programInterestForm input {
  border: #7b5919 1px solid;
  border-radius: 4px;
}

#programInterestForm label {
  color: #002855;
  font-weight: 700;
}

#outcomesSection.gold-accent span[data-slot="badge"] {
  color: rgb(143 111 42);
  border-color: rgb(198 170 118 / 0.6);
}

#outcomesSection.gold-accent .lucide {
  color: rgb(198 170 118);
}

#outcomesSection.gold-accent .outcomes-left-block-content {
  color: rgb(198 170 118);
}

#outcomesSection.gold-accent .outcomes-left-block-content.text-slate-500 {
  color: rgb(100 116 139);
}

#outcomesSection.gold-accent .secondary-block .left-block-title {
  color: rgb(0 40 85);
}

#outcomesSection.gold-accent .right-block-eyebrow {
  color: rgb(198 170 118);
}

#general-landing-hero .form-container form {
  background-color: rgb(247 244 238);
  border-radius: 12px;
  padding: 24px;
}

#general-landing-hero .form-container form fieldset {
  margin-top: 12px;
}

#general-landing-hero .general-subline {
  font-size: 72px;
  font-family: "cronos-pro";
  padding: 15px 25px;
}

#general-landing-hero h1 {
  margin-top: 80px;
}

#tuition-hero {
  padding-top: 110px;
  min-height: 80vh;
}

#tuition-hero .hero-content {
  padding-top: 80px;
  max-width: 1440px;
}

.rich-text-feature p,
.rich-text-feature ul,
.rich-text-container p,
.rich-text-container ul {
  margin-bottom: 12px;
  color: #475569;
  font-family: "cronos-pro";
  font-size: 18px;
}

.rich-text-container ul,
.rich-text-feature ul {
  padding-left: 32px;
}

.rich-text-container h2 {
  font-size: 32px;
  font-family: "cronos-pro";
  color: #002855;
}

.choosepath-section .grid .tileImage {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.choosepath-section .grid .tileImage:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background-image: linear-gradient(
    90deg,
    #fff,
    #fff,
    rgba(255, 255, 255, 0.6),
    transparent
  );
}

.choosepath-section .bottom-block {
  text-align: center;
  margin: 0 auto;
  /* width: 500px; */
}

@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 768px) {
  #react-base h1 {
    font-size: 38px;
  }

  .choosepath-section .grid .tileImage {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
  }

  .choosepath-section .tile-icon-block {
    width: 100%;
    flex-direction: column;
  }

  .choosepath-section .grid .tileImage img {
    min-height: unset !important;
    max-height: 300px;
    width: 100%;
  }

  .watchNow-button {
    position: relative;
    bottom: 0;
    right: 0;
    margin-top: 16px;
  }
}

@media (min-width: 1024px) {
  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(320px\,1fr\)\] {
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  }
}

/****** TEMP CSS *******/
span.pointer-events-none {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Section Styles
 * Shared by any module using the sectionOpen/sectionClose macros.
 * Class names are namespaced with `section-` so they don't compete with
 * Tailwind utilities.
 *
 * Background color choices ALSO drive text color (paired tokens). The
 * .section-wrapper element exposes --section-bg and --section-text custom
 * properties; child content inherits color via `color: var(--section-text)`.
 * ───────────────────────────────────────────────────────────────────────── */

.section-wrapper {
  position: relative;
  background-color: var(--section-bg, #ffffff);
  color: var(--section-text, #002855);
}

/* Paired bg/text color tokens. To add a new option, also add it to the
 * `background_color` choice list in fields.json AND keep value names in
 * sync (this CSS class becomes `section-bg-{value}`). */
.section-bg-white  { --section-bg: #ffffff; --section-text: #002855; }
.section-bg-slate  { --section-bg: #f1f5f9; --section-text: #002855; }
.section-bg-navy   { --section-bg: #002855; --section-text: #ffffff; }
.section-bg-teal   { --section-bg: #207788; --section-text: #ffffff; }
.section-bg-gold   { --section-bg: #c6aa76; --section-text: #002855; }

/* Make .section-wrapper text colors win over #react-base h2/etc defaults.
   #react-base is an ID-level selector; class-only rules can't beat it,
   so we match the ID on the way in. */
#react-base .section-wrapper,
#react-base .section-wrapper h1,
#react-base .section-wrapper h2,
#react-base .section-wrapper h3,
#react-base .section-wrapper h4,
#react-base .section-wrapper h5,
#react-base .section-wrapper h6,
#react-base .section-wrapper p,
#react-base .section-wrapper li {
  color: var(--section-text);
}

#react-base .section-has-overlay,
#react-base .section-has-overlay h1,
#react-base .section-has-overlay h2,
#react-base .section-has-overlay h3,
#react-base .section-has-overlay h4,
#react-base .section-has-overlay h5,
#react-base .section-has-overlay h6,
#react-base .section-has-overlay p,
#react-base .section-has-overlay li {
  color: #ffffff;
}

/* Padding scale */
.section-pt-none   { padding-top: 0; }
.section-pt-small  { padding-top: 2rem; }
.section-pt-medium { padding-top: 4rem; }
.section-pt-large  { padding-top: 6rem; }
.section-pt-xl     { padding-top: 8rem; }
.section-pt-xxl     { padding-top: 12rem; }

.section-pb-none   { padding-bottom: 0; }
.section-pb-small  { padding-bottom: 2rem; }
.section-pb-medium { padding-bottom: 4rem; }
.section-pb-large  { padding-bottom: 6rem; }
.section-pb-xl     { padding-bottom: 8rem; }
.section-pb-xxl     { padding-bottom: 12rem; }

/* Background image */
.section-has-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Optional dark overlay for image legibility */
.section-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 40, 85, 0.55);
  z-index: 1;
  pointer-events: none;
}

.section-content {
  position: relative;
  z-index: 2;
}

/* When an image overlay is present, force light text regardless of the underlying color choice */
.section-has-overlay {
  color: #ffffff;
}
.section-has-overlay h1,
.section-has-overlay h2,
.section-has-overlay h3,
.section-has-overlay h4,
.section-has-overlay h5,
.section-has-overlay h6,
.section-has-overlay p,
.section-has-overlay li {
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────
 * Two-column grid widths
 * Custom classes so we don't depend on Tailwind JIT to compile dynamic
 * col-span values. Used by the Two Column module's text + image columns.
 * On mobile, columns are full-width via the grid's default single-col
 * layout — these rules only apply at lg breakpoint and up.
 * ───────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .two-col-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .two-col-w-4 { grid-column: span 4 / span 4; }
  .two-col-w-5 { grid-column: span 5 / span 5; }
  .two-col-w-6 { grid-column: span 6 / span 6; }
  .two-col-w-7 { grid-column: span 7 / span 7; }
  .two-col-w-8 { grid-column: span 8 / span 8; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Section utility classes — alignment helpers (grid-based)
 * Custom classes so they work in HubL modules where the Tailwind JIT
 * doesn't see dynamic class names. Namespaced with `section-` to avoid
 * conflicts. Uses CSS Grid for consistency with the rest of the
 * section system (which uses .two-col-grid).
 * ───────────────────────────────────────────────────────────────────── */

/* Horizontal alignment: parent becomes a single-column grid, the column
 * is sized to the content (auto), and justify-content positions that
 * column within the parent's width. */
.section-align-start  { display: grid; grid-template-columns: auto; justify-content: start; }
.section-align-center { display: grid; grid-template-columns: auto; justify-content: center; }
.section-align-end    { display: grid; grid-template-columns: auto; justify-content: end; }

/* Text alignment */
.section-text-left   { text-align: left; }
.section-text-center { text-align: center; }
.section-text-right  { text-align: right; }

.justify-content-start {justify-content: start;}
.justify-content-center {justify-content: center;}
.justify-content-end {justify-content: end;}

.align-items-start {align-items: start;}
.align-items-center {align-items: center;}
.align-items-end {align-items: end;}

.card-w-1   { width: 100%; }
@media (min-width: 640px)  { .card-w-1 { width: calc(50% - 12px); } }
@media (min-width: 1024px) { .card-w-1 { width: calc(33.333% - 16px); } }

/* ─────────────────────────────────────────────────────────────────────
 * Custom List (numbered items with header + copy) inside section-wrapper
 * Used by the Two Column module's body custom_list repeater.
 * ───────────────────────────────────────────────────────────────────── */

.section-custom-list {
  counter-reset: custom-list;
  list-style: none;
  padding: 0;
  margin: 0;
}

.section-custom-list-item {
  counter-increment: custom-list;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 1rem;
  padding-left: 0;
}

.section-custom-list-item + .section-custom-list-item {
  margin-top: 1.5rem;
}

.section-custom-list-number {
    border-right: 2px solid #DFD1A7;
    padding-right: 10px;
    font-size: 1.25rem;
    font-weight: bold;
}

.section-custom-list-header {
  font-style: italic;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 0;
}

.section-custom-list-copy {
  margin: 0.25rem 0 0 0;
  line-height: 1.6;
}

.btn--primary,
.btn--secondary {
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #002855;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-top: .625rem;
  padding-bottom: .625rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background-color: #c6aa76;
  border-radius: 6px;
  display: inline-block;
  border: 1px solid #c6aa76;
  text-align: center;
}

.btn--secondary {
  background-color: transparent;
  color: #c6aa76;
}

.btn--primary:hover {
  background-color: #d7b981;
}

.btn--secondary:hover {
  background-color: #d7b981;
  color: #002855;
}

.course-list-container {
  padding: 20px;
}

.course-list-container ul li {
  margin: 8px 0;
}

.search-icon {
  padding: 0 8px;
}

a[data-hs-anchor] {
  position: absolute;
  top: -100px;
}

[id] {
  scroll-margin-top: 100px; 
}

.csu-ce-footnotes ol {
  list-style: decimal;
  padding-left: 20px;
}
.csu-ce-footnotes ol > li {
  padding-left: 0.5rem;
  margin-bottom: 1rem;
}
.csu-ce-footnotes ol > li:last-child {
  margin-bottom: 0;
}
.csu-ce-footnotes a {
  color: #207788;
  text-decoration: underline;
}
.csu-ce-footnotes a:hover {
  text-decoration: none;
}