/* ──────────────────────────────────────────────────────────────────────────
   BUTTONS — three tiers, defined once, for the whole site.

   Why this file exists. An audit on 2026-09-29 found six buttons on the site
   wearing four different styles:

     gold fill, WHITE text, 8px radius, weight 400   "Send" x3 (theme default)
     gold text + bottom rule, uppercase 11px         "Inside the atelier"
     gold fill, #111 text, 50px pill, weight 600     "Start Your Project"
     ghost, 35% white border, 50px pill              "See Inside"

   The last two were a deliberate primary/secondary pair -- but they lived in
   factory.css, which loads on the Atelier page alone, so the system reached one
   page and everything else kept whatever the theme shipped. Not a design, an
   accretion.

   The accessibility part, which is why this was not merely untidy. The theme's
   Send button puts white text on the gold: **2.29:1**, where WCAG AA wants 4.5:1
   for 16px text. The Atelier button pairs the same gold with #111 and measures
   8.26:1. Two buttons, one brand colour, opposite decisions -- and the illegible
   one was the control that submits an enquiry, on three pages.

   So the tiers below are the existing good pair, named, moved somewhere sitewide,
   and extended to cover the two buttons that were outside them.

   Selectors attach to the markup that already exists rather than renaming classes
   in Elementor's stored data: the tiers are what the CSS says, and no page has to
   be re-saved to join one.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --as-gold: #c9a84c;
    --as-gold-hover: #d8bc6a;   /* a lift in value, not a change of hue */
    --as-ink: #111;
    --as-btn-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Shared shape. Everything a tier does not decide for itself lives here, so the
   three cannot drift apart on padding or radius the way the old four did. */
.asf-btn-gold .elementor-button,
.asf-btn-outline .elementor-button,
input[type="submit"].wpcf7-submit.btn,
.assv-more .elementor-button {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    letter-spacing: .06em;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s var(--as-btn-ease),
                border-color .25s var(--as-btn-ease),
                color .25s var(--as-btn-ease);
    /* Line height belongs here, not in a tier. Setting 1.4 on the primary alone
       (originally to stop the <input> Send button collapsing) made it 6.4px
       taller than the secondary standing next to it on the Atelier hero -- the
       studio spotted the mismatch. Shared, it also takes both buttons to 46px,
       clearing the 44px minimum target size. */
    line-height: 1.4;
}

/* ── PRIMARY ───────────────────────────────────────────────────────────────
   The main action on a page. Gold fill, dark text, pill.
   "Send" joins this tier, which is what fixes the contrast: #111 on gold is
   8.26:1 against the 2.29:1 it had. */
.asf-btn-gold .elementor-button,
input[type="submit"].wpcf7-submit.btn {
    background: var(--as-gold);
    border: 2px solid var(--as-gold);
    color: var(--as-ink);
    border-radius: 50px;
    font-size: 16px;
    padding: 10px 35px;
    -webkit-appearance: none;   /* the Send button is an <input>, not an <a> */
            appearance: none;
    height: auto;
}

/* Hover lifts the gold rather than replacing it. The old rule turned this button
   solid white, which handed away the brand colour at the moment of interaction
   and left it looking like the secondary button, whose hover is also white-ish.
   A lighter gold keeps the tiers apart all the way through the interaction. */
.asf-btn-gold .elementor-button:hover,
.asf-btn-gold .elementor-button:focus-visible,
input[type="submit"].wpcf7-submit.btn:hover,
input[type="submit"].wpcf7-submit.btn:focus-visible {
    background: var(--as-gold-hover);
    border-color: var(--as-gold-hover);
    color: var(--as-ink);
}

/* ── SECONDARY ─────────────────────────────────────────────────────────────
   Ghost with a white border, on the Atelier hero beside the primary.

   A gold outline was tried on 2026-09-29 and rejected by the studio on sight:
   beside a gold-filled primary it read as two gold buttons competing rather than
   as a hierarchy, and the hero photograph behind it left the outline looking
   washed out. White holds its edge against imagery and keeps the gold meaning
   one thing -- the main action. Kept as it was.

   The gallery pager's "Show next 50 images" stays gold-outlined and is styled by
   its own plugin. That is deliberate, not an oversight: it sits alone on a flat
   dark page with no primary beside it, so gold reads as an invitation rather
   than as competition. A tier can have two skins when the surfaces differ; what
   it cannot have is two skins for the same situation. */
.asf-btn-outline .elementor-button {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: 50px;
    font-size: 16px;
    padding: 10px 35px;
}

.asf-btn-outline .elementor-button:hover,
.asf-btn-outline .elementor-button:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
}

/* ── TERTIARY ──────────────────────────────────────────────────────────────
   A quiet inline action -- "Inside the atelier". It is a link with a rule under
   it rather than a filled control, and that is the right treatment for a third
   tier; it simply had no hover state at all, so it did not answer the pointer.
   Keeping its own smaller type on purpose: a tertiary action that matched the
   primary's size would not be tertiary. */
.assv-more .elementor-button {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--as-gold);
    color: var(--as-gold);
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 0 0 4px;
}

/* Elementor's generated page CSS carries .as-services-list .assv-more
   .elementor-button at three classes, which ties with a two-class hover and wins
   on order. Matching its scope is what makes the hover apply -- without this the
   button reads as dead to the pointer, which is how it was found. */
.assv-more .elementor-button:hover,
.assv-more .elementor-button:focus-visible,
.as-services-list .assv-more .elementor-button:hover,
.as-services-list .assv-more .elementor-button:focus-visible {
    color: var(--as-gold-hover);
    border-bottom-color: var(--as-gold-hover);
}

/* Keyboard users get the same answer as pointer users, plus a visible ring --
   the hover colour alone is not enough to show focus. */
.asf-btn-gold .elementor-button:focus-visible,
.asf-btn-outline .elementor-button:focus-visible,
input[type="submit"].wpcf7-submit.btn:focus-visible,
.assv-more .elementor-button:focus-visible {
    outline: 2px solid var(--as-gold-hover);
    outline-offset: 3px;
}

/* The widget wrapper carries no visuals. factory.css had .asf-btn-gold:hover
   painting the wrapper white as well as the anchor -- invisible because the
   wrapper hugs the button, but two rules doing one job, and the wrapper is not
   the control. */
.asf-btn-gold,
.asf-btn-outline,
.asf-btn-gold:hover,
.asf-btn-outline:hover {
    background: transparent;
    border-color: transparent;
}

/* ── A DELIBERATE EXCEPTION: "Explore More" ────────────────────────────────
   The home page's section CTA is 22.4px at weight 400 in a 56.6px pill, where
   the tiers are 16px at 600 in 46.4px. That is NOT drift, and it is left alone
   on purpose.

   It was brought into the tiers on 2026-09-29 and reverted the same hour after
   a before-and-after: tightened to tier size it reads as slightly lost in the
   space it occupies, where the larger, lighter type carries the confidence a
   section-level invitation wants. A button standing alone in a wide band is
   doing different work from one sitting in a row beside a primary, and may be
   sized for it.

   Its hover -- border to gold -- also stays. A ghost button with no primary
   beside it can afford gold; the same gold next to the Atelier's gold primary
   was tried and rejected on sight the same day.

   So: do not "unify" this one. The inconsistency is the decision. */

/* ── STANDALONE CALLS TO ACTION ────────────────────────────────────────────
   "Let's Talk" (all eight pages) and "Explore More" (home). Both sit alone in a
   wide band with no primary beside them, and both are section-level invitations
   rather than inline actions -- so they share one treatment: gold outline at
   rest, filling gold on hover, which is the pattern the studio picked out from
   the gallery pager's "Show next 50 images".

   They keep their own larger type (22.4px) rather than dropping to the tier's
   16px. That was tried and reverted: at tier size a button standing alone in a
   wide band reads as lost. Colour and hover carry the language; size carries the
   context.

   Why they are together rather than ranked. It was tempting to keep "Explore
   More" white at rest so gold could mean conversion alone -- but it leads to the
   portfolio, which is not a lesser action than an enquiry, and the two sit in
   near-identical contexts. Same role, same treatment.

   Four classes plus the element, because Elementor writes per-element rules at
   four classes -- see the note below on the 1.03:1 contrast bug that came from
   counting a truncated selector. */
a.btn.btn-default.btn--lg.btn--accent,
a.btn.btn-default.btn--lg.btn--subtle {
    background: transparent;
    border-width: 2px;
    border-style: solid;
    /* Elementor emits .elementor-element-3fbcd7f .btn { border-color:
       rgba(255,250,250,.85) !important } for "Explore More", so the resting
       border stayed white while everything else turned gold. Matched rather
       than out-specified, because an !important cannot be out-specified. Its
       hover border was already gold from the builder, which is why only the
       resting state looked wrong. */
    border-color: var(--as-gold) !important;
    color: var(--as-gold);
}

/* !important, reluctantly and specifically. Elementor emits
   .elementor-element-3fbcd7f .ms-btn__text { color:#FFFAFA !important } for this
   button, and an !important cannot be out-specified -- only matched. Without it
   the label stayed white at rest and then sat gold-on-gold on hover, invisible.
   Scoped to these two labels so nothing else inherits the escalation. */
a.btn.btn-default.btn--lg.btn--accent .ms-btn__text,
a.btn.btn-default.btn--lg.btn--subtle .ms-btn__text {
    color: var(--as-gold) !important;
}

a.btn.btn-default.btn--lg.btn--accent:hover,
a.btn.btn-default.btn--lg.btn--accent:focus-visible,
a.btn.btn-default.btn--lg.btn--subtle:hover,
a.btn.btn-default.btn--lg.btn--subtle:focus-visible {
    background: var(--as-gold);
    border-color: var(--as-gold);
    color: var(--as-ink);
}

/* The label lives in a child div, .ms-btn__text, and the theme recolours it on
   hover -- which was right when these were ghosts with white text, and is wrong
   now the background is gold: gold on gold washed the label out almost to
   nothing. Found by eye, not by the audit, which reads the anchor's own colour
   and not its children's.

   The earlier 1.03:1 bug: a first attempt used a.btn--lg.btn--accent, two
   classes. The #111 text applied and the gold fill did not, leaving dark text on
   a dark ground -- worse than the ghost it replaced. The rule to beat is
   .elementor-589 .elementor-element.elementor-element-dc97feb .btn-default,
   four classes, written per page and per element. Read the builder's selector in
   full before counting; a truncated one cost two attempts. */
a.btn.btn-default.btn--lg.btn--accent:hover .ms-btn__text,
a.btn.btn-default.btn--lg.btn--accent:focus-visible .ms-btn__text,
a.btn.btn-default.btn--lg.btn--subtle:hover .ms-btn__text,
a.btn.btn-default.btn--lg.btn--subtle:focus-visible .ms-btn__text {
    color: var(--as-ink) !important;
}

/* ── THE SEND BUTTON ON PHONES ─────────────────────────────────────────────
   Full width below 768px, matching the fields above it.

   The studio asked whether centring it would be better, having seen a 118px
   button sitting under a 410px field. Measured first: the button is not
   misaligned -- its left edge sits exactly on the fields' left edge at every
   width (x15 on phones, x690 on desktop). That is the correct pattern for a
   single-column form, because the eye returns to the left margin after each
   field and finds the submit waiting there. Centring it would break that
   alignment, and on desktop would make it harder to find, not easier.

   What was actually wrong is proportion: a small control hanging off one side of
   a wide column reads as orphaned. Full width fixes that rather than moving it --
   the form becomes one column all the way down, the label centres inside the
   button of its own accord, and the target grows to 410 x 46px, well past the
   44px minimum on both axes.

   Desktop keeps the left alignment: at 630px a full-width button reads as a
   banner rather than a control. */
@media (max-width: 767px) {
    input[type="submit"].wpcf7-submit.btn {
        display: block;
        width: 100%;
    }
}