/*
 * WTC template overrides
 * ----------------------
 * Hand-maintained CSS that is NOT generated from scss/. It loads after css/template.css,
 * so plain rules of equal specificity win. Edit this file directly - there is nothing to
 * compile. If the scss is ever rebuilt, the corresponding source fixes should be folded
 * back into scss/components/ and the rule removed from here.
 */

/*
 * Slider arrows: remove the duplicated FontAwesome caret.
 *
 * scss/components/_widgetkit.scss puts content: "\f0da" / "\f0d9" on
 * .uk-slidenav-next::before / .uk-slidenav-previous::before. That worked under UIkit 2,
 * whose own stylesheet set font-family: FontAwesome on .uk-slidenav. UIkit 3 - which is
 * what the current Widgetkit markup uses (inline <svg>, .uk-icon, inert, role="region") -
 * dropped the icon font completely, so those Private Use Area codepoints fall through to
 * the body font (Fira Sans Condensed), which has no glyph there. The browser draws a
 * tofu box, and UIkit 3's own SVG chevron is drawn right next to it.
 *
 * The carets are redundant now, so suppress them and let the SVG stand alone.
 */
#main .uk-slidenav-next::before,
#main .uk-slidenav-previous::before {
    content: none;
}

/*
 * Keep the arrows in the brand pink the carets used to use. UIkit 3 hardcodes
 * stroke="#000" as a presentation attribute on the polyline; any CSS rule outranks a
 * presentation attribute, so mapping stroke to currentColor lets `color` drive it.
 */
#main .uk-slidenav {
    color: #C50084;
}

#main .uk-slidenav svg [stroke] {
    stroke: currentColor;
}

/* ------------------------------------------------------------------------
 * Widgetkit content carousel (#wk-cc3) - text-only testimonials
 * ------------------------------------------------------------------------
 * This widget uses a UIkit slideshow purely to drive a switcher: the four
 * <li> in .uk-slideshow-items are empty and all the visible content lives in
 * #wk-switchercc3 further down the grid. UIkit does not know the items are
 * empty, so its JS still writes "aspect-ratio: 16/9; min-height: 300px"
 * inline on the item list, reserving a tall blank band. The prev/next arrows
 * are absolutely positioned against that band, which is why they float in
 * empty space above the testimonial instead of flanking it.
 *
 * The scoping id comes from the widget's own inline script, which addresses
 * '#wk-cc3 [uk-slideshow]'. It is deliberately narrow: collapsing
 * .uk-slideshow-items globally would flatten every real image slideshow on
 * the site. If another carousel needs the same treatment, add its id to each
 * selector rather than widening them.
 * --------------------------------------------------------------------- */

/* Positioning context for the arrows, so they can span the whole widget. */
#wk-cc3 {
    position: relative;
}

/* Collapse the reserved media band. !important is required because UIkit
   writes these as inline styles from JavaScript. Height is left to collapse
   on its own rather than forced to 0 - UIkit measures this element, and
   display:none here would stop the itemshow events the switcher relies on. */
#wk-cc3 .uk-slideshow-items {
    aspect-ratio: auto !important;
    min-height: 0 !important;
}

/* Release the arrows and the dot nav from the now-collapsed slideshow box so
   they resolve against #wk-cc3 instead. UIkit declares .uk-position-relative
   with !important, so overriding it needs !important too. */
#wk-cc3 .uk-slideshow {
    position: static !important;
}

#wk-cc3 .uk-slidenav {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
}

#wk-cc3 .uk-slidenav-previous {
    left: 0;
    right: auto;
}

#wk-cc3 .uk-slidenav-next {
    right: 0;
    left: auto;
}

/* .uk-visible-toggle only reveals the arrows while the slideshow box is
   hovered - and that box is now zero-height, so they would never appear.
   Keep them permanently visible; they are this widget's only usable control. */
#wk-cc3 .uk-slidenav.uk-hidden-hover {
    opacity: 1 !important;
}

/* The dot nav was pinned to the bottom of the media band. Put it back in
   normal flow underneath the testimonial. */
#wk-cc3 .uk-position-bottom {
    position: static !important;
    margin: 1rem 0 0;
}

/* Those dots sit inside .uk-light, which colours them for a dark photo
   background - on white they were white on white, i.e. invisible. Restore
   UIkit's default light-background palette. */
#wk-cc3 .uk-light .uk-dotnav > * > * {
    border-color: rgba(102, 102, 102, 0.4);
}

#wk-cc3 .uk-light .uk-dotnav > .uk-active > * {
    background-color: rgba(102, 102, 102, 0.6);
    border-color: transparent;
}

/* ========================================================================
 * Joomla 4 form layouts: the Bootstrap 5 utilities this template never had
 * ========================================================================
 * Joomla 4 rebuilt everything under layouts/joomla/form/ on Bootstrap 5
 * utility classes. Cassiopeia ships those classes; this template is built on
 * Foundation and defines none of them, so the core markup arrives with hooks
 * that resolve to nothing. Three separate symptoms on the application form,
 * one cause:
 *
 *   .hidden           showon stopped working - conditional fields are always
 *                     visible (the whole Disability checkbox list, "primary
 *                     difficulty/disability", "Other title").
 *   .visually-hidden  every radio/checkbox group prints its question twice,
 *                     the second time boxed - that is the new <legend>.
 *   .form-check       Yes/No radios stack vertically instead of sitting
 *                     side by side.
 *
 * Nothing in this repo changed. Defining these three is what a non-Bootstrap
 * Joomla 4 template is expected to do.
 * --------------------------------------------------------------------- */

/*
 * 1. showon.
 *
 * Joomla 3 media/jui/js/cms.js did the hiding in jQuery:
 *
 *     target.toggle(showfield);          // -> inline style="display: none"
 *
 * so it worked with no CSS at all. Joomla 4/5 media/system/js/showon.js
 * switched to a class:
 *
 *     field.classList.add('hidden');     // showon.js:214
 *     field.classList.remove('hidden');  // showon.js:209
 *
 * The class lands on the element - the rendered form really does say
 * <div class="control-group hidden" data-showon="..."> - but nothing styles
 * it, so the field stays on screen. That is why DisabilityID and
 * DisabilityPrimary (both showon="LearningDiffOrDisID:1" in
 * models/forms/applicationrequest.xml) render unconditionally.
 *
 * !important is required: .control-group is a flex-grid-row(), i.e. it
 * carries display:flex from a more specific selector in _appform.scss.
 */
.hidden {
    display: none !important;
}

/*
 * 2. visually-hidden, plus the inline help text.
 *
 * Joomla 3's radio and checkboxes field layouts put the options straight
 * inside the <fieldset>. Joomla 4 added an accessible name for the group:
 *
 *     <legend class="visually-hidden"><?php echo $label; ?></legend>
 *
 * (layouts/joomla/form/field/radio/buttons.php, .../checkboxes.php). The
 * template already prints the label itself, so with the class undefined the
 * legend renders as a visible duplicate of the question.
 *
 * The same block covers renderfield.php's new inline help text. Joomla 3:
 *
 *     <div class="controls"><?php echo $input; ?></div>
 *
 * Joomla 4/5 appends <div id="<name>-desc"><small class="form-text">…, so
 * every description= in the form XML became visible at once. In the
 * two-column Foundation grid it lands under one field and reads as though it
 * belongs to the next one down.
 *
 * Hidden this way rather than with display:none on purpose - the inputs
 * carry aria-describedby="<name>-desc" and the legend is the group's
 * accessible name, so both must stay in the accessibility tree. Sighted
 * users get the Joomla 3 layout back; screen readers keep the text.
 *
 * Definition copied verbatim from Bootstrap 5, !important included.
 */
.visually-hidden,
.control-group > .controls > [id$="-desc"] {
    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;
}

/*
 * 3. Radio options back on one line.
 *
 * Joomla 3 emitted <input><label> as bare siblings, so options flowed inline.
 * Joomla 4's radio/buttons.php wraps each one:
 *
 *     <div class="form-check"><input class="form-check-input"><label></div>
 *
 * .form-check is a block in Bootstrap, which is why Yes and No now sit on
 * separate rows.
 *
 * Deliberately scoped to the .radio container that buttons.php wraps its
 * options in. checkboxes.php emits .form-check directly inside its fieldset
 * with no such wrapper, so the 19-option Disability list keeps its current
 * one-per-line layout - inlining that would produce an unreadable block of
 * run-together text.
 */
.radio > .form-check {
    display: inline-block;
    margin-right: 2rem;
}