/* =====================================================================
   Waaotools — content pages (Contact, About / Privacy / Terms and other
   admin-created Pages). Builds on home.css (tokens, header, footer) and
   tool.css (hero, cards, form fields); every rule is scoped to .sp-page
   or .sp-*. Plain CSS, no build step. Colors: Admin → Appearance tokens.
   ===================================================================== */

/* Hero tweaks: a quieter "last updated" line under the title. */
.sp-page .sp-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    margin-top: 16px; font-size: 0.8125rem; color: var(--wt-muted);
}
.sp-page .sp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sp-page .sp-meta .tp-i14 { color: var(--wt-teal); }

/* Section heading inside a card. */
.sp-card-head { margin-bottom: 20px; }
.sp-card-title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--wt-navy); }
.sp-card-text { margin-top: 4px; font-size: 0.875rem; line-height: 1.6; color: var(--wt-muted); }

/* ---------------- Contact ---------------- */
.sp-page .sp-form .tp-actions { margin-top: 4px; }
.sp-form-note { margin-top: 14px; font-size: 0.75rem; color: var(--wt-muted); }
.sp-page .tp-workspace > .tp-alert { margin: 0 0 22px; }

.sp-contact { display: grid; gap: 4px; }
.sp-contact-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 8px; margin: 0 -8px; border-radius: 10px;
    text-decoration: none; min-width: 0;
}
a.sp-contact-item { transition: background-color .15s var(--wt-ease); }
a.sp-contact-item:hover { background: var(--wt-bg-soft); }
.sp-contact-icon {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.875rem; color: var(--wt-teal); background: var(--wt-teal-soft);
}
.sp-contact-icon svg { width: 18px; height: 18px; }
.sp-contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.sp-contact-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wt-muted-2); }
.sp-contact-value { font-size: 0.875rem; font-weight: 500; line-height: 1.5; color: var(--wt-text); overflow-wrap: anywhere; }
a.sp-contact-item:hover .sp-contact-value { color: var(--wt-navy); }
.sp-contact-empty { font-size: 0.875rem; line-height: 1.6; color: var(--wt-muted); padding: 0 4px; }

.sp-aside-block + .sp-aside-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--wt-divider); }
.sp-page .sp-social { padding: 0 4px; }

/* ---------------- Admin-created pages ---------------- */
.sp-article {
    background: var(--wt-card); border: 1px solid var(--wt-border); border-radius: var(--wt-radius-lg);
    padding: 24px 20px;
}
@media (min-width: 768px) { .sp-article { padding: 36px 40px; } }
.sp-article .bl-prose { font-size: 1rem; }
.sp-article .bl-prose > p:first-child { font-size: 1.0625em; }

.sp-links { display: grid; gap: 2px; }
.sp-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; margin: 0 -4px; border-radius: 8px;
    font-size: 0.8125rem; font-weight: 500; color: var(--wt-text-2); text-decoration: none;
    transition: background-color .15s var(--wt-ease), color .15s var(--wt-ease);
}
.sp-link:hover { background: var(--wt-bg-soft); color: var(--wt-navy); }
.sp-link .tp-i16 { color: var(--wt-muted-2); flex-shrink: 0; }
.sp-link:hover .tp-i16 { color: var(--wt-teal); }
.sp-link[aria-current="page"] { background: var(--wt-teal-soft); color: var(--wt-navy); font-weight: 600; }
.sp-link[aria-current="page"] .tp-i16 { color: var(--wt-teal); }

.sp-help {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--wt-navy-2); border-color: var(--wt-navy-2); color: #fff;
}
.sp-help-title { font-size: 0.9375rem; font-weight: 700; }
.sp-help-text { font-size: 0.8125rem; line-height: 1.6; color: var(--wt-on-primary-muted); }
.sp-help-btn {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    margin-top: 4px; padding: 8px 14px; border-radius: 8px;
    font-size: 0.8125rem; font-weight: 600; text-decoration: none;
    color: var(--wt-navy-2); background: #fff;
    transition: background-color .15s var(--wt-ease);
}
.sp-help-btn:hover { background: var(--wt-teal-soft); }
.sp-help-btn .tp-i14 { transition: transform .15s var(--wt-ease); }
.sp-help-btn:hover .tp-i14 { transform: translateX(3px); }
.sp-aside-stack { display: grid; gap: 16px; }