/*
Theme Name: tauntonvale responsive
Description: Responsive Stylesheet for Taunton Vale Shepherd Huts
*/

/* ==========================================================================
   Responsive Styles: Max Width 992px (Tablets & Smaller Laptops)
   ========================================================================== */
@media screen and (max-width: 992px) {
    /* Adjust large typography */
    h1, .whitepagespace h1 {
        font-size: 38px;
        line-height: 1.3;
    }

    /* Reset the heavy negative margins on the middle image so it doesn't overlap text */
    .homeimagemiddle img {
        position: static;
        bottom: auto;
        margin-bottom: 20px;
        margin-top: 20px;
    }
}

/* ==========================================================================
   Responsive Styles: Max Width 768px (Mobile Devices)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* --- Layout & Header --- */
    .wrap {
        width: 92%;
    }

    .site-header .wrap {
        flex-direction: column;
        align-items: flex-start;
    }

	.site-branding {
		padding: 15px 0;
		text-align: center;
		width: 100%;
	}

    /* Admin Bar Mobile Fix (WP mobile admin bar is 46px, not 32px) */
    .admin-bar .your-header-class {
        top: 46px; 
    }
	body {
		background: #f9f8f3;
		text-align: center;
	}
    /* --- Mobile Navigation --- */
	.menu-toggle {
		display: block;
		margin: 10px 0;
		padding: 10px 15px;
		cursor: pointer;
		width: 100%;
	}

    .main-navigation {
        width: 100%;
    }

    .main-navigation ul {
        display: none; /* Hidden until toggled via JS */
        flex-direction: column;
        width: 100%;
        background-color: rgba(17, 17, 17, 0.95); /* Dark solid background for readability */
        padding: 0;
        margin: 10px 0 0 0;
    }

    .main-navigation.toggled ul {
        display: flex;
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-navigation a {
        padding: 15px;
        text-align: left;
    }

    /* --- Typography Adjustments --- */
    h1, .whitepagespace h1 {
        font-size: 32px;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 24px;
    }

    /* --- Footer Adjustments --- */
    .site-footer {
        padding: 30px 0;
        text-align: center;
    }

    .leftlogo {
        display: block;
        margin-bottom: 20px;
    }

    .footnavigation {
        display: block;
        margin-bottom: 20px;
    }

    .footnavigation ul {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footnavigation li {
        display: block;
        margin-bottom: 5px;
    }

    /* Remove the slashes in the footer on mobile as the items are stacked */
    .footnavigation .menu-item:not(:last-child)::after {
        display: none; 
    }

    /* Fix the hardcoded left margins in the footer */
    .copyrightnew {
        margin-left: 0;
        padding-left: 0;
        text-align: center;
        clear: both;
    }
}

/* ==========================================================================
   Responsive Styles: Max Width 480px (Small Mobile)
   ========================================================================== */
@media screen and (max-width: 480px) {
    .wrap {
        width: 95%;
    }
    
    .homecontent .customsmallerhead {
        font-size: 1.2rem;
    }

    .homecontent h1 {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    h1, .whitepagespace h1 {
        font-size: 28px;
    }
}