/* Datos personales: Marcos Losada García - UO295106 */
/* Estilos de layout del proyecto MotoGP-Desktop */

/* Especificidad: (0, 0, 1) */
body {
    margin: 0;
    padding: 0;
}

/* Especificidad: (0, 0, 1) */
header {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 1em;
}

/* Especificidad: (0, 0, 2) */
header h1 {
    display: flex;
    flex-grow: 1;
    text-wrap: wrap;
    margin-block-start: 0;
    margin-block-end: 0;
    padding: 0;
}

/* Especificidad: (0, 0, 2) */
header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 1;
    flex-direction: row;
    padding: 1em 2em;
}

/* Especificidad: (0, 0, 2) */
header a {
    padding: 0.5em;
}

/* Especificidad: (0, 0, 3) */
header nav a {
    margin: 0.2em;
}

/* Especificidad: (0, 0, 2) */
header + p {
    margin: 0;
    padding: 0.5em;
}

/* main Especificidad: (0, 0, 1) */
/* aside Especificidad: (0, 0, 1) */
main, aside {
    margin: 1em;
}

/*input Especificidad: (0, 1, 1) */
/*select Especificidad: (0, 0, 1) */
/*textarea Especificidad: (0, 0, 1) */
input[type="submit"], input[type="button"], select, textarea {
    min-width: 20em;
    box-sizing: border-box;
}

/* Especificidad: (0, 0, 1) */
table {
    border-collapse: collapse;
    width: 30%;
}

/* Especificidad: (0, 0, 2) */
th, td {
    padding: 0.5em;
    text-align: left;
}

/* Especificidad: (0, 0, 1) */
img {
    width: 50%;
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* Especificidad: (0, 0, 1) */
svg {
    width: 100%;
    height: auto;
}

/* Especificidad: (0, 0, 2) */
main > div {
    width: 50%;
    height: 50vh; 
    display: none;
}

/* Especificidad: (0, 0, 1) */
figure {
    margin: 1em 0 0 0;
}

/* Especificidad: (0, 0, 1) */
dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em 1.5em;
    line-height: 1.6;
    margin-bottom: 1.5em;
}

/* Especificidad: (0, 0, 1) */
dt {
    grid-column: 1;
}

/* Especificidad: (0, 0, 1) */
dd {
    grid-column: 2;
    margin: 0;
}

/* Especificidad: (0, 1, 5) */
main ul li a:has(+ p) {
    display: block;
    margin-bottom: 0.5em;
}

/* Especificidad: (0, 1, 6) */
main ul li a:has(+ p) + p {
    margin-top: 0;
    max-width: 65ch;
}


/* --- MEDIA QUERIES (Mobile) --- */

@media (min-width: 320px) and (max-width: 768px) {

    /* Especificidad: (0, 0, 1) */
    header {
        /* Advertencia: redefinición de la propiedad flex-direction */
        flex-direction: column;
        /* Advertencia: redefinición de la propiedad align-items */
        align-items: flex-start;
    }

    /* Especificidad: (0, 0, 2) */
    header nav {
        /* Advertencia: redefinición de la propiedad flex-direction */
        flex-direction: column;
        margin-top: 0.5em;
        margin-bottom: 1em;
        /* Advertencia: redefinición de la propiedad padding */
        padding: 0;
    }

    /* Especificidad: (0, 0, 2) */
    header + p {
        display: none;
    }

    /*input Especificidad: (0, 1, 1) */
    /*select Especificidad: (0, 0, 1) */
    /*textarea Especificidad: (0, 0, 1) */
    input[type="submit"], input[type="button"], select, textarea {
        /* Advertencia: redefinición de la propiedad min-width */
        min-width: 100%;
        width: 100%;
    }

    /* Especificidad: (0, 0, 1) */
    img, video, audio {
        /* Advertencia: redefinición de la propiedad width */
        width: 100%;
    }

    /* Especificidad: (0, 0, 1) */
    video, section picture > img {
        height: auto;
    }

    /* Especificidad: (0, 0, 2) */
    main > div {
        /* Advertencia: redefinición de la propiedad width */
        width: 100%;
    }
}