/* ========================================================================== Base Styles ========================================================================== */
 * {
     box-sizing: border-box;
}
 body {
     background-color: #101010;
     color: #ebdec2;
     font-family: "Open Sans", Arial, Helvetica, sans-serif;
     margin: 0;
     padding: 1rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     min-height: 100vh;
}
/* ========================================================================== Typography ========================================================================== */
 h1 {
     color: #ff8000;
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 2rem;
     text-align: center;
}
/* ========================================================================== Layout Components ========================================================================== */
  .header-container {
     background-image: 
         linear-gradient(to bottom, transparent 70%, rgba(24, 24, 24, 0.8) 100%),
         url('./assets/container_bg.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     max-width: 1200px;
     width: 95%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 2rem;
     margin: 0 auto;
     border-radius: 10px 10px 0 0;
	 min-height: 250px;
}
 .hero-image {
     max-width: 90%;
     max-height: 200px;
     object-fit: contain;
     margin: 0;
}
 .notice {
     background-color: #161b22;
     border: 1px solid #30363d;
     border-radius: 6px;
     color: #8b949e;
     font-size: 16px;
     max-width: 700px;
     padding: 1.5rem;
     text-align: center;
     width: 90%;
}
 .notice-text {
     color: #bbb;
	 font-size: 17px;
     line-height: 1.75;
     margin-bottom: 2rem;
	 font-weight: 400;
}
 .notice-text strong {
     font-weight: 700;
}
 .date-highlight {
     color: #fff;
	 font-weight: 600;
}
 .italic-emphasis {
     font-style: italic;
}
/* ========================================================================== Table Styles ========================================================================== */
 .table-container {
     width: 90%;
     max-width: 700px;
}
 .table-container table {
     background-color: #202020;
     border: 2px solid #303030;
     border-collapse: collapse;
     width: 100%;
}
.table-container th,
.table-container td {
     border: 1px solid #181818;
     font-size: 16px;
     padding: 0.75rem 1rem;
     text-align: left;
	 color: #ddd;
}
 .table-container th {
     background-color: #2f1616;
     color: #fff;
     font-weight: 600;
}
 .table-container tr:hover {
     background-color: #181818;
}
 .table-icon {
     height: 20px;
     margin-right: 5px;
     vertical-align: middle;
     width: 20px;
}
.table-mythic {
	background-color: #181818;
}
.table-current {
	background-color: #2a1a0f;
}
.table-current:hover {
     background-color: #3d2415;
}

/* ========================================================================== Mythic Rating ========================================================================== */
 .table-container .mythic-rating-cell {
     color: #c9d1d9;
     font-size: 16px;
     text-align: right;
}
 .table-container .mythic-rating-number {
     color: #ff8000;
     font-weight: 600;
}
/* ========================================================================== Buttons ========================================================================== */
 .export-button-container {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 1rem;
     margin-top: 1rem;
     max-width: 700px;
     width: 90%;
}
 .export-button {
     background-color: #ff8000;
     border: none;
     border-radius: 6px;
     color: white;
     cursor: pointer;
     font-weight: 600;
     padding: 0.5rem 1rem;
     transition: background-color 0.2s ease;
}
 .export-button:hover {
     background-color: #e67300;
}
 .export-button:focus {
     outline: 2px solid #ff8000;
     outline-offset: 2px;
}
/* ========================================================================== Blockquote Styles ========================================================================== */
 blockquote {
     background: hsla(0, 0%, 100%, 0.1);
     border-left: 0.5em solid hsla(0, 0%, 100%, 0.2);
     font-size: 16px;
     line-height: 1.75;
     margin-bottom: 1.75rem;
     padding: 1em;
}
 blockquote p {
     color: hsla(0, 0%, 100%, 0.5);
     font-weight: 100;
     margin: 0;
     text-transform: none;
}

.interior-sidebar-content {
  background: #181818;
  box-sizing: border-box;
  padding: 2rem;
  margin: 0 auto;
  max-width: 1200px;
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ========================================================================== Section Styles ========================================================================== */

.section-container { 
  margin-top: 20px; 
}

 .section {
     max-width: 900px;
     margin: auto;
     padding: 1.5rem 2rem;
}
 .section-title {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     font-size: 1.25rem;
     margin-bottom: 1rem;
     position: relative;
	 text-align: center;
}
 .section-title::before, .section-title::after {
     content: "";
     flex: 1;
     height: 2px;
     background-color: #555;
     margin: 0 1rem;
     min-width: 20px;
}
 .section-content {
     font-size: 1rem;
	 color: #d1d5db;
     line-height: 1.6;
}
 .section-content img {
     vertical-align: middle;
     width: 16px;
     height: 16px;
     margin-right: 3px;
}
 .highlight {
     color: #f1c40f;
     font-weight: 500;
     text-decoration: none;
}


/* ========================================================================== Responsive Design ========================================================================== */
 @media (max-width: 768px) {
     h1 {
         font-size: 1.5rem;
    }
     .notice {
         font-size: 14px;
         padding: 1rem;
    }
     th, td {
         font-size: 16px;
         padding: 0.5rem;
    }
     .export-button {
         font-size: 14px;
         padding: 0.4rem 0.8rem;
    }
     .interior-sidebar-content {
         padding: 1rem;
    }
}
 @media (max-width: 480px) {
     body {
         padding: 0.5rem;
    }
     h1 {
         font-size: 1.25rem;
         margin-bottom: 1rem;
    }
     .hero-image {
         max-height: 150px;
         margin-bottom: 1rem;
    }
     .notice {
         font-size: 12px;
    }
     th, td {
         font-size: 14px;
         padding: 0.4rem;
    }
     .interior-sidebar-content {
         padding: 0.5rem;
    }
}