/* =============================================================
   accessibility.css
   WCAG 2.2 Level AA overrides for BeeWhere
   Load order: after bootstrap.min.css, kendo bootstrap-main.css, site.css
   ============================================================= */

/* -------------------------------------------------------------
   Typography — Heading hierarchy
   Replaces Bootstrap 5.3.8 defaults to enforce visual structure
   WCAG 1.3.1 Info and Relationships (Level A)
   ------------------------------------------------------------- */
h1 { 
	font-size: 2rem; 
}

h2 { 
	font-size: 1.75rem;
}

h3 { 
	font-size: 1.5rem; 
}

h4 { 
	font-size: 1.25rem; 
}

h5 { 
	font-size: 1.25rem; 
}

h6 { 
	font-size: 1rem; 
}

/* -------------------------------------------------------------
   Body text color
   #212529 meets WCAG 1.4.3 contrast on white (#fff) at 16:1
   WCAG 1.4.3 Contrast Minimum (Level AA)
   ------------------------------------------------------------- */
body,
p {
    color: #212529;
}

/* -------------------------------------------------------------
   Interactive color — brand green replaces Bootstrap blue
   #2E7D2E on white = 5.1:1 — passes WCAG 1.4.3 (Level AA)
   Hover #1F571F on white = 8.2:1
   White text on #2E7D2E background = 5.1:1
   Applies to: links, grid buttons, action-btn border/hover
   WCAG 1.4.1 Use of Color, 1.4.3 Contrast Minimum (Level AA)
   ------------------------------------------------------------- */

/* Links */
a {
    color: #2E7D2E;
}

a:hover {
    color: #1F571F;
}

/* Kendo grid inline links */
.grid-button,
.btn-kendo-grid-link {
    color: #2E7D2E !important;
}

.grid-button:hover,
.btn-kendo-grid-link:hover {
    color: #1F571F !important;
}

/* -------------------------------------------------------------
   Action buttons
   ------------------------------------------------------------- */
.action-btn {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 2px solid #2E7D2E;
    border-radius: 15px;
    padding: 12px 15px;
    background: #fff;
    color: #2E7D2E;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.action-btn:hover {
    background: #1F571F;
    color: #ffffff;
}

/* -------------------------------------------------------------
   btn-link — used in navbar for Help Resources and PDF links
   #2E7D2E on #f4f4f4 background = 4.8:1 — passes WCAG 1.4.3 (Level AA)
   ------------------------------------------------------------- */
.btn-link {
    color: #2E7D2E;
    font-weight: bold;
    text-decoration: none;
}

.btn-link:hover {
    color: #1F571F;
    font-weight: bold;
    text-decoration: none;
}

/* -------------------------------------------------------------
   Info-button override 
   ------------------------------------------------------------- */
.btn-info {
    background-color: #2E7D2E;
    border-color: #2E7D2E;
    color: #ffffff;
    font-weight: bold;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info:active:focus {
    background-color: #1F571F;
    border-color: #1F571F;
    color: #ffffff;
}

/* -------------------------------------------------------------
   Primary-button override 
   ------------------------------------------------------------- */
.btn-primary {
    background-color: #2E7D2E;
    border-color: #2E7D2E;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #1F571F;
    border-color: #1F571F;
    color: #ffffff;
}

.btn-primary:focus,
.btn-primary:focus-visible {
    outline: 3px solid #1F571F;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(74, 124, 47, 0.4);
}

.btn-outline-primary {
    --bs-btn-color: #2E7D2E;
    --bs-btn-border-color: #2E7D2E;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2E7D2E;
    --bs-btn-hover-border-color: #1F571F;
    --bs-btn-focus-shadow-rgb: 46, 125, 46;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1F571F;
    --bs-btn-active-border-color: #1F571F;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #2E7D2E;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #2E7D2E;
}

/* -------------------------------------------------------------
   Danger-button override 
   ------------------------------------------------------------- */
.btn-danger {
    background-color: #DB0000;
    border-color: #DB0000;
    color: #ffffff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: #B30000;
    border-color: #B30000;
    color: #ffffff;
}

/* -------------------------------------------------------------
   Callout notes 
   ------------------------------------------------------------- */
.alert-secondary {
    font-size: 0.9rem;
    color: #212529;
    background-color: #f4f4f4;
    border-color: #f4f4f4;
    border-left: 6px solid #e8ac1a;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

/* Same callout shape as .alert-secondary, but a red left border for
   content-unavailable states that deserve a bit more emphasis than a
   plain informational aside (e.g. County Registrations' narrow-screen
   disclaimer) — reuses the same red as .btn-danger. */
.alert-danger {
    font-size: 0.9rem;
    color: #212529;
    background-color: #f4f4f4;
    border-color: #f4f4f4;
    border-left: 6px solid #DB0000;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.callout-title {
    font-size: 16px;
}

/* -------------------------------------------------------------
   Section dividers — gold rule, e.g. above yearly registration
   sections on the Beekeeper Home page
   ------------------------------------------------------------- */
.gold-divider {
    border: none;
    border-top: 2px solid #E8AC1A;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    opacity: 1;
}

/* -------------------------------------------------------------
   Home page — jumbotron heading
   Visually sized to match surrounding content
   WCAG 1.3.1 Info and Relationships (Level A)
   ------------------------------------------------------------- */
.about-content h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529;
}

/* -------------------------------------------------------------
   Home page — login hero background
   Fills the screen below the navbar instead of cropping tight
   around the login/helpful-links cards. min-height (not height)
   so it never clips content that grows taller than the viewport
   on mobile, where the two cards stack full-width. dvh line is a
   progressive enhancement for browsers that support it (more
   reliable than vh on mobile as the address bar shows/hides).
   ------------------------------------------------------------- */
.login-hero {
    background-image: url(/Content/Images/bee-hive-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 30rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------------------
   Home page — hero cards wider on desktop
   The Login / Helpful Links / Roles cards share an inline
   max-width: 500px, sized for mobile where the column is full
   width. At lg+ (992px) the container has more room to spare
   than that, especially at xl/xxl where the two columns can
   each be 550-650px wide, so the 500px cap left the Helpful
   Links button text ("2027 Registration Fees...") wrapping to a
   second line despite the extra space. Widens the cap at lg+
   only; mobile/tablet keep the original 500px value. !important
   is needed to beat the inline style's specificity.
   ------------------------------------------------------------- */
@media (min-width: 992px) {
    .login-hero .card {
        max-width: 620px !important;
    }
}

/* -------------------------------------------------------------
   Home page — hero card header spacing
   The "Login to Beewhere" / "Helpful Links" / "Your Beewhere
   Roles" card headers sat flush against Bootstrap's default
   card-header padding. Small top/bottom bump for breathing room.
   Scoped to .login-hero so it doesn't touch the other
   .card-header elements in this page's modals.
   ------------------------------------------------------------- */
.login-hero .card-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* -------------------------------------------------------------
   Navbar column spacing
   NavBar.cshtml's two columns had no top/bottom padding of their
   own, only inherited from dead Site.css rules (.navbar-light,
   .navbar-link, .navbar-brand) that target classes no longer used
   in the current Bootstrap 5 navbar markup. Restores breathing
   room around the logo and user-info areas.
   ------------------------------------------------------------- */
.navbar-col {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* -------------------------------------------------------------
   Skip to main content
   ------------------------------------------------------------- */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 0;
    background: #2E7D2E;
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    font-size: 1rem;
    text-decoration: none;
}

.skip-nav:focus {
    top: 0;
}

/* -------------------------------------------------------------
   Banner buttons to meet color contrast ratio
   ------------------------------------------------------------- */
.banner-btn {
    padding: 12px 15px !important;
    line-height: 20px !important;
    /*padding: 0.5rem 1rem;*/
}

.banner-btn:hover {
    color: #212529;
    background: #E8AC1A;
    border-color: #212529;
}

.banner-btn:focus,
.banner-btn:focus-visible {
    color: #212529;
    background: #E8AC1A;
    border-color: #212529;
    outline: 2px solid #212529;
    outline-offset: 2px;
}

/* -------------------------------------------------------------
   Beekeeper Home — Fee Info 
   ------------------------------------------------------------- */
.fee-info-btn {
    width: fit-content;
}

@media (min-width: 576px) {
    .fee-info-btn {
        width: 400px;
    }
}

/* -------------------------------------------------------------
   Bee Broker — header help buttons
   ------------------------------------------------------------- */
.broker-header-btn {
    width: 18.125rem;   /* 290px, fits the longer label on one line */
    max-width: 100%;
}

@media (min-width: 768px) {
    .broker-header-btn {
        width: 15.625rem;
    }

    .broker-header-btn--fit {
        width: auto;
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------
   Beekeeper Home / Registration info label column
   Fixed 230px (14.375rem) at tablet/desktop so labels and values
   align in neat columns. Below sm (576px) there usually isn't
   room for both the label and a longer value on one line, and
   whether they happened to fit was inconsistent row-to-row
   depending on value length (short values like "12" stayed
   beside their label, longer ones like an email address or
   "Registered - Unpaid" wrapped below it) — so here it drops to
   full width, forcing label and value to stack the same way on
   every row. Moved out of Index.cshtml's inline <style> block
   (was raw px there); rem here also scales with browser zoom.
   ------------------------------------------------------------- */
.col-beekeeper-fixed {
    width: 14.375rem;
}

@media (max-width: 575.98px) {
    .col-beekeeper-fixed {
        width: 100%;
    }
}

.col-beecheck-fixed {
    width: 12rem;
}

@media (max-width: 575.98px) {
    .col-beecheck-fixed {
        width: 100%;
    }
}

/* -------------------------------------------------------------
   Accordion header color contrast
   ------------------------------------------------------------- */
.accordion-button:not(.collapsed) {
    color: #212529;
    background-color: #ecedef;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

/* -------------------------------------------------------------
   Kendo grid overrides
   ------------------------------------------------------------- */
.k-pager .k-selected {
    background-color: #2E7D2E !important;
    border-color: #2E7D2E !important;
    color: #ffffff !important;
}

.k-pager .k-selected:focus {
    box-shadow: 0 0 0 2px #2E7D2E;
}

.k-grid:focus-within {
    outline: 2px solid #2E7D2E !important;
    outline-offset: 2px !important;
}

/* A button's label should never be silently clipped by a grid cell's
   ellipsis truncation, however tight the column width. Exempts cells
   like County Registrations' "Pay Now" / "Print Certificate" buttons. */
.k-grid td:has(.grid-button) {
    overflow: visible;
    text-overflow: clip;
}

/* -------------------------------------------------------------
   Kendo grid — column filter icons hidden below md (768px)
   On landscape phones the filter icons eat ~30px of each header,
   squeezing the data columns. Page-level filters (e.g. the Bee
   Broker Pending/Approved/All radios) and header sorting remain
   available. Opt-in per grid via the wrapper class.
   Selector mirrors Kendo's own (.k-grid .k-grid-header
   .k-grid-header-menu, which sets display: flex) plus the wrapper
   class, so it wins on specificity without !important.
   ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .grid-filters-desktop-only .k-grid .k-grid-header .k-grid-header-menu,
    .grid-filters-desktop-only .k-grid .k-grid-header .k-grid-filter {
        display: none;
    }
}

/* -------------------------------------------------------------
   Button as Icons
   ------------------------------------------------------------- */
.btn-icon {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}