/*fontsettings*/
.bsc-p {
    display: inline-block;
    margin-top: 1rem;
    font-family: "IM Fell Great Primer SC", serif;
    color: #333333;
    /*text-shadow: 1px 1px 1px rgba(36, 36, 36, 0.719);*/
    font-size: 1.05rem;
    padding: 0em 0em;
}


/*this might get the nix with the top-card re-styling.*/
.mangtag { 
    margin-top: 0rem;
    margin-bottom: 0rem;
    margin-left: -1.0rem;
    font-family: "Luxurious Roman", serif;
    font-size: 1.6rem;
    color: #1f1f1f;
    text-shadow: 2px 2px 1px rgba(36, 36, 36, 0.493);
    letter-spacing: 0em;
    padding: 0em 0em;
    font-weight: 700;
}
.weathtag { 
    margin-top: -0.8rem;
    margin-bottom: 0.8rem;
    margin-left: 0rem;
    font-family: "Luxurious Roman", serif;
    font-size: 1.9rem;
    color: #0e0e0eee;
    text-shadow: 2px 2px 1px rgba(36, 36, 36, 0.788);
    letter-spacing: 0.3em; 
    font-weight: 700;  
}
.tidestag {
    margin-top: -1rem;
    margin-bottom: 0.8rem;
    margin-left: 0.5rem;
    font-family: "Luxurious Roman", serif;
    font-size: 1.9rem;
    color: #0e0e0eee;
    text-shadow: 2px 2px 1px rgba(36, 36, 36, 0.788);
    letter-spacing: 0.4em;
    padding: 0em 0em;
    font-weight: 900;
}
.roadstag {
    margin-top: -1rem;
    margin-bottom: 0.8rem;
    margin-left: 0.5rem;
    font-family: "Luxurious Roman", serif;
    font-size: 1.9rem;
    color: #0e0e0eee;
    text-shadow: 2px 2px 1px rgba(36, 36, 36, 0.788);
    letter-spacing: 0.4em;
    padding: 0em 0em;
    font-weight: 700;
}


.blogtag {
    margin-top: -1rem;
    margin-bottom: 0.8rem;
    margin-left: 0.5rem;
    font-family: "Luxurious Roman", serif;
    font-size: 1.9rem;
    color: #0e0e0eee;
    text-shadow: 2px 2px 1px rgba(36, 36, 36, 0.788);
    letter-spacing: 0.4em;
    padding: 0em 0em;
    font-weight: 700;
}

.contag {
    margin-top: -1rem;
    margin-bottom: 0.8rem;
    margin-left: 0.0rem;
    font-family: "Luxurious Roman", serif;
    font-size: 1.9rem;
    color: #0e0e0eee;
    text-shadow: 2px 2px 1px rgba(36, 36, 36, 0.788);
    letter-spacing: 0.3em;
    padding: 0em 0em;
    font-weight: 700;
}

.bold {
  font-weight: bold;
  color: #272727;
}



/* All these are the side menu font formatting to make them justify well. They don't seem to need changing for the mobile response.*/
.hme-nav {
    padding-left: 18px;

    letter-spacing: 1.46em;
    font-size: 1.5rem;
    font-weight: 500;

}

.wthr-nav {
    padding-left: 18px;

    letter-spacing: 0.44em;
    font-size: 1.5em;
    font-weight: 500;
}

.tides-nav {
    padding-left: 18px;

    letter-spacing: 1.03em;
    font-size: 1.5rem;
    font-weight: 500;
}

.roads-nav {
    padding-left: 18px;

    letter-spacing: 1em;
    font-size: 1.5rem;
    font-weight: 500;
}

.blog-nav {
    padding-left: 18px;

    letter-spacing: 1.52em;
    font-size: 1.5rem;
font-weight: 500;
}

.con-nav {
    padding-left: 18px;

    letter-spacing: 0.47em;
    font-size: 1.5rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .header-container {
        height: 200px; /* Smaller mobile header */
        margin-bottom: -80px; /* Much smaller negative margin */
    }

    .polaroid {
        border-image-source: url(images/leather-sml.webp);
        border-top: 14px solid;
        border-right: 14px solid; 
        border-bottom: 14px solid;
        border-left: 14px solid;
        border-image-slice: 14 14 14 14;
    }

    .top-bar {
        padding: 1rem 2rem;
    }
    
    .content-wrapper {
        padding: 0px 20px 20px 20px; /* Reduced top padding to match desktop approach */
    }

    .content-body {
        padding: 3rem 2rem;
    }
    
    .intrusive-frame {
        border-width: 15px; /* Thinner border for mobile */
        border-image-slice: 15 15 15 15;
        top: 0px; /* Same as desktop - no negative intrusion needed */
        left: 10px;
        right: 10px;
    }



    /*Oh wow. We can copy any class property over here and tune it for mobile. That's responsive mayng. I think we can delete stuff we haven't edited. */
    /*This is all my adaptive sizes for this moobile class.*/
    .bsc-p {
        display: inline-block;
        margin-top: 1rem;
        font-family: "IM Fell Great Primer SC", serif;
        color: #333333;
        font-size: 0.9rem;
    
    }

    .mangtag { 
    margin-top: -1.8rem;
    margin-bottom: 0rem;
    margin-left: -1.0rem; 
    font-size: 1rem;
    text-shadow: 2px 2px 1px rgba(36, 36, 36, 0.493);
    letter-spacing: 0em;
    padding: 0em 0em;
    font-weight: 700;
}

    .weathtag { 
        margin-top: -0.7rem;
        margin-bottom: 0.8rem;
        margin-left: 0.2rem; 
        font-size: 1rem;
        text-shadow: 1px 1px 0.5px rgba(36, 36, 36, 0.700);
        letter-spacing: 0.3em; 
        font-weight: 700;  
}


    .tidestag {
        margin-top: -0.6rem;
        margin-bottom: 0.8rem;
        margin-left: +0.6rem;
        font-size: 1rem;
        text-shadow: 1px 1px 0.5px rgba(36, 36, 36, 0.700);
        letter-spacing: 0.4em;
        padding: 0em 0em;
        font-weight: 700;
}

.roadstag {
    margin-top: -0.8rem;
    margin-bottom: 0.8rem;
    margin-left: 0.3rem;
    font-size: 1rem;
    text-shadow: 1px 1px 0.5px rgba(36, 36, 36, 0.700);
    letter-spacing: 0.4em;
    padding: 0em 0em;
    font-weight: 800;
}




.contag {
    margin-top: -1.0rem;
    margin-bottom: 0.8rem;
    margin-left: -0.9rem;
    font-size: 1rem;
    text-shadow: 1px 1px 0.5px rgba(36, 36, 36, 0.700);
    letter-spacing: 0.3em;
    padding: 0em 0em;
    font-weight: 700;
}

.blogtag {
    margin-top: -1rem;
    margin-bottom: 0.8rem;
    margin-left: 0.5rem;
    font-size: 1rem;
    text-shadow: 1px 1px 0.5px rgba(36, 36, 36, 0.788);
    letter-spacing: 0.4em;
    padding: 0em 0em;
    font-weight: 700;
}

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    .polaroid::before {
        background-size: 75%;
        position: absolute;
        top: -25px;
        left: -10px;

    }

    .card-content {
    
    padding: 1rem;
    
}

}


/* ====== DESKTOP RESPONSIVE SECTION ====== */

@media (min-width: 1024px) {
    .header-container {
        height: 300px;
        margin-bottom: -50px; /* Keep this negative margin */
    }
    
    .content-wrapper {
        padding: 0px 40px 40px 40px; /* Add some top padding back for desktop */
    }
    
    .intrusive-frame {
        top: 0px; /* Keep this at 0 like mobile */
       /* border: 15px solid;  Same border width as mobile for consistency */
        
    }

    .sidebar {
        transform: translateX(0);
        position: fixed;
    }

    .main-container {
        margin-left: 280px;
    }

    .overlay {
        display: none;
    }

    .hamburger {
        display: none;
    }
}