:root {
--brand-blue: #5AAFC6;
--brand-green: #7BCB8A;
--brand-gold: #C7A965;

--main-color: var(--brand-green);
--secondary-color: var(--brand-blue);
--accent-color: var(--brand-gold);
--gradient-brand: linear-gradient(135deg, var(--secondary-color) 0%, var(--main-color) 50%, var(--accent-color) 100%);

--light-bg: #F7FAF7;
--text-color: #3E4750;
--muted-text: #6A7580;
--border-color: #E6EBE3;
--focus-ring: rgba(90, 175, 198, 0.35);
}

/* Treść */
.och-post-content {
line-height: 1.7;
color: var(--text-color);
}

/* Tabele */
.och-post-content table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
border: 1px solid var(--border-color);
}

.och-post-content table thead {
background: var(--gradient-brand);
color: #fff;
}

.och-post-content table th {
padding: 16px 14px;
text-align: left;
font-weight: 700;
text-transform: uppercase;
font-size: 0.9em;
letter-spacing: 0.4px;
}

.och-post-content table td {
padding: 13px 14px;
border-bottom: 1px solid var(--border-color);
transition: background-color 0.25s ease, transform 0.25s ease;
}

.och-post-content table tbody tr:hover {
background-color: var(--light-bg);
transform: translateY(-1px);
}

.och-post-content table tbody tr:last-child td {
border-bottom: none;
}

/* Listy nieuporządkowane – liść jako punkt */
.och-post-content ul {
list-style: none;
padding-left: 0;
margin: 20px 0;
}

.och-post-content ul li {
position: relative;
padding-left: 34px;
margin-bottom: 10px;
line-height: 1.6;
}

.och-post-content ul li:before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 16px;
height: 16px;
background: var(--gradient-brand);
border-radius: 0 12px 12px 12px;
transform: rotate(-35deg);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Listy numerowane z obsługą zagnieżdżeń */
.och-post-content ol {
counter-reset: custom-counter;
list-style: none;
padding-left: 0;
margin: 20px 0;
}

.och-post-content ol li {
position: relative;
padding-left: 44px;
margin-bottom: 10px;
counter-increment: custom-counter;
}

.och-post-content ol li:before {
content: counter(custom-counter);
position: absolute;
left: 0;
top: 0;
background: var(--gradient-brand);
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
font-weight: 800;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Zagnieżdżone UL w OL */
.och-post-content ol li ul {
margin: 10px 0;
padding-left: 0;
}

.och-post-content ol li ul li {
counter-increment: none;
padding-left: 34px;
margin-bottom: 8px;
}

.och-post-content ol li ul li:before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 14px;
height: 14px;
background: var(--gradient-brand);
border-radius: 0 10px 10px 10px;
transform: rotate(-35deg);
box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Zagnieżdżone OL w OL */
.och-post-content ol ol {
counter-reset: nested-counter;
margin: 10px 0;
}

.och-post-content ol ol li {
counter-increment: nested-counter;
padding-left: 46px;
}

.och-post-content ol ol li:before {
content: counter(custom-counter) "." counter(nested-counter);
background: linear-gradient(135deg, var(--main-color) 0%, var(--secondary-color) 100%);
font-size: 0.72em;
width: 36px;
height: 22px;
border-radius: 12px;
}

/* Cytaty */
.och-post-content blockquote {
position: relative;
background: var(--light-bg);
border-left: 6px solid var(--main-color);
margin: 26px 0;
padding: 22px 26px;
font-style: italic;
font-size: 1.08em;
line-height: 1.7;
border-radius: 0 10px 10px 0;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
color: var(--muted-text);
}

.och-post-content blockquote:before {
content: "“";
position: absolute;
top: -12px;
left: 16px;
font-size: 4em;
background: var(--gradient-brand);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0.25;
line-height: 1;
}

.och-post-content blockquote p {
margin: 0;
position: relative;
z-index: 1;
}

/* Strong/Bold */
.och-post-content strong,
.och-post-content b {
background: var(--gradient-brand);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
}

@supports not (-webkit-background-clip: text) {
.och-post-content strong,
.och-post-content b {
color: var(--main-color);
background: none;
-webkit-text-fill-color: initial;
}
}

/* Nagłówki */
.och-post-content h1,
.och-post-content h2,
.och-post-content h3,
.och-post-content h4,
.och-post-content h5,
.och-post-content h6 {
color: #2F3E46;
margin-top: 30px;
margin-bottom: 14px;
font-weight: 800;
line-height: 1.25;
}

.och-post-content h2 {
padding-bottom: 12px;
border-bottom: 3px solid transparent;
border-image: var(--gradient-brand) 1;
}

.och-post-content h3 {
position: relative;
padding-left: 26px;
}

.och-post-content h3:before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 12px;
height: 22px;
background: var(--gradient-brand);
border-radius: 0 12px 12px 12px;
transform: rotate(-30deg);
}

/* Linki */
.och-post-content a {
color: var(--secondary-color);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.25s ease, border-bottom-color 0.25s ease, box-shadow 0.2s ease;
}

.och-post-content a:hover {
color: var(--main-color);
border-bottom-color: var(--main-color);
}

.och-post-content a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--focus-ring);
border-radius: 4px;
}

/* Kod */
.och-post-content code {
background: var(--light-bg);
padding: 2px 6px;
border-radius: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
font-size: 0.92em;
color: var(--secondary-color);
border: 1px solid var(--border-color);
}

.och-post-content pre {
background: #1f2a36;
color: #e6edf3;
padding: 20px;
border-radius: 12px;
overflow-x: auto;
margin: 20px 0;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.och-post-content pre code {
background: none;
padding: 0;
border: none;
color: inherit;
}

/* Drobne elementy */
.och-post-content hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
margin: 28px 0;
}

/* Responsywność */
@media (max-width: 768px) {
.och-post-content table { font-size: 0.92em; }
.och-post-content th,
.och-post-content td { padding: 10px 8px; }

.och-post-content blockquote {
    padding: 16px 18px;
    margin: 16px 0;
}
.och-post-content blockquote:before {
    font-size: 3.2em;
    top: -6px;
}
}