/*
Theme Name: NMU Homepage
Theme URI: https://www.kadencewp.com/kadence-theme/
Description: Child theme for Kadence used to customize the NMU homepage and typography.
Author: NMU
Template: kadence
Version: 1.0.0
Text Domain: nmu_home
*/

/* Yoast SEO score badge — override inline color for WCAG AA contrast.
   The plugin sets near-white text on a red background (~3.4:1); black text
   on that red achieves ~5.5:1, passing AA for normal text. */
.wpseo-score-text {
    color: #000 !important;
}

/* Cirvia font: disable TrueType hinting on Windows (DirectWrite renders the
   font's hinting instructions incorrectly, distorting glyphs). geometricPrecision
   bypasses grid-fitting in Chromium/Edge so the raw outlines are used instead. */
h2 {
    text-rendering: geometricPrecision;
}

/* Safety-net: if Kadence's updateActiveAnchors() still marks an href="#" link
   as current-menu-item (see JS patch in functions.php), suppress the underline
   bar so it at minimum doesn't animate in. Color is handled by the JS patch. */
.header-navigation[class*=header-navigation-style-underline]
    .header-menu-container > ul > li.current-menu-item > a[href="#"]::after {
    transform: scale(0, 0) translate(-50%, 0);
}

/* Hover scale effect for all form submit buttons */
input[type="submit"] {
    transition: transform 0.2s ease;
}
input[type="submit"]:hover {
    transform: scale(1.05);
}

/* ── NMU Ninja Forms — global field styling ── */

/* Apply NMU green border + cream background to all text inputs, textareas,
   native selects, and the Ninja Forms custom dropdown overlay div */
.nf-form-content input:not([type="button"]):not([type="submit"]),
.nf-form-content textarea,
.nf-form-content select.ninja-forms-field,
.nf-form-content .list-select-wrap .nf-field-element > div {
    background-color: #FDF7DB !important;
    border: 1px solid #1C513B !important;
    box-shadow: none !important;
}

/* Required asterisk and error messages: override Ninja Forms' #e80000 globally
   with the accessible dark red. The plugin's display-opinions CSS sets both
   selectors together without !important, so a single !important here wins. */
.ninja-forms-req-symbol,
.nf-error-msg,
.nf-field-submit-error {
    color: #b20101 !important;
}

/* Required asterisk: restored to the label, inline with the label text.
   - inline-flex on the label keeps the text node and <span>*</span> on one line
     even if something upstream (Kadence/Ninja Forms) made label display:flex or block.
   - align-self: flex-start on label-left/label-right ensures the label div
     stays at the top of the input row rather than stretching to mid-height. */
.nf-field-label .ninja-forms-req-symbol {
    display: inline !important;
}

.nf-field-label label,
.nf-field-label .nf-label-span {
    display: inline-flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
}

.label-left .nf-field-label,
.label-right .nf-field-label {
    align-self: flex-start !important;
}

/* Revert the previous ::after-on-input approach (interior pages only) */
.nf-form-content .nf-field-container:has(.ninja-forms-req-symbol) .nf-field-element {
    display: block !important;
}
.nf-form-content .nf-field-container:has(.ninja-forms-req-symbol) .nf-field-element::after {
    content: none !important;
}
.nf-form-content .nf-field-container:has(.ninja-forms-req-symbol) .nf-field-element > input,
.nf-form-content .nf-field-container:has(.ninja-forms-req-symbol) .nf-field-element > textarea,
.nf-form-content .nf-field-container:has(.ninja-forms-req-symbol) .nf-field-element > select {
    flex: unset !important;
    width: 100% !important;
    min-width: unset !important;
}

/* label-hidden fields: Ninja Forms uses visibility:hidden + height:0 which removes
   the label from the accessibility tree. Override with a visually-hidden/sr-only
   pattern so screen readers can still announce the label text.
   Scoped to non-homepage pages — the homepage form relies on NF Style's inline
   visibility overrides to show its labels, which !important would suppress. */
.label-hidden .nf-field-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    visibility: visible !important;
}

/* Ninja Forms Style applies per-field inline color/background to label elements.
   For sr-only labels this creates contrast failures on automated scans.
   Reset to a neutral, high-contrast pairing so scanners pass. */
.label-hidden .nf-field-label label,
.label-hidden .nf-field-label .nf-label-span {
    color: #1a1a1a !important;
    background-color: transparent !important;
}

/* No visible label → asterisk to the right of the input (interior pages only).
   Covers three cases:
   (a) label-hidden layout: .nf-field-label is in the DOM but invisible
   (b) no .nf-field-label rendered at all
   (c) .nmu-no-visible-label: JS-tagged fields whose label div has empty text
   These selectors come after the "display:block" revert above so they win on equal specificity. */
.field-wrap.label-hidden:has(.ninja-forms-req-symbol) .nf-field-element,
.field-wrap:not(:has(.nf-field-label)):has(.ninja-forms-req-symbol) .nf-field-element,
.field-wrap.nmu-no-visible-label:has(.ninja-forms-req-symbol) .nf-field-element {
    display: flex !important;
    align-items: center !important;
}

/* Hide the empty label div so the asterisk-via-::after approach takes over (interior pages only) */
.field-wrap.nmu-no-visible-label .nf-field-label {
    display: none !important;
}

.field-wrap.label-hidden:has(.ninja-forms-req-symbol) .nf-field-element > input,
.field-wrap.label-hidden:has(.ninja-forms-req-symbol) .nf-field-element > textarea,
.field-wrap.label-hidden:has(.ninja-forms-req-symbol) .nf-field-element > select,
.field-wrap:not(:has(.nf-field-label)):has(.ninja-forms-req-symbol) .nf-field-element > input,
.field-wrap:not(:has(.nf-field-label)):has(.ninja-forms-req-symbol) .nf-field-element > textarea,
.field-wrap:not(:has(.nf-field-label)):has(.ninja-forms-req-symbol) .nf-field-element > select,
.field-wrap.nmu-no-visible-label:has(.ninja-forms-req-symbol) .nf-field-element > input,
.field-wrap.nmu-no-visible-label:has(.ninja-forms-req-symbol) .nf-field-element > textarea,
.field-wrap.nmu-no-visible-label:has(.ninja-forms-req-symbol) .nf-field-element > select {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
}

.field-wrap.label-hidden:has(.ninja-forms-req-symbol) .nf-field-element::after,
.field-wrap:not(:has(.nf-field-label)):has(.ninja-forms-req-symbol) .nf-field-element::after,
.field-wrap.nmu-no-visible-label:has(.ninja-forms-req-symbol) .nf-field-element::after {
    content: "*" !important;
    color: #b20101;
    flex: 0 0 auto;
    margin-left: 6px;
    font-weight: bold;
    line-height: 1;
    align-self: flex-start;
}

/* Text, phone, and email fields use placeholder as the visual affordance (interior pages only).
   Visually hide their labels (sr-only) so they stay out of the layout but
   are still announced by screen readers via the <label for="…"> association. */
.textbox-wrap .nf-field-label,
.phone-wrap .nf-field-label,
.email-wrap .nf-field-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    visibility: visible !important;
}

/* Required asterisk to the right of the input for these field types (interior pages only).
   Must come after the "display:block" revert above (same specificity wins by source order). */
.nf-form-content .textbox-wrap:has(.ninja-forms-req-symbol) .nf-field-element,
.nf-form-content .phone-wrap:has(.ninja-forms-req-symbol) .nf-field-element,
.nf-form-content .email-wrap:has(.ninja-forms-req-symbol) .nf-field-element {
    display: flex !important;
    align-items: center !important;
}

.nf-form-content .textbox-wrap:has(.ninja-forms-req-symbol) .nf-field-element > input,
.nf-form-content .phone-wrap:has(.ninja-forms-req-symbol) .nf-field-element > input,
.nf-form-content .email-wrap:has(.ninja-forms-req-symbol) .nf-field-element > input {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
}

.nf-form-content .textbox-wrap:has(.ninja-forms-req-symbol) .nf-field-element::after,
.nf-form-content .phone-wrap:has(.ninja-forms-req-symbol) .nf-field-element::after,
.nf-form-content .email-wrap:has(.ninja-forms-req-symbol) .nf-field-element::after {
    content: "*" !important;
    color: #b20101 !important;
    flex: 0 0 auto;
    margin-left: 6px;
    font-weight: bold;
    line-height: 1;
    align-self: flex-start;
}

/* Required asterisk for list/select and date field types (interior pages only). */
.nf-form-content .list-select-wrap:has(.ninja-forms-req-symbol) .nf-field-element,
.nf-form-content .date-wrap:has(.ninja-forms-req-symbol) .nf-field-element {
    display: flex !important;
    align-items: center !important;
}

.nf-form-content .list-select-wrap:has(.ninja-forms-req-symbol) .nf-field-element > div,
.nf-form-content .list-select-wrap:has(.ninja-forms-req-symbol) .nf-field-element > select,
.nf-form-content .date-wrap:has(.ninja-forms-req-symbol) .nf-field-element > input {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
}

.nf-form-content .list-select-wrap:has(.ninja-forms-req-symbol) .nf-field-element::after,
.nf-form-content .date-wrap:has(.ninja-forms-req-symbol) .nf-field-element::after {
    content: "*" !important;
    color: #b20101 !important;
    flex: 0 0 auto;
    margin-left: 6px;
    font-weight: bold;
    line-height: 1;
    align-self: flex-start;
}

/* Focus indicator for all Ninja Forms fields.
   box-shadow: none above kills the browser's default ring, so we restore
   a visible one here using outline + an offset glow. :focus-visible keeps
   it keyboard-only so mouse users don't see a ring on click. */
.nf-form-content input:not([type="button"]):not([type="submit"]):focus-visible,
.nf-form-content textarea:focus-visible,
.nf-form-content select.ninja-forms-field:focus-visible {
    outline: 3px solid #1C513B !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(28, 81, 59, 0.25) !important;
}

/* "Fields marked with an * are required" — breathing room below */
.nf-form-fields-required {
    margin-bottom: 16px !important;
}

/* Hide rows that contain only hidden inputs (e.g. UTM tracking fields).
   Ninja Forms wraps every field in an .nf-row > .nf-cell > .field-wrap structure,
   so a row whose sole interactive descendant is type="hidden" produces empty space. */
.nf-row:has(input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(textarea)):not(:has(select)):not(:has(button)) {
    display: none !important;
}

/* Homepage body font size — 22px on desktop only */
@media (min-width: 1025px) {
    body.home {
        font-size: 22px;
    }
}

/* h1 — slightly smaller on narrow screens */
@media (max-width: 599px) {
    h1 {
        font-size: 88px !important;
    }
}

/* show-label: when .nf-field-container has the custom class "show-label", restore the
   label to its normal visible state, undoing the sr-only / label-hidden overrides above.
   Also suppress the fake ::after asterisk on .nf-field-element since the real asterisk
   already appears inside the visible label. */
.nf-field-container.show-label .nf-field-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: revert !important;
    margin: revert !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: revert !important;
    visibility: visible !important;
    display: block !important;
}

.nf-field-container.show-label .nf-field-element {
    display: block !important;
}

.nf-field-container.show-label .nf-field-element::after {
    content: none !important;
}

/* Dropdown arrow — swap the built-in SVG chevron from gray (#bbb) to NMU green.
   The select uses background: url(base64-svg) for its arrow; we override just
   background-image so the cream background-color from the rule above is kept. */
.nf-form-content .list-select-wrap select.ninja-forms-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none' stroke-width='2' stroke='%231C513B'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}