/* ==========================================================================
   Complaints & Feedback Page Styles
   Action-first layout: Form up top, policy in accordions below
   ========================================================================== */

/* Hero styles handled by .page-hero in pages.css */

/* Complaints hero: NDIS badge */
.complaints-hero .ndis-badge {
    background: rgba(255, 229, 0, 0.2);
    color: var(--color-white);
    padding: var(--spacing-3) var(--spacing-8);
    border-radius: var(--border-radius-xl);
    display: inline-block;
    margin-top: var(--spacing-8);
    font-weight: var(--font-weight-semibold);
}

/* Hero CTA Buttons */
.complaints-hero .hero__cta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
    flex-wrap: wrap;
}

.complaints-hero .btn--accent {
    background-color: var(--color-accent);
    color: var(--color-gray-900);
    font-weight: var(--font-weight-bold);
    border: 2px solid var(--color-accent);
    transition: all var(--transition-fast);
}

.complaints-hero .btn--accent:hover {
    background-color: #e6cf00;
    border-color: #e6cf00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 229, 0, 0.4);
}

.complaints-hero .btn--outline-white {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.6);
    transition: all var(--transition-fast);
}

.complaints-hero .btn--outline-white:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--color-white);
    color: var(--color-white);
}

.complaints-hero .btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

/* ==========================================================================
   Easy Read Summary
   ========================================================================== */

.easy-read {
    padding: var(--spacing-12) var(--spacing-8);
    background: var(--color-white);
}

.easy-read__card {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-gray-50);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-12);
}

.easy-read__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.easy-read__icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.easy-read__header h2 {
    color: var(--color-primary);
    font-size: var(--font-size-2xl);
    margin: 0;
}

.easy-read__intro {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-8);
}

.easy-read__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.easy-read__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: #1f2937;
    color: var(--color-text, #1f2937);
}

.easy-read__list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.easy-read__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.easy-read__list a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ==========================================================================
   Action Banner (between Easy Read and Form)
   ========================================================================== */

.action-banner {
    background: var(--color-accent);
    padding: var(--spacing-10) var(--spacing-8);
    position: relative;
}

.action-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
}

.action-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
}

.action-banner__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-2) 0;
}

.action-banner__subtitle {
    font-size: var(--font-size-base);
    color: #374151;
    color: var(--color-gray-700, #374151);
    margin: 0;
    line-height: var(--line-height-normal);
}

.action-banner__btn {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* ==========================================================================
   Feedback Form Section
   ========================================================================== */

.feedback-section {
    padding: var(--spacing-16) var(--spacing-8);
    background: var(--color-white);
}

.feedback-form-wrap {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-12);
    border: 1px solid var(--color-gray-200);
}

.feedback-form__header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-10);
    padding-bottom: var(--spacing-8);
    border-bottom: 1px solid var(--color-gray-200);
}

.feedback-form__icon {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: var(--spacing-1);
}

.feedback-form__header h2 {
    color: var(--color-primary);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-3);
}

.feedback-form__header p {
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.6;
}

/* Form Elements */
.feedback-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
}

.feedback-form .form-group {
    margin-bottom: var(--spacing-6);
}

.feedback-form .form-label {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-base);
}

.required {
    color: var(--color-error);
}

.form-optional {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
    color: #6b7280;
    color: var(--color-gray-500, #6b7280);
}

.feedback-form .form-input,
.feedback-form .form-select,
.feedback-form .form-textarea {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.feedback-form .form-input:focus,
.feedback-form .form-select:focus,
.feedback-form .form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45, 91, 169, 0.15);
}

.feedback-form .form-textarea {
    resize: vertical;
    min-height: 120px;
}

.feedback-form .form-select {
    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='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: var(--spacing-10);
}

/* Checkbox */
.form-group--checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.form-group--checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.form-label--checkbox {
    font-size: var(--font-size-sm);
    color: #4b5563;
    color: var(--color-text-light, #4b5563);
    line-height: 1.5;
    cursor: pointer;
}

/* Form Actions */
.form-actions {
    margin-top: var(--spacing-8);
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.form-actions .btn--lg {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-10);
    font-size: var(--font-size-lg);
}

.form-note {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Success Message */
.feedback-success {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    background: #ecfdf5;
    border: 1px solid var(--color-success);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-8);
    color: #065f46;
}

.feedback-success svg {
    flex-shrink: 0;
    color: var(--color-success);
    margin-top: 2px;
}

.feedback-success strong {
    display: block;
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

.feedback-success p {
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================================
   Contact Methods Section (standalone)
   ========================================================================== */

.contact-methods-section {
    background: var(--color-gray-50);
    padding: var(--spacing-16) var(--spacing-8);
}

.section-heading--centered {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-10);
}

.contact-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
    max-width: 900px;
    margin: 0 auto;
}

.method-card {
    background: var(--color-white);
    padding: var(--spacing-8);
    border-radius: var(--border-radius-md);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.method-card__icon {
    display: block;
    margin: 0 auto var(--spacing-4);
}

.method-card h3 {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
}

.method-card p { margin: 0; }

.method-card a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.method-card a:hover { text-decoration: underline; }

.contact-methods__note {
    text-align: center;
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    margin-top: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Process Steps Section
   ========================================================================== */

.process-section {
    background: var(--color-white);
    padding: var(--spacing-16) var(--spacing-8);
}

.process-steps {
    max-width: 800px;
    margin: 0 auto;
}

.process-step {
    display: flex;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-10);
}

.process-step:last-child {
    margin-bottom: 0;
}

.step-number {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.step-content h3 {
    margin-top: 0;
    color: #1f2937;
    color: var(--color-text, #1f2937);
}

.step-content ul {
    list-style: none;
    padding: 0;
}

.step-content ul li {
    padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-6);
    position: relative;
    color: #4b5563;
    color: var(--color-text-light, #4b5563);
    line-height: 1.6;
}

.step-content ul li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.timeframe {
    background: var(--color-accent);
    color: #1e3a6e;
    color: var(--color-primary-dark, #1e3a6e);
    padding: var(--spacing-1) var(--spacing-4);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-left: var(--spacing-4);
}

/* ==========================================================================
   Policy Accordion (<details>/<summary>)
   ========================================================================== */

.policy-accordions {
    padding: var(--spacing-16) var(--spacing-8);
    background: var(--color-gray-50);
}

.policy-accordions .container {
    max-width: 800px;
}

.section-eyebrow {
    display: block;
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

.policy-accordions__heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #1f2937;
    color: var(--color-text, #1f2937);
    margin-bottom: var(--spacing-8);
    text-align: center;
}

.policy-accordion {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-4);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.policy-accordion:hover {
    box-shadow: var(--shadow-sm);
}

.policy-accordion[open] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.policy-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-6) var(--spacing-8);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color var(--transition-fast);
}

.policy-accordion__trigger::-webkit-details-marker {
    display: none;
}

.policy-accordion__trigger::marker {
    display: none;
    content: '';
}

.policy-accordion__trigger:hover {
    background-color: var(--color-gray-50);
}

.policy-accordion__trigger:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
    border-radius: var(--border-radius-md);
}

.policy-accordion__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.policy-accordion__chevron {
    flex-shrink: 0;
    color: var(--color-gray-400);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.policy-accordion[open] .policy-accordion__chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.policy-accordion__content {
    padding: 0 var(--spacing-8) var(--spacing-8);
    border-top: 1px solid var(--color-gray-100);
}

.policy-accordion__content p {
    color: #4b5563;
    color: var(--color-text-light, #4b5563);
    line-height: 1.7;
    margin-bottom: var(--spacing-4);
}

.policy-accordion__content p:last-child {
    margin-bottom: 0;
}

.policy-accordion__content ul {
    list-style: none;
    padding: 0;
    margin: var(--spacing-4) 0;
}

.policy-accordion__content ul li {
    padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-8);
    position: relative;
    color: #4b5563;
    color: var(--color-text-light, #4b5563);
    line-height: 1.6;
}

.policy-accordion__content ul li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

/* ==========================================================================
   Escalation Section
   ========================================================================== */

.escalation-section {
    padding: var(--spacing-16) var(--spacing-8);
    background: var(--color-gray-100);
}

.escalation-section .container {
    max-width: 800px;
}

.escalation-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-10);
}

.escalation-card h2 {
    font-size: var(--font-size-2xl);
    color: #1f2937;
    color: var(--color-text, #1f2937);
    margin-bottom: var(--spacing-6);
}

.escalation-card h3 {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
}

.escalation-card p {
    color: #4b5563;
    color: var(--color-text-light, #4b5563);
    line-height: 1.7;
    margin-bottom: var(--spacing-4);
}

.escalation-card a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.escalation-card ul {
    list-style: none;
    padding: 0;
}

.escalation-card ul li {
    padding: var(--spacing-3) 0 var(--spacing-3) var(--spacing-8);
    position: relative;
    color: #4b5563;
    color: var(--color-text-light, #4b5563);
}

.escalation-card ul li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

/* External Contact (inside escalation) */
.external-contact {
    background: var(--color-gray-50);
    padding: var(--spacing-8);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-gray-200);
    margin: var(--spacing-6) 0;
}

.external-contact p { margin-bottom: var(--spacing-3); }
.external-contact p:last-child { margin-bottom: 0; }
.external-contact a { color: var(--color-primary); }

/* ==========================================================================
   Help & Support (full-width, replaces sidebar)
   ========================================================================== */

.help-support {
    padding: var(--spacing-16) var(--spacing-8);
    background: var(--color-primary);
    color: var(--color-white);
}

.help-support__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--spacing-12);
}

.help-support__header h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--spacing-4);
}

.help-support__header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.help-support__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    max-width: 900px;
    margin: 0 auto;
}

.help-support__card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    transition: background-color var(--transition-fast);
}

.help-support__card:hover {
    background: rgba(255, 255, 255, 0.15);
}

.help-support__card--wide {
    grid-column: 1 / -1;
}

.help-support__card-badge {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-gray-900);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-4);
}

.help-support__card-badge--vic {
    background: #3b82f6;
    color: var(--color-white);
}

.help-support__card-badge--national {
    background: var(--color-white);
    color: var(--color-primary);
}

.help-support__card h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin-bottom: var(--spacing-4);
}

.help-support__card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-support__card ul li {
    padding: var(--spacing-2) 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.help-support__card a {
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.help-support__card a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.help-support__card a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .contact-methods { grid-template-columns: 1fr 1fr; }
    .feedback-form .form-row { grid-template-columns: 1fr; }
    .easy-read__card { padding: var(--spacing-8); }
    .feedback-form-wrap { padding: var(--spacing-8); }
    .escalation-card { padding: var(--spacing-8); }
}

@media (max-width: 600px) {
    .complaints-hero .hero__cta {
        flex-direction: column;
    }

    .complaints-hero .hero__cta .btn {
        text-align: center;
        justify-content: center;
    }

    .action-banner__inner {
        flex-direction: column;
        text-align: center;
    }

    .action-banner__btn {
        width: 100%;
        justify-content: center;
    }

    .contact-methods { grid-template-columns: 1fr; }

    .easy-read__header { flex-direction: column; }

    .feedback-form__header { flex-direction: column; }

    .process-step { flex-direction: column; gap: var(--spacing-4); }

    .form-actions { flex-direction: column; align-items: stretch; }
    .form-actions .btn--lg { justify-content: center; }

    .help-support__grid { grid-template-columns: 1fr; }
    .help-support__card--wide { grid-column: auto; }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.feedback-form a:focus-visible,
.feedback-form button:focus-visible,
.easy-read a:focus-visible,
.policy-accordion a:focus-visible,
.escalation-card a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .feedback-form .form-input,
    .feedback-form .form-select,
    .feedback-form .form-textarea,
    .policy-accordion,
    .policy-accordion__chevron,
    .complaints-hero .btn--accent,
    .complaints-hero .btn--outline-white,
    .help-support__card {
        transition: none;
    }
}