/* 
 * Responsive styles for domain.com
 * Contains media queries for different screen sizes
 */

/* ------------------------------
   Medium screens (tablets)
------------------------------ */
@media screen and (max-width: 1023px) {
    html {
        font-size: 58%;
    }
    
    /* Grid adjustments */
    .grid-4 {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Services */
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Benefits */
    .benefits-grid {
        gap: var(--spacing-md);
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
    
    .footer-col:first-child {
        grid-column: 1 / -1;
        text-align: center;
    }
    
    .footer-col:first-child h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Cookie popup */
    .cookie-popup-content {
        flex-direction: column;
        text-align: center;
    }
}

/* ------------------------------
   Small screens (mobile phones)
------------------------------ */
@media screen and (max-width: 767px) {
    html {
        font-size: 55%;
    }
    
    /* Layout */
    section {
        padding: var(--spacing-md) 0;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    /* Grid adjustments */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    /* Header and Navigation */
    .site-header {
        padding: 1.5rem 0;
    }
    
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: clip-path 0.3s ease-in-out;
        padding: 0;
    }
    
    .main-nav ul {
        flex-direction: column;
        gap: 0;
    }
    
    .main-nav li {
        width: 100%;
    }
    
    .main-nav a {
        display: block;
        padding: 1.5rem var(--spacing-md);
        border-bottom: 1px solid #eee;
    }
    
    .main-nav a::after {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .menu-toggle-input:checked ~ .main-nav {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    .menu-toggle-input:checked + .menu-toggle-label span:nth-child(1) {
        transform: rotate(45deg);
        top: 10px;
    }
    
    .menu-toggle-input:checked + .menu-toggle-label span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle-input:checked + .menu-toggle-label span:nth-child(3) {
        transform: rotate(-45deg);
        top: 10px;
    }
    
    /* Hero section */
    .hero {
        height: auto;
        min-height: 100vh;
        padding: 10rem 0 5rem;
    }
    
    .hero h1 {
        font-size: 3.6rem;
    }
    
    .hero p {
        font-size: 1.6rem;
    }
    
    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    /* Audit types */
    .audit-type {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .audit-type:nth-child(even) .audit-image {
        order: 0;
    }
    
    /* Benefits */
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    /* CTA */
    .cta h2 {
        font-size: 3rem;
    }
    
    .cta p {
        font-size: 1.6rem;
    }
    
    /* Form */
    .form-container {
        padding: var(--spacing-md);
    }
    
    /* Footer */
    .site-footer {
        padding-top: var(--spacing-md);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-col h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Cookie popup */
    .cookie-popup-content {
        gap: var(--spacing-sm);
    }
    
    .cookie-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .cookie-accept, .cookie-info {
        display: block;
        text-align: center;
        padding: 1.2rem;
    }
}

/* ------------------------------
   Extra small screens
------------------------------ */
@media screen and (max-width: 480px) {
    html {
        font-size: 50%;
    }
    
    /* Hero section */
    .hero h1 {
        font-size: 3rem;
    }
    
    /* Section titles */
    .section-title {
        font-size: 3rem;
    }
    
    /* Benefit cards */
    .benefit-card {
        flex-direction: column;
        text-align: center;
    }
    
    .benefit-icon {
        margin: 0 auto var(--spacing-sm);
    }
}