/* Shared styles for the static content pages (O projekcie, Dołącz, FAQ,
   Kontakt, Do pobrania, Regulamin, Prywatność) — "memorial book on dark".
   All colors/spacing come from the design tokens in style.css. */

.content-page {
    max-width: 72ch;
    margin: 0 auto;
    padding: var(--sp-12) var(--sp-6) var(--sp-16);
    color: var(--text-primary);
    line-height: 1.75;
}

/* h1 font comes from the global Cinzel rule; here only rhythm + bronze rule */
.content-page h1 {
    margin-bottom: 0;
}

.content-page h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    background: var(--bronze);
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.content-page h2 {
    color: var(--bronze);
    margin: var(--sp-12) 0 var(--sp-4);
}

.content-page p {
    margin-bottom: var(--sp-4);
}

/* Links inside .content-page inherit the global bronze/underline style */

.placeholder-note {
    font-size: var(--text-s);
    color: var(--text-muted);
    font-style: italic;
}

/* "How to join" step tiles */
.step-tiles {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin: var(--sp-6) 0;
}

.step-tile {
    flex: 1 1 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-m);
    padding: var(--sp-6) var(--sp-4);
    box-shadow: var(--shadow-2);
}

.step-tile-nr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    background: var(--gradient-flame);
    color: var(--bg-page);
    font-weight: 700;
    font-size: var(--text-m);
    margin-bottom: var(--sp-3);
}

.step-tile h3 {
    font-size: var(--text-base);
    margin-bottom: var(--sp-2);
    color: var(--text-primary);
}

.step-tile p {
    font-size: var(--text-s);
    margin-bottom: 0;
}

@media (max-width: 599px) {
    .step-tiles {
        flex-direction: column;
    }

    .step-tile {
        flex-basis: auto;
    }
}

/* FAQ accordion (native details/summary) */
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-2);
    margin-bottom: var(--sp-3);
    padding: 0;
    overflow: hidden; /* keep the [open] left rule inside the rounded corners */
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    cursor: pointer;
    padding: var(--sp-4) var(--sp-6);
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* The card clips overflow (rounded corners + flame rule), so draw the
   global amber focus ring inside the summary instead of outside it */
.faq-item summary:focus-visible {
    outline-offset: -4px;
    border-radius: var(--radius-s);
}

/* Bronze chevron — points down when closed, up when open */
.faq-item summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-right: 2px solid var(--bronze);
    border-bottom: 2px solid var(--bronze);
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.faq-item[open] > summary::after {
    transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
    .faq-item summary::after {
        transition: none;
    }
}

.faq-item summary:hover {
    color: var(--flame-bright);
}

.faq-item[open] summary {
    box-shadow: inset 3px 0 0 var(--flame);
    border-bottom: 1px solid var(--border-hairline);
}

.faq-item .faq-answer {
    padding: var(--sp-4) var(--sp-6);
}

.faq-item .faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-item ul {
    margin: 0 0 var(--sp-4) var(--sp-6);
}

/* Downloads */
.download-list {
    list-style: none;
    margin-bottom: var(--sp-6);
}

.download-list li {
    background: var(--bg-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
}

/* File links: global bronze -> flame hover; glyph follows via currentColor */
.download-list li > a svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: var(--sp-2);
}

.download-desc {
    color: var(--text-muted);
    font-size: var(--text-s);
}

/* Microsoft Forms embed — third-party light content framed on a card mat */
.forms-embed {
    margin: var(--sp-6) 0;
    padding: var(--sp-4);
    background: var(--bg-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-2);
}

.forms-embed .form-hint {
    margin-bottom: var(--sp-3);
}

.forms-embed iframe {
    display: block;
    width: 100%;
    min-height: 600px;
    border: 1px solid var(--bronze);
    border-radius: var(--radius-m);
    background: #fff; /* Microsoft Forms renders light; keep a light backdrop */
}

/* Contact */
.contact-block {
    background: var(--bg-card);
    border: 1px solid var(--border-hairline);
    border-left: 3px solid var(--bronze);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
    padding: var(--sp-6);
    margin: var(--sp-6) 0;
}

.contact-block p {
    margin-bottom: var(--sp-2);
}

.contact-block p:last-child {
    margin-bottom: 0;
}