/* ==========================================================================
   Ptera Software - Custom Furo Theme
   Brand Colors: Red #E62129, Black #000000, Gray #EEEEEE
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Light Mode)
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --ptera-red: #E62129;
  --ptera-red-hover: #c91b22;
  --ptera-red-light: #fef2f2;
  --ptera-black: #000000;
  --ptera-gray: #EEEEEE;
  --ptera-gray-dark: #6b7280;

  /* Typography */
  --font-stack-headings: 'Rajdhani', system-ui, sans-serif;
  --font-stack-body: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-stack-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /*
   * Custom Sidebar Layout (overrides Furo's defaults)
   *
   * Furo's defaults: $sidebar-width: 15em, $content-width: 46em, $content-padding: 3em
   * Furo's $full-width = 46em + 6em + 30em = 82em
   *
   * Our custom values use slightly wider sidebars (20em instead of 15em)
   * Custom $full-width = 46em + 6em + 40em = 92em
   */
  --ptera-sidebar-width: 20em;
  --ptera-content-width: 46em;
  --ptera-content-padding: 3em;
  --ptera-full-width: 92em;  /* content + padding*2 + sidebar*2 */
}

body {
  /* Override Furo's default colors */
  --color-brand-primary: var(--ptera-red);
  --color-brand-content: var(--ptera-red);

  /* Links */
  --color-link: var(--ptera-red);
  --color-link-underline: transparent;
  --color-link--hover: var(--ptera-red-hover);
  --color-link-underline--hover: var(--ptera-red-hover);

  /* Sidebar */
  --color-sidebar-brand-text: var(--ptera-black);
  --color-sidebar-link-text--top-level: #1f2937;
  --color-sidebar-item-background--hover: var(--ptera-red-light);
  --color-sidebar-item-background--current: var(--ptera-red-light);
  --color-sidebar-item-expander-background--hover: var(--ptera-red-light);

  /* Backgrounds */
  --color-background-primary: #ffffff;
  --color-background-secondary: #fafafa;
  --color-background-hover: var(--ptera-gray);

  /* Highlighted text / admonitions */
  --color-highlighted-background: var(--ptera-red-light);
  --color-highlighted-text: var(--ptera-red);

  /* API elements */
  --color-api-name: var(--ptera-red);
  --color-api-pre-name: var(--ptera-red);

  /* Code blocks */
  --color-code-background: #f8f8f8;
  --color-code-foreground: #1f2937;
  --color-inline-code-background: #f3f4f6;

  /* Header link on hover */
  --color-header-text: var(--ptera-red);
}

/* --------------------------------------------------------------------------
   Dark Mode
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --color-brand-primary: var(--ptera-red);
    --color-brand-content: var(--ptera-red);

    /* Links */
    --color-link: #f87171;
    --color-link--hover: var(--ptera-red);

    /* Sidebar */
    --color-sidebar-brand-text: #f9fafb;
    --color-sidebar-link-text--top-level: #e5e7eb;
    --color-sidebar-item-background--hover: rgba(230, 33, 41, 0.15);
    --color-sidebar-item-background--current: rgba(230, 33, 41, 0.2);

    /* Backgrounds */
    --color-background-primary: #0f0f0f;
    --color-background-secondary: #1a1a1a;
    --color-background-hover: #262626;

    /* Highlighted */
    --color-highlighted-background: rgba(230, 33, 41, 0.15);
    --color-highlighted-text: #f87171;

    /* Code */
    --color-code-background: #1e1e1e;
    --color-code-foreground: #e5e7eb;
    --color-inline-code-background: #262626;

    /* Text */
    --color-foreground-primary: #f3f4f6;
    --color-foreground-secondary: #d1d5db;
    --color-foreground-muted: #9ca3af;
  }
}

body[data-theme="dark"] {
  --color-brand-primary: var(--ptera-red);
  --color-brand-content: var(--ptera-red);

  /* Links */
  --color-link: #f87171;
  --color-link--hover: var(--ptera-red);

  /* Sidebar */
  --color-sidebar-brand-text: #f9fafb;
  --color-sidebar-link-text--top-level: #e5e7eb;
  --color-sidebar-item-background--hover: rgba(230, 33, 41, 0.15);
  --color-sidebar-item-background--current: rgba(230, 33, 41, 0.2);

  /* Backgrounds */
  --color-background-primary: #0f0f0f;
  --color-background-secondary: #1a1a1a;
  --color-background-hover: #262626;

  /* Highlighted */
  --color-highlighted-background: rgba(230, 33, 41, 0.15);
  --color-highlighted-text: #f87171;

  /* Code */
  --color-code-background: #1e1e1e;
  --color-code-foreground: #e5e7eb;
  --color-inline-code-background: #262626;

  /* Text */
  --color-foreground-primary: #f3f4f6;
  --color-foreground-secondary: #d1d5db;
  --color-foreground-muted: #9ca3af;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-stack-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings with brand-inspired font */
h1, h2, h3, h4, h5, h6,
.sidebar-brand-text,
article h1,
article h2,
article h3,
article h4 {
  font-family: var(--font-stack-headings);
  font-weight: 600;
  letter-spacing: 0.025em;
}

h1, article h1 {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* API reference module headings (multi-line with periods).
 * Sized so that the longest period-separated segment in any module path
 * (currently aeroelastic_unsteady_ring_vortex_lattice_method, 47 chars) fits
 * on one line in the article container at every desktop breakpoint without
 * needing breaks at underscores. Increase this if module names get longer
 * than what fits at the smallest content width. */
h1.api-module-heading {
  font-size: 1.55rem;
}

h2, article h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-top: 2.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ptera-red);
}

h3, article h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ptera-gray-dark);
}

body[data-theme="dark"] h3,
body[data-theme="dark"] article h3 {
  color: #9ca3af;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) h3,
  body:not([data-theme="light"]) article h3 {
    color: #9ca3af;
  }
}

/* Sidebar brand text styling */
.sidebar-brand-text {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Sidebar Enhancements - Aligned with Furo's Layout System
   -------------------------------------------------------------------------- */

/*
 * RESPONSIVE STRATEGY (aligned with Furo's breakpoints):
 *
 * Furo uses em-based breakpoints that scale with font size.
 * We use the same breakpoint values to avoid conflicts.
 *
 * Breakpoints (using our custom --ptera-full-width: 92em):
 * - > 92em + 20em = 112em (~1792px): Both sidebars, larger font (110%)
 * - < 92em (~1472px): TOC collapses to mobile icon
 * - < ~52em + 20em = 72em (~1152px): Hamburger menu appears
 * - < 46em (~736px): Full mobile layout
 *
 * Note: Furo increases font-size to 110% on very large screens,
 * which makes em-based values scale up proportionally.
 */

/*
 * Override Furo's compiled sidebar widths.
 * These selectors match what Furo outputs from its SASS.
 */

/* Left sidebar container - where navigation lives */
.sidebar-container {
  width: var(--ptera-sidebar-width);
}

/* Right TOC drawer */
.toc-drawer {
  width: var(--ptera-sidebar-width);
}

/*
 * The sidebar-drawer is the full left column including background.
 * Furo uses: width: calc((100% - $full-width) / 2 + $sidebar-width)
 * This centers the content and extends the sidebar background to the edge.
 */
.sidebar-drawer {
  width: calc((100% - var(--ptera-full-width)) / 2 + var(--ptera-sidebar-width));
  min-width: var(--ptera-sidebar-width);
}

/*
 * Very large screens: Furo increases font-size to 110% at $full-width + $sidebar-width (97em).
 * For our layout (92em + 20em = 112em), we need it at 112em instead.
 *
 * Problem: Furo's compiled 97em rule still applies between 97-112em, making things cramped.
 * Solution: Override Furo's 110% back to 100% in that range, then apply 110% at 112em+.
 */
@media (min-width: 97em) and (max-width: 112em) {
  html {
    font-size: 100%; /* Override Furo's 110% in this range where our layout is tighter */
  }
}

@media (min-width: 112em) {
  html {
    font-size: 110%;
  }
}

/*
 * When TOC is hidden (Furo does this at $full-width breakpoint = 82em),
 * we need to trigger it earlier at 92em for our wider sidebars.
 * This replicates all of Furo's TOC collapse behavior at our breakpoint.
 */
@media (max-width: 92em) {
  /* Adjust left sidebar width for layout without TOC */
  .sidebar-drawer {
    width: calc((100% - (var(--ptera-full-width) - var(--ptera-sidebar-width))) / 2 + var(--ptera-sidebar-width));
  }

  /* Show the TOC toggle icon in the content area */
  .toc-content-icon {
    display: flex;
  }

  /* Convert TOC to a slide-in drawer positioned off-screen */
  .toc-drawer {
    position: fixed;
    height: 100vh;
    top: 0;
    right: calc(-1 * var(--ptera-sidebar-width) - 1rem);
    border-left: 1px solid var(--color-background-border);
  }

  /* Adjust TOC tree styling for mobile/drawer mode */
  .toc-tree {
    border-left: none;
    font-size: var(--toc-font-size--mobile);
  }
}

/*
 * When hamburger menu appears (Furo does this at ~63em),
 * we need to trigger it earlier at 72em for our wider sidebars.
 * This also includes content centering (Furo does at 67em, we do at 72em).
 */
@media (max-width: 72em) {
  /* Center content with smaller padding */
  .content {
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em; /* Furo's $content-padding--small */
  }

  /* Show the hamburger menu icon */
  .nav-overlay-icon {
    display: flex;
  }

  /* Convert left sidebar to a slide-in drawer positioned off-screen */
  .sidebar-drawer {
    position: fixed;
    height: 100vh;
    width: var(--ptera-sidebar-width);
    top: 0;
    left: calc(-1 * var(--ptera-sidebar-width));
  }

  /* Swap icon visibility - show header icons, hide content icons */
  .toc-header-icon,
  .theme-toggle-header {
    display: flex;
  }

  .toc-content-icon,
  .theme-toggle-content {
    display: none;
  }

  /* Show the mobile header */
  .mobile-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Stack page layout vertically */
  .page {
    flex-direction: column;
    justify-content: center;
  }
}

.sidebar-logo {
  max-width: 180px;
  transition: transform 0.3s ease;
}

.sidebar-logo:hover {
  transform: scale(1.02);
}

.sidebar-tree .current > .reference {
  font-weight: 600;
  color: var(--ptera-red) !important;
}

/* Smoother hover transitions.
 * Font shrunk so the longest module names (e.g.
 * aeroelastic_unsteady_ring_vortex_lattice_method, 47 chars) fit in the 20em
 * sidebar without overflowing. Adjust if module names get longer. */
.sidebar-tree a {
  transition: color 0.15s ease, background-color 0.15s ease;
  border-radius: 4px;
  font-size: 0.78rem;
}

/* Caption styling in sidebar */
.sidebar-tree .caption {
  font-family: var(--font-stack-headings);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--ptera-gray-dark);
  margin-top: 1.5rem;
}

/* Right TOC entries.
 * Same rationale as the sidebar font shrink: keep long names
 * (e.g. method/attribute names on AeroelasticUnsteadyRingVortexLatticeMethodSolver)
 * from overflowing the narrower right column. */
.toc-tree a {
  font-size: 0.62rem;
}

/* GitHub link in sidebar */
.sidebar-github {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-background-hover);
  margin-top: 1rem !important;
}

.sidebar-github a {
  font-family: var(--font-stack-headings);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ptera-gray-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}

.sidebar-github a:hover {
  color: var(--ptera-red);
}

/* --------------------------------------------------------------------------
   Content Area
   -------------------------------------------------------------------------- */

/* Article container */
.article-container {
  max-width: 52rem;
  min-width: 0; /* Allow flexbox shrinking */
  /* Note: Don't add overflow-x: auto here - it causes spurious scrollbars.
     Instead, we wrap specific wide elements (tables, code) below. */
}

/* Main content wrapper */
.content {
  min-width: 0; /* Allow shrinking */
}

/* Page headings - prevent truncation of long module names */
article h1,
.content h1 {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Paragraph spacing */
article p {
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

/* List styling */
article ul, article ol {
  line-height: 1.75;
}

article li {
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
article a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

article a:hover {
  border-bottom-color: var(--ptera-red);
}

/* Header anchor links */
a.headerlink {
  color: var(--ptera-red);
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-left: 0.5rem;
}

h1:hover a.headerlink,
h2:hover a.headerlink,
h3:hover a.headerlink,
h4:hover a.headerlink {
  opacity: 0.7;
}

a.headerlink:hover {
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Code Blocks
   -------------------------------------------------------------------------- */
code, pre, .highlight {
  font-family: var(--font-stack-code);
  font-size: 0.875rem;
}

/* Inline code */
code.literal {
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
}

/* Code block container */
div.highlight {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-background-hover);
  max-width: 100%;
}

div.highlight pre {
  padding: 1rem 1.25rem;
  margin: 0;
  white-space: pre;
  word-break: normal;
  /* Note: Furo already sets overflow: auto on pre elements */
}

/* Copy button styling */
button.copybtn {
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

button.copybtn:hover {
  background-color: var(--ptera-red) !important;
  color: white !important;
}

/* --------------------------------------------------------------------------
   Admonitions
   -------------------------------------------------------------------------- */
.admonition {
  border-radius: 8px;
  border-left-width: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admonition-title {
  font-family: var(--font-stack-headings);
  font-weight: 600;
  letter-spacing: 0.025em;
}

/* Note */
.admonition.note {
  border-left-color: var(--ptera-red);
}

.admonition.note > .admonition-title {
  background-color: var(--ptera-red-light);
}

/* Warning */
.admonition.warning {
  border-left-color: #f59e0b;
}

/* Tip */
.admonition.tip {
  border-left-color: #10b981;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

/*
 * Note: Furo already handles table overflow via [role=main] .table-wrapper.container
 * with overflow-x: auto. We don't need to add it here.
 */

table {
  display: table;
  border-collapse: collapse;
  min-width: 100%;
  margin: 1.5rem 0;
}

th {
  font-family: var(--font-stack-headings);
  font-weight: 600;
  letter-spacing: 0.025em;
  text-align: left;
  padding: 0.75rem 1rem;
  background-color: var(--color-background-secondary);
  border-bottom: 2px solid var(--ptera-red);
  white-space: nowrap; /* Prevent header wrapping */
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-background-hover);
}

/* Allow table cells with descriptions to wrap, but keep code cells intact */
td:last-child {
  white-space: normal;
  min-width: 200px;
}

/* Keep code/class names in tables from wrapping */
td:first-child,
td code,
td .py-class-name,
td a.reference {
  white-space: nowrap;
}

tr:hover {
  background-color: var(--color-background-secondary);
}

/* AutoAPI summary tables - keep proper table display */
table.autosummary,
table.longtable {
  display: table;
}

table.autosummary td:first-child,
table.longtable td:first-child {
  white-space: nowrap;
  font-family: var(--font-stack-code);
}

/* AutoAPI module "Classes" summary table.
 * The table is generated with fixed 40/60 column widths, so long class names
 * like AeroelasticUnsteadyRingVortexLatticeMethodSolver wrap in column 1.
 * Shrink the table font slightly so the class names fit on one line at all
 * desktop breakpoints. */
#classes table {
  font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   API Documentation - Wrap Long Signatures
   -------------------------------------------------------------------------- */
.sig {
  font-family: var(--font-stack-code);
  display: block;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.sig-name {
  color: var(--ptera-red);
  font-weight: 600;
}

/* API definition blocks - allow wrapping, no scrollbars */
dl.py.class,
dl.py.function,
dl.py.method,
dl.py.attribute {
  padding: 1rem;
  padding-left: 1.25rem;
  background-color: transparent;
  border-radius: 0;
  border-left: 3px solid var(--ptera-red);
  margin-bottom: 1.5rem;
  overflow: visible;
}

/* Allow signature lines to wrap - styled like code blocks */
dl.py dt {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background-color: var(--color-code-background);
  border-radius: 8px;
  border: 1px solid var(--color-background-hover);
  font-size: 0.875rem;
}

/* Description text wraps normally */
dl.py dd {
  white-space: normal;
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.bottom-of-page {
  border-top: 1px solid var(--color-background-hover);
  padding-top: 1.5rem;
  margin-top: 3rem;
}

.copyright {
  font-size: 0.875rem;
  color: var(--ptera-gray-dark);
}

/* --------------------------------------------------------------------------
   Related Pages Navigation
   -------------------------------------------------------------------------- */
.related-pages a {
  border: 1px solid var(--color-background-hover);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.related-pages a:hover {
  border-color: var(--ptera-red);
  box-shadow: 0 4px 12px rgba(230, 33, 41, 0.1);
}

.related-pages .context {
  color: var(--ptera-red);
  font-family: var(--font-stack-headings);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.related-pages .next-page,
.related-pages .prev-page {
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */
.sidebar-search {
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-search:focus {
  border-color: var(--ptera-red);
  box-shadow: 0 0 0 3px rgba(230, 33, 41, 0.1);
}

/* --------------------------------------------------------------------------
   Back to Top Button
   -------------------------------------------------------------------------- */
.back-to-top {
  font-family: var(--font-stack-headings);
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color 0.15s ease;
}

.back-to-top:hover {
  color: var(--ptera-red) !important;
}

/* --------------------------------------------------------------------------
   Responsive Typography & Layout Adjustments
   -------------------------------------------------------------------------- */

/*
 * Breakpoints aligned with Furo's em-based system (for 20em sidebars, 92em full-width):
 * - 112em (~1792px): Very large screens (Furo uses 110% font-size above this)
 * - 92em (~1472px): TOC hides
 * - 72em (~1152px): Hamburger menu appears
 * - 46em (~736px): Full mobile
 *
 * Using em units so typography scales with Furo's font-size changes.
 */

/* Very large screens - Furo increases base font to 110% here */
@media (min-width: 112em) {
  h1, article h1 {
    font-size: 2.25rem;
  }

  /* The sidebar container width does not scale with html's 110% bump but
   * rem-based fonts inside it do, so the text-to-container ratio worsens here.
   * Drop the rem value by ~1/1.1 to keep the effective pixel size aligned with
   * smaller breakpoints. */
  .sidebar-tree a {
    font-size: 0.74rem;
  }
}

/* Large screens - both sidebars visible */
@media (max-width: 112em) and (min-width: 92em) {
  h1, article h1 {
    font-size: 2.1rem;
  }

  h2, article h2 {
    font-size: 1.45rem;
  }

  /* Trim sidebar text a touch so the longest module names fit cleanly. */
  .sidebar-tree a {
    font-size: 0.75rem;
  }
}

/* Medium screens - TOC hidden, left sidebar visible */
@media (max-width: 92em) and (min-width: 72em) {
  h1, article h1 {
    font-size: 2rem;
  }

  h2, article h2 {
    font-size: 1.4rem;
  }

  /* Same sidebar-text trim as the next breakpoint up. */
  .sidebar-tree a {
    font-size: 0.75rem;
  }

  /* Shrink the api module heading enough that the longest period-separated
   * segment fits at the content width available in this range. */
  h1.api-module-heading {
    font-size: 1.45rem;
  }
}

/* Tablet/hamburger menu mode */
@media (max-width: 72em) and (min-width: 46em) {
  h1, article h1 {
    font-size: 1.85rem;
  }

  h2, article h2 {
    font-size: 1.35rem;
  }

  .sidebar-brand-text {
    font-size: 1rem;
  }
}

/* Mobile */
@media (max-width: 46em) {
  h1, article h1 {
    font-size: 1.6rem;
  }

  h2, article h2 {
    font-size: 1.25rem;
  }

  .sidebar-brand-text {
    font-size: 0.95rem;
  }

  /* Furo uses smaller padding on mobile */
  .content {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
  h1, h2, h3, h4, h5, h6 {
    color: var(--ptera-black) !important;
  }

  a {
    color: var(--ptera-black) !important;
    text-decoration: underline;
  }

  h2 {
    border-bottom-color: var(--ptera-black) !important;
  }
}

/* --------------------------------------------------------------------------
   Smooth Scrolling & Focus States
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* Note: Furo sets overflow-x: hidden on html to prevent horizontal scrollbars
     during sidebar slide-in animations. Don't override this. */
}

:focus-visible {
  outline: 2px solid var(--ptera-red);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Selection Styling
   -------------------------------------------------------------------------- */
::selection {
  background-color: rgba(230, 33, 41, 0.2);
  color: inherit;
}

::-moz-selection {
  background-color: rgba(230, 33, 41, 0.2);
  color: inherit;
}