/* findcnaclasses.com theme — built on the logo teal (#006585, sampled from the live logo) and the logo's heart red.
   Palette A (logo teal + gold CTA) is the default; alternatives B–D are reviewed on stage (palettes.css, review builds only). */
:root {
  --cna-brand: #006585;
  --cna-brand-600: #005670;
  --cna-brand-700: #00465C;
  --cna-brand-50: #EAF5F8;
  --cna-brand-100: #CFE7EF;
  --fc-heart: #E0302B;
  --cna-paper: #F5F9FA;            /* cool clinical off-white replaces the design system's warm cream */
  --cna-featured-bg: #EFF7F9;
  /* wayfinding code: the same four colors mark the homepage directory, the menu panels and section rules */
  --fc-way-classes: var(--cna-brand);
  --fc-way-become: #E3A600;
  --fc-way-exam: #C8283A;
  --fc-way-careers: #3D5A80;
  /* lighter partners of the same four for dark surfaces (the homepage board, the path band) */
  --fc-way-classes-hi: #5BC2DA; --fc-way-become-hi: #F4C21B; --fc-way-exam-hi: #F0606C; --fc-way-careers-hi: #9FB6D8;
}
/* the esyoh zip field: the design's 130px default clips findcna's placeholder ("Enter your ZIP code").
   :where() keeps this at low specificity so layout rules (sidebar full width, hero flex) still win. */
:where(form.esy-zip) input[name="zip_code"] { width: 200px !important; max-width: 100%; box-sizing: border-box; }
body .design-wrapper {
  --brand-blue:#006585; --brand-blue-600:#005670; --brand-blue-700:#00465C; --brand-blue-50:#EAF5F8; --brand-blue-100:#CFE7EF; --featured-bar:#006585; --paper:#F5F9FA;
}

/* ---- Esyoh widgets (markup rendered by Esyoh's own ESY.Widget script) styled to the findcna design ----
   Esyoh appends its own stylesheet (esyoh.com/clients/css) AFTER ours with the same selectors, so every rule here is
   prefixed with `html body` to outrank it, and uses !important only where Esyoh does (heights, widths, display). */
html body .esy_widget_container .esy_in_content_zip_widget, html body .esy_widget_container .esy_in_content_button_widget { margin: 0; padding: 0; width: 100%; }
html body .esy_widget_container .esy_in_content_zip_widget form, html body .esy_widget_container .esy_in_content_button_widget form { margin: 0; position: relative; display: flex; flex-direction: column; }
html body .esy_widget_container .esy_widget_header { font: 600 18px/1.3 var(--cna-font-serif); color: var(--cna-ink-900); letter-spacing: -.01em; margin: 0 0 6px; padding: 0; text-align: left; }
html body .esy_widget_container .esy_in_content_zip_widget .zip_inner_container { margin: 0; padding: 0; }
html body .esy_widget_container .esy_in_content_zip_widget .esy_zip_intro { margin: 0 0 12px; }
html body .esy_widget_container .esy_in_content_zip_widget .esy_zip_intro p { font: 400 14.5px/1.55 var(--cna-font-sans); color: var(--cna-ink-600); margin: 0; }
html body .esy_widget_container .esy_in_content_zip_widget .esy_zip_container { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; height: auto; margin: 0; }
html body .esy_widget_container .esy_in_content_zip_widget input[type="text"] { flex: 1 1 180px; min-width: 0; max-width: none; width: auto; height: auto !important; box-sizing: border-box; font: 400 16px/1.2 var(--cna-font-sans); padding: 14px 16px; border: 1.5px solid var(--cna-ink-300); border-radius: var(--cna-r-md); background: #fff; color: var(--cna-ink-900); margin: 0; float: none; display: block; }
html body .esy_widget_container .esy_btn, html body .esy_widget_container .esy_in_content_zip_widget input[type="submit"] { display: inline-block !important; width: auto !important; min-width: 0; max-width: none; height: auto !important; box-sizing: border-box; background: var(--cna-gold) !important; color: var(--cna-cta-ink) !important; font: 700 16px/1.2 var(--cna-font-sans); padding: 15px 24px; border: 0; border-radius: var(--cna-r-md); box-shadow: 0 3px 0 var(--cna-gold-600); cursor: pointer; -webkit-appearance: none; appearance: none; margin: 0; text-transform: none; letter-spacing: 0; white-space: normal; }
html body .esy_widget_container .esy_btn:hover, html body .esy_widget_container .esy_btn:focus { background: var(--cna-gold-600) !important; color: var(--cna-cta-ink) !important; font-size: 16px; }
html body .esy_widget_container .esy_btn:focus-visible, html body .esy_widget_container .esy_in_content_zip_widget input[type="text"]:focus-visible { outline: 2px solid var(--cna-brand); outline-offset: 2px; }
html body .esy_widget_container .esy_in_content_button_widget .esy_btn { display: inline-block !important; align-self: flex-start; min-width: 0; font-size: 17px; padding: 15px 26px; margin: 0; }
html body .esy_widget_container .esy_sponsored { font: 400 12px/1.4 var(--cna-font-sans); color: var(--cna-ink-500); margin: 8px 0 0; text-align: left; }
/* bands that carry their own heading hide Esyoh's header + intro */
html body .esy-in-band .esy_widget_header, html body .esy-in-band .esy_zip_intro { display: none; }
/* narrow sidebar card: stack field and button */
html body .article-sidebar-cta .esy_widget_container .esy_zip_container { flex-direction: column; }
/* stacked: the field's 180px flex-basis would become its HEIGHT (live bug 2026-09-25) */
html body .article-sidebar-cta .esy_widget_container .esy_in_content_zip_widget input[type="text"] { flex: 0 0 auto; width: 100% !important; }
html body .article-sidebar-cta .esy_widget_container .esy_btn { width: 100% !important; }
html body .article-sidebar-cta .esy_widget_container .esy_widget_header { font-size: 17px; }
/* footer brand band */
html body .ftr-match .esy_widget_container { max-width: 540px; margin: 0 auto; }
html body .ftr-match .esy_widget_container .esy_zip_container { justify-content: center; }
html body .ftr-match .esy_widget_container .esy_sponsored { color: rgba(255,255,255,.75); text-align: center; }
@media (max-width: 720px) {
  html body .art-hero__cta .esy_widget_container .esy_btn, html body .hv-zip .esy_widget_container .esy_btn,
  html body .article-cta .esy_widget_container .esy_btn, html body .ftr-match .esy_widget_container .esy_btn { flex: 1 1 100%; width: 100% !important; }
}
html body .esy_widget_container .esy_in_content_button_widget .esy_sponsored { align-self: flex-start; text-align: left; }