/* FILE: skins/mobile1/css/base.css */

/* --- APP FRAMEWORK --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #fff; 
    min-height: 100vh;
}

/* The "Phone" Container - Now Full Width */
.app-frame {
    width: 100%;
    max-width: 100%; /* Changed from 600px to 100% */
    background: #fff;
    min-height: 100vh;
    box-shadow: none; /* Removed shadow */
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Subpage Specifics */
body.subpage-body {
    background-color: #fff;
}

.container {
    padding: 0 15px;
    width: 100%;
    /* Optional: Add a max-width here if you don't want text spanning 4000px on huge monitors */
    max-width: 1200px; 
    margin: 0 auto;
}

h1 { font-size: 1.8rem; margin-bottom: 15px; line-height: 1.2; }
h2 { font-size: 1.5rem; color: #005fB1; margin-bottom: 15px; }
h3 { font-size: 1.2rem; margin-bottom: 10px; }

img { max-width: 100%; }

/* Variables */
:root {
    --primary-color: #005fB1;
    --secondary-color: #00A67E;
    --dark-text: #333;
    --light-text: #f4f4f4;
    --light-bg: #f0f4f8;
}