/* ================================================
   TABLET STYLES - 768px to 1023px
   ================================================ */

@media (max-width: 1023px) and (min-width: 768px) {
    
    /* ================================================
       HEADER & NAVIGATION - TABLET
       ================================================ */
    
    :root {
        --header-total-height: 90px;
    }
    
    .header__tagline {
        font-size: 12px;
    }
    
    .nav__list {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav__link {
        padding: 12px 16px;
        font-size: 12px;
    }

    /* Hide search on tablet - too cramped */
    .nav__item--search {
        display: none;
    }
    
    .header__logo-link {
        font-size: 24px;
        letter-spacing: 1.5px;
    }
    
    /* ================================================
       HERO SECTION - TABLET
       ================================================ */
    

    
    .hero__container {
        max-width: none;
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
        align-items: flex-start;
    }
    
    .hero__logo {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--space-sm);
    }
    
    .hero__title {
        font-family: 'Montserrat', sans-serif;
        font-size: var(--font-size-2xl);
        font-weight: 700;
        margin-bottom: var(--space-md);
    }
    
    .hero__tagline {
        font-family: 'Open Sans', sans-serif;
    }
    
    .hero__tagline {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-xl);
    }
    
    /* ================================================
       FOOTER SECTION - TABLET
       ================================================ */
    
    .footer__columns {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    .footer__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    /* ================================================
       TABLET BUTTON STYLES - CLEAN AND SPECIFIC
       ================================================ */
    
    .hero__cta {
        padding: 14px 28px;
        font-family: 'Raleway', sans-serif;
        font-size: 1rem;
    }
}