/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* =======FONT STUFF======= */
@font-face {
  font-family: 'VT323';
  src: url('/fonts/VT323-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}

h1, h2, h3 {
  font-family: 'VT323', monospace;
  font-weight: normal; 
  letter-spacing: 0.5px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* =======GLOBAL STYLES======= */
html, body {
  background-color: white;
  background-image: url('assets/gryl055.jpg');
  background-repeat: repeat;
  background-attachment: fixed; /* Keeps the background from scrolling with the page */
  color: #171416;
  font-family: Verdana, sans-serif;
  letter-spacing: 0.5px; /* Makes the wide letters look more elegant */
  line-height: 1.6; /* Essential for accessibility when using Verdana */
  margin: 0;
  height: 100%;
  min-height: 100%;
  /* fallback */
  line-height: 1.5; 
    /* Min: 1.4, Ideal: 1.5 (calc combines base + viewport), Max: 1.6 */
  line-height: clamp(1.4, 1.2rem + 0.5vw, 1.6);
}

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


.frame-container {
  display: flex; /* Aligns sidebar and content side-by-side */
  height: 100vh; /* Fills the entire browser height */
}

/* ~~~Sidebar Styles~~~ */

.sidebar {
  width: 200px; /* Fallback for older browsers/editors */
  width: clamp(80px, 15vw, 200px); 
  background-color: #ead1dc;
  color: #171416;
  padding-left: 20px; /* Fallback */
  padding-right: 20px; /* Fallback */
  padding-left: clamp(10px, 2vw, 30px); 
  padding-right: clamp(10px, 2vw, 30px);
  padding-top: 80px; /*fallback*/
  padding-top: clamp(40px, 16vh, 160px); 
  flex-shrink: 0; /* Prevents the sidebar from squishing */
  overflow-y: auto; /* Allows sidebar to scroll if menu is long */
  /* Pins the sidebar so it stays put while content scrolls */
  position: sticky;
  top: 0;
  height: 100vh;
  /* FALLBACK: A standard border */
  border-right: 4px double #6A2150;
  /* MODERN: Scales thickness slightly on bigger screens */
  border-right: clamp(1px, 0.2vw, 4px) double #6A2150;
}

/* ~~~Sidebar Links Styles~~~ */
.sidebar a {
  font-family: 'VT323', monospace; 
  font-size: 20px; /*fallback*/
  font-size: clamp(18px, 1.5vw, 22px);  
  color: #6A2150;
  font-weight: normal;
  text-decoration: none;
}

/* ~~~Sidebar Hover Link Styles~~~ */
.sidebar a:hover {
  background-color: #6A2150; /* Dark purple background */
  color: #ead1dc; /* Light pink text */
  text-decoration: none; /* Removes underline for a "button" look */
}

/* ~~~Main Content Styles~~~ */
.content {
  flex-grow: 1; /* Takes up all remaining space */
  padding: 20px;
  /* Min: 15px, Ideal: 3vw, Max: 60px */
  padding: clamp(15px, 3vw, 60px); 
  overflow-y: auto; /* This creates the independent "content frame" scroll */
}

/* ~~~divider Style~~~ */
.pixel-divider {
  clear: both;        /* 1. This "breaks" the float from the drop cap */
  width: 100%;       
  text-align: center; 
  margin: 40px 0; 
  display: block;    
}
.pixel-divider img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Dropcap ~ This targets the first letter of the first paragraph in your content */
.content p:first-of-type::first-letter {
  font-family: 'VT323', monospace;
  color: #6A2150;
  display: block;
  float: left; /* This makes the text wrap around the big letter */
  font-size: clamp(3rem, 8vw, 4.5rem); /* Scales with the screen */
  line-height: 0.8; 
  margin-top: -0.1em; 
  margin-right: 4px;
  padding: 0;
}

/* ~~~~ Bio Lore Styles ~~~~ */

.bio-list dt {
  font-family: 'VT323', monospace;
  color: #6A2150;
  font-size: 1.4rem;
  margin-top: 0px;
  text-transform: uppercase;
  letter-spacing: 2px;
  /* This creates a horizontal 'shelf' for the term */
  border-bottom: 1px solid #ead1dc; 
  display: inline-block; 
}

.bio-list dd {
  margin-left: 0;
  margin-top: 8px;
  padding-left: 15px;
  /* This 3px dark line acts as the 'flesc' (the Ogham backbone) */
  border-left: 3px solid #6A2150; 
  font-style: italic;
  color: #333;
  line-height: 1.6;
}


/* ~~~~Heading Styles~~~~ */

/* Page Titles (H1) */
h1 {
  color: #6A2150;
  margin-top: 0; /* Prevents awkward gaps at the top of your "frame" */
  font-size: 32px; /* Fallback */
  font-size: clamp(1.5rem, 5vw, 3rem); 
}

/* Sub-headers (H2) */
h2 {
  border-bottom: 2px dashed #ead1dc;
  padding-bottom: 10px;
  color: #6A2150;
  font-size: 26px; /* Fallback */
  font-size: clamp(1.3rem, 4vw, 2.2rem); 
}

/* Section titles (H3) */
h3 {
  color: #6A2150;
  font-size: 22px; /* Fallback */
  font-size: clamp(1.1rem, 3vw, 1.8rem); 
}

/* Small labels (H4) */
h4 {
  color: #6A2150;
  font-size: 18px; /* Fallback */
  font-size: clamp(1rem, 2.5vw, 1.4rem); 
  font-weight: bold;
}

/* ======= STATUS BOX STYLE ======= */
.status-box {
  background-color: #fdfaf5;
  border: 1px solid #6A2150;
  padding: 1.5rem;
  
  /* Layout Logic */
  flex: 0 1 400px;
  width: clamp(300px, 90%, 550px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  box-shadow: 6px 6px 0px #ead1dc;
  
  /* This makes the hover glow smooth! */
  transition: border-color 0.3s ease; 
}

/* This is the hover effect */
.status-box:hover {
  border-color: #9e3278; 
  border-width: 2px; 
  box-shadow: 6px 6px 0px #9e3278, 0px 0px 12px rgba(158, 50, 120, 0.4);
  transform: translateY(-1px);
}

.status-header {
  border-bottom: 1px dashed #6A2150;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.status-header h3 {
  margin: 0;
}

.book-title {
  font-style: italic;
  color: #6A2150;
  border-bottom: 1px dotted #6A2150;
}

.status-content p {
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.status-icon {
  width: 96px;
  height: auto;
  vertical-align: middle;
  image-rendering: pixelated; /* Keeps your stream sharp! */
}

/* Cancel drop cap in status box */
.status-content p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  text-shadow: none;
}

/* ~~~~ Content Split Style ~~~~ */
.content-split {
  display: flex;
  flex-wrap: wrap; 
  justify-content: flex-start;  
  align-items: flex-start; 
  gap: 20px; 
  margin-top: 0px; 
}

.primary-col {
  flex: 0 1 auto; 
  min-width: 250px;
  max-width: 400px; 
}

/* Alt to Status box secondary column on home page so that it can be stuled differenlty for general purpose*/
.secondary-col {
  flex: 1; /* This lets the right side soak up the extra white space */
  display: flex;
  justify-content: center; /* Centers whatever you put here later */
  padding-top: 30px;
}


/* =======UTILITY STYLES======= */

/* Accessibility code to allow screen readers to skip long list of sidebar links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #6A2150;
  color: white;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  top: 0; /* Pops into view when you hit 'Tab' */
}

/* =======MOBILE STYLES======= */

/* Use Media Query ONLY to hide the text labels when space is tight */
@media screen and (max-width: 600px) {
  .sidebar {
    padding: 0 5px; /* Tighter sides for mobile */
    padding-top: 40px; /* Smaller top gap for mobile */
    width: 80px; /* Force the skinny width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the links horizontally */
    /* Enables automatic hyphenation */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* Forces the word to break if it's still too long */
    overflow-wrap: break-word;
    word-wrap: break-word; 
  }
  .sidebar span {
    display: none; /* Keep text hidden */
  }
  
  .sidebar a {
    text-align: center;
    font-size: 1rem; /* Slightly larger for easier tapping */
    width: 100%; /* Makes the whole 60px width clickable */
    padding: 15px 0; /* Vertical spacing between icons */
  }
  h1 {
    margin-top: 20px; /* Fine-tune the "Starting line" of your text */
  }
}