/* 
 * Accessibility Fixes for Dakota County Property Inquiry and Appeal Page
 * Addresses critical issues found in Lighthouse accessibility audit
 * Improves WCAG 2.1 AA compliance
 */

/* Fix color contrast issues for disabled navigation links */
ul#mainNav li.disabled a {
    color: #333333 !important; /* Changed from #999999 to meet 4.5:1 contrast ratio against #f1f1f1 background */
    background-color: #f1f1f1;
}

ul#mainNav li.disabled a:hover,
ul#mainNav li.disabled a:focus {
    color: #000000 !important; /* Ensure maximum contrast on interaction */
    background-color: #e0e0e0;
}

/* Fix color contrast for form labels on panels */
.panel-default .panel-body label {
    color: #333333 !important; /* Changed from #808080 to meet 4.5:1 contrast ratio against #f5f5f5 background */
    font-weight: bold;
}

/* Fix color contrast for radio button and checkbox labels */
.radio-inline,
.checkbox-inline {
    color: #333333 !important; /* Changed from #808080 to meet WCAG AA requirements */
}

/* Increase target size for checkbox and radio inputs to meet WCAG 2.1 AA (minimum 44x44px) */
input[type="checkbox"],
input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 2px;
    cursor: pointer;
    /* Create larger clickable area */
    position: relative;
}

/* Create larger clickable area around inputs */
input[type="checkbox"]::before,
input[type="radio"]::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    z-index: -1;
}

/* Ensure labels for radio/checkbox have proper spacing for larger targets */
.radio-inline,
.checkbox-inline {
    margin-bottom: 8px;
    padding-left: 32px; /* Account for larger checkbox/radio */
    line-height: 24px; /* Align with larger input */
    cursor: pointer;
    min-height: 24px; /* Ensure minimum touch target size */
    display: flex;
    align-items: center;
}

/* Improve focus indicators for keyboard navigation */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

/* Better button focus styles */
.btn:focus,
.btn:active:focus,
button:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

/* Ensure sufficient contrast for form validation messages */
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox {
    color: #8a181e !important; /* Darker red for better contrast */
}

/* Override Bootstrap's .text-danger with darker color for WCAG AA compliance */
/* Changed from rgb(240, 65, 36) to darker shade to meet 4.5:1 contrast ratio */
.text-danger {
    color: #641216 !important;
}

/* Fix email link contrast in error messages */
/* Ensures sufficient contrast against light pink background rgb(248, 215, 218) */
    .text-danger a,
    .alert-danger a {
        color: #641216 !important; /* Dark red for better contrast on light backgrounds */
        text-decoration: underline;
    }

.text-danger a:hover,
.text-danger a:focus,
.alert-danger a:hover,
.alert-danger a:focus {
    color: #b12028 !important; /* Even darker on interaction */
    text-decoration: underline;
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Fix heading hierarchy - ensure proper semantic structure */
h1, h2, h3, h4 {
    color: #333333;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.5em; line-height: 1.2; }
h2 { font-size: 2em; line-height: 1.3; }
h3 { font-size: 1.75em; line-height: 1.3; }
h4 { font-size: 1.5em; line-height: 1.4; }

/* Improve h5 styling for better semantic meaning */
h5 {
    color: #333333 !important;
    font-weight: bold;
    font-size: 1.25em;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0.5em;
}

/* Add skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    z-index: 10000;
    color: white;
    background-color: #000000;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
    color: white;
    text-decoration: underline;
}

/* Improve modal accessibility */
.modal-header .close {
    font-size: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    color: #333333;
}

.modal-header .close:hover,
.modal-header .close:focus {
    opacity: 1;
    color: #000000;
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Ensure proper contrast for panel backgrounds */
.panel-default > .panel-body {
    background-color: #ffffff !important; /* Ensure white background for maximum contrast */
}

.panel-default > .panel-heading {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* Improve alert contrast */
.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

/* Improve link styling for accessibility */
a {
    color: #0066cc;
    text-decoration: underline;
}

a:hover,
a:focus {
    color: #004499;
    text-decoration: underline;
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

a:visited {
    color: #551a8b;
}

/* Ensure proper spacing around interactive elements */
button, input, select, textarea {
    margin: 2px 0;
}

/* Improve form control focus styling */
.form-control:focus {
    border-color: #0066cc;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
    outline: 2px solid transparent;
}

/* Improve tab navigation styling */
.nav-pills > li > a:focus,
.nav-tabs > li > a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    background-color: #e6f3ff;
}

/* Ensure sufficient contrast for placeholders */
input::placeholder,
textarea::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* Improve table accessibility if any tables are added */
table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid #dee2e6;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #333333;
}

/* Screen reader only text utility class */
.sr-only {
    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;
}

/* Focus visible utility for modern browsers */
.focus-visible:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Responsive improvements for accessibility */
@media (max-width: 768px) {
    .skip-link {
        left: 10px;
        right: 10px;
        text-align: center;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    .radio-inline,
    .checkbox-inline {
        min-height: 48px;
        padding-left: 36px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-color: #000000 !important;
    }
    
    .panel-default {
        border: 2px solid #000000 !important;
    }
    
    .btn {
        border: 2px solid #000000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Nav tab spacing improvements */
#mainNav.nav-pills > li + li {
  margin-left: 14px; /* increase separation between tabs */
}

@media (min-width: 1200px) {
  #mainNav.nav-pills > li + li { margin-left: 18px; }
}

@media (max-width: 576px) {
  #mainNav.nav-pills > li + li { margin-left: 8px; }
}

/* also increase click padding for links a bit for comfort */
#mainNav.nav-pills > li > a {
  padding-left: 14px;
  padding-right: 14px;
}

/* FIX: Focus ring falling under adjacent tabs
   Replace outline with box-shadow, remove outline, and raise z-index */
#mainNav.nav-pills > li > a:focus,
#mainNav.nav-pills > li > a:focus-visible {
  outline: none !important;           /* suppress global a:focus outline */
  position: relative;                  /* create stacking context */
  z-index: 3;                          /* sit above neighboring tabs */
  box-shadow: 0 0 0 2px #0066cc;       /* accessible focus ring */
  border-radius: 4px;                  /* keep ring corners neat */
  background-color: #e6f3ff;          /* subtle focus background */
}

/* In case bootstrap "active" pill is focused, keep it above neighbors */
#mainNav.nav-pills > li.active > a,
#mainNav.nav-pills > li.active > a:focus,
#mainNav.nav-pills > li.active > a:focus-visible {
  position: relative;
  z-index: 4;
}

/* Compact, button-like styling for the search tabs (Individual/Business/Parcel Number) */
#searchTabs.nav-tabs {
  border-bottom: 0; /* remove default underline */
}

/* reduce separation so it looks natural */
#searchTabs.nav-tabs > li + li {
  margin-left: 8px; /* was 12px */
}

@media (min-width: 1200px) {
  #searchTabs.nav-tabs > li + li { margin-left: 12px; }
}

@media (max-width: 576px) {
  #searchTabs.nav-tabs > li + li { margin-left: 4px; }
}

/* base look = subtle button/pill */
#searchTabs.nav-tabs > li > a {
  padding: 8px 14px;            /* consistent touch area */
  background-color: #eeeeee;    /* subtle background */
  border: 1px solid #cccccc;    /* clear edge */
  border-radius: 6px;           /* pill-like */
  color: #333333;               /* readable text */
  text-decoration: none;        /* remove link underline inside tabs */
  line-height: 1.25;            /* ensure icon + text align nicely */
}

#searchTabs.nav-tabs > li > a:hover {
  background-color: #e3e3e3;
  text-decoration: none;
}

/* active state = slightly elevated and clearer border */
#searchTabs.nav-tabs > li.active > a,
#searchTabs.nav-tabs > li.active > a:hover,
#searchTabs.nav-tabs > li.active > a:focus {
  background-color: #ffffff;
  border-color: #0066cc;        /* matches focus color theme */
  color: #000000;
}

/* maintain accessible focus ring without overlapping neighbors */
#searchTabs.nav-tabs > li > a:focus,
#searchTabs.nav-tabs > li > a:focus-visible {
  outline: none !important;
  position: relative;
  z-index: 3;
  box-shadow: 0 0 0 2px #0066cc; /* accessible focus ring */
}

#searchTabs.nav-tabs > li.active > a,
#searchTabs.nav-tabs > li.active > a:focus,
#searchTabs.nav-tabs > li.active > a:focus-visible {
  position: relative;
  z-index: 4;
}

/* Search buttons: fixed minimum width and spacing from input */
#btnFindProperty,
#btnFindBusiness,
#btnFindParcel {
  min-width: 120px;           /* ~50% wider than default to fit 'Searching' */
  white-space: nowrap;        /* prevent wrap */
}

/* add a small gap so the focus ring isn't overlapped by the input */
#individualSearch .input-group > .btn,
#businessSearch  .input-group > .btn,
#parcelSearch    .input-group > .btn {
  margin-left: 8px;           /* space between input and button */
}

/* ensure button focus ring renders above neighbors */
#individualSearch .input-group > .btn:focus,
#businessSearch  .input-group > .btn:focus,
#parcelSearch    .input-group > .btn:focus {
  position: relative;
  z-index: 2;
  outline: none;                              /* use consistent focus ring */
  box-shadow: 0 0 0 2px #0066cc;              /* accessible focus ring */
}

.form-label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.form-label.required {
    /* Optional: styling for required fields */
}

/* Header logo container styles */
.header-logo-container {
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px 0 0 8px;
    width: 100%;
}

.logo-main {
    flex-shrink: 0;
}

.header-title {
    flex: 1;
    margin-left: 80px;
}

    .logo-main img,
    .header-title img {
        max-width: 100%;
        height: auto;
    }

/* Responsive breakpoints */
@media (max-width: 768px) {
    .header-logo-container {
        flex-direction: column;
        text-align: center;
    }

    .header-title {
        margin-left: 0;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .header-logo-container {
        gap: 10px;
    }

    .header-title {
        margin-top: 10px;
    }
}

/* Fix radio button label spacing and contrast */
.radio label {
    margin-left: 8px; /* Add space between radio button and label */
    color: #212529; /* Ensure sufficient contrast ratio (4.5:1 minimum) */
    font-weight: 500; /* Improve readability */
    display: flex;
    align-items: center; /* Vertically center radio and text */
    margin-bottom: 8px;
}

.radio input[type="radio"] {
    margin-right: 8px; /* Add space after radio button */
    flex-shrink: 0; /* Prevent radio from shrinking */
}

    /* Ensure focus states are visible */
    .radio input[type="radio"]:focus {
        outline: 2px solid #0066cc;
        outline-offset: 2px;
    }

/* Improve hover states */
.radio label:hover {
    color: #0056b3;
    cursor: pointer;
}

/* Larger text for radio button labels to match larger radio buttons */
.radio-text-large {
    font-size: 1.1em; /* Adjust size as needed */
    margin-left: 8px; /* Add spacing between radio and text */
    line-height: 1.4;
    vertical-align: middle;
    flex-grow: 1; /* Take remaining space */
}

/* Hide bootstrapValidator's hidden submit buttons from screen readers */
.bv-hidden-submit {
    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;
}

#submissionacknowledgement {
    clear: both !important;
    display: block !important;
    width: 100% !important;
}

/* Reduce legend height by 50% */
legend {
    padding: 5px 0 !important; /* Reduced from typical 10px */
    margin-bottom: 5px !important; /* Reduced bottom margin */
    line-height: 1.2 !important; /* Tighter line height */
    font-size: 1em !important; /* Ensure consistent font size */
}

/* For legends containing divs (like your form-label divs) */
legend .form-label {
    margin-bottom: 0 !important; /* Remove extra margin from nested divs */
    padding: 0 !important; /* Remove padding from nested elements */
    line-height: 1.2 !important; /* Match legend line height */
}

instruct {
    font-size: 1em !important; /* Ensure consistent font size */
}