/*
 * MCG Connect visual refresh (docs/mcg-design-refresh-plan.md).
 * Loaded LAST in every layout, after all vendor CSS and the existing
 * public.site.style.css / public.responsive.style.css overrides, so it can
 * cascade over both without editing them.
 *
 * Rules only - no markup/JS changes. Every selector here already exists in
 * grails-app/views/**; nothing is renamed. Grep web-app/js/ for a class name
 * before assuming it is safe to add a new rule against it.
 */

/* ---- Fonts (first-time addition - no other stylesheet in this project loads
   a web font yet, so this @import is the whole mechanism). @import must stay
   the first rule in the file. ---- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@600;700&display=swap');

/* ---- §1 design tokens ---- */
:root {
  --mcg-ink: #16232B;
  --mcg-ink-soft: #4B5B60;
  --mcg-paper: #F5F7F6;
  --mcg-surface: #FFFFFF;
  --mcg-border: #DCE3E1;

  --mcg-primary: #1D6E63;
  --mcg-primary-dark: #14504A;
  --mcg-primary-tint: #E3F0ED;

  --mcg-accent: #C4622B;
  --mcg-accent-tint: #F5E4D6;

  --mcg-success: #2E8B57;
  --mcg-warning: #C4862B;
  --mcg-danger: #C0392B;

  --mcg-radius: 8px;
  --mcg-radius-lg: 14px;
  --mcg-shadow: 0 1px 2px rgba(22, 35, 43, 0.06), 0 4px 16px rgba(22, 35, 43, 0.06);
}

/* ---- §2.1 base overrides ---- */
body {
  background: var(--mcg-paper);
  color: var(--mcg-ink);
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "IBM Plex Serif", Georgia, serif;
  color: var(--mcg-ink);
}

a {
  color: var(--mcg-primary);
}
a:hover, a:focus {
  color: var(--mcg-primary-dark);
}

.btn-primary {
  background: var(--mcg-primary);
  border-color: var(--mcg-primary);
  border-radius: var(--mcg-radius);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--mcg-primary-dark);
  border-color: var(--mcg-primary-dark);
}

/* Destructive actions stay on the semantic danger token, not the brand teal. */
.btn-danger {
  background: var(--mcg-danger);
  border-color: var(--mcg-danger);
  border-radius: var(--mcg-radius);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: #a53324;
  border-color: #a53324;
}

/* web-app/publicsite/css/main.style.css:3151-3154/3172-3175 themes this exact
   two-class combo (used on the homepage "Get started" tiles and many
   candidate-profile edit/add buttons, e.g. "btn btn-primary btn-inverse edit
   edit-ced-btn") with !important on color/border-color, which beats any
   later same-or-lower-specificity rule regardless of load order - so this
   override has to match with !important too, not just rely on source order. */
.btn-primary.btn-inverse {
  color: var(--mcg-primary) !important;
  border-color: var(--mcg-primary) !important;
  background: transparent;
}
.btn-primary.btn-inverse:hover,
.btn-primary.btn-inverse:focus {
  color: #FFF !important;
  background: var(--mcg-primary);
  border-color: var(--mcg-primary) !important;
}

input.form-control,
select.form-control,
textarea.form-control {
  border-color: var(--mcg-border);
  border-radius: var(--mcg-radius);
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--mcg-primary);
  box-shadow: 0 0 0 2px var(--mcg-primary-tint);
}

/* ---- §3.1 public site nav + hero ----
   Source markup: grails-app/views/layouts/public_site_main.gsp (header/nav),
   grails-app/views/publicSite/index.gsp (.hero). The nav currently ships in
   three vendor states - transparent-on-photo (home), solid dark (every other
   page), and a darker "sticky" bar on scroll - all defined in
   web-app/publicsite/css/style.css. We flatten all three to one calm surface
   treatment instead of layering a fourth dark variant on top. */
.navbar.navbar-default,
.not-transparent-header .navbar-default,
.navbar-sticky.navbar-default {
  background: var(--mcg-surface);
  border-bottom: 1px solid var(--mcg-border);
  box-shadow: none;
}

#responsive-menu > li > a,
.nav-mini-wrapper a {
  color: var(--mcg-ink);
}
#responsive-menu > li > a:hover,
#responsive-menu > li > a:focus,
.navbar-sticky .navbar-nav > li > a:hover,
.navbar-sticky .navbar-nav > li > a:focus,
.nav-mini-wrapper a:hover,
.nav-mini-wrapper a:focus {
  color: var(--mcg-primary);
  background: transparent;
}

/* The nav is flattened to a white surface above, but the vendor stylesheet
   (publicsite/css/style.css, `ul.nav-mini.sign-in li a`) still draws these
   buttons white-on-white, so Login / Register - and My Account / Logout once
   signed in - were invisible until the page scrolled. Higher specificity here
   wins without touching the vendor file. */
.nav-mini-wrapper ul.nav-mini.sign-in li a {
  color: var(--mcg-primary) !important;
  border: 1px solid var(--mcg-primary) !important;
  background: transparent;
}
.nav-mini-wrapper ul.nav-mini.sign-in li a:hover,
.nav-mini-wrapper ul.nav-mini.sign-in li a:focus {
  color: #fff !important;
  background: var(--mcg-primary);
  border-color: var(--mcg-primary) !important;
}
.navbar-sticky .navbar-nav > .active > a,
.navbar-sticky .navbar-nav > .active > a:hover,
.navbar-sticky .navbar-nav > .active > a:focus {
  color: var(--mcg-primary);
}

/* .hero keeps its existing photo background (inline style, per-record banner
   image) and the vendor .hero::before overlay for text legibility - only the
   overlay tint and the heading/paragraph typography change here. */
.hero::before {
  background: linear-gradient(180deg, rgba(20, 44, 40, 0.55), rgba(20, 44, 40, 0.35));
}
.hero h1 {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 700;
  line-height: 1.1;
}
.hero p {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- §3.2 cards: job-category tiles, testimonials, footer ---- */
.category-group-wrapper.with-background .category-group {
  background: var(--mcg-surface);
  border-radius: var(--mcg-radius-lg);
  box-shadow: var(--mcg-shadow);
  padding: 40px 30px 35px;
}
.category-group .icon {
  color: var(--mcg-primary);
}
.category-group h4,
.category-group h5 {
  color: var(--mcg-ink);
}

.testimonial-grid-item {
  background: var(--mcg-surface);
  border-radius: var(--mcg-radius-lg);
  box-shadow: var(--mcg-shadow);
  padding: 30px;
}
.testimonial-grid-item .heading h3,
.testimonial-grid-item .heading h4,
.testimonial-grid-item .heading h5 {
  border-bottom-color: var(--mcg-primary);
  color: var(--mcg-primary);
}
.testimonial-grid-item .content:before {
  color: var(--mcg-primary-tint);
}

.main-footer a,
.bottom-footer a {
  color: rgba(255, 255, 255, 0.6);
}
.main-footer a:hover,
.bottom-footer a:hover {
  color: var(--mcg-accent);
}
h5.footer-title {
  color: #FFF;
}
ul.bottom-footer-menu li:after {
  background: var(--mcg-accent);
}

/* ---- §3.3 candidate profile accordion (task 1.4) ----
   Selectors below are addressed to CSS-only hooks. None of the following are
   touched, confirmed by grep of web-app/js/candidate/candidate.profile.ajax.js:
   .ajax-save-form, .ajax-list-form, .ajax-delete-link, #profile-accordion,
   .profile-section-nav, .form-panel-footer, .modal-footer. */
.profile-accordion .panel {
  border: 1px solid var(--mcg-border);
  border-radius: var(--mcg-radius-lg);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 16px;
}
.profile-accordion .panel-heading {
  background: var(--mcg-surface);
  border-bottom: 1px solid var(--mcg-border);
}
.profile-accordion .panel-title a {
  color: var(--mcg-ink);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
}
.profile-accordion .panel-title a:hover {
  color: var(--mcg-primary);
}
.profile-accordion .panel-body {
  background: var(--mcg-paper);
}

.profile-section-nav a {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--mcg-border);
  background: var(--mcg-surface);
  color: var(--mcg-ink-soft);
  padding: 6px 16px;
  margin: 0 6px 8px 0;
}
.profile-section-nav a:hover,
.profile-section-nav a:focus {
  border-color: var(--mcg-primary);
  color: var(--mcg-primary);
  background: var(--mcg-primary-tint);
}

.form-panel-footer .btn-primary,
.modal-footer .btn-success {
  background: var(--mcg-primary);
  border-color: var(--mcg-primary);
}
.form-panel-footer .btn-primary:hover,
.modal-footer .btn-success:hover {
  background: var(--mcg-primary-dark);
  border-color: var(--mcg-primary-dark);
}

/* ---- §3.4 mobile pass (>= web-app/css/public.responsive.style.css breakpoint) ----
   public.responsive.style.css already handles nav width collapsing at 991px
   and modal/checkbox/captcha fixes at 500px - this only adds spacing fixes for
   the rules introduced above, at the same 500px breakpoint, so it never
   duplicates or fights those existing rules. */
@media (max-width: 500px) {
  .category-group-wrapper.with-background .category-group {
    padding: 30px 20px 25px;
  }
  .testimonial-grid-item {
    padding: 20px;
    margin-bottom: 15px;
  }
  .hero h1 {
    line-height: 1.2;
  }
  .profile-section-nav a {
    padding: 8px 14px;
    margin: 0 4px 8px 0;
    font-size: 13px;
  }
}