/* Site additions on top of styles.css (the canvas stylesheet, kept as exported).
   Keep edits here so styles.css can be replaced from the canvas unchanged. */

/* Rules the canvas boards carried inline in their <helmet> block. */
body{margin:0}
a{color:inherit}
/* Hover colours only where there is a real pointer: on a phone a tapped link would stay orange. */
@media(hover:hover){a:not(.button):hover{color:#a64b20}}
@media(hover:none){
  .button:hover svg,.text-link:hover svg{transform:none}
  .text-link:hover{color:inherit}
  .text-link:hover::after{transform:scaleX(0)}
}

/* The sticky header that hides while reading and returns on any scroll up (site.js sets .ready).
   Phones get the bottom call bar instead, so not two pieces of fixed chrome on a small screen. */
@media(max-width:760px){.ready .site-header{position:relative}}
/* Where the sticky header holds the open menu (761-900px, landscape phones), the menu scrolls inside it. */
@media(max-width:900px){.ready .site-header nav.open{max-height:calc(100dvh - var(--header));overflow-y:auto;overscroll-behavior:contain}}

/* The menu icon turns into a cross while the menu is open (Safari keeps the two lines). */
.menu-toggle svg path{d:path("M4 8L20 8M4 16L20 16");transition:d 240ms var(--ease)}
.menu-toggle[aria-expanded="true"] svg path{d:path("M6 6L18 18M6 18L18 6")}

/* The status chip's dot sits on the first line when the chip wraps; the footer's call link never breaks. */
.hero-status{align-items:flex-start}
.hero-status .status-dot{margin-top:5px}
.site-footer>div:last-child>a{white-space:nowrap}

/* Touch screens: 44px targets for the footer links, the email links and the inline text links. */
@media(pointer:coarse){
  .footer-nav>div{gap:0!important}
  .footer-nav a,.site-footer>div:last-child>a{display:flex;align-items:center;min-height:44px}
  .site-footer a[href^="mailto"]{display:inline-flex;align-items:center;min-height:44px}
  .text-link::before{content:"";position:absolute;inset:-8px -6px}
}

/* The screenshot tabs on the home page: the canvas drew these with inline
   styles inside an <sc-for> template; the styles are the same, moved to classes. */
.screen-tabs{display:flex;flex-wrap:wrap;gap:8px}
.screen-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;border:1px solid #d9d4c8;background:transparent;color:#252521}
.screen-tab[aria-selected="true"]{border-color:#252521;background:#252521;color:#f8f7f3}
.screen-tab .concept-tag{padding:0 8px;border-radius:999px;font-size:11px;line-height:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px dashed currentColor;opacity:.85}
.screen-figure{margin:0;display:flex;flex-direction:column;gap:14px}
.screen-frame{padding:clamp(10px,2vw,24px);border-radius:20px;background:#efece5;border:1px solid #d9d4c8}
.screen-frame img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #d9d4c8;box-shadow:0 12px 32px rgba(37,37,33,.10)}
/* The screen captions are styled in home.css, which the canvas loads too. */