/* Brand strip surface, with action card styles shared by the footer. */
#header.ks-masthead {
    --ks-masthead-blue: #102694;
    --ks-masthead-yellow: #ffcc00;
    padding: 0;
    color: var(--ks-masthead-blue);
    background-color: var(--ks-masthead-yellow);
    background-image: url("../images/header-background.webp");
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: auto 32px;
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: normal;
}
.ks-masthead *, .ks-masthead *::before, .ks-masthead *::after { box-sizing: border-box; }
.ks-masthead .ks-masthead__inner { max-width: 1450px; margin-inline: auto; padding: 16px 20px 44px; }
.ks-masthead .ks-masthead__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 16px; }
.ks-masthead .ks-masthead__grid > * { min-width: 0; }
#header.ks-masthead .ks-masthead__brand { width: 152px; max-width: 100%; margin: 0; justify-self: center; text-align: center; }
.ks-masthead .ks-masthead__brand a { display: block; }
.ks-masthead .ks-masthead__brand img { display: block; width: 100%; height: auto; object-fit: contain; margin: 0; }
.ks-masthead .header-info { margin: 0; }
.ks-masthead .ks-masthead__availability { text-align: center; }
.ks-masthead .ks-masthead__region { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 10px; margin: 0; font-size: .9375rem; line-height: 1.4; }
.ks-masthead .ks-masthead__clock { padding-inline-start: 10px; border-inline-start: 1px solid rgba(16, 38, 148, .3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-masthead #now_time { display: inline-block; min-width: 6.5ch; }
.ks-masthead .ks-masthead__hours { margin: 4px 0 0; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.ks-masthead .ks-masthead__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 640px; justify-self: center; }
.ks-masthead .ks-masthead__actions--single { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
.ks-masthead .ks-masthead__cta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 88px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #b7081b;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: inherit;
    font-style: normal;
    letter-spacing: normal;
    transition: background-color 140ms ease !important;
}
.ks-masthead .ks-masthead__cta--call { grid-column: 1 / -1; }
.ks-masthead .ks-masthead__cta-title { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 10px; background: rgba(0, 0, 0, .2); color: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.ks-masthead .ks-masthead__cta-action { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 12px; color: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.ks-masthead .ks-masthead__cta-icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; line-height: 1; }
.ks-masthead .ks-masthead__cta-icon :is(svg, img) { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Open Sans ink sits below its line-box centre; balance it against the pictogram. */
.ks-masthead .ks-masthead__cta-label { min-width: 0; overflow-wrap: break-word; transform: translateY(-.0625em); }
.ks-masthead .ks-masthead__cta--call .ks-masthead__cta-title { min-height: 34px; }
.ks-masthead .ks-masthead__cta--call .ks-masthead__cta-action { font-size: 1.125rem; }
.ks-masthead .ks-masthead__cta:hover { background: #970817; color: #fff; text-decoration: none; }
.ks-masthead a:focus-visible { outline: 3px solid var(--ks-masthead-blue) !important; outline-offset: 3px; }
@media (max-width: 29.99rem) {
    .ks-masthead .ks-masthead__inner { padding: 12px 20px 36px; }
    .ks-masthead .ks-masthead__grid { gap: 12px; }
    #header.ks-masthead .ks-masthead__brand { width: 128px; }
    .ks-masthead .ks-masthead__cta { max-width: 250px; }
}
/* Keep availability compact on mobile without changing the logo or action grid. */
@media (max-width: 39.99rem) {
    .ks-masthead .ks-masthead__region { gap: .25rem .375rem; font-size: .75rem; line-height: 1.25; }
    .ks-masthead .ks-masthead__clock { padding-inline-start: .375rem; }
    .ks-masthead .ks-masthead__hours { margin-top: .0625rem; font-size: .875rem; line-height: 1.25; }
}
@media (min-width: 30rem) {
    .ks-masthead .ks-masthead__grid { grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; }
    #header.ks-masthead .ks-masthead__brand { width: 128px; grid-row: 1 / 3; }
    .ks-masthead .ks-masthead__availability { text-align: left; }
    .ks-masthead .ks-masthead__region { justify-content: flex-start; }
    .ks-masthead .ks-masthead__availability, .ks-masthead .ks-masthead__actions { grid-column: 2; }
    .ks-masthead .ks-masthead__actions--single { justify-self: start; }
}
@media (min-width: 40rem) {
    .ks-masthead .ks-masthead__inner { padding-block: 20px 44px; }
    .ks-masthead .ks-masthead__grid { grid-template-columns: 176px minmax(0, 1fr); gap: 20px 24px; }
    #header.ks-masthead .ks-masthead__brand { width: 176px; }
    .ks-masthead .ks-masthead__availability { text-align: left; }
    .ks-masthead .ks-masthead__region { justify-content: flex-start; font-size: 1rem; }
    .ks-masthead .ks-masthead__hours { font-size: 1.375rem; }
    .ks-masthead .ks-masthead__actions { grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
    .ks-masthead .ks-masthead__cta--call { grid-column: auto; }
    .ks-masthead .ks-masthead__cta--call .ks-masthead__cta-title { min-height: 46px; }
    .ks-masthead .ks-masthead__actions--single { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
}
@media (min-width: 60rem) {
    .ks-masthead .ks-masthead__grid { grid-template-columns: 184px minmax(0, 1fr); row-gap: 16px; }
    #header.ks-masthead .ks-masthead__brand { width: 184px; grid-row: 1 / 3; }
    .ks-masthead .ks-masthead__availability, .ks-masthead .ks-masthead__actions { grid-column: 2; }
    .ks-masthead .ks-masthead__actions--single { justify-self: start; }
}
@media (min-width: 80rem) {
    .ks-masthead .ks-masthead__inner { padding-block: 20px 32px; }
    .ks-masthead .ks-masthead__grid { grid-template-columns: 224px minmax(0, 1fr) minmax(0, 2fr); column-gap: 24px; }
    #header.ks-masthead .ks-masthead__brand { width: 224px; grid-row: auto; margin-block: -35px -12px; }
    .ks-masthead .ks-masthead__availability, .ks-masthead .ks-masthead__actions { grid-column: auto; }
    .ks-masthead .ks-masthead__region { font-size: 1.125rem; }
    .ks-masthead .ks-masthead__hours { font-size: 1.5rem; }
    .ks-masthead .ks-masthead__cta-action { font-size: 1.125rem; }
    .ks-masthead .ks-masthead__cta-title { font-size: .875rem; }
    .ks-masthead .ks-masthead__actions--single { justify-self: end; }
}
/* One compact CTA design throughout mobile and tablet, regardless of column count. */
@media (max-width: 79.99rem) {
    .ks-masthead .ks-masthead__actions { grid-template-columns: minmax(0, 1fr); gap: 6px; max-width: none; }
    .ks-masthead .ks-masthead__actions--single { max-width: 380px; }
    .ks-masthead .ks-masthead__cta { display: grid; grid-template-columns: 53px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; row-gap: .0625rem; justify-self: center; width: 100%; min-height: 56px; padding-block: 8px; border-radius: 6px; text-align: start; }
    .ks-masthead .ks-masthead__cta--call { grid-column: auto; }
    .ks-masthead .ks-masthead__cta-title,
    .ks-masthead .ks-masthead__cta--call .ks-masthead__cta-title { grid-column: 2; grid-row: 1; align-self: end; justify-content: flex-start; min-height: 0; padding: 0 16px; background: transparent; font-size: .71875rem; font-weight: 500; line-height: 1.25; opacity: .9; }
    /* Flatten only the presentational span: the anchor keeps its link semantics. */
    .ks-masthead .ks-masthead__cta-action { display: contents; min-height: 0; padding: 0; font-size: 1rem; line-height: 1.3; }
    .ks-masthead .ks-masthead__cta-icon { grid-column: 1; grid-row: 1 / 3; align-self: stretch; box-sizing: border-box; width: 53px; height: auto; min-height: 28px; padding: 4px 16px; border-inline-end: 1px solid rgba(255, 255, 255, .24); }
    .ks-masthead .ks-masthead__cta-icon :is(svg, img) { width: 20px; height: 20px; }
    .ks-masthead .ks-masthead__cta-label { grid-column: 2; grid-row: 2; align-self: start; padding-inline: 16px; font-size: 1rem; font-weight: 700; line-height: 1.3; transform: none; }
    .ks-masthead .ks-masthead__cta--call .ks-masthead__cta-action { font-size: 1rem; }
}
/* Preserve all three actions in one row on wider tablets, without the compact width cap. */
@media (min-width: 60rem) and (max-width: 79.99rem) {
    .ks-masthead .ks-masthead__actions:not(.ks-masthead__actions--single) { grid-template-columns: repeat(3, minmax(235px, 1fr)); }
    .ks-masthead .ks-masthead__cta { min-width: min(235px, 100%); }
    .ks-masthead .ks-masthead__grid { grid-template-columns: 128px minmax(0, 1fr); }
    #header.ks-masthead .ks-masthead__brand { width: 128px; }
    .ks-masthead .ks-masthead__region { gap: 4px 6px; font-size: .75rem; line-height: 1.25; }
    .ks-masthead .ks-masthead__clock { padding-inline-start: 6px; }
    .ks-masthead .ks-masthead__hours { margin-top: 2px; font-size: .875rem; line-height: 1.25; }
}
/* Separate availability into its own column from 1050px, keeping room for three 235px cards. */
@media (min-width: 65.625rem) and (max-width: 79.99rem) {
    .ks-masthead .ks-masthead__grid { grid-template-columns: clamp(96px, calc(30vw - 205.5px), 176px) minmax(128px, 1fr) minmax(717px, 3fr); column-gap: 12px; }
    #header.ks-masthead .ks-masthead__brand { width: 100%; grid-row: auto; }
    .ks-masthead .ks-masthead__availability { grid-column: 2; }
    .ks-masthead .ks-masthead__actions { grid-column: 3; }
}
/* Slightly larger integrated cards where the wider tablet layout has more room. */
@media (min-width: 70rem) and (max-width: 79.99rem) {
    .ks-masthead .ks-masthead__cta { min-height: 64px; padding-block: 10px; }
    .ks-masthead .ks-masthead__cta-title,
    .ks-masthead .ks-masthead__cta--call .ks-masthead__cta-title { font-size: .78125rem; }
    .ks-masthead .ks-masthead__cta-label { font-size: 1.125rem; }
}
/* Keep cards proportionate in layouts with enough room for a separate logo column. */
@media (min-width: 30rem) and (max-width: 59.99rem) {
    .ks-masthead .ks-masthead__cta { width: 100%; max-width: 250px; justify-self: start; }
}
/* Keep availability directly above the actions; a tall spanning logo must not enlarge this gap. */
@media (max-width: 65.624rem) {
    #header.ks-masthead .ks-masthead__grid { row-gap: 8px; }
    #header.ks-masthead .ks-masthead__availability { align-self: end; }
    #header.ks-masthead .ks-masthead__actions { align-self: start; }
}
/* Fit the three actions by their available space. Stacked cards span every track. */
@media (max-width: 79.99rem) {
    .ks-masthead .ks-masthead__actions { container: ks-actions / inline-size; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ks-masthead .ks-masthead__actions .ks-masthead__cta { grid-column: 1 / -1; }

    /* Removing the 53px icon column lowers the card minimum from 235px to 182px. */
    @container ks-actions (min-width: 34.875rem) {
        .ks-masthead .ks-masthead__actions:not(.ks-masthead__actions--single) .ks-masthead__cta { grid-column: auto; grid-template-columns: minmax(0, 1fr); min-width: 182px; max-width: none; }
        .ks-masthead .ks-masthead__actions:not(.ks-masthead__actions--single) .ks-masthead__cta-icon { display: none; }
        .ks-masthead .ks-masthead__actions:not(.ks-masthead__actions--single) .ks-masthead__cta-title,
        .ks-masthead .ks-masthead__actions:not(.ks-masthead__actions--single) .ks-masthead__cta-label { grid-column: 1; }
    }

    /* Three 235px cards plus two 6px gaps restore the full icon treatment. */
    @container ks-actions (min-width: 44.8125rem) {
        .ks-masthead .ks-masthead__actions:not(.ks-masthead__actions--single) .ks-masthead__cta { grid-template-columns: 53px minmax(0, 1fr); min-width: 235px; }
        .ks-masthead .ks-masthead__actions:not(.ks-masthead__actions--single) .ks-masthead__cta-icon { display: grid; }
        .ks-masthead .ks-masthead__actions:not(.ks-masthead__actions--single) .ks-masthead__cta-title,
        .ks-masthead .ks-masthead__actions:not(.ks-masthead__actions--single) .ks-masthead__cta-label { grid-column: 2; }
    }
}
@media (prefers-reduced-motion: reduce) { .ks-masthead .ks-masthead__cta { transition: none !important; } }
@media (forced-colors: active) { .ks-masthead .ks-masthead__cta { border: 1px solid ButtonText; } .ks-masthead a:focus-visible { outline-color: Highlight !important; } }