@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,100..900&display=swap');

/* TalentWell redesign — step 1. Loaded as a file by the tw-step1-css mu-plugin,
   after the theme stylesheet and after the Customizer's Additional CSS, so these
   rules win without anything being pasted into the Customizer box.
   Reversible: delete wp-content/mu-plugins/tw-step1-css.php. */

/* 1. One typeface, everywhere. Replaces Bricolage Grotesque. */
html, body,
h1, h2, h3, h4, h5, h6,
p, li, td, th, label, input, select, textarea, button,
.fusion-button, .fusion-button-text, .fusion-title, .fusion-text,
.post-content, .tw-owner-copy,
.formkit-form.formkit-form, .formkit-form.formkit-form *,
.wa__stt, .wa__popup_chat_box, .wa__popup_title, .wa__popup_intro,
.leaflet-container, .leaflet-control-attribution {
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
i[class*="fa-"], i[class*="awb-icon"], i[class*="fusion-li-icon"],
.awb-icon, .fusion-icon, [class^="icon-"], [class*=" icon-"] {
  font-family: inherit;
}
i[class*="awb-button__icon"]::after, i[class*="awb-button__icon"]::before {
  font-family: awb-icons !important;
}

/* 2. Headings: readable on a phone, no forced capitalisation. */
h1, h2, h3, h4, .fusion-title h1, .fusion-title h2, .fusion-title h3 {
  text-transform: none !important;
  text-wrap: balance;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
h1, .fusion-title h1 { font-size: clamp(2.05rem, 5.6vw, 3.4rem) !important; font-weight: 800 !important; }
h2, .fusion-title h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem) !important; font-weight: 800 !important; }
h3, .fusion-title h3 { font-size: clamp(1.08rem, 1.8vw, 1.3rem) !important; font-weight: 700 !important; line-height: 1.25; }
@media (max-width: 800px) {
  h2, .fusion-title h2 { margin-top: 40px !important; margin-bottom: 14px !important; }
  h3, .fusion-title h3 { margin-top: 26px !important; }
}

/* 3. Tables stop pushing the page sideways on a phone. */
.post-content table, .tw-owner-copy table, .fusion-text table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.post-content table th, .post-content table td,
.tw-owner-copy table th, .tw-owner-copy table td {
  padding: 12px 18px;
  vertical-align: top;
}
@media (max-width: 800px) {
  .post-content table, .tw-owner-copy table, .fusion-text table { font-size: 0.92rem; }
}

/* 4. Links underlined in body copy only. */
.post-content p a, .post-content li a,
.tw-owner-copy p a, .tw-owner-copy li a,
.fusion-text p a, .fusion-text li a {
  text-decoration-line: underline !important;
  text-decoration-color: #B99F00;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.post-content p a:hover, .tw-owner-copy p a:hover, .fusion-text p a:hover {
  text-decoration-color: #FFE100;
}
.fusion-footer a, .fusion-footer-widget-area a, .fusion-copyright-content a,
.fusion-menu a, .fusion-main-menu a, .fusion-mobile-menu a,
.fusion-button, .fusion-button-text, .awb-menu a {
  text-decoration: none !important;
}

/* 5. Black on yellow, always. */
[style*="#FFE100"], [style*="#ffe100"],
[style*="rgb(255, 225, 0)"], .fusion-highlight[style*="FFE100"] {
  color: #17160F !important;
}

/* 6. Visible keyboard focus. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #17160F !important;
  outline-offset: 3px;
  border-radius: 2px;
}

/* 7. Mobile rhythm. */
@media (max-width: 600px) {
  .post-content, .tw-owner-copy { padding-left: 16px; padding-right: 16px; }
  .post-content p, .post-content li,
  .tw-owner-copy p, .tw-owner-copy li { max-width: 100%; }
}

/* 8. Width cap and measure on the pages created 21 September 2026. */
.page-id-4742 .post-content, .page-id-4743 .post-content, .page-id-4744 .post-content,
.page-id-4745 .post-content, .page-id-4746 .post-content, .page-id-4747 .post-content,
.page-id-4748 .post-content, .page-id-4749 .post-content, .page-id-4750 .post-content,
.page-id-4751 .post-content, .page-id-4752 .post-content, .page-id-4753 .post-content,
.page-id-4754 .post-content, .page-id-4755 .post-content, .page-id-4756 .post-content,
.page-id-4757 .post-content, .page-id-4758 .post-content, .page-id-4759 .post-content,
.page-id-4760 .post-content, .page-id-4761 .post-content {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.page-id-4742 .post-content p, .page-id-4743 .post-content p, .page-id-4744 .post-content p,
.page-id-4745 .post-content p, .page-id-4746 .post-content p, .page-id-4747 .post-content p,
.page-id-4748 .post-content p, .page-id-4749 .post-content p, .page-id-4750 .post-content p,
.page-id-4751 .post-content p, .page-id-4752 .post-content p, .page-id-4753 .post-content p,
.page-id-4754 .post-content p, .page-id-4755 .post-content p, .page-id-4756 .post-content p,
.page-id-4757 .post-content p, .page-id-4758 .post-content p, .page-id-4759 .post-content p,
.page-id-4760 .post-content p, .page-id-4761 .post-content p,
.page-id-4742 .post-content li, .page-id-4748 .post-content li, .page-id-4749 .post-content li,
.page-id-4756 .post-content li, .page-id-4755 .post-content li {
  max-width: 76ch;
}
.page-id-4761 .post-content { max-width: 1320px; }

/* 9. Prose defaults for the new pages. */
.post-content .tw-lede { font-size: 1.12rem; line-height: 1.55; color: #45474A; }
.post-content .tw-note { font-size: 0.88rem; color: #6A6D72; }
