/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

/* Apply the font globally */
body {
    font-family: 'Outfit', sans-serif;
}

/* Brown theme custom styles - Define brown color scale */
:root {
    --color-brown-25: #fefcfa;
    --color-brown-50: #fdf8f4;
    --color-brown-100: #f7e6d4;
    --color-brown-200: #efd0b0;
    --color-brown-300: #daa573;
    --color-brown-400: #c4864f;
    --color-brown-500: #a66b35;
    --color-brown-600: #8b5a2e;
    --color-brown-700: #6b4423;
    --color-brown-800: #4a2f17;
    --color-brown-900: #2d1c0e;

    /* Amber accent colors - warm complement to brown */
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;

    /* Turquoise accent colors - cool complement to warm brown */
    --color-turquoise-50: #f0fdfa;
    --color-turquoise-100: #ccfbf1;
    --color-turquoise-200: #99f6e4;
    --color-turquoise-300: #5eead4;
    --color-turquoise-400: #2dd4bf;
    --color-turquoise-500: #14b8a6;
    --color-turquoise-600: #0891b2;
    --color-turquoise-700: #0e7490;
    --color-turquoise-800: #155e75;
    --color-turquoise-900: #164e63;
}

/* Brown background colors */
.bg-brown-25 {
    background-color: var(--color-brown-25);
}

.bg-brown-50 {
    background-color: var(--color-brown-50);
}

.bg-brown-100 {
    background-color: var(--color-brown-100);
}

.bg-brown-200 {
    background-color: var(--color-brown-200);
}

.bg-brown-300 {
    background-color: var(--color-brown-300);
}

.bg-brown-400 {
    background-color: var(--color-brown-400);
}

.bg-brown-500 {
    background-color: var(--color-brown-500);
}

.bg-brown-600 {
    background-color: var(--color-brown-600);
}

.bg-brown-700 {
    background-color: var(--color-brown-700);
}

.bg-brown-800 {
    background-color: var(--color-brown-800);
}

.bg-brown-900 {
    background-color: var(--color-brown-900);
}

/* Brown text colors */
.text-brown-50 {
    color: var(--color-brown-50);
}

.text-brown-100 {
    color: var(--color-brown-100);
}

.text-brown-200 {
    color: var(--color-brown-200);
}

.text-brown-300 {
    color: var(--color-brown-300);
}

.text-brown-400 {
    color: var(--color-brown-400);
}

.text-brown-500 {
    color: var(--color-brown-500);
}

.text-brown-600 {
    color: var(--color-brown-600);
}

.text-brown-700 {
    color: var(--color-brown-700);
}

.text-brown-800 {
    color: var(--color-brown-800);
}

.text-brown-900 {
    color: var(--color-brown-900);
}

/* Brown border colors */
.border-brown-300 {
    border-color: var(--color-brown-300);
}

.border-brown-400 {
    border-color: var(--color-brown-400);
}

.border-brown-500 {
    border-color: var(--color-brown-500);
}

/* Amber background colors */
.bg-amber-50 {
    background-color: var(--color-amber-50);
}

.bg-amber-100 {
    background-color: var(--color-amber-100);
}

.bg-amber-200 {
    background-color: var(--color-amber-200);
}

.bg-amber-500 {
    background-color: var(--color-amber-500);
}

.bg-amber-600 {
    background-color: var(--color-amber-600);
}

.bg-amber-700 {
    background-color: var(--color-amber-700);
}

.bg-amber-900 {
    background-color: var(--color-amber-900);
}

/* Turquoise background colors */
.bg-turquoise-50 {
    background-color: var(--color-turquoise-50);
}

.bg-turquoise-100 {
    background-color: var(--color-turquoise-100);
}

.bg-turquoise-200 {
    background-color: var(--color-turquoise-200);
}

.bg-turquoise-500 {
    background-color: var(--color-turquoise-500);
}

.bg-turquoise-600 {
    background-color: var(--color-turquoise-600);
}

.bg-turquoise-700 {
    background-color: var(--color-turquoise-700);
}

.bg-turquoise-900 {
    background-color: var(--color-turquoise-900);
}

/* Amber text colors */
.text-amber-50 {
    color: var(--color-amber-50);
}

.text-amber-100 {
    color: var(--color-amber-100);
}

.text-amber-200 {
    color: var(--color-amber-200);
}

.text-amber-500 {
    color: var(--color-amber-500);
}

.text-amber-600 {
    color: var(--color-amber-600);
}

.text-amber-700 {
    color: var(--color-amber-700);
}

.text-amber-800 {
    color: var(--color-amber-800);
}

.text-amber-900 {
    color: var(--color-amber-900);
}

/* Turquoise text colors */
.text-turquoise-50 {
    color: var(--color-turquoise-50);
}

.text-turquoise-100 {
    color: var(--color-turquoise-100);
}

.text-turquoise-200 {
    color: var(--color-turquoise-200);
}

.text-turquoise-500 {
    color: var(--color-turquoise-500);
}

.text-turquoise-600 {
    color: var(--color-turquoise-600);
}

.text-turquoise-700 {
    color: var(--color-turquoise-700);
}

.text-turquoise-800 {
    color: var(--color-turquoise-800);
}

.text-turquoise-900 {
    color: var(--color-turquoise-900);
}

/* Turquoise border colors */
.border-turquoise-500 {
    border-color: var(--color-turquoise-500);
}

.border-turquoise-600 {
    border-color: var(--color-turquoise-600);
}

.border-turquoise-700 {
    border-color: var(--color-turquoise-700);
}

/* Brown hover states */
.hover\:bg-brown-200:hover {
    background-color: var(--color-brown-200);
}

.hover\:bg-brown-700:hover {
    background-color: var(--color-brown-700);
}

.hover\:text-brown-200:hover {
    color: var(--color-brown-200);
}

.hover\:text-brown-700:hover {
    color: var(--color-brown-700);
}

/* Turquoise hover states */
.hover\:bg-turquoise-600:hover {
    background-color: var(--color-turquoise-600);
}

.hover\:bg-turquoise-700:hover {
    background-color: var(--color-turquoise-700);
}

.hover\:bg-turquoise-800:hover {
    background-color: var(--color-turquoise-800);
}

.hover\:text-turquoise-600:hover {
    color: var(--color-turquoise-600);
}

.hover\:text-turquoise-700:hover {
    color: var(--color-turquoise-700);
}

/* Amber hover states */
.hover\:bg-amber-600:hover {
    background-color: var(--color-amber-600);
}

.hover\:bg-amber-700:hover {
    background-color: var(--color-amber-700);
}

.hover\:text-amber-600:hover {
    color: var(--color-amber-600);
}

.hover\:text-amber-700:hover {
    color: var(--color-amber-700);
}

/* Gradient support */
.from-brown-50 {
    --tw-gradient-from: var(--color-brown-50);
}

.to-brown-100 {
    --tw-gradient-to: var(--color-brown-100);
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom focus styles for better accessibility */
a:focus,
button:focus {
    outline: 2px solid var(--color-turquoise-600);
    outline-offset: 2px;
}

/* Enhanced transitions */
.transition-colors {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Hero image rotation */
.hero-image {
    transform: rotate(2.0deg);
    transition: transform 0.3s ease;
}

.hero-image:hover {
    transform: rotate(0deg);
}

/* Syntax highlighting styles (Rouge Github theme) */
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #24292f;
  background-color: #f6f8fa;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #cf222e;
}
.highlight .gr {
  color: #f6f8fa;
}
.highlight .gd {
  color: #82071e;
  background-color: #ffebe9;
}
.highlight .nb {
  color: #953800;
}
.highlight .nc {
  color: #953800;
}
.highlight .no {
  color: #953800;
}
.highlight .nn {
  color: #953800;
}
.highlight .sr {
  color: #116329;
}
.highlight .na {
  color: #116329;
}
.highlight .nt {
  color: #116329;
}
.highlight .gi {
  color: #116329;
  background-color: #dafbe1;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #0550ae;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #0550ae;
}
.highlight .sb {
  color: #0550ae;
}
.highlight .bp {
  color: #0550ae;
}
.highlight .ne {
  color: #0550ae;
}
.highlight .nl {
  color: #0550ae;
}
.highlight .py {
  color: #0550ae;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #0550ae;
}
.highlight .o, .highlight .ow {
  color: #0550ae;
}
.highlight .gh {
  color: #0550ae;
  font-weight: bold;
}
.highlight .gu {
  color: #0550ae;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #0a3069;
}
.highlight .nd {
  color: #8250df;
}
.highlight .nf, .highlight .fm {
  color: #8250df;
}
.highlight .err {
  color: #f6f8fa;
  background-color: #82071e;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #6e7781;
}
.highlight .gl {
  color: #6e7781;
}
.highlight .gt {
  color: #6e7781;
}
.highlight .ni {
  color: #24292f;
}
.highlight .si {
  color: #24292f;
}
.highlight .ge {
  color: #24292f;
  font-style: italic;
}
.highlight .gs {
  color: #24292f;
  font-weight: bold;
}

/* Enhanced code block styling */
.highlight {
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  border: 1px solid #e1e4e8;
}

.highlight pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.875rem;
  line-height: 1.45;
}

.highlight code {
  background: transparent;
  padding: 0;
  border: none;
  color: inherit;
}

/* Inline code styling */
.prose code:not(.highlight code) {
  background-color: #f6f8fa;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.875em;
  color: #24292f;
  border: 1px solid #e1e4e8;
}

/* Remove backticks added by Tailwind prose plugin */
.prose code::before,
.prose code::after {
  content: "" !important;
}

/* Collection TOC Styles */
.toc-container {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-brown-300) var(--color-brown-100);
}

/* Webkit scrollbar styling for TOC */
.toc-container::-webkit-scrollbar {
  width: 8px;
}

.toc-container::-webkit-scrollbar-track {
  background: var(--color-brown-100);
  border-radius: 4px;
}

.toc-container::-webkit-scrollbar-thumb {
  background: var(--color-brown-300);
  border-radius: 4px;
}

.toc-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-brown-400);
}

/* Smooth transitions for TOC toggle icons */
.toggle-icon {
  transition: transform 0.2s ease-in-out;
}

/* Focus ring for brown theme */
.focus\:ring-brown-400:focus {
  --tw-ring-color: var(--color-brown-400);
  box-shadow: 0 0 0 3px rgba(196, 134, 79, 0.3);
}