/* OSU Forms (AdvancedForms v2)

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Rubik:wght@400;500;700&display=swap');

:root {
  --heading-font: "Fjalla One", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body-font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --osu-orange: #FE5C00;
  --neutral-900: #000;
  --neutral-700: #434343;
  --neutral-500: #7a7a7a;
  --neutral-200: #ececec;
  --error: #B00020;
  --focus-ring: 2px solid var(--osu-orange);
}

html { font-size: 100% !important; }
body { font-family: var(--body-font); font-size: 16px; }

h1, h2, h3, .heading { font-family: var(--heading-font); }

/* Form builder H1 */
h1.fieldtype_heading {
  color: var(--neutral-700);
  margin: .5rem 0;
  font: 400 3.3125rem/1.2 var(--heading-font);
  text-transform: none;
}
h1.fieldtype_heading:focus { outline: 0 !important; pointer-events: none; }

/* Layout & labels */
/* wrappers & labels */
:where(form) .form-group,
:where(form) .af-field,
:where(form) .form-row,
:where(form) .field { margin: 0 0 1rem 0; }

:where(form) label { display:inline-block; margin:0 0 .375rem 0; font-weight:500; }
:where(form) .required label::after,
:where(form) label.required::after,
:where(form) .is-required > label::after { content:" *"; color:var(--osu-orange); font-weight:700; }

/* inputs/selects/textareas */
:where(form) input[type="number"],
:where(form) input[type="date"],
:where(form) input[type="color"],
:where(form) input[type="text"],
:where(form) input[type="password"],
:where(form) input[type="url"],
:where(form) input[type="search"],
:where(form) input[type="email"],
:where(form) input[type="tel"],
:where(form) select,
:where(form) textarea {
  border: 1px solid var(--neutral-500) !important;
  border-radius: 3px;
  box-shadow: none;
  background:#fff !important;
  color: var(--neutral-900) !important;
  font-family: var(--body-font);
  font-size: 16px; line-height:1.4; padding:.625rem .75rem; width:100%;
}

/* file input row */
:where(form) .input-group .form-control.upload-display { height: calc(1.4em + 1.25rem + 2px) !important; line-height:1.4 !important; padding:.625rem .75rem !important; }
:where(form) .input-group .btn.btn-file { display:inline-flex; align-items:center; height: calc(1.4em + 1.25rem + 2px) !important; padding:0 .75rem !important; font-size:1rem !important; line-height:1.4 !important; }

/* focus styles */
:where(form) input:focus,
:where(form) select:focus,
:where(form) textarea:focus,
:where(form) .form-control:focus {
  border-color: var(--osu-orange) !important;
  box-shadow: 1px 1px 4px 0 rgba(50, 50, 50, 0.09) !important; /* subtle inset */
  outline: none; /* keyboard outline handled globally */
}

/* Keyboard outline */
:where(.btn, a, button, input, select, textarea, [tabindex="0"]):focus-visible,
:where(.btn, a, button, input, select, textarea, [tabindex="0"]):focus { outline: var(--focus-ring) !important; outline-offset:2px !important; }

/* help text */
:where(form) .help-text, :where(form) .form-text, :where(form) small, :where(form) .hint { display:block; margin-top:.375rem; color:#555; font-size:.9375rem; }

/* validation */
:where(form) .error, :where(form) .field-error, :where(form) .validation-error, :where(form) .has-error .help-block { color: var(--error); }
:where(form) input:invalid, :where(form) select:invalid, :where(form) textarea:invalid,
:where(form) .has-error input, :where(form) .has-error select, :where(form) .has-error textarea { border-color: var(--error) !important; }

/* fieldset */
:where(form) fieldset { border:1px solid var(--neutral-200); border-radius:6px; padding:1rem 1rem .75rem; }
:where(form) legend { font-family:var(--heading-font); font-size:1.25rem; padding:0 .25rem; }

/* Buttons */
.btn { display:inline-block; vertical-align:middle; margin:0 0 1rem 0; font-family:inherit; padding:.85em 1em; -webkit-appearance:none; border:1px solid transparent !important; border-radius:0; transition:background-color .25s ease-in-out,color .25s ease-in-out; font-size:16px !important; line-height:19px !important; text-align:center; cursor:pointer; background:var(--osu-orange); color:#fff; text-shadow:none !important; }
.btn-primary, button { font: normal bold 1rem var(--body-font) !important; line-height:1; text-transform:uppercase; border-radius:0 !important; border-width:0 !important; display:inline-block; padding:.75rem 1.25rem !important; background:var(--osu-orange) !important; color:#fff; margin:0; transition:border-bottom .25s, padding-bottom .25s, margin-bottom .25s, padding-top .25s; font-size:1.1875rem !important; }
.btn-primary:hover, button:hover { filter: brightness(.95); }
.btn-primary:active, button:active { filter: brightness(.9); }

/* AF checkboxes */
/* native color fallback */
:where(form) input[type="checkbox"]{ accent-color: var(--osu-orange); }

/* stop UA/global outline on the checkbox input */
form .checkbox.custom-checkbox.custom-check-box > input[type="checkbox"],
form .checkbox.custom-checkbox.custom-check-box > input[type="checkbox"]:focus,
form .checkbox.custom-checkbox.custom-check-box > input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* markup: span.checkbox.custom-check-box > input + label.check-box-label */
:where(form) .checkbox.custom-checkbox.custom-check-box label.check-box-label{ position:relative; display:inline-flex; align-items:center; gap:.5rem; }
:where(form) .checkbox.custom-checkbox.custom-check-box input[type="checkbox"] + label.check-box-label::before { border:1px solid var(--neutral-500) !important; display:inline-block; }
:where(form) .checkbox.custom-checkbox.custom-check-box input[type="checkbox"]:focus + label.check-box-label::before,
:where(form) .checkbox.custom-checkbox.custom-check-box input[type="checkbox"]:focus-visible + label.check-box-label::before,
:where(form) .checkbox.custom-checkbox.custom-check-box:focus-within label.check-box-label::before {
  border-color: var(--osu-orange) !important;
  outline: var(--focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
:where(form) .checkbox.custom-checkbox.custom-check-box input[type="checkbox"]:checked + label.check-box-label::before { background:var(--osu-orange) !important; border-color:var(--osu-orange) !important; background-image:none !important; }
/* draw tick */
:where(form) .checkbox.custom-checkbox.custom-check-box input[type="checkbox"]:checked + label.check-box-label::after { content:""; position:absolute; left:6px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); background:none !important; }

/* AF radios */
/* native color fallback */
:where(form) input[type="radio"]{ accent-color: var(--osu-orange); }

/* hide native (sr-only); draw on label */
form .radio.custom-radio.custom-radio-primary > input[type="radio"]{ -webkit-appearance:none !important; appearance:none !important; outline:none !important; box-shadow:none !important; filter:none !important; position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; border:0 !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; overflow:hidden !important; white-space:nowrap !important; opacity:0 !important; }
/* visual circle on label */
form .radio.custom-radio.custom-radio-primary > label.radio-label { display:inline-flex; align-items:center; gap:.5rem; }
form .radio.custom-radio.custom-radio-primary > label.radio-label::before { border:1px solid var(--neutral-500) !important; outline:none !important; box-shadow:none !important; display:inline-block; }
/* focus outline */
form .radio.custom-radio.custom-radio-primary > input[type="radio"]:focus + label.radio-label::before,
form .radio.custom-radio.custom-radio-primary > input[type="radio"]:focus-visible + label.radio-label::before,
form .radio.custom-radio.custom-radio-primary:focus-within label.radio-label::before { border-color: var(--osu-orange) !important; outline: var(--focus-ring) !important; outline-offset: 2px !important; box-shadow:none !important; }
/* checked + inner dot */
form .radio.custom-radio.custom-radio-primary > input[type="radio"]:checked + label.radio-label::before { background:var(--osu-orange) !important; border-color:var(--osu-orange) !important; }
form .radio.custom-radio.custom-radio-primary > input[type="radio"]:checked + label.radio-label::after { background:#fff !important; }
/* guard outlines */
form .radio.custom-radio.custom-radio-primary .radio-label:focus, form .radio.custom-radio.custom-radio-primary .radio-label:focus-visible, form .radio.custom-radio.custom-radio-primary:focus-within { outline:none !important; box-shadow:none !important; }

/* No hover effects (radios/checkboxes) */
/* Radios — mirror base/checked on hover */
form .radio.custom-radio.custom-radio-primary:hover input[type="radio"]:not(:checked) + label.radio-label::before,
form .radio.custom-radio.custom-radio-primary input[type="radio"]:not(:checked):hover + label.radio-label::before,
form .radio.custom-radio.custom-radio-primary input[type="radio"]:not(:checked) + label.radio-label:hover::before {
  background: transparent !important;
  border-color: var(--neutral-500) !important;
  box-shadow: none !important;
  background-image: none !important;
}
form .radio.custom-radio.custom-radio-primary:hover input[type="radio"]:checked + label.radio-label::before,
form .radio.custom-radio.custom-radio-primary input[type="radio"]:checked:hover + label.radio-label::before,
form .radio.custom-radio.custom-radio-primary input[type="radio"]:checked + label.radio-label:hover::before {
  background: var(--osu-orange) !important;
  border-color: var(--osu-orange) !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Checkboxes — mirror base/checked */
form .checkbox.custom-checkbox.custom-check-box:hover input[type="checkbox"]:not(:checked) + label.check-box-label::before,
form .checkbox.custom-checkbox.custom-check-box input[type="checkbox"]:not(:checked):hover + label.check-box-label::before,
form .checkbox.custom-checkbox.custom-check-box input[type="checkbox"]:not(:checked) + label.check-box-label:hover::before {
  background: transparent !important;
  border-color: var(--neutral-500) !important;
  box-shadow: none !important;
  background-image: none !important;
}
form .checkbox.custom-checkbox.custom-check-box:hover input[type="checkbox"]:checked + label.check-box-label::before,
form .checkbox.custom-checkbox.custom-check-box input[type="checkbox"]:checked:hover + label.check-box-label::before,
form .checkbox.custom-checkbox.custom-check-box input[type="checkbox"]:checked + label.check-box-label:hover::before {
  background: var(--osu-orange) !important;
  border-color: var(--osu-orange) !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* defuse theme label:hover */
form .radio.custom-radio.custom-radio-primary label.radio-label:hover::before,
form .checkbox.custom-checkbox.custom-check-box label.check-box-label:hover::before { /* no-op */ }

/* no input hover ring */
form input[type="radio"]:hover,
form input[type="checkbox"]:hover { outline: none !important; box-shadow: none !important; }

/* Editable image */
:where(form) .fieldtype_editableimage .editable-image-canvas{ display:block; border:1px solid var(--neutral-500) !important; border-radius:3px; background:#fff; }
:where(form) .fieldtype_editableimage .editable-image-canvas:focus{ outline:var(--focus-ring) !important; outline-offset:2px !important; }
:where(form) .fieldtype_editableimage .cleardrawing{ margin-top:.5rem; }

/* Divider (hr) */
:where(form) .fieldtype_divider hr,
:where(form) .snapfield-fieldtype_divider hr {
  border: 0;
  border-top: .625rem solid #FE5C00 !important;
  height: 0;
}

/* WCAG 2.2 AA */

/* Focus ring unclipped */
:where(form) .form-group, :where(form) .af-field, :where(form) .field { overflow: visible; }

/* Touch targets ≥24px */
:where(form) .radio-label, :where(form) .check-box-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;                 /* consistent space between glyph and text */
  min-height: 24px;
  padding: 2px 6px;
  cursor: pointer;
}

/* Buttons: large/bold for contrast */
.btn { font-size: 1.125rem !important; font-weight: 700 !important; }

/* Placeholder contrast */
::placeholder { color: #6f6f6f; opacity: 1; }

/* 6) Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Forced colors (Windows HC) */
@media (forced-colors: active) {
  :where(form) input, :where(form) select, :where(form) textarea { border-color: ButtonText !important; }
  :where(.btn, a, button, input, select, textarea, [tabindex="0"]):focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px !important; }
  .radio-label::before, .check-box-label::before { forced-color-adjust: none; }
}

/* Autofill */
input:-webkit-autofill {
  -webkit-text-fill-color: #000 !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}

/* Mobile */
/* Stack cols on phones */
@media (max-width: 576px) {
  /* stack sm cols */
  .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  /* H1 scale */
  h1.fieldtype_heading { font-size: 2rem; line-height: 1.2; }
}

@media (max-width: 400px) {
  /* keep text inputs at 16px to prevent iOS zoom; already 16px, but reassert for tiny screens */
  :where(form) input, :where(form) select, :where(form) textarea { font-size: 16px; }
  :where(form) .help-text, :where(form) .form-text, :where(form) small, :where(form) .hint { font-size: .9375rem; }
}