/* Whitehurst Directory - Custom Styles */

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --app-footer-h: 2rem;
    /* Sticky navbar height. The body-level <header> in _Layout / _FrontPageLayout
       has `position: sticky; top: 0` (rule below) and BS5's default navbar-expand
       paint sizes the inner <nav> at ~81px at base font, plus a logo with
       `max-height: 50px` (adjace.css) on >=768px viewports. Token used by the
       marketing-landing hero pull-up so the hero image flows up under the navbar
       and the OrgStyles tint composites over the hero, not the body's #fff. */
    --whitehurst-navbar-h: 81px;
}

/* Global Styles */
html {
    font-size: 14px;
    height: 100%;
}

body {
    font-family: 'Lato', sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--app-footer-h);
}

body > header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

body > main {
    flex: 1 0 auto;
}

body > footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    /* Neutralize legacy adjace.css `footer { padding: 20px 0; text-align: center }`
       so the new flex-aligned footer's own utility classes (px-3 py-2, text-end) win. */
    padding: 0;
    text-align: initial;
}

/* Flavor B fallback: when vertical real estate gets tight (landscape mobile,
   keyboards-up on small phones) drop the footer back into normal flow so it
   stops eating form-field territory. */
@media (max-height: 500px) {
    body {
        padding-bottom: 0;
    }
    body > footer {
        position: static;
    }
}

/* Flavor B fallback: any focused form field is the soft-keyboard heuristic.
   While editing, the footer steps aside so it can't sit on top of inputs
   or submit buttons on iOS Safari (where fixed elements track the visual
   viewport above the keyboard). :focus-within is used instead of :focus
   so the rule still fires when the browser window briefly loses OS focus. */
body:has(:is(input, textarea, select):focus-within) {
    padding-bottom: 0;
}
body:has(:is(input, textarea, select):focus-within) > footer {
    position: static;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.section-heading {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

/* Navigation */
.navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.btn-link.nav-link {
    color: rgba(255, 255, 255, 0.75);
    border: none;
    padding: 0.5rem 1rem;
}

.btn-link.nav-link:hover {
    color: rgba(255, 255, 255, 1);
}

/* Submit-button loading state (setSubmitButtonLoading in
   whitehurst-global-jquery-extensions.js). Keeps the Kendo Loader from
   growing the button when the inner HTML swaps to spinner + label. */
.btn.btn-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn.btn-loading .whitehurst-btn-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1em;
    flex-shrink: 0;
}

.btn.btn-loading .whitehurst-btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hamburger toggle styling (.navbar .navbar-toggle.app + nested <svg> +
   hover/focus/active) lives in adjace.css for historical reasons -- BS3-era
   marketing layouts loaded adjace.css but not site.css, so the rule had
   to live there. Post-BS3 retirement, every layout rides on _LayoutHead
   which loads both stylesheets, so this comment exists only as a
   "don't look for it here" breadcrumb. */

/* Legacy slide-out drawer (.sidenav-menu) was tinted dynamically by
   LayoutHelpers.OrgStyles in 1.0. The BS5 _Layout doesn't call OrgStyles,
   so give the drawer a default that matches the BS5 navbar bg-dark. */
.sidenav-menu.telerik-navbar {
    background-color: var(--bs-dark, #212529);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3);
}

.sidenav-menu.telerik-navbar .k-menu .k-group {
    background-color: var(--bs-dark, #212529);
}

/* (Old `.navbar .telerik-navbar .k-link.btn-*` broad reset removed.
    _Layout now calls LayoutHelpers.OrgStyles, which paints the
    `.btn-landing-page.btn-outline` chrome (border, fill, hover) using
    the v1 four-class Kendo selector, so the reset stripped exactly the
    outline + transparent-on-hover treatment v1 ships with.) */

/* Kendo Menu dropdowns (Profile, What's New, multi-org Directory/Celebrations/
   PrayerList submenus) hang off each item in a .k-animation-container. By
   default the Bootstrap Kendo theme paints them as bright white panels with
   dark text, which clashes with the bg-dark navbar. Tint everything to match
   the navbar. */
.telerik-navbar .k-animation-container,
.telerik-navbar .k-animation-container .k-popup,
.telerik-navbar .k-animation-container .k-content,
.telerik-navbar .k-menu .k-group,
.telerik-navbar .k-menu .k-menu-group {
    background-color: var(--bs-dark, #212529);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
}

.telerik-navbar .k-animation-container .k-link,
.telerik-navbar .k-menu .k-group .k-link,
.telerik-navbar .k-menu .k-menu-group .k-link {
    color: rgba(255, 255, 255, 0.85);
    background-color: transparent;
}

.telerik-navbar .k-animation-container .k-item:hover > .k-link,
.telerik-navbar .k-animation-container .k-item.k-state-hover > .k-link,
.telerik-navbar .k-menu .k-group .k-item:hover > .k-link,
.telerik-navbar .k-menu .k-group .k-item.k-state-hover > .k-link,
.telerik-navbar .k-menu .k-menu-group .k-item:hover > .k-link,
.telerik-navbar .k-menu .k-menu-group .k-item.k-state-hover > .k-link {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

/* Top-level horizontal navbar items (cog, help, profile, directory, etc.).
   Kendo's bootstrap-main theme paints these dark on hover/focus/active and
   on the .k-selected route-match state via:
       .k-menu:not(.k-context-menu) > .k-item:hover  { color: #212529 }
       .k-menu:not(.k-context-menu) > .k-item.k-selected { color: #212529 }
   which inks the white Font Awesome icons (cog turns black sitting on
   Organization/Index, profile turns black sitting on Manage, etc.). Pin the
   icon color to white and dim the background instead, matching the dropdown
   item treatment above. The legacy adjace.css rules use the old
   .k-state-hover class names that Kendo 13 no longer emits, so they don't
   catch this. */
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item > .k-link {
    color: #fff;
}

.telerik-navbar .k-menu:not(.k-context-menu) > .k-item:hover,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-hover,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item:focus,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-focus,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item:active,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-active,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-selected,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-state-hover,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-state-focused,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-state-active,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-state-selected {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.telerik-navbar .k-menu:not(.k-context-menu) > .k-item:hover > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-hover > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item:focus > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-focus > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item:active > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-active > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-selected > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-state-hover > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-state-focused > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-state-active > .k-link,
.telerik-navbar .k-menu:not(.k-context-menu) > .k-item.k-state-selected > .k-link {
    color: #fff;
    background-color: transparent;
    box-shadow: none;
}

/* ============================================================================
   Profile dropdown panel
   ----------------------------------------------------------------------------
   Shares the same card chrome as the What's-New panel: titlebar with avatar +
   name on a darker tint, body row with email left and Log Off right. The HTML
   emitted by ProfileMenu uses fresh .profile-popover-* class names instead of
   the legacy .nav.navbar-nav.navbar-right.ari-right-menu chain so adjace.css's
   inherited float/margin rules don't interfere -- no specificity fights needed.
   ============================================================================ */

/* Pre-hide the popover payload to prevent a first-paint flash of the avatar
   image and titlebar before the Kendo Menu widget reparents the .Content()
   block into a .k-animation-container popup. Kendo MVC renders the content
   server-side inline inside the menu item <li>, and only hides it via the
   popup machinery once the widget initializes -- which leaves the <img> and
   name link briefly visible in the navbar on first load. Hiding by default
   and re-showing under .k-animation-container restores normal popup paint
   the moment Kendo lifts the content into its wrapper, with no impact on
   the open/close animation Kendo controls on .k-popup. Same treatment is
   applied to .whats-new-container below for the same reason. */
.profile-popover-container {
    display: none;
}

.k-animation-container .profile-popover-container {
    display: block;
}

/* Reset every Kendo wrapper layer to transparent + no chrome so the only
   visible surface is .profile-popover-container. Without this, Kendo's dark
   theme paints .k-animation-container and .k-content with an opaque
   rgb(33,37,41) background; combined with Kendo measuring the popup taller
   than the actual card (height stays at the first-render measurement, ~341px,
   even though the card is only ~126px tall) that extra ~215px of bare dark
   theme paint shows through below the card and reads as a "doppelganger"
   second dark box behind the popover. */
.k-animation-container:has(.profile-popover-container),
.k-animation-container:has(.profile-popover-container) .k-child-animation-container,
.k-animation-container:has(.profile-popover-container) .k-popup,
.k-animation-container:has(.profile-popover-container) .k-menu-group,
.k-animation-container:has(.profile-popover-container) .k-content {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.k-animation-container:has(.profile-popover-container) .k-popup,
.k-animation-container:has(.profile-popover-container) .k-menu-group,
.k-animation-container:has(.profile-popover-container) .k-content {
    padding: 0 !important;
}

.k-animation-container:has(.profile-popover-container) .k-item,
.k-animation-container:has(.profile-popover-container) .k-link {
    padding: 0;
    background: transparent;
    border: 0;
}

.k-animation-container:has(.profile-popover-container) .k-item:hover,
.k-animation-container:has(.profile-popover-container) .k-item.k-state-hover,
.k-animation-container:has(.profile-popover-container) .k-link:hover {
    background: transparent;
}

/* Width pinned at every Kendo layer (same reason as What's-New). */
.k-animation-container:has(.profile-popover-container),
.k-animation-container:has(.profile-popover-container) .k-child-animation-container,
.k-animation-container:has(.profile-popover-container) .k-popup,
.k-animation-container:has(.profile-popover-container) .k-menu-group,
.k-animation-container:has(.profile-popover-container) .k-item {
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
}

/* Small inward nudge so the panel clears the viewport's right edge. */
.k-animation-container:has(.profile-popover-container) {
    transform: translateX(-0.75rem);
}

.k-animation-container .profile-popover-container {
    width: 380px;
    background-color: #1f2229;
    color: #e8ecef;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
    font-family: 'Lato', 'Segoe UI', sans-serif;
    line-height: 1.45;
    overflow: hidden;
    box-sizing: border-box;
}

.k-animation-container .profile-popover-container * {
    box-sizing: border-box;
}

/* Titlebar: avatar circle left, name link right. */
.k-animation-container .profile-popover-titlebar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background-color: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.k-animation-container .profile-popover-avatar {
    flex: 0 0 auto;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.06);
}

.k-animation-container .profile-popover-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #f4eddb;
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.k-animation-container .profile-popover-name:hover,
.k-animation-container .profile-popover-name:focus {
    color: #ffffff;
    text-decoration: none;
}

/* Body row: email left, Log Off right. */
.k-animation-container .profile-popover-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.125rem 0.875rem;
}

.k-animation-container .profile-popover-email {
    flex: 1 1 auto;
    min-width: 0;
    color: rgba(232, 236, 239, 0.7);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-animation-container .profile-popover-logoff {
    flex: 0 0 auto;
    color: #d9d3bb;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(217, 211, 187, 0.4);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.k-animation-container .profile-popover-logoff:hover,
.k-animation-container .profile-popover-logoff:focus {
    color: #ffffff;
    border-bottom-color: #ffffff;
    text-decoration: none;
}

/* ============================================================================
   What's-New dropdown panel
   ----------------------------------------------------------------------------
   Layout mirrors 1.0/production: a fixed-width dark card with a single header
   bar ("WHAT'S NEW" on the left, "CHANGE LOG" link on the right) and a stacked
   list of dated items below. Kendo Menu reparents submenus to <body>, so we
   pin width on the .k-animation-container itself (same trick 1.0 used) and
   anchor the inner selectors on .whats-new-container so the rules stay live
   regardless of the surrounding navbar wrapper.
   ============================================================================ */

/* Pre-hide the payload (same first-paint-flash rationale as the Profile block
   above). The .Content() HTML renders inline until Kendo reparents it into
   the dropdown popup, so without this rule the titlebar can flash on slow
   paints before the menu is wired up. */
.whats-new-container {
    display: none;
}

/* Trigger reveal animation. The #whats-new-button <li> ships with inline
   style="display:none" from WhitehurstMenu.cs so the navbar paints without
   an inbox glyph. When whitehurst-global-whats-new.js confirms one or more
   posts are still flagged DisplayAsNew, it clears that inline display and
   adds .is-revealed, which plays the slide-in keyframes below.

   The `both` fill-mode plus the 700ms animation-delay holds the element at
   the `from` keyframe (invisible, displaced) while the rest of the navbar
   finishes settling, so the slide doesn't get lost in the page-load
   reflow. By the time the keyframes fire the user's eye has nothing else
   to track and the inbox slides into a quiet stage. */
@keyframes whats-new-slide-in {
    from {
        opacity: 0;
        transform: translateX(-36px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#whats-new-button.is-revealed {
    animation: whats-new-slide-in 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 700ms both;
}

.k-animation-container .whats-new-container {
    display: block;
}

/* Reset every Kendo wrapper layer to transparent + no chrome so the only
   visible surface is .whats-new-container. See the matching block in the
   Profile section for the full diagnosis -- short version: Kendo's dark theme
   paints .k-animation-container and .k-content opaque, and Kendo measures
   the wrapper height once at first open (~341px) even when our card is
   shorter, so the extra paint shows below the card as a phantom dark box. */
.k-animation-container:has(.whats-new-container),
.k-animation-container:has(.whats-new-container) .k-child-animation-container,
.k-animation-container:has(.whats-new-container) .k-popup,
.k-animation-container:has(.whats-new-container) .k-menu-group,
.k-animation-container:has(.whats-new-container) .k-content {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.k-animation-container:has(.whats-new-container) .k-popup,
.k-animation-container:has(.whats-new-container) .k-menu-group,
.k-animation-container:has(.whats-new-container) .k-content {
    padding: 0 !important;
}

.k-animation-container:has(.whats-new-container) .k-item,
.k-animation-container:has(.whats-new-container) .k-link {
    padding: 0;
    background: transparent;
    border: 0;
}

.k-animation-container:has(.whats-new-container) .k-item:hover,
.k-animation-container:has(.whats-new-container) .k-item.k-state-hover,
.k-animation-container:has(.whats-new-container) .k-link:hover {
    background: transparent;
}

/* Pin width on every Kendo wrapper layer between the body and our card. Modern
   Kendo Menu (2026.2) lazy-wraps popups in:
       .k-animation-container
         > .k-child-animation-container   (Kendo writes inline width/height here
                                           from the popup's measured natural size --
                                           ~280px for our icon-only menu link, which
                                           is too narrow for the 400px card and
                                           causes a smaller "doppelganger" dark box
                                           to peek out behind it)
           > .k-popup
             > .k-menu-group > .k-item > .k-content > .whats-new-container
   We pin all five layers at 400px so no intermediate node clips or shrink-wraps
   the card. */
.k-animation-container:has(.whats-new-container),
.k-animation-container:has(.whats-new-container) .k-child-animation-container,
.k-animation-container:has(.whats-new-container) .k-popup,
.k-animation-container:has(.whats-new-container) .k-menu-group,
.k-animation-container:has(.whats-new-container) .k-item {
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
}

/* Nudge the panel away from the viewport's right edge. Kendo anchors the popup
   under the gift icon, which sits right against the navbar's right margin and
   leaves the card flush with the window. A small transform shifts it visually
   without disturbing Kendo's inline left/top positioning math. */
.k-animation-container:has(.whats-new-container) {
    transform: translateX(-0.75rem);
}

.k-animation-container .whats-new-container {
    width: 400px;
    padding: 0;
    background-color: #1f2229;
    color: #e8ecef;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
    font-family: 'Lato', 'Segoe UI', sans-serif;
    line-height: 1.45;
    overflow: hidden;
    box-sizing: border-box;
}

.k-animation-container .whats-new-container * {
    box-sizing: border-box;
}

/* Header bar: title left, Change Log right */
.k-animation-container .whats-new-titlebar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    background-color: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.k-animation-container .whats-new-header {
    margin: 0;
    color: #f4eddb;
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.k-animation-container .whats-new-link {
    flex: 0 0 auto;
    color: #d9d3bb;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(217, 211, 187, 0.4);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.k-animation-container .whats-new-link:hover,
.k-animation-container .whats-new-link:focus {
    color: #ffffff;
    border-bottom-color: #ffffff;
    text-decoration: none;
}

/* Items list */
.k-animation-container #whats-new-box {
    max-height: 360px;
    overflow-y: auto;
    padding: 0.25rem 1.125rem 0.75rem;
}

.k-animation-container #whats-new-box::-webkit-scrollbar {
    width: 6px;
}

.k-animation-container #whats-new-box::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.k-animation-container .whats-new-item {
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.k-animation-container .whats-new-item:last-child {
    border-bottom: 0;
    padding-bottom: 0.5rem;
}

.k-animation-container .whats-new-item-date {
    margin-bottom: 0.2rem;
    color: #7cc4d6;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.k-animation-container .whats-new-item-description {
    color: rgba(232, 236, 239, 0.92);
    font-size: 0.9rem;
    font-weight: 400;
    white-space: normal;
    word-wrap: break-word;
}

/* Empty-state: collapse the items area so the panel doesn't show a stray
   bottom strip when there's nothing to display. */
.k-animation-container #whats-new-box:empty {
    padding: 0;
}

/* Alerts */
.alert {
    margin-bottom: 1rem;
}

/* ============================================================================
   Kendo popup notification (info / error / warning / success)
   ----------------------------------------------------------------------------
   See AGENTS.md "Progressively prefer Kendo over Bootstrap 5 where Kendo will
   do". The template (LayoutHelpers.WhitehurstPopupNotificationTemplate /
   _KendoNotificationHost.cshtml) is intentionally BS-free; this block paints
   only the inner template content. The outer .k-notification.k-notification-<type>
   chrome (background, border, semantic color) comes from the Kendo Bootstrap
   theme via the second arg of popupNotification.show(...). Absolute close glyph
   keeps title + message stacking cleanly when popupError is called with a title.
   ============================================================================ */
.whitehurst-popup-notification {
    position: relative;
    min-width: 16rem;
    padding-right: 1.5rem;
}

.whitehurst-popup-notification-title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.whitehurst-popup-notification-message {
    display: block;
    line-height: 1.35;
}

.whitehurst-popup-notification-close {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.7;
    cursor: pointer;
}

.whitehurst-popup-notification-close:hover {
    opacity: 1;
}

/* Cards */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
}

/* Forms */
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Footer */
footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Kendo UI Overrides (when integrated) */
.k-grid {
    border-color: #dee2e6;
}

/* Utility Classes */
.text-muted {
    color: #6c757d !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    html {
        font-size: 13px;
    }
    
    .section-heading {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   Environment badge
   ----------------------------------------------------------------------------
   Rendered by _LayoutFooter as a body-level sibling of <footer>. Styled to
   mirror the 1.0 adjace-directory.scss look: a softly-tinted, rounded, padded
   pill anchored to the bottom-right, with the tint encoding the deployment
   (Local = red, Dev = yellow, UAT = green). Hidden entirely in Production.
   Lifted above the fixed footer using --app-footer-h so it stays visible; when
   the footer drops to static flow (landscape mobile / focused form field), the
   badge follows it back down so it doesn't hover in the middle of the page.
   ============================================================================ */
.environment {
    position: fixed;
    right: 1em;
    bottom: calc(var(--app-footer-h, 0px) + 1em);
    padding: 1em;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 10%;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
    z-index: 1040;
    pointer-events: none;
}

.environment-local {
    background: rgba(200, 0, 0, 0.2);
}

.environment-dev,
.environment-development {
    background: rgba(200, 200, 0, 0.2);
}

.environment-uat,
.environment-staging {
    background: rgba(0, 200, 0, 0.2);
}

.environment-live,
.environment-production {
    display: none;
}

@media (max-height: 500px) {
    .environment {
        bottom: 1em;
    }
}

body:has(:is(input, textarea, select):focus-within) .environment {
    bottom: 1em;
}

/* Loading Spinner */
.loading-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25rem solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Organization: What's New */
.whats-new-timeline {
    display: grid;
    gap: 1rem;
}

.whats-new-timeline-item {
    display: grid;
    grid-template-columns: 9rem 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

.whats-new-timeline-date {
    padding-top: 0.5rem;
    text-align: right;
    font-size: 0.95rem;
    font-weight: 700;
    color: #495057;
}

.whats-new-timeline-rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.whats-new-timeline-rail::before {
    content: "";
    position: absolute;
    top: -0.75rem;
    bottom: -0.75rem;
    width: 2px;
    background: #d9dee3;
}

.whats-new-timeline-dot {
    margin-top: 0.65rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: #6c757d;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #d9dee3;
    z-index: 1;
}

.whats-new-timeline-content {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    background-color: #ffffff;
    padding: 0.875rem 1rem;
}

.whats-new-timeline-item.is-new .whats-new-timeline-content {
    border-color: #8fd3e0;
    background-color: #f2fbfd;
}

.whats-new-timeline-item.is-new .whats-new-timeline-dot {
    background-color: #17a2b8;
    box-shadow: 0 0 0 2px #8fd3e0;
}

.whats-new-body {
    color: #212529;
    line-height: 1.5;
}

.whats-new-body > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .whats-new-timeline-item {
        grid-template-columns: 1.75rem minmax(0, 1fr);
    }

    .whats-new-timeline-date {
        grid-column: 2;
        text-align: left;
        padding-top: 0;
        margin-bottom: -0.25rem;
    }

    .whats-new-timeline-rail {
        grid-row: 1 / span 2;
        grid-column: 1;
    }

    .whats-new-timeline-content {
        grid-column: 2;
    }
}

/* Form errors section -- pairs with @Html.ValidationSummary(false, ..., new { @class = "... validation-summary-alert" }).
   ASP.NET Core toggles the rendered <div> between .validation-summary-errors (when ModelState has errors)
   and .validation-summary-valid (when it doesn't), so these rules flip on and off automatically.
   The .validation-summary-alert hook is what scopes the alert styling to validation summaries we've
   opted in -- other ValidationSummary calls elsewhere in the app are unaffected. */
.validation-summary-alert.validation-summary-errors {
    display: block;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 1rem;
    border: 1px solid #f5c2c7;
    border-radius: 0.375rem;
    background-color: #f8d7da;
    color: #842029;
}

.validation-summary-alert.validation-summary-errors ul {
    margin: 0.25rem 0 0 1.25rem;
    padding: 0;
}

/* Global cleanup for every MVC ValidationSummary, including the asp-validation-summary
   Tag Helpers that wear Bootstrap's .alert.alert-danger (no .validation-summary-alert
   opt-in). Bootstrap's reboot leaves <ul> with margin-bottom: 1rem, which stacks on
   top of the alert's own padding-bottom and leaves a visible gap under the message.
   Zero the bottom margin so the alert hugs its content. */
.validation-summary-errors ul {
    margin-bottom: 0;
}

/* MVC Core's ValidationSummary helpers always emit an <ul><li>...</li></ul>, even
   when there's only a single error. That lone bullet looks orphaned. Strip the
   marker and pull the <li> back over to where the bullet would have sat, so a
   one-error summary reads as a plain sentence while multi-error summaries keep
   their list shape. Scoped on .validation-summary-errors (which MVC stamps on
   automatically) so this catches every validation summary -- both the
   .validation-summary-alert opt-ins above and the asp-validation-summary
   Tag Helpers that wear Bootstrap's .alert.alert-danger instead. */
.validation-summary-errors ul li:only-child {
    list-style: none;
    margin-left: -1.25rem;
}

.validation-summary-alert.validation-summary-valid {
    display: none;
}

/* Per-field inline validation messages. MVC Core stamps `field-validation-error`
   onto the message span when ModelState has an error for that field, and
   `field-validation-valid` (empty content) otherwise. BS3 used `.help-block` to
   paint these red+small; BS5 left that class unstyled, so we re-establish the
   shape here.

   The class is global rather than scoped to .profile-edit-form because the
   underlying ValidationMessageFor helper is used app-wide; gating it on a single
   surface would just mean each new form has to re-invent the same wheel. */
.field-validation-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-danger, #dc3545);
}

.field-validation-valid {
    display: none;
}

/* When jquery-validation-unobtrusive flips an <input> to invalid client-side it
   adds `input-validation-error`. Mirror BS5's `.is-invalid` styling so server-
   side and client-side errors look the same.

   Scoped to inputs/selects/textareas so it doesn't accidentally redden labels
   or unrelated decorated elements. */
.input-validation-error,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: var(--bs-danger, #dc3545);
}

.input-validation-error:focus,
input.input-validation-error:focus,
select.input-validation-error:focus,
textarea.input-validation-error:focus {
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Free-standing Kendo SVG icons that ride inline with text or links.
   When Html.KendoSvgIcon(...) lands outside a Kendo widget (e.g. inside an
   anchor or heading), the bare <svg viewBox="..."> renders at its 300x150
   CSS intrinsic default with a default fill -- a giant black blob.
   .wh-svg-icon-inline normalizes the SVG to 1em / currentColor so it inherits
   the surrounding text color (BS5 link blue inside an <a>, or the parent
   text color elsewhere) and lines up with the text baseline the way a
   Font Awesome <i> glyph used to.
   .wh-svg-icon-lg mirrors FA's fa-lg sizing for spots that want the icon
   visibly larger than the surrounding text -- e.g. the "Learn More" question
   marks emitted by HtmlHelperExtensions.MoreAboutLink. */
.wh-svg-icon-inline {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

.wh-svg-icon-inline.wh-svg-icon-lg {
    font-size: 1.33333em;
    vertical-align: -0.225em;
}

.wh-svg-icon-inline.wh-svg-icon-xl {
    font-size: 2.5em;
    vertical-align: -0.225em;
}

/* ============================================================================
   Profile edit form (Views/Profile/_EditForm.cshtml + sibling partials)
   plus the profile-approval synced-edits search form
   (Views/ProfileApproval/_SearchForm.cshtml).

   1.0 lived on Bootstrap 3 where `.form-group` auto-applied `margin-bottom`
   and where bare `.col-*` cols outside a `.row` still rendered. BS5 dropped
   both behaviors: `.form-group` no longer adds margin, and a stray `col-*`
   collapses without a `.row` parent. The partial chain has been migrated to
   BS5 `.row` + `.col-*` markup, but the FormGroupFor / FormGroupForPrimary
   helpers still emit `.form-group` on the wrapping div, so we restore the
   BS3-shaped vertical rhythm with a *scoped* rule. Same goes for the
   `.control-label` class our label helpers emit -- BS3 styled it, BS5 does
   not -- so we give it the same display rhythm here.
   Scoped to .profile-edit-form (and its sibling .profile-approval-search-form
   marker on the synced search form) so this doesn't ripple out to other
   surfaces. The trailing rules below (h6, .add-address, .k-dialog-titlebar,
   .action-Delete, .undo-link) stay scoped to .profile-edit-form alone --
   they're profile-edit specifics that have no business on the search form. */
.profile-edit-form .form-group,
.profile-approval-search-form .form-group {
    margin-bottom: 1rem;
}

.profile-edit-form .control-label,
.profile-approval-search-form .control-label {
    display: inline-block;
    margin-bottom: .25rem;
    font-weight: 500;
}

.profile-edit-form h6 {
    margin-top: .25rem;
    margin-bottom: .5rem;
    font-weight: 600;
}

/* Add-address / Add-phone / Add-email round-trip buttons. 1.0 styled them as
   subtle full-width tinted buttons; BS5's btn-outline-secondary is the closest
   stock equivalent but the markup retains the legacy `.add-address` hook so
   any future per-org theming can target it. */
.profile-edit-form .add-address {
    width: 100%;
}

/* The opt-out warning kendoDialog renders into the form's #dialog div.
   1.0 hid the titlebar so the dialog looked like a borderless prompt. */
.profile-edit-form div.k-dialog-titlebar {
    display: none;
}

/* 1.0 parity (Whitehurst-1.0/Whitehurst/Content/adjace-directory.scss lines 559 + 580):
   contact rows whose EditAction is Delete are dropped from the visual flow, and
   the "Deleted (Undo)" stub that ships in _ElectronicAddresses.cshtml is hidden
   unconditionally -- 1.0 ships the markup as a stub for a never-finished
   client-side undo feature, so it should not render in either app.

   These class names (.action-Delete, .undo-link) are generic enough that they
   could collide with a future audit-log surface that paints rows in colors
   keyed off the same enum (the 1.0 audit view does exactly this), so we scope
   the rules to .profile-edit-form. */
.profile-edit-form .action-Delete {
    display: none;
}

.profile-edit-form .undo-link {
    display: none;
}

/* 1.0 parity (Whitehurst-1.0/Whitehurst/Content/adjace-directory.scss lines 593-597):
   PCO site administrators can't have their phones / emails edited or added from
   this app -- both must round-trip through Planning Center People for security
   reasons. _PcoAdministratorDisabledLegend prints the "fields are disabled
   because {Name} is an organization administrator" callout, the
   _ElectronicAddresses / _PhoneNumbers partials switch to their read-only
   branches via the CanEditX ViewBag flags, and this rule hides the now-
   pointless "Add Email Address" and "Add Phone Number" buttons so the UI
   doesn't promise something it can't deliver. Street-address Add stays visible
   because admins *can* add street addresses through this app.

   Scoped via `.administrator-profile-form` which _EditForm stamps on the
   wrapper div whenever `Model.IsPcoSiteAdministrator` is true. */
.administrator-profile-form #AddElectronicAddress-button,
.administrator-profile-form #AddPhoneNumber-button {
    display: none;
}