:root {
  /* =============================================
     CHAM LANGUAGE INSTITUTE - BRAND COLOR SYSTEM
     Version 1.0 | April 2026
  ============================================= */

  --cli-forest-deep: #04342C;
  --cli-forest-mid: #0F6E56;
  --cli-forest-light: #1D9E75;
  --cli-forest-gradient: linear-gradient(135deg, #0F6E56 0%, #085041 34%, #054036 68%, #04342C 100%);

  --cli-jade: #5DCAA5;
  --cli-jade-mist: #9FE1CB;

  --cli-accent: #D6401F;
  --cli-accent-dark: #B83219;
  --cli-accent-soft: #F3D8D2;

  --cli-parchment: #FFFFFF;
  --cli-stone: #D3D1C7;
  --cli-text-primary: #1A1A1A;
  --cli-text-secondary: #444444;
  --cli-text-muted: #666666;
  --cli-white: #FFFFFF;

  --cli-font-serif: "Playfair Display", Didot, "Bodoni MT", "Book Antiqua", "Palatino Linotype", Georgia, serif;
  --cli-font-sans: "Inter", "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --cli-text-display: 48px;
  --cli-text-h2: 36px;
  --cli-text-h3: 26px;
  --cli-text-h4: 19px;
  --cli-text-label: 12px;
  --cli-text-body: 16px;
  --cli-text-small: 13px;
  --cli-text-tiny: 12px;

  --cli-tracking-label: 0.18em;
  --cli-tracking-nav: 0.08em;
  --cli-line-height-body: 1.8;
  --cli-line-height-heading: 1.1;

  --cli-space-xs: 8px;
  --cli-space-sm: 12px;
  --cli-space-md: 20px;
  --cli-space-lg: 24px;
  --cli-space-xl: 40px;
  --cli-space-2xl: 64px;
  --cli-space-hero: 80px;

  --cli-border-light: 0.5px solid #D3D1C7;
  --cli-border-dark: 1px solid rgba(29, 158, 117, 0.3);
  --cli-border-accent: 3px solid var(--cli-accent);
  --cli-border-quote: 2px solid #5DCAA5;

  --et_global_body_font: "Inter";
  --et_global_heading_font: "Playfair Display";
  --et_global_body_font_weight: 400;
  --et_global_heading_font_weight: 400;
}

html {
  background: var(--cli-parchment);
}

body {
  background: var(--cli-parchment);
  color: var(--cli-text-primary);
  font-size: var(--cli-text-body);
  line-height: var(--cli-line-height-body);
  text-rendering: optimizeLegibility;
}

.cli-skip-link {
  background: var(--cli-forest-deep);
  color: var(--cli-white) !important;
  font-family: var(--cli-font-sans);
  font-size: 14px;
  font-weight: 700;
  left: 16px;
  padding: 12px 18px;
  position: fixed;
  text-decoration: none;
  top: 0;
  transform: translateY(-140%);
  transition: transform 0.15s ease;
  z-index: 100000;
}

.cli-skip-link:focus {
  outline: 3px solid var(--cli-accent) !important;
  outline-offset: 3px;
  transform: translateY(16px);
}

body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cli-accent) !important;
  outline-offset: 3px;
}

#main-content:focus {
  outline: none !important;
}

body #main-content,
body .et-l--post,
body .entry-content {
  background: var(--cli-parchment);
  color: var(--cli-text-primary);
}

html,
body,
input,
textarea,
select,
button,
.entry-content,
.entry-content p,
.entry-content li,
.entry-content blockquote,
.entry-content figcaption,
.entry-content label,
.entry-content td,
.entry-content th,
.et_pb_post,
.et_pb_text,
.et_pb_text_inner,
.et_pb_blurb_description,
.et_pb_blurb_description p,
.et_pb_button,
.et_pb_module,
.et_pb_menu a,
.et_pb_tab,
.et_pb_toggle_content,
.et_pb_toggle_title,
.et_pb_pricing_content,
.et_pb_pricing li,
.et_pb_member_position,
.et_pb_testimonial_description,
.et_pb_testimonial_description_inner,
.et_pb_widget,
.et_pb_widget *,
.comment-content {
  font-family: var(--cli-font-sans) !important;
}

body,
p,
li,
td,
th,
label,
input,
textarea,
select,
button,
.entry-content p,
.entry-content li,
.et_pb_text_inner,
.et_pb_blurb_description,
.et_pb_pricing_content,
.et_pb_toggle_content,
.et_pb_tab_content,
.comment-content {
  font-size: var(--cli-text-body);
  line-height: var(--cli-line-height-body);
}

p,
li,
td,
th,
label,
legend,
.entry-content p,
.entry-content li,
.et_pb_text_inner,
.et_pb_blurb_description,
.et_pb_pricing_content,
.et_pb_toggle_content,
.et_pb_tab_content,
.comment-content {
  color: var(--cli-text-primary);
}

small,
figcaption,
caption,
.wp-caption-text,
.et_pb_text_inner small,
.et_pb_blurb_description small,
.entry-content figcaption {
  color: var(--cli-text-muted);
  font-size: var(--cli-text-small);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.et_pb_module_header,
.et_pb_module_heading,
.et_pb_heading_container h1,
.et_pb_heading_container h2,
.et_pb_heading_container h3,
.et_pb_heading_container h4,
.et_pb_heading_container h5,
.et_pb_heading_container h6,
.entry-title,
.et_pb_slide_title,
.et_pb_promo_description h1,
.et_pb_promo_description h2,
.et_pb_promo_description h3,
.et_pb_pricing_heading,
.et_pb_pricing_title,
.et_pb_testimonial_author,
.et_pb_member_name,
.et_pb_tab_active a,
.comment-reply-title,
.widgettitle,
.wp-block-heading {
  color: var(--cli-forest-deep);
  font-family: var(--cli-font-serif) !important;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: var(--cli-line-height-heading);
}

/* Global institutional heading treatment: Playfair Display stays upright.
 * The page-container ID gives this system rule enough specificity to replace
 * legacy page-level italic declarations without changing Divi module content. */
html body.et-db #page-container h1,
html body.et-db #page-container h2,
html body.et-db #page-container h3,
html body.et-db #page-container h4,
html body.et-db #page-container h5,
html body.et-db #page-container h6,
html body.et-db #page-container .et_pb_module_header,
html body.et-db #page-container .et_pb_module_heading,
html body.et-db #page-container .entry-title,
html body.et-db #page-container .et_pb_slide_title,
html body.et-db #page-container .et_pb_pricing_heading,
html body.et-db #page-container .et_pb_pricing_title,
html body.et-db #page-container .et_pb_testimonial_author,
html body.et-db #page-container .et_pb_member_name,
html body.et-db #page-container .comment-reply-title,
html body.et-db #page-container .widgettitle,
html body.et-db #page-container .wp-block-heading {
  font-style: normal !important;
}

#main-content h1,
.entry-content h1,
.et_pb_text_inner h1 {
  font-size: clamp(38px, 4vw, var(--cli-text-display));
  margin-bottom: var(--cli-space-sm);
}

#main-content h2,
.entry-content h2,
.et_pb_text_inner h2 {
  font-size: clamp(30px, 3.2vw, var(--cli-text-h2));
  margin-bottom: var(--cli-space-sm);
}

#main-content h3,
.entry-content h3,
.et_pb_text_inner h3 {
  font-size: clamp(22px, 2.2vw, var(--cli-text-h3));
  margin-bottom: var(--cli-space-xs);
}

#main-content h4,
.entry-content h4,
.et_pb_text_inner h4 {
  font-size: var(--cli-text-h4);
  margin-bottom: var(--cli-space-xs);
}

#main-content a:not(.et_pb_button):not(.wp-block-button__link) {
  color: var(--cli-forest-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 0.2s ease, opacity 0.2s ease;
}

#main-content a:not(.et_pb_button):not(.wp-block-button__link):hover,
#main-content a:not(.et_pb_button):not(.wp-block-button__link):focus-visible {
  color: var(--cli-forest-deep);
}

#main-content strong,
#main-content b {
  color: var(--cli-text-primary);
  font-weight: 700;
}

#main-content hr,
#main-content .wp-block-separator {
  border: 0;
  border-top: var(--cli-border-light);
  margin: var(--cli-space-lg) 0;
}

#main-content .et_pb_divider_internal {
  border-top-color: var(--cli-stone) !important;
}

#main-content blockquote,
.entry-content blockquote {
  border-left: var(--cli-border-quote);
  color: var(--cli-text-secondary);
  margin: var(--cli-space-lg) 0;
  padding: 0 0 0 var(--cli-space-md);
}

#main-content blockquote p:last-child,
.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

::selection {
  background: var(--cli-forest-mid);
  color: var(--cli-white);
}
