/* Global Reach Initiative - Main Stylesheet */

/* Material Symbols configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Impact gradient - used for progress bars and growth indicators */
.impact-gradient {
    background: linear-gradient(90deg, #66df75 0%, #006e25 100%);
}

/* Hero gradient - primary to primary-container at 135deg */
.hero-gradient {
    background: linear-gradient(135deg, #002d62 0%, #1a4480 100%);
}

/* Skeleton loading animation */
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    background: linear-gradient(90deg, #e1e3e4 25%, #edeeef 50%, #e1e3e4 75%);
    background-size: 800px 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 0.25rem;
}

/* Progress bar fill animation */
@keyframes progressFill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.progress-bar-animated {
    animation: progressFill 1.2s ease-out forwards;
    transform-origin: left;
    transition: width 1s ease-out;
}

/* Editorial shadow for floating cards */
.editorial-shadow {
    box-shadow: 0 10px 30px rgba(0, 45, 98, 0.06);
}

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

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: #002d62;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #006e25;
    outline-offset: 2px;
}

/* Focus-visible styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #002d62;
    outline-offset: 2px;
    border-radius: 2px;
}

/* High-contrast focus ring for elements on dark backgrounds */
.hero-gradient a:focus-visible,
.hero-gradient button:focus-visible,
.bg-primary a:focus-visible,
.bg-primary button:focus-visible,
footer a:focus-visible {
    outline-color: #abc7ff;
}

/* Ensure focus rings are visible on active preset buttons */
.preset-btn:focus-visible {
    outline: 3px solid #002d62;
    outline-offset: 2px;
}

/* Accessible progress bar styling */
[role="progressbar"] {
    position: relative;
}

/* ============================================
   Demo Site Banners
   ============================================ */

/* Persistent green banner height offset */
:root {
    --demo-banner-height: 2rem;
}

/* Push fixed header below the persistent banner */
header[role="banner"] {
    top: var(--demo-banner-height) !important;
}

/* Push admin bar below the persistent banner + header */
div[aria-label="Admin mode active"] {
    top: calc(var(--demo-banner-height) + 4rem) !important;
}

/* Push mobile bottom dropdown below persistent banner */
#mobile-menu-dropdown {
    top: calc(var(--demo-banner-height) + 4rem) !important;
}

/* Mobile responsiveness utilities */

/* Prevent horizontal overflow globally */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure images and media don't overflow */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Ensure long text content wraps properly */
.campaign-description,
.campaign-description * {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Minimum touch target size for interactive elements on mobile */
@media (pointer: coarse) {
    a, button, [role="button"], input[type="submit"] {
        min-height: 44px;
    }

    input, select, textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on input focus */
    }
}

/* Footer link touch targets - WCAG 2.5.5 (44x44px minimum) */
.footer-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0;
}

@media (pointer: coarse) {
    .footer-link {
        padding: 0.625rem 0.5rem;
    }
}

/* Smooth scrolling for bottom nav spacing */
@media (max-width: 768px) {
    main {
        padding-bottom: 6rem;
    }
}

/* Admin mode: offset content for fixed admin bar */
.admin-mode-active main {
    padding-top: calc(var(--admin-bar-offset, 0px));
}

.admin-mode-active {
    --admin-bar-offset: 2.75rem;
}

@media (max-width: 400px) {
    .admin-mode-active {
        --admin-bar-offset: 3.25rem;
    }
}

/* Admin action buttons on public pages */
.admin-actions-overlay {
    transition: opacity 0.15s ease;
}

.admin-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
    min-height: 36px;
}

.admin-action-btn--edit {
    background-color: rgba(0, 45, 98, 0.9);
    color: #ffffff;
}

.admin-action-btn--edit:hover {
    background-color: rgba(0, 45, 98, 1);
}

.admin-action-btn--delete {
    background-color: rgba(186, 26, 26, 0.9);
    color: #ffffff;
}

.admin-action-btn--delete:hover {
    background-color: rgba(186, 26, 26, 1);
}