This sounds more a question of logistics and design rather than a straight css question.:)
I've added ccs3 text shadow effects but this doesn't render well on some mobile devices.
The shadow you've added is pretty heavy and I would suggest that for smaller devices you go for a very subtle shadow instead; which you can easily do via your media queries.
for example on the iphone the text on the right is much taller than the logo, wheareas I want them to be the same height.
You seem to have answered your own question there and the answer is simply that all that text won't fit on a smaller screen so you have to make some compromises. I would be inclined to just keep the email and telephone information visible at smaller screens widths (using media queries to hide the unwanted text) and then perhaps duplicate the opening times and other text on the footer instead.
If you really need all that text in the top section then perhaps re-arrange it to be under the logo at smaller screen widths instead of at the side.
The question is really more one of design than straight css and it all depends on what your goals are? You can't fit the same information into smaller screen sizes so think what's important and what needs to be at the top. Perhaps a smaller logo or revised text or moving the text as mentioned above. It's all a matter of logistics:)