/* ==========================================
   Base Styles & Layout Utilities - I.E.S. Santa Mónica
   ========================================== */

/* Main Container */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Polka-dot Pattern Background */
.pattern-bg {
    background-image: url('../images/backgrounds/Backgorund.png');
    background-repeat: repeat;
    background-position: center top;
}

/* Section Spacing */
.section-padding {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.section-padding-sm {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* Text Hierarchy */
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3vw + 0.75rem, 2.5rem); }
h3 { font-size: clamp(1.35rem, 2vw + 0.5rem, 1.75rem); }
h4 { font-size: clamp(1.1rem, 1.5vw + 0.4rem, 1.35rem); }

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-accent { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-muted); }

/* Focus styles for keyboard accessibility */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Reduced Motion preference */
@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;
    }
}