/**
 * CalcMenu Base Styles
 * Reset, typography, and utility classes
 *
 * Note: This file is ADDITIVE - it won't break existing inline styles.
 * Existing templates keep their inline styles until migrated.
 */

/* ========================================
   BOX SIZING RESET
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ========================================
   BODY & HTML
   ======================================== */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-gray-800);
    background: var(--color-body-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--spacing-3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-gray-900);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-colors);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Lists */
ul, ol {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-6);
}

/* Code */
code, pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

code {
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-gray-100);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}

pre {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-gray-100);
    border-radius: var(--border-radius-md);
    overflow-x: auto;
}

pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}

/* ========================================
   SELECTION
   ======================================== */
::selection {
    background: rgba(var(--color-primary-rgb), 0.2);
    color: var(--color-gray-900);
}

/* ========================================
   FOCUS STYLES (Accessibility)
   ======================================== */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   IMAGES
   ======================================== */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text sizes */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }

/* Font weights */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Text colors */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-muted { color: var(--color-gray-500) !important; }

/* Background utilities */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-light { background-color: var(--color-gray-100) !important; }
.bg-gradient {
    background: var(--color-body-bg) !important;
}

/* Spacing utilities (gap) */
.gap-1 { gap: var(--spacing-1) !important; }
.gap-2 { gap: var(--spacing-2) !important; }
.gap-3 { gap: var(--spacing-3) !important; }
.gap-4 { gap: var(--spacing-4) !important; }
.gap-5 { gap: var(--spacing-5) !important; }
.gap-6 { gap: var(--spacing-6) !important; }

/* Border radius utilities */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-full { border-radius: var(--border-radius-full) !important; }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-card { box-shadow: var(--shadow-card) !important; }
.shadow-none { box-shadow: none !important; }

/* Transition utilities */
.transition-none { transition: none !important; }
.transition-fast { transition: var(--transition-all); transition-duration: 150ms !important; }
.transition-base { transition: var(--transition-all) !important; }
.transition-slow { transition: var(--transition-all); transition-duration: 350ms !important; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-default { cursor: default !important; }

/* User select */
.select-none { user-select: none !important; }
.select-all { user-select: all !important; }

/* ========================================
   ACCESSIBILITY UTILITIES
   ======================================== */

/* Screen reader only */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Show on focus (skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: var(--spacing-2) var(--spacing-4) !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: var(--color-white);
    z-index: var(--z-tooltip);
}

/* 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;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    body {
        background: white !important;
        color: black !important;
    }

    .no-print {
        display: none !important;
    }

    a {
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: var(--font-size-sm);
    }
}

/* ========================================
   BOOTSTRAP OVERRIDES - Charcoal Primary
   Override Bootstrap's blue to use our charcoal color
   ======================================== */

/* Primary buttons */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* Outline primary */
.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

/* Links */
a.text-primary,
.text-primary {
    color: var(--color-primary) !important;
}

a.text-primary:hover {
    color: var(--color-primary-dark) !important;
}

/* Form focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25) !important;
}

/* Checkbox/Radio */
.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Navbar brand */
.navbar-brand {
    color: var(--color-primary) !important;
}

/* Progress bar */
.progress-bar {
    background-color: var(--color-primary) !important;
}

/* Nav pills/tabs active */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-primary) !important;
}

.nav-link {
    color: var(--color-primary) !important;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--color-primary-dark) !important;
}

/* Dropdown active */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primary) !important;
}

/* List group active */
.list-group-item.active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Pagination active */
.page-link {
    color: var(--color-primary) !important;
}

.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

/* Badge primary */
.badge.bg-primary {
    background-color: var(--color-primary) !important;
}

/* Spinner */
.spinner-border.text-primary {
    color: var(--color-primary) !important;
}

/* Additional Bootstrap primary states (missing overrides) */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

/* Dropdown toggle button states */
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* Icon color overrides */
i.text-primary,
.bi.text-primary,
svg.text-primary {
    color: var(--color-primary) !important;
}

/* Alert primary */
.alert-primary {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary-dark) !important;
}

/* Table primary */
.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
}

/* ========================================
   iOS SAFE AREA & MOBILE OPTIMIZATIONS
   For iPhone X, 11, 12, 13, 14, 15, 16 Pro Max
   ======================================== */

/* iOS Safe Area Support */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        /* Padding for Dynamic Island / Notch */
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Navbar should also respect safe area */
    .navbar,
    .navbar-custom,
    nav.navbar {
        padding-top: calc(0.5rem + env(safe-area-inset-top));
    }

    /* Footer respects bottom safe area */
    .site-footer,
    footer {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }
}

/* Mobile-specific improvements */
@media (max-width: 576px) {
    /* Form labels - darker for better readability */
    .form-label,
    label {
        color: var(--color-gray-700);
        font-weight: 500;
    }

    /* Larger touch targets for inputs */
    .form-control,
    .form-select {
        padding: 0.875rem 1rem;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Larger touch targets for buttons */
    .btn {
        padding: 0.75rem 1.25rem;
        min-height: 44px; /* iOS HIG minimum */
    }

    /* Small text shouldn't be too small on mobile */
    .text-sm,
    small,
    .small {
        font-size: 0.9rem;
    }

    /* Helper text more readable */
    .form-text,
    .text-muted {
        font-size: 0.875rem;
        line-height: 1.4;
    }
}