.help-support-callout {
    font-size: 18px;
    line-height: 29px;
}

/* a:box has no border/cornerRadius attribute and widthNamed has no full-width value
 * (ceiling is ExtraLarge), so this overrides AUI's box border and width directly.
 */
.help-support-callout-box {
    border: none;
    border-radius: 0;
    width: 100%;
}

.faq-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
    column-gap: 2%;
    align-items: stretch;
}

.faq-card-grid-single {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 10px;
    align-items: stretch;
}

/* Prevents a long unbroken word from forcing its grid track wider than the column,
 * which would break the equal-height row stretch above.
 */
.faq-card {
    min-width: 0;
}

/* a:text renders its own <span class="a-color-base"> with an explicit, non-inherited
 * color that otherwise wins over the color set here. AUI's own .a-color-base rule
 * ships color: #0f1111 !important, so the override below needs !important too,
 * regardless of selector specificity.
 */
.faq-category-selected {
    background-color: #1F2A36;
    color: #FFFFFF;
}

.faq-category-selected .a-color-base {
    color: #FFFFFF !important;
}

/* a:link and a:listItem expose no padding attribute in AUI 3.0, so custom CSS is
 * required for the rail item padding and hover affordance below.
 */
.faq-category-link {
    display: block;
    padding: 12px 8px 12px 20px;
}

/* :not() excludes the selected row so hover never overrides its #1F2A36 fill with gray. */
.faq-category-link:hover:not(.faq-category-selected) {
    background-color: #F0F0F0;
}

/* The callout contact anchor is a raw <a>, not an a:link, so it inherits no AUI
 * link styling; these match AUI's link teal and hover rust.
 */
.help-support-contact-link {
    color: #007185;
    text-decoration: none;
    cursor: pointer;
}

.help-support-contact-link:hover {
    color: #C7511F;
    text-decoration: underline;
}

/* The dialog uses the native `hidden` attribute (same toggle pattern as the
 * category panels). The [hidden] selector outweighs the base display:flex below,
 * so the dialog stays hidden until the trigger clears the attribute.
 */
.help-support-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.help-support-modal[hidden] {
    display: none;
}

.help-support-modal-dialog {
    width: 560px;
    max-width: 90%;
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.help-support-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background-color: #F0F2F2;
    border-bottom: 1px solid #D5D9D9;
}

.help-support-modal-title {
    font-size: 18px;
    font-weight: 700;
}

/* AUI exposes no bordered icon-button, so the close control is styled directly. */
.help-support-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 22px;
    font-weight: 700;
    color: #0F1111;
    background-color: #FFFFFF;
    border: 1px solid #D5D9D9;
    border-radius: 4px;
    cursor: pointer;
}

.help-support-modal-close:hover {
    background-color: #E3E6E6;
    border-color: #8D9096;
}

.help-support-modal-body {
    padding: 24px 20px 28px;
}

.help-support-modal-text {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 20px;
    color: #565959;
}

.help-support-modal-phone {
    font-size: 30px;
    font-weight: 700;
}

.help-support-modal-phone a {
    color: #007185;
    text-decoration: none;
}

.help-support-modal-phone a:hover {
    color: #C7511F;
}

.help-support-modal-hours {
    margin-top: 8px;
    font-size: 13px;
    color: #565959;
}

/* The base layout renders the content slot as a growing flex column only when the
 * controller sets fillContentSlot, which HelpController does for desktop only. The rule
 * below lives here rather than in the site-wide catalog.css so no other page's content
 * root becomes a flex item: a column flex container sizes its item to max-content on the
 * cross axis, which stops a horizontal scroller (mobile PDP swatch and size lists) from
 * clipping and blows the page past the viewport width.
 */
.help-content-slot {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* The page fills its layout content slot and pushes the support callout to the
 * bottom via margin-top:auto, so on tall desktop viewports the callout sits near
 * the footer instead of floating up beneath short category content.
 * Depends on the content slot being a growing flex column (see .help-content-slot
 * above). Desktop only; mobile keeps the callout inline.
 */
.help-faqs-page {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* Pins the callout to the bottom of the filled page on short viewports. Must be a
 * plain (non-AUI) element: AUI's a:section utilities set margin-top !important and
 * would otherwise win. The gap above it comes from the inner a:section spacingTop.
 */
.help-support-callout-section {
    margin-top: auto;
}