/**
 * Bootstrap 5.3.7 Custom Overrides for Orange Modern Theme
 * Fixes for footer and main content
 */

/* MAIN CONTENT - INCREASE FONT SIZE */
body {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.page-main {
    font-size: 16px !important;
}

.cms-home .pagebuilder-column {
    font-size: 16px !important;
}

.cms-page-view .page-main p,
.cms-page-view .page-main li,
.cms-page-view .page-main div {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Headings */
h1 { font-size: 2.5rem !important; }
h2 { font-size: 2rem !important; }
h3 { font-size: 1.75rem !important; }
h4 { font-size: 1.5rem !important; }

/* FOOTER FIXES */
.page-footer {
    background-color: #333f48;
    color: #ffffff;
    padding: 40px 0;
}

/* Footer Links - VERTICAL LAYOUT WITH PROPER SPACING */
.page-footer .footer.links {
    margin-top: 30px !important;
    padding: 0 !important;
    list-style: none !important;
}

.page-footer .footer.links li {
    display: block !important;
    margin-bottom: 12px !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

.page-footer .footer.links a {
    color: #ffffff !important;
    font-size: 16px !important;
    opacity: 0.9 !important;
    text-decoration: none !important;
    display: inline-block !important;
    padding: 2px 0 !important;
}

.page-footer .footer.links a:hover {
    color: #bf5700 !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* Newsletter Form - PROPERLY SIZED */
.page-footer .block.newsletter {
    margin-bottom: 30px;
}

.page-footer .block.newsletter .field.newsletter {
    display: flex;
    align-items: stretch;
    gap: 10px;
    max-width: 500px;
}

.page-footer .block.newsletter .field.newsletter .label {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

.page-footer .block.newsletter .field.newsletter .control {
    display: flex;
    gap: 10px;
    width: 100%;
}

.page-footer .block.newsletter input[type="email"] {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 10px 15px;
    height: 44px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

.page-footer .block.newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.page-footer .block.newsletter input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #bf5700;
    outline: none;
}

/* Subscribe Button - SAME HEIGHT AS INPUT */
.page-footer .block.newsletter .action.subscribe {
    background-color: #bf5700 !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    height: 44px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.page-footer .block.newsletter .action.subscribe:hover {
    background-color: #994600 !important;
}

/* Override any conflicting Magento styles */
.page-footer .block.newsletter .actions {
    margin: 0 !important;
    padding: 0 !important;
}

/* Copyright Section */
.page-footer .copyright {
    color: rgba(255, 255, 255, 0.7);
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
}

/* Bootstrap Integration */
:root {
    --bs-primary: #bf5700;
    --bs-secondary: #333f48;
    --bs-body-bg: #fafafa;
    --bs-body-color: #333f48;
    --bs-link-color: #bf5700;
    --bs-link-hover-color: #994600;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .page-footer .block.newsletter .field.newsletter {
        flex-direction: column;
    }
    
    .page-footer .block.newsletter .field.newsletter .control {
        flex-direction: column;
    }
    
    .page-footer .block.newsletter .action.subscribe {
        width: 100%;
    }
}