/* 4-Tier Layout System */

/* Responsive Breakpoint Reference
 * Centralized breakpoint values for consistency across the application
 * NOTE: CSS custom properties cannot be used in media queries due to CSS spec limitations.
 * These values serve as documentation for the standard breakpoints to use.
 *
 * Standard Breakpoints:
 * - Mobile: 640px (small mobile devices)
 * - Tablet: 768px (tablets and small laptops)
 * - Desktop: 1024px (desktop screens)
 * - Wide: 1280px (wide desktop screens)
 *
 * When adding media queries, use these standard values directly:
 * @media (max-width: 768px) for tablet breakpoint
 * @media (max-width: 640px) for mobile breakpoint
 */
:root {
    --breakpoint-mobile: 640px; /* Reference only - cannot be used in media queries */
    --breakpoint-tablet: 768px; /* Reference only - cannot be used in media queries */
    --breakpoint-desktop: 1024px; /* Reference only - cannot be used in media queries */
    --breakpoint-wide: 1280px; /* Reference only - cannot be used in media queries */

    /* Notification System Variables - Central Configuration */
    --notification-max-width: 600px; /* Standard width for notifications */
    --notification-min-width: 400px; /* Minimum width for consistency */
    --notification-top: 5rem; /* 80px - positioned higher above logo */
    --notification-right: 20px; /* Right edge spacing */
    --notification-z-index: 9999; /* Above all other content */
    --notification-min-height: calc(var(--pico-spacing) * 2.5); /* Adjusted for reduced padding */
}

/* Global header size reduction - Design Decision
 * All headers site-wide are intentionally reduced by 20% from Pico defaults
 * to create a more compact, content-focused interface while maintaining
 * proper semantic hierarchy and accessibility standards.
 * This affects all h1-h6 elements across the entire application.
 */
h1 {
    --pico-font-size: 1.6rem; /* Was 2rem - reduced by 20% */
}

h2 {
    --pico-font-size: 1.4rem; /* Was 1.75rem - reduced by 20% */
}

h3 {
    --pico-font-size: 1.2rem; /* Was 1.5rem - reduced by 20% */
}

h4 {
    --pico-font-size: 1rem; /* Was 1.25rem - reduced by 20% */
}

h5 {
    --pico-font-size: 0.9rem; /* Was 1.125rem - reduced by 20% */
}

h6 {
    --pico-font-size: 0.8rem; /* Was 1rem - reduced by 20% */
}

/* Alpine.js x-cloak - prevents FOUC (Flash of Unstyled Content) */
[x-cloak] {
    display: none;
}

/* 12-Column Grid System for Button Alignment
 * Mission: 4 buttons × 3 columns each = 12
 * Parish/Monastery: 3 buttons × 4 columns each = 12
 * This ensures perfect horizontal alignment across different community types */
.button-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: calc(var(--pico-spacing) * 0.5); /* Reduced gap for better alignment */
    margin-bottom: var(--pico-spacing);
    align-items: start; /* Ensure all grid items align to the top */
}

/* Reset form margins and max-width within grid to prevent layout issues */
/* Higher specificity selectors to override Pico CSS defaults without !important */
.actions-tier .button-grid-12 form,
.actions-tier .button-grid-12 > form,
.actions-tier .button-grid-12 .span-3 > form,
.actions-tier .button-grid-12 .span-4 > form,
.actions-tier .button-grid-12 .span-5 > form,
.actions-tier .button-grid-12 .span-6 > form {
    margin: 0;
    max-width: none; /* Override global form max-width with higher specificity */
    display: flex; /* Ensure consistent display for all forms */
    flex-direction: column; /* Stack form elements vertically */
    align-items: stretch; /* Full width elements */
    justify-content: flex-start; /* Align content to the top */
}

/* Ensure search form uses full width of its grid cell */
.actions-tier .button-grid-12 .span-4 form {
    width: 100%;
}

/* Ensure all fieldsets start at the same position */
.actions-tier .button-grid-12 form fieldset[role="group"] {
    margin-top: 0;
    margin-bottom: 0;
}

/* Column span utilities */
.span-1 {
    grid-column: span 1;
}
.span-2 {
    grid-column: span 2;
}
.span-3 {
    grid-column: span 3;
}
.span-4 {
    grid-column: span 4;
}
.span-5 {
    grid-column: span 5;
}
.span-6 {
    grid-column: span 6;
}
.span-7 {
    grid-column: span 7;
}
.span-8 {
    grid-column: span 8;
}
.span-9 {
    grid-column: span 9;
}
.span-10 {
    grid-column: span 10;
}
.span-11 {
    grid-column: span 11;
}
.span-12 {
    grid-column: span 12;
}

/* Ensure buttons fill their grid area */
.button-grid-12 button {
    width: 100%;
}

/* Archdiocese Edit Form - Override Pico's default form max-width
 * NOTE: This doesn't actually work due to Pico CSS specificity issues (see Issue #475)
 * Kept for documentation purposes - actual override uses inline styles */
.archdiocese-edit-form {
    max-width: none;
}

/* Mobile Strategy: Break to 2-column grid for better touch targets
 * All buttons become equal width (span-1) on small screens
 * This maintains usability while preserving visual hierarchy */
@media (max-width: 768px) {
    /* Tablet breakpoint */
    .button-grid-12 {
        grid-template-columns: repeat(2, 1fr);
    }

    .span-1,
    .span-2,
    .span-3,
    .span-4,
    .span-5,
    .span-6,
    .span-7,
    .span-8,
    .span-9,
    .span-10,
    .span-11,
    .span-12 {
        grid-column: span 1;
    }
}

/* Tier 2: Page Header with Breadcrumb, Title, Notifications */
.page-header-tier {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: calc(var(--pico-spacing) * 2);
    gap: var(--pico-spacing);
}

.page-header-tier .breadcrumb {
    justify-self: start;
}

.page-header-tier .page-title {
    grid-column: 2;
    text-align: center;
    margin: 0;
    /* Removed white-space: nowrap to allow text wrapping for long titles */
}

/* Removed custom CSS - using Pico CSS variables directly in templates */

/* Page title container for title + subtitle */
.page-header-tier .page-title-container {
    grid-column: 2;
    text-align: center;
}

.page-header-tier .page-title-container .page-title {
    grid-column: auto; /* Reset grid-column when inside container */
    margin-bottom: calc(var(--pico-spacing) * 0.25);
}

/* Page subtitle styling (e.g., community type) */
.page-subtitle {
    font-style: italic;
    color: var(--pico-muted-color);
    font-size: 0.95em;
    font-weight: normal;
    margin: 0;
}

.page-header-tier .tier-notifications {
    /* Removed grid positioning since notifications are fixed positioned */
    /* Notifications will be positioned fixed overlay, not in grid */
}

/* Tier 2 Notifications (right-aligned) */
.tier-notifications {
    position: fixed;
    top: var(--notification-top);
    right: var(--notification-right);
    z-index: var(--notification-z-index);
    max-width: var(--notification-max-width);
    min-width: var(--notification-min-width);
    min-height: var(--notification-min-height);
}

.tier-notifications .notification {
    position: relative; /* Keep relative within container */
    margin-bottom: calc(var(--pico-spacing) * 0.5);
    /* Allow wrapping for very long messages */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Detail page spacing - spacing between sections is handled by margin-bottom on .actions-tier */

/* Tier 3: Actions (Forms Row) */
.actions-tier {
    margin-bottom: calc(var(--pico-spacing) * 2); /* Add spacing after action buttons */
    padding: calc(var(--pico-spacing) * 1.5) calc(var(--pico-spacing) * 1.5) calc(var(--pico-spacing) * 0.5)
        calc(var(--pico-spacing) * 1.5);
    background: var(--pico-card-background-color);
    border-radius: var(--pico-border-radius);
    border: var(--pico-border-width) solid var(--pico-card-border-color);
}

.actions-tier form {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Tablet breakpoint */
    .page-header-tier {
        grid-template-columns: 1fr;
        text-align: center;
        gap: calc(var(--pico-spacing) * 0.5);
    }

    .page-header-tier .breadcrumb {
        grid-column: 1;
        justify-self: center;
        order: 1;
    }

    .page-header-tier .page-title {
        grid-column: 1;
        order: 2;
    }

    .page-header-tier .tier-notifications {
        /* Keep fixed positioning on mobile */
        /* Notifications remain as overlay on all screen sizes */
    }

    .actions-tier {
        padding: var(--pico-spacing);
        margin-left: calc(var(--pico-spacing) * -1);
        margin-right: calc(var(--pico-spacing) * -1);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}