/* =========================================================
   Ligne orange: WordPress layer on top of wdm.css
   Fonts (self-hosted, OFL), states the prototype handled in JS,
   admin bar, skip link, forms, cookie preferences, generic pages.
   ========================================================= */

/* ---------- fonts ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- base ---------- */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.page{margin:0}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:104px}
@media (max-width:1000px){[id]{scroll-margin-top:80px}}
body.wdm-lock{overflow:hidden}
.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* skip link */
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;background:var(--orange);color:var(--ink);font-weight:600;padding:12px 18px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px;color:var(--ink)}

/* admin bar */
.admin-bar .hdr{top:32px}
@media (max-width:782px){.admin-bar .hdr{top:46px}}
@media (max-width:600px){.admin-bar .hdr{top:0}}
.admin-bar .mmenu{top:0}

/* header: current section on the Services button, hidden mega menu */
.navbtn[data-current]{background:linear-gradient(var(--orange),var(--orange)) no-repeat 0 100%/calc(100% - 20px) 2px}
.mega .wrap{position:relative}

/* the main element must not create a stacking context above the header */
#main{display:block}

/* hover: wdm.css has a:hover{color:inherit}, which beats the colour of cards that are links
   (a dark tile inside a light section would turn dark-on-dark). Keep each card's own colour. */
a.tile:hover,a.light:hover,a.stone:hover,a.orange:hover,a.tile-o:hover,a.card:hover{color:var(--ink)}
a.dark:hover,a.deep:hover,a.tile-ink:hover,a.card-ink:hover{color:var(--paper)}

/* contrast: secondary text on dark cards that aren't inside a .dark section */
.ticket .muted,.tile-ink .muted,.card-ink .muted,.okbox .muted{color:var(--muted-dark)}
/* small orange labels inside light callout boxes use a darker orange (5.8:1); dark callouts keep orange */
.callout .mono-o{color:#A04A0C}
.dark .callout .mono-o,.deep .callout .mono-o{color:var(--orange)}

/* dashed samples wrap inside long text and on small screens */
.prose .sample{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (max-width:1000px){
.sample{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
a[href^="mailto:"]{overflow-wrap:anywhere}
}

/* very narrow phones: long single words in display type must not overflow */
@media (max-width:420px){
.d-xl,.d-l{font-size:38px}
.h1{font-size:36px}
}
@media (max-width:1000px){
.d-xl,.d-l,.h1,.h2{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
}

/* About: Toronto ↔ Montréal line, scaled for phones */
@media (max-width:600px){
[role="img"][aria-label^="Toronto"] span[style*="font-size: 44px"]{font-size:28px !important}
[role="img"][aria-label^="Toronto"] .mono{font-size:11px}
[role="img"][aria-label^="Toronto"] .cta-line .mono{white-space:normal !important;width:150px;text-align:center;line-height:1.4}
}

/* home hero: hand-tuned phone version of the "three modules" visual */
.wdm-only-sm{display:none}
@media (max-width:1000px){.wdm-only-sm{display:block}}
@media (min-width:600px) and (max-width:1000px){.wdm-only-sm{max-width:560px}}

/* ---------- forms ---------- */
.wdm-form{margin:0}
.wdm-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.seg label:has(input:checked){background:var(--ink);color:var(--paper)}
.choice:has(input:checked){border-color:var(--ink);background:#FFF7EF}
.errbox:focus{outline:3px solid var(--ink);outline-offset:3px}
.errbox a:focus-visible{outline-color:var(--ink)}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* ---------- cookie banner ---------- */
.cookie .btn-ink{min-width:96px}
.ck-prefs{margin-top:16px;border-top:1px solid var(--line-light);padding-top:8px}
.ck-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line-light);cursor:pointer}
.ck-row input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--orange);flex:none}
.ck-row b{display:block;font-size:15px}
.ck-row small{display:block;font-size:13px;color:var(--muted-light);margin-top:2px}

/* ---------- generic pages (not designed one by one) ---------- */
.generic-prose{max-width:760px}
.generic-prose>*:first-child{margin-top:0}
.generic-prose h2{margin:56px 0 0;font-size:34px;line-height:1.1;font-weight:700;font-stretch:110%;letter-spacing:-.02em}
.generic-prose h3{margin:40px 0 0;font-size:24px;line-height:1.2;font-weight:700;font-stretch:106%}
.generic-prose ul,.generic-prose ol{margin:16px 0 0;padding-left:22px;font-size:18px;line-height:1.7}
.generic-prose a{text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.generic-prose img{max-width:100%;height:auto}
.generic-prose blockquote{margin:32px 0 0;border-left:6px solid var(--orange);padding:8px 0 8px 24px;font-size:20px}
.nav-links{display:flex;gap:16px;margin-top:40px;font-family:var(--f-mono)}