/* KRC Portal: one Kalahari look for every page - the header with the photo strip (formHero), white section cards with
   the sage top edge, and for forms the chips, tick boxes and Send bar. Covers the hand-made forms, the fixed pages
   (static-form.php), the builder forms (Formeo renderer, form.php) and all other pages' Bootstrap cards.
   Colours are the tokens of kalahari-theme.css. Loaded by includes/header.php. */

.krc-form { max-width: 920px; margin: 0 auto 2rem; }

/* ---------------------------------------------------------------- header */
.krc-hero { background: var(--kalahari-cream); border: 1px solid var(--kalahari-sand); border-radius: 10px; overflow: hidden; margin-bottom: 1.25rem; }
.krc-hero-photo { height: 150px; display: flex; gap: 2px; background: var(--kalahari-sand); }
/* one picture per species (assets/brand/hero/, cut from header-species-collage.jpg), each framed on the animals */
.krc-hero-photo span { flex: 1 1 0; background: center / cover no-repeat; }
.krc-hero-photo .krc-hero-meerkats { background-image: url('/assets/brand/hero/meerkats.jpg'); background-position: 40% 35%; }
.krc-hero-photo .krc-hero-babblers { background-image: url('/assets/brand/hero/babblers.jpg'); background-position: 50% 25%; }
.krc-hero-photo .krc-hero-molerat { background-image: url('/assets/brand/hero/molerat.jpg'); background-position: 30% 45%; }
.krc-hero-photo .krc-hero-squirrels { background-image: url('/assets/brand/hero/squirrels.jpg'); background-position: 40% 35%; }
.krc-hero-photo .krc-hero-drongo { background-image: url('/assets/brand/hero/drongo.jpg'); background-position: 50% 40%; }
.krc-hero-photo .krc-hero-hartebeest { background-image: url('/assets/brand/hero/hartebeest.jpg'); background-position: 60% 70%; }
.krc-hero-body { position: relative; padding: 1.1rem 1.5rem 1.25rem; }
.krc-hero-logo { position: absolute; right: 1.25rem; top: 1rem; width: 150px; height: auto; background: #fff;
                 border-radius: 8px; padding: 6px 8px; box-shadow: 0 2px 10px rgba(61, 50, 40, .25); }
.krc-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.85rem; color: var(--kalahari-chrome); margin: 0 170px .35rem 0; line-height: 1.2; }
.krc-hero-text { color: var(--kalahari-earth-dark); max-width: 60ch; }
.krc-hero-text p:last-child { margin-bottom: 0; }
.krc-hero-meta { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.krc-hero-meta li { background: #fff; border: 1px solid var(--kalahari-sand); border-radius: 999px; padding: .1rem .7rem; font-size: .8rem; color: var(--kalahari-earth-dark); }

/* compact header on list and admin pages */
.krc-hero-compact .krc-hero-photo { height: 90px; }
.krc-hero-compact .krc-hero-body { padding: .75rem 1.5rem .85rem; }
.krc-hero-compact .krc-hero-logo { width: 116px; top: .45rem; padding: 4px 6px; }
.krc-hero-compact h1 { font-size: 1.6rem; margin-bottom: 0; margin-right: 140px; }
.krc-hero-compact .krc-hero-text { margin-top: .35rem; }

/* ---------------------------------------------------------------- sections */
.krc-section, .krc-form .krc-card { background: #fff; border: 1px solid var(--kalahari-sand-light); border-top: 4px solid var(--kalahari-sage);
               border-radius: 10px; padding: 1.25rem 1.5rem .5rem; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(61, 50, 40, .06); }
.krc-section-title, .krc-form .form-section { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 600;
                     color: var(--kalahari-chrome); display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; border: 0; padding: 0; }
.krc-num { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
           background: var(--kalahari-terracotta-deep); color: #fff; font: 600 .95rem/1 system-ui, sans-serif; }
.krc-form .form-section { font-size: 1.2rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--kalahari-sand-light); }
.krc-form .card-body > .form-section:first-child, .krc-form .krc-card > .form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- fields */
.krc-label, .krc-form label:not(.krc-choice):not(.custom-control-label) { font-weight: 600; color: var(--kalahari-chrome); margin-bottom: .35rem; }
.krc-form legend.krc-label { font-size: 1rem; }
.krc-req { color: var(--kalahari-rust); }
.krc-form .form-control { border-color: var(--kalahari-sand); border-radius: 6px; }
.krc-form .form-control:focus { border-color: var(--kalahari-terracotta); box-shadow: 0 0 0 .2rem rgba(193, 127, 89, .25); }
.krc-form .form-control[readonly] { background: var(--kalahari-cream); }
.krc-form small.text-muted, .krc-form .form-text { color: var(--kalahari-earth) !important; }

/* choices as tappable chips (radio and tick boxes) */
.krc-choices { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.krc-choice { position: relative; margin: 0; cursor: pointer; }
.krc-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.krc-choice span { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--kalahari-sand); border-radius: 999px; background: #fff;
                   color: var(--kalahari-chrome); transition: background .15s, border-color .15s; }
.krc-choice span::before { content: ''; display: inline-block; width: .9rem; height: .9rem; margin-right: .45rem; vertical-align: -1px;
                           border: 2px solid var(--kalahari-dust); border-radius: 50%; background: #fff; }
.krc-choice input[type=checkbox] + span::before { border-radius: 3px; }
.krc-choice:hover span { border-color: var(--kalahari-terracotta); }
.krc-choice input:checked + span { background: #eef1ea; border-color: var(--kalahari-sage-deep); }
.krc-choice input:checked + span::before { background: var(--kalahari-sage-deep); border-color: var(--kalahari-sage-deep); box-shadow: inset 0 0 0 2px #fff; }
.krc-choice input:focus-visible + span { outline: 3px solid rgba(193, 127, 89, .5); outline-offset: 1px; }
.krc-other-text { max-width: 260px; }
.krc-other-text:disabled { display: none; }

/* "I confirm" boxes (replace the old signatures) */
.krc-agree { background: var(--kalahari-cream); border-left: 4px solid var(--kalahari-sage-deep); border-radius: 6px; padding: .75rem 1rem; margin-bottom: 1rem; }
.krc-agree .krc-choice span { border: 0; background: none; padding: 0; font-weight: 600; }
.krc-agree .krc-choice input:checked + span { background: none; }

/* uploads */
.krc-upload, .krc-form .upload-box { border: 2px dashed var(--kalahari-sand); border-radius: 8px; padding: 1rem; background: var(--kalahari-cream);
              display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.krc-upload > i { font-size: 1.6rem; color: var(--kalahari-terracotta); }
.krc-upload small { flex-basis: 100%; color: var(--kalahari-earth); }

/* text from KRC: instructions, safety notes, risk assessments */
.krc-text { color: #3d3228; margin-bottom: 1rem; }
.krc-text ul { padding-left: 1.2rem; }
.krc-read { border: 1px solid var(--kalahari-sand); border-radius: 8px; background: var(--kalahari-cream); margin-bottom: .75rem; }
.krc-read summary { cursor: pointer; padding: .6rem 1rem; font-weight: 600; color: var(--kalahari-terracotta-dark); }
.krc-read summary::before { content: '\f02d'; font: 900 .9em 'Font Awesome 5 Free'; margin-right: .5rem; }
.krc-read[open] summary { border-bottom: 1px solid var(--kalahari-sand); }
.krc-read-body { max-height: 26rem; overflow: auto; padding: .75rem 1rem; background: #fff; border-radius: 0 0 8px 8px; font-size: .95rem; }

/* ---------------------------------------------------------------- send */
.krc-submit { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1rem;
              background: rgba(255, 255, 255, .96); border: 1px solid var(--kalahari-sand); border-radius: 10px; padding: .75rem 1rem;
              box-shadow: 0 -2px 12px rgba(61, 50, 40, .12); }
.krc-submit-note { margin-right: auto; font-size: .85rem; color: var(--kalahari-earth); }
.krc-done { text-align: center; background: #fff; border: 1px solid var(--kalahari-sand); border-radius: 10px; padding: 2rem 1rem; }
.krc-done > i { font-size: 3rem; color: var(--kalahari-sage-deep); }
.krc-done h2 { font-family: 'Playfair Display', Georgia, serif; color: var(--kalahari-chrome); margin: .5rem 0; }

/* ---------------------------------------------------------------- home: tool links and the weather */
.krc-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.krc-link { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--kalahari-sand-light);
            border-radius: 8px; background: var(--kalahari-cream); color: var(--kalahari-chrome); text-decoration: none !important;
            transition: border-color .15s, box-shadow .15s; }
.krc-link:hover, .krc-link:focus-visible { border-color: var(--kalahari-terracotta); box-shadow: 0 2px 8px rgba(61, 50, 40, .12); color: var(--kalahari-chrome); }
.krc-link > i { font-size: 1.3rem; color: var(--kalahari-terracotta-deep); margin-top: .15rem; }
.krc-link b { display: block; }
/* Links that leave the portal (a new tab): a tag top right and a white card, so they stand apart from portal pages */
.krc-link { position: relative; }
.krc-link-ext { background: #fff; padding-right: 6rem; }
.krc-ext-tag { position: absolute; top: .55rem; right: .6rem; font-size: .7rem; font-weight: 600; white-space: nowrap;
  color: var(--kalahari-terracotta-deep); background: var(--kalahari-cream); border: 1px solid var(--kalahari-sand-light);
  border-radius: 10px; padding: 0 .45rem; }
.krc-link small { display: block; color: var(--kalahari-earth); line-height: 1.35; margin-top: .15rem; }
.krc-section-title .krc-num i { font-size: .85rem; }
.krc-weather { border-top-color: var(--kalahari-terracotta); }
.krc-weather .krc-section-title > i { color: #d99a2b; }
.krc-weather-now { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; color: var(--kalahari-earth-dark); margin-bottom: .75rem; }
.krc-weather-temp { font-family: 'Playfair Display', Georgia, serif; font-size: 2.6rem; line-height: 1; color: var(--kalahari-chrome); }
.krc-weather-temp small { font-family: system-ui, sans-serif; font-size: 1.1rem; margin-left: .2rem; vertical-align: top; color: var(--kalahari-earth-dark); }
/* Markdown headings in content pages and KRC texts */
#content-wrapper .card-body h1, #content-wrapper .card-body h2, #content-wrapper .card-body h3, #content-wrapper .card-body h4, .krc-text h2, .krc-text h3, .krc-text h4 {
  font-family: 'Playfair Display', Georgia, serif; color: var(--kalahari-chrome); margin: 1.4rem 0 .6rem; }
#content-wrapper .card-body h1 { font-size: 1.6rem; }
#content-wrapper .card-body h2 { font-size: 1.4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--kalahari-sand-light); }
#content-wrapper .card-body h3 { font-size: 1.15rem; }
#content-wrapper .card-body h4 { font-size: 1rem; }
/* Heading level on the page editor's H buttons */
.editor-toolbar .krc-h2::after, .editor-toolbar .krc-h3::after, .editor-toolbar .krc-h4::after { font: bold .65em system-ui, sans-serif; vertical-align: sub; }
.editor-toolbar .krc-h2::after { content: '2'; } .editor-toolbar .krc-h3::after { content: '3'; } .editor-toolbar .krc-h4::after { content: '4'; }
#content-wrapper .card-body > :first-child { margin-top: 0; }
.krc-weather-grid { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin-bottom: .75rem; }
.krc-weather-grid dt { font-weight: 600; color: var(--kalahari-earth-dark); }
.krc-weather-grid dd { margin: 0; }

/* ---------------------------------------------------------------- every other page: Bootstrap cards in the same look */
/* (kalahari-theme.css gives card headers dark chrome with white text; here they are white like the form sections) */
#content-wrapper .card { border: 1px solid var(--kalahari-sand-light); border-top: 4px solid var(--kalahari-sage); border-radius: 10px;
                         box-shadow: 0 1px 3px rgba(61, 50, 40, .06); }
#content-wrapper .card-header { background: #fff; color: var(--kalahari-chrome); border-bottom: 1px solid var(--kalahari-sand-light);
                                padding: 1rem 1.25rem .75rem; border-radius: 6px 6px 0 0; }
#content-wrapper .card-header > b:first-of-type, #content-wrapper .card-header > strong:first-of-type {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 600; }
#content-wrapper .card-header strong, #content-wrapper .card-header label, #content-wrapper .card-header > i,
#content-wrapper .card-header h5, #content-wrapper .card-header h6 { color: var(--kalahari-chrome); }
#content-wrapper .card-header small, #content-wrapper .card-header .text-muted { color: var(--kalahari-earth) !important; }
#content-wrapper .card-header .btn-outline-light { color: var(--kalahari-terracotta-deep); border-color: var(--kalahari-terracotta-deep); }
#content-wrapper .card-header .btn-outline-light:hover { color: #fff; background: var(--kalahari-terracotta-deep); }
#content-wrapper .card-footer { background: var(--kalahari-cream); border-top-color: var(--kalahari-sand-light); }
#content-wrapper .card.tile { border-top-color: var(--kalahari-terracotta); transition: box-shadow .15s; }
#content-wrapper .card.tile h5 { font-family: 'Playfair Display', Georgia, serif; color: var(--kalahari-chrome); }
#content-wrapper .table thead th { border-top: 0; color: var(--kalahari-earth-dark); }

/* ---------------------------------------------------------------- builder forms (Formeo's renderer) */
/* form.php wraps every heading's rows in a .krc-section; here only Formeo's own markup is matched */
.krc-form .formeo-row-wrap > div { display: flex; flex-wrap: wrap; column-gap: 1rem; }
.krc-form .formeo-row-wrap > div > div { flex: 1 1 220px; width: auto !important; min-width: 0; }
.krc-form .formeo-render .f-field { margin-bottom: 1rem; }
.krc-form .formeo-render .f-field[hidden] { display: none; }
.krc-form .formeo-render .f-field > label { display: block; font-weight: 600; color: var(--kalahari-chrome); margin-bottom: .35rem; }
.krc-form .formeo-render .text-error { color: var(--kalahari-rust); margin-left: .15rem; }
.krc-form .formeo-render [role=group] { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.krc-form .formeo-render .f-radio, .krc-form .formeo-render .f-checkbox { display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  padding: .45rem .9rem; border: 1px solid var(--kalahari-sand); border-radius: 999px; background: #fff; color: var(--kalahari-chrome); }
.krc-form .formeo-render .f-radio label, .krc-form .formeo-render .f-checkbox label { margin: 0; cursor: pointer; font-weight: 400; }
.krc-form .formeo-render .f-radio input, .krc-form .formeo-render .f-checkbox input { accent-color: var(--kalahari-sage-deep); margin: 0; width: 1rem; height: 1rem; }
.krc-form .formeo-render .f-radio:hover, .krc-form .formeo-render .f-checkbox:hover { border-color: var(--kalahari-terracotta); }
.krc-form .formeo-render .f-radio:has(input:checked), .krc-form .formeo-render .f-checkbox:has(input:checked) { background: #eef1ea; border-color: var(--kalahari-sage-deep); }
.krc-form .formeo-render .f-other-value { border: 1px solid var(--kalahari-sand); border-radius: 6px; padding: .2rem .5rem; max-width: 220px; }
.krc-form .formeo-render .f-other-value:disabled { display: none; }
.krc-form .formeo-render input[type=file] { border: 2px dashed var(--kalahari-sand); border-radius: 8px; padding: 1rem; background: var(--kalahari-cream); width: 100%; }
.krc-form .formeo-render table { background: #fff; }
.krc-form .formeo-render select.form-control { max-width: 320px; }
.krc-form .formeo-render .krc-text .krc-read-body { max-height: none; }

@media (max-width: 575.98px) {
  .krc-hero-photo { height: 100px; }
  .krc-hero-photo span:nth-child(n+4) { display: none; } /* three pictures on a phone */
  .krc-hero-logo { position: static; width: 120px; margin-bottom: .5rem; box-shadow: none; padding: 0; }
  .krc-hero h1 { margin-right: 0; font-size: 1.5rem; }
  .krc-hero-compact .krc-hero-logo { display: none; }
  .krc-hero-compact .krc-hero-photo { height: 64px; }
  .krc-section, .krc-form .krc-card { padding: 1rem 1rem .25rem; }
  .krc-submit { justify-content: stretch; }
  .krc-submit .btn { width: 100%; }
}
.krc-form .formeo-render .krc-agree .f-checkbox { border: 0; background: none; padding: 0; }
.krc-form .formeo-render .krc-agree .f-checkbox label { font-weight: 600; }
.krc-upload .form-control-file { width: auto; flex: 1 1 200px; }
.krc-form .formeo-render input.form-control, .krc-form .formeo-render textarea.form-control { width: 100%; }

/* Groups & access */
.krc-group-name { font-size: 1.1rem; margin: 0; }
.krc-group-name code { color: var(--kalahari-chrome); font-size: 1.05rem; }
.krc-superuser { border-top-color: var(--kalahari-rust); }
.krc-tree, .krc-tree ul { list-style: none; padding-left: 1.1rem; margin: .25rem 0 0; }
.krc-tree { padding-left: .2rem; }
.krc-tree li { margin: .2rem 0; }
.krc-tree li > i { color: var(--kalahari-sage-deep); }
.krc-tree li.warn > i { color: var(--kalahari-rust); }
.krc-tree li.warn { color: var(--kalahari-rust-dark); }
.krc-tree li.ask, .krc-tree li.ask > i { color: var(--kalahari-dust); }
.krc-members li { padding: .1rem 0; border-bottom: 1px dotted var(--kalahari-sand-light); }

/* Partner university logos above the footer (includes/footer.php) */
.krc-partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 2rem; padding: .75rem 1rem; background: #fff; border-top: 1px solid var(--kalahari-sand-light); }
.krc-partners img { height: 56px; width: auto; max-width: 100%; }

/* Navbar brand: the KRC mark (cut from assets/brand/krc-logo.png) before the portal name */
.navbar .krc-brand { display: inline-flex; align-items: center; gap: .55rem; }
.navbar .krc-brand img { height: 24px; width: auto; }