/*
  accessibility.css
  Load this stylesheet AFTER kendo.bootstrap.min.css in your layout file:
  <link rel="stylesheet" href="~/Content/accessibility.css" />
*/

/* -------------------------------------------------------------
   Typography — Heading hierarchy
   ------------------------------------------------------------- */
h1 {
    font-size: 1.9rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/* -------------------------------------------------------------
   Skip to main content - update with school colors
   ------------------------------------------------------------- */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 0;
    background: #388535 !important;
    color: #fff !important;
    padding: 8px 16px;
    z-index: 9999;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
}

    /* Explicit focus ring so it looks the same on every layout
       (map pages load map.css / ArcGIS styles that differ). */
    .skip-nav:focus {
        top: 0;
        outline: 2px solid #212529;
        outline-offset: 0;
    }

/* -------------------------------------------------------------
   Kendo overrides
   ------------------------------------------------------------- */

/* ── Grid pager (Kendo 2026 markup) ──────────────────────────
   Kendo 2026 renders the pager as <div class="k-pager"> with
   <button class="k-button ..."> page numbers inside
   .k-pager-numbers; the current page carries .k-selected.
   Replaces the Kendo 2020 rules (.k-pager-wrap / .k-link /
   .k-state-selected), which no longer matched anything.
   Brand green numbers; filled green current page; visible
   2.4.7 focus ring (Kendo's own is an 8% tint inset shadow).
   ------------------------------------------------------------- */
.k-pager .k-pager-numbers .k-button {
    color: #2e7d2e;
}

    /* Kendo flat buttons set background: none !important, so the
       fills below need !important to take effect. */
    .k-pager .k-pager-numbers .k-button.k-button-flat:hover {
        color: #236023;
        background: #e8f2e8 !important;
    }

    .k-pager .k-pager-numbers .k-button.k-button-flat.k-selected,
    .k-pager .k-pager-numbers .k-button.k-button-flat.k-selected:hover {
        color: #ffffff;
        background: #2e7d2e !important;
    }

        .k-pager .k-pager-numbers .k-button.k-selected::before {
            opacity: 0;
        }

/* ── First / previous / next / last arrows and refresh ── */
.k-pager .k-pager-nav:not(.k-disabled),
.k-pager .k-pager-refresh {
    color: #2e7d2e;
}

/* ── Focus ring for every pager control ── */
.k-pager .k-button:focus-visible {
    outline: 2px solid #2e7d2e;
    outline-offset: -2px;
    box-shadow: none;
}

/* ── "1 - 20 of 59 items" and page-size text ── */
.k-pager .k-pager-info,
.k-pager .k-pager-sizes {
    color: #666666;
}

/* -------------------------------------------------------------
   Kendo grid links (punch list 3b, approved 2026-08-06).
   Brand green #2e7d2e (passes 4.5:1 on white and on the zebra
   rows; #388538 doesn't on the striped rows), always underlined.
   ".k-grid td a" outranks both the site-wide a:link rule and
   Site.css's ".k-grid a { revert }", so one rule covers every
   grid: Schools, Manage Users, Notifications, Growers.
   No separate visited color (orange visited was trialed
   2026-10-15 and dropped: same lightness as the green, so it
   doesn't read for color-blind users, and orange is the site's
   accent color, not a link color).
   Kendo darkens a hovered row 8%, which drops #2e7d2e to
   ~4.39:1, so links on a hovered row use the darker #236023.
   Hover cue = underline removed (shape change, not color).
   ------------------------------------------------------------- */
.k-grid td a:link,
.k-grid td a:visited {
    color: #2e7d2e;
    text-decoration: underline;
}

/* Row hovered: darker green keeps 4.5:1 on Kendo's darker row */
.k-grid .k-table-row:hover td a:link,
.k-grid .k-table-row:hover td a:visited {
    color: #236023;
}

/* Link hovered: underline drops away as the hover cue */
.k-grid td a:hover {
    text-decoration: none;
}

    .k-grid td a:focus-visible {
        outline: 2px solid #2e7d2e;
        outline-offset: 2px;
    }

/* -------------------------------------------------------------
   Content links site-wide (design review 2026-10-15).
   Site.css sets every link orange with no underline, which
   breaks "green = click here" and fails 1.4.1 for links inside
   body text. Content links in the views are plain <a> with no
   class; styled components (nav-link, skip-nav, btn, Kendo k-link
   headers) always have one, so ":not([class])" leaves them alone.
   Same treatment as grid links: green #2e7d2e, underlined; hover
   drops the underline and darkens to #236023.
   ------------------------------------------------------------- */
a:link:not([class]),
a:visited:not([class]) {
    color: #2e7d2e;
    text-decoration: underline;
}

a:hover:not([class]) {
    color: #236023;
    text-decoration: none;
}

a:not([class]):focus-visible {
    outline: 2px solid #2e7d2e;
    outline-offset: 2px;
}

/* -------------------------------------------------------------
   Home dashboard tiles: the whole title + description is one block
   link (not a link inside text), so no green/underline here — the
   title keeps its orange heading style, and hovering the tile
   underlines just the title as the cue. Scoped to links sitting
   directly in a tile column (card + icon links); inline links
   inside a tile's paragraph (e.g. Fact Sheet's CDPR link) keep
   the green content-link style.
   ------------------------------------------------------------- */
.ss-school-container .row > div > a:link,
.ss-school-container .row > div > a:visited,
.ss-school-container .row > div > a:hover {
    color: inherit;
    text-decoration: none;
}

    .ss-school-container .row > div > a:hover .ss-dashboard-title {
        text-decoration: underline;
    }

.DisplayFilter {
    accent-color: #2e7d2e
}

    .DisplayFilter:focus {
        outline: 2px solid #2e7d2e;
        outline-offset: 2px;
    }

/* map key */
.ss-map-legend-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 0;
    margin: 8px 0;
}

/* grid wrapper */
.ss-grid-scroll-wrapper {
    overflow-x: auto;
}

/* Growers page dropdown — keeps Kendo's fixed-width wrapper from overflowing narrow viewports (1.4.10 Reflow) */
.ss-grower-dropdown-wrap .k-dropdown {
    max-width: 100%;
}

/* -------------------------------------------------------------
   Login page logo — scale down on narrow viewports instead of
   running off-screen (1.4.10 Reflow). Restored: rule was in the
   July 2026 accessibility.css and was lost in the BS5 upgrade.
   ------------------------------------------------------------- */
.logo-placement img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------
   Modals — reset inherited alignment so a modal nested inside a
   text-end / float wrapper doesn't right-align its content
   (punch list 6c, Contact CAC modal).
   ------------------------------------------------------------- */
.modal-content {
    text-align: left;
}

/* -------------------------------------------------------------
   Custom buttons — Bootstrap 5 drives :hover/:focus/:active from
   --bs-btn-* variables, which default to transparent for custom
   classes, so the buttons lost their fill/border on hover and
   focus (punch list 1, Open #31). Define every state here.
   2.4.7 Focus Visible: explicit focus ring in brand green.
   ------------------------------------------------------------- */
.btn-ss-primary,
.btn-login {
    --bs-btn-color: #fff;
    --bs-btn-bg: #b84d00;
    --bs-btn-border-color: #b84d00;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9a4000;
    --bs-btn-hover-border-color: #9a4000;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9a4000;
    --bs-btn-active-border-color: #9a4000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #b84d00;
    --bs-btn-disabled-border-color: #b84d00;
}

.btn-ss-sucess {
    --bs-btn-color: #fff;
    --bs-btn-bg: #388538;
    --bs-btn-border-color: #388538;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #236023;
    --bs-btn-hover-border-color: #236023;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #236023;
    --bs-btn-active-border-color: #236023;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #388538;
    --bs-btn-disabled-border-color: #388538;
}

.btn-ss-danger,
.btn-ss-delete {
    --bs-btn-color: #fff;
    --bs-btn-bg: #DB0000;
    --bs-btn-border-color: #DB0000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b00000;
    --bs-btn-hover-border-color: #b00000;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b00000;
    --bs-btn-active-border-color: #b00000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #DB0000;
    --bs-btn-disabled-border-color: #DB0000;
}

.btn-ss-edit {
    --bs-btn-color: #388538;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #767676;
    --bs-btn-hover-color: #236023;
    --bs-btn-hover-bg: #e8f2e8;
    --bs-btn-hover-border-color: #388538;
    --bs-btn-active-color: #236023;
    --bs-btn-active-bg: #e8f2e8;
    --bs-btn-active-border-color: #388538;
    --bs-btn-disabled-color: #388538;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #767676;
}

.btn-ss-primary:focus-visible,
.btn-ss-sucess:focus-visible,
.btn-ss-danger:focus-visible,
.btn-ss-delete:focus-visible,
.btn-ss-edit:focus-visible,
.btn-login:focus-visible {
    outline: 2px solid #2e7d2e;
    outline-offset: 2px;
    box-shadow: none;
}

/* -------------------------------------------------------------
   Global nav bar — redesign approved 2026-08-06 (punch list #4),
   revised 2026-10-15: no active-tab underline, roomier bar,
   heavier 5px orange rule.
   Links: brand green, no underline (nav links are identified by
   their position in the nav bar, so 1.4.1 doesn't require one);
   underline on hover.
   Current page (set by each view's script via .active /
   aria-current): black, bold. The weight difference means it
   doesn't rely on color alone (1.4.1).
   ------------------------------------------------------------- */
.navbar {
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 10px;
    border-bottom: 5px solid #b84d00;
}

.navbar .nav-link {
    color: #2e7d2e;
    text-decoration: none;
}

    .navbar .nav-link:hover {
        color: #236023;
        text-decoration: underline;
    }

    .navbar .nav-link.active {
        color: #000;
        font-weight: 700;
        text-decoration: none;
    }

    .navbar .nav-link:focus-visible {
        outline: 2px solid #2e7d2e;
        outline-offset: 2px;
        box-shadow: none;
    }

/* Collapsed (mobile) menu: indicator on the left edge instead */
@media (max-width: 991.98px) {
    .navbar {
        padding-top: 8px;
        padding-bottom: 8px;
    }

        .navbar .nav-link.active {
            border-left: 3px solid #b84d00;
            padding-left: 8px;
        }
}

/* Space between the nav bar and page content */
.navbar + .body-content {
    margin-top: 22px;
}

/* -------------------------------------------------------------
   Skip-to-content target (2.4.1 Bypass Blocks, Open #29 / #32).
   #main-content has tabindex="-1" so the skip link moves focus
   into it; it's a container, not a control, so no focus ring.
   ------------------------------------------------------------- */
#main-content:focus {
    outline: none;
}