/* Bootstrap Overrides for Harry Crews Site
 * Maintains tan/beige aesthetic while using Bootstrap components
 */

/* ===========================
   Navbar Customization
   =========================== */

/* Navbar branding */
.navbar-brand {
  font-family: verdana, geneva, sans-serif;
  font-weight: bold;
  color: var(--text-body) !important;
}

.brand-main {
  font-size: 16px;
}

.brand-subtitle {
  font-size: 11px;
  margin-left: 0.5rem;
  color: #555;
}

/* Navbar borders - matching original design */
.navbar {
  border-bottom: 1px solid var(--border-dark);
  box-shadow: 0 1px 0 var(--border-medium), 0 2px 0 var(--border-light);
}

/* Search form in navbar */
.navbar-search .form-control {
  font-family: verdana, geneva, sans-serif;
  font-size: 11px;
  border: 1px solid var(--border-dark);
}

.navbar-search .btn {
  font-family: verdana, geneva, sans-serif;
  font-size: 11px;
  background: var(--bg-content);
  border: 1px solid var(--border-dark);
  color: var(--text-body);
}

.navbar-search .btn:hover {
  background: #f0f0f0;
}

/* Hamburger toggle button styling */
.navbar-toggler {
  border-color: var(--border-dark);
}

.navbar-toggler:focus {
  box-shadow: none;
  border-color: var(--border-dark);
}

/* ===========================
   Offcanvas Menu Customization
   =========================== */

.offcanvas {
  border-left: 1px solid var(--border-dark);
}

.offcanvas-header {
  border-bottom: 2px solid var(--border-dark);
}

.offcanvas-title {
  font-family: verdana, geneva, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-body);
}

.offcanvas-body {
  padding: 1.5rem;
}

/* Navigation headings in offcanvas - match sidebar styling */
.offcanvas .nav-heading {
  font-family: verdana, geneva, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-body);
  margin-bottom: 0;
  margin-top: 0;
}

/* Navigation links in offcanvas - match sidebar styling */
.offcanvas .nav-item {
  list-style: none;
  line-height: 21px;
}

.offcanvas .nav-link {
  font-family: verdana, geneva, sans-serif;
  font-size: 14px;
  color: var(--text-body);
  text-decoration: none;
  padding: 0;
  display: inline;
  background-color: transparent;
}

.offcanvas .nav-link:hover {
  text-decoration: underline;
  background-color: transparent;
}

/* Mobile search in offcanvas */
.offcanvas .input-group {
  gap: 0.5rem; /* 8px spacing between input and button */
}

.offcanvas .input-group .form-control,
.offcanvas .input-group .btn {
  font-family: verdana, geneva, sans-serif;
  font-size: 11px;
}

.offcanvas .input-group .btn {
  background: var(--bg-content);
  border: 1px solid var(--border-dark);
  color: var(--text-body);
}

.offcanvas hr {
  margin: 1rem 0;
  border-color: var(--border-medium);
}

/* ===========================
   Bootstrap Grid Adjustments
   =========================== */

/* Ensure sidebar and content maintain proper styling */
.sidebar {
  padding: 0;
  background-color: var(--bg-body);
}

.content-area {
  padding: 0;
}

/* ===========================
   Responsive Adjustments
   =========================== */

/* Ensure body has space for fixed navbar */
body {
  padding-top: 0;
}

/* Adjust main layout for Bootstrap grid */
@media (min-width: 992px) {
  .row {
    margin: 0;
  }
  
  /* Maintain sidebar width similar to original */
  .col-lg-3 {
    flex: 0 0 300px;
    max-width: 300px;
    order: 1;
  }
  
  /* Content takes remaining space - use col-lg-9 to properly fill */
  .col-lg-9 {
    flex: 1;
    max-width: calc(100% - 300px);
    order: 2;
  }
  
  /* Add dotted border between sidebar and content */
  .content-area {
    border-left: 1px dotted var(--border-medium);
  }
}

/* Mobile adjustments */
@media (max-width: 991px) {
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .col-12 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===========================
   Component Compatibility
   =========================== */

/* Ensure menu components still work with custom styles */
.menu-section {
  margin-bottom: 1rem;
}

.menu-heading {
  font-family: verdana, geneva, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-body);
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-list li {
  line-height: 21px;
}

.menu-list a {
  font-family: verdana, geneva, sans-serif;
  font-size: 14px;
  color: var(--text-body);
  text-decoration: none;
  display: inline;
}

.menu-list a:hover {
  text-decoration: underline;
}

/* ===========================
   Accessibility
   =========================== */

/* Ensure focus states are visible */
.navbar-toggler:focus,
.btn:focus,
.form-control:focus {
  outline: 2px solid #4a4a4a;
  outline-offset: 2px;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bg-content);
  color: var(--text-body);
  padding: 8px;
  text-decoration: none;
  border: 1px solid var(--border-dark);
  z-index: 100;
}

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