/* Homeforce Subheaders - Frontend Styles */

/* Base subheader styles - More specific */
.hf-hx, .hf-ol, .hf-ul {
    /* margin: 1.5em 0 0.5em !important; sjh */
    font-weight: bold !important;
    line-height: 1.65 !important; /* Better line height for 20px font (33px effective) */
    text-transform: uppercase !important;
    color: #d70929 !important; /* Default landlord color */
    border: none !important;
    padding-left: 0 !important;
    /* Inherit layout from WordPress constrained layout */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block!important;
    
}

/* Standard subheaders */
.hf-hx {
    color: #d70929 !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    border: none !important;
    padding-left: 0 !important;
    /* Inherit layout from WordPress constrained layout */
    /* margin-left: 0 !important;
    margin-right: 0 !important; */
    background: none !important;
}

/* Bullet points */
.hf-ul {
    list-style-type: disc;
    /* margin-left: 0;  Remove excessive indentation */
    padding-left: 1.5em; /* Consistent with numbered lists */
    position: relative;
}

.hf-ul::before {
    content: "●" !important; 
    position: absolute;
    left: -1em;
    font-weight: bold;
    color: #d70929; /* Default landlord color */
}

/* Numbered list items */
.hf-ol {
    list-style: none;
    counter-increment: list-counter;
    /* margin-left: 0;  Remove excessive indentation */
    padding-left: 2.5em; /* Increased padding for better number spacing */
    position: relative;
}

.hf-ol::before {
    content: counter(list-counter) ": ";
    position: absolute;
    left: -1em; /* Position number at the start */
    font-weight: bold;
    color: inherit;
    width: 2em; /* Give the number area a specific width */
}

/* Landlord article specific styles */
.landlord-article .hf-hx {
    color: #d70929 !important;
    border: none !important;
    padding-left: 0 !important;
    background: none !important;
}

.landlord-article .hf-ul {
    list-style-type: circle !important;
    color: #d70929 !important;
}

.landlord-article .hf-ul::before {
    content: "●" !important; 
    color: #d70929 !important;
}

.landlord-article .hf-ul::marker {
    color: #d70929 !important;
}

.landlord-article .hf-ol {
    color: #d70929 !important;
}

.landlord-article .hf-ol::before {
    color: #d70929 !important;
}

/* Tenant article specific styles */
.tenant-article .hf-hx {
    color: #797676 !important;
    border: none !important;
    padding-left: 0 !important;
    background: none !important;
}

.tenant-article .hf-ul {
    list-style-type: circle !important;
    color: #797676 !important;
}

.tenant-article .hf-ul::before {
    content: "●" !important;
    color: #797676 !important;
}

.tenant-article .hf-ul::marker {
    color: #797676 !important;
}

.tenant-article .hf-ol {
    color: #797676 !important;
}

.tenant-article .hf-ol::before {
    color: #797676 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hf-hx, .hf-ol, .hf-ul {
        /* margin: 1em 0 0.5em; */
    }
    
    .landlord-article .hf-hx,
    .tenant-article .hf-hx {
        padding-left: 12px;
    }
    
    .hf-ol, .hf-ul {
        /* margin-left: 1.2em; */
    }
}

/* Print styles */
@media print {
    .hf-hx, .hf-ol, .hf-ul {
        color: #000 !important;
        border-color: #000 !important;
    }
    
    .hf-ol::before {
        color: #000 !important;
    }
}

/* Fix for sections without alignfull class (like conclusion with shield-grey-background) */
.shield-grey-background .wp-block-homeforce-subheaders.hf-hx {
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    max-width: calc(800px + 40px) !important;
}