/* =====================================================================
   Boiler Installation North West — Site Customisations
   Loaded after style.css, so rules here safely override the base theme.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Brand Mark (replaces the old raster logo.png / footer-logo.png)
   --------------------------------------------------------------------- */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.brand-mark-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    border-radius: 50%;
    background: #E8590C;
    color: #ffffff;
    font-size: 24px;
    box-shadow: 0 4px 14px rgba(232, 89, 12, .35);
}

.brand-mark-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-mark-main {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 21px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #0F2A43;
    white-space: nowrap;
}

.brand-mark-sub {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #E8590C;
}

/* Footer variant sits in a narrower column, so it needs to be more
   compact and allowed to wrap onto two lines without colliding with
   neighbouring widgets. */
.brand-mark.brand-mark--footer {
    align-items: flex-start;
    gap: 10px;
    max-width: 230px;
}

.brand-mark.brand-mark--footer .brand-mark-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    margin-top: 2px;
}

.brand-mark.brand-mark--footer .brand-mark-main {
    color: #ffffff;
    font-size: 16px;
    white-space: normal;
    line-height: 1.25;
}

.brand-mark.brand-mark--footer .brand-mark-sub {
    color: #FF9E5E;
    font-size: 12px;
    letter-spacing: 1px;
}

@media (max-width: 575px) {
    .brand-mark-icon { width: 42px; height: 42px; line-height: 42px; font-size: 19px; }
    .brand-mark-main { font-size: 16px; }
    .brand-mark-sub  { font-size: 11px; letter-spacing: 1px; }
}

/* ---------------------------------------------------------------------
   Recolour the decorative heading "smile" divider (was a yellow PNG) to
   match the new flame-orange accent, via an inline SVG data URI.
   --------------------------------------------------------------------- */
.section-title.yello-divider .heading:after,
.footer-title .heading:after,
.side-widget .section-heading:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='11' viewBox='0 0 41 11'%3E%3Cpath d='M2 3 C11 10, 30 10, 39 3' fill='none' stroke='%23E8590C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   Booking form date-picker — align the "selected date" state with the
   new navy brand colour instead of the default Bootstrap blue.
   --------------------------------------------------------------------- */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
    background-image: none;
    background-color: #0F2A43;
    border-color: #0F2A43;
}