/* =====================================================================
   Eastern Connecticut State University
   Request Information page: Slate inquiry form styling
   Fall 2026 campaign look (navy #0d2a5c, blue #0b4ea2, lime #c8f046)
 
   Targets the Slate embed on
   https://www.easternct.edu/about-eastern/request-information.html
   (form id 6a0ba185-411c-4617-988f-2681b47ccecc). Slate renders the form
   directly into the page inside div.form_container, so this stylesheet
   can restyle every field without changing anything in Slate.
 
   Add this file to the page (or paste it into the page's CSS) and wrap
   the page content in the layout described in inquiry-page-layout.html.
   ===================================================================== */
 
:root {
  --ecs-navy: #002D72;
  --ecs-blue: #034BA6;
  --ecs-lime: #BEFF00;
  --ecs-ink: #14213d;
  --ecs-muted: #5c6b86;
  --ecs-line: #dfe4ee;
  --ecs-bg: #f3f5f9;
  --ecs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}
 
/* ---------- Page layout (two columns, like the WCSU reference) ---------- */
 
.ecs-inquiry { font-family: var(--ecs-font); color: var(--ecs-ink); line-height: 1.5; }
.ecs-inquiry * { box-sizing: border-box; }
 
.ecs-inquiry-hero { position: relative; background: var(--ecs-navy); color: #fff; overflow: hidden; }
.ecs-inquiry-hero img.ecs-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ecs-inquiry-hero .ecs-hero-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px); gap: 32px; align-items: start; }
.ecs-hero-panel { background: rgba(11, 78, 162, .92); padding: 36px 32px; border-radius: 16px; }
.ecs-hero-panel .ecs-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ecs-lime); margin-bottom: 10px; }
.ecs-hero-panel h1 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -.01em; font-weight: 800; color: #fff; }
.ecs-hero-panel h1 em { font-style: normal; color: var(--ecs-lime); }
.ecs-hero-panel p { margin: 0; font-size: 17px; opacity: .92; max-width: 520px; }
 
.ecs-apply { background: var(--ecs-navy); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 24px 26px; }
.ecs-apply h2 { margin: 0 0 14px; font-size: 20px; line-height: 1.2; color: #fff; }
.ecs-btn { display: inline-block; background: var(--ecs-lime); color: var(--ecs-navy) !important; text-decoration: none !important; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding: 13px 22px; border-radius: 10px; transition: transform .15s ease, box-shadow .15s ease; }
.ecs-btn:hover, .form_container .form_button_submit:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,42,92,.3); }
 
.ecs-inquiry-body { background: var(--ecs-bg); position: relative; z-index: 2; }
.ecs-inquiry-body .ecs-body-inner { max-width: 1180px; margin: 0 auto; padding: 40px 24px 64px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px); gap: 32px; align-items: start; }
.ecs-copy h2 { font-size: 30px; line-height: 1.15; margin: 0 0 16px; color: var(--ecs-navy); letter-spacing: -.01em; }
.ecs-copy h2 strong { color: var(--ecs-blue); }
.ecs-copy .ecs-rule { width: 56px; height: 4px; background: var(--ecs-lime); border-radius: 2px; margin: 20px 0; }
.ecs-copy p { font-size: 16px; color: var(--ecs-muted); margin: 0 0 14px; max-width: 640px; }
 
/* On wide screens the form card starts in the hero and overlaps into the body */
@media (min-width: 900px) {
  .ecs-inquiry-hero { padding-bottom: 150px; }
  .ecs-inquiry-body .ecs-form-col { margin-top: -190px; }
}
@media (max-width: 899px) {
  .ecs-inquiry-hero .ecs-hero-inner, .ecs-inquiry-body .ecs-body-inner { grid-template-columns: 1fr; }
  .ecs-apply { order: 2; }
}
 
/* ---------- Form card ---------- */
 
.ecs-form-card { background: #fff; border: 1px solid var(--ecs-line); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(13,42,92,.14); }
.ecs-form-card .ecs-form-head { background: linear-gradient(135deg, var(--ecs-navy), var(--ecs-blue)); color: #fff; padding: 20px 24px 18px; }
.ecs-form-card .ecs-form-head .ecs-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ecs-lime); margin-bottom: 4px; }
.ecs-form-card .ecs-form-head h2 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 800; color: #fff; }
.ecs-form-card .ecs-form-head p { margin: 6px 0 0; font-size: 14px; opacity: .9; }
.ecs-form-card .form_container { padding: 20px 24px 24px; }
 
/* ---------- Slate form elements ---------- */
 
.form_container { font-family: var(--ecs-font); color: var(--ecs-ink); }
/* Slate nests a second div with the same id inside the embed container; make sure it carries no box styling of its own */
.form_container .form_container,
.form_container > div[id^="form_"] { padding: 0; margin: 0; border: 0; box-shadow: none; background: none; max-width: none; }
.form_container .form_question { margin: 0 0 14px; }
.form_container .form_question.hidden { display: none; }
 
/* Slate puts inline float/width on side-by-side fields (first/preferred name). Make them a clean two-up. */
.form_container .form_question[style*="float: left"] { float: left !important; width: calc(50% - 6px) !important; }
.form_container .form_question[style*="float: left"] + .form_question[style*="float: left"] { margin-left: 12px; }
.form_container .form_question[style*="clear: left"] { clear: left !important; }
.form_container .form_page::after { content: ""; display: block; clear: both; }
@media (max-width: 419px) {
  .form_container .form_question[style*="float: left"] { float: none !important; width: 100% !important; margin-left: 0 !important; }
}
 
/* Labels */
.form_container .form_label,
.form_container label.form_label { display: block; font-size: 13px; font-weight: 700; color: var(--ecs-ink); margin: 0 0 6px; letter-spacing: 0; text-transform: none; background: none; padding: 0; }
.form_container .form_question[data-required="1"] > label.form_label::after,
.form_container .form_question[data-required="1"] fieldset > .form_label::after { content: " *"; color: #b42318; font-weight: 700; }
 
/* Section headers (Student's Information, Academic Information) */
.form_container .form_header { margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--ecs-line); }
.form_container .form_header .form_label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ecs-blue); margin: 0; background: none !important; padding: 0 !important; }
.form_container .form_header:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
 
/* Text inputs and selects */
.form_container input[type="text"],
.form_container input[type="email"],
.form_container input[type="tel"],
.form_container input[type="number"],
.form_container textarea,
.form_container select {
  width: 100%; max-width: 100%; font-family: var(--ecs-font); font-size: 15px; color: var(--ecs-ink);
  background: #fff; border: 1.5px solid #c9d2e3; border-radius: 10px; padding: 11px 13px; margin: 0;
  box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.form_container select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%230b4ea2' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.form_container input:focus,
.form_container select:focus,
.form_container textarea:focus { border-color: var(--ecs-blue); box-shadow: 0 0 0 4px rgba(11,78,162,.15); }
.form_container input::placeholder { color: #98a4bb; }
.form_container input:disabled, .form_container select:disabled { background: #f3f5f9; color: #98a4bb; }
 
/* Birthdate: three selects in a row */
.form_container .form_birthdate .form_responses { display: flex; gap: 8px; }
.form_container .form_birthdate select { margin-left: 0 !important; flex: 1 1 0; min-width: 0; }
.form_container .form_birthdate legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.form_container fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
 
/* Radio and checkbox groups: pill-style choices */
.form_container .form_radio .form_responses,
.form_container .form_checkbox .form_responses { display: flex; flex-wrap: wrap; gap: 8px; }
.form_container .form_response { position: relative; margin: 0; }
.form_container .form_response input[type="radio"],
.form_container .form_response input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.form_container .form_response label {
  display: inline-block; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ecs-navy);
  background: #fff; border: 1.5px solid #c9d2e3; border-radius: 999px; padding: 9px 16px; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.form_container .form_response label:hover { border-color: var(--ecs-blue); }
.form_container .form_response input:checked + label { background: var(--ecs-navy); border-color: var(--ecs-navy); color: #fff; }
.form_container .form_response input:focus-visible + label { box-shadow: 0 0 0 4px rgba(11,78,162,.2); }
/* Stack the "Who is filling out this form?" choices full width so all three read as one question */
.form_container .form_radio[data-required="1"] .form_responses { flex-direction: column; }
.form_container .form_radio[data-required="1"] .form_response label { display: block; width: 100%; border-radius: 10px; padding: 11px 14px; }
 
/* Submit button (Slate renders <button class="default form_button_submit" type="button"> inside div.form_action) */
.form_container .form_action { text-align: left; margin: 0; padding: 0; }
.form_container input[type="submit"],
.form_container button[type="submit"],
.form_container .form_button_submit,
.form_container .default_button {
  display: block; width: 100%; margin-top: 20px; cursor: pointer; border: 0; font-family: var(--ecs-font);
  background: var(--ecs-lime); color: var(--ecs-navy); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
  padding: 15px 20px; border-radius: 10px; transition: transform .15s ease, box-shadow .15s ease;
}
.form_container input[type="submit"]:hover,
.form_container button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,42,92,.25); }
 
/* Errors */
.form_container .error { background: #fde8e8; border: 1px solid #f5b5b5; color: #8a1c1c; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.form_container .error.hidden { display: none; }
.form_container .form_question.form_error input,
.form_container .form_question.form_error select { border-color: #d92d20; }
 
/* Fine print under the form */
.ecs-form-card .ecs-form-foot { padding: 0 24px 22px; font-size: 13px; color: var(--ecs-muted); }
.ecs-form-card .ecs-form-foot a { color: var(--ecs-blue); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--ecs-lime); }
.ecs-form-card .ecs-form-foot a:hover { border-bottom:2px solid var(--ecs-blue); }
 
/* ---------- "Why Eastern" tiles (left column, under the intro copy) ---------- */
 
.ecs-why { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--ecs-line); }
.ecs-why h2 { font-size: 24px; margin: 0 0 18px; color: var(--ecs-navy); letter-spacing: -.01em; }
.ecs-why-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ecs-tile { background: #fff; border: 1px solid var(--ecs-line); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 220px 1fr; align-items: stretch; }
.ecs-tile img { display: block; width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.ecs-tile .ecs-tile-body { padding: 18px 20px; }
.ecs-tile .ecs-tag { display: inline-block; background: var(--ecs-lime); color: var(--ecs-navy); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 4px; margin-bottom: 8px; }
.ecs-tile h3 { margin: 0 0 6px; font-size: 18px; color: var(--ecs-navy); }
.ecs-tile p { margin: 0 0 10px; font-size: 15px; color: var(--ecs-muted); }
.ecs-tile a { color: var(--ecs-blue); font-weight: 700; text-decoration: none; font-size: 14px; text-decoration:underline; }
.ecs-tile a:hover { text-decoration-style: double; }
@media (max-width: 560px) {
  .ecs-tile { grid-template-columns: 1fr; }
  .ecs-tile img { aspect-ratio: 3 / 2; min-height: 0; }
}