/* ============================================================
   Production overrides.
   Kept in its own file because site.css is regenerated by
   scripts/extract.mjs and anything appended there would be lost.
   ============================================================ */

/* --- server-rendered markup uses anchors where the prototype used buttons --- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--btn-fg);padding:10px 16px;z-index:999}
.skip:focus{left:8px;top:8px}
a.nav-btn{text-decoration:none}
.menu a{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 11px;color:var(--body);font-family:var(--f-body);font-size:14.5px;cursor:pointer;line-height:1.35;text-decoration:none}
.menu a:hover{background:var(--surface-2);color:var(--ink)}
.menu a b{display:block;font-weight:600;color:var(--ink)}
.menu a span{font-size:12px;color:var(--muted)}
.foot-grid a.lnk{display:block;background:none;border:0;padding:3px 0;color:var(--body);font:inherit;font-size:14.5px;cursor:pointer;text-align:left;text-decoration:none}
.foot-grid a.lnk:hover{color:var(--prime)}
.disc a.lnk{color:inherit}

/* --- heading levels are corrected for semantics; these keep the original
       visual size, so an h3 that looks like a small label still does --- */
.as-h2{font-size:clamp(25px,3.2vw,38px);letter-spacing:-.02em}
.as-h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.01em}
.as-h4{font-size:16px;letter-spacing:0;font-weight:600}
h2.as-h3,h3.as-h3{line-height:1.1}
h2.as-h4,h3.as-h4,h4.as-h4{line-height:1.25}
.article h2.as-h3,.article h3.as-h3{font-size:19px;margin:1.5em 0 .4em}
.article h3.as-h4,.article h4.as-h4{font-size:16px;margin:1.3em 0 .3em;font-family:var(--f-body);font-weight:600}

/* --- images --- */
.imgph.filled{border-style:solid;padding:0}
.imgph picture{display:block;width:100%;height:100%}
.imgph picture img{width:100%;height:100%;object-fit:cover;display:block}

/* --- forms --- */
input[aria-invalid="true"]{border-color:var(--crit)}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}

/* --- focus visibility, checked against WCAG 2.1 AA --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--prime);outline-offset:2px;border-radius:2px;
}
/* hero and closing band are light surfaces now, so the ring stays --prime */

/* --- print: a broker printing a program page should get the criteria, not the chrome --- */
@media print{
  .site-head,.site-foot,.cta-band,.menu,.menu-btn,.skip,.tip{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero{background:none;color:#000}
  .hero h1,.hero .lede,.hero p{color:#000}
  a[href^="/"]::after{content:" (lendmaxcapital.ca" attr(href) ")";font-size:9pt;color:#444}
  .card,.cell,.panel{break-inside:avoid}
}

/* image-slot label: was an <h4>, demoted so the heading outline does not
   change when a photograph is uploaded */
.imgph-title{margin:12px 0 6px;font-family:var(--f-body);font-size:14.5px;font-weight:600;color:var(--ink)}

/* breadcrumbs are anchors in production, not buttons */
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--prime);text-decoration:underline}

/* --- pricing calculator verdict panel --- */
.calc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.calc-verdict{font-family:var(--f-display);font-size:clamp(19px,2.4vw,24px);line-height:1.25;color:var(--ink);letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance}
.calc-reasons{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:7px}
.calc-reasons li{display:flex;gap:10px;font-size:15px;align-items:flex-start}
.calc-reasons li .mono{padding-top:2px;font-weight:600}