/* Global box-sizing rule */
 * {
     box-sizing: border-box;
 }
 
 /* ===== COLOR VARIABLES ===== */
 :root {

     --hue-primary: 258;
     --sat-primary: 95%;
     --hue-secondary: 188;
     --sat-secondary: 95%;

    --lightness-brightest: 96%;
    --lightness-bright: 84.5%;
    --lightness-mid: 42%;
    --lightness-dark: 10%;
    --lightness-darkest: 5%;
    
     /* Neutral tones */
     --neutral-brightest: hsl(0, 0%, var(--lightness-brightest));
     --neutral-bright: hsl(0, 0%, var(--lightness-bright));
     --neutral-mid: hsl(0, 0%, var(--lightness-mid));
     --neutral-dark: hsl(0, 0%, var(--lightness-dark));
     --neutral-darkest: hsl(0, 0%, var(--lightness-darkest));

    /* Primary tones */
    --primary-bright: hsl(var(--hue-primary), var(--sat-primary), var(--lightness-bright));
    --primary-mid: hsl(var(--hue-primary), var(--sat-primary), var(--lightness-mid));
    --primary-dark: hsl(var(--hue-primary), var(--sat-primary), var(--lightness-dark));

    /* Secondary tones */
    --secondary-bright: hsl(var(--hue-secondary), var(--sat-secondary), var(--lightness-bright));

        --bubble-translucency: 0.25;
        --bubble-border-radius: 30px;
        --bubble-padding: 20px;
        --bubble-margin: 20px;
        --bubble-blur: 1px;
        --bubble-shadow-opacity: 0.25;

        /* Bubble-only colors (not affected by dark mode) */
        --bubble-bg-primary: hsla(var(--hue-primary), var(--sat-primary), 96%, 0.6);
        --bubble-bg-secondary: hsla(var(--hue-secondary), var(--sat-secondary), 96%, 0.6);
        --bubble-border-color: hsl(0, 0%, 95%);
        --bubble-shadow-color: hsl(0, 0%, 5%);
   }

/* Dark mode overrides */
[data-theme="dark"] {
    --lightness-brightest: 2%;
    --lightness-bright: 22%;
    --lightness-mid: 25%;
    --lightness-dark: 35%;
    --lightness-darkest: 45%;
    /* Primary tones */
    --primary-bright: hsl(var(--hue-primary), var(--sat-primary), var(--lightness-dark));
    --primary-mid: hsl(var(--hue-primary), var(--sat-primary), var(--lightness-mid));
    --primary-dark: hsl(var(--hue-primary), var(--sat-primary), var(--lightness-bright));

    /* Secondary tones */
    --secondary-bright: hsl(var(--hue-secondary), var(--sat-secondary), var(--lightness-dark));
}

/* Smooth theme transitions */
:root,
[data-theme="dark"] {
    transition: --lightness-brightest 0.3s ease, --lightness-bright 0.3s ease, --lightness-mid 0.3s ease, --lightness-dark 0.3s ease, --lightness-darkest 0.3s ease;
}
 
 /* ===== POST TAGS ===== */
 .post-tag {
     display: inline-block;
     background-color: var(--primary-dark);
     color: var(--neutral-brightest);
     padding: 4px 8px;
     border-radius: 12px;
     margin: 2px 4px;
     font-size: 0.8em;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     vertical-align: middle;
 }
 
 /* ===== POST LIST ===== */
 #postlistdiv ul,
 #recentpostlistdiv ul {
     font-size: 1.2em;
     padding: 0;
     list-style-type: none;
 }
 
 #postlistdiv ul li,
 #recentpostlistdiv ul li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
     padding: 8px 0;
     border-bottom: 1px solid var(--neutral-dark);
 }
 
 #postlistdiv ul li a,
 #recentpostlistdiv ul li a {
     flex-grow: 1;
     text-decoration: none;
 }
 
 .post-tags-inline {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
     margin-left: 10px;
     flex-shrink: 0;
 }
 
 .post-tags-inline .post-tag {
     margin: 0;
 }
 
 .post-tags-container {
     margin-top: 4px;
     margin-left: 10px;
 }
 
 .post-tags {
     margin-top: 8px;
 }
 
 /* ===== FONTS & TYPOGRAPHY ===== */
 @font-face {
     font-family: 'Inter-Regular';
     src: url("fonts/Inter-Regular.woff");
 }
 @font-face {
     font-family: fontawesome-mini;
     src: url("fonts/fa-regular-400.woff2");
 }
 @font-face {
     font-family: 'SolBlack';
     src: url("/fonts/Sol_Condensed_W01_Black.woff") format('woff');
 }

 h1, h3, h5 {
     font-family: "Inter-Regular", sans-serif;
     color: var(--neutral-darkest);
 }
 
 h2, h4, h6 {
     font-family: "Inter-Regular", sans-serif;
     color: var(--primary-mid);
 }
 
 p {
     line-height: 1.6em;
     padding: 5px;
 }
 
 p a {
     color: var(--neutral-darkest);
     font-weight: bold;
 }
 
 hr {
     border: solid #c7b591;
     border-width: 2px 0 0 0;
 }

 /* ===== BASE STYLES ===== */
 html {
     margin: 0;
     padding: 0;
     font-size: 20px;
     font-family: "Inter", sans-serif;
 }
 
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(to bottom, var(--neutral-bright) 0%, var(--neutral-brightest) 75%);
    background-size: 100% 100vh;
    background-attachment: fixed;
}
 
 .bg-canvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 0;
 }
 
 #container {
     position: relative;
     z-index: 1;
 }
 
 body a {
     color: var(--primary-mid);
     font-weight: bold;
 }
 
 #container {
     max-width: 1100px;
     margin: 2.75em auto 0;
     height: auto;
 }
 
 
   /* ===== BUBBLE CONTAINERS ===== */
   .bubble-container {
      background: linear-gradient(135deg,
          var(--bubble-bg-primary) 0%,
          var(--bubble-bg-secondary) 100%);
      border-radius: var(--bubble-border-radius);
      margin: var(--bubble-margin);
      padding: var(--bubble-padding);
      box-shadow:
          0 8px 16px hsla(0, 0%, 5%, 0.25),
          inset 0 0 15px 2px hsla(0, 0%, 95%, 0.9),
          inset 0 0 35px 4px hsla(0, 0%, 95%, 0.6),
          inset 0 0 255px hsla(0, 0%, 95%, 0.7);
      border: 6px solid hsla(0, 0%, 95%, 1);
      backdrop-filter: blur(var(--bubble-blur));
      -webkit-backdrop-filter: blur(var(--bubble-blur));
   }
 
  .header-bubble,
  .header-bubble * {
      font-family: 'SolBlack', sans-serif;
      color: hsl(0, 0%, 5%);
      font-size: 64px;
      margin: 0;
      text-shadow: 4px 4px 1px hsl(0, 0%, 95%);
  }
 
  .header-bubble {
       background: linear-gradient(135deg,
          var(--bubble-bg-primary) 0%,
          var(--bubble-bg-secondary) 100%);
       text-align: center;
       padding: 5px;
       margin-bottom: 30px;
       border-radius: 80px;
  }

  .header-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
  }

  .theme-toggle {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
  }

  .theme-toggle:hover {
      background-color: color-mix(var(--neutral-darkest), transparent, 10%);
  }

  .theme-toggle .material-icons {
      font-size: 28px;
      color: var(--neutral-dark);
  }

 .content-bubble {
     flex: 1;
     padding: 30px;
     border-radius: 80px;
     margin: 0;
 }
 
 .sidebar-bubble {
     --bubble-padding: 15px;
     --bubble-border-radius: 20px;
     --bubble-margin: 0;
     margin: 0; /* Remove the default bubble margin for sidebar items */
     padding: 15px; /* Tighter padding for sidebar */
     border-radius: 20px;
     /*corner-shape: squircle;*/
 }

 .navbar-bubble {
     border-radius: 50px;
     corner-shape: round !important;
     padding-top: 2px;
     padding-bottom: 2px;
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
 }

 .section-header {
     text-align: left;
     font-weight: normal;
     padding: 0;
     background: none !important;
     background-color: transparent !important;
     color: inherit !important;
     font-size: 1em !important;
     border-radius: 0 !important;
     margin-bottom: 0;
     box-shadow: none !important;
     border: none !important;
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
 }
 
 .section-header h1 {
     margin: 0 0 10px 0;
     color: inherit !important;
     text-align: left !important;
     font-family: "Inter", sans-serif;
     font-weight: 600;
 }
 
 .tags-date-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
 }
 
 .tags-date-row h4 {
     font-weight: normal;
     color: var(--primary-dark) !important;
     margin: 0;
     flex-shrink: 0;
 }
 
 /* ===== LAYOUT ===== */
 .wrapper {
     display: flex;
     flex-wrap: nowrap;
     gap: 20px;
     align-items: flex-start;
 }
 
 #sidebar {
     position: relative;
     height: fit-content;
     width: 280px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .bottom-nav {
     position: fixed;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
     padding-bottom: 20px;
 }
 
 /* ===== MEDIA ===== */
 .iframe-container {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
 }
 
 iframe {
     max-width: 100%;
 }
 
 .image-container {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
     max-width: 100%;
     overflow: hidden;
 }
 
 img:not(.modal-content):hover {
     opacity: 0.7;
 }
 
 /* ===== IMAGE MODAL ===== */
 .modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: hsla(0, 0%, var(--lightness-darkest), 0.9);
     z-index: 9999;
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 
 .modal.show {
     visibility: visible;
     opacity: 1;
 }
 
 .modal-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
     position: relative;
 }
 
 .modal-content {
     max-width: 90vw;
     max-height: 90vh;
     object-fit: contain;
     display: block;
     cursor: default;
 }
 
 .close {
     position: absolute;
     top: 20px;
     right: 30px;
     color: var(--neutral-brightest);
     font-size: 30px;
     cursor: pointer;
     background: var(--neutral-dark);
     padding: 5px 10px;
     border-radius: 5px;
 }
 
 .close:hover {
     background: var(--neutral-mid);
 }
 
 /* Prevent body scroll when modal is open */
 body.modal-open {
     overflow: hidden;
 }
 
 /* ===== SCROLLBAR ===== */
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: var(--neutral-bright);
 }
 
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--neutral-brightest);
 }
 
 
  /* ===== FOOTER ===== */
 #footer {
     font-size: 0.8em;
     padding: 10px 3% 115px 3%;
 }
 
 /* ===== RESPONSIVE ===== */
 @media only screen and (max-width: 917px) {
     .wrapper {
         flex-direction: column;
     }
     
     #sidebar {
         width: 100%;
         order: 2;
     }
     
     .content-bubble {
         order: 1;
         width: 100%;
     }
 }