/****************************************/
/*            General Styles            */
/****************************************/

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape on iOS */
}

header, main, footer {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 0.2em;
    color: #2c3e50;
}

.alternative-title {
    font-size: 1.1em;
    color: #7f8c8d;
    margin-top: 0;
    margin-bottom: 20px;
}

.hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Soften edges, but no border as requested */
    margin-bottom: 20px;
    display: block; /* Remove extra space below image */
}

main h2 {
    font-size: 1.8em;
    color: #34495e;
    margin-top: 40px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 5px;
}

main h3 {
    font-size: 1.4em;
    color: #34495e;
    margin-top: 30px;
    margin-bottom: 10px;
}

p, li {
    font-size: 1.1em;
    margin-bottom: 1em;
    color: #555;
}

ul {
    padding-left: 20px;
    list-style-type: disc; /* Default list style */
}

li {
    margin-bottom: 0.5em;
}

strong {
    color: #2c3e50;
}

code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    background-color: #ecf0f1;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

footer {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #7f8c8d;
}

/****************************************/
/*      Visual Enhancement Styles       */
/****************************************/

.section-image {
    max-width: 80%; 
    height: auto;
    border-radius: 6px;
    margin: 20px auto;
    display: block;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.icon-set {
    max-width: 100%;
    height: auto;
    margin: 15px auto;
    display: block;
}

.callout-box {
    background-color: #eef7fa; 
    border-left: 5px solid #3498db; 
    padding: 15px 20px;
    margin: 25px 0;
    border-radius: 4px;
}

.callout-box p {
    margin-bottom: 0.5em;
    color: #2c3e50; 
}

.callout-box p:last-child {
    margin-bottom: 0;
}

.hr-styled {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(44, 62, 80, 0.35), rgba(0, 0, 0, 0));
    margin: 40px 0;
}

.styled-ul {
    list-style-type: none; 
    padding-left: 0;
}

.styled-ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 0.8em;
}

.styled-ul li::before {
    content: "\2713"; 
    color: #27ae60; 
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 0px; 
}

blockquote {
    border-left: 4px solid #bdc3c7; 
    padding-left: 15px;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: #555;
}

/****************************************/
/*        Mobile Optimizations          */
/****************************************/

@media (max-width: 600px) {
    h1 {
        font-size: 2em;
    }

    main h2 {
        font-size: 1.6em;
    }

    main h3 {
        font-size: 1.3em;
    }

    p, li {
        font-size: 1em;
    }

    header, main, footer {
        padding: 15px;
    }

    /* More forceful scaling for all section images and icon sets on mobile */
    .section-image, .icon-set {
        width: 100% !important; /* Force width to container */
        max-width: 100% !important; /* Ensure it doesn't exceed container */
        height: auto !important; /* Maintain aspect ratio */
        box-sizing: border-box !important; /* Include padding and border in the element's total width and height */
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/****************************************/
/*      iOS Safari Specific Fixes       */
/****************************************/

/* Fix for potential issues with viewport units if they were used more extensively */
/* For example, if using vh for full-height sections:
.full-height-section {
    min-height: 100vh; 
    min-height: -webkit-fill-available; 
}
*/

/* Ensure clickable elements have enough padding for touch targets */
a, button {
    padding: 8px; /* Example, adjust as needed */
}

/* Prevent horizontal scroll issues that can sometimes appear */
html, body {
    overflow-x: hidden;
}

/* Improve text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}