/*
 * Baristoft - baso.css 2.0
 * Copyright 2020-2025 Baristoft.
 */

 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
  
 :root {
   --header-font: 'Noto Sans', sans-serif;
   --content-font: 'Work Sans', sans-serif;
   --primary-color: #FF6B00;
   --secondary-color: #FE4302;
   --dark-color: #000;
   --accent-color: #FF6B00;
   --primary-hover: #FE4302;
   --text-color: #ffffff;
   --text-secondary: #b0b0b0;
   --border-color: #333333;
   --bg-color: #121212;
   --card-bg: #1e1e1e;
   --error-color: #ff4444;
   --success-color: #4CAF50;
   --light-text: #ffffff;
   --lighter-text: #b0b0b0;
   --transition: all 0.3s ease;
 }
 
 * {
   box-sizing: border-box;
 }
 
 body {
   margin: 0;
   font-family: var(--content-font), sans-serif;
   background-color: #121212;
   color: #fff;
   line-height: 1.6;
 }
 
  /* Minimal Header */
 .header {
   position: fixed;
   top: 0;
   width: 100%;
   height: 70px;
   background: var(--dark-color);
   z-index: 100;
   border-bottom: 1px solid var(--border-color);
 }
 
 .header__container {
   display: flex;
   height: 100%;
   justify-content: center;
   align-items: center;
   width: 100%;
 }
 
 .header__title {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
 }
 
 .header__title-image {
   height: 32px;
   width: auto;
   transition: opacity 0.3s ease;
 }
 
 .header__title-image:hover {
   opacity: 0.8;
 }
 
 .section-header {
   text-align: center;
   font-size: 2.5rem;
   font-family: var(--header-font);
   margin: 24px 0;
   padding-top: 12px;
   padding-bottom: 12px;
 } 
 
 .section-lead {
   color: #ff6b00;
   font-size: 1.1rem;
   font-weight: bold;
   letter-spacing: 1px;
   margin-bottom: 0.2em;
   margin-top: 0;
   text-align: center;
 }

 @media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
}
 
 .button {
   padding: 10px 20px;
   text-decoration: none;
   font-weight: bold;
   border-radius: 5px;
   display: inline-block;
 }
 
 .button--primary {
   background-color: #ff6b00;
   color: white;
   border: none;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
 
 .button--primary:hover {
   background-color: #e05d00;
 }
 
 .button--secondary {
   background-color: transparent;
   border: 2px solid #ff6b00;
   color: #ff6b00;
   margin-top: 1rem;
 }
  
   /* Minimal Footer */
  .footer {
   text-align: center;
   background-color: var(--dark-color);
   color: var(--lighter-text);
   padding: 1.5rem 0;
   border-top: 1px solid var(--border-color);
   font-family: var(--content-font);
   line-height: 1.6;
 }
 
 .footer__container {
   max-width: 680px;
   margin: 0 auto;
   padding: 0 2rem;
 }
 
 .footer__bottom {
   padding: 0;
   text-align: center;
   color: var(--lighter-text);
   font-size: 0.875rem;
 }
 
 .footer__bottom p {
   margin: 0;
 }
 
 /* Loading Screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0a0a0a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  pointer-events: all;
}

/* Hide loading screen when body has 'loaded' class */
body.loaded .loading-screen,
.js-loading-content.loaded .loading-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease 0.1s;
}

/* Hide content while loading */
.js-loading-content > *:not(.loading-screen) {
  opacity: 0;
  transition: none; /* Remove transition for instant show/hide */
}

/* Show content when loaded */
body.loaded .js-loading-content > *:not(.loading-screen),
.js-loading-content.loaded > *:not(.loading-screen),
.js-loading-content--visible > *:not(.loading-screen) {
  opacity: 1;
  transition: none; /* Ensure no transition for instant show */
}

 .loading-screen__spinner {
   width: 50px;
   height: 50px;
   border: 5px solid rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   border-top-color: var(--primary-color);
   animation: spin 1s ease-in-out infinite;
   margin-bottom: 1.5rem;
 }
 
 .loading-screen__text {
   color: #fff;
   font-size: 1.1rem;
   margin-top: 1rem;
   font-family: var(--header-font);
   letter-spacing: 0.5px;
 }
 
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
 
 /* Hide page content while loading */
 .js-loading-content {
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
 .js-loading-content--visible {
   opacity: 1;
 }