/* -------------------------------------------------- */
/* OpenDay Theme for Help Scout - V14 (UI Perfection) */
/* -------------------------------------------------- */

/* 1. Design Tokens (Variables) */
:root {
  --brand-accent: #f97316; /* Vibrant Orange */
  --brand-accent-hover: #ea580c;
  --brand-dark: #1F2937; /* Dark Gray/Slate */
  --brand-light: #ffffff;
  --color-border: #e5e7eb;
  --color-bg-subtle: #f9fafb;
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --border-radius: 8px;
  --input-height-main: 44px;
  --input-height-sidebar: 40px;
  --hs-accent-color: var(--brand-accent);
}

/* 2. Base Styles & Typography */
*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  font-family: var(--font-family-base);
  color: var(--brand-dark);
  background-color: var(--brand-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
.jumbotron h1,
.jumbotron h2 {
  font-weight: 700;
  color: var(--brand-dark);
}
a,
.content a {
  color: var(--brand-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover,
.content a:hover {
  text-decoration: underline;
  color: var(--brand-accent-hover);
}

/* 3. Header & Navigation */
#header,
.header,
#main-header,
.navbar {
  background-color: var(--brand-light);
  border-bottom: 1px solid var(--color-border);
}
/* Logo Fix - Keep logo at reasonable size */
header img {
  max-height: 32px !important;
  height: auto !important;
  width: auto !important;
  vertical-align: middle !important;
}
.navbar .nav > li > a,
.nav-link,
#header-nav a,
#main-header .nav li a {
  color: var(--brand-accent);
  font-weight: 500;
}
.navbar .nav > li > a:hover,
.nav-link:hover,
.navbar .nav > .active > a,
#header-nav a:hover,
#main-header .nav li a:hover {
  color: var(--brand-dark);
}

/* 4. Buttons & Inputs */
input[type="text"],
input[type="search"],
input[type="email"],
textarea,
.form-control,
.search-query {
  padding: 10px 15px;
  height: var(--input-height-sidebar);
  border: 1px solid var(--color-border);
  font-family: inherit;
  background-color: var(--color-bg-subtle);
  box-shadow: none;
  border-radius: var(--border-radius);
  vertical-align: middle;
  transition: border-color 0.3s ease, background-color 0.3s ease,
    box-shadow 0.3s ease;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
textarea:focus,
.form-control:focus,
.search-query:focus {
  outline: none;
  border-color: var(--brand-accent);
  background-color: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}
.input-group .form-control,
#searchForm .form-control,
#searchBar .search-query {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group-btn .btn,
#searchForm .btn,
#searchBar button,
#sidebar .search-query + button {
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
body .btn-primary,
body input[type="submit"],
body .input-group-btn .btn,
body #searchBar button,
body #docsSearch .jumbotron #searchBar.input-group button.btn,
#sidebar .search-query + button {
  background: var(--brand-accent) !important;
  background-color: var(--brand-accent) !important;
  background-image: none !important;
  color: var(--brand-light) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}
body .btn-primary:hover,
body input[type="submit"]:hover,
body .input-group-btn .btn:hover,
body #searchBar button:hover,
body #docsSearch .jumbotron #searchBar.input-group button.btn:hover,
#sidebar .search-query + button:hover {
  text-decoration: none;
  background: var(--brand-accent-hover) !important;
  background-color: var(--brand-accent-hover) !important;
  background-image: none !important;
}
body .btn-primary:focus,
body input[type="submit"]:focus,
body .input-group-btn .btn:focus,
body #searchBar button:focus,
body #docsSearch .jumbotron #searchBar.input-group button.btn:focus,
#sidebar .search-query + button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}

/* 5. Contextual Search Bar Styling */
#sidebar .search-query {
  height: var(--input-height-sidebar) !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

/* Orange focus state for sidebar search */
#sidebar .search-query:focus,
#sidebar input[type="search"]:focus {
  outline: none !important;
  border-color: var(--brand-accent) !important;
  background-color: var(--brand-light) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}
#sidebar .search-query + button {
  /* Search Button Alignment Fix */
  height: var(--input-height-sidebar) !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix search icon color to be white */
#searchBar button svg,
#searchBar button i,
#searchBar button::before,
#sidebar .search-query + button svg,
#sidebar .search-query + button i,
#sidebar .search-query + button::before,
.input-group-btn .btn svg,
.input-group-btn .btn i,
.input-group-btn .btn::before,
button[type="submit"] svg,
button[type="submit"] i,
button[type="submit"]::before {
  color: white !important;
  fill: white !important;
  opacity: 1 !important;
}

/* Ensure icon visibility on orange background */
#searchBar button span,
#sidebar .search-query + button span,
.input-group-btn .btn span,
button[type="submit"] span {
  color: white !important;
  opacity: 1 !important;
}
#sidebar #searchBar,
#sidebar #search-form {
  /* Stretches search bar container */
  width: 100% !important;
}
.jumbotron .search-query,
#docsSearch .jumbotron #searchBar .search-query {
  height: var(--input-height-main) !important;
}
body .jumbotron #search-form .btn,
body .jumbotron .input-group-btn .btn,
body #docsSearch .jumbotron #searchBar.input-group button.btn {
  padding: 10px 20px !important;
  height: var(--input-height-main) !important;
  line-height: normal;
  vertical-align: middle;
}

/* 6. Content & Layout Adjustments */

/* --- SEARCH BUTTON ALIGNMENT FIX --- */
/* Remove all spacing between search input and button - ONLY in sidebar search */
#sidebar form[role="search"],
#sidebar #searchBar,
#sidebar .input-group:has(.search-query),
#sidebar .search-form {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Ensure search input takes available space and connects to button */
#sidebar .search-query,
#sidebar input[type="search"].search-query,
#sidebar .search-form .form-control {
  flex: 1 1 auto !important;
  margin: 0 !important;
  margin-right: 0 !important;
  border-right: none !important;
  display: inline-block !important;
  float: none !important;
}

/* Fix search button positioning WITHOUT overriding orange styling */
#sidebar .search-query + button,
#sidebar .input-group-btn button,
#sidebar form[role="search"] button[type="submit"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-left: -1px !important; /* Overlap to prevent gap */
  /* DO NOT add border-left - it overrides the orange button styling */
  display: inline-block !important;
  float: none !important;
  position: relative !important;
}

/* Remove any table-cell display that might cause gaps - only for search components */
#sidebar .input-group:has(.search-query) > *,
#sidebar .input-group > * {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* --- ORIGINAL GRID FIX --- */
/* This removes the grid system's default right-side spacing on the sidebar */
#sidebar.span3 {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.article-list a,
.c-wrapper-Sidenav__childCategory a,
#most-popular a,
.articles-list li a {
  color: var(--brand-dark);
  font-weight: 600;
}
.article-list a:hover,
.c-wrapper-Sidenav__childCategory a:hover,
#most-popular a:hover,
.articles-list li a:hover {
  color: var(--brand-accent);
  text-decoration: none;
}

/* 7. Category Card Styling */
.card,
.category-list .category {
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  background-color: var(--brand-light);
  text-align: center;
  padding: 25px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover,
.category-list .category:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-3px);
  text-decoration: none;
}
.card h3,
.card h4,
.card .card-title,
.category-list .category h3,
.category-list .category-name {
  color: var(--brand-dark);
  font-weight: 700;
  margin-bottom: 10px;
}
.card p,
.category-list .category p,
.category-list .article-count,
.card .card-meta {
  color: var(--brand-accent);
  font-weight: 500;
}
/* Keep category titles dark, only make other links orange */
.card a:not(h3 a):not(h4 a):not(.card-title),
.category-list .category a:not(.category-name) {
  color: var(--brand-accent) !important;
  font-weight: 500;
}
.card a:not(h3 a):not(h4 a):not(.card-title):hover,
.category-list .category a:not(.category-name):hover {
  text-decoration: none;
  color: var(--brand-accent-hover) !important;
}
/* Ensure category titles stay dark even when they're links */
.card h3 a,
.card h4 a,
.card .card-title a,
.category-list .category h3 a,
.category-list .category-name a {
  color: var(--brand-dark) !important;
  font-weight: 700;
}
.card h3 a:hover,
.card h4 a:hover,
.card .card-title a:hover,
.category-list .category h3 a:hover,
.category-list .category-name a:hover {
  color: var(--brand-dark) !important;
  text-decoration: none;
}

/* 8. Footer */
#hc-footer,
.footer,
#footer {
  background-color: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-light);
  margin-top: 60px;
  padding-top: 30px;
}

/* 9. Article List Icons (Fix) */
/* Replaces generic paper icon with a branded orange square */
.article-list i, 
.articles-list i,
li.article i {
    visibility: hidden; /* Hides the original paper icon */
    width: 14px; /* Maintains spacing for text alignment */
    position: relative;
}

.article-list i::after,
.articles-list i::after,
li.article i::after {
    content: "";
    visibility: visible;
    position: absolute;
    top: 7px; /* Adjusts vertical center */
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--brand-accent); /* Uses your Orange */
    border-radius: 2px; /* Slight roundness for modern look */
}

/* -------------------------------------------------- */
/* 10. Article Content Styling (Phase 2)              */
/* -------------------------------------------------- */

/* 10.1 Code Blocks */
pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  background-color: #1f2937;
  color: #e5e7eb;
  border-radius: var(--border-radius);
  padding: 16px 20px;
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: 0.9em;
  line-height: 1.7;
  border: 1px solid #374151;
}

code {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  background-color: #f3f4f6;
  color: #ef4444;
  padding: 2px 6px;
  font-size: 0.875em;
  border-radius: 4px;
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* 10.2 Tables */
#fullArticle table,
.content table,
article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
}

#fullArticle th,
.content th,
article th {
  background-color: var(--color-bg-subtle);
  font-weight: 600;
  text-align: left;
  color: var(--brand-dark);
}

#fullArticle th,
#fullArticle td,
.content th,
.content td,
article th,
article td {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
}

#fullArticle tr:nth-child(even),
.content tr:nth-child(even),
article tr:nth-child(even) {
  background-color: var(--color-bg-subtle);
}

#fullArticle tr:hover,
.content tr:hover,
article tr:hover {
  background-color: #fef3e2;
}

/* 10.3 Blockquotes / Callouts */
#fullArticle blockquote,
.content blockquote,
article blockquote {
  background-color: #fef3e2;
  border-left: 4px solid var(--brand-accent);
  padding: 16px 20px;
  margin: 1.5em 0;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-style: normal;
}

#fullArticle blockquote p,
.content blockquote p,
article blockquote p {
  margin: 0;
  color: var(--brand-dark);
}

/* 10.4 Images */
#fullArticle img,
.content img,
article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin: 1.5em 0;
}

/* 10.5 Video Embeds */
.video-container,
#fullArticle iframe[src*="youtube"],
#fullArticle iframe[src*="vimeo"],
#fullArticle iframe[src*="loom"],
.content iframe[src*="youtube"],
.content iframe[src*="vimeo"],
.content iframe[src*="loom"] {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 1.5em 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: none;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 16 / 9) {
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* 10.6 Step-by-Step Guides (Ordered Lists) */
#fullArticle ol,
.content ol,
article ol {
  counter-reset: step-counter;
  list-style: none;
  padding-left: 0;
  margin: 1.5em 0;
}

#fullArticle ol > li,
.content ol > li,
article ol > li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 50px;
  margin-bottom: 20px;
  min-height: 32px;
}

#fullArticle ol > li::before,
.content ol > li::before,
article ol > li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: var(--brand-accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9em;
}

/* Nested lists return to normal styling */
#fullArticle ol ol,
#fullArticle ol ul,
.content ol ol,
.content ol ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 12px;
  margin-bottom: 0;
}

#fullArticle ol ol > li::before,
#fullArticle ol ul > li::before,
.content ol ol > li::before,
.content ol ul > li::before {
  display: none;
}

#fullArticle ol ol > li,
#fullArticle ol ul > li,
.content ol ol > li,
.content ol ul > li {
  padding-left: 0;
  margin-bottom: 8px;
  min-height: auto;
}

/* Unordered lists */
#fullArticle ul,
.content ul,
article ul {
  margin: 1em 0;
  padding-left: 24px;
}

#fullArticle ul > li,
.content ul > li,
article ul > li {
  margin-bottom: 8px;
}

/* 10.7 Horizontal Rules */
#fullArticle hr,
.content hr,
article hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  margin: 2em 0;
}

/* -------------------------------------------------- */
/* 11. Category Card Icons (Phase 1)                  */
/* -------------------------------------------------- */

/* Base styles for category cards on homepage */
.category-list .category,
.twoCol .collection,
.threeCol .collection {
  position: relative;
  padding-top: 85px !important; /* Space for icon */
}

.category-list .category::before,
.twoCol .collection::before,
.threeCol .collection::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
}

/* About OpenDay - Building icon */
a[href*="category/42"]::before,
.category-list a[href*="42-about"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f97316' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'/%3E%3C/svg%3E");
}

/* Account & Security - Shield icon */
a[href*="category/44"]::before,
.category-list a[href*="44-account"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f97316' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E");
}

/* Articles - Newspaper icon */
a[href*="category/37"]::before,
.category-list a[href*="37-articles"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f97316' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z'/%3E%3C/svg%3E");
}

/* For Sellers - Shopping cart icon */
a[href*="category/40"]::before,
.category-list a[href*="40-for-sellers"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f97316' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E");
}

/* For Shoppers - Shopping bag icon */
a[href*="category/41"]::before,
.category-list a[href*="41-for-shoppers"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f97316' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'/%3E%3C/svg%3E");
}

/* Policies & Legal - Scale/Balance icon */
a[href*="category/43"]::before,
.category-list a[href*="43-policies"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f97316' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3'/%3E%3C/svg%3E");
}

/* -------------------------------------------------- */
/* 12. Enhanced Footer (Phase 4)                      */
/* -------------------------------------------------- */

#hc-footer,
.footer,
#footer {
  background: linear-gradient(180deg, var(--color-bg-subtle) 0%, #f3f4f6 100%);
  border-top: 1px solid var(--color-border);
  padding: 40px 20px 30px;
  margin-top: 80px;
  text-align: center;
}

#hc-footer a,
.footer a,
#footer a {
  color: var(--brand-accent);
  font-weight: 500;
  transition: color 0.2s ease;
}

#hc-footer a:hover,
.footer a:hover,
#footer a:hover {
  color: var(--brand-accent-hover);
}

/* -------------------------------------------------- */
/* 13. Search Results Styling (Phase 5)              */
/* -------------------------------------------------- */

.searchResults,
#searchResults,
.search-results {
  padding: 20px 0;
}

.searchResults .result,
.search-result,
#searchResults li {
  padding: 20px;
  margin-bottom: 16px;
  background: var(--brand-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.searchResults .result:hover,
.search-result:hover,
#searchResults li:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.1);
}

.searchResults .result h3,
.search-result h3,
#searchResults li h3 {
  color: var(--brand-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.searchResults .result p,
.search-result p,
#searchResults li p {
  color: #6b7280;
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0;
}

/* Highlight search terms */
.searchResults mark,
.search-result mark,
#searchResults mark {
  background-color: #fef3c7;
  padding: 2px 4px;
  border-radius: 2px;
  color: var(--brand-dark);
}

/* -------------------------------------------------- */
/* 14. Print Button & Miscellaneous (Phase 7)        */
/* -------------------------------------------------- */

/* Print button */
.print-article,
a[href="javascript:window.print()"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 0.85em;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
}

.print-article:hover,
a[href="javascript:window.print()"]:hover {
  color: var(--brand-dark);
  background-color: var(--color-bg-subtle);
  text-decoration: none;
}

/* Last updated timestamp */
.articleFoot time,
time.lu {
  color: #9ca3af;
  font-size: 0.85em;
  font-style: italic;
}

/* Sort dropdown - using HelpScout defaults (no custom styling) */

/* Breadcrumbs */
.breadcrumb,
.breadcrumbs {
  font-size: 0.9em;
  color: #6b7280;
  margin-bottom: 20px;
}

.breadcrumb a,
.breadcrumbs a {
  color: var(--brand-accent);
}

.breadcrumb span,
.breadcrumbs span {
  margin: 0 8px;
  color: #d1d5db;
}

/* -------------------------------------------------- */
/* 15. Enhanced Interactivity (Phase 8)              */
/* -------------------------------------------------- */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Focus visible states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Selection color */
::selection {
  background-color: rgba(249, 115, 22, 0.2);
  color: var(--brand-dark);
}

/* -------------------------------------------------- */
/* 16. Mobile Responsiveness (Phase 6)               */
/* -------------------------------------------------- */

@media (max-width: 768px) {
  /* Category cards - better spacing */
  .category-list .category,
  .twoCol .collection,
  .threeCol .collection {
    margin-bottom: 16px;
    padding: 20px;
    padding-top: 75px !important;
  }

  .category-list .category::before,
  .twoCol .collection::before,
  .threeCol .collection::before {
    width: 40px;
    height: 40px;
    top: 16px;
  }

  /* Search banner height */
  #docsSearch {
    padding: 30px 15px;
  }

  #docsSearch h1 {
    font-size: 1.5rem;
  }

  /* Article content */
  #fullArticle,
  .content,
  article {
    padding: 15px;
  }

  /* Sidebar search */
  #sidebar {
    margin-bottom: 20px;
  }

  /* Tables - horizontal scroll */
  #fullArticle table,
  .content table,
  article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Code blocks */
  pre {
    font-size: 0.85em;
    padding: 12px;
  }

  /* Ordered list step numbers */
  #fullArticle ol > li,
  .content ol > li {
    padding-left: 42px;
  }

  #fullArticle ol > li::before,
  .content ol > li::before {
    width: 28px;
    height: 28px;
    font-size: 0.85em;
  }
}

@media (max-width: 480px) {
  /* Category cards - full width with less padding */
  .category-list .category,
  .twoCol .collection,
  .threeCol .collection {
    padding: 16px;
    padding-top: 70px !important;
  }

  .category-list .category::before,
  .twoCol .collection::before,
  .threeCol .collection::before {
    width: 36px;
    height: 36px;
    top: 14px;
  }

  /* Search banner */
  #docsSearch h1 {
    font-size: 1.25rem;
  }

  /* Footer */
  #hc-footer,
  .footer,
  #footer {
    padding: 30px 15px 20px;
    margin-top: 40px;
  }
}