/*
 * Spineboshara.com - legal pages (terms, privacy policy, Impressum; EN, DE, AR) and the contact form.
 * Reading column on the design tokens of main.css (DESIGN.md). Logical properties, so the Arabic
 * pages (with rtl.css) mirror without extra rules.
 * Version: 1.3.1
 */

/* Language switch in the nav (same look as on the service pages) */
.nav-item.lang-switch {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-inline-start: var(--spacing-xs);
    font-size: var(--font-size-small);
}

.lang-switch a {
    padding: 0.35rem 0.5rem;
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
}

.lang-switch a:hover {
    color: var(--secondary-color);
    background-color: var(--background-tertiary);
}

.lang-switch a[aria-current="true"] {
    color: var(--text-ink);
    font-weight: var(--font-weight-semibold);
}

/* Long German compounds in the h1 ("Geschäftsbedingungen", "Datenschutzerklärung") must wrap
   instead of widening the page at 320-360px. */
.page-title {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- reading column */

.legal-section {
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--section-space);
}

.legal-content {
    max-width: var(--measure);
    color: var(--text-primary);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.legal-content h2 {
    margin: 2.75rem 0 0.75rem;
    font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text-ink);
    text-wrap: balance;
    scroll-margin-top: 6rem;
}

.legal-content h3 {
    margin: 2rem 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--text-ink);
    scroll-margin-top: 6rem;
}

.legal-content > :first-child {
    margin-top: 0;
}

.legal-content p,
.legal-content ul,
.legal-content blockquote,
.legal-content .legal-table-wrap {
    margin: 0 0 1rem;
}

.legal-content ul {
    padding-inline-start: 1.25rem;
}

/* Long URLs and addresses must not push a line past its box at 320px */
.legal-content p,
.legal-content li {
    overflow-wrap: anywhere;
}

.legal-content li {
    margin-bottom: 0.4rem;
}

.legal-content li::marker {
    color: var(--primary-color);
}

.legal-content strong {
    color: var(--text-ink);
    font-weight: var(--font-weight-semibold);
}

.legal-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.05em 0.3em;
    border-radius: 4px;
    background-color: var(--background-tertiary);
    overflow-wrap: anywhere;
}

.legal-content a {
    overflow-wrap: anywhere;
}

.legal-content blockquote {
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--background-secondary);
    color: var(--text-ink);
}

.legal-content blockquote p:last-child {
    margin-bottom: 0;
}

.legal-content hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}

.legal-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
    line-height: 1.55;
}

.legal-content th,
.legal-content td {
    padding: 0.65rem 0.85rem;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color);
}

.legal-content tr:last-child td {
    border-bottom: 0;
}

.legal-content th {
    background-color: var(--background-tertiary);
    color: var(--text-ink);
    font-weight: var(--font-weight-semibold);
}

.legal-meta {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

/* Arabic has no italics (a slanted Naskh/Plex is a synthetic oblique): emphasis stays upright */
.legal-content:lang(ar) em {
    font-style: normal;
}

/* Visible until the lawyer has approved the text (release step removes it) */
.legal-draft-note {
    margin: 0 0 2rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid #e3b98f;
    border-radius: var(--border-radius-md);
    background-color: #fdf4ea;
    color: #6a3a0f;
    font-size: var(--font-size-small);
    line-height: 1.55;
    max-width: var(--measure);
}

.legal-draft-note strong {
    color: #5a300a;
}

/* ---------------------------------------------------------------- contact form */

.contact-section {
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--section-space);
}

.contact-layout {
    display: grid;
    gap: var(--spacing-lg);
    max-width: var(--measure);
}

.contact-notes p {
    margin: 0 0 0.75rem;
    max-width: 60ch;
}

.contact-notes .contact-warning {
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--border-radius-md);
    background-color: var(--background-secondary);
    color: var(--text-ink);
}

.contact-form {
    display: grid;
    gap: 1.25rem;
}

.contact-field {
    display: grid;
    gap: 0.35rem;
}

.contact-field label {
    font-weight: var(--font-weight-semibold);
    color: var(--text-ink);
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    font: inherit;
    color: var(--text-primary);
    background-color: var(--background-primary);
    border: 1.5px solid var(--border-dark);
    border-radius: var(--border-radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-field textarea {
    min-height: 10rem;
    resize: vertical;
}

/* Arabic: the e-mail address is typed left-to-right but lines up with the right-aligned label */
.contact-field input[dir="ltr"]:lang(ar) {
    text-align: right;
}

.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-color: var(--secondary-color);
}

.contact-field [aria-invalid="true"] {
    border-color: var(--error-color);
}

.contact-hint {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

.contact-error {
    color: var(--error-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.contact-error:empty {
    display: none;
}

/* Honeypot: off screen for people, still in the form for bots */
.contact-trap {
    position: absolute !important;
    inset-inline-start: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-privacy {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    max-width: 60ch;
}

/* Shown only without JavaScript (the form cannot send then) */
.contact-noscript {
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--border-radius-md);
    background-color: var(--background-secondary);
    color: var(--text-ink);
    max-width: 60ch;
}

.contact-form .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.contact-status {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--text-ink);
}

.contact-status.is-error {
    color: var(--error-color);
}

.contact-done {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background-color: var(--background-secondary);
}

.contact-done:focus {
    outline: none;
}

.contact-done h2 {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
}

@media print {
    .lang-switch {
        display: none;
    }
}