/* ==============================================
   11-UTILITIES.CSS
   Version: 5.0 - COMPONENT OVERRIDE REMOVAL
   Updated: March 2026

   CHANGES FROM v4.x:
   ✅ REMOVED: .back-to-top — owned by 09-page-specific.css
   ✅ REMOVED: .logo-icon — owned by 04-header.css
   ✅ REMOVED: .footer-logo-glass, .footer-logo-icon, .footer-icon — owned by 10-footer.css
   ✅ REMOVED: .sr-only — owned by 02-base.css (canonical)
   ✅ REMOVED: .skip-link — owned by 02-base.css (canonical + correct colour)
   ✅ REMOVED: h1,h2,h3,h4,h5,h6 { text-align: center } — 02-base.css v4.1
               deliberately removed text-align from headings; this rule
               re-introduced the regression. Alignment is inherited from
               parent containers in 03-layout.css.
   ✅ REMOVED: .hero-content h1 text-align rules — consequence of above removal
   ✅ FIXED: z-index utility scale — previous values (1000–1070) conflicted
             with the actual nav hierarchy (9998–10000). Scale is now clearly
             labelled as page-content layer only.
   ✅ KEPT: .approach-icon — not defined elsewhere
   ✅ KEPT: Spacing utilities (mt-*, mb-*)
   ✅ KEPT: Text-align utilities (.text-center, .text-left, .text-right)
   ✅ KEPT: .section-lead (page-level override of 02-base.css definition)
   ✅ KEPT: .footer-logo-glass:hover (WAIT — this was also removed; hover
            is now 100% owned by 10-footer.css)
   ==============================================

   RULE FOR THIS FILE:
   Only stateless utility classes belong here. Any rule that targets a
   specific component (nav, footer, hero, back-to-top) must live in that
   component's CSS file instead. This file must not override any rule
   defined in a component file.
   ============================================== */

/* ===============================
   APPROACH CARD ICONS
   (Not defined in any component file — lives here)
   =============================== */
.approach-icon {
    width: 48px;
    height: 48px;
    background: var(--glass-card-default, rgba(15, 22, 35, 0.6));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(183, 148, 246, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: all 0.3s ease;
}

.approach-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-primary-400, #ddd6fe);
    transition: stroke 0.3s ease;
}

.approach-card:hover .approach-icon {
    background: var(--glass-card-hover, rgba(21, 29, 45, 0.75));
    border-color: var(--color-primary-500, #b794f6);
    transform: translateY(-4px);
}

.approach-card:hover .approach-icon svg {
    stroke: var(--color-primary-300, #e9e0ff);
}

@media (max-width: 768px) {
    .approach-icon {
        width: 44px;
        height: 44px;
    }

    .approach-icon svg {
        width: 24px;
        height: 24px;
    }
}

/* ===============================
   SECTION LEAD TEXT
   (Overrides 02-base.css with wider max-width for some pages)
   =============================== */
.section-lead {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2rem;
    color: var(--text-secondary, #e0e4ea);
    font-size: 1.125rem;
    line-height: 1.7;
}

/* ===============================
   TEXT-ALIGN UTILITIES
   =============================== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ===============================
   SPACING UTILITIES
   =============================== */
.mt-0   { margin-top: 0; }
.mt-xs  { margin-top: var(--space-xs,  0.25rem); }
.mt-sm  { margin-top: var(--space-sm,  0.5rem); }
.mt-md  { margin-top: var(--space-md,  1rem); }
.mt-lg  { margin-top: var(--space-lg,  1.5rem); }
.mt-xl  { margin-top: var(--space-xl,  2rem); }
.mt-xxl { margin-top: var(--space-xxl, 3rem); }

.mb-0   { margin-bottom: 0; }
.mb-xs  { margin-bottom: var(--space-xs,  0.25rem); }
.mb-sm  { margin-bottom: var(--space-sm,  0.5rem); }
.mb-md  { margin-bottom: var(--space-md,  1rem); }
.mb-lg  { margin-bottom: var(--space-lg,  1.5rem); }
.mb-xl  { margin-bottom: var(--space-xl,  2rem); }
.mb-xxl { margin-bottom: var(--space-xxl, 3rem); }

/* ===============================
   Z-INDEX UTILITIES
   PAGE-CONTENT LAYER ONLY.
   These are for elements inside the page body.
   They intentionally sit below the navigation layer
   (9998–10000) and below the site header (900).
   Do NOT use these on navigation, overlays, or modals
   that need to appear above the mobile menu.
   =============================== */
.z-base      { z-index: 1; }    /* Base page content */
.z-raised    { z-index: 10; }   /* Slightly elevated content */
.z-dropdown  { z-index: 100; }  /* Page-level dropdowns (not nav) */
.z-sticky    { z-index: 200; }  /* Sticky page elements (not header) */
.z-fixed     { z-index: 300; }  /* Fixed page elements (not header) */
.z-overlay   { z-index: 400; }  /* Page overlays (not nav) */
.z-modal     { z-index: 500; }  /* Page modals (not nav) */
/*
 * Note: Site header = 900, mobile nav overlay = 9998,
 * mobile nav menu = 9999, menu toggle = 10000.
 * These utility classes are all below the header by design.
 */

/* ===============================
   DISPLAY UTILITIES
   =============================== */
.hidden {
    display: none !important;
}

.visually-hidden {
    /* Alias for .sr-only — canonical definition in 02-base.css */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===============================
   FLEX UTILITIES
   =============================== */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.gap-sm       { gap: var(--space-sm,  0.5rem); }
.gap-md       { gap: var(--space-md,  1rem); }
.gap-lg       { gap: var(--space-lg,  1.5rem); }
.gap-xl       { gap: var(--space-xl,  2rem); }

/* ===============================
   REDUCED MOTION
   =============================== */
@media (prefers-reduced-motion: reduce) {
    .approach-icon,
    .approach-card:hover .approach-icon {
        transition: none;
        transform: none;
    }
}