/**
 * Responsive Design
 * Media queries for different screen sizes and orientations
 */

/* ============================================================================
   LARGE SCREENS (1300px and below)
   ============================================================================ */

@media (max-width: 1300px) {
    .content_section {
        padding: 3rem 1.5rem;
    }
}

/* ============================================================================
   DESKTOP/TABLET (769px+) - Show desktop menu
   ============================================================================ */

@media (min-width: 769px) and (min-height: 501px) {
    .header_mobile_menu {
        display: none;
    }

    .header_menu_list {
        display: flex;
    }
}

/* ============================================================================
   TABLET & MOBILE (768px and below)
   ============================================================================ */

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    body {
        padding-top: calc(1rem * 2 + var(--header-height-tablet));
    }

    .header_section {
        padding: 1rem 1.5rem;
    }

    .header_logo img {
        max-height: var(--header-height-tablet);
    }

    .header_menu_list {
        display: none;
    }

    .header_mobile_menu {
        display: block;
    }

    /* Remove parallax effect on mobile for better performance */
    .hero_section {
        height: 450px;
        background-attachment: scroll;
    }

    .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .card {
        padding: 2rem;
    }

    .footer_content {
        flex-direction: column;
        text-align: left;
    }

    .footer_section h3::after {
        left: 0;
        transform: none;
    }

    .content_section {
        padding: 4rem 1.5rem;
    }

    /* Responsive tables */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Responsive form elements */
    form {
        padding: 1.5rem;
    }

    fieldset {
        padding: 1.2rem;
        margin-bottom: 1.5rem;
    }

    legend {
        padding: 0.2rem 0.8rem;
        font-size: 0.95rem;
    }

    input, textarea, select {
        padding: 0.8rem 1rem;
        margin-bottom: 1.2rem;
    }

    button, input[type="submit"], input[type="button"] {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.8rem;
    }

    /* Footer theme toggle */
    .footer_bottom {
        flex-direction: column;
        gap: 1rem;
    }

    .theme-toggle {
        font-size: 1rem;
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ============================================================================
   MOBILE (480px and below)
   ============================================================================ */

@media (max-width: 480px) {
    body {
        padding-top: calc(1rem * 2 + var(--header-height-mobile));
    }

    .hero_section {
        height: 350px;
    }

    .header_logo img {
        max-height: var(--header-height-mobile);
    }

    .button {
        padding: 0.7rem 1.4rem;
        font-size: 0.9rem;
    }

    .content_section {
        padding: 3rem 0.5rem;
    }

    .card {
        padding: 1.2rem;
    }

    .card h2 {
        font-size: 1.5rem;
    }

    /* Smaller headings on mobile */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.3rem;
    }

    h5 {
        font-size: 1.1rem;
    }

    h6 {
        font-size: 1rem;
    }

    /* Smaller form elements on mobile */
    form {
        padding: 0.8rem;
        width: 100%;
        max-width: 100%;
        margin-left: -0.2rem;
        margin-right: -0.2rem;
    }

    fieldset {
        padding: 0.8rem;
        margin-bottom: 1.2rem;
    }

    legend {
        font-size: 0.85rem;
        padding: 0.2rem 0.7rem;
    }

    label {
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
    }

    input, textarea, select {
        padding: 0.7rem 0.9rem;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    button, input[type="submit"], input[type="button"] {
        padding: 0.7rem 1.2rem;
        margin-bottom: 0.7rem;
    }
}

/* ============================================================================
   LANDSCAPE ORIENTATION (Mobile devices in landscape)
   ============================================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .mobile_menu {
        overflow-y: auto;
        padding: 60px 20px;
    }

    .mobile_menu_list {
        margin-top: 10px;
    }

    .mobile_menu_list li {
        padding: 0.6rem;
        font-size: 1.2rem;
    }

    .mobile_menu_logo {
        margin-bottom: 1rem;
    }

    .mobile_menu_logo img {
        max-height: 60px;
    }
}

/* ============================================================================
   MEDIUM GRID BREAKPOINT
   ============================================================================ */

@media (min-width: 768px) {
    .grid {
        gap: 2.5rem;
    }
}