@charset "UTF-8";

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  /* Spacing System */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 50px;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* Status Colors */
  --status-operational: #10b981;
  --status-operational-bg: #dcfce7;
  --status-operational-text: #166534;
  --status-disrupted: #f59e0b;
  --status-disrupted-bg: #fef3c7;
  --status-disrupted-text: #92400e;
  --status-down: #ef4444;
  --status-down-bg: #fee2e2;
  --status-down-text: #991b1b;
  --status-monitoring: #8b5cf6;
  --status-identified: #3b82f6;
  
  /* Gray Scale */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Container Sizes */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1500px;
  
  /* Transitions */
  --transition-fast: 0.12s ease-in-out;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ========================================
   BASE STYLES
   ======================================== */
* {
  box-sizing: border-box;
}

body {
  background-color: #FFFFFF;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
  body > main { min-height: 65vh; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-top: 0;
}

h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 16px; }

a {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
}
a:visited { color: rgba(114, 46, 133, 1); }
a:hover, a:active, a:focus { text-decoration: underline; }

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* ========================================
   LAYOUT CONTAINERS
   ======================================== */
.container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

/* ========================================
   BUTTONS & FORM CONTROLS
   ======================================== */
.button, 
.pagination-next-link, 
.pagination-prev-link, 
.pagination-first-link, 
.pagination-last-link {
  background-color: transparent;
  border: 1px solid rgba(114, 46, 133, 1);
  border-radius: var(--radius-sm);
  color: rgba(114, 46, 133, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
}

@media (min-width: 768px) {
  .button, 
  .pagination-next-link, 
  .pagination-prev-link, 
  .pagination-first-link, 
  .pagination-last-link {
    width: auto;
  }
}

.button:visited, 
.pagination-next-link:visited, 
.pagination-prev-link:visited, 
.pagination-first-link:visited, 
.pagination-last-link:visited {
  color: rgba(114, 46, 133, 1);
}

.button:hover, 
.button:active, 
.button:focus {
  background-color: rgba(114, 46, 133, 1);
  color: #FFFFFF;
  text-decoration: none;
}

.button-secondary {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: #333333;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.button-secondary:hover {
  background: var(--gray-100);
  border-color: rgba(114, 46, 133, 1);
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
}

/* Form Controls */
.hbs-form input, 
.hbs-form textarea, 
.search input, 
.search textarea {
  color: #000;
  font-size: 14px;
  max-width: 100%;
  box-sizing: border-box;
  transition: border var(--transition-fast);
}

.hbs-form input:where(:not([type=checkbox])), 
.search input:where(:not([type=checkbox])) {
  outline: none;
}

.hbs-form input:where(:not([type=checkbox])):focus, 
.search input:where(:not([type=checkbox])):focus {
  border: 1px solid rgba(114, 46, 133, 1);
}

/* Control Components for Filters */
.control-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-shrink: 0;
  white-space: nowrap;
}

.control-group label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  flex-shrink: 0;
}

.control-select,
.control-input {
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  background: white;
  color: #333333;
  transition: border-color var(--transition-normal);
  min-width: 80px;
  flex-shrink: 0;
}

.control-select:focus,
.control-input:focus {
  outline: none;
  border-color: rgba(114, 46, 133, 1);
}

.control-button {
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  background: white;
  color: #333333;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
  flex-shrink: 0;
}

.control-button:hover {
  background: var(--gray-100);
  border-color: rgba(114, 46, 133, 1);
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */
.header {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  max-height: 37px;
  vertical-align: middle;
}

.logo span {
  margin: 0 10px;
  color: rgba(114, 46, 133, 1);
}

.logo a {
  display: inline-block;
}

.logo a:hover, 
.logo a:focus, 
.logo a:active {
  text-decoration: none;
}

/* User Navigation */
.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}

.user-nav-list {
  display: block;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}

/* Desktop Navigation */
@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(114, 46, 133, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, 
.nav-wrapper-desktop a:focus, 
.nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(114, 46, 133, 1);
  text-decoration: underline;
}

/* Mobile Navigation */
@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: var(--gray-100);
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #333333;
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, 
.nav-wrapper-mobile .menu-list-mobile-items button:focus, 
.nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: var(--gray-100);
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #333333;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, 
.nav-wrapper-mobile .menu-list-mobile-items a:focus, 
.nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: var(--gray-100);
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: var(--gray-500);
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

/* User info in header */
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: rgba(114, 46, 133, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, 
.user-info > button:focus {
  color: rgba(114, 46, 133, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(114, 46, 133, 1);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}

/* User avatar */
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

/* ========================================
   DROPDOWNS
   ======================================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem], 
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem], 
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, 
.dropdown-menu [role=menuitem]:focus, 
.dropdown-menu [role=menuitemradio]:hover, 
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}

.dropdown-chevron-icon {
  vertical-align: middle;
}

/* ========================================
   BREADCRUMBS & PAGE HEADER
   ======================================== */
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #666;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: rgba(114, 46, 133, 1);
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}

.footer a {
  color: #666;
}

.footer-inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}

/* ========================================
   SEARCH COMPONENTS
   ======================================== */
.search {
  border-color: #87929D;
  border-radius: var(--radius-full);
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border var(--transition-fast);
}

.search:focus-within {
  border-color: rgba(114, 46, 133, 1);
}

.search input[type=search], 
.search .clear-button {
  background-color: #fff;
  border-radius: var(--radius-full);
  border: none;
}

.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}

.search input[type=search]:focus {
  color: #555;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}

.search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
  pointer-events: none;
}

/* ========================================
   SEARCH RESULTS & FUNCTIONALITY
   ======================================== */
/* Search Results Indicator */
.search-results-indicator {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  padding: var(--spacing-lg) var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  margin-top: -100px;
  position: relative;
  z-index: 2;
  display: none;
}
.search-results-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  font-size: 0.9rem;
  color: var(--gray-600);
}
.search-results-summary .results-count,
.search-results-summary .sections-count {
  font-weight: 600;
  color: rgba(114, 46, 133, 1);
}
.search-results-summary .search-query {
  font-weight: 600;
  color: #333333;
}
.clear-search {
  background: none;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all var(--transition-normal);
}
.clear-search:hover {
  background: var(--status-down);
  color: white;
  border-color: var(--status-down);
}
/* Search Highlighting */
.search-highlight {
  background: #fff3cd;
  color: #856404;
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
/* Search State Animations */
.section-card {
  transition: all var(--transition-slow), transform var(--transition-slow);
}
.section-card[style*="display: none"] {
  opacity: 0;
  transform: scale(0.95);
}
.article-list-item {
  transition: all var(--transition-normal);
}
.article-list-item[style*="display: none"] {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}
/* Empty Search State */
.search-empty-state {
  text-align: center;
  padding: var(--spacing-3xl);
  grid-column: 1 / -1;
  display: none;
}
.search-empty-state.show {
  display: block;
}
/* Search Focus Enhancement */
.search-hero:focus-within {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
/* Mobile Search Results */
@media (max-width: 768px) {
  .search-results-indicator {
    margin-top: -80px;
    padding: var(--spacing-lg);
  }
  
  .search-results-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .clear-search {
    align-self: center;
    margin-top: var(--spacing-sm);
  }
}

/* ========================================
   HERO COMPONENT SYSTEM
   ======================================== */
.hero,
.hero-section,
.article-hero,
.status-page-header {
  background: linear-gradient(135deg, rgba(114, 46, 133, 1) 0%, lighten(rgba(114, 46, 133, 1), 10%) 50%, lighten(rgba(114, 46, 133, 1), 20%) 100%);
  background-image: url(/hc/theming_assets/01JXJ9VAH8WXM44Y8K19YGG9BV);
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: white;
}

.hero-section {
  padding: 80px 20px 160px;
}

.status-page-header {
  padding: 60px 0;
}

.article-hero {
  padding: 60px 20px 100px;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.hero-container,
.hero-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
}

.hero-title,
.article-hero-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: white !important;
  margin-bottom: var(--spacing-lg);
  line-height: 1.2;
}

.hero-subtitle,
.article-hero-summary {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 2.5rem;
  font-weight: 400;
  line-height: 1.5;
}

.status-page-header h1 {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-lg);
  font-weight: 700;
}

/* Hero Search */
.hero-section .search-container,
.status-page-header .search-container,
.article-hero .search-container {
  position: relative;
  width: calc(66.67% + var(--spacing-2xl));
  max-width: 1000px;
  margin: 0 auto var(--spacing-2xl);
}

@media (min-width: 1200px) {
  .hero-section .search-container,
  .status-page-header .search-container,
  .article-hero .search-container {
    width: calc(8 * (100% / 16) + var(--spacing-2xl));
  }
}

.search-hero {
  width: 100%;
  padding: 18px 20px 18px 48px;
  border: none;
  border-radius: var(--radius-full);
  font-size: 1.1rem;
  background: white;
  box-shadow: var(--shadow-xl);
  transition: all var(--transition-slow);
  color: #333333;
}

.search-hero:focus {
  outline: none;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  border-color: rgba(114, 46, 133, 1);
}

.hero-section .search-icon,
.status-page-header .search-icon,
.article-hero .search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  width: 20px;
  height: 20px;
  z-index: 2;
  pointer-events: none;
}

.search-hero::placeholder {
  color: #999;
  font-size: 1rem;
  padding-left: 0;
}

/* Search Clear Button */
.search .clear-button {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gray-400);
  transition: all var(--transition-normal);
  z-index: 3;
}

.search .clear-button:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

.search .clear-button:focus {
  outline: 2px solid rgba(114, 46, 133, 1);
  outline-offset: 2px;
}

.search .clear-button svg {
  width: 14px;
  height: 14px;
}

/* Hide Zendesk's default search clear functionality */
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

/* Hide any additional Zendesk clear buttons */
.search .search-clear,
.search [data-search-clear],
.search .clear-search-button {
  display: none !important;
}

/* Status Indicators */
.status-indicators {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.status-items-wrapper {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2xl);
  flex-wrap: wrap;
}

.status-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--spacing-sm);
}

.status-operational .status-dot,
.status-dot-operational {
  background: var(--status-operational);
}

.status-warning .status-dot,
.status-disrupted .status-dot,
.status-dot-disrupted {
  background: var(--status-disrupted);
}

.status-dot-down {
  background: var(--status-down);
}

.status-text {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
}

.status-update {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  text-align: center;
}

/* ========================================
   CARD COMPONENT SYSTEM
   ======================================== */
.content-card,
.status-region-card,
.sidebar-card,
.article-main,
.whats-new-card,
.timeline-content {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: all var(--transition-slow);
}

.content-card:hover,
.whats-new-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.content-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  aspect-ratio: 2 / 3;  /* ← Changed from 4 / 3 to 2 / 3 */
  max-width: 450px;
  width: 100%;
}

.status-region-card {
  padding: 24px;
  max-width: 600px;
  width: 100%;
}

.timeline-content {
  border-radius: var(--radius-xl);
}

/* Scrollable container for card content */
.card-scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
  max-height: 100%;
}

/* Custom scrollbar styling */
.card-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.card-scroll-container::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.card-scroll-container::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.card-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* Card Headers */
.content-card .card-header,
.region-header {
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  text-align: left;
}

.region-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.content-card .card-icon {
  width: 48px;
  height: 48px;
  background: var(--gray-50);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

/* Card Icon Colors */
.service-status-card .card-icon {
  background: #d1a1de;
  color: rgba(114, 46, 133, 1);
}

.quick-answers-card .card-icon {
  background: var(--status-operational-bg);
  color: var(--status-operational);
}

.whats-new-card .card-icon {
  background: var(--status-disrupted-bg);
  color: var(--status-disrupted);
}

.help-docs-card .card-icon {
  background: #dab4e5;
  color: #52215f;
}

.content-card .card-header-content {
  flex: 1;
  min-width: 0;
}

.content-card .card-title,
.region-header h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.25rem;
  line-height: 1.3;
  text-align: left;
}

.region-header h3 {
  margin: 0;
}

.content-card .card-subtitle {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
  text-align: left;
}

.card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.card-footer {
  padding: var(--spacing-lg) var(--spacing-xl);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  margin-top: auto;
  flex-shrink: 0;
}

.card-link {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition-normal);
  border: 1px solid rgba(114, 46, 133, 1);
  padding: 0.75rem var(--spacing-lg);
  border-radius: var(--radius-md);
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  box-sizing: border-box;
}

.card-link:hover {
  background-color: rgba(114, 46, 133, 1);
  color: #FFFFFF;
  text-decoration: none;
}

/* Ensure all cards have proper scrollable content areas */
.service-status-card .card-content,
.quick-answers-card .card-content,
.whats-new-card .card-content {
  overflow: hidden;
}

.service-status-card .card-scroll-container {
  padding: var(--spacing-lg) 0;
}

.quick-answers-card .card-scroll-container {
  padding: var(--spacing-lg) 0.75rem;
}

.whats-new-card .card-scroll-container {
  padding: 0;
}

/* Service Status Card specific styling */
.service-status-card .service-list {
  padding: 0 var(--spacing-xl);
}

/* Quick Answers Card specific styling */
.quick-answers-card .faq-item {
  padding: 0.75rem var(--spacing-xl);
  border-bottom: 1px solid var(--gray-100);
}

.quick-answers-card .faq-item:last-child {
  border-bottom: none;
}

.quick-answers-card .faq-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #333333;
  transition: color var(--transition-normal);
}

.quick-answers-card .faq-link:hover {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
}

.quick-answers-card .faq-question {
  font-weight: 500;
}

.quick-answers-card .faq-arrow {
  opacity: 0.5;
  transition: opacity var(--transition-normal);
}

.quick-answers-card .faq-link:hover .faq-arrow {
  opacity: 1;
}

/* What's New Update Items */
.whats-new-card .whats-new-list,
.whats-new-card .whats-new-fallback {
  padding: var(--spacing-lg) 0.75rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.whats-new-card .whats-new-loading {
  padding: var(--spacing-2xl) 0.75rem;
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.whats-new-card .whats-new-loading p {
  margin: 0;
}

/* ========================================
   HELP DOCUMENTATION CARD STYLING
   ======================================== */

/* Help Documentation Card Styling */
.help-docs-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.help-doc-item {
  margin: 0;
  padding: 0;
}

.help-doc-item:not(:last-child) {
  margin-bottom: 0.5rem;
}

.help-docs-signin-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  color: var(--gray-600);
}

.help-docs-signin-message svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.help-docs-signin-message p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.help-doc-link,
.doc-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: #333333;
  transition: all var(--transition-normal);
  border-bottom: 1px solid var(--gray-100);
}

.help-doc-link:hover {
  background: var(--gray-50);
  text-decoration: none;
  color: #333333;
}

.help-doc-link:last-child {
  border-bottom: none;
}

.help-doc-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

/* Icon colors based on content */
.help-doc-icon-0 {
  background: #3b82f6; /* Blue for first item */
}

.help-doc-icon-1 {
  background: #8b5cf6; /* Purple for second item */
}

.help-doc-icon-2 {
  background: #f59e0b; /* Orange for third item */
}

.help-doc-icon-3 {
  background: #10b981; /* Green for fourth item */
}

.help-doc-icon-4 {
  background: #ef4444; /* Red for fifth item */
}

.help-doc-icon-5 {
  background: #06b6d4; /* Cyan for sixth item */
}

.help-doc-icon-6 {
  background: #84cc16; /* Lime for seventh item */
}

.help-doc-icon-7 {
  background: #f97316; /* Orange for eighth item */
}

/* Fallback colors for additional items */
.help-doc-icon:nth-child(n+9) {
  background: var(--gray-400);
}

.help-doc-title {
  font-weight: 500;
  font-size: 0.95rem;
  color: #333333;
  line-height: 1.4;
}

.help-doc-link:hover .help-doc-title {
  color: rgba(114, 46, 133, 1);
}

/* Card content area for help docs */
.help-docs-card .card-content {
  padding: 0;
  overflow: hidden;
  flex-grow: 1;
}

.help-docs-card .card-scroll-container {
  padding: 0;
}

/* ========================================
   16-COLUMN GRID SYSTEM
   ======================================== */
.content-grid,
.status-grid,
.sections-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: var(--spacing-2xl);
  margin-top: -100px;
  position: relative;
  z-index: 2;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--spacing-2xl);
}

.sections-grid {
  margin-top: 0;
  /* Override grid with flexbox for proper centering */
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  /* Widen container for better card display */
  max-width: 95% !important;
  width: 95%;
  padding: 0 var(--spacing-xl);
}

/* ========================================
   GRID COLUMN SPANS - UPDATED FOR CATEGORY PAGES
   ======================================== */

/* Status page cards - HIGHEST PRIORITY */
.content-grid.status-grid .service-status-card {
  grid-column: span 4 !important;
  max-width: none !important; /* Override the 450px constraint */
  aspect-ratio: auto !important; /* Remove aspect ratio constraint */
}

.content-grid.status-grid .recent-incidents-card {
  grid-column: span 12 !important;
  max-width: none !important; /* Override the 450px constraint */
  aspect-ratio: auto !important; /* Remove aspect ratio constraint */
}

/* Home page cards - DEFAULT */
.content-grid .content-card {
  grid-column: span 4;
}

/* Category pages: Fixed width cards for flexbox centering */
.sections-grid .section-card {
  /* Calculate width to fit 4 cards per row with gaps */
  width: calc((100% - (3 * var(--spacing-2xl))) / 4);
  min-width: 300px;
  max-width: 450px;
  flex-shrink: 0;
}

/* Large screens: 4 per row */
@media (min-width: 1600px) {
  .sections-grid .section-card {
    width: calc((100% - (3 * var(--spacing-2xl))) / 4);
  }
}

/* Desktop: 3 per row */
@media (max-width: 1599px) and (min-width: 1200px) {
  .sections-grid .section-card {
    width: calc((100% - (2 * var(--spacing-2xl))) / 3);
  }
}

/* Desktop medium: 2 per row */
@media (max-width: 1199px) and (min-width: 768px) {
  .sections-grid .section-card {
    width: calc((100% - var(--spacing-2xl)) / 2);
  }
}

/* Tablet/Mobile: 1 per row */
@media (max-width: 767px) {
  .sections-grid .section-card {
    width: 100%;
    max-width: 500px;
  }
}

/* Responsive adjustments for home and status pages */
@media (max-width: 1200px) {
  /* Home page: 2 cards spanning 8 columns each */
  .content-grid .content-card {
    grid-column: span 8;
  }
  
  /* Status page: Both cards span full width */
  .content-grid.status-grid .content-card.service-status-card,
  .content-grid.status-grid .content-card.recent-incidents-card {
    grid-column: span 16 !important;
  }
}

@media (max-width: 768px) {
  .content-grid,
  .status-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin-top: -80px;
    padding: 0 var(--spacing-lg);
  }

  .sections-grid {
    margin-top: 0;
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-md);
    width: 98%;
    max-width: 98% !important;
    /* Keep flexbox display for centering */
  }

  /* All cards span full width on mobile */
  .content-card,
  .content-grid .content-card,
  .content-grid.status-grid .content-card.service-status-card,
  .content-grid.status-grid .content-card.recent-incidents-card {
    grid-column: span 1 !important;
    max-width: 100%;
  }

  /* Section cards maintain flexbox centering */
  .section-card {
    max-width: 100%;
  }
  
  .status-indicators {
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
  }

  .status-items-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .status-item {
    width: auto;
    justify-content: center;
  }
  
  .hero-title,
  .article-hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle,
  .article-hero-summary {
    font-size: 1.1rem;
  }
  
  .hero-section {
    padding: 60px 20px 120px;
  }
  
  .search-hero {
    padding: 16px 20px 16px 50px;
    font-size: 1rem;
  }
  
  .hero-section .search-icon {
    left: 20px;
  }

  .status-page-header h1 {
    font-size: 2rem;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .homepage-container {
    width: calc(100% - 64px);
    padding: 0 32px;
  }
}

@media (min-width: 1200px) {
  .homepage-container {
    max-width: none;
    width: calc(100% - 64px);
    padding: 0 32px;
  }
}

/* ========================================
   STATUS COMPONENT SYSTEM
   ======================================== */
.status-badge,
.region-status,
.service-status,
.incident-status-card {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  text-transform: capitalize;
  letter-spacing: 0.025em;
}

.incident-status-card {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  margin-right: 12px;
  flex-shrink: 0;
}

/* Status Colors */
.operational,
.status-operational,
.service-status.operational,
.region-status.operational,
.incident-status-card.resolved {
  background: var(--status-operational-bg);
  color: var(--status-operational-text);
}

.disrupted,
.status-disrupted,
.service-status.disrupted,
.region-status.disrupted,
.incident-status-card.investigating {
  background: var(--status-disrupted-bg);
  color: var(--status-disrupted-text);
}

.down,
.status-down,
.service-status.down,
.region-status.down {
  background: var(--status-down-bg);
  color: var(--status-down-text);
}

.incident-status-card.identified {
  background: #dbeafe;
  color: #1e40af;
}

.incident-status-card.monitoring {
  background: #e0e7ff;
  color: #5b21b6;
}

/* Status Content Replacement */
.status-message-operational::before,
.service-status.operational::before,
.region-status.operational::before {
  content: "Operational";
}

.status-message-disrupted::before,
.service-status.disrupted::before,
.region-status.disrupted::before {
  content: "Disrupted";
}

.status-message-down::before,
.service-status.down::before,
.region-status.down::before {
  content: "Down";
}

.status-message-operational,
.status-message-disrupted, 
.status-message-down,
.service-status {
  font-size: 0;
}

.status-message-operational::before,
.status-message-disrupted::before,
.status-message-down::before,
.service-status::before {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Service Status Details */
.service-status-card .service-list-container,
.recent-incidents-card .service-list-container {
  max-height: 200px;
  padding: var(--spacing-lg) 0;
  overflow-y: auto;
  flex-grow: 1;
}

.recent-incidents-card .service-list-container {
  max-height: 400px;
  padding: 0;
}

.service-status-card .service-list {
  padding: 0 var(--spacing-xl);
}

.service-status-card .service-item,
.service-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}

.service-status-card .service-item:last-child,
.service-detail:last-child {
  border-bottom: none;
}

.service-status-card .service-name,
.service-detail .service-name {
  font-size: 14px;
  color: var(--gray-900);
  font-weight: 500;
}

.service-detail .service-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.region-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ========================================
   ACCORDION COMPONENT SYSTEM
   ======================================== */
.incident-accordion-card,
.whats-new-accordion-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-normal);
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
}

.incident-accordion-card:hover,
.whats-new-accordion-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.whats-new-accordion-card:hover {
  box-shadow: var(--shadow-md);
}

.incident-header-card,
.release-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color var(--transition-normal);
  background: white;
  border: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.release-header-card {
  padding: 20px 24px;
  background: var(--gray-50);
}

.incident-header-card:hover,
.release-header-card:hover {
  background: var(--gray-50);
}

.release-header-card:hover {
  background: var(--gray-100);
}

.incident-header-card.active {
  background: var(--gray-100);
}

.release-header-card.active {
  background: #e0f2fe;
}

.incident-info-card,
.release-info-card {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.incident-title-card,
.release-title-card {
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 4px 0;
  line-height: 1.3;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.release-title-card {
  font-size: 1.25rem;
  margin: 0 0 8px 0;
}

.incident-date-card {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin: 0;
}

.release-summary-card {
  font-size: 0.95rem;
  font-weight: 400;
  color: #595959;
  margin: 0 0 24px 0 !important;
  line-height: 1.4;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.release-meta-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

.incident-chevron-card,
.release-chevron-card {
  color: var(--gray-500);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

.release-chevron-card {
  margin-left: 16px;
}

.incident-content-card,
.release-content-card {
  display: none;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.incident-content-card {
  padding: 0 20px 16px;
}

.release-content-card {
  background: white;
  border-top: 1px solid var(--gray-200);
}

.incident-description-card {
  margin-bottom: 0;
}

.incident-description-card p {
  color: #333333;
  line-height: 1.6;
  margin: 0 0 12px 0;
  font-size: 0.9rem;
}

.incident-actions-card {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

.incident-link-card {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  transition: color var(--transition-normal);
}

.incident-link-card:hover {
  color: #52215f;
  text-decoration: underline;
}

/* ========================================
   TIMELINE SYSTEM
   ======================================== */
.timeline-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  margin-top: -100px;
  width: 100%;
  overflow: hidden;
}

.timeline-controls {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  padding: 12px 16px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 48px;
  max-height: 48px;
}

.whats-new-controls.timeline-controls {
  min-height: 48px;
  max-height: 48px;
  padding: 12px 16px;
}

.timeline-controls-left,
.timeline-controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.date-range {
  gap: 6px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.date-range input {
  min-width: 90px;
}

.whats-new-controls .timeline-controls-left {
  gap: 6px;
}

.whats-new-controls .control-select {
  min-width: 70px;
  font-size: 0.7rem;
  padding: 4px 8px;
}

.whats-new-controls .control-group label {
  font-size: 0.7rem;
}

.whats-new-controls .control-button {
  font-size: 0.7rem;
  padding: 4px 8px;
}

/* Timeline Content */
.timeline-track {
  position: relative;
  padding: 0;
  min-height: 100%;
}

.timeline-line {
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
  z-index: 1;
}

.timeline-items {
  position: relative;
  z-index: 2;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.timeline-node {
  position: absolute;
  left: 8px;
  top: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: var(--shadow-sm);
  z-index: 4;
  position: relative;
}

/* Timeline Dot Colors */
.timeline-dot.investigating {
  background: var(--status-disrupted);
}

.timeline-dot.identified {
  background: var(--status-identified);
}

.timeline-dot.monitoring {
  background: var(--status-monitoring);
}

.timeline-dot.resolved,
.timeline-dot.operational {
  background: var(--status-operational);
}

.timeline-dot.disrupted {
  background: var(--status-disrupted);
}

.timeline-dot.down {
  background: var(--status-down);
}

.timeline-dot.major-release {
  background: var(--status-down-text);
  box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.2);
}

.timeline-dot.minor-update {
  background: #1e40af;
  box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.2);
}

.timeline-dot.patch {
  background: var(--status-operational-text);
  box-shadow: 0 0 0 4px rgba(22, 101, 52, 0.2);
}

.timeline-dot.hotfix {
  background: var(--status-disrupted-text);
  box-shadow: 0 0 0 4px rgba(146, 64, 14, 0.2);
}

.timeline-card {
  flex: 1;
  margin-left: 46px;
  max-width: calc(100% - 46px);
  overflow: hidden;
}

/* Timeline Loading & States */
.timeline-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-100);
  border-top: 3px solid rgba(114, 46, 133, 1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.timeline-loading p {
  color: var(--gray-500);
  font-style: italic;
  margin: 0;
}

.timeline-empty {
  padding: 60px 20px;
  text-align: center;
}

.empty-state {
  max-width: 400px;
  margin: 0 auto;
}

.empty-icon {
  color: var(--gray-300);
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--gray-500);
  margin: 0;
}

.load-more-container {
  text-align: center;
  padding: 30px 20px;
}

/* ========================================
   TIMELINE CONTROLS VISIBILITY
   ======================================== */
#timeline-controls-incidents,
#timeline-controls-whats-new {
  display: none !important;
}

#timeline-controls-incidents.show-controls {
  display: flex !important;
}

#timeline-controls-whats-new.show-controls {
  display: flex !important;
}

body.incidents-section #timeline-controls-whats-new {
  display: none !important;
}

body.whats-new-section #timeline-controls-whats-new.active-controls {
  display: flex !important;
}

body.whats-new-section #timeline-controls-incidents {
  display: none !important;
}

/* ========================================
   ARTICLES CONTAINER & CONTROLS
   ======================================== */
.articles-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  margin-top: -100px;
  width: 100%;
}

.article-controls {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  padding: 12px 16px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 48px;
  max-height: 48px;
}

.article-controls-left,
.article-controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.results-count {
  font-size: 0.9rem;
  color: var(--gray-500);
  font-weight: 500;
}

.results-count #article-count {
  color: rgba(114, 46, 133, 1);
  font-weight: 600;
}

/* Article Loading State */
.article-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.article-loading p {
  color: var(--gray-500);
  font-style: italic;
  margin: 0;
}

/* Article Grid */
.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: 40px;
}

/* Article Cards */
.article-card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: all var(--transition-slow);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.article-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  padding: var(--spacing-2xl);
}

.article-card-link:hover {
  text-decoration: none;
  color: inherit;
}

.article-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.3;
}

.article-card-link:hover .article-card-title {
  color: rgba(114, 46, 133, 1);
}

.article-card-date {
  font-size: 0.9rem;
  color: var(--gray-500);
  font-weight: 500;
  margin: 0 0 var(--spacing-xl) 0;
}

.article-card-preview {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 var(--spacing-xl) 0;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-card-cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: rgba(114, 46, 133, 1);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition-normal);
  margin: 0;
}

.article-card-arrow {
  transition: transform var(--transition-normal);
}

.article-card-link:hover .article-card-cta {
  color: #52215f;
}

.article-card-link:hover .article-card-arrow {
  transform: translateX(4px);
}

/* Article Empty State */
.article-empty {
  padding: 60px 20px;
  text-align: center;
}

.article-empty .empty-state {
  max-width: 400px;
  margin: 0 auto;
}

/* Load More Articles Button */
.load-more-articles-container {
  text-align: center;
  padding: 30px 20px;
}

/* ========================================
   SECTION ACTIONS
   ======================================== */
.section-actions {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
}

.section-actions .button {
  display: inline-block;
  padding: 12px 24px;
  background: rgba(114, 46, 133, 1);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: background-color var(--transition-normal);
}

.section-actions .button:hover {
  background: #52215f;
  text-decoration: none;
}

/* ========================================
   CONTENT SECTIONS & TYPOGRAPHY
   ======================================== */
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
}

/* What's New Update Items */
.whats-new-card .whats-new-list,
.whats-new-card .whats-new-fallback {
  padding: var(--spacing-lg) 0.75rem;
  max-height: 300px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.whats-new-card .whats-new-loading {
  padding: var(--spacing-2xl) 0.75rem;
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  font-size: 0.9rem;
}

.whats-new-card .whats-new-loading p {
  margin: 0;
}

.whats-new-card .update-item-button {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
  border: 1px solid transparent;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.whats-new-card .update-item-button:hover {
  background-color: var(--gray-50);
  border-color: var(--gray-200);
  text-decoration: none;
  color: inherit;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.whats-new-card .update-item-button:visited {
  color: inherit;
}

.whats-new-card .update-item-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.whats-new-card .update-item-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.whats-new-card .update-date-tag {
  background: var(--gray-100);
  color: var(--gray-500);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
  transition: all var(--transition-normal);
}

.whats-new-card .update-title {
  font-weight: 500;
  color: #333333;
  line-height: 1.4;
  flex: 1;
  font-size: 0.9rem;
}

.whats-new-card .icon-lock {
  width: 12px;
  height: 12px;
  color: #666;
  flex-shrink: 0;
  margin-left: auto;
}

.whats-new-card .update-item-button:hover .update-date-tag {
  background: #dab4e5;
  color: rgba(114, 46, 133, 1);
  border-color: #c88ed8;
}

.whats-new-card .update-item-button:hover .update-title {
  color: #1a1a1a;
}

.whats-new-card .update-item-button:focus {
  outline: 2px solid rgba(114, 46, 133, 1);
  outline-offset: 2px;
}

/* FAQ & Documentation Items */
.faq-item,
.doc-category {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-100);
}

.faq-item:last-child,
.doc-category:last-child {
  border-bottom: none;
}

.faq-link,
.doc-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #333333;
  transition: color var(--transition-normal);
}

.doc-link {
  gap: 0.75rem;
  justify-content: flex-start;
}

.faq-link:hover,
.doc-link:hover {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
}

.faq-question,
.doc-title {
  font-weight: 500;
}

.faq-arrow {
  opacity: 0.5;
  transition: opacity var(--transition-normal);
}

.faq-link:hover .faq-arrow {
  opacity: 1;
}

.doc-icon {
  width: 32px;
  height: 32px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

/* ========================================
   RECENT INCIDENTS
   ======================================== */
.recent-incidents-card .card-content {
  padding: 0;
}

.recent-incidents-card #incidents-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.recent-incidents-card .incidents-loading {
  padding: 30px 20px;
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  font-size: 0.9rem;
}

.recent-incidents-card .no-incidents {
  padding: 30px 20px;
  text-align: center;
}

.recent-incidents-card .no-incidents p {
  color: var(--gray-500);
  font-style: italic;
  margin: 0;
  font-size: 0.9rem;
}

.recent-incidents-card .incidents-footer {
  margin-top: 0;
}

/* ========================================
   RELEASE & CONTENT SECTIONS
   ======================================== */
.release-sections {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.release-actions-card {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.release-actions-card .release-link {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color var(--transition-normal);
}

.release-actions-card .release-link:hover {
  color: #52215f;
  text-decoration: underline;
}

.release-content {
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.release-section {
  border-bottom: 1px solid var(--gray-100);
  padding: var(--spacing-xl);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.release-section:last-child {
  border-bottom: none;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 var(--spacing-lg) 0;
}

.section-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  color: var(--gray-500);
}

.whats-new-section .section-icon {
  color: #6366f1;
}

.improvements-section .section-icon {
  color: #059669;
}

.bug-fixes-section .section-icon {
  color: #dc2626;
}

.screenshots-section .section-icon {
  color: #7c3aed;
}

.section-content {
  color: #262626;
  line-height: 1.6;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.section-content p {
  margin-bottom: var(--spacing-lg);
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.section-content p:last-child {
  margin-bottom: 0;
}

.section-content ul,
.section-content ol {
  margin: var(--spacing-lg) 0;
  padding-left: var(--spacing-xl);
  width: 100%;
  max-width: calc(100% - var(--spacing-xl));
  box-sizing: border-box;
}

.section-content li {
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.section-content h5 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333333;
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.section-content a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

.section-content code {
  background: var(--gray-100);
  padding: 0.25rem var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.85em;
  color: #d63384;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.section-content pre {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  overflow-x: auto;
  margin: var(--spacing-lg) 0;
  max-width: 100%;
  box-sizing: border-box;
}

.section-content pre code {
  background: none;
  padding: 0;
  color: inherit;
  white-space: pre-wrap;
}

.section-content img,
.release-screenshot img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
  display: block;
}

.release-screenshot {
  margin: var(--spacing-lg) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  max-width: 100%;
  width: 100%;
}

.section-content table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  font-size: 0.9rem;
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

.section-content table thead,
.section-content table tbody,
.section-content table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.section-content th,
.section-content td {
  border: 1px solid var(--gray-200);
  padding: 0.75rem;
  text-align: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 0;
}

.section-content th {
  background: var(--gray-50);
  font-weight: 600;
  color: #1a1a1a;
}

/* Action Required Sections */
.action-required-section {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border-left: 4px solid #eab308;
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) var(--spacing-xl);
  padding: var(--spacing-lg);
  position: relative;
  width: calc(100% - 3rem);
  max-width: calc(100% - 3rem);
  box-sizing: border-box;
  overflow: hidden;
}

.action-required-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(234, 179, 8, 0.05);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.action-required-section .section-title {
  color: var(--status-disrupted-text);
  font-weight: 700;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.action-required-section .section-icon {
  color: var(--status-disrupted);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.action-required-section .section-content {
  color: #333333;
  font-weight: 400;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.action-required-section .section-content p {
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  margin-bottom: var(--spacing-lg);
}

.action-required-section .section-content p:last-child {
  margin-bottom: 0;
}

.action-required {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border: 1px solid #fbbf24;
  border-left: 4px solid #eab308;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) var(--spacing-xl);
  position: relative;
  width: calc(100% - 3rem);
  max-width: calc(100% - 3rem);
  box-sizing: border-box;
  overflow: hidden;
}

.action-required::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(234, 179, 8, 0.05);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.action-required-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--status-disrupted-text);
  margin: 0 0 var(--spacing-sm) 0;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.action-required-title .section-icon {
  color: var(--status-disrupted);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.action-required-content {
  font-size: 0.9rem;
  color: #333333;
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.action-required-content p {
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  margin-bottom: var(--spacing-lg);
}

.action-required-content p:last-child {
  margin-bottom: 0;
}

/* Release Badges */
.release-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.release-major-release {
  background: var(--status-down-bg);
  color: var(--status-down-text);
}

.release-minor-update {
  background: #dbeafe;
  color: #1e40af;
}

.release-patch {
  background: var(--status-operational-bg);
  color: var(--status-operational-text);
}

.release-hotfix {
  background: var(--status-disrupted-bg);
  color: var(--status-disrupted-text);
}

.impact-high-impact {
  background: var(--status-down-bg);
  color: var(--status-down-text);
}

.impact-medium-impact {
  background: var(--status-disrupted-bg);
  color: var(--status-disrupted-text);
}

.impact-low-impact {
  background: var(--status-operational-bg);
  color: var(--status-operational-text);
}

.release-version {
  background: #d1a1de;
  color: rgba(114, 46, 133, 1);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem var(--spacing-sm);
  border-radius: var(--radius-md);
}

.release-date {
  color: var(--gray-500);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Release Header */
.release-header {
  padding: var(--spacing-xl);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.release-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
}

.release-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
  line-height: 1.3;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.release-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

.release-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.release-tag {
  background: var(--gray-100);
  color: var(--gray-500);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-normal);
}

.release-tag:hover {
  background: rgba(114, 46, 133, 1);
  color: white;
  text-decoration: none;
}

.release-actions {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.release-link {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color var(--transition-normal);
}

.release-link:hover {
  color: #52215f;
  text-decoration: underline;
}

/* ========================================
   BLOCKS (LEGACY SUPPORT)
   ======================================== */
.hero {
  background-image: url(/hc/theming_assets/01JXJ9VAH8WXM44Y8K19YGG9BV);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}

.blocks-item {
  border: 1px solid rgba(114, 46, 133, 1);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  color: rgba(114, 46, 133, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}

.blocks-item:hover, 
.blocks-item:focus, 
.blocks-item:active {
  background-color: rgba(114, 46, 133, 1);
}

.blocks-item:hover *, 
.blocks-item:focus *, 
.blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}

.blocks-item-link {
  color: rgba(114, 46, 133, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}

.blocks-item-link:visited, 
.blocks-item-link:hover, 
.blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}

.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}

.blocks-item-description {
  margin: 0;
}

.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/* ========================================
   COMMUNITY & ACTIVITY
   ======================================== */
.community {
  text-align: center;
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01J9Y2G8MQHWBWBYNJBDM0B2TE);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}

.community a {
  color: rgba(114, 46, 133, 1);
  text-decoration: underline;
}

.community a:visited {
  color: rgba(114, 46, 133, 1);
}

.community a:hover, 
.community a:active, 
.community a:focus {
  color: #0F3554;
}

.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

.community-section, 
.activity-section {
  margin-top: 4rem;
  padding: var(--spacing-2xl) 0;
}

/* ========================================
   STATUS ACTIONS & TIMELINE ACTIONS
   ======================================== */
.status-actions,
.timeline-actions {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
}

.status-actions {
  border-top: 1px solid var(--gray-200);
}

.status-actions .button,
.timeline-actions .button {
  display: inline-block;
  padding: 12px 24px;
  background: rgba(114, 46, 133, 1);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: background-color var(--transition-normal);
}

.status-actions .button:hover,
.timeline-actions .button:hover {
  background: #52215f;
  text-decoration: none;
}

/* ========================================
   ERROR STATES
   ======================================== */
.error-state {
  text-align: center;
  padding: 40px 20px;
}

.error-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--status-down);
  margin-bottom: 8px;
}

.error-state p {
  color: var(--gray-500);
  margin: 0;
}

/* ========================================
   STATUS HISTORY & TIMELINE SECTIONS
   ======================================== */
.status-history {
  margin-bottom: 40px;
}

.status-history h2 {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: #333333;
}

.status-timeline {
  background: white;
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
}

.status-timeline .timeline-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-100);
}

.status-timeline .timeline-item:last-child {
  border-bottom: none;
}

.timeline-date {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.timeline-content h4 {
  font-weight: 600;
  color: #333333;
  margin-bottom: 4px;
}

.timeline-content p {
  color: var(--gray-500);
  margin: 0;
}

/* ========================================
   MOBILE RESPONSIVE OPTIMIZATIONS
   ======================================== */
@media (max-width: 768px) {
  .timeline-container,
  .articles-container {
    margin-top: -80px;
    padding: 0 10px;
  }
  
  .timeline-controls,
  .article-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  
  .timeline-controls-left,
  .timeline-controls-right,
  .article-controls-left,
  .article-controls-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
  }
  
  .control-group {
    flex-direction: row;
    align-items: center;
    gap: 3px;
    min-width: auto;
  }
  
  .control-select,
  .control-input {
    min-width: 70px;
    font-size: 0.7rem;
    padding: 3px 6px;
  }
  
  .control-group label {
    font-size: 0.65rem;
  }
  
  .control-button {
    font-size: 0.7rem;
    padding: 3px 6px;
  }
  
  .date-range {
    gap: 4px;
  }
  
  .date-range input {
    min-width: 80px;
  }
  
  .whats-new-controls .timeline-controls-left {
    gap: 4px;
  }
  
  .whats-new-controls .control-select {
    min-width: 60px;
    font-size: 0.65rem;
    padding: 2px 4px;
  }
  
  .whats-new-controls .control-group label {
    font-size: 0.6rem;
  }
  
  .timeline-line {
    left: 28px;
    top: 0;
    bottom: 0;
  }
  
  .timeline-item {
    margin-bottom: 25px;
  }
  
  .timeline-node {
    left: 20px;
    width: 16px;
    height: 16px;
  }
  
  .timeline-dot {
    width: 12px;
    height: 12px;
    border-width: 2px;
  }
  
  .timeline-card {
    margin-left: 4px;
    max-width: calc(100% - 4px);
  }
  
  .timeline-header {
    padding: 12px 16px;
  }
  
  .timeline-preview {
    padding: 0 16px 12px;
  }
  
  .timeline-content {
    padding: 0 16px 12px;
  }
  
  .timeline-title {
    font-size: 0.95rem;
  }
  
  .timeline-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .region-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .whats-new-card .whats-new-list,
  .whats-new-card .whats-new-fallback {
    padding: 0.75rem 0.5rem;
    max-height: 250px;
    gap: 0.25rem;
  }
  
  .whats-new-card .update-item-button {
    padding: var(--spacing-sm);
  }
  
  .whats-new-card .update-item-content {
    gap: var(--spacing-sm);
  }
  
  .whats-new-card .update-date-tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
  
  .whats-new-card .update-title {
    font-size: 0.85rem;
  }

  .release-header-card {
    padding: 16px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .release-title-card {
    font-size: 1.1rem;
  }
  
  .release-summary-card {
    font-size: 0.9rem;
    margin: 0 0 20px 0 !important;
    line-height: 1.3;
  }
  
  .release-meta-card {
    gap: var(--spacing-sm);
  }
  
  .release-chevron-card {
    position: absolute;
    top: 16px;
    right: 18px;
    margin-left: 0;
  }
  
  .release-actions-card {
    padding: var(--spacing-lg);
  }
  
  .release-section {
    padding: var(--spacing-lg);
  }
  
  .action-required-section {
    margin: var(--spacing-lg) 0.75rem;
    width: calc(100% - 1.5rem);
    max-width: calc(100% - 1.5rem);
  }
  
  .action-required {
    margin: var(--spacing-lg) 0.75rem;
    width: calc(100% - 1.5rem);
    max-width: calc(100% - 1.5rem);
  }
  
  /* Article Grid Mobile */
  .article-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .article-card-link {
    padding: var(--spacing-xl);
  }
  
  .article-card-title {
    font-size: 1.1rem;
  }
  
  .article-card-date {
    font-size: 0.85rem;
    margin: 0 0 var(--spacing-lg) 0;
  }
  
  .article-card-preview {
    font-size: 0.9rem;
    -webkit-line-clamp: 2;
    margin: 0 0 var(--spacing-lg) 0;
  }
}

@media (max-width: 480px) {
  .timeline-container,
  .articles-container {
    padding: 0 5px;
  }
  
  .timeline-items {
    padding: 10px 5px;
  }
  
  .timeline-controls,
  .article-controls {
    padding: 8px 10px;
  }
  
  .timeline-controls-left,
  .timeline-controls-right,
  .article-controls-left,
  .article-controls-right {
    width: 100%;
    justify-content: flex-start;
    gap: 4px;
  }
  
  .control-select,
  .control-input {
    min-width: 60px;
    font-size: 0.65rem;
    padding: 2px 4px;
  }
  
  .control-group label {
    font-size: 0.6rem;
  }
  
  .control-button {
    font-size: 0.65rem;
    padding: 2px 4px;
  }
  
  .timeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .timeline-chevron {
    align-self: flex-end;
  }

  .release-summary-card {
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0 0 18px 0 !important;
  }
  
  .action-required-section {
    margin: var(--spacing-lg) var(--spacing-sm);
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
  }
  
  .action-required {
    margin: var(--spacing-lg) var(--spacing-sm);
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
  }
  
  .article-card-link {
    padding: var(--spacing-lg);
  }
  
  .article-card-title {
    font-size: 1rem;
  }
  
  .article-card-date {
    font-size: 0.8rem;
    margin: 0 0 var(--spacing-md) 0;
  }
  
  .article-card-preview {
    font-size: 0.85rem;
    -webkit-line-clamp: 2;
    margin: 0 0 var(--spacing-md) 0;
  }
}

/* Force single line on desktop */
@media (min-width: 769px) {
  .timeline-controls.show-controls,
  .article-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
  
  .timeline-controls.show-controls .timeline-controls-left,
  .timeline-controls.show-controls .timeline-controls-right,
  .article-controls .article-controls-left,
  .article-controls .article-controls-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  
  .timeline-controls.show-controls .control-group,
  .article-controls .control-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
  
  .timeline-controls.show-controls .date-range {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
}

/* Icon lock styling */
.icon-lock {
  width: 12px;
  height: 12px;
  color: #666;
  margin-left: var(--spacing-sm);
}

/* ========================================
   ARTICLE PAGE SPECIFIC STYLES (CONDENSED)
   ======================================== */
.article-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.article-author-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.author-avatar {
  width: 48px;
  height: 48px;
  position: relative;
  flex-shrink: 0;
}

.author-avatar .user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.author-avatar .icon-agent {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: white;
  border-radius: 50%;
  padding: 2px;
  width: 16px;
  height: 16px;
}

.author-name {
  color: white !important;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  line-height: 1.2;
}

.author-name:hover {
  text-decoration: underline;
  color: white !important;
}

.author-name:visited {
  color: white !important;
}

.article-publish-date {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.9rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.engagement-indicators {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  flex-shrink: 0;
}

.engagement-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.9rem;
  font-weight: 500;
}

.engagement-icon {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.7) !important;
}

.engagement-count {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
}

.engagement-text {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
  font-size: 0.85rem;
}

.internal-badge {
  background: rgba(255, 255, 255, 0.15);
  padding: var(--spacing-sm) 0.75rem;
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.internal-badge .engagement-icon {
  color: rgba(255, 255, 255, 0.9) !important;
}

.internal-badge .engagement-text {
  color: white !important;
  font-weight: 500;
}

.article-hero .hero-breadcrumbs {
  margin-bottom: var(--spacing-2xl);
}

.article-hero .hero-breadcrumbs .breadcrumbs {
  justify-content: center;
  margin: 0;
}

.article-hero .hero-breadcrumbs .breadcrumbs li {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.article-hero .hero-breadcrumbs .breadcrumbs li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.article-hero .hero-breadcrumbs .breadcrumbs li a:hover {
  color: white;
  text-decoration: underline;
}

.hero-breadcrumbs {
  margin-bottom: var(--spacing-lg);
}

.hero-search {
  max-width: 500px;
}

.article-page-container {
  margin-top: -100px;
  position: relative;
  z-index: 2;
}

.article-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-3xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
  
  .article-page-container {
    margin-top: -80px;
  }
}

.article-sidebar {
  position: sticky;
  top: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

@media (max-width: 1024px) {
  .article-sidebar {
    position: static;
    order: 2;
  }
}

.sidebar-card-header {
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.sidebar-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.sidebar-card-content {
  padding: var(--spacing-lg) var(--spacing-xl);
}

.collapsible-sidebar {
  display: flex;
  flex-direction: column;
}

.collapsible-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-normal);
  width: 100%;
}

.collapsible-sidebar-toggle:hover {
  background: var(--gray-50);
}

.collapsible-sidebar-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
}

.collapsible-sidebar-toggle-icon {
  color: var(--gray-500);
  transition: transform var(--transition-normal);
}

.collapsible-sidebar-toggle[aria-expanded="true"] .collapsible-sidebar-toggle-icon {
  transform: rotate(180deg);
}

.collapsible-sidebar-body {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
  border-top: 1px solid var(--gray-100);
  overflow: hidden;
  transition: all var(--transition-slow);
}

@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block !important;
  }
}

@media (max-width: 1023px) {
  .collapsible-sidebar-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
  
  .collapsible-sidebar-body[style*="display: block"] {
    max-height: 500px;
    padding: 0 var(--spacing-xl) var(--spacing-xl);
    opacity: 1;
  }
}

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

.sidebar-article-item {
  margin-bottom: var(--spacing-sm);
}

.sidebar-article-link {
  display: block;
  padding: var(--spacing-sm) 0;
  color: #333333;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: color var(--transition-normal);
  border-left: 3px solid transparent;
  padding-left: 0.75rem;
}

.sidebar-article-link:hover {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
}

.sidebar-article-link.current-article {
  color: rgba(114, 46, 133, 1);
  border-left-color: rgba(114, 46, 133, 1);
  font-weight: 500;
  background: #dab4e5;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.sidebar-see-more {
  display: inline-block;
  margin-top: var(--spacing-lg);
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}

.sidebar-see-more:hover {
  text-decoration: underline;
}

.article-subscribe-sidebar {
  font-size: 0.9rem;
}

.article-content-wrapper {
  padding: var(--spacing-3xl);
}

@media (max-width: 768px) {
  .article-content-wrapper {
    padding: var(--spacing-2xl);
  }
}

.article-body-content {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  line-height: 1.7;
  color: #333333;
  font-size: 1rem;
}

.article-body-content h1,
.article-body-content h2,
.article-body-content h3,
.article-body-content h4,
.article-body-content h5,
.article-body-content h6 {
  color: #1a1a1a;
  margin-top: 2.5rem;
  margin-bottom: var(--spacing-lg);
  line-height: 1.3;
}

.article-body-content h1 {
  font-size: 2rem;
  margin-top: var(--spacing-3xl);
}

.article-body-content h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--gray-200);
}

.article-body-content h3 {
  font-size: 1.25rem;
}

.article-body-content h4 {
  font-size: 1.1rem;
}

.article-body-content p {
  margin-bottom: var(--spacing-xl);
}

.article-body-content ul,
.article-body-content ol {
  margin-bottom: var(--spacing-xl);
  padding-left: var(--spacing-2xl);
  list-style: initial;
}

.article-body-content li {
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

.article-body-content blockquote {
  border-left: 4px solid rgba(114, 46, 133, 1);
  margin: var(--spacing-2xl) 0;
  padding: var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-2xl);
  background: #e0bfe9;
  font-style: italic;
  color: #262626;
}

.article-body-content code {
  background: var(--gray-100);
  padding: 0.25rem var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  color: #d63384;
}

.article-body-content pre {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  overflow-x: auto;
  margin: var(--spacing-2xl) 0;
}

.article-body-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.article-body-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--spacing-2xl) 0;
  box-shadow: var(--shadow-md);
}

.article-body-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-2xl) 0;
  font-size: 0.9rem;
}

.article-body-content th,
.article-body-content td {
  border: 1px solid var(--gray-200);
  padding: 0.75rem;
  text-align: left;
}

.article-body-content th {
  background: var(--gray-50);
  font-weight: 600;
  color: #1a1a1a;
}

.article-body-content a {
  color: rgba(114, 46, 133, 1);
  text-decoration: underline;
  font-weight: 500;
}

.article-body-content a:hover {
  color: #52215f;
}

.content-tags-section {
  max-width: 100%;
  width: 100%;
  margin: var(--spacing-3xl) auto 0;
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--gray-200);
}

.content-tags-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: var(--spacing-lg);
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-tag-item {
  margin: 0;
}

.content-tag-link {
  display: inline-block;
  background: var(--gray-100);
  color: #333333;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition-normal);
}

.content-tag-link:hover {
  background: rgba(114, 46, 133, 1);
  color: white;
  text-decoration: none;
}

.article-attachments-section {
  max-width: 100%;
  width: 100%;
  margin: var(--spacing-3xl) auto 0;
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--gray-200);
}

.attachments-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: var(--spacing-lg);
}

.attachments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.attachment-item {
  margin: 0;
}

.attachment-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.attachment-content:hover {
  background: var(--gray-100);
  border-color: rgba(114, 46, 133, 1);
}

.attachment-icon {
  color: var(--gray-500);
  flex-shrink: 0;
}

.attachment-info {
  flex: 1;
  min-width: 0;
}

.attachment-name {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}

.attachment-name:hover {
  text-decoration: underline;
}

.attachment-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  font-size: 0.85rem;
  color: var(--gray-500);
}

.attachment-download {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
}

.attachment-download:hover {
  text-decoration: underline;
}

.article-footer {
  padding: var(--spacing-2xl) var(--spacing-3xl);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

@media (max-width: 768px) {
  .article-footer {
    padding: var(--spacing-2xl);
  }
}

.article-votes-card {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: var(--spacing-2xl);
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.article-votes-question {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: var(--spacing-xl);
}

.article-votes-controls {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.vote-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg) var(--spacing-2xl);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: white;
  color: #333333;
  text-decoration: none;
  font-weight: 500;
  transition: all var(--transition-normal);
  cursor: pointer;
  min-width: 100px;
}

.vote-button:hover {
  border-color: rgba(114, 46, 133, 1);
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
}

.vote-up:hover {
  border-color: var(--status-operational);
  color: var(--status-operational);
}

.vote-down:hover {
  border-color: var(--status-down);
  color: var(--status-down);
}

.vote-selected.vote-up {
  background: var(--status-operational);
  border-color: var(--status-operational);
  color: white;
}

.vote-selected.vote-down {
  background: var(--status-down);
  border-color: var(--status-down);
  color: white;
}

.article-votes-count {
  font-size: 0.9rem;
  color: var(--gray-500);
}

.article-share-card {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: var(--spacing-xl);
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.article-share-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: var(--spacing-lg);
}

.article-more-questions {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.article-return-to-top {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.return-to-top-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
  padding: 0.75rem var(--spacing-xl);
  border: 1px solid rgba(114, 46, 133, 1);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
}

.return-to-top-link:hover {
  background: rgba(114, 46, 133, 1);
  color: white;
  text-decoration: none;
}

.article-relatives {
  padding: var(--spacing-3xl);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

@media (max-width: 768px) {
  .article-relatives {
    padding: var(--spacing-2xl);
  }
}

.related-content-section {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  margin-bottom: var(--spacing-3xl);
}

.related-content-section:last-child {
  margin-bottom: 0;
}

.related-content-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.article-comments-section {
  padding: var(--spacing-3xl);
  border-top: 1px solid var(--gray-200);
}

@media (max-width: 768px) {
  .article-comments-section {
    padding: var(--spacing-2xl);
  }
}

.comments-card {
  max-width: 800px;
  margin: 0 auto;
}

.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2xl);
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.comments-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.comments-count {
  color: var(--gray-500);
  font-size: 0.9rem;
  margin: 0;
}

.comments-sorter {
  display: flex;
  align-items: center;
}

.comments-sort-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: white;
  color: #333333;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.comments-sort-button:hover {
  border-color: rgba(114, 46, 133, 1);
  color: rgba(114, 46, 133, 1);
}

.comments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.comment-item {
  margin: 0;
}

.comment-wrapper {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.comment-avatar-section {
  flex-shrink: 0;
}

.comment-avatar {
  width: 40px;
  height: 40px;
}

.comment-avatar .user-avatar {
  width: 40px;
  height: 40px;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.comment-author-info {
  flex: 1;
  min-width: 0;
}

.comment-author-name {
  font-weight: 600;
  color: #333333;
  text-decoration: none;
  font-size: 0.95rem;
}

.comment-author-name:hover {
  text-decoration: underline;
}

.comment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin: 0.25rem 0;
  list-style: none;
  padding: 0;
}

.comment-badge {
  background: var(--gray-100);
  color: var(--gray-500);
  padding: 0.25rem var(--spacing-sm);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.comment-badge-title {
  background: #d1a1de;
  color: rgba(114, 46, 133, 1);
}

.comment-meta {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-top: 0.25rem;
}

.comment-meta-item {
  color: var(--gray-500);
  font-size: 0.85rem;
}

.comment-labels {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.comment-label {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
}

.comment-request-label {
  background: #d1a1de;
  color: rgba(114, 46, 133, 1);
}

.comment-pending-label {
  background: var(--status-disrupted-bg);
  color: var(--status-disrupted-text);
}

.comment-body {
  color: #333333;
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.comment-body p {
  margin-bottom: var(--spacing-lg);
}

.comment-body p:last-child {
  margin-bottom: 0;
}

.comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comment-vote {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.comment-vote-up,
.comment-vote-down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: white;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.comment-vote-up:hover {
  border-color: var(--status-operational);
  color: var(--status-operational);
  background: lighten(var(--status-operational), 45%);
}

.comment-vote-down:hover {
  border-color: var(--status-down);
  color: var(--status-down);
  background: lighten(var(--status-down), 45%);
}

.comment-vote-selected.comment-vote-up {
  background: var(--status-operational);
  border-color: var(--status-operational);
  color: white;
}

.comment-vote-selected.comment-vote-down {
  background: var(--status-down);
  border-color: var(--status-down);
  color: white;
}

.comment-vote-sum {
  font-weight: 600;
  color: #333333;
}

/* ========================================
   FEATURE CARDS & ADDITIONAL COMPONENTS
   ======================================== */
.feature-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  transition: all var(--transition-normal);
}

.feature-card:hover {
  border-color: rgba(114, 46, 133, 1);
  box-shadow: var(--shadow-md);
}

.feature-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.feature-description {
  font-size: 0.9rem;
  color: #262626;
  line-height: 1.5;
  margin: 0;
}

.feature-icon {
  width: 20px;
  height: 20px;
  background: #d1a1de;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.screenshot-caption {
  background: var(--gray-100);
  padding: 0.75rem;
  font-size: 0.85rem;
  color: var(--gray-500);
  text-align: center;
  font-style: italic;
}

/* Timeline Layout for What's New */
.timeline-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
  margin-top: -100px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .timeline-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin-top: -80px;
  }
}

.timeline-sidebar {
  position: sticky;
  top: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

@media (max-width: 1024px) {
  .timeline-sidebar {
    position: static;
    order: 2;
  }
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: #333333;
  transition: color var(--transition-normal);
}

.filter-option:hover {
  color: rgba(114, 46, 133, 1);
}

.filter-option input[type="checkbox"] {
  margin-right: 0.75rem;
  margin-left: 0;
  flex-shrink: 0;
}

.filter-label {
  flex: 1;
  font-weight: 500;
}

.filter-count {
  background: var(--gray-100);
  color: var(--gray-500);
  padding: 0.25rem var(--spacing-sm);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
}

.version-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.version-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.9rem;
}

.version-item:last-child {
  border-bottom: none;
}

.version-name {
  font-weight: 500;
  color: #333333;
}

.version-date {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.version-badge {
  background: #d1a1de;
  color: rgba(114, 46, 133, 1);
  padding: 0.25rem var(--spacing-sm);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.whats-new-controls {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  padding: 20px 24px;
  margin-bottom: 30px;
}

/* Enhanced Timeline Container for What's New */
.timeline-container {
  flex: 1;
  min-width: 0;
}

/* Timeline Item Spacing */
.timeline-item {
  margin-bottom: var(--spacing-2xl);
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* Accessibility Improvements */
.filter-option input[type="checkbox"]:focus {
  outline: 2px solid rgba(114, 46, 133, 1);
  outline-offset: 2px;
}

.release-link:focus {
  outline: 2px solid rgba(114, 46, 133, 1);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  .timeline-sidebar,
  .timeline-controls,
  .article-controls,
  .load-more-container,
  .load-more-articles-container,
  .timeline-actions,
  .section-actions {
    display: none;
  }
  
  .timeline-layout,
  .articles-container {
    grid-template-columns: 1fr;
    margin-top: 0;
  }
  
  .whats-new-card,
  .article-card {
    break-inside: avoid;
    margin-bottom: var(--spacing-2xl);
  }
  
  .article-card-link {
    padding: var(--spacing-lg);
  }
}

/* ========================================
   CATEGORY PAGE STYLES
   ======================================== */

/* Category Page Container */
.category-page-container {
  margin-top: -100px;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .category-page-container {
    margin-top: -80px;
  }
}

/* Category Statistics */
.category-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
  padding: var(--spacing-2xl);
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
}

@media (max-width: 768px) {
  .category-stats {
    gap: var(--spacing-2xl);
    padding: var(--spacing-xl);
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(114, 46, 133, 1);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--gray-500);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

@media (max-width: 768px) {
  .stat-number {
    font-size: 2rem;
  }
  
  .stat-label {
    font-size: 0.8rem;
  }
}

/* Section Cards */
.section-card {
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: all var(--transition-slow);
  display: flex;
  flex-direction: column;
  height: 450px;
  max-width: 600px;
  width: 100%;
}

.section-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Section Card Header */
.section-card-header {
  padding: var(--spacing-2xl);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.section-card-icon {
  width: 48px;
  height: 48px;
  background: #d1a1de;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(114, 46, 133, 1);
}

.section-card-header-content {
  flex: 1;
  min-width: 0;
}

.section-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333333;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.section-card-title-link {
  color: #333333;
  text-decoration: none;
  transition: color var(--transition-normal);
}

.section-card-title-link:hover {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
}

.section-card-description {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.section-card-stats {
  display: none !important;
}

.article-count {
  display: none !important;
}

/* Section Card Content */
.section-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.section-card-scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
}

.section-card-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.section-card-scroll-container::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.section-card-scroll-container::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.section-card-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* Article List */
.article-list {
  padding: 0;
}

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

.article-list-item {
  margin: 0;
  border-bottom: 1px solid var(--gray-100);
}

.article-list-item:last-child {
  border-bottom: none;
}

.article-list-item.article-promoted {
  background: var(--gray-50);
  border-left: 3px solid rgba(114, 46, 133, 1);
}

.article-list-link {
  display: block;
  padding: 1rem 1.5rem;
  color: #333333;
  text-decoration: none;
  transition: all var(--transition-normal);
}

.article-list-link:visited {
  color: #333333;
}

.article-list-link:hover,
.article-list-link:visited:hover {
  background: var(--gray-50);
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
}

.article-list-item.article-promoted .article-list-link {
  padding-left: 1.25rem;
}

.article-list-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.article-list-item-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 0;
}

.article-title-text {
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-list-item-title .icon-star {
  color: #fbbf24;
  flex-shrink: 0;
}

.article-list-item-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.article-list-item-meta .icon-lock {
  color: var(--gray-400);
}

.article-arrow {
  color: var(--gray-400);
  transition: transform var(--transition-normal);
}

.article-list-link:hover .article-arrow {
  transform: translateX(2px);
  color: rgba(114, 46, 133, 1);
}

/* Section Card Footer */
.section-card-footer {
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  margin-top: auto;
}

.section-card-link {
  display: block;
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.75rem var(--spacing-lg);
  border: 1px solid rgba(114, 46, 133, 1);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
}

.section-card-link:hover {
  background: rgba(114, 46, 133, 1);
  color: white;
  text-decoration: none;
}

/* Empty States */
.section-card-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl);
}

.category-empty-state {
  text-align: center;
  padding: var(--spacing-3xl);
  grid-column: 1 / -1;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.empty-icon {
  color: var(--gray-300);
  width: 64px;
  height: 64px;
}

.empty-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.empty-state p,
.empty-text {
  color: var(--gray-500);
  font-size: 0.95rem;
  margin: 0;
}

/* Category Actions */
.category-actions {
  text-align: center;
  padding: var(--spacing-2xl) 0;
}

.category-actions .button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.75rem var(--spacing-2xl);
  background: rgba(114, 46, 133, 1);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all var(--transition-normal);
  border: 1px solid rgba(114, 46, 133, 1);
}

.category-actions .button:hover {
  background: #52215f;
  border-color: #52215f;
  text-decoration: none;
  color: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .section-card-header {
    padding: var(--spacing-xl);
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-lg);
  }
  
  .section-card-title {
    font-size: 1.25rem;
  }
  
  .section-card-stats {
    align-self: center;
  }
  
  .article-list-item-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .article-list-item-meta {
    align-self: flex-end;
  }
  
  .article-list-link {
    padding: 0.75rem 1rem;
  }
  
  .section-card {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .section-card-header {
    padding: var(--spacing-lg);
  }
  
  .section-card-icon {
    width: 40px;
    height: 40px;
  }
  
  .section-card-title {
    font-size: 1.1rem;
  }
  
  .section-card-footer {
    padding: var(--spacing-lg);
  }

@media (max-width: 768px) {
  .hero-section .search-container,
  .status-page-header .search-container,
  .article-hero .search-container {
    width: calc(100% - 40px);
    max-width: none;
    margin: 0 auto var(--spacing-2xl);
  }
  
  .search-hero {
    padding: 16px 20px 16px 44px;
    font-size: 1rem;
  }
  
  .hero-section .search-icon,
  .status-page-header .search-icon,
  .article-hero .search-icon {
    left: 16px;
  }
}

@media (max-width: 480px) {
  .hero-section .search-container,
  .status-page-header .search-container,
  .article-hero .search-container {
    width: calc(100% - 20px);
  }
}

/* ========================================
   COMMUNITY SECTION HIDING - FISCAL CUSTOM
   ======================================== */
/* Hide community section completely regardless of settings */
.community-section, 
.community,
.community-image,
.community-link {
  display: none !important;
}

/* Hide footer on homepage only */
body .homepage-container ~ footer,
body:has(.homepage-container) footer,
.homepage-container + footer {
  display: none !important;
}

/* ========================================
   SEARCH RESULTS PAGE STYLING
   ======================================== */
/* Search Page Container - Match Article Page Exactly - Override Base Container */
.container.search-page-container {
  margin-top: -100px !important;
  position: relative !important;
  z-index: 2 !important;
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Search Layout - Match Article Page - Force Override with Diagnostic */
.container.search-page-container .search-layout,
div.container.search-page-container div.search-layout,
body .container.search-page-container .search-layout,
.search-page-container .search-layout {
  display: grid !important;
  grid-template-columns: 300px 1fr !important;
  gap: var(--spacing-3xl) !important;
  align-items: start !important;
  background: rgba(255, 0, 0, 0.1) !important; /* Temporary diagnostic */
  min-height: 200px !important; /* Temporary diagnostic */
}

@media (max-width: 1024px) {
  body .container.search-page-container .search-layout,
  .search-page-container .search-layout {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-2xl) !important;
  }
  
  .search-page-container {
    margin-top: -80px;
  }
}

/* Search Sidebar - Match Article Sidebar - Force Override */
body .search-page-container .search-sidebar,
.search-page-container .search-sidebar {
  position: sticky !important;
  top: var(--spacing-2xl) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-xl) !important;
}

/* Search Content Wrapper - Match Article Content - Force Override */
body .search-page-container .search-content-wrapper,
.search-page-container .search-content-wrapper {
  background: #ffffff !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--gray-200) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 10 !important;
}

body .search-page-container .search-results-card,
.search-page-container .search-results-card {
  padding: var(--spacing-3xl) !important;
}

@media (max-width: 1024px) {
  body .search-page-container .search-sidebar,
  .search-page-container .search-sidebar {
    position: static !important;
    order: 2 !important;
  }
}

.search-results-subheading {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--spacing-2xl);
  color: var(--gray-800);
}

/* Search Result Items */
.search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-results-list li {
  border-bottom: 1px solid var(--gray-200);
  padding: var(--spacing-2xl) 0;
}

.search-results-list li:last-child {
  border-bottom: none;
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.search-result-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.search-result-title a {
  color: var(--gray-900);
  text-decoration: none;
}

.search-result-title a:hover {
  color: rgba(114, 46, 133, 1);
}

.search-result-icons {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.search-result-votes,
.search-result-meta-count {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--gray-600);
}

.search-result-meta-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--gray-600);
}

.search-result-breadcrumbs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--spacing-xs);
}

.search-result-breadcrumbs li::after {
  content: "›";
  margin-left: var(--spacing-xs);
  color: var(--gray-400);
}

.search-result-breadcrumbs li:last-child::after {
  display: none;
}

.search-result-description {
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

/* No Results Styling */
.no-results {
  text-align: center;
  padding: var(--spacing-3xl);
}

.no-results .headline {
  font-size: 1.5rem;
  font-weight: 600;
  margin: var(--spacing-2xl) 0 var(--spacing-lg);
  color: var(--gray-800);
}

.no-results .action-prompt {
  margin-bottom: var(--spacing-lg);
  color: var(--gray-600);
}

.no-results .action-prompt a {
  color: rgba(114, 46, 133, 1);
  text-decoration: none;
  font-weight: 500;
}

.no-results .action-prompt a:hover {
  text-decoration: underline;
}

/* ========================================
   SEARCH SIDEBAR COLLAPSIBLE FUNCTIONALITY
   ======================================== */
/* Collapsible Sidebar Base Styles */
.collapsible-sidebar {
  margin-bottom: var(--spacing-xl);
}

.collapsible-sidebar-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--gray-700);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.collapsible-sidebar-toggle:hover {
  background-color: var(--gray-100);
}

.collapsible-sidebar-toggle:focus {
  outline: 2px solid rgba(114, 46, 133, 1);
  outline-offset: 2px;
}

/* Toggle Icons */
.collapsible-sidebar-toggle-icon {
  width: 20px;
  height: 20px;
  color: var(--gray-500);
  transition: transform var(--transition-fast);
}

.x-icon {
  display: none;
}

.chevron-icon {
  display: block;
}

/* Collapsed State */
.multibrand-filter-list--collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--transition-normal), opacity var(--transition-fast);
}

/* Expanded State */
.collapsible-sidebar--expanded .multibrand-filter-list {
  max-height: 500px;
  opacity: 1;
  transition: max-height var(--transition-normal), opacity var(--transition-fast);
}

/* Filter List Styling */
.multibrand-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.multibrand-filter-list li {
  border-bottom: 1px solid var(--gray-200);
}

.multibrand-filter-list li:last-child {
  border-bottom: none;
}

.sidenav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  text-decoration: none;
  color: var(--gray-700);
  transition: background-color var(--transition-fast);
}

.sidenav-item:hover {
  background-color: var(--gray-50);
  color: var(--gray-900);
}

.sidenav-item.current {
  background-color: rgba(99, 102, 241, 0.1);
  color: rgba(114, 46, 133, 1);
  font-weight: 500;
}

.filter-name {
  flex: 1;
}

.doc-count {
  color: var(--gray-500);
  font-size: 0.875rem;
}

/* Show More/Less Button */
.see-all-filters {
  width: 100%;
  padding: var(--spacing-md);
  background: transparent;
  border: none;
  color: rgba(114, 46, 133, 1);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  border-top: 1px solid var(--gray-200);
  transition: background-color var(--transition-fast);
}

.see-all-filters:hover {
  background-color: var(--gray-50);
}

/* Content Tag Filters */
.sidenav-tag {
  padding: var(--spacing-sm) var(--spacing-md);
}

.content-tag {
  display: flex;
  align-items: center;
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.875rem;
}

.content-tag .label {
  margin-right: var(--spacing-sm);
}

.content-tag a {
  display: flex;
  align-items: center;
  color: var(--gray-500);
  text-decoration: none;
}

.content-tag .close-icon {
  width: 12px;
  height: 12px;
}

/* Sidebar Title */
.sidenav-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

/* Remove any community-related spacing */
.container:has(.community-section) {
  display: none !important;
}

/* ========================================
   FISCAL CUSTOM - 100VH CONSTRAINED HOMEPAGE
   ======================================== */
/* Force entire page to fit in viewport on homepage */
body:has(.homepage-container) {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

/* Constrain main wrapper */
body:has(.homepage-container) > main {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hero section - fixed height */
.hero-section {
  flex: 0 0 auto !important;
  height: 280px !important;
  max-height: 280px !important;
}

/* Homepage container - fill remaining space */
.homepage-container {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important; /* Allow overlap */
}

/* Footer - fixed at bottom */
body:has(.homepage-container) .footer {
  flex: 0 0 auto !important;
  height: 60px !important;
  margin-top: 0 !important;
  border-top: 1px solid #ddd !important;
}

/* New flexbox container */
.card-flex-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 2rem !important;
  flex-wrap: nowrap !important;
  padding: 0 2rem !important;
  margin-top: -100px !important; /* Overlap hero */
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 20px !important;
}

/* Fixed card height - much smaller to fit everything */
.card-flex-container .content-card {
  flex: 1 1 0 !important;
  min-width: 280px !important;
  max-width: 380px !important;
  height: calc(100vh - 500px) !important; /* Reduced height */
  max-height: 380px !important; /* Lower max */
  min-height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  background: white !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--gray-200) !important;
  overflow: hidden !important;
}

/* For smaller viewports */
@media (max-height: 800px) {
  .hero-section {
    height: 240px !important;
  }
  .card-flex-container .content-card {
    height: calc(100vh - 520px) !important;
    max-height: 320px !important;
    min-height: 280px !important;
  }
}

@media (max-height: 700px) {
  .hero-section {
    height: 200px !important;
  }
  .card-flex-container .content-card {
    height: calc(100vh - 540px) !important;
    max-height: 280px !important;
    min-height: 250px !important;
  }
  .card-flex-container {
    margin-top: -80px !important;
  }
}

/* Card content area - NO SCROLL by default */
.card-flex-container .content-card .card-content {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ALL scroll containers - NO SCROLL by default */
.card-scroll-container,
.card-flex-container .card-scroll-container,
.content-card .card-scroll-container {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* FORCE NO SCROLLBARS on Service Status */
.service-status-card,
.service-status-card *,
.service-status-card .card-content,
.service-status-card .card-scroll-container,
.service-status-card .service-list-container,
.service-status-card .service-list {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  max-height: 100% !important;
}

/* FORCE NO SCROLLBARS on Quick Answers */
.quick-answers-card,
.quick-answers-card *,
.quick-answers-card .card-content,
.quick-answers-card .card-scroll-container {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* FORCE NO SCROLLBARS on What's New */
.whats-new-card,
.whats-new-card *,
.whats-new-card .card-content,
.whats-new-card .card-scroll-container {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* ONLY Help Documentation gets scrollbar */
.help-docs-card .card-scroll-container {
  overflow: hidden !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
}

/* Force horizontal layout - ABSOLUTE OVERRIDE */
.homepage-container {
  width: 100% !important;
}

body .homepage-container .card-flex-container,
body .card-flex-container,
.card-flex-container {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: row !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

/* Ensure cards are not stacking */
body .card-flex-container > article,
body .card-flex-container > .content-card,
.card-flex-container > * {
  display: block !important;
  float: none !important;
  position: relative !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .card-flex-container {
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
  
  .card-flex-container .content-card {
    flex: 0 1 calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
}

@media (max-width: 768px) {
  .card-flex-container {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .card-flex-container .content-card {
    flex: 0 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }
}

/* ========================================
   FISCAL CUSTOM OVERRIDES - COMPLETE DASHBOARD REDESIGN
   ======================================== */
/* NUCLEAR OPTION - Override EVERYTHING with ID selector for maximum specificity */
#main-content ~ .container .content-grid,
body .container.homepage-container main.content-grid,
body .homepage-container main.content-grid,
body main.content-grid,
body .content-grid,
.content-grid[role="main"] {
  display: flex !important;
  grid: none !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
  grid-auto-columns: unset !important;
  grid-auto-rows: unset !important;
  grid-auto-flow: unset !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 2rem !important;
  flex-wrap: nowrap !important;
  padding: 0 2rem !important;
  margin-top: -100px !important;
  min-height: calc(100vh - 280px) !important;
  padding-bottom: 32px !important;
}

/* Remove ALL grid properties from ALL cards - NUCLEAR SPECIFICITY */
body .container.homepage-container main.content-grid > *,
body .homepage-container main.content-grid > *,
body main.content-grid > *,
body .content-grid > *,
body .content-card,
body article.content-card,
body .service-status-card,
body .quick-answers-card,
body .whats-new-card,
body .help-docs-card {
  grid-column: unset !important;
  grid-column-start: unset !important;
  grid-column-end: unset !important;
  grid-row: unset !important;
  grid-row-start: unset !important;
  grid-row-end: unset !important;
  grid-area: unset !important;
  grid: none !important;
  flex: 1 1 0 !important;
  min-width: 280px !important;
  max-width: 380px !important;
  height: calc(100vh - 350px) !important;
  max-height: 500px !important;
  min-height: 400px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card content should not scroll unless needed */
body .content-card .card-content {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Only show scrollbar when content actually overflows */
body .content-card .card-scroll-container {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--gray-300) transparent !important;
}

/* Hide scrollbar when not needed */
body .service-status-card .card-scroll-container,
body .quick-answers-card .card-scroll-container,
body .whats-new-card .card-scroll-container {
  overflow-y: hidden !important;
}

/* Only Help Documentation needs scroll */
body .help-docs-card .card-scroll-container {
  overflow-y: auto !important;
}

/* WebKit scrollbar styling */
body .card-scroll-container::-webkit-scrollbar {
  width: 6px !important;
}

body .card-scroll-container::-webkit-scrollbar-track {
  background: transparent !important;
}

body .card-scroll-container::-webkit-scrollbar-thumb {
  background: var(--gray-300) !important;
  border-radius: 3px !important;
}

body .card-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400) !important;
}

/* Target each specific card to ENSURE no grid */
.service-status-card,
.quick-answers-card,
.whats-new-card,
.help-docs-card,
article.service-status-card,
article.quick-answers-card,
article.whats-new-card,
article.help-docs-card {
  grid-column: unset !important;
  grid-column-start: unset !important;
  grid-column-end: unset !important;
  grid-row: unset !important;
  grid-area: unset !important;
}

/* Hide Quick Answers completely */
.quick-answers-card[style*="display: none"],
article.quick-answers-card[style*="display: none"],
.quick-answers-card:empty,
article.quick-answers-card:empty {
  display: none !important;
  position: absolute !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  flex: 0 0 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Override the 16-column grid that was defined earlier */
.content-grid,
.status-grid,
.sections-grid {
  display: flex !important;
  grid-template-columns: none !important;
}

/* Responsive - allow wrapping on smaller screens */
@media (max-width: 1200px) {
  .container.homepage-container main.content-grid,
  .homepage-container main.content-grid,
  main.content-grid,
  .content-grid {
    flex-wrap: wrap !important;
  }
  
  .content-card,
  article.content-card {
    flex: 0 1 calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
}

@media (max-width: 768px) {
  .container.homepage-container main.content-grid,
  .homepage-container main.content-grid,
  main.content-grid,
  .content-grid {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .content-card,
  article.content-card {
    flex: 0 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }
}

/* =============================================== */
/* SEARCH RESULTS PAGE STYLES */
/* =============================================== */

/* Override Zendesk's default search page background */
.search-results {
  background: white !important;
}

/* Search page hero section - match homepage styling */
.section.hero-section,
#main-content.hero-section {
  background: linear-gradient(135deg, #6B46C1 0%, #9333EA 100%) !important;
  padding: 3rem 0 !important;
  margin-bottom: 2rem !important;
  color: white !important;
  position: relative !important;
}

.hero-container {
  max-width: var(--container-xl) !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
}

.hero-content {
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.hero-title {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  color: white !important;
}

.hero-subtitle {
  font-size: 1.25rem !important;
  margin-bottom: 2rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.hero-breadcrumbs {
  margin-bottom: 1rem !important;
}

.hero-breadcrumbs .breadcrumbs {
  justify-content: center !important;
}

.hero-breadcrumbs .breadcrumbs a {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Search box in hero */
.hero-content .search-container {
  max-width: 600px !important;
  margin: 0 auto !important;
  position: relative !important;
}

.hero-content .search {
  width: 100% !important;
  padding: 1rem 1rem 1rem 3rem !important;
  border-radius: 8px !important;
  border: none !important;
  font-size: 1rem !important;
}

.hero-content .search-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--gray-500) !important;
}

/* Search page main container */
.search-page-container {
  max-width: var(--container-xl) !important;
  margin: 0 auto !important;
  padding: 0 2rem 2rem !important;
}

/* Search layout with sidebar and content - FORCE LAYOUT */
.search-layout,
.container .search-layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  margin-top: -4rem !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Search sidebar - left side - FORCE POSITION */
.search-sidebar,
.search-layout .search-sidebar,
aside.search-sidebar {
  display: block !important;
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

/* Sidebar card styling */
.sidebar-card {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  position: sticky !important;
  top: 2rem !important;
}

.sidebar-card-header {
  padding: 1.5rem !important;
  background: linear-gradient(135deg, #6B46C1 0%, #9333EA 100%) !important;
  color: white !important;
}

.sidebar-card-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: white !important;
}

.sidebar-card-content {
  padding: 1.5rem !important;
}

/* Search results content area - right side - FORCE POSITION */
.search-content-wrapper,
.search-layout .search-content-wrapper,
section.search-content-wrapper {
  display: block !important;
  flex: 1 !important;
  min-width: 0 !important;
  max-width: calc(100% - 280px - 2rem) !important;
}

/* Search results card */
.search-results-card {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 2rem !important;
}

/* Search results list */
.search-results-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.search-results-list > li {
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 1.5rem 0 !important;
}

.search-results-list > li:last-child {
  border-bottom: none !important;
}

/* Search result titles */
.search-result-title {
  font-size: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

.search-result-title a {
  color: var(--purple-700) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.search-result-title a:hover {
  color: var(--purple-900) !important;
  text-decoration: underline !important;
}

/* Search result meta information */
.search-result-meta-container {
  display: flex !important;
  gap: 1rem !important;
  align-items: center !important;
  margin-bottom: 0.5rem !important;
  color: var(--gray-600) !important;
  font-size: 0.875rem !important;
}

.search-result-breadcrumbs {
  display: flex !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.search-result-breadcrumbs li::after {
  content: "/" !important;
  margin-left: 0.5rem !important;
  color: var(--gray-400) !important;
}

.search-result-breadcrumbs li:last-child::after {
  display: none !important;
}

/* Search result description */
.search-result-description {
  color: var(--gray-700) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Collapsible sidebar sections */
.filters-in-section {
  border-bottom: 1px solid var(--gray-200) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1rem !important;
}

.filters-in-section:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.collapsible-sidebar-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0.5rem 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--gray-700) !important;
}

.collapsible-sidebar-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0.5rem 0 !important;
  color: var(--gray-800) !important;
}

/* Filter lists */
.multibrand-filter-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.5rem 0 0 !important;
}

.multibrand-filter-list li {
  margin: 0.25rem 0 !important;
}

.sidenav-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.5rem 0.75rem !important;
  color: var(--gray-700) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: background-color 0.2s !important;
}

.sidenav-item:hover {
  background-color: var(--gray-100) !important;
  color: var(--purple-700) !important;
}

.sidenav-item.current {
  background-color: var(--purple-100) !important;
  color: var(--purple-700) !important;
  font-weight: 600 !important;
}

.filter-name {
  flex: 1 !important;
}

.doc-count {
  color: var(--gray-500) !important;
  font-size: 0.875rem !important;
}

/* No results state */
.no-results {
  text-align: center !important;
  padding: 3rem !important;
}

.no-results svg {
  margin-bottom: 2rem !important;
}

.no-results .headline {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  margin-bottom: 1rem !important;
}

.no-results .action-prompt {
  color: var(--gray-600) !important;
  margin-bottom: 1rem !important;
}

.no-results a {
  color: var(--purple-700) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.no-results a:hover {
  text-decoration: underline !important;
}

/* Responsive search layout */
@media (max-width: 992px) {
  .search-layout {
    flex-direction: column !important;
    margin-top: 0 !important;
  }
  
  .search-sidebar {
    flex: 1 !important;
    width: 100% !important;
    min-width: 100% !important;
    position: static !important;
  }
  
  .sidebar-card {
    position: static !important;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem !important;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
  }
  
  .search-page-container {
    padding: 0 1rem 2rem !important;
  }
}

/* =============================================== */
/* ZENDESK DEFAULT SEARCH STRUCTURE OVERRIDES */
/* =============================================== */

/* Force two-column layout for search results */
.search-results {
  display: flex !important;
  gap: 2rem !important;
  max-width: var(--container-xl) !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

/* Main search results container */
.container.search-results-container,
.search-page-container {
  max-width: var(--container-xl) !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

/* Force layout structure */
.search-results > .search-results-sidebar,
.search-results .search-results-sidebar {
  flex: 0 0 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 1.5rem !important;
  margin-right: 2rem !important;
  position: sticky !important;
  top: 2rem !important;
  height: fit-content !important;
  order: 1 !important;
}

/* Search results main column */
.search-results > .search-results-column,
.search-results .search-results-column,
.search-results > section:not(.search-results-sidebar),
.search-results > div:not(.search-results-sidebar) {
  flex: 1 !important;
  min-width: 0 !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 2rem !important;
  order: 2 !important;
}

/* Search results heading */
.search-results-subheading {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 2px solid var(--gray-200) !important;
}

/* Individual search result styling */
.search-results-list > li {
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 1.5rem 0 !important;
  margin: 0 !important;
}

.search-results-list > li:last-child {
  border-bottom: none !important;
}

/* Search result title links */
.search-result-title {
  font-size: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

.search-result-title a {
  color: #6B46C1 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}

.search-result-title a:hover {
  color: #9333EA !important;
  text-decoration: underline !important;
}

/* Search result meta info */
.search-result-meta-container {
  display: flex !important;
  gap: 1rem !important;
  align-items: center !important;
  margin: 0.5rem 0 !important;
  color: var(--gray-600) !important;
  font-size: 0.875rem !important;
}

/* Search result breadcrumbs */
.search-result-breadcrumbs {
  display: flex !important;
  gap: 0.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--gray-500) !important;
}

.search-result-breadcrumbs li {
  display: flex !important;
  align-items: center !important;
}

.search-result-breadcrumbs li::after {
  content: "/" !important;
  margin: 0 0.5rem !important;
  color: var(--gray-400) !important;
}

.search-result-breadcrumbs li:last-child::after {
  display: none !important;
}

.search-result-breadcrumbs a {
  color: var(--gray-600) !important;
  text-decoration: none !important;
}

.search-result-breadcrumbs a:hover {
  color: #6B46C1 !important;
  text-decoration: underline !important;
}

/* Search result description */
.search-result-description {
  color: var(--gray-700) !important;
  line-height: 1.6 !important;
  margin-top: 0.5rem !important;
}

/* Search filters in sidebar */
.sidenav-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid #6B46C1 !important;
}

.sidenav-item {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem 0 !important;
  color: var(--gray-700) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}

.sidenav-item:hover {
  background-color: #F3F0FF !important;
  color: #6B46C1 !important;
}

.sidenav-item.current {
  background-color: #6B46C1 !important;
  color: white !important;
  font-weight: 600 !important;
}

.sidenav-item.current .doc-count {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Filter counts */
.doc-count {
  color: var(--gray-500) !important;
  font-size: 0.875rem !important;
}

/* Collapsible filters */
.collapsible-sidebar-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0.5rem 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--gray-700) !important;
  transition: color 0.2s !important;
}

.collapsible-sidebar-toggle:hover {
  color: #6B46C1 !important;
}

.collapsible-sidebar-toggle-icon {
  transition: transform 0.2s !important;
}

.collapsible-sidebar--expanded .chevron-icon {
  transform: rotate(180deg) !important;
}

/* See more filters button */
.see-all-filters {
  background: none !important;
  border: none !important;
  color: #6B46C1 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 0.5rem 0 !important;
  margin-top: 0.5rem !important;
  font-size: 0.875rem !important;
  transition: color 0.2s !important;
}

.see-all-filters:hover {
  color: #9333EA !important;
  text-decoration: underline !important;
}

/* No results state */
.no-results {
  text-align: center !important;
  padding: 3rem !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.no-results .headline {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  margin: 1rem 0 !important;
}

.no-results .action-prompt {
  color: var(--gray-600) !important;
  margin: 0.5rem 0 !important;
}

.no-results a {
  color: #6B46C1 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.no-results a:hover {
  color: #9333EA !important;
  text-decoration: underline !important;
}

/* Pagination styling */
.pagination {
  margin-top: 2rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--gray-200) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.pagination a,
.pagination span {
  padding: 0.5rem 0.75rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  color: var(--gray-700) !important;
  transition: all 0.2s !important;
}

.pagination a:hover {
  background-color: #F3F0FF !important;
  color: #6B46C1 !important;
}

.pagination .current {
  background-color: #6B46C1 !important;
  color: white !important;
  font-weight: 600 !important;
}

/* =============================================== */
/* FIX FOR EMPTY SEARCH-LAYOUT - TARGET CONTAINER */
/* =============================================== */

/* Since search-layout is empty, target its parent container */
.container.search-page-container,
.search-page-container,
.container:has(.search-layout) {
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-flex-direction: row !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
  -webkit-flex-wrap: nowrap !important;
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: var(--container-xl) !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

/* Hide the empty search-layout div */
.search-layout:empty {
  display: none !important;
}

/* CRITICAL: Force sidebar to be 280px on left - as sibling of search-layout */
.search-page-container > .search-sidebar,
.search-page-container > aside.search-sidebar,
.container > .search-sidebar,
.search-sidebar,
aside.search-sidebar {
  display: block !important;
  -webkit-flex: 0 0 280px !important;
  -ms-flex: 0 0 280px !important;
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  float: none !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 2rem !important;
  order: 1 !important;
}

/* CRITICAL: Force content wrapper to fill remaining space - as sibling of search-layout */
.search-page-container > .search-content-wrapper,
.search-page-container > section.search-content-wrapper,
.container > .search-content-wrapper,
.search-content-wrapper,
section.search-content-wrapper {
  display: block !important;
  -webkit-flex: 1 1 auto !important;
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  order: 2 !important;
}

/* Style the cards inside */
.search-sidebar .sidebar-card {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
}

.search-content-wrapper .search-results-card {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 2rem !important;
  margin: 0 !important;
}

/* Override any conflicting styles */
.search-layout > * {
  float: none !important;
  position: relative !important;
}

.search-layout > .search-sidebar {
  position: sticky !important;
}

/* =============================================== */
/* AGGRESSIVE SEARCH LAYOUT OVERRIDES */
/* =============================================== */

/* Target the main container that holds both sidebar and results */
body.search-results-page .container,
body .search-results,
.search .container,
.container:has(.search-results-sidebar) {
  display: flex !important;
  gap: 2rem !important;
  align-items: flex-start !important;
}

/* Ensure sidebar is on the left */
.search-results-sidebar,
aside.search-results-sidebar,
.container > .search-results-sidebar {
  display: block !important;
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  float: none !important;
  position: sticky !important;
  top: 2rem !important;
  order: 1 !important;
}

/* Ensure main content is on the right */
.search-results-list,
.search-results > section:has(.search-results-list),
.container > section:has(.search-results-list),
.container > div:has(.search-results-list) {
  flex: 1 !important;
  min-width: 0 !important;
  order: 2 !important;
}

/* If Zendesk wraps content differently */
.search-results-sidebar + * {
  flex: 1 !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 2rem !important;
}

/* Override any grid or table layouts */
.search-results {
  display: flex !important;
  grid-template-columns: none !important;
  table-layout: auto !important;
}

/* Responsive - stack on mobile */
@media (max-width: 992px) {
  body.search-results-page .container,
  body .search-results,
  .search .container,
  .container:has(.search-results-sidebar) {
    flex-direction: column !important;
  }
  
  .search-results-sidebar,
  aside.search-results-sidebar,
  .container > .search-results-sidebar {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
  }
}