/* ==========================================================================
   Scotland's Life Sciences Awards — Award Entry Portal skin
   Legacy EventsAir "PresentationPortal" product — Bootstrap 3, server-
   rendered, jQuery-driven. Different tech to the OnAIR portal done earlier;
   nothing from that file applies here.
   Paste into this portal's Custom CSS (Branding settings for this event).

   CONFIRMED from your DOM exports:
   - Font: Exo 2, already loaded site-wide via Google Fonts <link> — no
     font import needed here.
   - This portal already ships EventsAir's own brand utility classes:
     .brand-primary-background / .brand-primary-foreground /
     .brand-btn-default-bg / .brand-btn-default-color / .brand-footer-bg
     — these pull from whatever's set in this event's branding config.
     Overriding them here is the equivalent of the --theme-* variables
     you get on the newer NextGen reg page.
   - Logo is already hosted at a known airdrive URL (confirmed from the
     <img> src in your DOM).

   ASSUMED (flag if wrong):
   - Secondary palette (teal/lime) is sampled directly from the graphic's
     pixels, not from the reg page's compiled CSS (which I don't have
     access to) — send that over if you want an exact match instead of a
     close one.

   NOTE ON THE BACKGROUND IMAGE: two earlier approaches failed and are
   worth knowing about if this ever needs debugging again:
   1. A guessed airdrive URL (based on the image's local filename hash)
      didn't resolve — that hash was just a local export name, not a
      real EventsAir asset ID.
   2. An embedded base64 data URI loaded fine as CSS syntax but was
      silently stripped by EventsAir's custom CSS field on save —
      confirmed by inspecting the actual hosted stylesheet response,
      where the data: URI was simply missing. This appears to be a
      deliberate sanitization rule (blocking data: URIs in submitted
      CSS), not a size limit — so re-embedding, even smaller, won't work.
   The image is now referenced via a real EventsAir-hosted URL (uploaded
   through the branding/media library, same mechanism as the logo).
   ========================================================================== */

/* the page only loads Exo 2's default weight via its own basic Google
   Fonts link — real bold (700) isn't actually available, so anywhere
   bold text is expected (like green status legends) was rendering as a
   weak browser-synthesized fake-bold instead of true bold. This pulls
   in the full weight range as a real font file. Safe as a plain url()
   import (unlike the earlier data: URI attempt, which got stripped —
   this is a normal external reference, not embedded data). */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&display=swap');

:root{
  --lsca-navy: #004C95;
  --lsca-navy-deep: #002F5C;
  --lsca-teal: #2E6470;
  --lsca-lime: #B8D22B;
  --lsca-ink: #16212C;
  --lsca-ink-soft: #5B6B79;
  --lsca-line: #E3E8EC;
  --lsca-surface: #FFFFFF;
  --lsca-bg: #F5F7F9;
  --lsca-font: 'Exo 2', system-ui, sans-serif;

  /* Override EventsAir's own brand tokens so anything already wired to
     them (built-in components, emails, other pages) stays consistent */
  --theme-primary-color: var(--lsca-navy) !important;
}

body{
  font-family: var(--lsca-font) !important;
  background-color: var(--lsca-bg) !important;
  color: var(--lsca-ink) !important;
}

/* ==========================================================================
   1. Brand utility classes (EventsAir's own hooks — highest leverage)
   ========================================================================== */
.brand-primary-background{
  background-color: var(--lsca-navy) !important;
}
.brand-primary-foreground{
  color: var(--lsca-navy) !important;
  font-family: var(--lsca-font) !important;
  font-weight: 700 !important;
}
.brand-btn-default-bg{
  background-color: var(--lsca-navy) !important;
}
.brand-btn-default-color{
  color: #fff !important;
}

/* ==========================================================================
   2. Hero header — replaces the plain navbar with a branded, animated one.
   Built entirely from CSS (no new HTML needed) using ::before for the
   animated graphic and ::after for the logo, since this portal doesn't
   currently render a visible header/logo at all.
   ========================================================================== */
.navbar.navbar-inverse{
  position: relative;
  background: var(--lsca-navy) !important;
  border: none !important;
  min-height: 52px;
  overflow: hidden;
  padding-left: 20px;
}

/* animated background layer — embedded as a data URI (downscaled/WebP,
   ~10KB) rather than an external URL, since the assumed airdrive URL from
   the first pass didn't resolve. This guarantees it loads regardless of
   where the original asset lives. If you'd rather reference a hosted
   file for performance/cacheability, swap this url(...) for the real one
   and drop the data: prefix. */
.navbar.navbar-inverse::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://airdrive.eventsair.com/eventsairwesteuprod/production-speakeasy-public/f3c5e68c1c05425eb18a861d3fa9bb94');
  background-size: 320% auto;
  background-position: 8% 4%;
  background-repeat: no-repeat;
  opacity: 1;
  animation: lsca-drift 26s ease-in-out infinite alternate;
  z-index: 0;
  box-shadow: none !important;
}
@keyframes lsca-drift{
  0%{   background-position: 4%  0%;  background-size: 300% auto; }
  50%{  background-position: 18% 8%;  background-size: 330% auto; }
  100%{ background-position: 4%  0%;  background-size: 300% auto; }
}

/* logo + subtitle, now laid out side-by-side rather than stacked. The
   previous column layout made the header taller than its own min-height
   once logo + subtitle were both sized up, which got clipped by
   overflow:hidden — a row layout avoids that and reads as a proper
   slim header rather than two cramped lines. */
.navbar.navbar-inverse .navbar-header{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  min-height: 52px;
}
.navbar.navbar-inverse .navbar-header::before{
  content: '';
  display: block;
  flex-shrink: 0;
  width: 70px;
  height: 38px;
  background-image: url('https://airdrive.eventsair.com/eventsairwesteuprod/production-speakeasy-public/8ca657e9f03a489bbead684ad2fa188f');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.navbar.navbar-inverse .navbar-header::after{
  content: 'Award Entry Portal';
  display: block;
  font-family: var(--lsca-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

.navbar.navbar-inverse .navbar-collapse{
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: center;
  width: 100%;
  padding-right: 5vw;
}
.navbar.navbar-inverse .nav.navbar-nav:not(.navbar-right){
  display: flex !important;
  align-items: center;
  float: none !important;
}
.navbar.navbar-inverse .nav.navbar-nav.navbar-right{
  display: flex !important;
  align-items: center;
  float: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.25);
}
.navbar.navbar-inverse .nav > li > a{
  font-family: var(--lsca-font) !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.85) !important;
  padding: 10px 14px !important;
}
.navbar.navbar-inverse .nav > li.active > a{
  background-color: transparent !important;
  color: var(--lsca-lime) !important;
  border-bottom: 2px solid var(--lsca-lime);
}
.navbar.navbar-inverse .nav > li > a:hover{
  color: var(--lsca-lime) !important;
}

/* the default Bootstrap .navbar-brand text (this event's full title,
   e.g. "Scotland's Life Sciences Conference & Awards") sits inside
   .navbar-header and wraps badly now that the header is flex-column.
   The logo + "Award Entry Portal" subtitle already cover branding, so
   this is visually hidden but kept for screen readers/accessibility
   rather than removed outright. */
.navbar.navbar-inverse .navbar-header .navbar-brand{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* "Welcome [name]" — moved from its own row above the header into the
   header bar itself, pinned top-right. It's a sibling of .navbar (not a
   descendant), so this uses absolute positioning against .main-form:
   removing it from flow lets .navbar naturally shift up into the space
   it vacated, and the fixed top offset lands it inside the navy bar. */
html body .main-form{
  position: relative !important;
}
.welcome.brand-primary-foreground{
  position: absolute !important;
  top: 5px !important;
  right: 5vw !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-style: normal !important;
  opacity: .85;
  z-index: 5;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */
h2{
  font-family: var(--lsca-font) !important;
  font-weight: 700 !important;
  color: var(--lsca-navy) !important;
  margin-top: 24px !important;
}
h3{
  font-family: var(--lsca-font) !important;
  font-weight: 700 !important;
  color: var(--lsca-navy) !important;
}

/* ==========================================================================
   4. Buttons — flat Bootstrap 3 defaults → rounded, modern CTA style
   ========================================================================== */
.btn.btn-default{
  background-color: var(--lsca-navy) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 24px !important;
  font-family: var(--lsca-font) !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  box-shadow: none !important;
  transition: background-color .15s ease, transform .15s ease;
}
.btn.btn-default:hover{
  background-color: var(--lsca-teal) !important;
  transform: translateY(-1px);
}
.btn.btn-default.btn-xs{
  border-radius: 16px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
}

/* primary submission actions (Continue / Save as Draft) get a stronger
   visual split so people don't accidentally save-as-draft when they meant
   to continue. Chained selectors here too — the base portal stylesheet
   loads after this file and was winning specificity ties on colour,
   which is why "Continue" was showing unreadable text before. */
html body .presentation-form-buttons .continue-button,
html body a.btn.btn-default.continue-button,
html body input.btn.btn-default.continue-button{
  background-color: var(--lsca-teal) !important;
  color: #fff !important;
  border: none !important;
}
html body .presentation-form-buttons .continue-button:hover{
  background-color: #234B54 !important;
  color: #fff !important;
}
html body .presentation-form-buttons .draft-button,
html body a.btn.btn-default.draft-button{
  background-color: var(--lsca-navy) !important;
  color: #fff !important;
  border: 1.5px solid var(--lsca-navy) !important;
}
html body .presentation-form-buttons .draft-button:hover{
  background-color: var(--lsca-navy-deep) !important;
  color: #fff !important;
}

/* Create Account / Sign in on the login-style pages */
a.btn.btn-default,
input[type="submit"].btn.btn-default{
  display: inline-block;
}

/* ==========================================================================
   5. Form panels ("well") and fields
   ========================================================================== */
.well.well-sm{
  background-color: var(--lsca-surface) !important;
  border: 1px solid var(--lsca-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 20px !important;
}
.well-heading{
  color: var(--lsca-navy) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--lsca-line);
  padding-bottom: 8px;
  margin-bottom: 16px !important;
}

.form-control{
  border: 1px solid var(--lsca-line) !important;
  border-radius: 8px !important;
  font-family: var(--lsca-font) !important;
  box-shadow: none !important;
}
.form-control:focus{
  border-color: var(--lsca-teal) !important;
  box-shadow: 0 0 0 3px rgba(46,100,112,.15) !important;
}
.control-label{
  font-family: var(--lsca-font) !important;
  font-weight: 600 !important;
  color: var(--lsca-ink) !important;
}

/* word count boxes */
.alert.alert-info.centered-text{
  background-color: var(--lsca-bg) !important;
  border: 1px solid var(--lsca-line) !important;
  border-radius: 8px !important;
  color: var(--lsca-ink-soft) !important;
}
.alert.alert-success.centered-text{
  background-color: rgba(184,210,43,.15) !important;
  border: 1px solid var(--lsca-lime) !important;
  border-radius: 8px !important;
  color: var(--lsca-navy) !important;
}

/* ==========================================================================
   6. Step sidebar (the entry form's own wizard nav — restyled to feel like
   the reg page's progress dots, adapted for a vertical list)
   ========================================================================== */
#step-sidebar{
  position: sticky;
  top: 20px;
}
#step-sidebar .step{
  background: var(--lsca-surface) !important;
  color: var(--lsca-ink) !important;
  border: 1px solid var(--lsca-line);
  border-left: 4px solid var(--lsca-line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 6px;
  font-family: var(--lsca-font);
  font-weight: 600;
  font-size: 13px;
  transition: border-color .15s ease, background-color .15s ease;
}
#step-sidebar .step.step-selected{
  border-left-color: var(--lsca-lime);
  background: var(--lsca-navy) !important;
  color: #fff !important;
}
#step-sidebar .step.step-last{
  border-left-color: var(--lsca-teal);
}

/* draft/submitted badge shown top-right of the entry form */
.paper-indicator{
  font-family: var(--lsca-font) !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
}
.paper-indicator.draft{
  background-color: rgba(184,210,43,.2) !important;
  color: var(--lsca-navy) !important;
  border: 1px solid var(--lsca-lime) !important;
}

/* ==========================================================================
   7. Drafts / entries list table (Edit Award Entry page)
   ========================================================================== */
.presentation-list .header-row{
  background-color: var(--lsca-navy) !important;
  color: #fff !important;
  font-family: var(--lsca-font) !important;
  font-weight: 700 !important;
  border-radius: 10px 10px 0 0;
  padding: 10px 14px;
}
.presentation-list .result-row{
  background-color: var(--lsca-surface);
  border: 1px solid var(--lsca-line);
  border-top: none;
  padding: 10px 14px;
}
.presentation-list .result-row.even{
  background-color: var(--lsca-bg);
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.brand-footer.brand-footer-bg{
  min-height: 80px;
  background-color: var(--lsca-navy) !important;
}

/* ==========================================================================
   9. Login / register page two-column layout
   ========================================================================== */
#loginForm h2,
.form-horizontal h2{
  color: var(--lsca-navy) !important;
}

/* ==========================================================================
   10. Loading spinner — replaces the default loader-large.gif with a
   brand-coloured CSS spinner. The <img> itself can't be swapped via CSS
   (it's a real GIF file, not a CSS background), so it's hidden and a
   custom spinner is drawn in its place using ::after on the container.
   ========================================================================== */
.loader .loader-img,
#ajaxLoader .loader-img{
  display: none !important;
}
.loader,
#ajaxLoader{
  position: relative;
  min-height: 64px;
}
.loader::after,
#ajaxLoader::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 4px solid var(--lsca-line);
  border-top-color: var(--lsca-navy);
  border-right-color: var(--lsca-lime);
  animation: lsca-spin .8s linear infinite;
}
@keyframes lsca-spin{
  to{ transform: rotate(360deg); }
}

/* ==========================================================================
   11. Reorder step sidebar — Award Category moved to the top.
   The actual step sequence (data-page-num, Continue-button logic) is
   untouched — this only changes visual position via flex order, so the
   form's real flow/validation isn't affected, only where each item sits
   in the list. If you want the ACTUAL step order changed (not just the
   visual list), that has to happen in the EventsAir portal admin config
   itself, since data-page-num drives real navigation and isn't something
   CSS can rewrite.
   ========================================================================== */
#step-sidebar{
  display: flex !important;
  flex-direction: column !important;
}
/* step2-page = Award Category, per your DOM export */
#step-sidebar .step[data-page-id="step2-page"]{
  order: -1 !important;
}

/* ==========================================================================
   12. De-square + fill the screen
   Rounds off remaining sharp corners and removes the fixed-width Bootstrap
   container that was leaving large empty grey margins either side of the
   content on wider screens.
   ========================================================================== */

/* stop the page content being boxed into a narrow fixed-width column.
   Selectors are deliberately chained (html body ...) for higher
   specificity — your custom CSS loads BEFORE the portal's own compiled
   bundle (confirmed from the live page's <head> order), so a plain
   .main-form{...!important} rule can lose a specificity tie to theirs.
   Chaining wins outright regardless of load order. */
html body .body-content,
html body .main-form,
html body div.body-content,
html body div.main-form.delayed-component-content{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 5vw !important;
  padding-right: 5vw !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
}
.navbar.navbar-inverse .container-fluid{
  padding-left: 0 !important;
  padding-right: 5vw !important;
}
@media (max-width: 900px){
  html body .body-content,
  html body .main-form{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .navbar.navbar-inverse .container-fluid{
    padding-right: 20px !important;
  }
}

/* soften remaining sharp edges across components */
select.form-control,
.form-control{
  border-radius: 10px !important;
}
.presentation-list .header-row{
  border-radius: 14px 14px 0 0 !important;
}
.presentation-list{
  border-radius: 14px !important;
  overflow: hidden;
}
.presentation-list .result-row:last-child{
  border-radius: 0 0 14px 14px !important;
}
.well.well-sm{
  border-radius: 18px !important;
}
#step-sidebar .step{
  border-radius: 10px !important;
}
.modal-content{
  border-radius: 16px !important;
}

/* ==========================================================================
   13. Link icons in the award entry content sections
   Scoped to content areas (well panels, page copy, the entry form itself)
   and explicitly excludes .btn — button-styled links (Edit Contact
   Details, Create Account, etc.) shouldn't get an icon, only inline
   text links. Uses Font Awesome 4's external-link glyph, already loaded
   on every page in this portal.
   ========================================================================== */
.well a:not(.btn)::after,
.default-bottom-margin a:not(.btn)::after,
.display-section a:not(.btn)::after,
#presentation a:not(.btn)::after{
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 11px;
  margin-left: 5px;
  color: var(--lsca-teal);
  vertical-align: middle;
}

/* ==========================================================================
   14. Remove drop-shadow from the header
   Interpreting "remove the shadowing section" as the header bar's own
   shadow rather than the background graphic itself — flag if this
   wasn't the right read and send a screenshot of what you mean.
   ========================================================================== */
html body .navbar.navbar-inverse,
html body .navbar.navbar-inverse .container-fluid,
html body .navbar.navbar-inverse::before,
html body .navbar.navbar-inverse::after{
  box-shadow: none !important;
}