/*
 * support-page.css
 * Tenikle Theme — Support page (page-support.php)
 *
 * All rules are prefixed with sp- to guarantee zero collision
 * with the existing Tailwind-compiled style.css.
 * Enqueued only on the Support page template via functions.php.
 *
 * Design tokens mirror the Stitch design system (Kinetic Precision).
 * DO NOT modify existing style.css — all support-page styles live here.
 */

/* ============================================================
   DESIGN TOKENS (scoped to #support-page-root)
   ============================================================ */
#support-page-root {
    /* Primary */
    --sp-primary:          #6814ca;
    --sp-primary-c:        #813be3;
    --sp-primary-fixed:    #ecdcff;
    --sp-primary-fixed-dim:#d6baff;
    --sp-on-primary:       #ffffff;

    /* Secondary */
    --sp-secondary-c:      #e12639;

    /* Tertiary */
    --sp-tertiary-fixed:   #d1f100;
    --sp-on-tertiary-fixed:#191e00;

    /* Surfaces */
    --sp-bg:               #f9f9f9;
    --sp-surface-low:      #f3f3f3;
    --sp-surface-lowest:   #ffffff;
    --sp-surface-high:     #e8e8e8;
    --sp-surface-highest:  #e2e2e2;

    /* Text */
    --sp-on-surface:       #1a1c1c;
    --sp-on-surface-v:     #4b4454;
    --sp-outline:          #7c7486;
    --sp-outline-v:        #cdc2d7;

    /* Typography */
    --sp-font-head: 'Epilogue', sans-serif;
    --sp-font-body: 'Plus Jakarta Sans', sans-serif;

    /* Spacing */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-7:  1.75rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;

    /* Radius */
    --sp-r-sm:   0.5rem;
    --sp-r-md:   1.5rem;
    --sp-r-lg:   2rem;
    --sp-r-full: 9999px;

    font-family: var(--sp-font-body);
    color: var(--sp-on-surface);
    background-color: var(--sp-bg);
}

/* Eliminate top-padding clash with fixed navbar (theme nav = h-16 = 4rem) */
#support-page-root {
    padding-top: 4rem;
}

/* ============================================================
   HERO
   ============================================================ */
.sp-hero {
    background: var(--sp-surface-lowest);
    overflow: hidden;
    position: relative;
}

.sp-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--sp-20) var(--sp-8) var(--sp-16);
    display: grid;
    grid-template-columns: 1fr 520px;
    align-items: center;
    gap: var(--sp-12);
    min-height: 480px;
}

/* Badge */
.sp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--sp-primary-fixed);
    color: var(--sp-primary);
    font-family: var(--sp-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--sp-r-full);
    margin-bottom: var(--sp-5);
}
.sp-hero__badge .material-symbols-outlined {
    font-size: 0.95rem;
}

/* Headline */
.sp-hero__title {
    font-family: var(--sp-font-head);
    font-size: clamp(3.2rem, 6vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--sp-on-surface);
    margin: 0 0 var(--sp-6) 0;
}
.sp-hero__title span {
    color: var(--sp-primary);
}

/* Subtitle */
.sp-hero__subtitle {
    font-family: var(--sp-font-body);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--sp-on-surface-v);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 0 var(--sp-8) 0;
}

/* CTA Button */
.sp-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-c) 100%);
    color: var(--sp-on-primary);
    font-family: var(--sp-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--sp-r-full);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 8px 24px rgba(104, 20, 202, 0.25);
}
.sp-hero__cta:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(104, 20, 202, 0.35);
}
.sp-hero__cta .material-symbols-outlined {
    font-size: 1rem;
}

/* Illustration */
.sp-hero__illustration {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-hero__blob {
    width: 480px;
    height: 480px;
    background: linear-gradient(135deg, var(--sp-primary-fixed) 0%, var(--sp-primary-fixed-dim) 100%);
    border-radius: 50% 60% 70% 40% / 50% 40% 60% 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: sp-blobMorph 8s ease-in-out infinite;
}

@keyframes sp-blobMorph {
    0%,  100% { border-radius: 50% 60% 70% 40% / 50% 40% 60% 60%; }
    33%        { border-radius: 65% 35% 55% 45% / 45% 65% 35% 55%; }
    66%        { border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
}

.sp-hero__squid {
    width: 320px;
    height: 320px;
    position: relative;
    z-index: 1;
}

/* Floating orbs */
.sp-hero__orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    animation: sp-floatOrb 6s ease-in-out infinite;
    pointer-events: none;
}
.sp-hero__orb--1 {
    width: 80px; height: 80px;
    background: var(--sp-tertiary-fixed);
    top: 20px; right: 60px;
    animation-delay: 0s;
}
.sp-hero__orb--2 {
    width: 40px; height: 40px;
    background: var(--sp-primary-c);
    top: 120px; right: 20px;
    animation-delay: -2s;
}
.sp-hero__orb--3 {
    width: 56px; height: 56px;
    background: var(--sp-secondary-c);
    bottom: 80px; right: 40px;
    animation-delay: -4s;
    opacity: 0.3;
}

@keyframes sp-floatOrb {
    0%,  100% { transform: translateY(0px); }
    50%        { transform: translateY(-16px); }
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.sp-contact {
    background: var(--sp-surface-low);
    padding: var(--sp-16) 0;
}

.sp-contact__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--sp-8);
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sp-12);
    align-items: start;
}

/* Form card */
.sp-contact__form-wrap {
    background: var(--sp-surface-lowest);
    border-radius: var(--sp-r-lg);
    padding: var(--sp-10);
}

.sp-contact__form-title {
    font-family: var(--sp-font-head);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sp-on-surface);
    margin: 0 0 var(--sp-8) 0;
}

.sp-contact__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.sp-contact__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

/* Form groups */
.sp-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.sp-form-group label {
    font-family: var(--sp-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sp-on-surface-v);
}
.sp-form-group input,
.sp-form-group select,
.sp-form-group textarea {
    background: var(--sp-surface-high);
    border: none;
    outline: none;
    border-radius: var(--sp-r-md);
    padding: var(--sp-4) var(--sp-5);
    font-family: var(--sp-font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--sp-on-surface);
    transition: box-shadow 0.2s ease, background 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}
.sp-form-group input::placeholder,
.sp-form-group textarea::placeholder {
    color: var(--sp-outline);
}
.sp-form-group input:focus,
.sp-form-group select:focus,
.sp-form-group textarea:focus {
    background: #eeeeee;
    box-shadow: 0 0 0 2px rgba(104, 20, 202, 0.4);
}
.sp-form-group textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}
.sp-form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%234b4454'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-color: var(--sp-surface-high);
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Submit button */
.sp-form-submit {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-c) 100%);
    color: var(--sp-on-primary);
    font-family: var(--sp-font-body);
    font-size: 1rem;
    font-weight: 600;
    padding: var(--sp-4) var(--sp-8);
    border-radius: var(--sp-r-full);
    cursor: pointer;
    border: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 8px 24px rgba(104, 20, 202, 0.25);
    align-self: flex-start;
    margin-top: var(--sp-2);
}
.sp-form-submit:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(104, 20, 202, 0.35);
}
.sp-form-submit .material-symbols-outlined {
    font-size: 1.1rem;
}
.sp-form-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Success state */
.sp-form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-12) 0;
    text-align: center;
}
.sp-form-success[hidden] { display: none; }
.sp-form-success__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sp-primary-fixed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-primary);
}
.sp-form-success__icon .material-symbols-outlined {
    font-size: 2rem;
}
.sp-form-success__title {
    font-family: var(--sp-font-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sp-on-surface);
    margin: 0;
}
.sp-form-success__body {
    font-family: var(--sp-font-body);
    font-size: 0.95rem;
    color: var(--sp-on-surface-v);
    max-width: 340px;
    margin: 0;
}

/* ---- Sidebar cards ---- */
.sp-contact__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.sp-contact-card {
    border-radius: var(--sp-r-lg);
    padding: var(--sp-8);
    position: relative;
    overflow: hidden;
}
.sp-contact-card--default {
    background: var(--sp-surface-lowest);
}
.sp-contact-card--purple {
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-c) 100%);
    color: var(--sp-on-primary);
}

.sp-contact-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--sp-r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-4);
}
.sp-contact-card__icon .material-symbols-outlined {
    font-size: 1.4rem;
}
.sp-contact-card--default .sp-contact-card__icon {
    background: var(--sp-primary-fixed);
    color: var(--sp-primary);
}
.sp-contact-card--purple .sp-contact-card__icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.sp-contact-card__title {
    font-family: var(--sp-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-3) 0;
}
.sp-contact-card--purple .sp-contact-card__title { color: #fff; }

.sp-contact-card__body {
    font-family: var(--sp-font-body);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--sp-on-surface-v);
    margin: 0;
}
.sp-contact-card--purple .sp-contact-card__body { color: rgba(255,255,255,0.85); }

.sp-contact-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-4);
    font-family: var(--sp-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--sp-primary);
    transition: gap 0.2s ease;
}
.sp-contact-card--purple .sp-contact-card__link { color: var(--sp-tertiary-fixed); }
.sp-contact-card__link:hover { gap: var(--sp-2); }
.sp-contact-card__link .material-symbols-outlined { font-size: 1rem; }

/* ============================================================
   TOPICS SECTION
   ============================================================ */
.sp-topics {
    background: var(--sp-bg);
    padding: var(--sp-16) 0;
}
.sp-topics__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--sp-8);
}
.sp-topics__header { margin-bottom: var(--sp-10); }
.sp-topics__eyebrow {
    font-family: var(--sp-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sp-primary);
    margin: 0 0 var(--sp-3) 0;
}
.sp-topics__title {
    font-family: var(--sp-font-head);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sp-on-surface);
    margin: 0;
}

.sp-topics__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
}

.sp-topic-card {
    background: var(--sp-surface-lowest);
    border-radius: var(--sp-r-lg);
    padding: var(--sp-8);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    position: relative;
    overflow: hidden;
    outline: none;
}
.sp-topic-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sp-primary) 0%, var(--sp-primary-c) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: var(--sp-r-lg) var(--sp-r-lg) 0 0;
}
.sp-topic-card:hover,
.sp-topic-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(26, 28, 28, 0.08);
}
.sp-topic-card:hover::before,
.sp-topic-card:focus-visible::before { opacity: 1; }

.sp-topic-card__icon {
    width: 52px; height: 52px;
    border-radius: var(--sp-r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sp-topic-card__icon .material-symbols-outlined { font-size: 1.4rem; }

.sp-topic-card__icon--purple { background: var(--sp-primary-fixed); color: var(--sp-primary); }
.sp-topic-card__icon--blue   { background: #e8f8ff; color: #0077a8; }
.sp-topic-card__icon--green  { background: #f0fff0; color: #2e7d32; }
.sp-topic-card__icon--amber  { background: #fff8e1; color: #f57f17; }

.sp-topic-card__title {
    font-family: var(--sp-font-head);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sp-on-surface);
    line-height: 1.3;
    margin: 0;
}
.sp-topic-card__body {
    font-family: var(--sp-font-body);
    font-size: 0.875rem;
    color: var(--sp-on-surface-v);
    line-height: 1.65;
    flex: 1;
    margin: 0;
}
.sp-topic-card__arrow {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-family: var(--sp-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sp-primary);
    transition: gap 0.2s ease;
    align-self: flex-start;
}
.sp-topic-card:hover .sp-topic-card__arrow,
.sp-topic-card:focus-visible .sp-topic-card__arrow { gap: var(--sp-2); }
.sp-topic-card__arrow .material-symbols-outlined { font-size: 0.95rem; }

/* ============================================================
   RESPONSIVE — ADDITIVE BREAKPOINTS ONLY
   ============================================================ */

/* ---- 1024px: tablet ---- */
@media (max-width: 1024px) {
    .sp-hero__inner {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: var(--sp-12) var(--sp-8) var(--sp-12);
        text-align: center;
    }
    .sp-hero__badge   { margin: 0 auto var(--sp-5); }
    .sp-hero__subtitle { margin-left: auto; margin-right: auto; }
    .sp-hero__cta     { margin: 0 auto; }
    .sp-hero__illustration { order: -1; }
    .sp-hero__blob  { width: 360px; height: 360px; }
    .sp-hero__squid { width: 240px; height: 240px; }

    .sp-contact__inner { grid-template-columns: 1fr; }
    .sp-topics__grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 768px: mobile ---- */
@media (max-width: 768px) {
    #support-page-root { padding-top: 4rem; }

    .sp-hero__inner {
        padding: var(--sp-10) var(--sp-5) var(--sp-10);
        gap: var(--sp-8);
    }
    .sp-hero__blob  { width: clamp(260px, 72vw, 340px); height: clamp(260px, 72vw, 340px); }
    .sp-hero__squid { width: clamp(170px, 48vw, 224px); height: clamp(170px, 48vw, 224px); }
    .sp-hero__orb--1 { width: 52px; height: 52px; right: 16px; }
    .sp-hero__orb--2 { width: 28px; height: 28px; right: 10px; }
    .sp-hero__orb--3 { width: 36px; height: 36px; right: 16px; }

    .sp-contact { padding: var(--sp-12) 0; }
    .sp-contact__inner   { padding: 0 var(--sp-5); gap: var(--sp-6); }
    .sp-contact__form-wrap { padding: var(--sp-7); }
    .sp-contact__form-row  { grid-template-columns: 1fr; }
    .sp-form-submit { width: 100%; justify-content: center; }

    .sp-topics { padding: var(--sp-12) 0; }
    .sp-topics__inner  { padding: 0 var(--sp-5); }
    .sp-topics__header { margin-bottom: var(--sp-7); }
    .sp-topics__grid   { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ---- 480px: small phones ---- */
@media (max-width: 480px) {
    .sp-hero__inner {
        padding: var(--sp-8) var(--sp-4) var(--sp-8);
        gap: var(--sp-6);
    }
    .sp-hero__blob  { width: clamp(220px, 86vw, 280px); height: clamp(220px, 86vw, 280px); }
    .sp-hero__squid { width: clamp(140px, 57vw, 185px); height: clamp(140px, 57vw, 185px); }

    .sp-contact__form-wrap { padding: var(--sp-6) var(--sp-5); border-radius: var(--sp-r-md); }
    .sp-contact-card       { padding: var(--sp-6); border-radius: var(--sp-r-md); }
    .sp-topic-card         { padding: var(--sp-6); border-radius: var(--sp-r-md); }
}