/* Redesigned home page (staging branch). Everything is scoped under .cgh. */
.cgh {
  --ink: #14213d;
  --muted: #5a6478;
  --line: #dfe4ec;
  --soft: #f3f6fb;
  --brand: #1b4dd8;
  --brand-dark: #153ba8;
  --accent: #f5a400;
  color: var(--ink);
  font-size: 16px;
  max-width: 1140px;
  padding-bottom: 48px;
}
.cgh a { color: var(--brand); }
.cgh h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.cgh h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 12px 0 6px; }
.cgh p { color: var(--muted); }

.cgh-hero { background: var(--soft); border-radius: 16px; margin: 24px 0; padding: 40px 24px 28px; text-align: center; }
.cgh-logo { max-width: 420px; width: 80%; }
.cgh-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: 16px 0 4px; }
.cgh-hero form { margin: 0 auto; max-width: 860px; }
.cgh-hero .row { justify-content: center; }
.cgh-hero .form-control { border-color: var(--line); height: 48px; }
.cgh-hero #searchJobsBtn { background: var(--brand); border-color: var(--brand); font-weight: 600; height: 48px; }
.cgh-hero #searchJobsBtn:hover { background: var(--brand-dark); }
.cgh-browse { margin: 12px 0 0; }

.cgh-quiz { align-items: center; background: var(--ink); border-radius: 16px; color: #fff; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin: 0 0 24px; padding: 20px 24px; }
.cgh-quiz strong { font-size: 1.15rem; }
.cgh-quiz a { background: var(--accent); border-radius: 999px; color: var(--ink); font-weight: 700; padding: 10px 22px; text-decoration: none; }

.cgh-paths { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0 0 24px; }
.cgh-path { border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; padding: 16px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cgh-path:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(20, 33, 61, .08); text-decoration: none; }
.cgh-path strong { color: var(--ink); font-size: 1.05rem; }
.cgh-path span { color: var(--muted); font-size: .9rem; line-height: 1.4; }

.cgh-main { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) 320px; margin: 32px 0; }
.cgh-advice { border-bottom: 1px solid var(--line); margin-bottom: 24px; padding-bottom: 24px; }
.cgh-articles { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cgh-article-img { background-color: var(--soft); background-position: center; background-size: cover; border-radius: 12px; display: block; padding-top: 56%; }
.cgh-article h3 a { color: var(--ink); }
.cgh-article p { font-size: .92rem; margin: 0; }

.cgh-side { display: flex; flex-direction: column; gap: 20px; }
.cgh-side section, .cgh-jobs { border: 1px solid var(--line); border-radius: 12px; padding: 20px !important; }
.cgh-side h2, .cgh-side h4 { font-size: 1.1rem; font-weight: 700; }
.cgh-jobs li { border-bottom: 1px solid var(--line); font-size: .9rem; margin-bottom: 10px; padding-bottom: 10px; }
.cgh-jobs li p { display: none; }

.cgh-cities { background: var(--soft); border-radius: 16px; padding: 28px 24px; }
.cgh-cities ul { columns: 3; column-gap: 32px; list-style: none; margin: 0; padding: 0; }
.cgh-cities li { break-inside: avoid; padding: 3px 0; }

/* Reserved places for ads and partners. The labels show on staging only. */
.cgh-slot { align-items: center; background: repeating-linear-gradient(45deg, #fff, #fff 10px, #f6f1e3 10px, #f6f1e3 20px); border: 2px dashed #c9a23a; border-radius: 12px; color: #7a5b00; display: flex; font-size: .85rem; font-weight: 600; justify-content: center; min-height: 250px; text-align: center; }
.cgh-slot-wide { min-height: 100px; }

@media (max-width: 900px) {
  .cgh-main { grid-template-columns: 1fr; }
  .cgh-cities ul { columns: 2; }
}
@media (max-width: 560px) {
  .cgh-articles { grid-template-columns: 1fr; }
  .cgh-cities ul { columns: 1; }
}

/* ------------------------------------------------------------------
   Site-wide look. Loaded after all.min.css on every page.
   ------------------------------------------------------------------ */
:root {
  --ink: #14213d;
  --muted: #5a6478;
  --line: #dfe4ec;
  --soft: #f3f6fb;
  --brand: #1b4dd8;
  --brand-dark: #153ba8;
  --accent: #f5a400;
}
body { background: #fff; border-top: 0; color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* Header */
header.navbar { background: var(--ink) !important; border-bottom: 3px solid var(--accent); padding: 10px 20px; }
header.navbar .nav-link { color: #dbe3f3 !important; font-weight: 500; }
header.navbar .nav-link:hover { color: #fff !important; }
header.navbar .form-control { border: 0; border-radius: 8px; height: 36px; }
header.navbar .form-check-label { color: #dbe3f3; }
.btn-gold, header.navbar .btn-gold { background: var(--accent); border-color: var(--accent); border-radius: 8px; color: var(--ink); font-weight: 700; }
.btn-gold:hover { background: #e09600; color: var(--ink); }

/* Breadcrumb */
.bg-grey { background: transparent !important; border-bottom: 1px solid var(--line); }
.breadcrumb { background: transparent; font-size: .85rem; padding: 12px 0; }
.breadcrumb a { color: var(--muted); }

/* Reading pages */
main { line-height: 1.7; }
main h1, h1#jobSearchTitle { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 20px 0 16px; }
main h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 1.7em 0 .5em; }
main h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5em 0 .4em; }
main h4 { font-size: 1.05rem; font-weight: 700; }
main > p, main > ul, main > ol, main > h1, main > h2, main > h3, main > blockquote { max-width: 78ch; }
main p, main li { font-size: 1.03rem; }
main li { margin-bottom: .35em; }
main img { border-radius: 10px; max-width: 100%; height: auto; }
main blockquote { border-left: 4px solid var(--accent); color: var(--muted); margin: 1.5em 0; padding: 4px 0 4px 18px; }
.byline { color: var(--muted); font-size: .9rem; }
hr { border-top-color: var(--line); }

/* Buttons, cards, tables, forms */
.btn { border-radius: 10px; font-weight: 600; }
.btn-pill { border-radius: 999px; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline-secondary { border-color: var(--line); color: var(--brand); }
.btn-outline-secondary:hover { background: var(--soft); border-color: var(--brand); color: var(--brand-dark); }
.card { border: 1px solid var(--line); border-radius: 14px; }
.list-group-item { border-color: var(--line); }
main table { border-collapse: collapse; margin: 1.2em 0; width: 100%; }
main table th { background: var(--soft); font-weight: 700; text-align: left; }
main table th, main table td { border: 1px solid var(--line); padding: 10px 12px; vertical-align: top; }
.form-control { border-color: var(--line); border-radius: 8px; }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27, 77, 216, .15); }

/* Job listings */
ul.list-unstyled > li.word-break, #oco-top-jobs li, ul[data-live-jobs] > li { border-bottom: 1px solid var(--line); margin: 0; padding: 16px 0; }
ul.list-unstyled > li.word-break hr, ul[data-live-jobs] > li hr { display: none; }
a.job-url { font-size: 1.08rem; font-weight: 700; }
li.word-break p, ul[data-live-jobs] li p { color: var(--muted); font-size: .95rem; margin: 6px 0 0; }
ul.pagination { flex-wrap: wrap; gap: 6px; margin: 24px 0; }
ul.pagination li a { border: 1px solid var(--line); border-radius: 8px; color: var(--brand); display: block; padding: 8px 14px; text-decoration: none; }
ul.pagination li.active a { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Footer */
footer.footer { background: var(--ink) !important; color: #c9d2e3; margin-top: 56px !important; padding: 40px 0 !important; }
footer.footer a { color: #fff; }
footer.footer p { color: #c9d2e3; }
footer.footer .btn-outline-secondary { border-color: #46557a; color: #fff; }

/* Career and interview pages: content plus a right-hand column */
.cgr-layout { align-items: start; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) 320px; }
.cgr-layout > main { min-width: 0; }
.cgr-side { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.cgr-side .cgh-jobs h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.cgr-side .cgh-jobs li { font-size: .9rem; padding: 10px 0; }
.cgr-side .cgh-jobs a.job-url { font-size: .95rem; }
.cgr-sticky { position: sticky; top: 84px; }

/* Styles the older pages still use */
.well, .panel, .panel-body { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; padding: 16px 20px; }
.panel .panel-body { background: transparent; border: 0; padding: 0; }
.panel-heading { background: transparent; border: 0; font-weight: 700; padding: 0 0 8px; }
.btn-default { background: #fff; border: 1px solid var(--line); color: var(--brand); }
.btn-default:hover { background: var(--soft); border-color: var(--brand); color: var(--brand-dark); }
.alert-info { background: #eaf0fe; border-color: #cfdcfb; border-radius: 12px; color: var(--ink); }
.badge { background: var(--soft); border-radius: 999px; color: var(--ink); }
.text-danger { color: #b3261e !important; }
.gold-links, a.gold-links { color: var(--brand) !important; }
[style*="#0b6cda"], [style*="#0B6CDA"] { color: var(--brand) !important; }
[style*="rgb(225,225,225)"] { background: var(--soft) !important; }
.oco-table th, table.oco-table th, .oco-hh { color: var(--ink); }
.oco-about a { color: var(--ink); }
.jumbotron { background: var(--soft); border-radius: 16px; }

/* Career quiz, in the same colors */
body .cgq { --cgq-ink: #14213d; --cgq-muted: #5a6478; --cgq-line: #dfe4ec; --cgq-surface: #fff; --cgq-soft: #f3f6fb; --cgq-accent: #1b4dd8; --cgq-accent-ink: #fff; --cgq-accent-soft: #e6edfd; }
body .cgq-card { border-radius: 16px; }
body .cgq-letter { background: #14213d; color: #f5a400; }

/* New footer */
footer.cgf { margin-top: 56px !important; padding: 48px 0 24px !important; }
.cgf-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.cgf h2 { color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 12px; text-transform: uppercase; }
.cgf li { margin-bottom: 8px; }
.cgf-about p { font-size: .92rem; line-height: 1.6; }
.cgf-legal { border-top: 1px solid #2c3c63; margin-top: 32px; padding-top: 20px; text-align: center; }

/* Small screens */
@media (max-width: 991px) {
  .cgr-layout { grid-template-columns: 1fr; }
  .cgr-sticky { position: static; }
  header.navbar { padding: 8px 14px; }
  header.navbar .navbar-collapse { padding: 12px 0 4px; }
  header.navbar #headerjobsearchfrm { display: grid; gap: 8px; grid-template-columns: 1fr 1fr auto; }
  header.navbar #headerjobsearchfrm .form-group { margin: 0 !important; }
  header.navbar #headerjobsearchfrm .form-group:nth-of-type(n+4), header.navbar #headerjobsearchfrm .clearfix { display: none; }
  header.navbar #headerjobsearchfrm .form-control { width: 100%; }
  header.navbar .navbar-nav { margin-top: 8px; }
  .cgf-grid { grid-template-columns: 1fr 1fr; }
  .cgf-about { grid-column: 1 / -1; }
  main table { display: block; overflow-x: auto; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { padding-left: 16px; padding-right: 16px; }
  header.navbar #headerjobsearchfrm { grid-template-columns: 1fr; }
  .cgh-hero { margin: 12px 0 20px; padding: 24px 14px 20px; }
  .cgh-paths { grid-template-columns: 1fr 1fr; }
  .cgh-quiz { justify-content: center; text-align: center; }
  main h1, h1#jobSearchTitle { font-size: 1.6rem; }
  main h2 { font-size: 1.3rem; }
}