/*
 * /account/contactus — TECH-5722
 *
 * Same palette as help.css and as shop_1.2.css; nothing new is introduced.
 *   #000 #333 #5d5d5d #60605c  ink
 *   #cacaca #e5e5e5            rules
 *   #ab0000                    accent, sparingly
 *
 * Per-page stylesheet, which is how the shop already does it (sizeguide.css, checkout.css).
 *
 * TWO THINGS THIS PAGE DELIBERATELY NO LONGER USES.
 *
 * Account/Wrap — it exists to put the shared account menu beside a content column, and on this page
 * that menu offered ヘルプ and お問い合わせ, the second being the page you are already on. Both are
 * reachable from the footer and from the body of this page.
 *
 * .memberdesk — the shop styles it as a grey slab (background:#e5e5e5) and hangs an @ icon off
 * .memberdesk .email (background-image: contact/email.png, padding-left:45px). The class is gone
 * from the markup, so both go with it. Do not reintroduce it to "get the card back": the card here
 * is a hairline border, matching .help-desk on the help page.
 */

.contact-wrap {
    box-sizing: border-box;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1em;
}

/* ---------- page title lines up with the shop's left menu ---------- */
/*
 * The first item of the global left menu (SALES :) sits this far below the top of #main:
 *     aside#desktop-side-menu {padding-top}  +  aside#desktop-side-menu nav ul li {margin-top}
 * and BOTH are precompiled px that differ per breakpoint bundle. TemplateBase.tml serves
 * smallScreen.css / mediumScreen.css / shop_1.2.css at max-width:1328 / 1329-1490 / min-width:1491,
 * and the sum is 31.1 / 38.6 / 42.1px respectively.
 *
 * There is no em basis to borrow. What changes per band is the ASIDE's font-size (10.56 / 13.10 /
 * 14.29px) while this column stays 14px at every width, so an em value here would not track. Hence
 * the offset is restated once per band against the shop's OWN breakpoints - change one and the
 * other must change with it.
 *
 * The extra ~2-3px over the raw sum aligns the two text boxes rather than the two border boxes:
 * the h1 is 22px/28px and the menu item 10-13.5px, so their half-leading differs.
 *
 * Below 1151px the menu is off-canvas (position:fixed, left:-186px) - there is nothing to line up
 * with, so no padding is added there.
 */
@media (min-width: 1151px) {
    .contact-wrap {
        padding-top: 33px;
    }
}

@media (min-width: 1329px) {
    .contact-wrap {
        padding-top: 41px;
    }
}

@media (min-width: 1491px) {
    .contact-wrap {
        padding-top: 45px;
    }
}

/* ---------- look here first ---------- */
.contact-first {
    margin: 0 0 36px;
    padding: 20px 22px;
    border: 1px solid #cacaca;
}

.contact-first--title {
    margin: 0 0 6px;
    color: #000;
    font-size: 14px;
    font-weight: bold;
}

.contact-first--lede {
    margin: 0 0 14px;
    color: #5d5d5d;
    font-size: 13px;
    line-height: 1.8;
}

.contact-first--lede a {
    color: #000;
}

.contact-first--links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-first--links li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-first--links a {
    display: block;
    padding: 5px 14px;
    border: 1px solid #cacaca;
    border-radius: 999px;
    color: #333;
    font-size: 12.5px;
    text-decoration: none;
}

.contact-first--links a:hover {
    border-color: #000;
    color: #000;
}

/* ---------- the desk ---------- */
.contact-desk {
    margin: 0 0 40px;
}

.contact-desk--title {
    margin: 0 0 14px;
    color: #60605c;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.12em;
}

.contact-desk--mail {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.4;
    word-break: break-all;
}

.contact-desk--mail a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #cacaca;
}

.contact-desk--mail a:hover {
    border-bottom-color: #000;
}

.contact-desk--hint {
    margin: 0 0 24px;
    color: #5d5d5d;
    font-size: 13px;
    line-height: 1.9;
}

.contact-desk--facts {
    margin: 0 0 20px;
    padding: 18px 0 0;
    border-top: 1px solid #e5e5e5;
}

.contact-desk--facts dt {
    margin: 0 0 4px;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.08em;
}

.contact-desk--facts dd {
    margin: 0 0 16px;
    color: #5d5d5d;
    font-size: 13px;
    line-height: 1.9;
}

.contact-desk--facts dd:last-child {
    margin-bottom: 0;
}

.contact-desk--note {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
    color: #5d5d5d;
    font-size: 12px;
    line-height: 1.9;
}

/* ---------- holiday notice ---------- */
.contact-notice {
    margin: 0 0 30px;
    padding: 16px 18px;
    border-left: 2px solid #ab0000;
    background: #fafafa;
    font-size: 13px;
    line-height: 1.9;
}

.contact-notice b {
    display: block;
    margin-bottom: 6px;
    color: #000;
}

.contact-notice p {
    margin: 0 0 8px;
    color: #5d5d5d;
}

.contact-notice p:last-child {
    margin-bottom: 0;
}

@media (max-width: 520px) {
    .contact-desk--mail {
        font-size: 17px;
    }

    .contact-first {
        padding: 16px 16px;
    }
}

/* TECH-5767: password reset shares this stylesheet because it shares the layout - one
   max-width column, no account nav. Only the pieces contact.css does not already cover. */
.forgot-lede {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 2;
}
.forgot-lede--note {
    margin: 10px 0 0;
    color: #5d5d5d;
    font-size: 13px;
}
.forgot-form {
    max-width: 520px;
    margin: 0 0 32px;
}
.forgot-form .control-label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: bold;
}
.forgot-form input.text {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid #d5d6d8;
    font-size: 15px;
}
.forgot-form .g-recaptcha {
    margin: 20px 0 24px;
}
.forgot-form .submitButton {
    min-width: 220px;
    padding: 15px 28px;
    font-size: 14px;
}
.forgot-help {
    margin: 0 0 56px;
    padding-top: 22px;
    border-top: 1px solid #e8e8e8;
    color: #5d5d5d;
    font-size: 13px;
    line-height: 1.9;
}
@media screen and (max-width: 768px) {
    .forgot-form,
    .forgot-form input.text { max-width: 100%; }
    .forgot-form .submitButton { width: 100%; min-width: 0; }
}

.forgot-sent {
    max-width: 520px;
    margin: 0 0 32px;
    padding: 18px 20px;
    border: 1px solid #cacaca;
    font-size: 14px;
    line-height: 1.9;
}
.forgot-sent p { margin: 0; }
.forgot-sent--note {
    margin-top: 8px !important;
    color: #5d5d5d;
    font-size: 13px;
}