/* ============================================================
   Block Grid layout — backoffice editor + frontend
   ============================================================
   Loaded two ways:
   1. Backoffice: Block Grid "LayoutStylesheet" (Home Page grids).
      Umbraco renders .umb-block-grid__* markup, so the editor rules
      below must stay — remove them and every block goes full width
      and resize/reposition stops working.
   2. Frontend: _Layout.cshtml. The Content Layout block renders its
      own .cl-* classes (lower down), styled here too. */

/* ---- Editor grid (.umb-block-grid__*, rendered by Umbraco) ---- */
.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    -moz-column-gap: var(--umb-block-grid--column-gap, 0);
    column-gap: var(--umb-block-grid--column-gap, 0);
    row-gap: var(--umb-block-grid--row-gap, 0);
}

.umb-block-grid__layout-item {
    position: relative;
    grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
    display: flex;
    flex-direction: column;
    justify-content: var(--layout-flex-align, stretch);
}

.umb-block-grid__area-container,
.umb-block-grid__block--view::part(area-container) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    --mob-gap-col: min(calc(var(--layout-gap-col, 24) * 0.5 * 1px), 16px);
    --mob-gap-row: min(calc(var(--layout-gap-row, 24) * 0.5 * 1px), 16px);
    --umb-block-grid--areas-column-gap: var(--mob-gap-col);
    --umb-block-grid--areas-row-gap: var(--mob-gap-row);
    column-gap: var(--umb-block-grid--areas-column-gap);
    row-gap: var(--umb-block-grid--areas-row-gap);
    padding-top: calc(var(--layout-pad-top, 0) * 0.5 * 1px);
    padding-bottom: calc(var(--layout-pad-bottom, 0) * 0.5 * 1px);
    padding-left: calc(var(--layout-pad-left, 0) * 0.5 * 1px);
    padding-right: calc(var(--layout-pad-right, 0) * 0.5 * 1px);
}

@media (min-width: 1024px) {
    .umb-block-grid__area-container,
    .umb-block-grid__block--view::part(area-container) {
        --umb-block-grid--areas-column-gap: calc(var(--layout-gap-col, 24) * 1px);
        --umb-block-grid--areas-row-gap: calc(var(--layout-gap-row, 24) * 1px);
        padding-top: calc(var(--layout-pad-top, 0) * 1px);
        padding-bottom: calc(var(--layout-pad-bottom, 0) * 1px);
        padding-left: calc(var(--layout-pad-left, 0) * 1px);
        padding-right: calc(var(--layout-pad-right, 0) * 1px);
    }
}

.umb-block-grid__area {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
    grid-row: span var(--umb-block-grid--area-row-span, 1);
}

@media (min-width: 1024px) {
    .umb-block-grid__layout-item {
        grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
    }
    .umb-block-grid__area {
        grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
    }
}

/* ---- Content Layout (.cl-*, frontend only) ---- */

/* Keep page-header imagery at a consistent depth and favour the upper part of
   wide photographs so faces are not cropped out on shallower viewports. This
   only applies when a Content Section is the first CMS block on the page. */
.hero-carousel-background {
    background-position: center top;
}

/* Brand/tyre category banners: centre the logo graphic vertically too (homepage
   carousel keeps its top anchor). */
.hero-carousel-background--centered {
    background-position: center center;
}

.js-mainContent > .umb-block-grid__layout-item:first-child[data-content-element-type-alias="contentSection"] > .content-section--has-background {
    background-position: center top;
    display: flex;
    align-items: center;
    min-height: 18rem;
}

.js-mainContent > .umb-block-grid__layout-item:first-child[data-content-element-type-alias="contentSection"] > .content-section--has-background > div:last-child {
    width: 100%;
}

@media (min-width: 768px) {
    .js-mainContent > .umb-block-grid__layout-item:first-child[data-content-element-type-alias="contentSection"] > .content-section--has-background {
        min-height: 22.5rem;
    }
}

/* A Content Layout is a container that sizes to its own content; drop the
   generic h-full so it never collapses inside an auto-height parent. */
.umb-block-grid__layout-item:has(> .cl-container),
.umb-block-grid__layout-item:has(> .cl-flex-area) {
    height: auto;
}

.cl-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: calc(var(--cl-gap-row, 24) * 1px) calc(var(--cl-gap-col, 24) * 1px);
    padding:
        calc(var(--cl-pad-top, 0) * 1px)
        calc(var(--cl-pad-right, 0) * 1px)
        calc(var(--cl-pad-bottom, 0) * 1px)
        calc(var(--cl-pad-left, 0) * 1px);
}

@media (max-width: 1023px) {
    .cl-container {
        gap: calc(var(--cl-gap-row, 24) * 0.5px) calc(var(--cl-gap-col, 24) * 0.5px);
        padding:
            calc(var(--cl-pad-top, 0) * 0.5px)
            calc(var(--cl-pad-right, 0) * 0.5px)
            calc(var(--cl-pad-bottom, 0) * 0.5px)
            calc(var(--cl-pad-left, 0) * 0.5px);
    }
}

.cl-area {
    display: grid;
    grid-column: span var(--cl-cols, 12);
    grid-row: span var(--cl-row-span, 1);
    grid-template-columns: repeat(var(--cl-cols, 12), 1fr);
    grid-auto-rows: var(--cl-row-track, min-content);
    gap: inherit;
}

/* A nested contentLayout must not inherit the parent row track: custom properties cascade,
   so without this reset each nested child row would repeat the parent's min-height. */
.cl-area .cl-area {
    --cl-row-track: initial;
    --cl-mobile-min-h: initial;
    --cl-row-max-height: initial;
}

.cl-area .umb-block-grid__layout-item {
    grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--cl-cols, 12));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
    justify-content: var(--cl-items-align, normal);
    justify-self: stretch;
    align-items: var(--cl-justify-content, stretch);
    align-self: stretch;
    max-height: calc(var(--umb-block-grid--item-row-span, 1) * var(--cl-row-track) + (var(--umb-block-grid--item-row-span, 1) - 1) * var(--cl-gap-row, 24) * 1px);
}

@media (max-width: 1023px) {
    .cl-area {
        display: flex;
        flex-direction: column;
        align-items: var(--cl-items-align, stretch);
    }
    .cl-area .umb-block-grid__layout-item {
        grid-column-end: auto;
        width: 100%;
        min-height: var(--cl-mobile-min-h);
        max-height: var(--cl-row-max-height, none);
    }
}

.cl-flex-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--cl-justify-content, space-between);
    align-items: var(--cl-items-align, stretch);
    gap: calc(var(--cl-gap-row, 24) * 1px) calc(var(--cl-gap-col, 24) * 1px);
    padding:
        calc(var(--cl-pad-top, 0) * 1px)
        calc(var(--cl-pad-right, 0) * 1px)
        calc(var(--cl-pad-bottom, 0) * 1px)
        calc(var(--cl-pad-left, 0) * 1px);
}

@media (max-width: 1023px) {
    .cl-flex-area {
        gap: calc(var(--cl-gap-row, 24) * 0.5px) calc(var(--cl-gap-col, 24) * 0.5px);
        padding:
            calc(var(--cl-pad-top, 0) * 0.5px)
            calc(var(--cl-pad-right, 0) * 0.5px)
            calc(var(--cl-pad-bottom, 0) * 0.5px)
            calc(var(--cl-pad-left, 0) * 0.5px);
    }
}

.cl-flex-item {
    flex: 0 0 var(--cl-flex-basis, auto);
    max-height: var(--cl-row-max-height, none);
    min-width: 0;
}

/* Tyre Size video: the CMS rich-text wrapper normally limits prose to a text
   measure. This media block intentionally uses the full content-container
   width, with its caption beneath and no decorative frame. */
.content-section:has(.tyre-size-video) .richtext.prose {
    max-width: none;
}

.tyre-size-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
}

.tyre-size-video video {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.tyre-size-video-caption {
    margin: 0.75rem 0 0;
    color: #141414;
    text-align: center;
    font-family: "Gotham Book", sans-serif;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* About Us imagery only: match the approved history treatment without
   changing shared image blocks elsewhere on the site. */
.about-us-framed-image {
    box-sizing: border-box;
    border: 2px solid #ffc175;
    /* The image is h-full object-contain inside a tall timeline cell, so the border
       used to wrap the full-height box with navy gaps. height:auto makes the box match
       the image so the gold frame wraps the picture. The cell is flex-col, so
       align-self only centres horizontally; margin:auto centres the framed box on
       both axes, sitting it level with the adjacent text rather than at the top. */
    height: auto;
    margin: auto;
    align-self: center;
}

/* Tyre Size guide: match the approved white content section and its compact
   navy/grey numbered cards. The green illustration and note are deliberately
   scoped to their CMS marker so other image and accordion blocks are unchanged. */
.content-section:has(.tyre-size-example-note) img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.tyre-size-example-note {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.7rem 1rem;
    border-radius: 0;
    background: #00003b;
    color: #fff;
    text-align: center;
    font-family: "Gotham Book", sans-serif;
    font-size: 0.8rem;
    line-height: 1.3;
}

.tyre-size-number-accordion > div > .tyre-size-accordion-card {
    border-radius: 0.5rem;
    background: #e9eaec;
    color: #00003b;
    transition: background-color 180ms ease, color 180ms ease;
}

.tyre-size-number-accordion > div > .tyre-size-accordion-card[data-open="true"] {
    background: #00003b;
    color: #fff;
}

.tyre-size-number-accordion .tyre-size-accordion-number {
    background: #fff;
    color: #00003b;
}

.tyre-size-number-accordion .tyre-size-accordion-copy {
    padding-top: 0.65rem;
    line-height: 1.35;
}

.tyre-size-number-accordion .tyre-size-accordion-copy p {
    margin: 0;
}

.faq-accordion-row {
    border-bottom: 1px solid rgb(255 255 255 / 30%);
}

.faq-accordion-row:last-child {
    border-bottom: 0;
}

/* Tyre Size closing CTA: keep the CMS text and button blocks structured while
   presenting them as one centred call to action, matching the approved page. */
.tyre-size-cta-heading,
.tyre-size-cta-copy {
    display: block;
    text-align: left;
}

.content-section:has(.tyre-size-cta-heading) .cl-area > .umb-block-grid__layout-item {
    align-items: flex-start;
}

.content-section:has(.tyre-size-cta-heading) .cl-area > .umb-block-grid__layout-item > a {
    align-self: flex-start;
}

@media (min-width: 1024px) {
    .content-section:has(.tyre-size-cta-heading) .cl-area > .umb-block-grid__layout-item:nth-child(2) > a {
        align-self: flex-start;
    }

    .content-section:has(.tyre-size-cta-heading) .cl-area > .umb-block-grid__layout-item:nth-child(3) > a {
        align-self: flex-start;
    }
}

/* Keep the Shop Our Brands sequence in equal, predictable logo slots
   without changing ordinary Content Layout rows. */
.cl-brand-logo-row {
    display: grid;
    width: 100%;
    max-width: 110rem;
    margin-inline: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

.cl-brand-logo-row .cl-flex-item {
    display: flex;
    grid-column: span 2;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
}

.cl-brand-logo-row img {
    display: block;
    width: min(100%, var(--brand-artwork-width, 280px));
    height: auto;
    max-height: 5rem;
    object-fit: contain;
    margin: 0;
    border-radius: 0;
}

.cl-brand-logo-row:has(> .cl-flex-item:nth-child(5):last-child) > .cl-flex-item:last-child {
    grid-column: 2 / span 2;
}

@media (min-width: 640px) {
    .cl-brand-logo-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 2rem 1.5rem;
    }

    .cl-brand-logo-row:has(> .cl-flex-item:nth-child(5):last-child) > .cl-flex-item:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .cl-brand-logo-row:has(> .cl-flex-item:nth-child(5):last-child) > .cl-flex-item:last-child {
        grid-column: 4 / span 2;
    }
}

@media (min-width: 1024px) {
    .cl-brand-logo-row {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 2.5rem 2rem;
    }

    .cl-brand-logo-row:has(> .cl-flex-item:nth-child(5):last-child) > .cl-flex-item:first-child {
        grid-column: 2 / span 2;
    }

    .cl-brand-logo-row:has(> .cl-flex-item:nth-child(5):last-child) > .cl-flex-item:nth-child(4),
    .cl-brand-logo-row:has(> .cl-flex-item:nth-child(5):last-child) > .cl-flex-item:last-child {
        grid-column: auto / span 2;
    }
}

/* ---- Device visibility (owned by the Content Layout via data-only-show-on) ---- */
.cl-container[data-only-show-on],
.cl-flex-area[data-only-show-on] {
    display: none;
}

@media (max-width: 767px) {
    .cl-container[data-only-show-on*="mobile"] { display: grid; }
    .cl-flex-area[data-only-show-on*="mobile"] { display: flex; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cl-container[data-only-show-on*="tablet"] { display: grid; }
    .cl-flex-area[data-only-show-on*="tablet"] { display: flex; }
}

@media (min-width: 1024px) {
    .cl-container[data-only-show-on*="desktop"] { display: grid; }
    .cl-flex-area[data-only-show-on*="desktop"] { display: flex; }
}

/* Enquiry-form selects: the legacy select reset (app.critical.dev.css) strips the border,
   radius and native arrow; restore an input-matching box with a chevron. */
select.enquiry-select {
    border: 1px solid #cdcecf;
    border-radius: 0.375rem;
    background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2300003B%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") no-repeat right 0.75rem center / 1rem 1rem;
    padding-right: 2.5rem;
}

/* A clamped row (rowMaxHeight set) must crop overflowing fill images: clip the cell and
   centre its content so the visible band is the middle of the image (equal top/bottom crop). */
.cl-area[style*="--cl-row-max-height"] > .umb-block-grid__layout-item {
    overflow: hidden;
    justify-content: center;
}

/* Rich text blocks beside images must align to the top of the cell: the first heading
   keeps its bottom spacing but drops the top margin that pushed the whole column down. */
.richtext > :is(h1, h2, h3, h4):first-child,
.richtext > div > :is(h1, h2, h3, h4):first-child {
    margin-top: 0;
}

/* Button rows: equal-width buttons sized by the widest label; stacks full-width on phones. */
.cl-flex-area:has(> .cl-flex-item > a) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: max-content;
    max-width: 100%;
}
.cl-flex-area:has(> .cl-flex-item > a) > .cl-flex-item > a {
    display: flex;
    justify-content: center;
    width: 100%;
}
@media (max-width: 639px) {
    .cl-flex-area:has(> .cl-flex-item > a) {
        display: flex;
        flex-wrap: wrap;
        width: auto;
    }
    .cl-flex-area:has(> .cl-flex-item > a) > .cl-flex-item {
        width: 100%;
    }
}

/* Fitting date picker (SNAG): replace the vendored fengyuanchen white/grey defaults
   with brand colours - navy text, no grey day fills - keeping the green available/
   selected accent. Scoped to the fitting datepicker only. */
.js-datepickerContainer .datepicker-container {
    background-color: #f0fdf4;
}
.js-datepickerContainer .datepicker-panel > ul > li,
.js-datepickerContainer .datepicker-panel > ul > li[data-view^="day"] {
    background-color: transparent;
    color: #00003B;
}
.js-datepickerContainer .datepicker-panel > ul > li[data-view^="day"]:not(.disabled):hover {
    background-color: #3abd35;
    color: #ffffff;
}
.js-datepickerContainer .datepicker-panel > ul > li.muted,
.js-datepickerContainer .datepicker-panel > ul > li.muted:hover {
    color: rgba(0, 0, 59, 0.3);
}
.js-datepickerContainer .datepicker-panel > ul > li[data-view^="day"].disabled,
.js-datepickerContainer .datepicker-panel > ul > li[data-view^="day"].disabled:hover,
.js-datepickerContainer .datepicker-panel > ul > li.disabled,
.js-datepickerContainer .datepicker-panel > ul > li.disabled:hover {
    background-color: transparent;
    color: rgba(0, 0, 59, 0.28);
    cursor: default;
}
.js-datepickerContainer .datepicker-panel > ul > li.picked {
    background-color: #3abd35;
    color: #ffffff;
}
.js-datepickerContainer .datepicker-panel > ul > li[data-view*="current"] {
    color: #00003B;
}

/* SNAG-68: the site header is fixed, so in-page anchors (e.g. /wholesale-tyres/#trade-enquiry) would land
   underneath it. --header-height is kept in sync with the rendered header by _Layout.cshtml. */
html {
    scroll-padding-top: calc(var(--header-height, 72px) + 3px);
}

/* SNAG-69: jQuery Validate re-checks the field being left on the mousedown that lands on Proceed. Its message
   appearing or disappearing shifted the button by a line before mouseup, so the first click was lost.
   Reserving the message line keeps the checkout forms static. */
#billingDetails [data-valmsg-for],
#frmFittingDate [data-valmsg-for],
#frmDateTimeSelectFittingDate [data-valmsg-for] {
    display: block;
    min-height: 1.25rem;
}