/* caledonpeak.com polish layer. Load AFTER assets/site.css:
   <link rel="stylesheet" href="assets/polish.css">
   Refinement only: no copy, layout concept, colour or font changes. */

/* 2. Headings and lead copy: no orphans, comfortable measure */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
main p{max-width:68ch}

/* 3. Touch targets: footer and inline links were 16-22px tall.
   Padding grows the hit area without moving the layout much. */
.footer a,.breadcrumbs a,main p a,main li a{display:inline-block;padding-block:11px;margin-block:-11px}
.menu{min-width:48px;min-height:48px}

/* 4. Browser surfaces the design didn't draw */
::selection{background:var(--gold);color:var(--ink)}
html{scrollbar-color:var(--slate) var(--paper)}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

/* 5. Interaction feel: fast, specific properties, press feedback */
a,button{transition:color .18s cubic-bezier(.22,1,.36,1),background-color .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1)}
button:active,.btn:active{transform:scale(.97)}

/* 6. Tabular figures for the phone number and any numerals */
[href^="tel:"]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  a,button{transition:none}
  button:active,.btn:active{transform:none}
}

/* 7. Trust row: dividers were uneven in the 2-column layout (only the first
   item had a left edge). The grid owns the outer edge, items own the inner ones. */
@media(min-width:561px){
  .trust-grid{border-left:1px solid #263441}
  .trust-item,.trust-item:first-child{border-left:0}
}
@media(min-width:561px) and (max-width:900px){
  .trust-item{border-bottom:1px solid #263441}
  .trust-item:nth-last-child(-n+2){border-bottom:0}
}