/* ==========================================================================
   ASNT theme overrides for OpenWater
   Adapted from the EventsAir stylesheet.

   OpenWater's current public portal (theme-2024) runs on Bootstrap 5.3,
   Font Awesome 6, jQuery UI, DataTables, SweetAlert2 and Uppy (file upload).
   Selectors below were checked against a live OpenWater portal. Anything
   marked VERIFY needs a check on a logged-in ASNT page (application form,
   judging view) before it goes live.

   Option A: paste inside <style></style> in Head Scripts.
   Option B: upload via Public Files and link it in Head Scripts, placed
   AFTER the theme-2024/main.css line so these rules win:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700;800&display=swap">
     <link rel="stylesheet" href="[Public Files URL]/asnt-openwater.css?v=1">
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   One place for brand values. Bootstrap 5 components read the --bs-* vars,
   so setting them here restyles links, focus rings, form controls, etc.
   -------------------------------------------------------------------------- */
:root {
  --asnt-blue: #0054a5;
  --asnt-blue-rgb: 0, 84, 165;
  --asnt-navy: #01376d;
  --asnt-blue-dark: var(--asnt-navy);   /* hover/active state */
  --asnt-btn-hover: var(--asnt-teal-1);   /* button hover/active, per ASNT button spec */
  --asnt-gray: #4d4d4f;                 /* ASNT Brand Gray: body text */
  --asnt-gray-dark: var(--asnt-gray);
  --asnt-gray-light: #f1f1f1;           /* Light Gray: panel background */
  --asnt-teal-light: #00a1ad;           /* ASNT Brand Teal: icons/borders only, never text */
  --asnt-teal-1: #006672;
  --asnt-teal-2: #004249;
  --asnt-line: #d0d0d0;                 /* Line Accent: dividers only */
  --asnt-input-border: #8a8a8c;         /* 3:1 on white for WCAG 1.4.11 */
  --asnt-font: 'Barlow Semi Condensed', Arial, sans-serif;
  --asnt-radius-pill: 100px;    /* same as asnt.org buttons */
  --asnt-radius-card: 16px;

  --bs-body-font-family: var(--asnt-font);
  --bs-body-color: var(--asnt-gray);
  --bs-border-color: var(--asnt-line);
  --bs-primary: var(--asnt-blue);
  --bs-primary-rgb: var(--asnt-blue-rgb);
  --bs-link-color: var(--asnt-blue);
  --bs-link-color-rgb: var(--asnt-blue-rgb);
  --bs-link-hover-color: var(--asnt-blue-dark);
  --bs-focus-ring-color: rgba(var(--asnt-blue-rgb), .35);
}


/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--asnt-font);
  font-weight: 400;
  color: var(--asnt-gray);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--asnt-font);
  font-weight: 700;
  color: var(--asnt-blue);
}

/* Page content pasted from the rich-text editor often carries inline
   font-family (e.g. Arial). Inline styles beat the stylesheet, so this
   needs !important. Scoped to the content area; icons are excluded. */
#content [style*="font-family"]:not(i):not([class*="fa-"]) {
  font-family: var(--asnt-font) !important;
}

/* Form inputs don't inherit font by default */
input, select, textarea, .form-control, .form-select {
  font-family: inherit;
}


/* --------------------------------------------------------------------------
   3. Buttons
   EventsAir version styled every <button>. In OpenWater that also hits the
   hamburger/dropdown toggles, Uppy file-upload controls, SweetAlert cancel
   buttons and jQuery UI dialog close buttons. Target action buttons only.
   -------------------------------------------------------------------------- */

/* Bootstrap 5 buttons: set the component vars instead of forcing colors */
.btn-primary {
  --bs-btn-bg: var(--asnt-blue);
  --bs-btn-border-color: var(--asnt-teal-light);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--asnt-btn-hover);
  --bs-btn-hover-border-color: var(--asnt-teal-light);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--asnt-btn-hover);
  --bs-btn-active-border-color: var(--asnt-teal-light);
  --bs-btn-disabled-bg: var(--asnt-blue);
  --bs-btn-disabled-border-color: var(--asnt-teal-light);
}

/* Shared shape for all ASNT action buttons */
.btn,
button.submit,
input[type="button"].submit,
input[type="submit"],
.content-left .login_box button,
#beginSso,
.btn-submit-judge-score,
.ui-dialog .ui-dialog-buttonpane button,
.swal2-actions .swal2-styled,
button[class*="validate" i],
input[type="button"][class*="validate" i],
button.validateCharity,
button.manageCollaborators,
.btn-submit input.next,
.btn-submit input.prev,
body .btn-submit input[type="submit"],
body .btn-submit input[type="button"] {
  font-family: var(--asnt-font) !important;
  font-weight: 500 !important;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: .08em;            /* 1.28px at 16px, matches asnt.org */
  padding: 8px 24px;
  border-radius: var(--asnt-radius-pill) !important;
  transition: background-color .2s ease-in, border-color .2s ease-in;
}

/* Primary fill: mirrors asnt.org .btn.button-primary
   (Brand Blue fill, 1px Brand Teal stroke, white text).
   Covers OpenWater's legacy .submit class, login/SSO and judging. */
button.submit,
input[type="button"].submit,
input[type="submit"],
.content-left .login_box button,
#beginSso,
.btn-submit-judge-score,
button[class*="validate" i],
input[type="button"][class*="validate" i],
button.validateCharity,
button.manageCollaborators,
.btn-submit input.next,
body .btn-submit input[type="submit"],
.swal2-actions .swal2-confirm {
  background: var(--asnt-blue) !important;
  border: 1px solid var(--asnt-teal-light) !important;
  color: #fff !important;
}

button.submit:hover,
input[type="button"].submit:hover,
input[type="submit"]:hover,
.content-left .login_box button:hover,
#beginSso:hover,
.btn-submit-judge-score:hover,
button[class*="validate" i]:hover:not(:disabled),
input[type="button"][class*="validate" i]:hover:not(:disabled),
button.validateCharity:hover:not(:disabled),
button.manageCollaborators:hover,
.btn-submit input.next:hover,
body .btn-submit input[type="submit"]:hover,
.swal2-actions .swal2-confirm:hover {
  background: var(--asnt-btn-hover) !important;
  border-color: var(--asnt-teal-light) !important;
}

/* Secondary: cancel buttons stay outlined so they don't compete */
button.cancel,
input[type="button"].cancel,
.btn-submit input.prev,
.swal2-actions .swal2-cancel {
  background: #fff !important;
  border: 1px solid var(--asnt-blue) !important;
  color: var(--asnt-blue) !important;
}

button.cancel:hover,
input[type="button"].cancel:hover,
.btn-submit input.prev:hover,
.swal2-actions .swal2-cancel:hover {
  background: rgba(var(--asnt-blue-rgb), .08) !important;
}

/* --------------------------------------------------------------------------
   Catch-all for action buttons in the page content.
   OpenWater uses many one-off classes (create, back, manageCollaborators,
   validateCharity...). Rather than list each one, style every button in
   #content, then carve out the controls that shouldn't look like buttons.
   :where() keeps the exclusions from adding specificity.
   -------------------------------------------------------------------------- */
#content :is(button, .btn, input[type="submit"], input[type="button"]):where(:not(
    [class*="uppy"], .ui-dialog-titlebar-close, .btn-close, .btn-link,
    .dropdown-toggle, .hamburger, .ui-datepicker-trigger, .swal2-close,
    .fileUpload button, .preview button, .paginate_button
  )) {
  background: var(--asnt-blue) !important;
  border: 1px solid var(--asnt-teal-light) !important;
  color: #fff !important;
  border-radius: var(--asnt-radius-pill) !important;
  font-family: var(--asnt-font) !important;
  font-weight: 500 !important;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 24px;
  text-decoration: none !important;
  transition: background-color .2s ease-in;
}
#content :is(button, .btn, input[type="submit"], input[type="button"]):where(:not(
    [class*="uppy"], .ui-dialog-titlebar-close, .btn-close, .btn-link,
    .dropdown-toggle, .hamburger, .ui-datepicker-trigger, .swal2-close,
    .fileUpload button, .preview button, .paginate_button
  )):hover:not(:disabled) {
  background: var(--asnt-btn-hover) !important;
}

/* Secondary actions (Back, Cancel, Prev): white with blue outline.
   Higher specificity than the catch-all above so these win. */
#content :is(.btn.back, .btn.asnt-btn-secondary, button.cancel, input.cancel, .btn-submit input.prev) {
  background: #fff !important;
  border: 1px solid var(--asnt-blue) !important;
  color: var(--asnt-blue) !important;
}
#content :is(.btn.back, .btn.asnt-btn-secondary, button.cancel, input.cancel, .btn-submit input.prev):hover {
  background: rgba(var(--asnt-blue-rgb), .08) !important;
}

/* Space between side-by-side toolbar buttons.
   (Margin, not flex: OpenWater shows/hides this toolbar with inline display.) */
.dataTablesLeftToolbar > * + * {
  margin-left: 12px;
}

/* Prev / Next row on multi-page forms */
.btn-submit {
  gap: 12px;
}

/* Disabled should look disabled */
button[disabled],
input[type="button"][disabled],
input[type="submit"][disabled],
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Visible keyboard focus (WCAG 2.4.7) */
.btn:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
a:focus-visible {
  outline: 3px solid var(--asnt-blue);
  outline-offset: 2px;
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   4. Form fields (OpenWater form builder + login)
   -------------------------------------------------------------------------- */
.formBuilder input[type="text"],
.formBuilder input[type="email"],
.formBuilder input[type="number"],
.formBuilder select,
.formBuilder textarea,
.login_box input[type="text"],
.login_box input[type="password"] {
  border: 1px solid var(--asnt-input-border);
  border-radius: 6px;
  padding: .5rem .75rem;
}

.formBuilder input:focus,
.formBuilder select:focus,
.formBuilder textarea:focus,
.login_box input:focus {
  border-color: var(--asnt-blue);
  box-shadow: 0 0 0 3px rgba(var(--asnt-blue-rgb), .2);
  outline: none;
}

.formBuilder fieldset > legend,
.formBuilder label {
  font-weight: 600;
}

/* Login box: light gray panel, content stacked vertically */
#content .login_box {
  background: var(--asnt-gray-light);
  padding: 24px 28px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
#content .login_box > h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2;
}
#content .login_box > p {
  margin: 0;
}
/* One size for all helper text in the box, links included.
   The theme sizes links separately, so children are set explicitly. */
#content .login_box > p,
#content .login_box > p * {
  font-size: 12px !important;
  line-height: 1.5;
}
#content .login_box #beginSso {
  margin: 4px 0 8px;
}

/* Separator labels in submission/evaluation forms */
label.name {
  color: var(--asnt-blue);
}

/* "Add" buttons (repeatable rows, tables, multi-entry fields) */
/* Smaller size, matches asnt.org default .btn (14px / 6px 16px) */
button.add {
  background: var(--asnt-blue) !important;
  border: 1px solid var(--asnt-teal-light) !important;
  color: #fff !important;
  border-radius: var(--asnt-radius-pill) !important;
  text-transform: uppercase;
  font-family: var(--asnt-font) !important;
  font-weight: 500 !important;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  padding: 6px 16px;
  transition: background-color .2s ease-in;
}
button.add:hover {
  background: var(--asnt-btn-hover) !important;
}


/* --------------------------------------------------------------------------
   5. Header, nav, footer
   Only needed if you stay on OpenWater's header. If you drop ASNT's own
   header/footer markup into Header HTML / Footer HTML, style those classes
   instead and delete this block.
   -------------------------------------------------------------------------- */
#masthead.site-header {
  border-bottom: 4px solid var(--asnt-blue);
}

/* Logo + portal name lockup: one link, real text (not baked into an image) */
.header_banner .asnt-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.header_banner .asnt-lockup img {
  display: block;
}
.asnt-site-name {
  border-left: 1px solid var(--asnt-line);
  padding-left: 16px;
  color: var(--asnt-blue);
  font-family: var(--asnt-font);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  white-space: nowrap;
}
.header_banner .asnt-lockup:hover .asnt-site-name,
.header_banner .asnt-lockup:focus-visible .asnt-site-name {
  color: var(--asnt-navy);
}
@media (max-width: 576px) {
  .header_banner .asnt-lockup { gap: 10px; }
  .asnt-site-name { font-size: 16px; padding-left: 10px; }
}

/* ASNT utility bar above the OpenWater header */
.asnt-utility-bar {
  background: var(--asnt-gray-light);
  font-size: .875rem;
}
.asnt-utility-inner {
  padding: .5rem 1.5rem;
  display: flex;
  align-items: center;
}
.asnt-utility-bar a {
  color: var(--asnt-gray-dark);
  text-decoration: none;
  font-weight: 600;
}
.asnt-utility-bar a:hover,
.asnt-utility-bar a:focus-visible {
  color: var(--asnt-gray-dark);
  text-decoration: underline;
}

#site-navigation .nav-menu a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}

#site-navigation .nav-menu a:hover,
#site-navigation .nav-menu a:focus-visible {
  color: var(--asnt-blue);
}

#colophon {
  font-size: .9rem;
}


/* --------------------------------------------------------------------------
   6. Tabs, tables, alerts
   -------------------------------------------------------------------------- */

/* jQuery UI tabs (application/judging views) */
.ui-tabs .ui-tabs-nav .ui-tabs-active {
  border-color: var(--asnt-blue);
}
.ui-tabs .ui-tabs-nav .ui-tabs-active a {
  color: var(--asnt-blue);
  font-weight: 600;
}

/* DataTables pagination (submission lists) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--asnt-blue) !important;
  border-color: var(--asnt-blue) !important;
  color: #fff !important;
  border-radius: 6px;
}

/* Side menu icons (My Applications, My Profile, Admin Panel, Log Out).
   OpenWater draws these as ::before pseudo-elements on each link. */
.content-left a::before,
.content-left a > i,
.content-left a > .fa,
.content-left a > [class*="fa-"] {
  color: var(--asnt-teal-light) !important;
}

/* OpenWater flash messages */
#wl_msg .msg-box {
  border-radius: 8px;
}


/* --------------------------------------------------------------------------
   7. Step/section navigation   VERIFY
   The EventsAir #step-sidebar rules don't exist in OpenWater. The
   application form has its own left-side section list. Inspect it on a
   logged-in form page, then swap the placeholder selector below.
   -------------------------------------------------------------------------- */
/*
.[ow-section-nav] {
  border-radius: var(--asnt-radius-card);
  overflow: hidden;
}
.[ow-section-nav] > li {
  font-weight: 600;
}
.[ow-section-nav] > li.active {
  background: var(--asnt-blue);
  color: #fff;
}
*/


/* --------------------------------------------------------------------------
   "Start a new nomination" button injected on My Nominations
   (script lives in the theme Footer field)
   -------------------------------------------------------------------------- */
.asnt-start-nomination {
  margin: 0 0 24px;
}
.asnt-start-nomination a.btn {
  display: inline-block;
}


/* --------------------------------------------------------------------------
   Home page: intro, step cards, callout, contact line
   Markup lives in the Home page content (asnt-home-content.html)
   -------------------------------------------------------------------------- */
.asnt-home-intro {
  font-size: 18px;
  line-height: 1.5;
  max-width: 60ch;
  margin: 8px 0 28px;
}
.asnt-steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  counter-reset: asnt-step;
}
.asnt-step {
  counter-increment: asnt-step;
  background: var(--asnt-gray-light);
  border-top: 4px solid var(--asnt-teal-light);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asnt-step::before {
  content: counter(asnt-step);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--asnt-blue);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.asnt-step h3 {
  margin: 0;
  font-size: 20px;
}
.asnt-step p {
  margin: 0;
  line-height: 1.5;
}
.asnt-step .asnt-step-note {
  font-size: 14px;
}
.asnt-step .btn {
  align-self: flex-start;
  margin-top: auto;
}
.asnt-callout {
  border-left: 4px solid var(--asnt-teal-1);
  background: #fff;
  padding: 16px 20px;
  margin: 0 0 28px;
  max-width: 70ch;
}
.asnt-callout p {
  margin: 0;
}
.asnt-contact {
  margin: 0;
}
/* Compact buttons inside cards (beats the #content catch-all size) */
#content .asnt-step .btn {
  font-size: 14px;
  line-height: 21px;
  padding: 6px 16px;
  white-space: nowrap;
}

/* Bootstrap card list on the Home page: undo the theme's ol/li styles
   (numbers, left padding, margins) so the row fits three columns */
#content ol.asnt-card-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: calc(-.5 * var(--bs-gutter-x)) !important;
  margin-right: calc(-.5 * var(--bs-gutter-x)) !important;
  margin-top: calc(-1 * var(--bs-gutter-y)) !important;
}
#content ol.asnt-card-list .btn {
  white-space: nowrap;
}
#content ol.asnt-card-list > li {
  list-style: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Re-apply Bootstrap's gutters in case the theme resets li spacing */
  padding-left: calc(.5 * var(--bs-gutter-x)) !important;
  padding-right: calc(.5 * var(--bs-gutter-x)) !important;
  margin-top: var(--bs-gutter-y) !important;
}
#content ol.asnt-card-list > li::marker {
  content: none;
}


/* --------------------------------------------------------------------------
   Logged-in / logged-out content swap (Home page step 1)
   The Footer script adds .asnt-logged-in or .asnt-logged-out to <html>.
   Without the script, the logged-out version shows.
   -------------------------------------------------------------------------- */
.asnt-when-in { display: none; }
html.asnt-logged-in .asnt-when-in { display: block; }
html.asnt-logged-in .asnt-when-out { display: none !important; }


/* --------------------------------------------------------------------------
   Hide the system login box (the Home page step 1 card replaces it).
   The card's Log in button still clicks the hidden #beginSso button,
   so OpenWater's SSO flow is unchanged. When the sidebar holds nothing
   but the login box, hide the whole column and let content go full width.
   -------------------------------------------------------------------------- */
.content-left .login_box {
  display: none !important;
}
.content-left:has(> .login_box:only-child) {
  display: none !important;
}
#content:has(.content-left > .login_box:only-child) .content-right {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}