/* ==========================================================================
   Dynamic top navigation (App_Code/TopNavigation.cs)
   Only loaded when the dynamic menu is on. Everything is scoped to .dtn and
   does not rely on the site's navbar / mega-menu styles.

   Desktop  (>= 1200px): tab bar, dropdown of squares (max 4 per row) on hover,
                         keyboard focus or the toggle button.
   Tablet   (768-1199px): inside the header menu button, accordion, 4 per row.
   Phone    (< 768px):   accordion, 2 per row (1 on very small screens).
   ========================================================================== */

.dtn {
    --dtn-teal: #007a91;          /* 4.9:1 with white */
    --dtn-teal-dark: #005f73;
    --dtn-other: #111820;
    --dtn-other-text: #19a7c4;    /* 5.9:1 on #111820 */
    --dtn-text: #1f2937;
    --dtn-muted: #4b5563;
    --dtn-tab-text: #5f6368;
    --dtn-border: #dcdfe3;
    --dtn-card-width: 176px;
    --dtn-gap: 12px;
    clear: both;                  /* start below the floated logo / search row of the header */
    position: relative;
    z-index: 100;                 /* above page banners / carousel controls that overlap the header */
    width: 100%;
    font-family: inherit;
    text-align: left;
}

.dtn ul,
.dtn li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dtn a {
    text-decoration: none;
}

.dtn img {
    border: 0;
}

.dtn-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- top items ---------- */

.dtn-top {
    position: relative;
    display: flex;
    align-items: stretch;
}

.dtn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.dtn-link-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 24px;
}

.dtn-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.dtn-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.dtn-toggle[aria-expanded="true"] .dtn-chevron {
    margin-top: 4px;
    transform: rotate(-135deg);
}

/* ---------- dropdown ---------- */

.dtn-panel {
    display: none;
}

.dtn-panel-intro {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--dtn-muted);
    text-transform: none;
    letter-spacing: 0;
}

.dtn-grid {
    display: grid;
    gap: var(--dtn-gap);
}

.dtn-grid-item {
    display: flex;
    min-width: 0;
}

.dtn-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--dtn-border);
    border-radius: 6px;
    color: var(--dtn-text);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.dtn-card:hover,
.dtn-card:focus-visible {
    border-color: var(--dtn-teal);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
    color: var(--dtn-text);
    text-decoration: none;
}

.dtn .dtn-card:focus-visible {
    outline: 3px solid var(--dtn-teal-dark);
    outline-offset: 2px;
}

.dtn-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    max-width: 100%;
    height: 100px;
    flex: 0 0 auto;
}

.dtn-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dtn-name {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dtn-text);
}

.dtn-card:hover .dtn-name,
.dtn-card:focus-visible .dtn-name {
    color: var(--dtn-teal-dark);
}

.dtn-desc {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--dtn-muted);
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1200px) {

    .dtn-bar {
        display: flex;
        padding-top: 40px;
    }

    .dtn-item {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
    }

    .dtn-item--mobile {
        display: none;
    }

    .dtn-link {
        height: 50px;
        padding: 0 6px;
        background: #fff;
        border: 1px solid #ccc;
        border-bottom: 0;
        border-radius: 5px 5px 0 0;
        color: var(--dtn-tab-text);
    }

    .dtn-link:hover,
    .dtn-link:focus-visible,
    .dtn-item--has-panel:hover .dtn-link,
    .dtn-item--open .dtn-link {
        color: var(--dtn-teal);
        background: #f3f9fb;
    }

    .dtn .dtn-link:focus-visible {
        outline: 3px solid var(--dtn-teal-dark);
        outline-offset: -3px;
    }

    .dtn-link--current {
        color: var(--dtn-teal);
        font-weight: 700;
    }

    .dtn .dtn-link--section,
    .dtn .dtn-item:hover .dtn-link--section {
        background: var(--dtn-teal);
        border-color: var(--dtn-teal);
        color: #fff;
        font-weight: 700;
    }

    .dtn .dtn-link--other-section,
    .dtn .dtn-item:hover .dtn-link--other-section {
        background: var(--dtn-other);
        border-color: var(--dtn-other);
        color: var(--dtn-other-text);
        font-weight: 700;
    }

    .dtn .dtn-link--section:focus-visible,
    .dtn .dtn-link--other-section:focus-visible {
        outline-color: #fff;
    }

    /* keyboard only: the toggle shows in the corner of the tab when it has focus */
    .dtn-toggle {
        position: absolute;
        right: 3px;
        bottom: 3px;
        width: 24px;
        height: 24px;
        border-radius: 4px;
        background: #fff;
        color: var(--dtn-teal-dark);
        clip-path: inset(50%);
    }

    .dtn-toggle:focus {
        clip-path: none;
        outline: 2px solid var(--dtn-teal-dark);
        outline-offset: 0;
    }

    /* hovered item on top, so its dropdown covers one that is still closing */
    .dtn-item:hover,
    .dtn-item:focus-within,
    .dtn-item--open {
        z-index: 2;
    }

    /* Hidden with visibility (not display) so closing can wait 250ms: the pointer can cut across a
       neighbouring tab on its way into the dropdown without it snapping shut. Hidden items are still
       skipped by Tab and screen readers. */
    .dtn-panel {
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: opacity .12s ease .25s, visibility 0s linear .37s;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        width: max-content;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--dtn-border);
        border-radius: 0 6px 6px 6px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    }

    .dtn-panel--right {
        left: auto;
        right: 0;
        border-radius: 6px 0 6px 6px;
    }

    /* line up with the start of the bar: --dtn-index tabs back (tabs are equal width, so one tab is 100% of this item) */
    .dtn-panel--bar {
        left: calc(var(--dtn-index, 0) * -100%);
        border-radius: 6px;
    }

    .dtn-item--has-panel:hover .dtn-panel,
    .dtn-item--has-panel:focus-within .dtn-panel,
    .dtn-item--open .dtn-panel {
        visibility: visible;
        opacity: 1;
        transition: opacity .12s ease 0s, visibility 0s linear 0s;
    }

    /* Moving along the bar swaps dropdowns straight away, so two are never on screen at once.
       The grace period is only for the pointer leaving the bar altogether. */
    .dtn-bar:hover .dtn-item:not(:hover) .dtn-panel,

    /* keyboard and clicks close at once, only the pointer gets the grace period */
    .dtn-item--has-panel:focus-within:not(:hover) .dtn-panel,
    .dtn .dtn-item.dtn-item--suppressed .dtn-panel {
        transition: none;
    }

    /* Escape closes the dropdown even while the pointer or focus is still on it */
    .dtn .dtn-item.dtn-item--suppressed .dtn-panel {
        visibility: hidden;
        opacity: 0;
    }

    /* squares per row, set per menu item in the CMS */
    .dtn-grid--1 { grid-template-columns: repeat(1, var(--dtn-card-width)); }
    .dtn-grid--2 { grid-template-columns: repeat(2, var(--dtn-card-width)); }
    .dtn-grid--3 { grid-template-columns: repeat(3, var(--dtn-card-width)); }
    .dtn-grid--4 { grid-template-columns: repeat(4, var(--dtn-card-width)); }
    .dtn-grid--5 { grid-template-columns: repeat(5, var(--dtn-card-width)); }
    .dtn-grid--6 { grid-template-columns: repeat(6, var(--dtn-card-width)); }

    .dtn-panel-intro {
        max-width: calc(6 * var(--dtn-card-width));
    }
}

/* ==========================================================================
   Tablet and phone (the header's menu button opens this)
   ========================================================================== */

@media (max-width: 1199px) {

    .dtn {
        background: #006f85;        /* white text 5.9:1 */
    }

    .dtn-item {
        border-bottom: 1px solid rgba(255, 255, 255, .28);
    }

    .dtn-item:last-child {
        border-bottom: 0;
    }

    .dtn-link {
        justify-content: flex-start;
        min-height: 48px;
        padding: 12px 16px;
        color: #fff;
        font-size: 14px;
        text-align: left;
    }

    .dtn-link:hover,
    .dtn-link:focus {
        color: #fff;
        background: rgba(0, 0, 0, .15);
    }

    .dtn .dtn-link:focus-visible,
    .dtn .dtn-toggle:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -3px;
    }

    .dtn-link--section,
    .dtn-link--current {
        font-weight: 700;
    }

    .dtn-link--other-section {
        font-weight: 700;
        background: var(--dtn-other);
    }

    .dtn-link-image {
        max-height: 26px;
        padding: 4px 8px;
        background: #fff;
        border-radius: 4px;
    }

    .dtn-toggle {
        flex: 0 0 52px;
        min-height: 48px;
        color: #fff;
        border-left: 1px solid rgba(255, 255, 255, .28);
    }

    .dtn-toggle:hover {
        background: rgba(0, 0, 0, .15);
    }

    .dtn-item--open .dtn-panel {
        display: block;
    }

    .dtn-panel {
        padding: 12px;
        background: #f4f7f8;
    }

    /* tablets have room for up to 4 across, whatever the menu item asks for */
    .dtn-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dtn-grid--1 { grid-template-columns: minmax(0, 1fr); }
    .dtn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dtn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {

    /* phones fit 2 across, unless the menu item asks for a single column */
    .dtn-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dtn-grid--1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .dtn-card {
        padding: 10px 8px;
    }
}

@media (max-width: 359px) {

    .dtn-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Stage 3: sub categories on a top menu item's own page
   (TopNavigation.render_landing, placed below the slider / breadcrumbs).
   Larger squares that wrap and centre on any screen width.
   ========================================================================== */

.dtn-landing {
    clear: both;
    margin: 20px 0 30px 0;
    font-family: inherit;
}

/* on category pages the surrounding container has no padding of its own */
.dtn-landing--inset {
    padding: 0 15px;
}

/* Every card the same width, rows start on the left and a short last row simply leaves space on the right.
   The number across comes from Squares per row in the CMS, the same setting the dropdown uses. This rule is
   the fallback for anything rendered without that class - as many 200px+ columns as fit. */
.dtn-landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Squares per row, set per menu item in the CMS. A column is never wider than 320px, so a page set to one or
   two across gets properly sized squares packed to the left rather than a couple of enormous ones, and never
   narrower than the space allows, so six across still fits the page instead of running off it.
   These are scoped to wide screens only, so the phone and tablet rules further down still decide there. */
@media (min-width: 992px) {

    .dtn-landing-grid--1 { grid-template-columns: repeat(1, minmax(0, 320px)); }
    .dtn-landing-grid--2 { grid-template-columns: repeat(2, minmax(0, 320px)); }
    .dtn-landing-grid--3 { grid-template-columns: repeat(3, minmax(0, 320px)); }
    .dtn-landing-grid--4 { grid-template-columns: repeat(4, minmax(0, 320px)); }
    .dtn-landing-grid--5 { grid-template-columns: repeat(5, minmax(0, 320px)); }
    .dtn-landing-grid--6 { grid-template-columns: repeat(6, minmax(0, 320px)); }

    .dtn-landing-grid { justify-content: start; }
}

/* tablets have room for three at most, however many the CMS asks for */
@media (min-width: 768px) and (max-width: 991px) {

    .dtn-landing-grid--1 { grid-template-columns: repeat(1, minmax(0, 320px)); }
    .dtn-landing-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dtn-landing-grid--3,
    .dtn-landing-grid--4,
    .dtn-landing-grid--5,
    .dtn-landing-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dtn-landing-item {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dtn-landing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 16px 14px 18px 14px;
    background: #fff;
    border: 1px solid #dcdfe3;
    border-radius: 8px;
    color: #1f2937;
    text-align: center;
    text-decoration: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.dtn-landing-card:hover,
.dtn-landing-card:focus-visible {
    border-color: #007a91;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
    color: #1f2937;
    text-decoration: none;
}

.dtn-landing .dtn-landing-card:focus-visible {
    outline: 3px solid #005f73;
    outline-offset: 2px;
}

.dtn-landing-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
}

.dtn-landing-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
}

.dtn-landing-name {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2937;
    text-transform: none;
    letter-spacing: 0;
}

.dtn-landing-card:hover .dtn-landing-name,
.dtn-landing-card:focus-visible .dtn-landing-name {
    color: #005f73;
}

.dtn-landing-desc {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: #4b5563;
    text-transform: none;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

/* phones: two across, then one on very small screens */
@media (max-width: 767px) {

    .dtn-landing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dtn-landing-card {
        padding: 12px 8px 14px 8px;
    }

    .dtn-landing-name {
        font-size: 14px;
    }
}

@media (max-width: 359px) {

    .dtn-landing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {

    .dtn-card,
    .dtn-chevron,
    .dtn-landing-card {
        transition: none;
    }

    .dtn-card:hover,
    .dtn-card:focus-visible,
    .dtn-landing-card:hover,
    .dtn-landing-card:focus-visible {
        transform: none;
    }
}