/*
 * Site-wide interaction polish on top of the Webflow export.
 */

/* --- Service cards (homepage): whole card is a link --- */

a.service-card {
    color: #344e41;
    text-decoration: none;
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

a.service-card .button-3 {
    transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
    a.service-card:hover {
        background-color: rgba(192, 170, 129, 0.16);
        box-shadow: 0 2px 6px rgba(29, 43, 36, 0.05),
            0 12px 32px rgba(29, 43, 36, 0.08);
    }

    a.service-card:hover .button-3 {
        color: #ff7100;
    }
}

/* --- Service detail pages: sticky table of contents --- */

/* .sidebar-list ships with position: sticky and 100px top padding (to
   clear the fixed navbar), but the export lost the top offset without
   which sticky never engages. */
.sidebar-list {
    top: 0;
    align-self: flex-start;
}

/* The export's overflow: hidden makes .page-content a scroll container,
   which silently disables window-scroll stickiness inside it; clip keeps
   the same clipping without doing that. */
.page-content {
    overflow: clip;
}

/* Anchor targets jumped to from the sidebar land below the fixed navbar. */
.article-content [id] {
    scroll-margin-top: 110px;
}

/* The layout stacks into one column below 768px; a sticky sidebar there
   would cover the article. */
@media screen and (max-width: 767px) {
    .sidebar-list {
        position: static;
    }
}

/* --- Contact form --- */

/* .contact-form is a column flexbox with align-items: flex-end, so each row
   is only as wide as its own content: a row holding one control ends up
   half width and pinned to the right. Stretching every row (the negative
   .row margins still cancel the .column padding) lines the fields up with
   the message box no matter how many columns a row holds. */
.contact-form .form-row {
    align-self: stretch;
}

/* Unlike .w-input, the select has an intrinsic width and would not fill
   the column it now has to itself. */
.contact-form .select-field {
    width: 100%;
}