/* =========================================================
   CC: ccg-theme.css - the 2026 look for the parent-facing enrol pages.
   CC: - Every rule is scoped under .ccg-theme (on <body>), so removing that class switches the whole look off.
   CC: - No colours, fonts or sizes are typed here: they all come from ccg-tokens.css.
   CC: - Loaded after Bootstrap 4.0.0 and css/frontend.css, so equal-specificity rules here win.
   CC: - SAFETY RULE: never set `display` on existing app elements (except the header/footer layout), because the app
   CC:   shows/hides things with the .hide/.show classes, jQuery .show()/.hide() and inline style="display:none".
   CC: - Only cosmetic changes: no element is hidden, moved in the DOM, or renamed.
   ========================================================= */


/* ---------------------------------------------------------
   CC: 1. Base typography - every page
   --------------------------------------------------------- */
/* CC: frontend.css sets `* { font-family: NovelPro-Light }` on every element. :where() keeps this at zero
   CC: specificity, so it replaces that rule (it loads later) while icon fonts (.fa) still win. */
:where(.ccg-theme) * {
  font-family: var(--font-body);
}

body.ccg-theme {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);   /* CC: overrides frontend.css body 14px */
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.ccg-theme h1, .ccg-theme h2, .ccg-theme h3,
.ccg-theme h4, .ccg-theme h5, .ccg-theme h6, .ccg-theme legend {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* CC: The app uses <h4> as the page/section heading on almost every page, so h4 gets the "page heading" size. */
.ccg-theme h1 { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--space-3); }
.ccg-theme h2 { font-size: var(--text-xl);  font-weight: 700; margin: var(--space-6) 0 var(--space-4); }
.ccg-theme h3 { font-size: var(--text-lg);  font-weight: 700; margin: var(--space-5) 0 var(--space-3); }
.ccg-theme h4 { font-size: var(--text-xl);  font-weight: 700; margin: 0 0 var(--space-4); color: var(--ink); }
.ccg-theme h5 { font-size: var(--text-lg);  font-weight: 700; margin: var(--space-4) 0 var(--space-3); }
.ccg-theme h6 { font-size: var(--text-base); font-weight: 600; margin: var(--space-3) 0 var(--space-2); }

.ccg-theme p { max-width: 65ch; margin: 0 0 var(--space-4); }
.ccg-theme b, .ccg-theme strong { font-weight: 700; }
.ccg-theme small, .ccg-theme .small, .ccg-theme .form-text { font-size: var(--text-sm); color: var(--muted); }

.ccg-theme a {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ccg-theme a:hover {
  color: var(--brand-800);
  text-decoration-thickness: 2px;
}

/* CC: One visible focus style for everything (keyboard users) */
.ccg-theme :focus-visible {
  outline: 3px solid var(--brand-600);
  outline-offset: 2px;
}

/* CC: "Skip to content" link - hidden until focused with the keyboard */
.ccg-theme .ccg-skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--brand-700);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 600;
}
.ccg-theme .ccg-skip-link:focus { top: var(--space-2); }


/* ---------------------------------------------------------
   CC: 2. Header - templates/shared/layout.phtml (#masthead)
   --------------------------------------------------------- */
/* CC: frontend.css gives the header a banner.png background image and 50px bottom margin */
.ccg-theme .site-header {
  background: var(--brand-900);
  background-image: none;
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 4px solid var(--brand-700);
}
.ccg-theme .site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--width-page);
  padding: 0 var(--gutter);
}
/* CC: the old float layout; flexbox above does the job now */
.ccg-theme .site-header .logoleft,
.ccg-theme .site-header .headerright { float: none; }
.ccg-theme .site-header .logoleft a { display: block; }
.ccg-theme .site-header .logoleft img {
  display: block;
  height: var(--header-logo-height);
  width: auto;
}
.ccg-theme .site-header .headerright { text-align: right; min-width: 0; }
/* CC: the header <h1> holds the page's $seotitle - shown as a quiet label, the page heading does the talking */
.ccg-theme .site-header .headerright h1 {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-brand);
  opacity: 0.9;
  margin: 0;
  padding: 0;
}
.ccg-theme .site-header .headerright a { color: var(--on-brand); }
.ccg-theme .site-header .headerright h6 {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--on-brand);
  margin: var(--space-1) 0 0;
}
/* CC: the clearfix divs after the floats are no longer needed, but are kept in the markup */
.ccg-theme .site-header > div[style*="clear"] { height: 0; }

@media (max-width: 639px) {
  .ccg-theme .site-header .logoleft img { height: 3.5rem; }
  .ccg-theme .site-header .headerright h1 { font-size: var(--text-xs); letter-spacing: 0.04em; }
}


/* ---------------------------------------------------------
   CC: 3. Page card - the main content column, every page
   --------------------------------------------------------- */
.ccg-theme main.container {
  max-width: var(--width-form);
  margin: var(--space-6) auto var(--space-7);
  padding: var(--space-5) var(--gutter);
  background: var(--surface);
}
@media (min-width: 640px) {
  .ccg-theme main.container {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    padding: var(--space-6) var(--space-6);
  }
}
@media (min-width: 900px) {
  .ccg-theme main.container { padding: var(--space-7) var(--space-7); }
}
/* CC: on phones the card goes edge to edge (guide 6.1) */
@media (max-width: 639px) {
  .ccg-theme main.container { margin: 0 0 var(--space-6); }
}

/* CC: Many templates put headings/paragraphs straight inside a Bootstrap .row (e.g. <div class="form-group row">
   CC: <h4>...</h4></div>). A .row has -15px side margins that only its .col-* children make up for, so those
   CC: headings poke out past the fields. This gives them the same 15px inset as a column. */
.ccg-theme main .row > :not([class*="col"]):not(.row):not(input):not(script) {
  padding-left: 15px;
  padding-right: 15px;
}
.ccg-theme main ul, .ccg-theme main ol { padding-left: 1.5rem; margin-bottom: var(--space-4); }
.ccg-theme main .row > :is(ul, ol) { padding-left: calc(15px + 1.5rem); }
.ccg-theme main li:not(.breadcrumb-item) { max-width: 65ch; margin-bottom: var(--space-1); }

/* CC: Label-beside-field rows (<div class="col-md-2"><label> + <div class="col-md-4"><input>) squeeze the label
   CC: into ~120px so it wraps. Inside the card, the label sits above its field instead (guide 7.3 field anatomy)
   CC: and the field gets a comfortable width. Only column sizing changes - nothing moves in the DOM. */
@media (min-width: 768px) {
  .ccg-theme main .row > :is(.col-md-1, .col-md-2, .col-md-3):has(> label:only-child) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .ccg-theme main .row > :is(.col-md-1, .col-md-2, .col-md-3):has(> label:only-child)
    + :is(.col-md-3, .col-md-4, .col-md-5, .col-md-6) {
    flex: 0 0 100%;
    max-width: 32rem;
  }
  /* CC: Radio options drawn as input-groups, one per narrow .col-md-2 (e.g. Gender, Yes/No questions), size to
     CC: their text instead of overflowing it. */
  .ccg-theme main .row > [class*="col-md-"]:has(> .input-group input[type="radio"]):not(:has(> label)) {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}

/* CC: Action rows - the Back/Cancel + Continue/Save buttons at the foot of every form step. The app renders them
   CC: as <div class="form-group row"> with one button per .col-md-4. Here the row becomes a bar: a divider on top,
   CC: Back on the left, the main action on the right (guide 7.2). Phones: full width, Back above (DOM order). */
.ccg-theme main .row:has(> [class*="col"] > .btn.form-control:only-child):not(:has(> [class*="col"] > :not(.btn))) {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  row-gap: var(--space-3);
}
@media (min-width: 768px) {
  .ccg-theme main .row:has(> [class*="col"] > .btn.form-control:only-child):not(:has(> [class*="col"] > :not(.btn))) {
    justify-content: space-between;
  }
  .ccg-theme main .row > [class*="col"]:has(> .btn.form-control:only-child) {
    flex: 0 0 auto;
    width: auto;        /* CC: Bootstrap columns are width:100%, which would stack the buttons */
    max-width: 100%;
  }
  .ccg-theme main .row > [class*="col"] > .btn.form-control:only-child {
    width: auto;
    min-width: 12rem;
  }
}


/* ---------------------------------------------------------
   CC: 3b. Landing pages - / (templates/login.phtml) and /start (templates/home/start.phtml), body.ccg-page--landing
   CC: A photo panel beside the form on desktop, a short banner above it on phones (guide 8.1). Until marketing
   CC: supplies consented campus photos, it's a brand-colour panel with the logo (guide 9.1). To use a photo, set
   CC: --landing-photo in css/brands/<brand>.css, e.g. url("/images/landing-hero.webp").
   --------------------------------------------------------- */
.ccg-theme.ccg-page--landing main.container::before {
  content: "";
  display: block;       /* CC: a pseudo-element owned by the theme, not an app element */
  aspect-ratio: 3 / 2;
  max-height: 11rem;
  width: 100%;
  margin: 0 0 var(--space-5);
  border-radius: var(--radius-md);
  background:
    var(--landing-photo, linear-gradient(color-mix(in srgb, var(--brand-900) 55%, transparent),
                                         color-mix(in srgb, var(--brand-900) 55%, transparent))),
    var(--brand-logo) center / 70% auto no-repeat,
    var(--brand-900);
  background-size: cover, min(70%, 18rem) auto, auto;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .ccg-theme.ccg-page--landing main.container {
    position: relative;
    max-width: var(--width-page);
    padding-right: calc(24rem + var(--space-7) * 2);
    min-height: 36rem;
  }
  .ccg-theme.ccg-page--landing main.container::before {
    position: absolute;
    top: var(--space-7);
    right: var(--space-7);
    bottom: var(--space-7);
    width: 24rem;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    border-radius: var(--radius-lg);
  }
  .ccg-theme.ccg-page--landing .ccg-footer__inner { max-width: var(--width-page); }
}
/* CC: the landing heading gets the big size (it's an <h4> in the template) */
.ccg-theme.ccg-page--landing #heading h4 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}


/* ---------------------------------------------------------
   CC: 4. Buttons - every page. .btn (Bootstrap + frontend.css), <button>, submit inputs
   --------------------------------------------------------- */
/* CC: The base button rules use :where() so they carry the specificity of a single class. That lets the variants
   CC: below (.btn-secondary, .btn-link...) win without an arms race, and still beats Bootstrap/frontend.css
   CC: because this file loads last. */
.ccg-theme :where(.btn, button, input[type="submit"], input[type="button"]) {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--brand-700);
  background: var(--brand-700);
  background-image: none;   /* CC: frontend.css .btn paints a gradient */
  color: var(--on-brand);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.ccg-theme :where(.btn, button, input[type="submit"], input[type="button"]):hover {
  background: var(--brand-800);
  border-color: var(--brand-800);   /* CC: frontend.css .btn:hover sets a grey border */
  color: var(--on-brand);
  text-decoration: none;
}
.ccg-theme :where(.btn, button, input[type="submit"], input[type="button"]):focus { box-shadow: var(--focus-ring); }
.ccg-theme :where(.btn, button, input[type="submit"], input[type="button"]):active { transform: translateY(1px); }
.ccg-theme :where(.btn, button, input[type="submit"], input[type="button"]):disabled,
.ccg-theme .btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* CC: Bootstrap 4.0's primary button turns bright blue while pressed/focused (bootbox OK buttons use it) -
   CC: these match its selectors exactly so they win. */
.ccg-theme .btn-primary,
.ccg-theme .btn-primary:not(:disabled):not(.disabled):active,
.ccg-theme .btn-primary:not(:disabled):not(.disabled).active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--on-brand);
}
.ccg-theme .btn-primary:hover,
.ccg-theme .bootbox-alert .btn-primary:hover {  /* CC: frontend.css pins bootbox OK buttons' colour at (0,3,2) */
  background: var(--brand-800);
  border-color: var(--brand-800);
}
.ccg-theme .btn-primary:focus,
.ccg-theme .btn-primary.focus,
.ccg-theme .btn-primary:not(:disabled):not(.disabled):active:focus,
.ccg-theme .btn-secondary:not(:disabled):not(.disabled):active:focus { box-shadow: var(--focus-ring); }

/* CC: <a class="btn"> (e.g. dashboard Continue) - the link colour rule above would paint its text burgundy */
.ccg-theme a.btn,
.ccg-theme a.btn:hover { color: var(--on-brand); text-decoration: none; }

/* CC: The app puts class="btn form-control" on most buttons. Bootstrap's .form-control:focus / :disabled (turning
   CC: the button white or grey, with white text) outrank the :where() base rule, so they're matched here. */
.ccg-theme .btn.form-control:focus {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--on-brand);
  box-shadow: var(--focus-ring);
}
.ccg-theme .btn.form-control:hover { background: var(--brand-800); border-color: var(--brand-800); }
.ccg-theme .btn.form-control:disabled {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--on-brand);
}

/* CC: Bootstrap close buttons (x) are plain icons, not primary buttons */
.ccg-theme button.close {
  background: none;
  border: 0;
  min-height: 0;
  padding: 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-xl);
  opacity: 1;
}

/* CC: Secondary - Bootstrap's secondary/light/outline variants (Back, Cancel, bootbox Cancel) */
.ccg-theme .btn-secondary,
.ccg-theme .btn-default,
.ccg-theme .btn-light,
.ccg-theme .btn-outline-primary,
.ccg-theme .btn-outline-secondary {
  background: var(--surface);
  color: var(--brand-700);
  border-color: var(--brand-700);
}
.ccg-theme .btn-secondary:not(:disabled):not(.disabled):active,
.ccg-theme .btn-secondary:hover,
.ccg-theme .btn-default:hover,
.ccg-theme .btn-light:hover,
.ccg-theme .btn-outline-primary:hover,
.ccg-theme .btn-outline-secondary:hover {
  background: var(--brand-100);
  color: var(--brand-800);
  border-color: var(--brand-800);
}

/* CC: Secondary by what they do - the app gives Back/Cancel/Add... buttons no distinguishing class, so they're
   CC: picked out by their existing value (read only - the values themselves are never changed). Plain
   CC: type=button inputs without .btn (upload "here" / Remove file buttons) are secondary too. */
/* CC: (.btn.form-control repeated so these outrank the .btn.form-control:focus/:disabled fixes below) */
.ccg-theme input[type="button"]:is([value="Back"], [value="Cancel"], [value^="Add "], [value="Fill Contact"]),
.ccg-theme input[type="button"].btn.form-control:is([value="Back"], [value="Cancel"], [value^="Add "], [value="Fill Contact"]):is(:focus, :disabled),
.ccg-theme input[type="button"].form-control:not(.btn),
.ccg-theme button[type="button"].form-control:not(.btn) {
  background: var(--surface);
  color: var(--brand-700);
  border-color: var(--brand-700);
}
.ccg-theme input[type="button"]:is([value="Back"], [value="Cancel"], [value^="Add "], [value="Fill Contact"]):hover,
.ccg-theme input[type="button"].btn.form-control:is([value="Back"], [value="Cancel"], [value^="Add "], [value="Fill Contact"]):hover,
.ccg-theme input[type="button"].form-control:not(.btn):hover,
.ccg-theme button[type="button"].form-control:not(.btn):hover {
  background: var(--brand-100);
  color: var(--brand-800);
  border-color: var(--brand-800);
}

/* CC: Link-style buttons (e.g. "Send a new code" on /start) keep looking like links */
.ccg-theme .btn-link,
.ccg-theme .btn-link:hover,
.ccg-theme .btn-link:focus {
  background: none;
  border-color: transparent;
  color: var(--brand-600);
  min-height: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ccg-theme .btn-link:hover { color: var(--brand-800); text-decoration-thickness: 2px; }

/* CC: Danger buttons (remove sibling/allergy etc.) */
.ccg-theme .btn-danger {
  background: var(--surface);
  color: var(--danger-700);
  border-color: var(--danger-700);
}
.ccg-theme .btn-danger:hover {
  background: var(--danger-100);
  color: var(--danger-700);
  border-color: var(--danger-700);
}

/* CC: Small buttons stay small */
.ccg-theme .btn-sm {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}


/* ---------------------------------------------------------
   CC: 5. Text inputs, selects and text areas - every form
   CC: Bootstrap's .form-control already makes these full width; bare inputs keep their own width, because some
   CC: pages put several small selects on one line (dates, expiry month/year).
   --------------------------------------------------------- */
/* CC: :where() for the same reason as the buttons. `.form-control:not(.btn)` because the app puts class="btn
   CC: form-control" on submit buttons (e.g. Begin) - those must stay buttons. */
.ccg-theme :where(.form-control:not(.btn), input[type="text"], input[type="email"], input[type="tel"],
                  input[type="number"], input[type="date"], input[type="password"], input[type="search"],
                  input:not([type]), select, textarea) {
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: max(16px, var(--text-base)); /* CC: 16px minimum stops iPhones zooming in on tap */
  line-height: 1.4;
  color: var(--ink);
  background-color: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
/* CC: Bootstrap 4.0 fixes select.form-control height with a higher-specificity rule - matched here to override */
.ccg-theme select.form-control:not([size]):not([multiple]) { height: auto; min-height: var(--control-height); }
.ccg-theme :where(.form-control:not(.btn), input[type="text"], input[type="email"], input[type="tel"],
                  input[type="number"], input[type="date"], input[type="password"], input[type="search"],
                  input:not([type]), select, textarea):hover { border-color: var(--text); }

.ccg-theme :where(.form-control:not(.btn), input[type="text"], input[type="email"], input[type="tel"],
                  input[type="number"], input[type="date"], input[type="password"], input[type="search"],
                  input:not([type]), select, textarea):focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: var(--focus-ring);
}
.ccg-theme :where(input, textarea)::placeholder { color: var(--muted); opacity: 1; }

.ccg-theme :where(.form-control:not(.btn), input[type="text"], input[type="email"], input[type="tel"],
                  input[type="number"], input[type="date"], input[type="password"], input[type="search"],
                  input:not([type]), select, textarea):disabled {
  background-color: var(--canvas);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
}

.ccg-theme textarea,
.ccg-theme textarea.form-control { min-height: 8rem; resize: vertical; }

/* CC: A cleaner arrow for selects - still the native <select> */
.ccg-theme select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2334303A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 16px 16px;
}
/* CC: short selects (e.g. Title) in narrow columns were cut down to one letter */
.ccg-theme select { min-width: 6.5rem; }
/* CC: read-only fields are mostly jQuery UI date pickers (you pick, not type) - they should look editable.
   CC: Bootstrap greys .form-control[readonly] out. */
.ccg-theme .form-control[readonly] { background-color: var(--surface); cursor: pointer; }

.ccg-theme select[multiple],
.ccg-theme select[size]:not([size="1"]) {
  background-image: none;
  padding-right: var(--space-4);
}


/* ---------------------------------------------------------
   CC: 6. Labels and helper text - every form
   CC: (labels are never moved: js/validation.js setContactRequired() finds them via the input's parentNode)
   --------------------------------------------------------- */
.ccg-theme label {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);        /* CC: frontend.css makes labels grey (#6E686A) */
  margin-bottom: var(--space-2);
  line-height: 1.35;
}
/* CC: frontend.css right-aligns side-by-side labels at >= 768px */
@media (min-width: 768px) {
  .ccg-theme .form-group.row > .col-form-label { text-align: left; color: var(--ink); }
}


/* ---------------------------------------------------------
   CC: 7. Checkboxes and radio buttons - every form (native controls, just recoloured and enlarged)
   --------------------------------------------------------- */
.ccg-theme input[type="checkbox"],
.ccg-theme input[type="radio"] {
  accent-color: var(--brand-700);
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  vertical-align: -0.2em;
  cursor: pointer;
}

/* CC: Radios/checkboxes drawn as Bootstrap input-groups ([o] | label.form-control), e.g. Gender on the contact
   CC: forms. The whole row reads as one choice card and is highlighted when chosen. */
.ccg-theme .input-group-text {
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 0 var(--space-4);
}
.ccg-theme .input-group > label.form-control {
  display: flex;               /* CC: a label styled as a box - not toggled by the app */
  align-items: center;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}
/* CC: highlight only the chosen option - some input-groups hold both Yes and No, so the rules key off the
   CC: option's own prepend box and the label straight after it, not the whole group. */
.ccg-theme .input-group-text:has(input:is([type="radio"], [type="checkbox"]):checked),
.ccg-theme .input-group-prepend:has(input:is([type="radio"], [type="checkbox"]):checked) + label.form-control {
  background: var(--brand-100);
  border-color: var(--brand-700);
  color: var(--brand-800);
}
.ccg-theme .input-group-prepend:has(input:is([type="radio"], [type="checkbox"]):checked) + label.form-control {
  font-weight: 600;
}

/* CC: Some partials (parent contact details) put all options of a question in ONE input-group, separated by empty
   CC: <div class="col-md-1"> spacers. Tighter padding + small fixed spacers stop the labels overflowing on the
   CC: two-column Parent 1 / Parent 2 layout. Labels never shrink narrower than their text. */
.ccg-theme .input-group > [class*="col-md-"]:empty {
  flex: 0 0 var(--space-3);
  max-width: var(--space-3);
  padding: 0;
}
.ccg-theme .input-group-text { padding: 0 var(--space-3); }
.ccg-theme .input-group > label.form-control {
  flex: 1 0 auto;
  width: auto;   /* CC: Bootstrap sets width:1% on input-group controls, which made the label's basis 1% */
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
/* CC: selects/inputs that carry a grid class themselves (class="form-control col-md-6") were capped at a fraction
   CC: of their column, cutting option text off */
.ccg-theme .form-control[class*="col-md-"] { max-width: 100%; flex: 1 1 auto; }

/* CC: Bootstrap form-check rows (label wrapping or next to its input) get a bigger tap target */
.ccg-theme .form-check { padding-left: 1.75rem; min-height: 2.75rem; }
.ccg-theme .form-check-input { margin-left: -1.75rem; margin-top: 0.2rem; }
.ccg-theme .form-check-label { font-weight: 400; }


/* ---------------------------------------------------------
   CC: 8. File upload - documentation steps (native input, just styled)
   --------------------------------------------------------- */
.ccg-theme input[type="file"] {
  width: 100%;
  max-width: 100%;
  padding: var(--space-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--canvas);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
  min-height: 0;
}
.ccg-theme input[type="file"]::file-selector-button {
  margin-right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--brand-700);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--brand-700);
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
}
.ccg-theme input[type="file"]::file-selector-button:hover { background: var(--brand-100); }
.ccg-theme .uploaded-message { color: var(--success-700); font-family: var(--font-ui); font-weight: 600; }


/* ---------------------------------------------------------
   CC: 8b. Validation messages - jquery-validate on the initial-request / pre-enrolment student pages inserts
   CC: <label class="error"> after a field and adds .error to the field (student.phtml styles it bright red inline).
   --------------------------------------------------------- */
.ccg-theme label.error {
  display: block;   /* CC: element added and removed by jquery-validate itself, never toggled by the app */
  margin: var(--space-2) 0 0;
  color: var(--danger-700);
  font-size: var(--text-sm);
  font-weight: 600;
}
.ccg-theme label.error::before { content: "! "; }
.ccg-theme :is(input, select, textarea).error {
  border-color: var(--danger-700);
  background-color: var(--danger-100);
}


/* ---------------------------------------------------------
   CC: 9. Alerts and messages - Bootstrap .alert (e.g. /start errors and notices)
   --------------------------------------------------------- */
.ccg-theme .alert {
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-left: 4px solid currentColor;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-base);
}
.ccg-theme .alert-success { background: var(--success-100); color: var(--success-700); }
.ccg-theme .alert-warning { background: var(--warning-100); color: var(--warning-700); }
.ccg-theme .alert-danger  { background: var(--danger-100);  color: var(--danger-700); }
.ccg-theme .alert-info,
.ccg-theme .alert-primary { background: var(--info-100);    color: var(--info-700); }
.ccg-theme .alert p { color: var(--text); margin: 0; }


/* ---------------------------------------------------------
   CC: 10. Pop-up dialogs - bootbox (every validation message on the site is a bootbox alert/confirm)
   --------------------------------------------------------- */
.ccg-theme .modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.ccg-theme .modal-header { border-bottom: 1px solid var(--border); padding: var(--space-4) var(--space-5); }
.ccg-theme .modal-body {
  padding: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--ink);
}
.ccg-theme .modal-footer {
  border-top: 0;
  padding: 0 var(--space-5) var(--space-5);
  gap: var(--space-2);
}
.ccg-theme .modal-backdrop.show { opacity: 0.45; }
.ccg-theme .bootbox .bootbox-close-button {
  background: none;
  border: 0;
  color: var(--muted);
  min-height: 0;
  padding: 0 var(--space-2);
  font-size: var(--text-xl);
}
/* CC: frontend.css paints bootbox OK buttons with a flat burgundy - the primary style above now covers it */


/* ---------------------------------------------------------
   CC: 11. Breadcrumbs - shown above the form on multi-step flows
   --------------------------------------------------------- */
/* CC: templates/shared/breadcrumbs.php renders <ol class="breadcrumb breadcrumb-custom"> with one <li> per step and
   CC: .active on the current one. Drawn here as a step indicator (guide 7.8): dots joined by a line.
   CC:   done     = any step before .active  -> filled burgundy dot with a tick (its link still works)
   CC:   current  = .active                  -> ringed dot, bold label
   CC:   upcoming = any step after .active   -> hollow grey dot
   CC: Position relative to .active is used (not "has a link"), because the initial-request trail links every step.
   CC: Display only - nothing new is clickable. */
.ccg-theme .breadcrumb {
  display: flex;           /* CC: Bootstrap already makes .breadcrumb flex; restated for clarity */
  flex-wrap: nowrap;
  align-items: flex-start;
  background: transparent;
  padding: 0;
  margin: 0 0 var(--space-7);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.3;
  list-style: none;
}
.ccg-theme .breadcrumb .breadcrumb-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: calc(1.25rem + var(--space-2)) var(--space-1) 0;   /* CC: room for the dot above the label */
  text-align: center;
  font-family: var(--font-ui);
  color: var(--muted);
  font-style: normal;
  overflow-wrap: anywhere;
}
.ccg-theme .breadcrumb .breadcrumb-item a { font-family: var(--font-ui); color: var(--text); }

/* CC: the dot. Replaces Bootstrap's "/" and frontend.css's FontAwesome chevron separators (matched selectors). */
.ccg-theme .breadcrumb .breadcrumb-item::before,
.ccg-theme .breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: -0.625rem;
  padding: 0;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--on-brand);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}
/* CC: the connecting line to the next step */
.ccg-theme .breadcrumb .breadcrumb-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(0.625rem - 1px);
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}

/* CC: done */
.ccg-theme .breadcrumb:has(.active) .breadcrumb-item:not(.active):not(.active ~ .breadcrumb-item)::before,
.ccg-theme .breadcrumb-custom:has(.active) .breadcrumb-item + .breadcrumb-item:not(.active):not(.active ~ .breadcrumb-item)::before {
  content: "\2713";   /* CC: tick */
  border-color: var(--brand-700);
  background: var(--brand-700);
}
.ccg-theme .breadcrumb:has(.active) .breadcrumb-item:not(.active ~ .breadcrumb-item)::after { background: var(--brand-700); }
.ccg-theme .breadcrumb .breadcrumb-item.active::after { background: var(--border); }

/* CC: current - frontend.css makes it bold italic navy */
.ccg-theme .breadcrumb .breadcrumb-item.active {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}
.ccg-theme .breadcrumb .breadcrumb-item.active::before,
.ccg-theme .breadcrumb-custom .breadcrumb-item + .breadcrumb-item.active::before {
  border: 4px solid var(--brand-700);
  background: var(--surface);
}

/* CC: Phones: the dots stay, but only the current step's label shows (others stay readable by screen readers) */
@media (max-width: 639px) {
  .ccg-theme .breadcrumb .breadcrumb-item:not(.active) {
    flex: 0 0 1.75rem;
    font-size: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .ccg-theme .breadcrumb .breadcrumb-item.active {
    flex: 1 1 auto;
    font-size: var(--text-sm);
    text-align: left;
    padding: 0 0 0 calc(1.25rem + var(--space-2));
    line-height: 1.25rem;
    min-width: 6rem;
  }
  .ccg-theme .breadcrumb .breadcrumb-item.active::before,
  .ccg-theme .breadcrumb-custom .breadcrumb-item + .breadcrumb-item.active::before { left: 0; margin-left: 0; }
  .ccg-theme .breadcrumb .breadcrumb-item:not(.active)::before,
  .ccg-theme .breadcrumb-custom .breadcrumb-item + .breadcrumb-item:not(.active)::before {
    width: 0.875rem;
    height: 0.875rem;
    margin-left: -0.4375rem;
    top: 0.1875rem;
    font-size: 0;
  }
  .ccg-theme .breadcrumb .breadcrumb-item:not(:last-child)::after { top: calc(0.625rem - 1px); }
  .ccg-theme .breadcrumb .breadcrumb-item.active:not(:last-child)::after { display: none; }
}


/* ---------------------------------------------------------
   CC: 12. Tables on parent pages (sibling / student listings)
   --------------------------------------------------------- */
.ccg-theme .table {
  font-family: var(--font-ui);
  color: var(--text);
}
.ccg-theme .table th {
  font-weight: 600;
  color: var(--ink);
  border-top: 0;
  border-bottom: 1.5px solid var(--border);
}
.ccg-theme .table td { border-top: 1px solid var(--border); vertical-align: middle; }


/* ---------------------------------------------------------
   CC: 13. Footer - templates/shared/layout.phtml (.ccg-footer, theme only)
   --------------------------------------------------------- */
.ccg-theme .ccg-footer {
  padding: var(--space-5) var(--gutter) var(--space-7);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
}
.ccg-theme .ccg-footer__inner {
  max-width: var(--width-form);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}
.ccg-theme .ccg-footer p { margin: 0; font-family: var(--font-ui); }
.ccg-theme .ccg-footer a { color: var(--muted); }
.ccg-theme .ccg-footer a:hover { color: var(--brand-700); }


/* ---------------------------------------------------------
   CC: 14. Phones - full-width buttons (guide 7.2)
   --------------------------------------------------------- */
/* CC: Bootstrap's .btn is nowrap, so long labels ("Continue Application") pushed the page sideways on phones */
.ccg-theme .btn { white-space: normal; }

@media (max-width: 767px) {
  /* CC: buttons that end up stacked (each in its own column/form) need a gap between them */
  .ccg-theme main [class*="col"] > .btn.form-control,
  .ccg-theme main [class*="col"] > form > .btn.form-control { margin-bottom: var(--space-3); }
}

@media (max-width: 639px) {
  .ccg-theme .btn:not(.btn-link):not(.btn-sm),
  .ccg-theme input[type="submit"]:not(.btn-link),
  .ccg-theme input[type="button"]:not(.btn-link) { width: 100%; }
}