/* Keep the skip link available to keyboards without off-screen positioning. */
.skip-link {
 position: absolute; top: 0; left: 0;
 width: 1px; height: 1px; padding: 0; margin: -1px;
 overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
 white-space: nowrap; border: 0;
}
.skip-link:focus-visible {
 position: relative; display: block; z-index: 1200;
 width: auto; height: auto; margin: 0; padding: .75rem 1rem;
 overflow: visible; clip: auto; clip-path: none; white-space: normal;
 background: #ececec; color: #24485f; font-weight: 700;
 text-align: center; text-decoration: underline; text-underline-offset: .18em;
 border-bottom: 1px solid #ccd7da; outline: 2px solid #24485f; outline-offset: -2px;
}
main[id] { scroll-margin-top: 6rem; }
@media (max-width: 768px) { .main-nav .submenu li a { white-space: normal; } }

/* Audit corrections: readable legacy sections and supporting text. */
main :is(.section-dark, .section-dark-sm, .legacy-dark) { color: #f5f7fa; }
main :is(.section-dark, .section-dark-sm, .legacy-dark) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption) { color: #f5f7fa; }
main :is(.section-dark, .section-dark-sm, .legacy-dark) a:not(.btn) { color: #bce4ff; text-decoration: underline; }
main :is(.section-dark, .section-dark-sm, .legacy-dark) :is(.card-shadow,.quality-card) { color: #515151; }
main :is(.section-dark, .section-dark-sm, .legacy-dark) :is(.card-shadow,.quality-card) :is(h1,h2,h3,h4,h5,h6) { color: #102033; }
main :is(.section-dark, .section-dark-sm, .legacy-dark) :is(.card-shadow,.quality-card) :is(p,li,dt,dd) { color: #515151; }
.contact-channel .channel-label, .contact-channel .channel-note { color: #515151; opacity: 1; }
.sg-caption { color: #515151; }
.sg-button-accent { background: #9a650f; color: #fff; }
.monthly-shop-badge { color: #754600; }

/* Long words and nested rows must not widen the mobile viewport. */
main :is(h1,h2,h3,h4,h5,h6,.text-wrap,.portfolio-name,.about-text,.value-text) { overflow-wrap: anywhere; }
.about-grid > *, .contact-grid > *, .quote-grid > * { min-width: 0; }
@media (max-width: 768px) {
 main .row > .col { flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; }
 main .row .row { margin-inline: 0; }
 .about-grid, .contact-grid, .quote-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Keep floating actions clear of form fields and validation messages. */
@media screen {
 .page-with-form .whatsapp-float { position: static; display: flex; margin: 1rem 1rem 1rem auto; }
 .page-with-form #scrollTop { display: none; }
}

@media (max-width: 768px) { main > .row { margin-inline: 0; } }