/* ──────────────────────────────────────────────────────────────────────────
   LINKS — make the site answer the pointer.

   An audit on 2026-09-29 found 207 links in 17 styles, and **nine of those
   seventeen had no hover state whatsoever** -- including the main navigation.
   Home, Projects and Contact did nothing when the pointer was over them. So did
   the gold phone numbers on four pages, and the in-content links to the atelier
   and the services page.

   Contrast was never the problem here: nothing measured below 6.5:1 and most sat
   far above it. The problem was affordance. A visitor could not tell what was
   clickable by pointing at it, which on a site selling design work is a poor
   first impression of the design.

   The treatment is the one the rest of the site already uses. Cards tint toward
   gold, the map facade borders gold, the tertiary button lifts to gold. Links now
   do the same, so the whole page answers in one language.

   One rule covers both cases, which is why it is a lighter gold rather than the
   brand gold. A white or grey link moving to #d8bc6a reads clearly as gold; a
   link that is *already* #c9a84c moving to #d8bc6a brightens visibly. Had this
   used the brand gold itself, every gold link would have hovered to its own
   colour and stayed exactly as dead as before -- the failure this file exists to
   fix, reintroduced by the fix.
   ────────────────────────────────────────────────────────────────────────── */

/* Buttons are excluded: they carry their own tier hover in buttons.css, and a
   colour shift on top of a fill change would fight it. The skip link is excluded
   because it is only ever seen while focused, and it already has its own
   treatment. */
a:not(.elementor-button):not([class*="btn"]):not(.ark-more):not(.as-skip-link):not(.elementor-button-link) {
    transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

a:not(.elementor-button):not([class*="btn"]):not(.ark-more):not(.as-skip-link):not(.elementor-button-link):hover,
a:not(.elementor-button):not([class*="btn"]):not(.ark-more):not(.as-skip-link):not(.elementor-button-link):focus-visible {
    color: var(--as-gold-hover, #d8bc6a);
}

/* The theme sets nav colours at a higher weight than a bare a:hover can reach,
   so the navigation -- the most important set of links on the site, and among
   the dead ones -- needs its own line to match it. */
.ms-header a:hover,
.ms-header a:focus-visible,
.ms-nav a:hover,
.ms-nav a:focus-visible,
nav a:hover,
nav a:focus-visible {
    color: var(--as-gold-hover, #d8bc6a);
}

/* Keyboard users get a visible ring as well as the colour, because colour alone
   is not a sufficient focus indicator. */
a:focus-visible {
    outline: 2px solid var(--as-gold-hover, #d8bc6a);
    outline-offset: 3px;
}

/* A link wrapping an image has no text to recolour; dim the image slightly
   instead so those are not the one clickable thing that stays silent. */
a:has(> img):hover img,
a:has(> img):focus-visible img {
    opacity: .88;
    transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
}

/* The footer's legal links -- FAQ, Privacy Policy, Terms of Use -- carry
   border-bottom: 1px solid transparent, which turns visible on hover and gives
   those three an underline that the phone numbers, the social names and the
   handles beside them do not get. Three links in one row behaving differently
   from the rest reads as an accident, because it is one.

   The colour shift already signals the link. The border stays in place at 1px
   and transparent rather than being removed, so nothing moves by a pixel when
   the rule applies. The declaration lives in the home page's Elementor data,
   which is why this overrides rather than edits it -- changing stored builder
   data to alter a hover state would be a much larger blast radius than a line
   of CSS. */
.as-foot-legal a:hover,
.as-foot-legal a:focus-visible,
.elementor .as-foot-legal a:hover,
.elementor .as-foot-legal a:focus-visible {
    border-bottom-color: transparent;
}