/* ============================================================================
   Aimstyle — the WordPress layer of the stylesheet
   ----------------------------------------------------------------------------
   style.css is the design's own file, carried over untouched and regenerated by
   tools/sync-design.sh. Anything WordPress needs on top lives here instead, so
   a design resync can never drop it.

   Two kinds of rule:

     1. Elements the static build had no need for — the enquiry form's reply,
        pagination, the search field, an optional footer menu.

     2. Editor output. The static build generated its article bodies from a
        script and could put a class on every element. The body now comes from
        the editor, which writes plain <ul>, <ol>, <figure> and <blockquote> —
        so the design's treatment is attached to those tags directly. A writer
        inserts an ordinary list and it comes out looking like the design,
        without having to know a class name.
   ========================================================================== */

/* -- The enquiry form's reply ---------------------------------------------- */
.enquiry-notice {
    margin: 0 0 clamp(1.6rem, 2.6vw, 2.4rem);
    padding: 1.1rem 1.35rem;
    border-left: 2px solid var(--brown);
    background: rgba(61, 45, 32, .05);
    font-size: .92rem;
    line-height: 1.6;
    color: rgba(61, 45, 32, .82);
}
.enquiry-notice.is-error {
    border-left-color: #9d3b2a;
    background: rgba(157, 59, 42, .06);
    color: #7d2f21;
}

/* -- Journal pagination ---------------------------------------------------- */
.journal-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin-top: clamp(3.5rem, 6vw, 6rem);
}
.journal-pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 2.9rem;
    padding: .85rem 1.1rem;
    border: 1px solid rgba(61, 45, 32, .2);
    border-radius: 999px;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(61, 45, 32, .7);
    transition: background .45s ease, color .45s ease, border-color .45s ease;
}
.journal-pagination .page-numbers:hover,
.journal-pagination .page-numbers.current {
    border-color: var(--dark);
    background: var(--dark);
    color: var(--white);
}
.journal-pagination .dots:hover {
    border-color: rgba(61, 45, 32, .2);
    background: transparent;
    color: rgba(61, 45, 32, .7);
}

/* -- Search field ---------------------------------------------------------- */
.aimstyle-search {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
}
.aimstyle-search input[type="search"] {
    flex: 1 1 16rem;
    padding: .9rem 1.1rem;
    border: 1px solid rgba(61, 45, 32, .22);
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .92rem;
    color: inherit;
}
.aimstyle-search input[type="search"]:focus-visible {
    outline: none;
    border-color: var(--brown);
}
.aimstyle-search button {
    padding: .9rem 1.4rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: inherit;
    cursor: pointer;
    transition: background .45s ease, color .45s ease;
}
.aimstyle-search button:hover {
    background: var(--dark);
    color: var(--white);
}

/* -- Editor prose after a case study's structured fields ------------------- */
.chapter-content {
    margin-top: clamp(2.4rem, 4vw, 3.6rem);
}
.chapter-content > * + * {
    margin-top: 1.15rem;
}
.chapter-content h2,
.chapter-content h3,
.chapter-content h4 {
    margin-top: clamp(2rem, 3.4vw, 3rem);
    font-weight: 400;
    letter-spacing: -.03em;
}

/* -- Footer legal menu ----------------------------------------------------- */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}
.footer-legal a {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255, 255, 255, .55);
    transition: color .45s ease;
}
.footer-legal a:hover {
    color: rgba(255, 255, 255, .9);
}


/* ============================================================================
   EDITOR OUTPUT IN AN ARTICLE BODY

   Matching .journal-list and .journal-article-image, which the static build
   applied by class. Scoped to the article column so nothing else is affected.
   ========================================================================== */

/* -- Lists ----------------------------------------------------------------- */
.journal-article-body ul,
.journal-article-body ol,
.chapter-content ul,
.chapter-content ol {
    max-width: 46rem;
    margin: 0 0 1.7rem;
    padding: 0;
    list-style: none;
    counter-reset: aimstyle-item;
}

.journal-article-body :is(ul, ol) > li,
.chapter-content :is(ul, ol) > li {
    position: relative;
    padding: .85rem 0 .85rem 1.9rem;
    border-bottom: 1px solid rgba(61, 45, 32, .16);
    color: rgba(61, 45, 32, .78);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.6;
}

.journal-article-body :is(ul, ol) > li:first-child,
.chapter-content :is(ul, ol) > li:first-child {
    border-top: 1px solid rgba(61, 45, 32, .16);
}

/* The same accent the body's blockquote mark uses. */
.journal-article-body ul > li:before,
.chapter-content ul > li:before {
    position: absolute;
    top: .85rem;
    left: 0;
    color: #a98b75;
    content: "—";
}

/*
 * An ordered list keeps its numbering, but set in the design's voice rather
 * than the browser's. A counter is used because list-style is off — needed to
 * suppress the default marker so the hairline rhythm above can hold.
 */
.journal-article-body ol > li:before,
.chapter-content ol > li:before {
    position: absolute;
    top: .85rem;
    left: 0;
    counter-increment: aimstyle-item;
    color: #a98b75;
    content: counter(aimstyle-item, decimal-leading-zero);
    font-size: .78em;
    letter-spacing: .06em;
}

/* A list the writer nests keeps the rhythm but drops the rules. */
.journal-article-body li :is(ul, ol),
.chapter-content li :is(ul, ol) {
    margin: .6rem 0 0;
}
.journal-article-body li :is(ul, ol) > li,
.chapter-content li :is(ul, ol) > li {
    border: 0;
    padding-block: .3rem;
}

/* -- Images ---------------------------------------------------------------- */
.journal-article-body figure,
.journal-article-body .wp-block-image {
    margin: clamp(4rem, 7vw, 7rem) 0;
}

.journal-article-body figure > img,
.journal-article-body .wp-block-image img {
    width: 100%;
    height: clamp(31rem, 61vw, 52rem);
    object-fit: cover;
    filter: saturate(.72);
}

.journal-article-body figcaption {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(61, 45, 32, .25);
    font-size: .58rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(61, 45, 32, .6);
}

@media (max-width: 700px) {
    .journal-article-body figure > img,
    .journal-article-body .wp-block-image img {
        height: 64vh;
    }
    .journal-article-body figcaption {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* -- Quotes ---------------------------------------------------------------- */
/*
 * The design sets the quotation on the blockquote itself; the editor wraps the
 * text in a paragraph, which would otherwise reset the size back to body copy.
 */
.journal-article-body blockquote > p {
    margin: 0;
    font: inherit;
    color: inherit;
}
.journal-article-body blockquote > p + p {
    margin-top: 1rem;
}
.journal-article-body blockquote cite,
.journal-article-body blockquote .wp-block-quote__citation {
    display: block;
    margin-top: 1.6rem;
    font-size: .62rem;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .7;
}

/* ============================================================================
   CONTACT FORM 7

   Only loaded into effect when a CF7 form is nominated for the contact page.
   CF7 renders the same field markup the design expects, with two additions of
   its own that have to be neutralised.
   ========================================================================== */

/*
 * CF7 wraps every control in a <span class="wpcf7-form-control-wrap">. That
 * span lands as a direct child of the field label — which is exactly what
 * `.enquiry-field > span` styles as the label's own caption. Left alone, every
 * input would inherit small uppercase label type, and being inline would
 * collapse to its content width instead of filling the row.
 */
.enquiry-field > .wpcf7-form-control-wrap {
    display: block;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}

/*
 * The design marks a required field with an asterisk on its caption, keyed to
 * the `required` attribute. CF7 marks required fields with aria-required
 * instead, so the same asterisk is keyed to that.
 */
.enquiry-field:has([aria-required="true"]) > span:after {
    content: " *";
    color: rgba(61, 45, 32, .45);
}

/* -- Validation and response messages -------------------------------------- */
/*
 * Styled as the theme's own enquiry notice, so a CF7 form and the built-in one
 * answer the reader in the same voice.
 */
.wpcf7-response-output {
    margin: clamp(1.4rem, 2.2vw, 1.9rem) 0 0;
    padding: 1.1rem 1.35rem;
    border: 0;
    border-left: 2px solid var(--brown);
    background: rgba(61, 45, 32, .05);
    font-size: .92rem;
    line-height: 1.6;
    color: rgba(61, 45, 32, .82);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
    border-left-color: #9d3b2a;
    background: rgba(157, 59, 42, .06);
    color: #7d2f21;
}

/* The per-field message sits under its own input, not in the label's caption. */
.wpcf7-not-valid-tip {
    margin-top: .5rem;
    font-size: .78rem;
    letter-spacing: .01em;
    text-transform: none;
    color: #9d3b2a;
}

.enquiry-field .wpcf7-not-valid {
    border-color: rgba(157, 59, 42, .55);
}

/* -- The submit control ---------------------------------------------------- */
/*
 * The design's button is kept rather than using [submit], because [submit]
 * renders a bare <input> and the button is a flex row with an arrow that moves
 * on hover. CF7 submits on any native submit event, so nothing is lost — except
 * the spinner, which is placed by hand and needs its resting state back.
 */
.enquiry-submit .wpcf7-spinner {
    margin: 0;
}

.wpcf7-form:not(.submitting) .wpcf7-spinner {
    display: none;
}