/*
 * Framework-level base styles, loaded after Pico and before each app's own
 * theme CSS -- CSS's cascade means an app overrides anything here just by
 * redeclaring it in its own theme file, no build step or opt-out needed.
 *
 * Keep this file small: only classes that Framework's own Presentation/
 * templates assume exist, so a promoted template doesn't silently depend
 * on CSS that only happened to be defined in whichever app it was copied
 * from. Add to it only when a Framework template actually needs the class.
 */

/* The flash-{level} classes: one per SessionStore::FLASH_LEVELS entry, since
   layout.php renders a flash message as class="flash-{level}"; Framework
   templates also use them for inline messages. */

/* Used by Presentation/Auth/login-error.php, Auth/validation-error.php, and
   any other Framework template that needs an inline error message. */
.flash-error {
    color: #9b1b1b;
    background: #fde8e8;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Used by Presentation/Auth/login-success.php's timezone-change notice -- a
   warning, not an error, so it gets its own tone rather than reusing
   .flash-error. */
.flash-warning {
    color: #7a5c00;
    background: #fff6da;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Success and info tones, for flash messages and app templates that report
   an outcome that is neither an error nor a warning. */
.flash-success {
    color: #2d6a2d;
    background: #e8f5e9;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.flash-info {
    color: #21618c;
    background: #eaf4fb;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* A button or menu label that shrinks on narrow screens instead of
   wrapping: put the full label in .cta-text-full and the short one in
   .cta-text-short. Generic responsive-label behavior, not app-specific, so
   it lives here once rather than in every theme file. */
.cta-text-full {
    display: inline;
}

.cta-text-short {
    display: none;
}

@media (max-width: 768px) {
    .cta-text-full {
        display: none;
    }

    .cta-text-short {
        display: inline;
    }
}