/* ============================================
   RESPONSIVE CSS FOR HBFC WEBSITE
   ============================================ */

/* Default - Desktops / Large Screens */
#page {
    width: 59.5%;
}

/* Medium Screens - Small laptops / tablets in landscape */
@media screen and (max-width: 1200px) {
    #page {
        width: 65%;
    }
    
    #wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    #header {
        width: 100%;
    }
    
    #footer {
        width: 90%;
        padding: 0 20px;
    }
}

/* Tablets (portrait) */
@media screen and (max-width: 1024px) {
    #page {
        width: 75%;
        padding: 18px;
    }
    
    #logo h1 {
        font-size: 36px;
        padding-left: 20px;
        padding-right: 50px; /* Make room for hamburger on tablets */
    }
    
    #content {
        width: 100%;
        padding: 0 10px;
        float: none;
    }
    
    #sidebar {
        width: 100%;
        float: none;
        margin-top: 20px;
        padding: 0;
    }
    
    #about {
        width: 90%;
        padding: 20px;
    }
    
    #two-column #column1,
    #two-column #column2 {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
}

/* Large Phones (6-7 inch, e.g., iPhone Plus, Pixel XL) */
@media screen and (max-width: 768px) {
    #page {
        width: 90%;
        padding: 15px;
    }
    
    #wrapper {
        width: 100%;
    }
    
    #header {
        width: 100%;
        height: auto;
    }
    
    #logo {
        padding: 10px 50px 10px 15px; /* Right padding for hamburger button */
        height: auto;
        text-align: left;
    }
    
    #logo h1 {
        font-size: 24px;
        padding-left: 0;
        line-height: 1.3;
    }
    
    /* Menu hidden by default on mobile - controlled by hamburger */
    /* Styles for hamburger menu are in SiteMasterPage.master */
    
    #content {
        width: 100%;
        padding: 0;
    }
    
    #sidebar {
        width: 100%;
        margin-top: 30px;
    }
    
    #footer {
        width: 95%;
        padding: 10px;
        height: auto;
    }
    
    #footer p {
        padding-top: 15px;
        font-size: 12px;
    }
    
    #about {
        width: 90%;
        padding: 15px;
        margin: 10px auto;
    }
    
    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    
    .post .title {
        font-size: 20px;
    }
}

/* Standard Smartphones (5–6 inch) */
@media screen and (max-width: 600px) {
    #page {
        width: 95%;
        padding: 12px;
        font-size: 15px;
    }
    
    body {
        font-size: 14px;
    }
    
    #logo h1 {
        font-size: 24px;
        word-wrap: break-word;
    }
    
    #menu {
        padding: 5px;
    }
    
    #Menu1 a {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
    
    /* Stack menu items vertically if needed */
    #Menu1 > ul {
        flex-direction: column;
        align-items: stretch;
    }
    
    #Menu1 > ul > li {
        width: 100%;
        margin: 2px 0;
    }
    
    #Menu1 a {
        display: block;
        text-align: center;
        width: 100%;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    h2 {
        font-size: 1.8em;
    }
    
    h3 {
        font-size: 1.3em;
    }
    
    .post .title {
        font-size: 18px;
        padding-bottom: 10px;
    }
    
    .post .entry {
        font-size: 14px;
    }
    
    #about {
        width: 95%;
        padding: 12px;
    }
    
    #two-column h2 {
        font-size: 22px;
    }
    
    /* Tables responsive */
    table {
        font-size: 12px;
    }
    
    /* Form elements */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
    }
}

/* Small Phones (≤480px width) */
@media screen and (max-width: 480px) {
    #page {
        width: 98%;
        padding: 10px;
        font-size: 14px;
    }
    
    body {
        font-size: 13px;
    }
    
    #logo {
        padding: 8px 10px;
    }
    
    #logo h1 {
        font-size: 20px;
        line-height: 1.2;
    }
    
    #menu {
        padding: 3px;
    }
    
    #Menu1 a {
        font-size: 10px !important;
        padding: 5px 6px !important;
    }
    
    h1 {
        font-size: 1.3em;
    }
    
    h2 {
        font-size: 1.5em;
    }
    
    .post .title {
        font-size: 16px;
    }
    
    .post .entry {
        font-size: 13px;
        line-height: 1.6;
    }
    
    #footer {
        width: 98%;
        padding: 5px;
    }
    
    #footer p {
        font-size: 11px;
        padding-top: 10px;
    }
    
    #about {
        width: 98%;
        padding: 10px;
    }
    
    #two-column h2 {
        font-size: 20px;
    }
    
    /* Better touch targets */
    a {
        padding: 2px;
        min-height: 44px;
        display: inline-block;
    }
    
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        padding: 10px 15px;
    }
}

/* Extra Small / Older Phones (≤360px width) */
@media screen and (max-width: 360px) {
    #page {
        width: 100%;
        padding: 8px;
        font-size: 13px;
    }
    
    body {
        font-size: 12px;
    }
    
    #logo h1 {
        font-size: 18px;
        padding-left: 0;
    }
    
    #logo h1 a {
        word-break: break-word;
    }
    
    #Menu1 a {
        font-size: 9px !important;
        padding: 4px 5px !important;
    }
    
    h1 {
        font-size: 1.2em;
    }
    
    h2 {
        font-size: 1.3em;
    }
    
    .post .title {
        font-size: 14px;
    }
    
    .post .entry {
        font-size: 12px;
    }
    
    #footer p {
        font-size: 10px;
    }
    
    #about {
        width: 100%;
        padding: 8px;
    }
    
    #two-column h2 {
        font-size: 18px;
    }
}

/* ============================================
   ADDITIONAL MOBILE OPTIMIZATIONS
   ============================================ */

/* Prevent horizontal scrolling */
@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    #wrapper,
    #header,
    #menu,
    #page,
    #footer {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Ensure images don't overflow */
    img.border,
    img.alignleft,
    img.alignright,
    img.aligncenter {
        max-width: 100%;
        height: auto;
        float: none;
        margin: 10px auto;
        display: block;
    }
    
    /* Better spacing for mobile */
    p, ul, ol {
        line-height: 1.6;
        margin-bottom: 15px;
    }
    
    /* Improve link tap targets */
    a {
        -webkit-tap-highlight-color: rgba(99, 61, 17, 0.3);
    }
    
    /* Menu dropdown improvements for mobile */
    #Menu1 ul ul {
        position: static;
        width: 100%;
        margin-top: 5px;
    }
    
    #Menu1 ul ul li {
        width: 100%;
    }
    
    /* Better table handling on mobile */
    table {
        width: 100%;
        overflow-x: auto;
        display: block;
    }
    
    /* Sidebar list improvements */
    #sidebar li li {
        line-height: 25px;
        padding-left: 10px;
        font-size: 13px;
    }
    
    #sidebar h2 {
        font-size: 18px;
        padding: 10px 0 0 10px;
    }
    
    #sidebar p {
        padding: 10px;
        font-size: 13px;
    }
}

/* Print styles - maintain desktop layout */
@media print {
    #page {
        width: 100%;
        padding: 0;
    }
    
    #menu {
        display: none;
    }
    
    #sidebar {
        display: none;
    }
}