/* ==========================================================================
   JaiHoArcade — About / Download / Contact / Legal shared page styles
   ========================================================================== */

/* Generic content page hero reuses .page-hero from games.css */

/* ---------- Legal / long-form ---------- */
.legal-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .legal-layout { grid-template-columns: 260px 1fr; align-items: start; } }
.legal-toc { position: sticky; top: calc(var(--header-h) + 1rem); padding: 1.5rem; }
.legal-toc h3 { font-family: var(--font-heading); font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-gold-bright); margin-bottom: 1rem; }
.legal-toc li { margin-bottom: 0.55rem; }
.legal-toc a { font-size: var(--fs-small); color: var(--color-text-secondary); }
.legal-toc a:hover { color: var(--color-gold-bright); }
.legal-body h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 2.5rem 0 1rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: var(--fs-h4); color: var(--color-gold-bright); margin: 1.75rem 0 0.75rem; }
.legal-body p, .legal-body li { font-size: 0.98rem; }
.legal-body ul { margin: 0 0 1.15rem; }
.legal-body ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; }
.legal-body ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 7px; height: 7px; background: var(--gradient-gold); transform: rotate(45deg); border-radius: 2px; }
.legal-body .last-updated { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: 2rem; }
.callout { border: 1px solid var(--color-border); border-left: 3px solid var(--color-gold); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin: 1.5rem 0; background: var(--color-glass); }
.callout--warn { border-left-color: var(--color-error); background: rgba(255,92,92,0.05); }
.callout h4 { color: var(--color-text-primary); margin-bottom: 0.5rem; font-size: 1.05rem; }

/* ---------- About ---------- */
.about-values { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .about-values { grid-template-columns: repeat(3, 1fr); } }
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--gradient-border); }
.timeline__item { position: relative; margin-bottom: 1.75rem; }
.timeline__item::before { content: ""; position: absolute; left: -2rem; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--gradient-gold); box-shadow: var(--shadow-glow-gold); }
.timeline__item h3 { font-size: 1.15rem; color: var(--color-text-primary); margin-bottom: 0.35rem; }
.timeline__year { font-family: var(--font-display); color: var(--color-gold-bright); font-size: 0.9rem; }

/* ---------- Download ---------- */
.dl-hero { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .dl-hero { grid-template-columns: 1fr 1fr; } }
.dl-hero__phone { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); max-width: 340px; margin-inline: auto; }
.platform-badges { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.platform-badge { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 1.15rem; border-radius: var(--radius-md); background: var(--color-glass); border: 1px solid var(--color-border); }
.platform-badge svg { width: 26px; height: 26px; color: var(--color-gold-bright); }
.platform-badge span { display: block; }
.platform-badge small { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.platform-badge b { font-family: var(--font-heading); font-size: 1rem; color: var(--color-text-primary); }
.compat-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.compat-table th, .compat-table td { text-align: left; padding: 0.85rem 1rem; font-size: var(--fs-small); border-bottom: 1px solid var(--color-border); }
.compat-table th { background: var(--color-surface-2); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-gold-bright); }
.compat-table tr:last-child td { border-bottom: 0; }
.compat-table td:first-child { color: var(--color-text-primary); font-weight: 600; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-family: var(--font-heading); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin-bottom: 0.45rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.75rem 1rem; color: var(--color-text-primary); font-family: var(--font-body); font-size: 0.98rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.15); outline: none; }
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field__error { display: none; color: var(--color-error); font-size: var(--fs-xs); margin-top: 0.35rem; }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select { border-color: var(--color-error); }
.form-field.has-error .form-field__error { display: block; }
.form-status { display: none; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-top: 1rem; font-size: var(--fs-small); }
.form-status.is-success { display: block; background: rgba(31,211,123,0.1); border: 1px solid rgba(31,211,123,0.3); color: var(--color-emerald-bright); }
.contact-card { padding: 1.5rem; margin-bottom: 1.25rem; }
.contact-card h3 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-gold-bright); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.contact-channels { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

/* Icon list */
.icon-list { display: grid; gap: 1rem; }
.icon-list__item { display: flex; gap: 0.85rem; align-items: flex-start; }
.icon-list__icon { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: rgba(212,175,55,0.1); border: 1px solid var(--color-border); color: var(--color-gold-bright); }
.icon-list__item h4 { font-size: 1rem; color: var(--color-text-primary); margin-bottom: 0.2rem; }
.icon-list__item p { font-size: var(--fs-small); margin: 0; }