/* =====================================================================
   ACM Website — Global Styles
   Only truly site-wide rules live here:
   - :root design tokens (palette, typography, layout)
   - Reset & base typography
   - Container / section helpers used across pages
   - Shared button classes
   - Blazor framework defaults
   Component-specific styles live in their sibling .razor.css files
   (Blazor CSS isolation). See CLAUDE.md "Styling".
   ===================================================================== */

/* ── CSS Variables ───────────────────────────────────────────────── */
:root {
    /* Brand palette */
    --acm-dark: #080c18; /* near-black hero / nav bg */
    --acm-dark-rgb: 8, 12, 24;
    --acm-navy: #0e1829; /* dark section bg */
    --acm-navy-rgb: 14, 24, 41;
    --acm-navy-mid: #1a2a4a; /* card bg on dark sections */
    --acm-navy-mid-rgb: 26, 42, 74;
    --acm-blue-deep: #1e3a8a; /* deep blue accents */
    --acm-blue-deep-rgb: 30, 58, 138;
    --acm-blue: #2563eb; /* primary action blue (Bright Blue) */
    --acm-blue-rgb: 37, 99, 235;
    --acm-blue-light: #3b82f6; /* hover */
    --acm-blue-light-rgb: 59, 130, 246;
    --acm-lime: #cbf500; /* accent yellow-green */
    --acm-lime-rgb: 203, 245, 0;
    --acm-lime-hover: #b8e000;
    --acm-lime-hover-rgb: 184, 224, 0;
    --acm-white: #ffffff;
    --acm-white-rgb: 255, 255, 255;
    --acm-off-white: #f8fafc;
    --acm-off-white-rgb: 248, 250, 252;

    /* Greys */
    --acm-gray-100: #f1f5f9;
    --acm-gray-100-rgb: 241, 245, 249;
    --acm-gray-200: #e2e8f0;
    --acm-gray-200-rgb: 226, 232, 240;
    --acm-gray-400: #94a3b8;
    --acm-gray-400-rgb: 148, 163, 184;
    --acm-gray-600: #475569;
    --acm-gray-600-rgb: 71, 85, 105;
    --acm-gray-800: #1e293b;
    --acm-gray-800-rgb: 30, 41, 59;
    --acm-text-dark: #0f172a;
    --acm-text-dark-rgb: 15, 23, 42;

    /* Form / state colours */
    --acm-error: #dc2626;
    --acm-error-rgb: 220, 38, 38;
    --acm-success: #10b981;
    --acm-success-rgb: 16, 185, 129;
    --acm-warning: #f59e0b;
    --acm-warning-rgb: 245, 158, 11;

    /* Layout */
    --nav-height:     80px;
    --section-pad:    80px 0;
    --container-max:  1200px;
    --content-max:    1440px;

    /* Grid System Tokens */
    --grid-gutter:    24px;
    --grid-margin:    40px;
    --grid-columns:   12;

    /* Radii (Bento default = 0; reserved sparingly) */
    --radius-sm:      0px;
    --radius-md:      12px;
    --radius-lg:      20px;

    /* Motion */
    --ease-out:       cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:        cubic-bezier(0.4, 0, 1, 1);
    --spring:         cubic-bezier(0.5, 1.5, 0.5, 1);
    
    /* Fonts */
    --main-font-family:      'Inter', 'Helvetica Neue', sans-serif;
    --heading-font-family:   'Lexend', sans-serif;
}

/* ── Reset & Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--main-font-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--acm-text-dark);
    background: var(--acm-white);
    overflow-x: hidden;
}

/* ── Typography Scaling ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    font-weight: 500;
    line-height: 1.15;
}

h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
.text-body { font-size: 16px; }
.text-small { font-size: 14px; }

@media (min-width: 768px) {
    h1 { font-size: 48px; }
    h2 { font-size: 36px; }
    h3 { font-size: 28px; }
    h4 { font-size: 20px; }
}

@media (min-width: 1024px) {
    h1 { font-size: 64px; }
    h2 { font-size: 48px; }
    h3 { font-size: 32px; }
    h4 { font-size: 24px; }
}

@media (min-width: 1440px) {
    h1 { font-size: 72px; }
    h2 { font-size: 56px; }
    h3 { font-size: 36px; }
    .text-body { font-size: 18px; }
    .text-small { font-size: 16px; }
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    font-weight: 500;
    line-height: 1.15;
}

h1{
    font-weight: 400;
    font-size: 110px;
    line-height: 99px;
    letter-spacing: -5.5px;
    vertical-align: middle;
}

h2{
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: 0;
    vertical-align: middle;

}

button { font-family: inherit; }

/* ── Touch Targets ───────────────────────────────────────────────── */
@media (max-width: 1023px) {
    button, .btn-primary-acm, .btn-outline-acm, .btn-lime-acm, a {
        min-height: 44px;
        min-width: 44px;
    }
}

:focus-visible {
    outline: 2px solid var(--acm-blue);
    outline-offset: 2px;
}

/* ── Layout Helpers ──────────────────────────────────────────────── */
.container-acm {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--grid-margin);
}

@media (min-width: 1024px) {
    .container-acm {
        max-width: var(--container-max);
    }
}

@media (min-width: 1440px) {
    .container-acm {
        max-width: var(--content-max);
    }
}

.section-pad { padding: var(--section-pad); }

.site-main { padding-top: var(--nav-height); 
background: var(--acm-navy);}

/* ── Responsive Grid & Breakpoint Overrides ──────────────────────── */

/* Mobile (Portrait) */
@media (max-width: 767px) {
    :root {
        --nav-height: 60px;
        --grid-gutter: 16px;
        --grid-margin: 16px;
        --grid-columns: 4;
        --container-max: 100%;
        --content-max: 100%;
    }
    .btn-group { flex-direction: column; }
}

/* Mobile (Landscape) */
@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
    .section-pad { padding: 40px 0; }
    body { font-size: 14.4px; /* 90% of 16px */ }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --nav-height: 70px;
        --grid-gutter: 20px;
        --grid-margin: 32px;
        --grid-columns: 8;
        --container-max: 100%;
        --content-max: 100%;
    }
}

/* Desktop (1024px - 1439px) */
@media (min-width: 1024px) {
    :root {
        --nav-height: 80px;
        --grid-gutter: 24px;
        --grid-margin: 40px;
        --grid-columns: 12;
        --container-max: 1200px;
        --content-max: 1200px;
    }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    :root {
        --container-max: 1440px;
        --content-max: 1440px;
    }
}

/* ── Shared Button Classes ───────────────────────────────────────── */
.btn-primary-acm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--acm-blue);
    color: var(--acm-white);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 200ms var(--ease-out),
                transform 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out);
}

.btn-primary-acm:hover {
    background: var(--acm-blue-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-primary-acm:active {
    transform: scale(0.98);
    transition-duration: 100ms;
}

.btn-outline-acm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--acm-white);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.btn-outline-acm:hover {
    border-color: var(--acm-white);
    background: rgba(255, 255, 255, 0.05);
}

.btn-outline-acm--dark {
    color: var(--acm-text-dark);
    border-color: var(--acm-text-dark);
}

.btn-outline-acm--dark:hover {
    border-color: var(--acm-blue);
    color: var(--acm-blue);
    background: transparent;
}

.btn-lime-acm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--acm-lime);
    color: var(--acm-text-dark);
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 200ms var(--ease-out),
                transform 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out);
}

.btn-lime-acm:hover {
    background: var(--acm-lime-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(203, 245, 0, 0.25);
}

.btn-lime-acm:active {
    transform: scale(0.98);
    transition-duration: 100ms;
}

.btn-group { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Blazor defaults (keep for error UI / WASM loading) ──────────── */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ── Scroll-triggered reveal ─────────────────────────────────────── */
.fade-in-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 400ms var(--ease-out),
                transform 400ms var(--ease-out);
}

.fade-in-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-scroll--delay-1 { transition-delay: 100ms; }
.fade-in-scroll--delay-2 { transition-delay: 200ms; }
.fade-in-scroll--delay-3 { transition-delay: 300ms; }
.fade-in-scroll--delay-4 { transition-delay: 400ms; }

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}