/* ============================================
   UNIVERSAL RESPONSIVE TYPOGRAPHY & SPACING
   For all screen sizes and devices
   ============================================ */

/* ===== FLUID TYPOGRAPHY SYSTEM ===== */
/* Base font sizes that scale with viewport */
html {
    font-size: clamp(14px, 2vw, 18px);
}

/* Responsive heading system */
h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: clamp(1.2, 1.3, 1.4);
    margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

h2 {
    font-size: clamp(1.25rem, 3.5vw, 2rem);
    line-height: clamp(1.2, 1.3, 1.4);
    margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
}

h3 {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    line-height: clamp(1.2, 1.3, 1.4);
    margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

h4 {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: clamp(1.2, 1.3, 1.4);
    margin-bottom: clamp(0.4rem, 1.2vw, 0.8rem);
}

h5 {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    line-height: clamp(1.2, 1.3, 1.4);
    margin-bottom: clamp(0.3rem, 1vw, 0.6rem);
}

h6 {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    line-height: clamp(1.2, 1.3, 1.4);
    margin-bottom: clamp(0.2rem, 0.8vw, 0.5rem);
}

/* Paragraph and text elements */
p {
    font-size: clamp(0.85rem, 2vw, 1rem);
    line-height: clamp(1.4, 1.6, 1.8);
    margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

/* Small text elements */
small,
.text-small {
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    line-height: clamp(1.3, 1.5, 1.6);
}

/* Caption text */
.caption,
figcaption {
    font-size: clamp(0.65rem, 1.3vw, 0.8rem);
    line-height: clamp(1.3, 1.4, 1.5);
    opacity: 0.8;
}

/* ===== RESPONSIVE SPACING SYSTEM ===== */
/* Container padding that adapts to screen size */
.container {
    padding: 0 clamp(0.5rem, 3vw, 2rem);
    max-width: 100%;
    margin: 0 auto;
}

/* Section spacing */
section {
    margin-bottom: clamp(1rem, 4vw, 3rem);
    padding-top: clamp(0.5rem, 2vw, 1.5rem);
}

/* Margin utilities */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.m-2 {
    margin: clamp(0.5rem, 2vw, 1rem) !important;
}

.m-3 {
    margin: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.m-4 {
    margin: clamp(1rem, 4vw, 2rem) !important;
}

.m-5 {
    margin: clamp(1.5rem, 5vw, 3rem) !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.mt-2 {
    margin-top: clamp(0.5rem, 2vw, 1rem) !important;
}

.mt-3 {
    margin-top: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.mt-4 {
    margin-top: clamp(1rem, 4vw, 2rem) !important;
}

.mt-5 {
    margin-top: clamp(1.5rem, 5vw, 3rem) !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.mb-2 {
    margin-bottom: clamp(0.5rem, 2vw, 1rem) !important;
}

.mb-3 {
    margin-bottom: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.mb-4 {
    margin-bottom: clamp(1rem, 4vw, 2rem) !important;
}

.mb-5 {
    margin-bottom: clamp(1.5rem, 5vw, 3rem) !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.ml-2 {
    margin-left: clamp(0.5rem, 2vw, 1rem) !important;
}

.ml-3 {
    margin-left: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.ml-4 {
    margin-left: clamp(1rem, 4vw, 2rem) !important;
}

.ml-5 {
    margin-left: clamp(1.5rem, 5vw, 3rem) !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.mr-2 {
    margin-right: clamp(0.5rem, 2vw, 1rem) !important;
}

.mr-3 {
    margin-right: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.mr-4 {
    margin-right: clamp(1rem, 4vw, 2rem) !important;
}

.mr-5 {
    margin-right: clamp(1.5rem, 5vw, 3rem) !important;
}

/* Padding utilities */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.p-2 {
    padding: clamp(0.5rem, 2vw, 1rem) !important;
}

.p-3 {
    padding: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.p-4 {
    padding: clamp(1rem, 4vw, 2rem) !important;
}

.p-5 {
    padding: clamp(1.5rem, 5vw, 3rem) !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.pt-2 {
    padding-top: clamp(0.5rem, 2vw, 1rem) !important;
}

.pt-3 {
    padding-top: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.pt-4 {
    padding-top: clamp(1rem, 4vw, 2rem) !important;
}

.pt-5 {
    padding-top: clamp(1.5rem, 5vw, 3rem) !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.pb-2 {
    padding-bottom: clamp(0.5rem, 2vw, 1rem) !important;
}

.pb-3 {
    padding-bottom: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.pb-4 {
    padding-bottom: clamp(1rem, 4vw, 2rem) !important;
}

.pb-5 {
    padding-bottom: clamp(1.5rem, 5vw, 3rem) !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-1 {
    padding-left: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.pl-2 {
    padding-left: clamp(0.5rem, 2vw, 1rem) !important;
}

.pl-3 {
    padding-left: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.pl-4 {
    padding-left: clamp(1rem, 4vw, 2rem) !important;
}

.pl-5 {
    padding-left: clamp(1.5rem, 5vw, 3rem) !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-1 {
    padding-right: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.pr-2 {
    padding-right: clamp(0.5rem, 2vw, 1rem) !important;
}

.pr-3 {
    padding-right: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.pr-4 {
    padding-right: clamp(1rem, 4vw, 2rem) !important;
}

.pr-5 {
    padding-right: clamp(1.5rem, 5vw, 3rem) !important;
}

/* ===== RESPONSIVE BUTTON SIZING ===== */
.btn {
    font-size: clamp(0.8rem, 2vw, 1rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
    border-radius: clamp(0.25rem, 1vw, 0.5rem);
    min-height: clamp(2rem, 5vw, 2.5rem);
    min-width: clamp(3rem, 8vw, 4rem);
}

.btn-small {
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 2vw, 1rem);
    min-height: clamp(1.5rem, 4vw, 2rem);
}

.btn-large {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    min-height: clamp(2.5rem, 6vw, 3rem);
}

/* ===== RESPONSIVE FORM ELEMENTS ===== */
input,
textarea,
select {
    font-size: clamp(0.8rem, 2vw, 1rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    border-radius: clamp(0.25rem, 1vw, 0.5rem);
    min-height: clamp(2rem, 5vw, 2.5rem);
}

/* ===== RESPONSIVE CARD SIZING ===== */
.card {
    padding: clamp(1rem, 3vw, 1.5rem);
    border-radius: clamp(0.5rem, 1.5vw, 1rem);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

/* ===== RESPONSIVE GRID GAPS ===== */
.grid-gap-1 {
    gap: clamp(0.5rem, 1.5vw, 1rem);
}

.grid-gap-2 {
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.grid-gap-3 {
    gap: clamp(1rem, 3vw, 1.5rem);
}

.grid-gap-4 {
    gap: clamp(1.25rem, 4vw, 2rem);
}

/* ===== DEVICE-SPECIFIC ADJUSTMENTS ===== */

/* Ultra-small phones (320px and below) */
@media (max-width: 320px) {
    html {
        font-size: 13px;
    }

    .container {
        padding: 0 8px;
    }

    .btn {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    h1 {
        font-size: 1.25rem;
    }

    h2 {
        font-size: 1.1rem;
    }
}

/* Small phones (321px - 374px) */
@media (min-width: 321px) and (max-width: 374px) {
    .container {
        padding: 0 10px;
    }
}

/* Standard phones (375px - 413px) */
@media (min-width: 375px) and (max-width: 413px) {
    .container {
        padding: 0 12px;
    }
}

/* Large phones (414px - 479px) */
@media (min-width: 414px) and (max-width: 479px) {
    .container {
        padding: 0 14px;
    }
}

/* Tablets and small laptops (480px - 768px) */
@media (min-width: 480px) and (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .btn {
        padding: 12px 20px;
    }
}

/* Large tablets and small desktops (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 24px;
    }
}

/* Standard desktops (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .container {
        padding: 0 32px;
    }
}

/* Large desktops (1441px and above) */
@media (min-width: 1441px) {
    .container {
        padding: 0 40px;
        max-width: 1400px;
    }
}

/* ===== ORIENTATION-SPECIFIC ADJUSTMENTS ===== */

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    html {
        font-size: clamp(12px, 1.8vw, 16px);
    }

    section {
        margin-bottom: clamp(0.75rem, 3vw, 1.5rem);
    }

    h1 {
        font-size: clamp(1.2rem, 3.5vw, 2rem);
    }

    h2 {
        font-size: clamp(1rem, 3vw, 1.5rem);
    }
}

/* Portrait orientation on mobile */
@media (max-width: 768px) and (orientation: portrait) {
    section {
        margin-bottom: clamp(1.25rem, 4vw, 2.5rem);
    }
}

/* ===== ACCESSIBILITY & USER PREFERENCES ===== */

/* Respect user's font size preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }

    .card {
        border: 1px solid currentColor;
    }
}

/* Dark mode text adjustments */
@media (prefers-color-scheme: dark) {
    body {
        color: var(--white);
    }

    .text-muted {
        color: #b0b0b0;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    html {
        font-size: 12pt;
    }

    .container {
        padding: 0;
        max-width: 100%;
    }

    .btn,
    nav,
    footer {
        display: none !important;
    }

    h1 {
        font-size: 18pt;
        margin-bottom: 12pt;
    }

    h2 {
        font-size: 16pt;
        margin-bottom: 10pt;
    }

    p {
        font-size: 11pt;
        line-height: 1.4;
        margin-bottom: 10pt;
    }
}