/* ---
   0. Color Themes
   --- */

:root {
  /* Default to light mode */
  --bg-color: #fdfdfd;
  --text-color: #222222;
  --heading-color: #000000;
  --link-color: #005ea2;       /* <-- ADD THIS */
  --link-color-hover: #003078; /* <-- ADD THIS */
  --header-bg-color: #f8f8f8;  /* <-- ADD THIS */
  
  /* This respects the user's OS preference as the default */
  @media (prefers-color-scheme: dark) {
    --bg-color: #222222;
    --text-color: #dddddd;
    --heading-color: #ffffff;
    --link-color: #a2c7ff;       /* <-- ADD THIS */
  --link-color-hover: #459bff; /* <-- ADD THIS */
  --header-bg-color: #2a2a2a;  /* <-- ADD THIS */
  }

  /* ... (Your :root font-size styles remain the same) ... */
  font-size: 112.5%;

  @media (min-width: 768px) {
    font-size: 125%; 
  }
}

html {
  /* This tells the browser: "When you jump to any anchor link,
    please leave 3.5rem of space at the top of the screen."
    
    Your sticky header will fit perfectly in this space.
  */
  scroll-padding-top: 3.5rem; 
}

/* User's EXPLICIT choice for LIGHT mode */
body.light-mode {
  --bg-color: #fdfdfd;
  --text-color: #222222;
  --heading-color: #000000;
  --link-color: #005ea2;       /* <-- ADD THIS */
  --link-color-hover: #003078; /* <-- ADD THIS */
  --header-bg-color: #f8f8f8;  /* <-- ADD THIS */
}

/* User's EXPLICIT choice for DARK mode */
body.dark-mode {
  --bg-color: #222222;
  --text-color: #dddddd;
  --heading-color: #ffffff;
    --link-color: #a2c7ff;       /* <-- ADD THIS */
  --link-color-hover: #459bff; /* <-- ADD THIS */
  --header-bg-color: #2a2a2a;  /* <-- ADD THIS */
}



/* ---
   1. Core Layout & Typography
   --- */

body {
  /* Typography */
  font-family: 'Lora', serif;
  font-size: 1rem;
  line-height: 1.6;
  
  /* Color - NOW USING CSS VARIABLES! */
  color: var(--text-color);
  background-color: var(--bg-color);
  
  /* Layout */
  padding: 1rem;
  
  /* Added for a smooth color transition */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ... (main styles remain the same) ... */
main {
  margin: 2rem auto; 
  max-width: 65ch;  
}

/* ---
   2. Headings
   --- */

h1, h2, h3 {
  font-family: 'Manrope', sans-serif;
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 1rem;
  
  /* Heading color variable */
  color: var(--heading-color);
}

/* ... (h1, h2, p styles remain the same) ... */
h1 {
  /* This says:
    1. Be 2.25rem at the smallest.
    2. Try to be 8vw (8% of the viewport width).
    3. Never get bigger than 3rem.
    
    This replaces your static 'font-size: 3rem;'
  */
  font-size: clamp(2.25rem, 8vw, 3rem);
}

h2 {

  font-size: clamp(1.25rem, 6vw, 1.75rem);
}

h3 {
  
  font-size: clamp(1.1rem, 4vw, 1.35rem);
}

p {
  margin-bottom: 1rem;
}

/* ---
   2.1 Article Header
   --- */

.article-header {
  /* Center all the text inside the header */
  text-align: center;
  
  /* Add space below the header */
  margin-bottom: 3rem;
  
  /* Add space before the separator line */
  padding-bottom: 2rem;
  
  /* The separator line! */
  border-bottom: 1px solid var(--text-color); 
  opacity: 0.8; /* Makes the line a bit softer */
}

/* Style the h1 inside this header */
.article-header h1 {
  margin-bottom: 0.5rem; 
  /* It already has h1 styles, so this is all we need */
}

/* Style the new subtitle class */
.article-subtitle {
  font-family: 'Manrope', sans-serif; /* Match headings */
  font-size: 1.25rem; /* A good "in-between" size */
  line-height: 1.5;
  font-weight: 400; /* Make it regular weight */
  
  /* Use a slightly softer text color */
  color: var(--text-color);
  opacity: 0.9;
  
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Style the byline and intro note */
.byline,
.intro-note {
  font-size: 0.9rem;
  color: var(--text-color);
  opacity: 0.7; /* Make it less prominent */
  line-height: 1.4;
}

/* Remove extra margin between byline and note */
.byline {
  margin-bottom: 0.25rem;
}

/* ---
   2.5 Links
   --- */

article a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

article a:hover,
article a:focus {
  color: var(--link-color-hover);
  text-decoration-thickness: 2px;
  outline: none; /* Focus is clear from color/underline change */
}

/* ---
   3. Theme Toggle Button
   --- */
   
.theme-toggle {
  /* NEW simpler styles */
  background: none;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
}

.theme-toggle:focus {
  /* Simple and effective: use the same style as .toc-button */
  background-color: var(--text-color);
  color: var(--bg-color);
  outline: none; /* The background change is a clear indicator */
}

/* Add a visual cue for dark mode */
.dark-mode .theme-toggle::before {
  content: '☀️';
}

.theme-toggle::before {
  content: '🌙';
}

/* ---
   6. Site Header & Footer
   --- */

.site-header {
  /* --- STICKY HEADER RULES (same as before) --- */
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--header-bg-color);

  /* --- 1. USE FLEXBOX (as you had before) --- */
  display: flex;
  align-items: center; /* This vertically centers all 3 items */
  gap: .5rem;           /* Adds a healthy space between items */
  justify-content: space-between; /* <-- THIS IS CORRECT */

  /* --- All other styles are the same --- */
  margin-left: auto;
  margin-right: auto;
  max-width: 80ch;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: .1rem;
  margin-bottom: 2rem;
  padding-bottom: .5rem;
  padding-top: .5rem;
  border-bottom: 1px solid var(--text-color);
  opacity: 1;
}

.site-title {
    /* 1. Use the heading font */
    font-family: 'Manrope', sans-serif;
    color: var(--heading-color);
    
    /* 2. Give it a custom size and weight */
    font-size: 1.1rem; /* A good, strong size for the header */
    font-weight: 700;  /* Makes it bold */
    
    /* 3. This is the key: remove default margins */
    margin: 0;
    line-height: 1.2; /* Match your other headings */
    text-decoration: none;
    flex-shrink: 0;
    
  text-align: center; /* Ensures the text itself is centered */
}

/* ... (site-header p and site-footer styles are the same) ... */

/* ---
   7. Table of Contents Nav
   --- */

.toc-nav {
  position: relative; /* For positioning the menu */
}

.toc-button {
  /* Reset button styles */
  background: none;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  
  /* Flex for arrow */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

/* --- ✨ NEW RULES FOR HIDING TEXT ON MOBILE --- */

/* ---
   NEW: Mobile-First Icon Button Styles
   --- */

/* --- 1. For the Table of Contents Button --- */

/* Hide the "Navigation" text span on mobile */
.button-text {
display: none;
}

/* Style the TOC button for icon-only */
.toc-button {
/* Your original styles had display:inline-flex, which is great! */
/* We just force it to be a square */
width: 44px; 
height: 44px;
padding: 0; 
justify-content: center; /* This centers the <svg> icon */
}

/* Ensure the icon has no extra margin */
.toc-button .toc-arrow {
margin-left: 0;
}

/* --- 2. For the Theme Toggle Button --- */

.theme-toggle {
width: 44px;
height: 44px;
padding: 0;

/* This is the magic trick:
     1. Hide the "Light/Dark" text node
  */
font-size: 0; 

/*      2. Make it a flex container to center the icon 
  */
display: inline-flex;
justify-content: center;
align-items: center;
}

/* 3. We must *restore* the font-size for the
   ::before icon (🌙/☀️), otherwise it will also be hidden!
*/
.theme-toggle::before {
font-size: 1rem; /* Makes the icon visible again */
margin-right: 0; /* Remove any old margin */
}

/* The theme-toggle icon is a ::before, so this centers it */
.theme-toggle::before {
  margin-right: 0; /* Remove any margin */
}

/* The toc-button icon is an <svg>, so center it */
.toc-button .toc-arrow {
  margin-left: 0; /* Remove any margin */
}

.toc-button:hover,
.toc-button:focus {
  background-color: var(--text-color);
  color: var(--bg-color);
}

.toc-arrow {
  transition: transform 0.2s ease;
  /* Fixes a small visual bug on some browsers */
  stroke: currentColor;
}

/* Rotate arrow when open */
.toc-button[aria-expanded="true"] .toc-arrow {
  transform: rotate(180deg);
}

.toc-menu {
  /* Hide by default */
  display: none;
  
  /* Positioning */
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  
  /* Styling */
  background-color: var(--bg-color);
  border: 1px solid var(--text-color);
  border-radius: 4px;
  padding: 0.5rem 0;
  min-width: 150px;
  max-width: 270px;
  list-style: none;
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  
  /* Accessibility */
  z-index: 10;
}

/* This class is added by JS to show the menu */
.toc-menu.open {
  display: block;
}

.toc-menu li {
  margin: 0;
}

.toc-menu a {
  /* Reset link styles for the menu */
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-weight: 400;
  font-family: 'Manrope', sans-serif;
  color: var(--text-color);
  white-space: nowrap;     /* 1. Prevents the text from wrapping */
  overflow: hidden;        /* 2. Hides any text that overflows the box */
  text-overflow: ellipsis; /* 3. Adds the "..." at the end */
}

.dark-mode .toc-menu a {
  color: var(--text-color);
}

.toc-menu a:hover,
.toc-menu a:focus {
  background-color: var(--text-color);
  color: var(--bg-color);
  outline: none; /* Focus is handled by the background */
  text-decoration: none;
}

/* ---
   8. Site Footer
   --- */

.site-footer {
  /* Match the article width for alignment */
  max-width: 80ch; 
  
  /* Center it and add spacing */
  margin: 4rem auto 2rem auto; /* top, horizontal, bottom */
  
  /* Add a separator line */
  padding-top: 2rem;
  border-top: 1px solid var(--text-color);
  
  /* Style the text */
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  color: var(--text-color);
  opacity: 0.7; /* Make it less prominent, like the byline */
}

/* ---
   9. Floating Actions
   --- */

.floating-actions {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem; /* Tucks them in the bottom-right corner */
  z-index: 50;
  display: flex;
  flex-direction: column; /* Stacks the buttons vertically */
  gap: 0.75rem;

  /* --- HIDE BY DEFAULT --- */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px); /* Will slide up when appearing */
  transition: all 0.3s ease;
}

/* --- THIS CLASS WILL BE ADDED BY JAVASCRIPT --- */
.floating-actions.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Styling */
  background-color: var(--header-bg-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
  
  /* 44px is a great, touch-friendly size */
  width: 44px; 
  height: 44px;
  border-radius: 50%; /* Circular */
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  /* Accessibility & Transitions */
  transition: all 0.2s ease;
  stroke: currentColor; /* Makes the SVG icon color match */
}

.action-text {
  display: none; /* Hide on mobile by default */
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: 0.5rem; /* Space between icon and text */
}

/* Invert colors on hover/focus for a clear effect */
.action-button:hover,
.action-button:focus {
  background-color: var(--text-color);
  color: var(--bg-color);
  stroke: var(--bg-color);
  outline: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* On tablet-sized screens and up... */
/* ---
   Media Query to Show Text on Desktop
   --- */

@media (min-width: 768px) {
 
/* --- 1. Restore the TOC Button --- */

/* Show the "Navigation" text */
.button-text {
display: inline;
}

/* Reset TOC button to show text */
.toc-button {
width: auto;
height: auto;
padding: 0.25rem 0.75rem;
}

/* Add space for the arrow icon */
.toc-button .toc-arrow {
margin-left: 0.5rem;
}

/* --- 2. Restore the Theme Button --- */

/* Reset Theme button to show text */
.theme-toggle {
width: auto;
height: auto;
padding: 0.25rem 0.75rem;
font-size: 0.9rem; /* Restore original font size */
}

/* Restore icon size and add space */
.theme-toggle::before {
font-size: 1em; /* Resets it to the button's font size */
margin-right: 0.5rem; /* Add space between icon and "Light/Dark" */
}

  .action-button {
    /* Go from circle to pill */
    width: auto; /* Let the button grow */
    border-radius: 22px; /* Pill shape */
    
    /* Add padding: 12px left, 16px right */
    padding: 0 1rem 0 0.75rem; 
    
    /* Align icon to the start, not center */
    justify-content: flex-start; 
  }

  .action-text {
    display: inline; /* Show the text */
  }
}

/* Remove underline from link-based action buttons */
a.action-button:hover,
a.action-button:focus,
a.action-button {
  text-decoration: none;
}

/* ---
   10. Figures & Images
   (You can add this new section)
   --- */

figure {
  /* This is the default "column image" */
  margin: 2.5rem 0; /* Adds nice vertical space */
  width: 100%;       /* Stays inside the 75ch <main> container */
}

figure.figure-wide {
  /* This is the "break-out" style */
  width: 90vw; /* 90% of the viewport width */
  max-width: 1100px; /* But don't let it get *too* huge */

  /* This is the magic trick to center it */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* --- General Image & Caption Styling --- */

figure img {
  width: 100%;
  height: auto; /* Maintains aspect ratio */
  display: block;
  border-radius: 4px; /* A very subtle, soft corner */
}

figcaption {
  margin-top: 0.5rem;
  text-align: center;
  
  /* Matches your .byline style */
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  color: var(--text-color);
  opacity: 0.7;
  line-height: 1.4;
}

/* ---
   11. Blockquotes
   --- */

blockquote {
  /* 1. Adds vertical space above/below */
  margin: 2.5rem 0; 
  
  /* 2. The classic, elegant left border */
  border-left: 3px solid var(--text-color);
  
  /* 3. Indents the text from the border */
  padding-left: 1.5rem; 
  
  /* 4. A little padding on the right side too */
  padding-right: 1rem;
  
  /* 5. Makes the border color slightly softer */
  opacity: 0.6;
}

/* Ensures paragraphs inside the quote don't get
  double-margins.
*/
blockquote p {
  margin-bottom: 1rem;
}

/* Style the attribution (the <footer> or <cite>) 
  We use Manrope to set it apart from the quote text.
*/
blockquote footer,
blockquote cite {
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  font-style: normal; /* Overrides browser's default italic */
  opacity: 0.8;
  line-height: 1.4;
}

/* ---
   12. Lists (Ordered & Unordered)
   --- */

/* Applies to both list types */
ul,
ol {
  /* Vertical space above/below the entire list block */
  margin: 1.5rem 0;
  
  /* This is the magic combo:
    1. 'outside' hangs the bullet/number in the margin.
    2. 'padding-left' creates the margin space for it.
  */
  list-style-position: outside;
  padding-left: 1.75rem;
}

li {
  /* Adds vertical space between each list item */
  margin-bottom: 0.5rem;
  
  /* This adds a tiny bit of extra space between
    the marker and the text itself.
  */
  padding-left: 0.25rem;
}

/* --- Styling for Nested Lists --- */

ul ul,
ol ol,
ul ol,
ol ul {
  /* Tucks the nested list closer to its parent item,
    rather than having a large top margin.
  */
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  
  /* Adds *additional* indentation for the nested list,
    so it's clearly hierarchical.
  */
  margin-left: 1.2rem;
}