/* Earthy & Sunset Tech Palette - Lost Creek Technology */

:root {
  /* Brand Tan Accents */
  --logo-tan-light: #8A4B16; /* Light mode tan */
  --logo-tan-dark: #E0A96D;  /* Dark mode sandy tan */

  /* Colorado Sunset Purple Accents */
  --sunset-purple-light: #582C6D; /* Deep sunset purple */
  --sunset-purple-dark: #E2A0E6;  /* Sunset lavender */

  /* Top Bar Sky Blue Backgrounds */
  --sky-blue-nav-light: #D4E8F6; /* Soft Sky Blue */
  --sky-blue-nav-dark: #1A3048;  /* Deep Night-Sky Blue */
}

/* ==========================================================================
   1. TOP HEADER ONLY (Restricted to <header> so sidebars stay clean)
   ========================================================================== */
header {
  background-color: var(--sky-blue-nav-light) !important;
  border-bottom: 1px solid #B0D2EC !important;
}

html[class~="dark"] header {
  background-color: var(--sky-blue-nav-dark) !important;
  border-bottom: 1px solid #28476B !important;
}

/* Ensure navbar inner wrapper stays transparent */
header nav {
  background-color: transparent !important;
}

/* "Lost Creek Technology" Site Name (Tan) */
header a.hx-logo,
header .hx-navbar-title,
header a[href="/"] {
  color: var(--logo-tan-light) !important;
  font-weight: 700 !important;
}

html[class~="dark"] header a.hx-logo,
html[class~="dark"] header .hx-navbar-title,
html[class~="dark"] header a[href="/"] {
  color: var(--logo-tan-dark) !important;
}

/* "Services" & "Tech Reference" Links (Deep Colorado Sunset Purple) */
header nav a:not([href="/"]):not(.hx-logo) {
  color: var(--sunset-purple-light) !important;
  font-weight: 600 !important;
}

html[class~="dark"] header nav a:not([href="/"]):not(.hx-logo) {
  color: var(--sunset-purple-dark) !important;
}

/* header Site Name change */
a.hx\:flex span.hx\:font-extrabold {
    color: var(--logo-tan-light) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   2. ARTICLE TITLES & TECH REFERENCE LIST ITEMS (Tan)
   ========================================================================== */
main h1,
main h2,
main h3,
article h1,
article h2,
.content h1,
.hx-text-4xl,
main article a,
main .hx-card a {
  color: var(--logo-tan-light) !important;
}

html[class~="dark"] main h1,
html[class~="dark"] main h2,
html[class~="dark"] main h3,
html[class~="dark"] article h1,
html[class~="dark"] article h2,
html[class~="dark"] .content h1,
html[class~="dark"] .hx-text-4xl,
html[class~="dark"] main article a,
html[class~="dark"] main .hx-card a {
  color: var(--logo-tan-dark) !important;
}

/* Hover Accent for Tech Reference Links */
main article a:hover,
main .hx-card a:hover {
  color: #F97316 !important; /* Sunset orange hover */
}

/* ==========================================================================
   3. SEARCH BOX STYLING
   ========================================================================== */
header input[type="search"] {
  background-color: #FAF3EC !important;
  border: 1px solid #C28E58 !important;
  color: #2D241E !important;
}

html[class~="dark"] header input[type="search"] {
  background-color: #243547 !important;
  border: 1px solid #E0A96D !important;
  color: #FAF8F5 !important;
}

/* ==========================================================================
   4. BASE BACKGROUNDS & CODE HIGHLIGHTS
   ========================================================================== */
html[class~="dark"] {
  --hx-bg-color: #171513;
  --hx-bg-soft: #23201C;
  --hx-color-primary-500: #F97316;
  --hx-color-primary-600: #EA580C;
}

html:not([class~="dark"]) {
  --hx-bg-color: #FAF8F5;
  --hx-text-color: #2D241E;
}

.content code:not(.code-block code) {
  color: #D97706;
}

html[class~="dark"] .content code:not(.code-block code) {
  color: #FB923C;
}

/* ==========================================================================
   5. EXPAND READING COLUMN & TABLE WIDTHS
   ========================================================================== */
/* Expand the main article reading column width */
main article,
main .content,
.hextra-content,
main div[class*="max-w-3xl"],
main div[class*="max-w-4xl"] {
  max-width: 1200px !important; /* Increase to 1400px or 90rem if you need even more room */
}

/* Force tables to expand to full width and handle overflow cleanly */
main article table,
.content table {
  width: 100% !important;
  display: table !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Ensure wide tables scroll horizontally on smaller screens instead of crushing columns */
main article div:has(> table),
.content div:has(> table) {
  overflow-x: auto !important;
}