/* Custom styles for Okahu documentation */

/* Okahu Color Variables */
:root {
  --okahu-ocean: hsl(197, 62%, 38%);
  --okahu-jade: hsl(174, 57%, 47%);
  --okahu-sand: hsl(38, 100%, 97%);
  --okahu-mustard: hsl(37, 100%, 74%);
  --okahu-mustard-600: hsl(27, 93%, 48%);
  --okahu-gray-00: hsl(200, 18%, 93%);
  --okahu-gray-01: hsl(206, 13%, 79%);
  --okahu-gray-02: hsl(189, 10%, 59%);
  --okahu-gray-03: hsl(190, 17%, 30%);
  --okahu-gray-04: hsl(190, 71%, 14%);
  --okahu-gray-05: hsl(196, 71%, 13%);
  --okahu-gray-06: hsl(197, 71%, 11%);
  --grey-05: #0a2d3a;
}

/* Override Material theme colors with Okahu colors */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--okahu-ocean);
  --md-primary-fg-color--light: var(--okahu-ocean);
  --md-primary-fg-color--lighter: var(--okahu-ocean);
  --md-primary-fg-color--lightest: var(--okahu-ocean);
  --md-accent-fg-color: var(--okahu-jade);
  --md-accent-fg-color--transparent: hsla(174, 57%, 47%, 0.1);
  --md-default-fg-color: var(--okahu-gray-05);
  --md-default-fg-color--light: var(--okahu-gray-03);
  --md-default-fg-color--lighter: var(--okahu-gray-02);
  --md-default-fg-color--lightest: var(--okahu-gray-01);
  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: var(--okahu-sand);
  --md-default-bg-color--lighter: var(--okahu-gray-00);
  --md-default-bg-color--lightest: #ffffff;
  --md-code-bg-color: var(--okahu-gray-00);
  --md-code-fg-color: var(--okahu-gray-05);
  --md-footer-bg-color: var(--okahu-sand);
  --md-footer-fg-color: var(--okahu-gray-03);
  --md-header-bg-color: var(--okahu-ocean);
  --md-header-fg-color: #ffffff;
  --md-typeset-a-color: var(--okahu-jade);
  --md-typeset-mark-color: var(--okahu-mustard);
  --md-admonition-fg-color: var(--okahu-gray-05);
  --md-admonition-bg-color: var(--okahu-gray-00);
  --md-admonition--note-border-color: var(--okahu-ocean);
  --md-admonition--note-bg-color: hsla(197, 62%, 38%, 0.1);
  --md-admonition--warning-border-color: var(--okahu-mustard-600);
  --md-admonition--warning-bg-color: hsla(37, 100%, 74%, 0.1);
  --md-admonition--tip-border-color: var(--okahu-jade);
  --md-admonition--tip-bg-color: hsla(174, 57%, 47%, 0.1);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--okahu-ocean);
  --md-primary-fg-color--light: var(--okahu-ocean);
  --md-primary-fg-color--lighter: var(--okahu-ocean);
  --md-primary-fg-color--lightest: var(--okahu-ocean);
  --md-accent-fg-color: var(--okahu-jade);
  --md-accent-fg-color--transparent: hsla(174, 57%, 47%, 0.1);
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: var(--okahu-gray-01);
  --md-default-fg-color--lighter: var(--okahu-gray-02);
  --md-default-fg-color--lightest: var(--okahu-gray-03);
  --md-default-bg-color: var(--okahu-gray-06);
  --md-default-bg-color--light: var(--okahu-gray-05);
  --md-default-bg-color--lighter: var(--okahu-gray-04);
  --md-default-bg-color--lightest: var(--okahu-gray-03);
  --md-code-bg-color: var(--okahu-gray-05);
  --md-code-fg-color: #ffffff;
  --md-footer-bg-color: var(--okahu-gray-06);
  --md-footer-fg-color: var(--okahu-gray-01);
  --md-header-bg-color: var(--okahu-ocean);
  --md-header-fg-color: #ffffff;
  --md-typeset-a-color: var(--okahu-jade);
  --md-typeset-mark-color: var(--okahu-mustard);
  --md-admonition-fg-color: #ffffff;
  --md-admonition-bg-color: var(--okahu-gray-05);
  --md-admonition--note-border-color: var(--okahu-ocean);
  --md-admonition--note-bg-color: hsla(197, 62%, 38%, 0.2);
  --md-admonition--warning-border-color: var(--okahu-mustard-600);
  --md-admonition--warning-bg-color: hsla(37, 100%, 74%, 0.2);
  --md-admonition--tip-border-color: var(--okahu-jade);
  --md-admonition--tip-bg-color: hsla(174, 57%, 47%, 0.2);
}

/* Improve image display */
img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1em 0;
}

/* Better code block styling */
.highlight pre {
  border-radius: 6px;
}

/* Improve table styling */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
}

table th {
  background-color: var(--md-default-fg-color--lightest);
  font-weight: 600;
}

table td, table th {
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.6em 1em;
}

/* Enhance admonitions */
.admonition {
  border-radius: 6px;
  margin: 1.5em 0;
}

/* Better spacing for navigation */
.md-nav__item {
  padding: 0.2em 0;
}

/* Logo sizing */
.md-header__button.md-logo img {
  height: 32px;
  width: auto;
}

/* Improve link visibility */
a.external-link::after {
  content: " ↗";
  font-size: 0.8em;
}

/* Make headings stand out */
h1, h2, h3 {
  font-weight: 600;
  margin-top: 1.5em;
}

h1 {
  border-bottom: 2px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.3em;
}

/* Better inline code styling */
code {
  background-color: var(--md-code-bg-color);
  border-radius: 3px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}

/* Improve table of contents styling on the right */
.md-sidebar--secondary {
  position: sticky;
  top: 4.8rem;
}

.md-sidebar--secondary .md-sidebar__scrollwrap {
  margin: 0;
}

.md-sidebar--secondary .md-nav__title {
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
}

/* Style TOC links to match primary navigation - smaller font size */
.md-nav--secondary .md-nav__link {
  /* padding: 0.3rem 0.8rem; */
  font-size: 0.7rem;
  /* line-height: 1.3; */
  line-height: 1;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--okahu-jade);
  font-weight: 600;
}

/* Match primary navigation font size and spacing - smaller */
.md-nav--secondary .md-nav__item {
  font-size: 0.7rem;
  /* line-height: 1.3; */
  line-height: 1;
}

.md-nav--secondary .md-nav__item .md-nav__link {
  font-size: 0.7rem;
  line-height: 1.3;
  /* line-height: 1; */
  /* padding: 0.25rem 0.8rem; */
}

/* Ensure consistent spacing with primary nav - smaller */
.md-nav--secondary .md-nav__list {
  font-size: 0.7rem;
}

.md-nav--secondary .md-nav__list .md-nav__item {
  font-size: 0.7rem;
}

/* Nested navigation items should be even smaller */
.md-nav--secondary .md-nav .md-nav__list .md-nav__item {
  font-size: 0.65rem;
}

.md-nav--secondary .md-nav .md-nav__list .md-nav__item .md-nav__link {
  font-size: 0.65rem;
  padding: 0.1rem 0.2rem;
}

/* Okahu-specific enhancements */
.md-header {
  background: var(--grey-05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 48px;
}

.md-header__inner {
  height: 48px;
}

.md-header__button {
  height: 48px;
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 48px;
}

/* Fix Okahu logo vertical centering and white text */
.md-header__button.md-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 0.8rem;
}

.md-header__button.md-logo img {
  height: 32px;
  width: auto;
  vertical-align: middle;
}

/* Remove the text after logo - just show the logo image */

/* Enhanced navigation styling */
.md-nav__link--active {
  color: var(--okahu-jade) !important;
  font-weight: 600;
}

.md-nav__link:hover {
  color: var(--okahu-ocean);
}

/* Code blocks with Okahu styling */
.highlight pre {
  background: var(--okahu-gray-00);
  /* border: 1px solid var(--okahu-gray-01); */
  border-radius: 8px;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
}

[data-md-color-scheme="slate"] .highlight pre {
  background: var(--okahu-gray-05);
  border-color: var(--okahu-gray-04);
}

/* Enhanced table styling - clean and minimalist */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

table th {
  background-color: #ffffff;
  color: #000000;
  font-weight: bold;
  text-transform: none;
  font-size: inherit;
  letter-spacing: normal;
  border-bottom: 1px solid #e0e0e0;
}

table td, table th {
  border: 1px solid #e0e0e0;
  padding: 0.8rem 1rem;
  text-align: left;
}

table tr:nth-child(even) {
  background-color: #ffffff;
}

table tr:nth-child(odd) {
  background-color: #ffffff;
}

[data-md-color-scheme="slate"] table th {
  background-color: var(--okahu-gray-05);
  color: #ffffff;
  border-bottom-color: var(--okahu-gray-04);
}

[data-md-color-scheme="slate"] table td, 
[data-md-color-scheme="slate"] table th {
  border-color: var(--okahu-gray-04);
}

[data-md-color-scheme="slate"] table tr:nth-child(even),
[data-md-color-scheme="slate"] table tr:nth-child(odd) {
  background-color: var(--okahu-gray-05);
}

/* Enhanced admonitions */
.admonition {
  border-radius: 8px;
  margin: 1.5em 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.admonition.note {
  border-left: 4px solid var(--okahu-ocean);
}

.admonition.tip {
  border-left: 4px solid var(--okahu-jade);
}

.admonition.warning {
  border-left: 4px solid var(--okahu-mustard-600);
}

/* Enhanced buttons and interactive elements */
.md-button {
  background: var(--okahu-jade);
  color: white;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.md-button:hover {
  background: var(--okahu-ocean);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced search styling - white background with dark text */
.md-search__form {
  background: white !important;
  border: 1px solid var(--okahu-gray-01);
  border-radius: 6px;
  color: var(--okahu-gray-05);
}

.md-search__form:hover {
  background: white !important;
  border-color: var(--okahu-ocean);
}

.md-search__input {
  color: var(--okahu-gray-05) !important;
  background: transparent !important;
}

.md-search__input::placeholder {
  color: var(--okahu-gray-02) !important;
}

.md-search__input::-webkit-input-placeholder {
  color: var(--okahu-gray-02) !important;
}

.md-search__input::-moz-placeholder {
  color: var(--okahu-gray-02) !important;
}

.md-search__input:-ms-input-placeholder {
  color: var(--okahu-gray-02) !important;
}

[data-md-color-scheme="slate"] .md-search__form {
  background: white !important;
  border-color: var(--okahu-gray-04);
  color: var(--okahu-gray-05);
}

[data-md-color-scheme="slate"] .md-search__input {
  color: var(--okahu-gray-05) !important;
  background: transparent !important;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: var(--okahu-gray-02) !important;
}

/* Hide dark/light mode toggle and other header elements */
.md-header__button[data-md-component="palette"] {
  display: none !important;
}

.md-header__button[aria-label="Switch to dark mode"],
.md-header__button[aria-label="Switch to light mode"] {
  display: none !important;
}

/* Hide all palette/theme toggle buttons */
.md-header__button[data-md-component="palette"],
.md-header__button[title*="Switch to"],
.md-header__button[aria-label*="Switch to"] {
  display: none !important;
}

/* Hide gear icons specifically */
.md-header__button .md-icon {
  display: none !important;
}

/* Hide any remaining toggle buttons */
.md-header__button[title*="Switch"],
.md-header__button[title*="Toggle"],
.md-header__button[title*="theme"],
.md-header__button[title*="mode"] {
  display: none !important;
}

/* Target specific Material Design icons that might be gear icons */
.md-header__button .md-icon[data-md-icon] {
  display: none !important;
}

/* Hide any button with gear/brightness icons */
.md-header__button[data-md-component="palette"] .md-icon,
.md-header__button .md-icon[data-md-icon="brightness"],
.md-header__button .md-icon[data-md-icon="palette"] {
  display: none !important;
}

/* Keep the title text visible in header when scrolling */
.md-header__title {
  display: block !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 48px;
  color: white;
}

/* Better mobile responsiveness */
@media screen and (max-width: 76.1875em) {
  .md-nav__source {
    display: none;
  }
  
  .md-header {
    background: var(--grey-05);
  }
}