/*
 * AMPC Sitemap Generator — public form stylesheet.
 *
 * Phase 2 deliverable #7; extended in Phase 4 with rules for the
 * result region and download anchor. All rules namespaced under
 * `.ampc-sitemap-generator` so the plugin's CSS does not bleed into
 * the host theme. No body/html resets, no element selectors outside
 * the container.
 *
 * Theme: light-only for Phase 2. Every color exposed as a CSS custom
 * property at the container level — host themes can override these
 * in their own stylesheets for dark mode or brand colors.
 *
 * Responsive: mobile-first. Single breakpoint at 480px enlarges the
 * container layout for desktop. Below that, full-width.
 *
 * Class names match deliverable #6 (templates/form.php) and Phase 1's
 * shortcode placeholder so a single stylesheet covers both.
 *
 * `.cf-turnstile` is intentionally NOT styled — Cloudflare's widget
 * handles its own appearance via an iframe.
 */


/* ===========================================================================
 * Custom properties — defaults at the container level.
 * Host themes can override any of these without touching this file.
 * ======================================================================== */

.ampc-sitemap-generator {
    --asg-text:           #1a1a1a;
    --asg-text-muted:     #5a5a5a;
    --asg-bg:             #ffffff;
    --asg-border:         #d1d5db;
    --asg-border-focus:   #2563eb;
    --asg-focus-ring:     rgba(37, 99, 235, 0.25);

    --asg-primary:        #2563eb;
    --asg-primary-hover:  #1d4ed8;
    --asg-primary-active: #1e40af;
    --asg-primary-text:   #ffffff;

    --asg-error-bg:       #fef2f2;
    --asg-error-border:   #fecaca;
    --asg-error-text:     #991b1b;

    --asg-success-bg:     #f0fdf4;
    --asg-success-border: #bbf7d0;
    --asg-success-text:   #166534;

    /* Warning palette — used by the result region's `--warning` modifier
     * when the target site rate-limited or blocked our crawler (the
     * sitemap is real but sparse). Amber shades sit between the success
     * green and the error red; matches Tailwind's amber-100/300/800. */
    --asg-warning-bg:     #fef3c7;
    --asg-warning-border: #fcd34d;
    --asg-warning-text:   #92400e;

    --asg-radius:         6px;
    --asg-gap:            1rem;
}


/* ===========================================================================
 * Container.
 * ======================================================================== */

.ampc-sitemap-generator {
    box-sizing: border-box;
    max-width: 640px;
    margin: 1.5rem auto;
    padding: 1rem;

    font-family: inherit;
    line-height: 1.5;
    color: var(--asg-text);

    background: var(--asg-bg);
    border: 1px solid var(--asg-border);
    border-radius: var(--asg-radius);
}

.ampc-sitemap-generator *,
.ampc-sitemap-generator *::before,
.ampc-sitemap-generator *::after {
    box-sizing: border-box;
}

/* Defensive — ensures hidden ARIA regions stay hidden even if a host
 * theme accidentally overrides the browser default for [hidden]. */
.ampc-sitemap-generator [hidden] {
    display: none !important;
}


/* ===========================================================================
 * Heading and description.
 * ======================================================================== */

.ampc-sitemap-generator__heading {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.ampc-sitemap-generator__description {
    margin: 0 0 var(--asg-gap) 0;
    color: var(--asg-text-muted);
    font-size: 0.9375rem;
}


/* ===========================================================================
 * Admin diagnostic notice (visible only to manage_options users).
 * ======================================================================== */

.ampc-sitemap-generator__admin-notice {
    margin: 0 0 var(--asg-gap) 0;
    padding: 0.625rem 0.75rem;
    background: var(--asg-error-bg);
    border: 1px solid var(--asg-error-border);
    border-radius: var(--asg-radius);
    color: var(--asg-error-text);
    font-size: 0.875rem;
}


/* ===========================================================================
 * Form.
 * ======================================================================== */

.ampc-sitemap-generator__form {
    margin: 0;
}

.ampc-sitemap-generator__form p {
    margin: 0 0 var(--asg-gap) 0;
}

.ampc-sitemap-generator__label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.ampc-sitemap-generator__url-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.625rem;

    font-family: inherit;
    font-size: 1rem;
    color: inherit;

    background: var(--asg-bg);
    border: 1px solid var(--asg-border);
    border-radius: var(--asg-radius);

    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ampc-sitemap-generator__url-input:focus {
    outline: none;
    border-color: var(--asg-border-focus);
    box-shadow: 0 0 0 3px var(--asg-focus-ring);
}


/* ===========================================================================
 * Turnstile widget container.
 *
 * We only control spacing around the widget; `.cf-turnstile` itself is
 * Cloudflare's iframe and is intentionally not targeted by any rule.
 * ======================================================================== */

.ampc-sitemap-generator__turnstile {
    margin: 0 0 var(--asg-gap) 0;
}


/* ===========================================================================
 * Submit button.
 * ======================================================================== */

.ampc-sitemap-generator__submit {
    display: inline-block;
    padding: 0.5rem 1.25rem;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--asg-primary-text);
    line-height: 1.5;

    background: var(--asg-primary);
    border: 1px solid var(--asg-primary);
    border-radius: var(--asg-radius);

    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.ampc-sitemap-generator__submit:hover:not(:disabled) {
    background: var(--asg-primary-hover);
    border-color: var(--asg-primary-hover);
}

.ampc-sitemap-generator__submit:active:not(:disabled) {
    background: var(--asg-primary-active);
    border-color: var(--asg-primary-active);
}

.ampc-sitemap-generator__submit:focus-visible {
    outline: 2px solid var(--asg-border-focus);
    outline-offset: 2px;
}

.ampc-sitemap-generator__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ===========================================================================
 * Error and status regions (ARIA-live).
 * ======================================================================== */

.ampc-sitemap-generator__error {
    margin: var(--asg-gap) 0 0 0;
    padding: 0.625rem 0.75rem;
    background: var(--asg-error-bg);
    border: 1px solid var(--asg-error-border);
    border-radius: var(--asg-radius);
    color: var(--asg-error-text);
    font-size: 0.9375rem;
}

.ampc-sitemap-generator__status {
    margin: var(--asg-gap) 0 0 0;
    padding: 0.625rem 0.75rem;
    background: var(--asg-success-bg);
    border: 1px solid var(--asg-success-border);
    border-radius: var(--asg-radius);
    color: var(--asg-success-text);
    font-size: 0.9375rem;
}


/* ===========================================================================
 * Result region (Phase 4) — terminal-state container shown when a crawl
 * completes successfully. Hosts the §5.2 user-facing message, the
 * download link styled as a button, and the "available until …" hint.
 * ======================================================================== */

.ampc-sitemap-generator__result {
    margin: var(--asg-gap) 0 0 0;
    padding: 0.875rem 1rem;
    background: var(--asg-success-bg);
    border: 1px solid var(--asg-success-border);
    border-radius: var(--asg-radius);
    color: var(--asg-success-text);
    font-size: 0.9375rem;
}

/* Warning variant — applied by the JS when the /status response carries
 * a misbehave error_code (http_429 / http_403 / http_503). The crawl
 * completed and a sitemap is available, but the target rate-limited or
 * blocked our requests so the result is sparse. Amber styling signals
 * "real but incomplete" without the green "all-good" appearance. The
 * download button keeps its primary palette — the file itself is real. */
.ampc-sitemap-generator__result--warning {
    background: var(--asg-warning-bg);
    border-color: var(--asg-warning-border);
    color: var(--asg-warning-text);
}

.ampc-sitemap-generator__result-message {
    margin: 0 0 0.75rem 0;
}

/* The wrapper <p> keeps button rhythm consistent with the rest of the
 * form (every <p> inside the form has var(--asg-gap) bottom margin),
 * but the last <p> (expires label) shouldn't push extra space below. */
.ampc-sitemap-generator__download-wrapper {
    margin: 0 0 0.5rem 0;
}

/* Download anchor styled as a primary action — matches the submit button
 * so the visitor sees a familiar call-to-action shape. text-decoration:none
 * to suppress browser/theme default underline on <a>. */
.ampc-sitemap-generator__download {
    display: inline-block;
    padding: 0.5rem 1.25rem;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--asg-primary-text);
    line-height: 1.5;

    background: var(--asg-primary);
    border: 1px solid var(--asg-primary);
    border-radius: var(--asg-radius);

    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.ampc-sitemap-generator__download:hover {
    background: var(--asg-primary-hover);
    border-color: var(--asg-primary-hover);
    color: var(--asg-primary-text);
    text-decoration: none;
}

.ampc-sitemap-generator__download:active {
    background: var(--asg-primary-active);
    border-color: var(--asg-primary-active);
}

.ampc-sitemap-generator__download:focus-visible {
    outline: 2px solid var(--asg-border-focus);
    outline-offset: 2px;
}

/* "Available until …" hint — muted small text, no top border. */
.ampc-sitemap-generator__expires {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--asg-text-muted);
}


/* ===========================================================================
 * <noscript> notice.
 * ======================================================================== */

.ampc-sitemap-generator__noscript-notice {
    margin: 0 0 var(--asg-gap) 0;
    padding: 0.625rem 0.75rem;
    background: var(--asg-error-bg);
    border: 1px solid var(--asg-error-border);
    border-radius: var(--asg-radius);
    color: var(--asg-error-text);
}


/* ===========================================================================
 * Responsive — enlarge for wider viewports.
 * ======================================================================== */

@media (min-width: 480px) {
    .ampc-sitemap-generator {
        margin: 2rem auto;
        padding: 1.5rem;
    }

    .ampc-sitemap-generator__heading {
        font-size: 1.375rem;
    }
}


/* ===========================================================================
 * Reduced motion preference.
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ampc-sitemap-generator__url-input,
    .ampc-sitemap-generator__submit {
        transition: none;
    }
}