@charset "UTF-8";

body {
    color: #D9CA98;
    font-family: "Aref Ruqaa Ink", serif;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    padding: 1%;
    background: #428dc9;
    background: linear-gradient(90deg, rgba(66, 141, 201, 1) 0%, rgba(46, 48, 51, 1) 0%, rgba(140, 140, 145, 1) 50%, rgba(46, 48, 51, 1) 100%);
}

h2 {
    font-family: "Aref Ruqaa Ink", serif;
    font-size: 36px;
    color: #B6C1EF;
    font-weight: 200;
    margin: 0px auto;
    text-align: center; /* Ensured centering */
}

.font-large {
    font-size: 22px;
    color: #D1AD58;
    text-shadow: 1px 1px 1px #000;
}

#wrapper {
    width: 95%;
    max-width: 1000px;
    padding: 10px 40px 30px;
    margin: 1% auto;
    background-color: #140806;
    border: 1px solid #6282DC;
    box-sizing: border-box;
}

img {
    border: 1px solid #D9D7C7;
}

/* Utility: Clearfix for floated images */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Links */
.link1 {
    font: 9pt Arial, Helvetica, sans-serif;
    text-decoration: none;
}
a.link1:link { color: #7B889B; }
a.link1:visited { color: #7B889B; }
a.link1:hover { color: #CAAF7D; text-decoration: underline; }
a.link1:active { color: #EAFFFF; }

/* Gradients */
p.grad2 {
    background-image: url(../../images/grad/h5_grey8.jpg);
    line-height: 10px;
    margin: 20px 0;
    border: none;
}

/* Content Boxes */
.content1 {
    background-color: #484848;
    margin: 20px 0 25px;
    padding: 20px;
    border: 1px solid #666666;
    overflow: hidden; /* Contains floats */
}

.content2 {
    background-color: #414141;
    margin: 20px auto; /* Centered */
    padding: 20px;
    border: 1px solid #818181;
    max-width: 800px; /* Constrain width like the old table did */
}

/* Images */
.float-left {
    float: left;
    margin: 10px 20px 10px 0;
    max-width: 100%;
    height: auto;
}

.float-right {
    float: right;
    margin: 10px 0 10px 20px;
    max-width: 100%;
    height: auto;
}

/* Navigation Containers */
.nav-container {
    width: 100%;
    text-align: right; /* For the index link */
    margin-bottom: 0;
}

.index-link {
    display: inline-block;
    margin-bottom: 10px;
}

.bottom-nav-container {
    text-align: center;
    margin-top: 20px;
}

/* Tablet Responsiveness (Preserved as you liked it) */
@media (max-width: 768px) {
    #wrapper {
        padding: 10px 15px;
        width: 98%;
    }
    
    .content1, .content2 {
        text-align: center;
    }

    .nav-container {
        text-align: center;
    }
}

/* Phone Responsiveness (FIXED) */
@media (max-width: 500px) {
    
    /* 1. Force Images to Stack & Center */
    .float-left, .float-right {
        float: none !important; /* Force override of desktop float */
        display: block;
        margin: 15px auto !important; /* Center the image */
        text-align: center;
        max-width: 85%; /* Slight adjustment for small screens */
    }

    /* 2. Force Text to Center */
    .content1 {
        text-align: center !important;
    }
    
    /* Specific override for paragraphs inside text-blocks to ensure they center */
    .content1 .text-block p, 
    .content1 .text-block blockquote {
        text-align: center !important;
        clear: both; /* Ensure no wrapping around old floats */
    }

    /* Ensure the index link stays centered */
    .nav-container {
        text-align: center;
    }
    
    /* Fix for iPhone 6/SE (1st gen) Bottom Nav Squash */
    .bottom-nav-container a.link1 {
        display: inline-block;
        margin: 5px 10px !important; /* Force vertical spacing */
        white-space: nowrap; /* Prevent words breaking awkwardly */
    }
    
    /* Optional: If it's still too tight, force them to stack vertically */
    /* 
    .bottom-nav-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bottom-nav-container a.link1 {
        margin: 8px 0 !important;
    } 
    */
}