/* Forms, account, blog and CMS pages - same identity as the shop. */

.container--simple { padding-bottom: 40px; }

.panel {
    background: #fff;
    border-radius: var(--r-lg, 14px);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(7,35,26,.06), 0 3px 8px rgba(7,35,26,.07));
    padding: 26px 28px;
    margin-bottom: 20px;
}
.panel--narrow { max-width: 520px; margin-inline: auto; }
.panel > h2 { margin: 0 0 6px; font-family: var(--display); font-size: 22px; text-transform: uppercase; }
.panel > .lede { margin: 0 0 22px; color: #4c5a52; }

/* ---------- fields ---------- */

.ff { margin-bottom: 16px; }
.ff > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.ff__req { color: #b3261e; }
.ff__hint { display: block; margin-top: 6px; font-size: 12.5px; color: #5d6b63; }

.ff input, .ff textarea, .ff select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid rgba(7, 35, 26, 0.18);
    border-radius: var(--r-sm, 6px);
    background: #fff;
    font: 15px/1.5 var(--body, sans-serif);
    color: var(--ink, #14140f);
    transition: border-color .15s, box-shadow .15s;
}
.ff textarea { min-height: 130px; resize: vertical; }
.ff input:focus, .ff textarea:focus, .ff select:focus {
    outline: none;
    border-color: var(--yellow, #ffbe00);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--yellow, #ffbe00) 40%, transparent);
}

.ff-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }

/* ---------- buttons ---------- */

.btn-main, .btn-alt {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border: 0; border-radius: var(--r-sm, 6px);
    font: 700 15px/1 var(--display, sans-serif);
    letter-spacing: .6px; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: translate .18s, box-shadow .18s, filter .18s;
}
.btn-main {
    background-image: linear-gradient(180deg, color-mix(in oklab, var(--yellow,#ffbe00) 88%, #fff), var(--yellow, #ffbe00));
    color: var(--ink, #14140f);
}
.btn-alt { background: #fff; color: var(--ink, #14140f); border: 2px solid var(--green, #1f8a4c); }
.btn-main:hover, .btn-alt:hover { translate: 0 -2px; box-shadow: var(--shadow-1, 0 3px 8px rgba(7,35,26,.12)); }
.btn-main:active, .btn-alt:active { translate: 0; box-shadow: none; }

.form-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.form-foot .sep { color: #7d8a83; }

/* ---------- flash ---------- */

.flash {
    padding: 13px 16px;
    border-radius: var(--r-sm, 6px);
    margin: 18px 0;
    font-weight: 600;
    border-left: 4px solid var(--green, #1f8a4c);
    background: color-mix(in oklab, var(--green, #1f8a4c) 12%, #fff);
}
.flash--err {
    border-left-color: #b3261e;
    background: color-mix(in oklab, #b3261e 10%, #fff);
}

/* ---------- account ---------- */

.acct-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.acct-side { position: sticky; top: 120px; }
.acct-side a {
    display: block; padding: 11px 14px;
    border-radius: var(--r-sm, 6px);
    color: var(--ink, #14140f); text-decoration: none; font-weight: 700;
    transition: background .15s;
}
.acct-side a:hover { background: color-mix(in oklab, var(--yellow,#ffbe00) 18%, #fff); }
.acct-side a.is-on { background: var(--green-deep, #07231a); color: #fff; }

.rq-list { display: grid; gap: 12px; }
.rq {
    border: 1px solid rgba(7,35,26,.12);
    border-radius: var(--r-md, 10px);
    padding: 14px 16px;
    background: #fff;
}
.rq__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rq__when { color: #5d6b63; font-size: 13px; margin-left: auto; }
.rq__msg { margin: 6px 0 0; white-space: pre-wrap; }

.tag {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font: 800 11.5px/1.5 var(--body, sans-serif); text-transform: uppercase; letter-spacing: .5px;
}
.tag--new { background: #b3261e; color: #fff; }
.tag--in_progress { background: var(--yellow, #ffbe00); color: var(--ink, #14140f); }
.tag--answered { background: var(--green, #1f8a4c); color: #fff; }
.tag--closed { background: #d7ded9; color: #5d6b63; }

/* ---------- blog ---------- */

/* auto-fill kept making columns for posts that do not exist: with three
   posts on a wide screen the cards packed to the left and the empty
   tracks sat on the right. auto-fit drops the empty ones, the 380px cap
   stops three cards stretching into billboards, and justify-content
   centres whatever is left. min(100%, 300px) keeps a single card from
   overflowing a narrow phone. */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px));
    justify-content: center;
    gap: 20px;
}
.post-card {
    display: flex; flex-direction: column;
    background: #fff; border-radius: var(--r-lg, 14px); overflow: hidden;
    box-shadow: var(--shadow-1, 0 3px 8px rgba(7,35,26,.08));
    text-decoration: none; color: inherit;
    transition: translate .18s, box-shadow .18s;
}
.post-card:hover { translate: 0 -6px; box-shadow: var(--shadow-2, 0 12px 28px rgba(7,35,26,.16)); }
.post-card__img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: #eef2ef; }
.post-card__body { padding: 18px 20px 22px; }
.post-card__date { font-size: 12.5px; color: #5d6b63; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.post-card__title { margin: 6px 0 8px; font-family: var(--display, sans-serif); font-size: 19px; text-transform: uppercase; }
.post-card__ex { margin: 0; color: #4c5a52; font-size: 14.5px; }

.post-body { max-width: 760px; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-md, 10px); }
.post-body h2 { font-family: var(--display, sans-serif); text-transform: uppercase; margin-top: 30px; }
.post-body p, .post-body li { line-height: 1.7; }

/* ---------- cms page ---------- */

.cms-body { max-width: 820px; }
.cms-body h2 { font-family: var(--display, sans-serif); text-transform: uppercase; margin-top: 28px; font-size: 21px; }
.cms-body p, .cms-body li { line-height: 1.7; }

@media (max-width: 860px) {
    .acct-grid { grid-template-columns: 1fr; }
    .acct-side { position: static; }
    .panel { padding: 20px 16px; }
}

/* --------------------------------------------------------------------------
   Vertical rhythm on the simple pages.

   The dark title band sat flush against the white panel below it, and the
   headings inside the content sat too close to their paragraphs.
   -------------------------------------------------------------------------- */

.container--simple .category-header { margin-bottom: 26px; }
.container--simple .flash { margin-top: 0; }

.panel + .panel { margin-top: 22px; }

/* content blocks: give headings room above, paragraphs room below */
.cms-body > :first-child,
.post-body > :first-child { margin-top: 0; }

.cms-body h2,
.post-body h2 { margin: 38px 0 14px; }

.cms-body h3,
.post-body h3 { margin: 28px 0 10px; }

.cms-body p,
.post-body p { margin: 0 0 18px; }

.cms-body ul,
.cms-body ol,
.post-body ul,
.post-body ol { margin: 0 0 18px; padding-left: 22px; }

.cms-body li,
.post-body li { margin-bottom: 8px; }

.cms-body > :last-child,
.post-body > :last-child { margin-bottom: 0; }

/* the reading column looked detached from the full-width band above it */
.panel.cms-body,
.panel.post-body { padding: 32px 36px; }

@media (max-width: 860px) {
    .container--simple .category-header { margin-bottom: 18px; }
    .panel.cms-body, .panel.post-body { padding: 22px 18px; }
    .cms-body h2, .post-body h2 { margin: 28px 0 12px; }
}

/* a heading that runs straight into a form needs the same air as one with a lede */
.panel > h2 + form,
.panel > h2 + .ff,
.panel > h2 + .ff-row,
.panel > h2 + .rq-list,
.panel > h2 + .form-foot { margin-top: 20px; }

/* the two-sentence lede on the request form was running together */
.panel > .lede { line-height: 1.65; }

/* ---------- contact page map ---------- */

.map-wrap {
    margin-top: 22px;
    border-radius: var(--r-lg, 14px);
    overflow: hidden;
    background: #eef2ef;
    /* reserves the height before the frame loads, so the page does not
       jump once the map arrives */
    aspect-ratio: 16 / 9;
}
.map-frame { display: block; width: 100%; height: 100%; border: 0; }

.map-foot {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--muted, #5a6b62);
}

@media (max-width: 600px) {
    .map-wrap { aspect-ratio: 4 / 3; }
}