/* Clean theme CSS - inspired by docs.stripe.com */

/* CSS Reset & Base Styles */
:root {
  /* Colors - SVG-based blue palette */
  --color-text: #1a1f36; /* Kept original dark text for readability */
  --color-text-secondary: #4D5E8A; /* Slightly bluer secondary text */
  --color-text-tertiary: #6478A4; /* Bluer tertiary text */
  --color-background: #F9FAFE; /* Very light blue for base background */
  --color-background-alt: #ffffff; /* Pure white for cards and content areas */
  --color-background-subtle: #F3F7FD; /* Light blue for inactive elements */
  --color-border: #E2EBFB; /* Light blue border */
  --color-divider: #ECF2FD; /* Lighter blue divider */
  --color-accent: #ACC4F4; /* Medium blue for accents - from SVG */
  --color-accent-secondary: #4D5E8A; /* Darker blue for secondary accents */
  --color-accent-faded: rgba(172, 196, 244, 0.15); /* Faded accent for subtle backgrounds */
  --color-accent-light: #E2EBFB; /* Light blue from SVG */
  --color-link: #7992D8; /* Medium blue for links - custom to match SVG palette */
  --color-link-hover: #5C73B6; /* Darker blue for link hover */
  --color-success: #10b981; /* Kept original */
  --color-warning: #f59e0b; /* Kept original */
  --color-danger: #ef4444; /* Kept original */
  --color-code-background: #F3F7FD; /* Light blue for code background */
  
  /* Typography */
  --font-sans: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-serif: Georgia, serif; /* Keep a true serif for contrast when needed */
  --font-mono: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Liberation Mono', Menlo, 'Courier New', Courier, monospace;
  --font-heading: "cofo-kabeltouw-solid-0", var(--font-sans);
  
  /* Font sizes and line heights */
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --line-height-tight: 1.3;
  --line-height-loose: 1.8;
  
  /* Available Proxima Nova weights */
  --font-weight-thin: 100;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  /* For backward compatibility */
  --font-weight-medium: 400;
  --font-weight-semibold: 700;
  
  /* Grid system - multiples of 4px for consistent spacing */
  --grid-base: 4px;
  --space-1: calc(1 * var(--grid-base));     /* 4px */
  --space-2: calc(2 * var(--grid-base));     /* 8px */
  --space-3: calc(3 * var(--grid-base));     /* 12px */
  --space-4: calc(4 * var(--grid-base));     /* 16px */
  --space-5: calc(5 * var(--grid-base));     /* 20px */
  --space-6: calc(6 * var(--grid-base));     /* 24px */
  --space-8: calc(8 * var(--grid-base));     /* 32px */
  --space-10: calc(10 * var(--grid-base));   /* 40px */
  --space-12: calc(12 * var(--grid-base));   /* 48px */
  --space-16: calc(16 * var(--grid-base));   /* 64px */
  --space-20: calc(20 * var(--grid-base));   /* 80px */
  --space-24: calc(24 * var(--grid-base));   /* 96px */
  
  /* Content widths for readability */
  --content-width-xs: 320px;   /* Small elements */
  --content-width-sm: 512px;   /* Narrow reading width */
  --content-width-md: 640px;   /* Ideal reading width */
  --content-width-lg: 768px;   /* Wide reading width */
  --content-width-xl: 1024px;  /* Content with sidebar */
  --content-width-max: 1280px; /* Full layout width */
  
  /* Other variables */
  --border-radius: 6px;
  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --max-width: var(--content-width-max);
  --header-top-height: calc(18 * var(--grid-base)); /* 72px */
  --header-bottom-height: calc(14 * var(--grid-base)); /* 56px */
  --header-height: calc(var(--header-top-height) + var(--header-bottom-height)); /* 128px */
  --sidebar-width: calc(64 * var(--grid-base)); /* 256px */
  --transition-duration: 0.15s;
}

/* Box sizing for all elements */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Base HTML elements with consistent rhythm */
html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
}

/* Remove margins from body and establish base typography */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: #ffffff; /* Plain white background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Prevent horizontal scrollbar */
  position: relative;
}

/* CSS variables for parallax positioning */
:root {
  --parallax-offset: 0px; /* Legacy, kept for backward compatibility */
  --parallax-offset-x: 0px; /* Horizontal parallax offset */
  --parallax-offset-y: 0px; /* Vertical parallax offset */
  --bg-top-position: var(--header-height); /* Default background position at header height */
}

/* Wavy background element - desktop only */
body::before {
  content: '';
  display: none; /* Hide on mobile by default */
}

/* Only show backgrounds on desktop */
@media (min-width: 768px) {
  body::before {
    display: block; /* Show on desktop */
    position: fixed; /* Fixed position for parallax effect */
    top: 0; /* Start at the very top of the page */
    left: 0;
    right: 0;
    width: 100%; /* Standard width */
    height: 100vh; /* Full viewport height to avoid gaps */
    background-image: url('/images/wavy3.svg');
    background-repeat: no-repeat;
    background-position: center var(--bg-top-position, var(--header-height)); /* Position that adjusts with scroll */
    background-size: 100% auto; /* Preserve aspect ratio */
    z-index: -1; /* Keep it behind content */
    pointer-events: none; /* Allows clicks to pass through */
    will-change: transform; /* Optimize for animations */
    transform: translateY(var(--parallax-offset, 0)); /* Apply parallax on desktop */
  }
}

/* Vertical rhythm for all block elements */
h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, figure, table {
  margin-top: 0;
  margin-bottom: var(--space-6);
}

/* Headings with consistent scale and rhythm using CoFo Kabeltouw */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400; /* CoFo Kabeltouw only has weight 400 */
  line-height: 1.2; /* Tighter line height for the display font */
  color: var(--color-accent-secondary); /* Darker blue for headings */
  letter-spacing: 0.01em; /* Slight positive tracking for the modular font */
  text-transform: lowercase; /* CoFo Kabeltouw works well with lowercase */
  margin-top: var(--space-8);
  position: relative;
}

h1 { 
  font-size: 2.25rem; 
  margin-bottom: var(--space-8);
  letter-spacing: -0.02em;
}

h2 { 
  font-size: 1.75rem; 
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
}

h3 { 
  font-size: 1.5rem; 
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

h4 { 
  font-size: 1.25rem; 
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

h5 { 
  font-size: 1.125rem; 
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

h6 { 
  font-size: 1rem; 
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-bold);
}

/* Paragraphs with consistent rhythm for Proxima Nova */
p {
  margin-bottom: var(--space-5);
  max-width: var(--content-width-md);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.01em;
  font-style: normal;
}

/* Add styling for emphasis */
em, i {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: inherit;
}

strong, b {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-style: normal;
}

/* Links */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-duration) ease;
  font-weight: var(--font-weight-normal);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Lists with proper rhythm and indentation */
ul, ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-8);
  max-width: var(--content-width-md);
}

li {
  margin-bottom: var(--space-2);
  padding-left: var(--space-2);
}

li:last-child {
  margin-bottom: 0;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Figures and captions */
figure {
  margin: var(--space-6) 0;
  max-width: 100%;
  transition: transform 0.2s ease;
}

figure:hover {
  transform: translateY(-2px);
}

figure:hover img {
  border-color: var(--color-accent-secondary); /* Darker blue on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

figure img {
  max-width: 100%;
  border-radius: var(--border-radius);
  display: block;
  border: 2px solid var(--color-accent-light);
}

/* Figure alignment classes */
figure.align-left {
  float: left;
  margin-right: var(--space-6);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  max-width: 40%;
}

figure.align-right {
  float: right;
  margin-left: var(--space-6);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  max-width: 40%;
}

figure.align-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

figure.align-center img {
  margin-left: auto;
  margin-right: auto;
}

/* Clear floats */
.clear-floats::after {
  content: "";
  display: table;
  clear: both;
}

/* Figure classes for width and styling */
figure.wide {
  max-width: 100%;
}

figure.narrow {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

figure.shadow img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

figure.border img {
  border: 1px solid var(--color-border);
  padding: 4px;
}

figcaption {
  font-family: var(--font-mono);
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dotted var(--color-border);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* Blockquotes */
blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-6);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-accent-light);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

blockquote p {
  padding: var(--space-2) 0;
}

blockquote p:first-child {
  padding-top: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.3em;
  background-color: var(--color-code-background);
  border-radius: 3px;
}

pre {
  font-family: var(--font-mono);
  margin: var(--space-6) 0;
  padding: var(--space-4);
  overflow-x: auto;
  background-color: var(--color-code-background);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

pre code {
  padding: 0;
  background: none;
}

/* Horizontal rule styling */
hr {
  border: none;
  height: 1px;
  background-color: #c0cff4;
  margin: var(--space-6) 0;
}

/* Tables */
table {
  width: 100%;
  margin: var(--space-6) 0;
  border-collapse: collapse;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem; /* Slightly smaller text for better fit */
}

th, td {
  padding: var(--space-3) var(--space-4); /* Increased padding for better readability */
  border: 1px solid var(--color-border);
  vertical-align: top;
}

td {
  background-color: var(--color-background-alt);
  line-height: 1.5;
}

th {
  background-color: var(--color-accent); /* Medium blue from SVG */
  color: var(--color-accent-secondary);
  font-weight: 600;
  text-align: left;
  /* border: 1px solid var(--color-accent-secondary); */
}

/* Zebra striping for better readability */
tr:nth-child(even) td {
  background-color: #f8fafc;
}

/* Special table classes */
table.compact th, 
table.compact td {
  padding: var(--space-2) var(--space-3); /* Less padding for dense tables */
}

table.borderless th,
table.borderless td {
  border: none; /* Remove borders for cleaner look */
  border-bottom: 1px solid var(--color-divider);
}

table.centered td,
table.centered th {
  text-align: center;
}

/* Responsive tables - better mobile experience */
@media (max-width: 768px) {
  /* Card-based responsive table layout */
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  /* Hide table headers (but not display: none for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  /* Make rows behave like cards */
  tr {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-4);
    background-color: var(--color-background-alt);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  /* Display cells as key-value pairs */
  td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid var(--color-divider);
    position: relative;
    padding-left: 50%;
    text-align: right;
    white-space: normal;
  }
  
  td:last-child {
    border-bottom: none;
  }
  
  /* Add a "label" for each cell using data-th attribute or column number */
  td:before {
    content: attr(data-label);
    position: absolute;
    left: var(--space-3);
    top: var(--space-2);
    width: 45%;
    padding-right: var(--space-2);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
  }
  
  /* For tables without data-label attributes, default back to scrollable */
  table.scrollable {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  table.scrollable tr,
  table.scrollable td,
  table.scrollable th {
    display: revert;
    white-space: nowrap;
  }
  
  table.scrollable td:before {
    content: none;
  }
  
  /* Reset zebra striping */
  tr:nth-child(even) td {
    background-color: inherit;
  }
}

/* Video Responsive Embedding - Shared by Vimeo and custom video */
.vimeo-container,
.video-container {
  position: relative;
  width: 100%;
  margin: var(--space-6) 0;
  max-width: var(--content-width-lg);
  background-color: #000;
  border-radius: var(--border-radius);
  border: 2px solid var(--color-accent); /* Thicker border with accent color */
  /* Match the sidebar section shadow exactly */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  /* Isolate from other positioned elements to prevent style interference */
  isolation: isolate;
  z-index: 1;
  /* Add transition for hover effect like sidebar */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* For iframe videos (Vimeo) */
.vimeo-container {
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

.vimeo-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* For HTML5 videos */
.video-container video {
  display: block;
  width: 100%;
  height: auto;
  background-color: #000;
  /* Ensure video has no gradient overlays */
  object-fit: contain;
  object-position: center;
}

/* Fix video controls styling */
.video-container video::-webkit-media-controls-panel {
  /* Remove the gradient overlay */
  background-image: none !important;
}

/* Ensure play/pause button is visible but remove unwanted gradients */
.video-container video::-webkit-media-controls-play-button {
  display: block !important;
  color: white;
}

/* Light styling for other video controls while preserving functionality */
.video-container video::-webkit-media-controls,
.video-container video::-webkit-media-controls-panel-button,
.video-container video::-webkit-media-controls-volume-slider,
.video-container video::-webkit-media-controls-timeline,
.video-container video::-webkit-media-controls-current-time-display,
.video-container video::-webkit-media-controls-time-remaining-display,
.video-container video::-webkit-media-controls-fullscreen-button {
  color-scheme: light dark;
}

/* Ensure the video container and its children don't have any decorative elements */
.video-container::before,
.video-container::after,
.video-container *::before,
.video-container *::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border: none !important;
}

/* Hover effect for videos - matches sidebar */
.video-container:hover,
.vimeo-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.05), 0 3px 6px -2px rgba(0, 0, 0, 0.03);
  border-color: var(--color-accent-secondary); /* Darker blue on hover */
}

/* Shared width options */
.vimeo-container.wide,
.video-container.wide {
  max-width: 100%;
}

.vimeo-container.narrow,
.video-container.narrow {
  max-width: var(--content-width-md);
}

/* Container - consistent padding and width constraints */
.container {
  width: 100%;
  max-width: var(--content-width-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: var(--space-8);
}

/* Main container with sidebar - uses exact grid measurements */
.main-container {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  position: relative;
  padding-left: var(--space-5);
  background-color: rgba(255, 255, 255, 0.97); /* Nearly opaque white background */
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  /* Add depth effect with subtle border */
  border: 1px solid rgba(255, 255, 255, 0.7);
  z-index: 1; /* Above the bottom wave */
}

/* Add subtle decorative elements for visual interest */
.main-container::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--color-accent-light) 0%, rgba(255,255,255,0) 70%);
  opacity: 0.4;
  z-index: -1;
  border-radius: 50%;
  filter: blur(40px);
}

.main-container::after {
  content: '';
  position: absolute;
  bottom: 10%;
  left: -5%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, var(--color-accent-light) 0%, rgba(255,255,255,0) 70%);
  opacity: 0.3;
  z-index: -1;
  border-radius: 50%;
  filter: blur(30px);
}

/* Layout - ensures full height and proper spacing */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 0; /* Reset default, will set in another rule */
}

.site-main {
  flex: 1 0 auto;
  padding: var(--space-6) 0 var(--space-12); /* Regular padding, wave will show behind content */
  position: relative;
}

/* Body background styling is now defined in the main body selector */

/* Main container styling */
.main-container {
  position: relative;
  z-index: 1; /* Ensure it's above the background */
  margin-top: 3rem;
  background-color: rgba(255, 255, 255, 0.95); /* More opaque white background */
  backdrop-filter: blur(5px); /* Subtle blur effect */
  /* border-radius: var(--border-radius); */
}

@media (max-width: 768px) {
  .main-container {
    margin-top: 1rem; /* Less top margin on mobile */
  }
}

/* Adjust main container margin when a full-width header is present */
.full-width-header-container + .site-main .main-container {
  margin-top: 0; /* No extra margin needed as the header already provides spacing */
}

/* Header - two-level structure */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #F9FAFE; /* Very light blue from SVG */
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(172, 196, 244, 0.1), 0 1px 2px rgba(172, 196, 244, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-6) 0 var(--space-3);
  height: var(--header-top-height);
}

.header-bottom {
  width: 100%;
  padding: var(--space-5) 0 var(--space-5);
  height: var(--header-bottom-height);
}

.logo {
  display: flex;
  align-items: center;
  padding-left: var(--space-5);
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--color-accent-secondary); /* Use the darker blue accent for simplicity */
  text-decoration: none;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: lowercase;
  text-shadow: 0 1px 2px rgba(172, 196, 244, 0.1); /* Keep the subtle shadow */
}

.site-title:hover {
  text-decoration: none;
  color: var(--color-link); /* Simple color change on hover */
}

/* Navigation - horizontally aligned in the second row */
.main-nav {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.main-nav li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Navigation search */
.nav-search {
  flex: 0 0 280px;
}

.search-field {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.search-field svg {
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.nav-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) * 2 + 16px);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  outline: none;
  transition: all var(--transition-duration) ease;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.nav-search-input:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.nav-link {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  color: var(--color-accent-secondary); /* Darker blue from SVG */
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: 0.95rem;
  transition: all var(--transition-duration) ease;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
  margin-right: var(--space-4);
  text-transform: none;
}

.nav-link:hover, .nav-link.active {
  color: var(--color-accent); /* Medium blue from SVG */
  text-decoration: none;
}

.nav-link.active::after {
  width: calc(100% - var(--space-6));
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  transition: height var(--transition-duration) ease;
  z-index: -1;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: var(--space-3);
  width: 0;
  height: 2px;
  background-color: var(--color-accent); /* Medium blue from SVG */
  transition: width var(--transition-duration) ease;
}

.nav-link:hover::after {
  width: calc(100% - var(--space-6));
}

/* Search Toggle Button */
.search-toggle {
  cursor: pointer;
  padding: var(--space-3);
  color: var(--color-text-secondary);
  transition: all var(--transition-duration) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-border);
}

.search-toggle:hover {
  color: var(--color-accent);
  background-color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--box-shadow);
}

/* Hamburger Menu Button */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  position: relative;
  cursor: pointer;
  padding: 0;
  z-index: 101;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-accent);
  position: absolute;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.hamburger-inner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hamburger-inner::before {
  top: -7px;
  left: 0;
}

.hamburger-inner::after {
  bottom: -7px;
  left: 0;
}

/* Active state */
.hamburger-menu.active .hamburger-inner {
  transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger-menu.active .hamburger-inner::before {
  opacity: 0;
  transform: translateY(7px) rotate(0deg);
}

.hamburger-menu.active .hamburger-inner::after {
  transform: translateY(-7px) rotate(-90deg);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 60px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  overflow-y: auto;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-container {
  width: 92%;
  max-width: 400px;
  background-color: #ffffff;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  border: 1px solid var(--color-border);
}

.mobile-menu-overlay.active .mobile-menu-container {
  transform: translateY(0);
  opacity: 1;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--color-accent);
}

.mobile-menu-close {
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: var(--space-2);
  transition: color var(--transition-duration) ease;
}

.mobile-menu-close:hover {
  color: var(--color-text);
}

.mobile-search {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav {
  padding: var(--space-5);
}

.mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-links li {
  margin-bottom: var(--space-4);
}

.mobile-nav-links li:last-child {
  margin-bottom: 0;
}

.mobile-nav-link {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: 1.1rem;
  color: var(--color-text);
  text-transform: none;
  padding: var(--space-3) var(--space-2);
  margin-bottom: var(--space-2);
  border-radius: var(--border-radius);
  background-color: var(--color-background-subtle);
  border-left: 3px solid transparent;
  transition: all var(--transition-duration) ease;
}

.mobile-nav-link:hover {
  color: var(--color-link);
  text-decoration: none;
  background-color: var(--color-accent-light);
  border-color: var(--color-accent);
  transform: translateX(2px);
}

/* Search Modal Overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-modal {
  width: 90%;
  max-width: 700px;
  background-color: #ffffff;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.search-overlay.active .search-modal {
  transform: translateY(0);
  opacity: 1;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.search-input-wrapper {
  position: relative;
  width: 100%;
}

.search-input-wrapper svg {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) * 2 + 20px);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 1rem;
  outline: none;
  transition: all var(--transition-duration) ease;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.search-input:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary);
  padding: var(--space-2);
  margin-left: var(--space-4);
  transition: color var(--transition-duration) ease;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-close:hover {
  color: var(--color-text);
  background-color: var(--color-background-subtle);
}

.search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6) var(--space-8);
}

/* Prevent body scrolling when search is active */
body.search-active {
  overflow: hidden;
}

/* Search results styling */
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.search-result-item {
  display: block;
  padding: var(--space-5);
  border-radius: var(--border-radius);
  background-color: var(--color-background-alt);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.search-result-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  border-color: var(--color-link);
}

.search-result-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  line-height: 1.3;
  text-transform: lowercase;
}

.search-result-snippet {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.search-no-results {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-secondary);
}

.search-results-count {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.search-results-count p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-thin);
}

.search-loading {
  text-align: center;
  padding: var(--space-10);
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Search results */
.search-results-container {
  padding: var(--space-3) 0;
  max-height: 60vh;
  overflow-y: auto;
}

.search-suggestions {
  width: 100%;
}

.search-navigation-note {
  text-align: center;
  padding: var(--space-3);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  background-color: var(--color-background-subtle);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-3);
}

.search-suggestion-item {
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  border-bottom: 1px solid var(--color-divider);
  transition: all var(--transition-duration) ease;
}

.search-suggestion-item:last-child {
  border-bottom: none;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
  background-color: var(--color-accent-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.search-suggestion-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  font-size: 1rem;
  color: var(--color-accent);
}

.search-suggestion-metadata,
.search-result-metadata {
  font-size: 0.85em;
  color: #666;
  margin-bottom: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}

/* Metadata styling */
.metadata-section {
  color: #1a73e8;
  font-weight: 500;
  text-transform: capitalize;
}

.metadata-location {
  color: #0f9d58;
}

.metadata-weather {
  color: #4285f4;
}

.metadata-type,
.metadata-race-type {
  color: #ea4335;
}

.metadata-boat {
  color: #fbbc04;
}

.metadata-difficulty {
  color: #fa7b17;
}

.metadata-focus {
  color: #8c44db;
}

.metadata-event {
  color: #34a853;
}

.metadata-level {
  color: #db4437;
}

.metadata-tags {
  color: #5f6368;
  font-style: italic;
}

.search-suggestion-preview {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-no-results {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
  display: none;
}

/* Search page styles */
.search-page {
  max-width: 700px;
  margin: 0 auto;
}

.search-form {
  margin-bottom: var(--space-8);
}

.search-page-input {
  width: 100%;
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 1.125rem;
  outline: none;
  transition: border-color var(--transition-duration) ease;
  background-color: var(--color-background-alt);
}

.search-page-input:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.search-page-results {
  margin-top: var(--space-6);
}

/* Content - improved readability and spacing */
.main-content {
  width: 100%;
  min-width: 0; /* Important for preventing overflow */
}

.content {
  max-width: var(--content-width-lg);
  margin: 0;
  position: relative;
}

.content-header {
  margin-bottom: var(--space-10);
  max-width: var(--content-width-lg);
}

.content-title {
  margin-bottom: var(--space-4);
  font-size: 2.5rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-accent); /* Medium blue from SVG */
  text-transform: lowercase;
  /* Add subtle gradient for depth */
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(172, 196, 244, 0.1);
}

.content-description {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
  line-height: var(--line-height-base);
  max-width: var(--content-width-md);
  font-weight: var(--font-weight-thin);
  letter-spacing: 0.02em;
}

/* Articles - refined typography and spacing */
.article {
  margin-bottom: var(--space-20);
  position: relative;
  width: 100%; /* Ensure the article takes full width of its container */
  display: contents; /* Make the article act as a container without affecting grid layout */
}

/* Article header styling */
.article-header {
  margin-bottom: var(--space-8);
  padding: var(--space-8) var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  max-width: var(--content-width-lg);
  background-color: var(--color-background-alt);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(243, 247, 253, 0.6));
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  /* Enhanced shadow for depth with blue tone */
  box-shadow: 
    0 2px 10px rgba(172, 196, 244, 0.05),
    0 5px 15px -5px rgba(172, 196, 244, 0.08);
  position: relative;
  /* Add subtle border for more dimension */
  border: 1px solid rgba(226, 235, 251, 0.8);
  border-bottom: 2px solid var(--color-accent);
}

/* Full-width header styling - spans both columns */
.full-width-header {
  /* Special grid positioning to span both columns */
  grid-column: 1 / -1; /* Span from first to last column */
  width: 100%;
  margin-bottom: var(--space-8);
  
  /* Specific styling adjustments */
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  position: relative;
  z-index: 2; /* Higher than sidebar and content for proper layering */
}

.article-title {
  margin-bottom: var(--space-3);
  font-size: 2.75rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-accent-secondary);
  max-width: 90%;
  /* Add subtle gradient for depth */
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(172, 196, 244, 0.08);
}

.article-meta {
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  letter-spacing: 0;
}

/* Taxonomy display in articles */
.article-taxonomies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-family: var(--font-sans);
}

.article-taxonomy {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  padding: var(--space-1) var(--space-3);
  background-color: #f7f9fc;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-secondary);
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.article-taxonomy.location { background-color: #e8f5e9; color: #1b5e20; }
.article-taxonomy.weather { background-color: #e3f2fd; color: #0d47a1; }
.article-taxonomy.mood { background-color: #fce4ec; color: #880e4f; }
.article-taxonomy.crew, .article-taxonomy.crew-size { background-color: #f3e5f5; color: #4a148c; }
.article-taxonomy.type { background-color: #ffebee; color: #b71c1c; }
.article-taxonomy.boat-type { background-color: #fff8e1; color: #ff6f00; }
.article-taxonomy.level, .article-taxonomy.skill-level { background-color: #e0f7fa; color: #006064; }
.article-taxonomy.difficulty { background-color: #fff3e0; color: #e65100; }
.article-taxonomy.focus, .article-taxonomy.focus-area { background-color: #f3e5f5; color: #4a148c; }
.article-taxonomy.event { background-color: #e8f5e9; color: #1b5e20; }
.article-taxonomy.race-type { background-color: #ffebee; color: #b71c1c; }
.article-taxonomy.course { background-color: #e3f2fd; color: #0d47a1; }
.article-taxonomy.notes, .article-taxonomy.summary { background-color: #e8eaf6; color: #1a237e; }
.article-taxonomy.audience { background-color: #f9fbe7; color: #827717; }
.article-taxonomy.coxswain { background-color: #f3e5f5; color: #4a148c; }
.article-taxonomy.duration { background-color: #e0f2f1; color: #004d40; }

/* Article footer with taxonomies */
.article-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  /* Ensure it stays in the main content column */
  grid-column: 2; /* Position in the second column */
}

.article-footer h4 {
  font-size: 1.1rem;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.article-tags {
  margin-bottom: var(--space-6);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.article-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  padding: var(--space-1) var(--space-3);
  background-color: #f1f5f9;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-secondary);
  line-height: 1.3;
  text-decoration: none;
  transition: all var(--transition-duration) ease;
}

.article-tag:hover {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
  border-color: var(--color-accent-light);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Section-specific metadata sections */
.race-conditions,
.race-results,
.lessons-learned,
.coaching-symptoms,
.coaching-solutions,
.program-downloads {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background-color: #f8fafc;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.race-conditions ul,
.race-results ul,
.lessons-learned ul,
.coaching-symptoms ul,
.coaching-solutions ul,
.program-downloads ul {
  margin-bottom: 0;
  padding-left: var(--space-6);
}}

.article-content {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--line-height-base);
  color: var(--color-text);
  position: relative;
  /* Add subtle texture to the content area */
  padding: var(--space-8);
  background-color: var(--color-background-alt);
  border-radius: var(--border-radius);
  /* Enhanced depth with layered shadow using SVG blues */
  box-shadow: 
    0 2px 10px rgba(172, 196, 244, 0.05),
    0 10px 30px -10px rgba(172, 196, 244, 0.08),
    0 1px 3px rgba(172, 196, 244, 0.03);
  margin-bottom: var(--space-10);
  font-weight: 400;
  /* Add subtle border and transformation for more depth */
  border: 1px solid rgba(226, 235, 251, 0.8);
  transform: translateY(0); /* Base position for hover effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Ensure it stays in the main content column */
  grid-column: 2; /* Position in the second column */
}

.article-content > * {
  max-width: var(--content-width-md);
  margin-left: 0;
  margin-right: 0;
}

/* Wide elements like code blocks, tables, etc. */
.article-content > pre,
.article-content > .table-wrapper,
.article-content > figure,
.article-content > .admonition,
.article-content > table {
  max-width: var(--content-width-lg);
}

/* Table wrapper for better mobile experience */
.article-content table {
  margin: var(--space-6) 0;
  width: 100%;
}

.article-content h2, 
.article-content h3 {
  font-family: var(--font-heading);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
  position: relative;
  font-weight: 400;
  line-height: 1.2;
  text-transform: lowercase;
}

/* Add a subtle anchor indicator on heading hover */
.article-content h2::before,
.article-content h3::before {
  content: '#';
  position: absolute;
  left: -1.25em;
  color: var(--color-link);
  opacity: 0;
  transition: opacity var(--transition-duration) ease;
  font-weight: var(--font-weight-normal);
}

.article-content h2:hover::before,
.article-content h3:hover::before {
  opacity: 0.5;
}

.article-content p {
  margin-bottom: var(--space-5);
}

/* CSS variable for bottom parallax positioning */
:root {
  --bottom-parallax-offset: 0px;
}

/* Bottom wave background - desktop only */
body::after {
  content: '';
  display: none; /* Hide on mobile by default */
}

/* Only show on desktop */
@media (min-width: 768px) {
  body::after {
    display: block; /* Show on desktop */
    position: fixed; /* Fixed position for parallax effect */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 3900 / 976; /* Match the SVG's aspect ratio */
    min-height: 20vw; /* Height of the SVG */
    background-image: url('/images/bottom-wavy.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    z-index: -1; /* Keep it behind content */
    pointer-events: none; /* Allows clicks to pass through */
    opacity: 0.8; /* Slight transparency */
    will-change: transform; /* Optimize for animations */
    transform: translateY(var(--bottom-parallax-offset, 100%)); /* Apply parallax */
    transition: transform 0.05s linear; /* Smooth transitions */
  }
}

/* Footer - refined spacing and typography */
.site-footer {
  padding: var(--space-10) 0 var(--space-10) 0; /* Regular padding */
  border-top: 1px solid var(--color-border);
  margin-top: 0; /* No need for extra margin, wave is behind */
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  background-color: var(--color-background);
  position: relative;
  z-index: 2; /* Ensure footer is above the background */
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* Ensure it's above the background */
  z-index: 2;
  padding: 0 var(--space-8); /* Add padding to avoid text touching edges */
}

.footer-info p {
  margin: 0;
  line-height: 1.5;
  max-width: none;
  font-weight: var(--font-weight-thin);
  letter-spacing: 0.02em;
}

/* Admonitions - refined styles with consistent grid spacing and increased dimension */
.admonition {
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-6);
  border-radius: var(--border-radius);
  border-left: 4px solid;
  background-color: var(--color-background-alt);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admonition:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Add subtle triangle decoration to admonitions */
.admonition::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent rgba(0, 0, 0, 0.03) transparent transparent;
}

.admonition-title {
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-size: 1.1rem;
  font-family: var(--font-heading);
  text-transform: lowercase;
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-1);
  /* Default title style, overridden by specific admonition types */
  color: var(--color-accent-secondary);
}

/* Add a subtle underline to admonition titles */
.admonition-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  opacity: 0.4;
  border-radius: 1px;
}

/* Specific colors for each admonition type title */
.admonition.note .admonition-title {
  color: var(--color-accent);
}

.admonition.tip .admonition-title {
  color: #0288d1;
}

.admonition.warning .admonition-title {
  color: #ff8f00;
}

.admonition.danger .admonition-title {
  color: #d32f2f;
}

.admonition.important .admonition-title {
  color: #2e7d32;
}

.admonition.coaching-tip .admonition-title {
  color: var(--color-accent-secondary);
}

.admonition-content {
  font-size: 0.95rem;
  line-height: 1.5;
}

.admonition-content p {
  margin-bottom: var(--space-3);
}

.admonition-content p:last-child {
  margin-bottom: 0;
}

.admonition-content ul, 
.admonition-content ol {
  margin-bottom: var(--space-3);
  padding-left: var(--space-6);
}

.admonition-content li {
  margin-bottom: var(--space-1);
}

/* Color adjustments for better text contrast in each admonition type */
.admonition.note .admonition-content {
  color: #334155;
}

.admonition.tip .admonition-content {
  color: #0a5e75;
}

.admonition.warning .admonition-content {
  color: #663c00;
}

.admonition.danger .admonition-content {
  color: #7f1d1d;
}

.admonition.important .admonition-content {
  color: #1e4620;
}

.admonition.coaching-tip .admonition-content {
  color: #0c4a6e;
}

.admonition.note {
  background-color: var(--color-accent-light);
  border-left-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(172, 196, 244, 0.08);
}

.admonition.tip {
  background-color: #e0f7fa;
  border-left-color: #4fc3f7;
  box-shadow: 0 2px 8px rgba(79, 195, 247, 0.08);
}

.admonition.warning {
  background-color: #fff8e1;
  border-left-color: #ffc107;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.08);
}

.admonition.danger {
  background-color: #ffebee;
  border-left-color: #ef5350;
  box-shadow: 0 2px 8px rgba(239, 83, 80, 0.08);
}

.admonition.important {
  background-color: #e8f5e9;
  border-left-color: #66bb6a;
  box-shadow: 0 2px 8px rgba(102, 187, 106, 0.08);
}

.admonition.coaching-tip {
  background-color: #e3f2fd;
  border-left-color: var(--color-accent-secondary);
  box-shadow: 0 2px 8px rgba(77, 94, 138, 0.08);
}

/* Cox-specific styles */
.cox-command {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  margin: var(--space-1) var(--space-1);
  background-color: var(--color-accent-light);
  border-radius: var(--border-radius);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  line-height: 1.4;
  font-family: var(--font-sans);
}

.race-command {
  background-color: var(--color-accent);
  color: white;
  border-color: rgba(255, 255, 255, 0.1);
}

.drill-command {
  background-color: #e8f4ff;
  color: var(--color-accent);
}

/* Sidebar - precise measurements and sticky positioning */
.sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  height: calc(100vh - var(--header-height) - var(--space-6));
  overflow-y: auto;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* Mobile Sidebar Toggle Button */
.sidebar-toggle {
  display: none; /* Hidden by default, shown only on mobile */
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-accent-secondary);
  color: white;
  border: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  z-index: 90;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 2px solid rgba(255,255,255,0.8);
}

.sidebar-toggle:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.sidebar-toggle:active {
  transform: translateY(1px) scale(0.98);
}

.sidebar-toggle svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Custom scrollbar styling */
.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 4px;
}

.sidebar-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-right: var(--space-3); /* Room for scrollbar */
  padding-top: var(--space-4); /* Add some space at the top now that categories are gone */
}

.sidebar-section {
  border-radius: var(--border-radius);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(172, 196, 244, 0.08), 0 2px 4px -1px rgba(172, 196, 244, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(172, 196, 244, 0.1), 0 3px 6px -2px rgba(172, 196, 244, 0.08);
}

.sidebar-heading {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  color: var(--color-accent-secondary);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-accent-light);
  font-weight: 400;
  line-height: 1.3;
  display: flex;
  align-items: center;
}

.sidebar-heading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--space-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='2' x2='12' y2='22'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* Category Navigation - REMOVED */

/* Table of Contents - refined typography and consistent spacing */
.toc-section {
  border-left: 3px solid var(--color-accent);
}

.toc-section nav {
  padding: var(--space-4);
}

.toc-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.toc-section li {
  margin-bottom: var(--space-1);
  font-size: 0.875rem;
  padding: 0;
  line-height: 1.4;
}

.toc-section li li {
  margin-left: var(--space-4);
  margin-top: var(--space-1);
}

.toc-section a {
  color: var(--color-text-secondary);
  text-decoration: none;
  display: inline-block;
  padding: var(--space-1) 0;
  transition: all var(--transition-duration) ease;
  position: relative;
  padding-left: var(--space-2);
  border-left: 2px solid transparent;
}

.toc-section a:hover {
  color: var(--color-link);
  text-decoration: none;
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-divider);
}

.toc-section a.active {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  border-left: 2px solid var(--color-accent);
}

/* Utility typography - monospace styling for metadata */
.date-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0;
  font-weight: 400;
  white-space: nowrap;
  color: var(--color-text-tertiary);
}

.item-meta {
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin-bottom: var(--space-2);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.item-taxonomies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.item-taxonomy {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0 var(--space-2);
  background-color: #f7f9fc;
  border-radius: 3px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  font-family: var(--font-sans);
}

.item-taxonomy.location { background-color: #e8f5e9; color: #1b5e20; }
.item-taxonomy.weather { background-color: #e3f2fd; color: #0d47a1; }
.item-taxonomy.type { background-color: #ffebee; color: #b71c1c; }
.item-taxonomy.boat { background-color: #fff8e1; color: #ff6f00; }
.item-taxonomy.level { background-color: #e0f7fa; color: #006064; }
.item-taxonomy.difficulty { background-color: #fff3e0; color: #e65100; }
.item-taxonomy.focus { background-color: #f3e5f5; color: #4a148c; }
.item-taxonomy.event { background-color: #e8f5e9; color: #1b5e20; }
.item-taxonomy.race-type { background-color: #ffebee; color: #b71c1c; }

.item-link {
  display: inline-block;
  color: var(--color-link);
  font-size: 0.875rem;
  font-family: var(--font-mono);
  margin-top: var(--space-2);
  transition: all var(--transition-duration) ease;
  text-decoration: none;
  letter-spacing: 0;
}

/* Recent Items - consistent spacing and subtle dividers */
.recent-list {
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  max-width: none;
}

.recent-item {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  padding-left: 0;
}

.recent-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.recent-link {
  color: var(--color-text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all var(--transition-duration) ease;
  display: block;
  line-height: 1.5;
  padding: var(--space-2);
  margin-left: calc(-1 * var(--space-2));
  margin-right: calc(-1 * var(--space-2));
  border-radius: var(--border-radius);
  font-weight: var(--font-weight-normal);
}

.recent-link:hover {
  color: var(--color-link);
  text-decoration: none;
  background-color: rgba(59, 130, 246, 0.05);
}

/* Tag Cloud - consistent, clean styling */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
}

.tag-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  padding: var(--space-1) var(--space-3);
  background-color: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  color: #495057;
  text-decoration: none;
  transition: all var(--transition-duration) ease;
  line-height: 1.3;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tag-link:hover {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
  border-color: var(--color-accent-light);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.tag-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.85;
  margin-left: var(--space-2);
  background-color: rgba(0, 0, 0, 0.06);
  padding: 0 5px;
  border-radius: 3px;
  letter-spacing: 0;
}

/* Taxonomy-specific tag styling */
.location-tag {
  background-color: #e8f5e9;
  color: #1b5e20;
  border-color: #c8e6c9;
}
.location-tag:hover {
  background-color: #c8e6c9;
  color: #1b5e20;
  border-color: #a5d6a7;
}

.weather-tag {
  background-color: #e3f2fd;
  color: #0d47a1;
  border-color: #bbdefb;
}
.weather-tag:hover {
  background-color: #bbdefb;
  color: #0d47a1;
  border-color: #90caf9;
}

.boat-tag {
  background-color: #fff8e1;
  color: #ff6f00;
  border-color: #ffecb3;
}
.boat-tag:hover {
  background-color: #ffecb3;
  color: #ff6f00;
  border-color: #ffe082;
}

.audience-tag {
  background-color: #e0f7fa;
  color: #006064;
  border-color: #b2ebf2;
}
.audience-tag:hover {
  background-color: #b2ebf2;
  color: #006064;
  border-color: #80deea;
}

.focus-tag {
  background-color: #f3e5f5;
  color: #4a148c;
  border-color: #e1bee7;
}
.focus-tag:hover {
  background-color: #e1bee7;
  color: #4a148c;
  border-color: #ce93d8;
}

.difficulty-tag {
  background-color: #fff3e0;
  color: #e65100;
  border-color: #ffe0b2;
}
.difficulty-tag:hover {
  background-color: #ffe0b2;
  color: #e65100;
  border-color: #ffcc80;
}

.race-type-tag {
  background-color: #ffebee;
  color: #b71c1c;
  border-color: #ffcdd2;
}
.race-type-tag:hover {
  background-color: #ffcdd2;
  color: #b71c1c;
  border-color: #ef9a9a;
}

.coxswain-tag, .level-tag {
  background-color: #e8eaf6;
  color: #1a237e;
  border-color: #c5cae9;
}
.coxswain-tag:hover, .level-tag:hover {
  background-color: #c5cae9;
  color: #1a237e;
  border-color: #9fa8da;
}

/* Responsive layout - refined breakpoints and behavior */
@media (max-width: 1024px) {
  .main-container {
    grid-template-columns: calc(var(--sidebar-width) - var(--space-8)) 1fr;
    gap: var(--space-6);
  }
  
  .article-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  /* Mobile sidebar styling - slide out from right */
  .sidebar {
    position: fixed;
    top: 0;
    right: -300px; /* Start off-screen */
    width: 300px;
    height: 100vh;
    background-color: var(--color-background-alt);
    z-index: 95;
    transition: transform 0.3s ease, right 0s linear 0.3s;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    padding: var(--space-5);
    padding-top: calc(var(--space-10) + var(--space-4));
    overflow-y: auto;
    display: block !important; /* Force display block for the fixed position */
  }
  
  .sidebar.active {
    transform: translateX(-300px); /* Slide in */
    right: 0; /* Ensure it's properly positioned */
    transition: transform 0.3s ease, right 0s linear;
  }
  
  .sidebar-toggle {
    display: flex; /* Show toggle on mobile */
  }
  
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 94;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Adjust main container for mobile - hide sidebar from grid */
  .main-container {
    grid-template-columns: 1fr !important; /* Force single column layout */
    margin-top: 0; /* No extra margin on mobile */
    padding: var(--space-4);
    padding-top: var(--space-6);
    gap: var(--space-6);
  }
  
  /* Hide sidebar from normal document flow */
  .main-container > .sidebar {
    display: none !important;
  }
  
  /* Responsive styling for full-width header on mobile */
  .full-width-header {
    padding: var(--space-5) var(--space-4) var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--border-radius);
  }
  
  .article-header {
    padding: var(--space-5) var(--space-4) var(--space-4);
    margin-bottom: var(--space-4);
  }
  
  .full-width-header .article-title {
    font-size: 1.85rem;
    line-height: 1.15;
  }
  
  .sidebar {
    position: static;
    height: auto;
    margin-bottom: var(--space-6);
    overflow: visible;
  }
  
  .sidebar-container {
    gap: var(--space-4);
    padding-right: 0;
  }
  
  /* Backgrounds are hidden on mobile - no mobile-specific adjustments needed */
  
  /* Mobile header and navigation */
  .site-header {
    position: relative;
  }

  .header-top {
    padding: var(--space-4) 0 var(--space-2);
    height: auto;
  }
  
  .header-bottom {
    display: none; /* Hide the regular navigation on mobile */
  }
  
  .site-title {
    font-size: 1.5rem;
  }
  
  /* Show hamburger menu */
  .hamburger-menu {
    display: block;
  }
  
  /* Adjust search in mobile view */
  .nav-search {
    width: 180px;
    flex: none;
  }
  
  .nav-link {
    padding: var(--space-2) var(--space-4);
    font-size: 0.9375rem;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-info {
    margin-bottom: var(--space-4);
  }
  
  /* Search adjustments for mobile */
  .search-input-wrapper {
    max-width: 100%;
  }
  
  .search-overlay {
    padding-top: var(--space-10);
  }
  
  .search-header {
    margin-bottom: var(--space-4);
  }
  
  .search-result-item {
    padding: var(--space-4);
  }
  
  .search-result-title {
    font-size: 1.125rem;
  }
  
  .search-result-snippet {
    font-size: 0.85rem;
  }
  
  .search-suggestions {
    max-height: 200px;
  }
  
  .search-suggestion-item {
    padding: var(--space-2) var(--space-3);
  }
  
  .search-suggestion-title {
    font-size: 0.9rem;
  }
  
  .search-suggestion-preview {
    font-size: 0.8rem;
  }
  
  /* Typography adjustments for mobile */
  h1 { 
    font-size: 1.75rem; 
    margin-bottom: var(--space-6);
  }
  
  h2 { 
    font-size: 1.5rem; 
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
  }
  
  h3 { 
    font-size: 1.25rem; 
    margin-top: var(--space-6);
  }
  
  .article-title {
    font-size: 1.75rem;
  }
  
  .article-content {
    font-size: 1rem;
    grid-column: 1; /* Reset grid column on mobile */
    padding: var(--space-5);
    margin-bottom: var(--space-5);
  }
  
  .article-footer {
    grid-column: 1; /* Reset grid column on mobile */
    padding: 0 var(--space-2);
  }
  
  /* Adjust content container padding on mobile */
  .content {
    padding: 0;
  }
  
  /* Improve admonitions on mobile */
  .admonition {
    padding: var(--space-4);
    margin: var(--space-5) 0;
  }
  
  /* Hide anchor indicators on mobile */
  .article-content h2::before,
  .article-content h3::before {
    display: none;
  }
  
  /* Fix container padding on small screens */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  /* Responsive figure adjustments */
  figure.align-left,
  figure.align-right {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
  }
  
  figure.narrow {
    max-width: 100%;
  }
}

/* Print styles */
@media print {
  .site-header, .site-footer, .search-toggle {
    display: none;
  }
  
  body {
    font-size: 12pt;
  }
  
  a {
    color: var(--color-text);
    text-decoration: underline;
  }
  
  .container {
    max-width: none;
    padding: 0;
    margin: 0;
  }
}