/* CSS Variables */
:root {
  --color-dark-blue: #001A49;
  --color-dark-blue-light: #002a6b;
  --color-dark-blue-lighter: #003a8d;
}

/* Dark Blue Utility Classes */
.bg-dark-blue {
  background-color: var(--color-dark-blue) !important;
}

.bg-dark-blue-light {
  background-color: var(--color-dark-blue-light) !important;
}

.bg-dark-blue-lighter {
  background-color: var(--color-dark-blue-lighter) !important;
}

.text-dark-blue {
  color: var(--color-dark-blue) !important;
}

.text-dark-blue-light {
  color: var(--color-dark-blue-light) !important;
}

.border-dark-blue {
  border-color: var(--color-dark-blue) !important;
}

.hover\:bg-dark-blue:hover {
  background-color: var(--color-dark-blue) !important;
}

.hover\:text-dark-blue:hover {
  color: var(--color-dark-blue) !important;
}

/* Body Content Link Styles - Only for rich text content */
.prose a,
.prose-lg a,
.prose-xl a {
  color: #001A49 !important;
  text-decoration: none !important;
  background-image: linear-gradient(to right, #001A49 100%, #001A49 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 1.15em;
  transition: background-size 0.2s;
  position: relative;
}

.prose a:hover,
.prose-lg a:hover,
.prose-xl a:hover {
  color: #001A49 !important;
  background-size: 100% 2px;
  background-position: 0 1.18em;
  text-decoration: none !important;
}

/* Wagtail Userbar Enhancements */
.wagtail-userbar {
  transition: all 0.3s ease !important;
  left: 0 !important;
  right: auto !important;
}

.wagtail-userbar.collapsed {
  transform: translateY(-100%) !important;
}

.wagtail-userbar-toggle {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  background: #43b1b0 !important;
  color: white !important;
  border: none !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  font-size: 16px !important;
  border-radius: 0 0 4px 0 !important;
  transition: background-color 0.3s ease !important;
}

.wagtail-userbar-toggle:hover {
  background: #3a9e9d !important;
}

.wagtail-userbar-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: none !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.3s ease !important;
}

.wagtail-userbar-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Floating Ask Wally Button */
.ask-wally-floating {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 60px !important;
  height: 60px !important;
  background: #001A49 !important;
  border: 2px solid #ffce00 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 999 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 26, 73, 0.3) !important;
}

.ask-wally-floating:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 16px rgba(0, 26, 73, 0.4) !important;
}

.ask-wally-floating img {
  width: 32px !important;
  height: 32px !important;
  filter: brightness(0) invert(1) !important;
}

/* Hide Ask Wally floating button on home page */
.home-page .ask-wally-floating {
  display: none !important;
}

/* Breadcrumb Navigation - High specificity to override conflicts */
.breadcrumb-nav {
  @apply text-sm text-gray-500 mb-4;
  overflow: hidden !important;
  display: block !important;
}

.breadcrumb-nav ol {
  @apply flex items-center flex-nowrap overflow-hidden;
  white-space: nowrap !important;
  min-width: 0;
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.breadcrumb-nav li {
  @apply flex items-center flex-shrink-0;
  white-space: nowrap !important;
  min-width: 0;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  float: left !important;
}

.breadcrumb-nav a {
  @apply hover:text-blue-600 transition-colors duration-200;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block !important;
  float: left !important;
}

.breadcrumb-nav a:hover {
  @apply underline;
}

/* Home icon styling */
.breadcrumb-nav .home-link {
  @apply flex items-center justify-center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: inline-block !important;
  float: left !important;
}

.breadcrumb-nav .home-link:hover {
  @apply bg-gray-100;
  transform: scale(1.05);
}

.breadcrumb-nav .home-link svg {
  @apply text-gray-500;
  transition: color 0.2s ease;
  display: inline-block !important;
}

.breadcrumb-nav .home-link:hover svg {
  @apply text-blue-600;
}

.breadcrumb-nav .separator {
  @apply text-gray-400 flex-shrink-0;
  white-space: nowrap !important;
  display: inline-block !important;
  margin: 0 8px !important;
  font-weight: 300;
  float: left !important;
}

.breadcrumb-nav .current-page {
  @apply text-gray-900 font-medium flex-shrink-0;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block !important;
  float: left !important;
}

/* Ensure no line breaks in breadcrumbs - override everything */
.breadcrumb-nav * {
  white-space: nowrap !important;
  display: inline-block !important;
}

.breadcrumb-nav ol,
.breadcrumb-nav li,
.breadcrumb-nav a,
.breadcrumb-nav span {
  display: inline-block !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  float: left !important;
}

/* Clear float after breadcrumb */
.breadcrumb-nav::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive breadcrumbs */
@media (max-width: 640px) {
  .breadcrumb-nav {
    @apply text-xs;
  }
  
  .breadcrumb-nav ol {
    @apply flex-wrap;
    white-space: normal !important;
    display: block !important;
  }
  
  .breadcrumb-nav .separator {
    @apply mx-1;
    margin: 0 4px !important;
  }
  
  .breadcrumb-nav li {
    white-space: normal !important;
    display: inline-block !important;
  }
  
  .breadcrumb-nav a {
    white-space: normal !important;
    max-width: 150px;
    display: inline-block !important;
  }
  
  .breadcrumb-nav .current-page {
    white-space: normal !important;
    max-width: 150px;
  }
  
  .breadcrumb-nav .home-link {
    width: 18px;
    height: 18px;
  }
  
  .breadcrumb-nav .home-link svg {
    width: 14px;
    height: 14px;
  }
}

/* Left nav selected state */
.sidebar-nav-active {
  background: #001A49 !important;
  color: #fff !important;
}

/* Hero Image Styles */
.hero-image-container {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
  border-radius: 15px;
  overflow: hidden;
}

.hero-image-container .hero-image,
.hero-image-container .gradient-overlay,
.hero-image-container .hero-text {
  border-radius: 15px;
}

.hero-image-container .gradient-overlay,
.hero-image-container .overlay {
  position: absolute;
  inset: 0;
  /* Gradient: transparent at top, solid dark blue at bottom */
  background: linear-gradient(to bottom, rgba(0,26,73,0) 0%, #001A49 100%);
  z-index: 1;
  border-radius: 15px;
}

.hero-image-container .hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  color: white;
  z-index: 2;
}

.hero-image-container .hero-text h1 {
  color: white !important;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-image-container .hero-text .prose,
.hero-image-container .hero-text .prose p {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .hero-image-container .hero-text {
    padding: 1.5rem;
  }
  .hero-image-container .hero-text h1 {
    font-size: 2rem;
  }
}

@media (max-width: 640px) {
  .hero-image-container .hero-text {
    padding: 1rem;
  }
  .hero-image-container .hero-text h1 {
    font-size: 1.75rem;
  }
}

/* WHHS Button Styles for StreamField Blocks */

/* Base button styles */
.btn {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm transition-colors duration-200;
}

/* Button sizes */
.btn-sm {
    @apply px-4 py-2 text-sm;
}

.btn-md {
    @apply px-6 py-3 text-base;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* Button variants */
.btn-primary {
    @apply text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

.btn-secondary {
    @apply text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500;
}

.btn-success {
    @apply text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500;
}

.btn-warning {
    @apply text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500;
}

.btn-danger {
    @apply text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
}

.btn-outline {
    @apply text-blue-600 bg-white border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

/* Alternating row background for all tables - lighter gray */
table tr:nth-child(even) {
    background-color: #F6F8FA;
}

/* Highlight row on hover */
table tr:hover {
    background-color: #F3F4F6;
}

/* Table header row: darker gray background, dark blue bold text */
table th {
    background-color: #E5EAF0;
    color: #001A49;
    font-weight: bold;
    padding-top: 0.75rem; /* pt-3 */
    padding-bottom: 0.75rem; /* pb-3 */
    vertical-align: middle;
    border-bottom: 2px solid #001A49;
}

/* Table caption: h3 size, dark blue, margin-top */
table caption {
    display: table-caption;
    caption-side: top;
    font-size: 1.25rem; /* h3 size */
    font-weight: 700;
    color: #001A49;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    text-align: left;
}

/* Main nav active underline */
.main-nav-active {
    border-bottom: 3px solid #001A49;
    border-radius: 2px;
}