/* Container styling */
.ccb-letterhead-container {
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
    font-family: Arial, sans-serif; /* Arial font */
    font-size: 12pt; /* Fixed font size for consistency */
    margin: 15px; /* Margin around container */
    padding: 0; /* No padding inside the container */
    box-sizing: border-box;
    overflow: hidden; /* Contain floats */
    width: calc(100% - 30px); /* Adjust width considering margins */
}

/* Image styling inside the container */
.ccb-letterhead-img {
    float: left; /* Float image to the left */
    padding: 0; /* No padding */
    margin: 0; /* No margin */
    width: auto; /* Auto width to scale based on image size */
    display: flex; /* Enable flexbox for vertical alignment */
    align-items: flex-start; /* Align image to the top */
}

/* Image itself */
.ccb-letterhead-img img {
    max-width: 150px; /* Set max width for the image */
    height: auto; /* Maintain aspect ratio */
}

/* Text styling inside the container */
.ccb-letterhead-text {
    float: right; /* Float text to the right */
    text-align: right; /* Right-align the text */
    padding-right: 35px; /* Add right padding for spacing */
    margin: 0; /* No margin */
    display: flex; /* Enable flexbox for vertical alignment */
    align-items: flex-start; /* Align text to the top */
    flex-direction: column; /* Ensure text lines up properly */
    width: calc(100% - 150px - 35px); /* Adjust width considering image and padding */
}

/* Paragraph styling inside the container */
.ccb-letterhead-text p {
    margin: 0;
    line-height: 1.2; /* Adjust line height for better readability */
}

/* Space between paragraphs */
.ccb-letterhead-text p + p {
    margin-top: 10px;
}

/* Link styling */
a {
    color: #0066cc; /* Accessible link color */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Print-specific styling */
@media print {
    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .ccb-letterhead-container {
        width: 100%;
        max-width: 8.5in; /* Set max width to fit standard letter paper width */
        height: auto;
        margin: 0; /* No margin for printing */
        padding: 20px; /* Adjust padding to fit within print margins */
        font-size: 12pt; /* Ensure font size is fixed for print */
        page-break-inside: avoid; /* Avoid breaking the container across pages */
    }

    .ccb-letterhead-img {
        width: auto; /* Adjust width for print */
    }

    .ccb-letterhead-text {
        width: auto; /* Adjust width for print */
        padding-right: 20px; /* Adjust right padding for print */
    }

    .ccb-letterhead-img img {
        max-width: 150px; /* Maintain image max width */
    }

    @page {
        size: letter; /* Set page size to standard letter paper */
        margin: 1in; /* Set margins to 1 inch for printing */
    }
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .ccb-letterhead-container {
        font-size: 11pt; /* Reduce font size */
    }

    .ccb-letterhead-img {
        width: auto; /* Adjust image width */
    }

    .ccb-letterhead-text {
        width: auto; /* Adjust text width */
        padding-right: 20px; /* Adjust right padding */
    }

    .ccb-letterhead-img img {
        max-width: 100px; /* Shrink the image */
    }
}

@media (max-width: 480px) {
    .ccb-letterhead-container {
        font-size: 10pt; /* Further reduce font size */
    }

    .ccb-letterhead-img {
        width: auto; /* Adjust image width */
    }

    .ccb-letterhead-text {
        width: auto; /* Adjust text width */
        padding-right: 10px; /* Further reduce padding */
    }

    .ccb-letterhead-img img {
        max-width: 80px; /* Further shrink the image */
    }
}