/*
====================================================
YoYo Real Estate
Responsive Website Styles
Brand: Copper | White | Charcoal
====================================================
*/


/* ==================================================
   LARGE DESKTOP
   1600px and above
================================================== */

@media (min-width: 1600px) {

    .container {
        width: min(90%, 1300px);
    }

    .hero h1 {
        font-size: 4.5rem;
    }

}


/* ==================================================
   LAPTOPS
   1200px and below
================================================== */

@media (max-width: 1200px) {

    :root {
        --heading-xl: 3.4rem;
        --heading-lg: 2.6rem;
    }


    .cards {
        grid-template-columns: repeat(2, 1fr);
    }


    .features {
        grid-template-columns: repeat(2, 1fr);
    }


    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ==================================================
   TABLETS
   992px and below
================================================== */

@media (max-width: 992px) {

    :root {
        --header-height: 80px;
    }


    /* ----------------------------------------------
       HEADER
    ---------------------------------------------- */

    .site-header {
        height: var(--header-height);
    }


    .site-header .container {
        position: relative;
    }


    .nav {
        height: 100%;
    }


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


    /*
    Hide desktop navigation.
    Mobile navigation is controlled here.
    */

    .main-nav {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        background: var(--white);

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.10);

        z-index: var(--z-dropdown);
    }


    .main-nav.active {
        display: block;
    }


    .main-nav ul {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 0;

        padding: 15px 20px;

        margin: 0;
    }


    .main-nav li {
        width: 100%;
    }


    .main-nav a {
        display: block;

        width: 100%;

        padding: 14px 10px;

        border-bottom:
            1px solid var(--light-gray);
    }


    .main-nav li:last-child a {
        border-bottom: none;
    }


    /*
    Mobile menu button
    */

    .mobile-menu-button {
        display: flex;

        width: 44px;
        height: 44px;

        padding: 8px;

        border: 0;

        background: transparent;

        cursor: pointer;

        flex-direction: column;

        justify-content: center;

        gap: 5px;

        flex-shrink: 0;
    }


    .mobile-menu-button span {
        display: block;

        width: 100%;
        height: 2px;

        background:
            var(--color-charcoal, #333333);

        transition: 0.3s ease;
    }


    .mobile-menu-button.open
    span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .mobile-menu-button.open
    span:nth-child(2) {
        opacity: 0;
    }


    .mobile-menu-button.open
    span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /*
    Header buttons are hidden on tablet/mobile.
    The navigation contains the primary links.
    */

    .header-buttons {
        display: none;
    }


    /*
    Prevent page scrolling while menu is open.
    */

    body.menu-open {
        overflow: hidden;
    }


    /* ----------------------------------------------
       HERO
    ---------------------------------------------- */

    .hero {
        min-height: 600px;
    }


    .hero h1 {
        font-size: 3rem;
    }


    /* ----------------------------------------------
       SPLIT SECTIONS
    ---------------------------------------------- */

    .split-section {
        grid-template-columns: 1fr;

        gap: var(--space-6);
    }


    .split-image {
        order: -1;
    }


    /* ----------------------------------------------
       TESTIMONIALS
    ---------------------------------------------- */

    .testimonial-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* ----------------------------------------------
       FOOTER
    ---------------------------------------------- */

    .footer-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* ==================================================
   MOBILE
   768px and below
================================================== */

@media (max-width: 768px) {

    :root {

        --section-padding:
            4rem 0;

        --heading-xl:
            2.5rem;

        --heading-lg:
            2rem;

        --heading-md:
            1.7rem;
    }


    body {
        font-size: 0.95rem;
    }


    /* ----------------------------------------------
       CONTAINER
    ---------------------------------------------- */

    .container {
        width: 92%;
    }


    /* ----------------------------------------------
       HEADER
    ---------------------------------------------- */

    .site-header {
        height: 76px;
    }


    .nav {
        height: 100%;
    }


    .logo img {
        max-height: 55px;
    }


    /* ----------------------------------------------
       HERO
    ---------------------------------------------- */

    .hero {
        height: auto;

        min-height: 550px;

        text-align: center;

        padding: 80px 0;
    }


    .hero-content {
        width: 100%;
        max-width: 650px;
        margin: auto;
    }


    .hero h1 {
        font-size: 2.4rem;
    }


    .hero p {
        font-size: 1rem;
    }


    .hero-buttons {
        flex-direction: column;

        align-items: center;

        gap: var(--space-4);
    }


    .btn-primary,
    .btn-secondary {
        width: 100%;

        max-width: 320px;

        text-align: center;
    }


    /* ----------------------------------------------
       SECTIONS
    ---------------------------------------------- */

    section {
        padding:
            var(--section-padding);
    }


    h1 {
        font-size: 2.5rem;
    }


    h2 {
        font-size: 2rem;
    }


    h3 {
        font-size: 1.5rem;
    }


    .section-title {
        margin-bottom: var(--space-6);
    }


    /* ----------------------------------------------
       CARDS
    ---------------------------------------------- */

    .cards {
        grid-template-columns: 1fr;
    }


    .features {
        grid-template-columns: 1fr;
    }


    .stats-grid {
        grid-template-columns: 1fr;
    }


    .testimonial-grid {
        grid-template-columns: 1fr;
    }


    /* ----------------------------------------------
       COMPONENTS
    ---------------------------------------------- */

    .service-card,
    .card,
    .resource-box {
        padding: var(--space-5);
    }


    .contact-form {
        padding: var(--space-5);
    }


    .page-header {
        padding: 80px 0;
    }


    .page-header h1 {
        font-size: 2.5rem;
    }


    /* ----------------------------------------------
       IMAGE CARDS
    ---------------------------------------------- */

    .image-card img {
        height: 220px;
    }


    /* ----------------------------------------------
       SPLIT SECTIONS
    ---------------------------------------------- */

    .split-section {
        grid-template-columns: 1fr;
    }


    .split-image {
        order: -1;
    }


    /* ----------------------------------------------
       CTA
    ---------------------------------------------- */

    .cta-box {
        padding: var(--space-6);
    }


    /* ----------------------------------------------
       FOOTER
    ---------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .footer-logo {
        margin:
            0 auto var(--space-4);
    }


    /* ----------------------------------------------
       BACK TO TOP
    ---------------------------------------------- */

    .back-to-top {
        right: 20px;
        bottom: 20px;

        width: 48px;
        height: 48px;

        font-size: 20px;
    }

}


/* ==================================================
   SMALL PHONES
   480px and below
================================================== */

@media (max-width: 480px) {

    /* ----------------------------------------------
       HERO
    ---------------------------------------------- */

    .hero {
        min-height: 520px;

        padding: 65px 0;
    }


    .hero h1 {
        font-size: 2rem;
    }


    .hero p {
        font-size: 0.95rem;
    }


    /* ----------------------------------------------
       BUTTONS
    ---------------------------------------------- */

    .hero-buttons {
        gap: 12px;
    }


    .btn-primary,
    .btn-secondary {
        padding:
            12px 20px;
    }


    /* ----------------------------------------------
       CARDS
    ---------------------------------------------- */

    .card,
    .service-card {
        padding: 1.25rem;
    }


    /* ----------------------------------------------
       CTA
    ---------------------------------------------- */

    .cta {
        padding: 3rem 0;
    }


    .cta h2 {
        font-size: 1.8rem;
    }


    .cta-box {
        padding: var(--space-5);
    }


    /* ----------------------------------------------
       PAGE HEADER
    ---------------------------------------------- */

    .page-header {
        padding: 65px 0;
    }


    .page-header h1 {
        font-size: 2rem;
    }


    /* ----------------------------------------------
       FORMS
    ---------------------------------------------- */

    .contact-form {
        padding: 1.25rem;
    }


    .form-control {
        font-size: 16px;
    }

}


/* ==================================================
   LANDSCAPE PHONES
================================================== */

@media (max-height: 500px)
and (orientation: landscape) {

    .hero {
        min-height: 500px;
    }

}