/*

    Style dla podstrony "Matematyka"

    To są style, które będą ładowane tylko na tej podstronie

    i stworzą odrębną, spójną z resztą strony, estetykę.
    */

body[data-page="math-blog"] {
background-color: #1a1a2e; /* Ciemne tło */
color: #FFFFFF; /* Zmieniono na biały tekst */
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.8;
}

.math-main {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}

.math-hero-section {
position: relative;
text-align: center;
padding: 80px 20px;
margin-bottom: 60px;
color: var(--light-text-color);
}

.math-hero-content h1 {
font-family: 'Roboto Slab', serif;
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
color: #FFFFFF; /* Zmieniono na biały */
}

.math-hero-content p {
font-size: 1.2em;
max-width: 700px;
margin: 0 auto;
}

.math-blog-posts {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px 0;
}

.math-post-link {
text-decoration: none;
color: inherit;
display: block;
}

.math-post.tile {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease, background-color 0.3s ease;
}

.math-post.tile:hover {
transform: translateY(-5px);
background-color: rgba(255, 255, 255, 0.1);
}

.post-title {
font-family: 'Montserrat', sans-serif;
font-size: 2em;
font-weight: 700;
color: var(--accent-color-2);
margin-top: 0;
margin-bottom: 10px;
}

.post-meta {
font-style: italic;
font-size: 0.9em;
color: #FFFFFF; /* Zmieniono na biały */
margin-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 15px;
}

.post-content {
line-height: 1.8;
font-size: 1.1em;
color: #FFFFFF; /* Zmieniono na biały */
}

.post-content p {
margin-bottom: 1.5em;
color: #FFFFFF; /* Zmieniono na biały */
}

/* Stylizacja dla MathJax (dla formuł matematycznych) */
.post-content .mjx-chtml {
background-color: rgba(255, 255, 255, 0.02);
border-radius: 5px;
padding: 5px 10px;
display: inline-block;
color: #FFFFFF; /* Zmieniono na biały */
}

.post-content .mjx-chtml-display {
background-color: rgba(0, 0, 0, 0.1);
border-left: 3px solid var(--accent-color-2);
padding: 20px;
margin: 20px 0;
border-radius: 0 5px 5px 0;
color: #FFFFFF; /* Zmieniono na biały */
}

.full-post-section {
max-width: 900px;
margin: 0 auto;
padding: 20px 0;
}

.full-post-section .post-title {
color: var(--accent-color-2);
}

.hidden {
display: none;
}

/* Dodatkowe style dla linków i tekstu */
a {
color: #FFFFFF; /* Zmieniono na biały */
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: var(--white-color);
}
/* Wprowadzone zmiany, aby tytuł w pełnym widoku wpisu był zawsze złoty */
.full-post-section .post-title {
color: var(--accent-color-2);
}

/* Style dla sekcji z problemem matematycznym */
.math-problem {
font-family: 'Arial', sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 25px;
background: #1a1a2e; /* Zmieniono na ciemne tło */
border: 1px solid #FFFFFF; /* Zmieniono na białą ramkę */
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
color: #FFFFFF; /* Zmieniono na biały */
}
.math-problem h2 {
color: #FFFFFF; /* Zmieniono na biały */
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
}
.proof {
margin-top: 20px;
background: #1a1a2e; /* Zmieniono na ciemne tło */
padding: 15px;
border-radius: 8px;
color: #FFFFFF; /* Zmieniono na biały */
}
.proof h3 {
color: #FFFFFF; /* Zmieniono na biały */
margin-top: 0;
}
.note {
margin-top: 15px;
padding: 10px;
background: #1a1a2e; /* Zmieniono na ciemne tło */
border-left: 4px solid var(--accent-color-2);
font-style: italic;
color: #FFFFFF; /* Zmieniono na biały */
}
ol {
counter-reset: step;
padding-left: 20px;
color: #FFFFFF; /* Zmieniono na biały */
}
ol li {
margin-bottom: 15px;
list-style: none;
color: #FFFFFF; /* Zmieniono na biały */
}
ol li:before {
counter-increment: step;
content: counter(step) ".";
font-weight: bold;
margin-right: 10px;
color: #FFFFFF; /* Zmieniono na biały */
}
.math-problem p {
line-height: 1.6;
color: #FFFFFF; /* Zmieniono na biały */
}

/* Responsywność */
@media (max-width: 768px) {
.math-hero-content h1 {
font-size: 2.5em;
}

.post-title {
    font-size: 1.8em;
}
}