/* TradesFolks P42 — Global Public Readability / Contrast System
   Purpose: improve long-distance readability without changing navy/gold brand identity.
   Public layout only. Admin UI is intentionally untouched. */

:root{
  --muted:#53677d;
  --text-muted:#53677d;
  --tf-text-primary:#102d4f;
  --tf-text-body:#334e68;
  --tf-text-secondary:#52677d;
  --tf-text-muted:#607286;
  --tf-surface-soft:#f4f7fa;
  --tf-border-readable:#d3dee9;
}

/* Improve glyph clarity and keep body copy from looking washed out. */
body{
  text-rendering:optimizeLegibility;
}
main{
  color:var(--tf-text-primary);
}
main p,
main li,
main dd{
  font-weight:400;
}
main small{
  font-weight:500;
}

/* Common semantic muted/helper classes used throughout public marketplace pages. */
main :where(.muted,.text-muted,.helper-text,.form-hint,.field-hint,.caption,.meta-text,.secondary-text,.subtle-text){
  color:var(--tf-text-secondary);
}

/* Inputs were especially faint on light-grey panels. */
main :where(input,textarea,select){
  color:#173755;
}
main :where(input,textarea)::placeholder{
  color:#66798d;
  opacity:1;
}

/* Light surfaces need a visible edge against the light page background. */
main :where(.card,.panel,.surface,.box)[class]{
  border-color:var(--tf-border-readable);
}

/* Preserve intentional light-on-dark components. */
main :where(.hero,.site-footer,.assurance,.rfq,[class*="navy"],[class*="dark"]) :where(p,small,.muted,.text-muted){
  color:inherit;
}

/* Existing global marketplace token users become more legible automatically. */
.product-body>p,
.supplier-line,
.supplier-content p,
.supplier-content dt,
.hero-card p,
.hero-card small,
.metrics span{
  color:var(--tf-text-secondary);
}

/* Mobile: readability matters more than density. */
@media(max-width:760px){
  main :where(input,textarea,select){
    font-size:max(16px,1em);
  }
}


/* =========================================================
   P44 — READABILITY HOTFIX
   Important: this file is intentionally loaded AFTER
   site-bundle-group-b.css. P42/P43 were being overwritten
   by later bundle rules, which is why the visual change was
   not appearing on the live page.
   ========================================================= */

/* ---------- Homepage country market cards ---------- */
.tf-homepage .country-network-premium .country-market-source{
  color:#405d78!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:900!important;
}
.tf-homepage .country-network-premium .country-market-name{
  color:#0b2343!important;
  font-size:17px!important;
  line-height:1.1!important;
  font-weight:950!important;
}
.tf-homepage .country-network-premium .country-market-copy{
  color:#435f79!important;
  font-size:11px!important;
  line-height:1.42!important;
  font-weight:550!important;
  -webkit-line-clamp:2!important;
}
.tf-homepage .country-network-premium .country-market-count>b{
  font-size:11px!important;
}
.tf-homepage .country-network-premium .country-market-count>span{
  color:#405d78!important;
  font-size:9px!important;
  font-weight:750!important;
}
.tf-homepage .country-network-premium .country-market-benefits{
  gap:9px 8px!important;
}
.tf-homepage .country-network-premium .country-market-benefits b{
  color:#173b5e!important;
  font-size:9.5px!important;
  font-weight:900!important;
}
.tf-homepage .country-network-premium .country-market-benefits small{
  color:#516b83!important;
  font-size:8.5px!important;
  font-weight:650!important;
}
.tf-homepage .country-network-premium .country-market-info{
  border-right-color:#d2deea!important;
}
.tf-homepage .country-network-premium .country-market-body{
  background:#fff!important;
}

/* Give readable text enough vertical room instead of forcing it into the
   old micro-type card height. */
@media(min-width:1100px){
  .tf-homepage .country-network-premium .country-market-card{
    height:auto!important;
    min-height:318px!important;
    max-height:none!important;
  }
  .tf-homepage .country-network-premium .country-market-body.country-market-body-premium{
    min-height:145px!important;
    height:auto!important;
    max-height:none!important;
    padding-top:13px!important;
    padding-bottom:12px!important;
  }
}
@media(min-width:1100px) and (max-width:1399px){
  .tf-homepage .country-network-premium .country-market-source{font-size:9px!important}
  .tf-homepage .country-network-premium .country-market-name{font-size:15px!important}
  .tf-homepage .country-network-premium .country-market-copy{font-size:10px!important}
  .tf-homepage .country-network-premium .country-market-benefits b{font-size:8.5px!important}
  .tf-homepage .country-network-premium .country-market-benefits small{font-size:7.5px!important}
}

/* ---------- /packages comparison page ---------- */
.tf-packages-compare .tf-packages-compare-hero .eyebrow{
  font-size:11px!important;
}
.tf-packages-compare .tf-packages-compare-hero p{
  color:#d8e3ef!important;
  font-size:14px!important;
  line-height:1.6!important;
}
.tf-packages-compare .tf-packages-currency a{
  font-size:12px!important;
}
.tf-packages-compare .tf-packages-rate{
  color:#c3d2e2!important;
  font-size:11px!important;
}
.tf-packages-compare .tf-packages-compare-head>div>span{
  font-size:10px!important;
}
.tf-packages-compare .tf-packages-compare-head>p{
  color:#4d667e!important;
  font-size:12px!important;
  line-height:1.55!important;
}
.tf-packages-compare .tf-packages-compare-card{
  padding:20px!important;
  border-color:#cfdbe6!important;
}
.tf-packages-compare .tf-packages-compare-card .popular{
  font-size:9px!important;
  padding:6px 10px!important;
}
.tf-packages-compare .tf-packages-compare-card .card-head small{
  font-size:10px!important;
}
.tf-packages-compare .tf-packages-compare-card .card-head h3{
  font-size:20px!important;
}
.tf-packages-compare .tf-packages-compare-card .card-head p{
  min-height:56px!important;
  color:#405b74!important;
  font-size:12px!important;
  line-height:1.55!important;
  font-weight:500!important;
}
.tf-packages-compare .tf-packages-compare-card .price-box span,
.tf-packages-compare .tf-packages-compare-card .price-box small{
  color:#536b82!important;
  font-size:10px!important;
  font-weight:650!important;
}
.tf-packages-compare .tf-packages-compare-card .feature-list li{
  color:#334f69!important;
  font-size:11.5px!important;
  line-height:1.4!important;
  padding:8px 0!important;
}
.tf-packages-compare .tf-packages-compare-card .feature-list i{
  width:19px!important;
  height:19px!important;
  flex-basis:19px!important;
  font-size:9px!important;
}
.tf-packages-compare .tf-packages-compare-card .card-actions a{
  min-height:42px!important;
  font-size:11px!important;
}

/* ---------- /package landing page (same tiny-type system) ---------- */
.tf-package-hub .tf-pkg-eyebrow,
.tf-package-hub .tf-pkg-control-copy>span,
.tf-package-hub .tf-pkg-simple-help>div>span{
  font-size:10px!important;
}
.tf-package-hub .tf-pkg-simple-copy p,
.tf-package-hub .tf-pkg-control-copy p{
  color:#47627a!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.tf-package-hub .tf-pkg-simple-actions a{
  font-size:11px!important;
}
.tf-package-hub .tf-pkg-simple-panel-head>span,
.tf-package-hub .tf-pkg-simple-panel-head small,
.tf-package-hub .tf-pkg-simple-stats span,
.tf-package-hub .tf-pkg-simple-ref{
  font-size:10px!important;
}
.tf-package-hub .tf-pkg-currency-control>span,
.tf-package-hub .tf-pkg-currency-control>small,
.tf-package-hub .tf-pkg-currency-control nav a{
  font-size:10px!important;
}
.tf-package-hub .tf-pkg-decision-top>div>span{
  font-size:10px!important;
}
.tf-package-hub .tf-pkg-recommended{
  font-size:9px!important;
}
.tf-package-hub .tf-pkg-decision-desc{
  min-height:54px!important;
  color:#405b74!important;
  font-size:12px!important;
  line-height:1.55!important;
}
.tf-package-hub .tf-pkg-decision-price small,
.tf-package-hub .tf-pkg-decision-price span{
  color:#536b82!important;
  font-size:10px!important;
}
.tf-package-hub .tf-pkg-decision-includes{
  font-size:10px!important;
}
.tf-package-hub .tf-pkg-decision-card li{
  color:#344f69!important;
  font-size:11px!important;
  line-height:1.4!important;
  padding:8px 0!important;
}
.tf-package-hub .tf-pkg-decision-card li i{
  font-size:9px!important;
}
.tf-package-hub .tf-pkg-decision-actions a{
  min-height:42px!important;
  font-size:11px!important;
}
.tf-package-hub .tf-pkg-how article>span{
  font-size:10px!important;
}
.tf-package-hub .tf-pkg-how b{
  font-size:12px!important;
}
.tf-package-hub .tf-pkg-how p{
  color:#d2dce6!important;
  font-size:10.5px!important;
}
.tf-package-hub .tf-pkg-simple-help p{
  color:#465f77!important;
  font-size:12px!important;
}
.tf-package-hub .tf-pkg-simple-help>a{
  font-size:11px!important;
}

/* ---------- Commercial /package/{slug} legacy detail ---------- */
/* This same file is loaded a second time after the page-specific stylesheet
   from legacy-show.php, so these declarations win there as well. */
.legacy-premium-section-head>span{
  font-size:11px!important;
}
.legacy-premium-section-head p{
  color:#465f77!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.legacy-premium-service-no{
  font-size:10px!important;
}
.legacy-premium-service>div strong{
  color:#153a5e!important;
  font-size:13px!important;
  line-height:1.35!important;
}
.legacy-premium-service>div small{
  color:#50677d!important;
  font-size:11px!important;
  line-height:1.45!important;
}
.legacy-premium-trust-strip strong{
  color:#23435f!important;
  font-size:11.5px!important;
}
.legacy-premium-trust-strip small{
  color:#526a80!important;
  font-size:10px!important;
  line-height:1.4!important;
}
.legacy-premium-currency-switch>span,
.legacy-premium-currency-switch a{
  color:#50677d!important;
  font-size:10px!important;
}
.legacy-premium-card p,
.legacy-premium-price small,
.legacy-premium-price span,
.legacy-premium-mini-list span,
.legacy-premium-safe-note span,
.legacy-premium-membership-note p{
  color:#4d657c!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}
.legacy-premium-card-label,
.legacy-premium-membership-note>span{
  font-size:10px!important;
}