/* static/style.css */

/* Nord Palette */
:root {
    --nord0:  #2E3440;
    --nord1:  #3B4252;
    --nord2:  #1d1f23;
    --nord3:  #4C566A;
    --nord4:  #D8DEE9;
    --nord5:  #E5E9F0;
    --nord6:  #ECEFF4;
    --nord7:  #8FBCBB;
    --nord8:  #88C0D0;
    --nord9:  #81A1C1;
    --nord10: #5E81AC;
    --nord11: #BF616A;
    --nord12: #D08770;
    --nord13: #EBCB8B;
    --nord14: #A3BE8C;
    --nord15: #B48EAD;
}

html {
    font-size: 16px; /* Desktop */
  }
  
  @media (max-width: 900px) {
    html {
      font-size: 14px; /* Tablet */
    }
  }
  
  @media (max-width: 600px) {
    html {
      font-size: 12px; /* Smartphone */
    }
  }
  

.vertical-bg-left {
    position: fixed;
    top: 0;
    left: 0; /* move to right side if needed */
    width: 500px;
    height: 100%;
    background-color: var(--nord1);
    clip-path: path("M0,0 L0,1500 L400,1500 Q600,1250 400,1000 T400,0  Z");

    transform-origin: center;
    z-index: -1;
  }
  
  .vertical-bg-right {
    position: fixed;
    top: 0;
    right: 0; /* move to right side if needed */
    width: 500px;
    height: 100%;
    background-color: var(--nord1);
    clip-path: path("M0,0 L0,1500 L400,1500 Q600,1250 400,800 T400,0  Z");
    transform: scaleX(-1); /* horizontal flip */
    transform-origin: center;
    z-index: -1;
  }
  

  @media (max-width: 900px) {
    .vertical-bg-left,
    .vertical-bg-right {
      width: 200px; /* smaller */
      clip-path: path("M0,0 L0,1500 L150,1500 Q250,1250 150,800 T150,0 Z");
    }
  }
  
  @media (max-width: 600px) {
    .vertical-bg-left,
    .vertical-bg-right {
      display: none; /* hide completely on very small screens */
    }
  }
  

a {
    color: var(--nord13);
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--nord0);
    color: var(--nord4);
    font-family: 'Cascadia Code', monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem;
    box-sizing: border-box;
}

main {
   width: 100%
}

/* Container matches background color exactly */
.file-list-container {
    width: 100%;
    max-width: 1000px;
    background-color: var(--nord0);
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

/* Big clickable rectangular blocks */
.file-item {
    display: block;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    background-color: transparent;
    color: var(--nord4);
    text-decoration: none;
    /*box-shadow: 0 0 8px rgba(0,0,0,0.3);*/
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    user-select: text;
    min-height: 100px;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid transparent;
    outline-offset: 4px;
}

.file-item:hover,
.file-item:focus {
    background-color: var(--nord1);
    /*box-shadow: 0 0 15px var(--nord1);*/
    border-color: var(--nord1);
    outline: none;
}

.file-divider {
    border: none;
    border-bottom: 1px solid var(--nord3);
    margin: 0.5rem 0;
}

.file-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    user-select: text;
}

.file-date {
    margin-left: auto;
 }
.file-meta {
    font-size: 1rem;
    display: flex;
    gap: 2rem;
    color: var(--nord7);
    user-select: text;
}

.file-meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

header {
    width: 100%;

}
  
.header-container {

width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 4px solid var(--nord3);
padding: 1rem;
margin-bottom: 1rem;
box-sizing: border-box;
}

.site-title {
font-family: 'Cascadia Code', monospace;
margin: 0;

}

.header-links a {
font-family: 'Cascadia Code', monospace;
}


/* Markdown content styles */
.markdown-content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0; 
    box-sizing: border-box;
    color: var(--nord4);
}
.markdown-content h1, .markdown-content h2, .markdown-content h3 {
    color: var(--nord8);
    border-bottom: 1px solid var(--nord3);
    padding-bottom: 0.2rem;
    margin-top: 1.5rem;
}
.markdown-content pre {
    background: var(--nord2);
    padding: 1rem;
    border-radius: 5px;
    overflow-x: auto;
    box-shadow: 0 4px 12px var(--nord2);
}
.markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    
}
.markdown-content th, .markdown-content td {
  
  text-align: left;
}
.markdown-content th {
    background: var(--nord3);
    
}
.markdown-content hr {
    color: var(--nord3);
    size: 1px;
}

.markdown-content code {
    background-color: var(--nord2);
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    font-family: 'Cascadia Code', monospace;
    font-size: 0.85rem;
    color: var(--nord4);
}

.markdown-content strong {
  color: var(--nord14); /* green */
  font-weight: bold;    /* just in case */
}

.markdown-content {
  line-height: 1.4; /* 160% of font size */
}


.markdown-content img {
  max-width: 100%;  /* image cannot exceed container width */
  height: auto;     /* keep aspect ratio */
  display: block;   /* remove inline spacing issues */
  margin: 1rem 0;   /* optional spacing around images */
}