/* Long-form document pages: the legal documents and the support centre.
   ------------------------------------------------------------------------
   NOTE: this file is plain CSS and therefore *unlayered*, so every rule here
   outranks Tailwind's utilities no matter how specific the utility is. Every
   selector below is scoped under .doc-prose, .doc-toc or .faq on purpose -
   nothing here may target an element name on its own, or it would silently
   restyle the whole site. See CLAUDE.md.

   The prose blocks are authored as HTML strings in data/legal/*.js, so the
   elements inside them carry no classes and have to be styled by descendant
   selectors. That is the reason this file exists at all. */

.doc-prose {
    color: #a8a099;
    font-size: 1rem;
    line-height: 1.75;
    max-width: 68ch;
}

.doc-prose p {
    margin: 0 0 1.1rem;
}

.doc-prose p:last-child {
    margin-bottom: 0;
}

.doc-prose strong,
.doc-prose b {
    color: #f5f2ed;
    font-weight: 600;
}

.doc-prose em {
    color: #f5f2ed;
    font-style: italic;
}

.doc-prose a {
    color: var(--color-starx-accent, #fbb21d);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(251, 178, 29, 0.4);
    transition: text-decoration-color 0.2s ease;
}

.doc-prose a:hover,
.doc-prose a:focus-visible {
    text-decoration-color: var(--color-starx-accent, #fbb21d);
}

.doc-prose ul {
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.doc-prose ul li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.7rem;
}

/* A drawn marker rather than list-style, so its colour and size are ours and
   it lines up with the first line of text at this line-height. */
.doc-prose ul li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-starx-accent, #fbb21d);
    opacity: 0.75;
}

/* Term/detail pairs - the cookie table, the data we collect, the legal bases.
   A definition list rather than a table: at this width a two-column table would
   have to scroll sideways on a phone, and the pairs read fine stacked. */
.doc-defs {
    margin: 0;
    max-width: 68ch;
}

.doc-defs > div {
    border-top: 1px solid #2a2521;
    padding: 1rem 0;
}

.doc-defs > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.doc-defs dt {
    color: #f5f2ed;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.doc-defs dd {
    margin: 0;
    color: #a8a099;
    line-height: 1.7;
}

/* The in-page contents list. Sticky on wide screens, plain above the document
   on narrow ones - handled by the utilities in the view, not here. */
.doc-toc a {
    display: block;
    padding: 0.4rem 0 0.4rem 0.85rem;
    border-left: 2px solid #2a2521;
    color: #847d75;
    font-size: 0.875rem;
    line-height: 1.45;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.doc-toc a:hover,
.doc-toc a:focus-visible {
    color: var(--color-starx-accent, #fbb21d);
    border-left-color: var(--color-starx-accent, #fbb21d);
}

/* Anchored headings must not land under the fixed navbar. */
.doc-section {
    scroll-margin-top: 110px;
}

/* ---- Support centre FAQ -------------------------------------------------
   Built on <details>, so it opens and closes with no JavaScript at all and
   stays usable from the keyboard for free. */

.faq-item {
    border-bottom: 1px solid #2a2521;
}

.faq-item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.15rem 0;
    cursor: pointer;
    color: #f5f2ed;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.45;
    list-style: none;
    transition: color 0.2s ease;
}

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

.faq-item summary:hover {
    color: var(--color-starx-accent, #fbb21d);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--color-starx-accent, #fbb21d);
    outline-offset: 4px;
    border-radius: 4px;
}

.faq-item summary::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    transition: transform 0.2s ease;
}

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

.faq-answer {
    padding: 0 0 1.35rem;
}