/* =====================================================================
   aidalabs-blue.css -- AIDA Labs palette layer for pages copied from the
   AIDA Consulting site (consulting.aida-job-search.ca).
   Loaded AFTER each page's own <style>, so it only re-tints: the page's
   layout and text stay exactly as they were.
   Blues: #49698C (blue), #7FA3C9 (light blue), #1F2A36 (navy)
   ===================================================================== */

/* AIDA Labs tokens used by the toolbox components (toolbox.css) */
:root{
  --al-ink:#18212B; --al-bg:#1F2A36; --al-surface:#26323F; --al-surface2:#2E3B4A;
  --al-line:#3A4A5C; --al-line2:#4C5F74;
  --al-text:#F3ECE4; --al-sub:#C9D3DE;
  --al-gold:#D7AF59; --al-gold-d:#B8923E; --al-gold-bg:#3A2E1C; --al-gold-glow:rgba(215,175,89,.40);
  --al-blue:#49698C; --al-blue-l:#7FA3C9; --al-blue-bg:#1F2A36; --al-teal:#A4CBD9;
  --al-ok:#6FCF97; --al-warn:#E3B04B; --al-bad:#E07A6A;
  --al-serif:Georgia,'Gelasio','Times New Roman',serif;
  --al-sans:Calibri,Carlito,'Segoe UI',Helvetica,Arial,sans-serif;
  --al-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

/* ---------- THEME: page colours. Change only this block to re-colour the site. ---------- */
:root{
  /* "Paris dusk": the evening sky of the AIDA caf\00E9 illustration, with deep navy cards */
  --bg:#3F5169; --surface:#2B3A4E; --surface2:#33445A; --line:#5A6E89; --line2:#6E82A0; --sub:#D5DDE6;
  --pg-top:#4A5E78; --pg-mid:#3F5169; --pg-bot:#34445A; --hdr:rgba(52,68,90,.96);
  --blue:#49698C; --blue-l:#7FA3C9; --blue-bg:#1F2A36; --navy:#1F2A36;
}
html{background:var(--pg-bot)}
body{background:linear-gradient(180deg,var(--pg-top) 0%,var(--pg-mid) 50%,var(--pg-bot) 100%)!important;min-height:100vh}
header.site{background:var(--hdr)!important;border-bottom:2px solid var(--blue)!important}
footer.site{border-top:2px solid var(--blue)!important;background:var(--pg-bot)!important}
.brand:hover,button.brand[aria-expanded="true"]{background:var(--surface2)}
.dd{background:var(--surface)!important;border-color:var(--line2)!important}

/* "What that means in practice": second panel in light blue */
.twocol .pt:nth-child(2){border-left-color:var(--blue-l)}
.twocol .pt:nth-child(2) b{color:var(--blue-l)}

/* guardrail number circles alternate gold / light blue */
.gr .g:nth-child(even) .n{background:var(--blue-l)}
.gr .g{transition:border-color .2s,transform .2s}
.gr .g:hover{border-color:var(--blue-l);transform:translateY(-2px)}

/* founder panels */
.bio .panel:nth-child(2){border-top-color:var(--blue-l)}
.bio .panel:nth-child(2) h3{color:var(--blue-l)}

/* section headings get a thin blue rule */
.about h2{padding-bottom:8px!important;border-bottom:2px solid rgba(127,163,201,.35)!important}

/* ---------- home page: product pop-out cards + accordion ---------- */
.al-products{margin-top:10px}
.al-products .al-pop-body p{font-size:17px}
.al-pop-body h3{font-family:var(--al-serif)!important;font-weight:700}
.al-products .al-pop-body .al-open{display:inline-block;margin-top:12px;color:var(--al-gold);font-weight:700}
.al-accordion-intro{margin-bottom:18px}
.al-notch{margin:6px 0 10px}
.al-notch > a{text-decoration:none;color:var(--al-text)}
.al-notch-cap i{display:block;font-style:normal;font-size:15px;font-weight:700;color:var(--al-gold);margin-top:8px;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s .1s,opacity .25s .15s}
.al-notch > :is(:hover,:focus-visible) .al-notch-cap i{max-height:40px;opacity:1}
@media (max-width:760px){.al-notch-cap i{max-height:none;opacity:1}}

/* ---------- "What that means in practice" boxes as links ---------- */
a.pt{display:block;text-decoration:none;color:inherit;position:relative;transition:transform .2s,border-color .2s,box-shadow .2s}
a.pt:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.45)}
a.pt{cursor:pointer;outline:none}
a.pt:focus-visible{outline:2px solid var(--blue-l);outline-offset:3px} /* keyboard users only */
a.pt .al-more{display:block;margin-top:12px;font-weight:700;font-size:16px;color:var(--al-gold)}
a.pt:nth-child(2) .al-more{color:var(--blue-l)}

/* ---------- How we build page ---------- */
.al-role{cursor:default}
.al-role i{display:block;margin-top:10px;font-style:normal;font-weight:700;color:var(--blue-l);font-size:16px}
.al-steps{display:grid;gap:16px}
.al-steps .panel{border-top-color:var(--blue-l)}
.al-steps .panel:nth-child(odd){border-top-color:var(--gold)}
.al-step{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-l);margin-bottom:4px}
.al-steps .panel p{font-size:18px}
.al-lesson{background:rgba(127,163,201,.10);border-left:4px solid var(--blue-l);padding:12px 14px;border-radius:6px}
.al-check{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.al-check li{position:relative;padding:14px 16px 14px 48px;background:var(--surface);border:1px solid var(--line);border-radius:10px;font-size:17px}
.al-check li::before{content:"✓";position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;
  background:var(--gold);color:#1F2A36;font-weight:800;display:grid;place-items:center;font-size:15px}
.al-check li:nth-child(even)::before{background:var(--blue-l)}
.al-back{color:var(--al-gold);font-weight:700;text-decoration:none;font-size:18px}
@media (max-width:600px){.al-check{grid-template-columns:minmax(0,1fr)}}
.al-steps .panel p{max-width:none}
.al-next{margin-top:32px}

/* Clickable boxes behave like buttons: no underlines anywhere inside, lift on hover, press on click */
a.pt,a.pt *,a.al-pop,a.al-pop *,.al-notch > a,.al-notch > a *{text-decoration:none!important}
a.pt{user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 6px 18px rgba(0,0,0,.28)}
a.pt:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.5);background:var(--surface2)}
a.pt:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(0,0,0,.4);transition-duration:.05s}
a.pt b{color:var(--gold)}
a.pt:nth-child(2) b{color:var(--blue-l)}
a.pt span{color:var(--text)}
.al-back,.al-back:hover{text-decoration:none!important}
.al-back:hover{color:var(--text)}
.al-next a.pt{max-width:none}

/* ---------- "Our products": button boxes like "What that means in practice", blue accents ---------- */
.al-prodgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
a.pt.al-prod b{color:var(--blue-l)}
a.pt.al-prod span{color:var(--text)}
a.pt.al-prod:nth-child(1){border-left-color:var(--gold)}
a.pt.al-prod:nth-child(1) b{color:var(--gold)}
a.pt.al-prod:nth-child(2){border-left-color:var(--blue-l)}
a.pt.al-prod:nth-child(3){border-left-color:var(--navy)}
@media (max-width:860px){.al-prodgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Toolbox page ---------- */
.about code{font-family:var(--al-mono);font-size:15px;background:var(--surface);border:1px solid var(--line);padding:2px 8px;border-radius:6px;color:var(--gold)}
.al-tags{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 12px}
.al-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.al-sw{border-radius:10px;padding:16px;min-height:96px;border:1px solid var(--line);color:#F3ECE4;display:flex;flex-direction:column;justify-content:flex-end}
.al-sw b{font-size:17px}.al-sw span{font-size:15px;font-family:var(--al-mono)}

/* ---------- Library ---------- */
.al-libgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.al-libgrid a.pt.al-prod:nth-child(4){border-left-color:var(--gold)}
.al-libgrid a.pt.al-prod:nth-child(5){border-left-color:var(--blue-l)}
.al-doc h1{margin-bottom:6px}
.al-doc h1 + p i{color:var(--sub);font-style:normal;font-size:16px}
.al-doc h3{font-family:var(--serif);font-size:22px;margin:28px 0 8px;color:var(--blue-l)}
.al-doc p,.al-doc li{font-size:18px;max-width:none}
.al-doc ul,.al-doc ol{padding-left:24px;margin:0 0 16px}
.al-doc li{margin:6px 0}
.al-doc li > ul,.al-doc li > ol{margin:6px 0}
.al-doc .al-hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.al-doc .al-tablewrap{overflow-x:auto;margin:12px 0 20px;border:1px solid var(--line);border-radius:10px}
.al-doc table{border-collapse:collapse;width:100%;font-size:16px;min-width:0}
.al-doc th{background:var(--surface2);text-align:left;color:var(--gold);font-weight:700}
.al-doc th,.al-doc td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.al-doc tr:nth-child(even) td{background:rgba(43,58,78,.55)}
.al-doc ul.al-checklist{list-style:none;padding-left:0}
.al-doc .al-cb{display:inline-grid;place-items:center;width:22px;height:22px;border:2px solid var(--blue-l);border-radius:5px;margin-right:10px;vertical-align:-4px;font-size:14px;color:#1F2A36}
.al-doc .al-cb.on{background:var(--blue-l)}
@media (max-width:860px){.al-libgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.al-doc table{font-size:15px}.al-doc th,.al-doc td{padding:8px}}
.al-doc details.al-code{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:8px 0 20px}
.al-doc details.al-code summary{cursor:pointer;padding:12px 16px;font-weight:700;color:var(--blue-l);font-size:16px}
.al-doc pre{margin:0;padding:16px;overflow-x:auto;border-top:1px solid var(--line);background:#1F2A36;border-radius:0 0 10px 10px}
.al-doc pre code{background:none;border:0;padding:0;color:#F3ECE4;font-size:14px;white-space:pre}
.al-libgrid a.pt.al-prod:nth-child(6){border-left-color:var(--navy)}
.al-pattern{margin-top:12px}
.al-palname{font-family:var(--serif);font-size:22px;color:var(--blue-l);margin:22px 0 4px}
.al-sw{border-color:rgba(0,0,0,.15)}
.al-doc pre.al-pre{background:#1F2A36;border:1px solid var(--line);border-radius:10px;padding:16px;overflow-x:auto;margin:12px 0 20px}
.al-doc pre.al-pre code{background:none;border:0;padding:0;color:#F3ECE4;font-size:14px;white-space:pre}
.al-libgrid a.pt.al-prod:nth-child(7){border-left-color:var(--gold)}.al-libgrid a.pt.al-prod:nth-child(8){border-left-color:var(--blue-l)}

/* ---- "See it working": six panels in two rows of three (Mike, 2026-10-04). Panels sit side by side (no overlap,
   so the always-visible descriptions are never covered); hover, tap or tab widens a panel within its row. ---- */
.al-six{counter-reset:al-notch;display:grid;gap:14px;margin:6px 0 10px}
.al-six .al-notch{display:flex;gap:10px;aspect-ratio:auto;min-height:250px;counter-reset:none;margin:0}
.al-six .al-notch > *{flex:1 1 0;min-width:0;grid-column:auto!important;border-radius:14px!important;border-width:3px;transition:flex-grow .35s ease-in-out,border-color .3s}
.al-six .al-notch > :is(:hover,:focus-visible){flex-grow:1.7}
.al-six .al-notch-cap{right:18px;top:62px}
.al-six .al-notch-cap span{max-height:none;opacity:1;margin-top:6px;font-size:16px}
.al-six .al-notch-cap i{max-height:none;opacity:1}
@media (max-width:760px){.al-six .al-notch{flex-direction:column;min-height:0}.al-six .al-notch > *{flex:none}}
/* breadcrumbs under the main header (2026-10-04) */
.al-crumbs{border-top:1px solid rgba(215,175,89,.22)}
.al-crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:9px;padding-bottom:9px;font-size:15px;line-height:1.4;color:var(--text,#E9EEF5)}
.al-crumbs a{color:var(--gold,#D7AF59);text-decoration:none;font-weight:700}
.al-crumbs a:hover,.al-crumbs a:focus-visible{text-decoration:underline}
.al-crumbs .sep{opacity:.6}
.al-crumbs [aria-current]{opacity:.9}
/* ---------- 2026-10-04: AIDA LABS home button, section menu, hovers, See it working pictures ---------- */
.btn.al-home{font-family:var(--al-serif);letter-spacing:.16em;font-weight:700}
.al-sections{border-top:1px solid rgba(215,175,89,.22)}
.al-sections .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:6px;padding-bottom:6px}
.al-sections .wrap::-webkit-scrollbar{display:none}
.al-sections a{flex:none;font-size:15px;font-weight:700;color:var(--al-text)!important;text-decoration:none!important;padding:8px 13px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.al-sections a:hover{background:var(--surface2)}
.al-sections a[aria-current="true"]{background:var(--al-gold);color:#1a1512!important}
.al-sections a:focus-visible{outline:2px solid var(--blue-l);outline-offset:2px}
[id="welcome"],[id="canada"],[id="ai"],[id="practice"],[id="see"],[id="guardrails"],[id="founder"]{scroll-margin-top:140px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* founder panels: the same hover as the guardrails */
.bio .panel{transition:border-color .2s,transform .2s}
.bio .panel:hover{border-color:var(--blue-l);transform:translateY(-2px)}
/* See it working: the Paris café picture behind the text, a different part of it in each panel */
.al-notch{min-height:400px}
.al-notch > .al-cafe{background-color:#1F2A36;background-repeat:no-repeat;background-size:auto,160% auto;
  background-image:linear-gradient(180deg,rgba(18,24,34,.86) 0%,rgba(18,24,34,.62) 48%,rgba(18,24,34,.32) 100%),url("/assets/paris-cafe-full.jpg")}
.al-cafe-1{background-position:0 0,20% 34%}
.al-cafe-2{background-position:0 0,95% 47%}
.al-cafe-3{background-position:0 0,85% 30%}
.al-cafe-4{background-position:0 0,40% 8%}
.al-notch > :is(:hover,:focus-visible) .al-notch-cap span{max-height:300px}
@media (min-width:761px) and (max-width:1100px){
  .al-notch{grid-template-columns:1fr 1fr;aspect-ratio:auto;gap:10px;min-height:0}
  .al-notch > *{grid-column:auto!important;grid-row:auto;border-radius:12px!important;border-width:2px;padding:64px 18px 18px;min-height:300px}
  .al-notch-cap{position:static}
  .al-notch > *::before{transform:scale(1);opacity:1}
  .al-notch-cap span{max-height:none;opacity:1;margin-top:6px}
  .al-notch-cap i{max-height:none;opacity:1}
}
@media (max-width:700px){[id="welcome"],[id="canada"],[id="ai"],[id="practice"],[id="see"],[id="guardrails"],[id="founder"]{scroll-margin-top:16px}}
/* See it working: the front page of each site behind its panel, faded, with bright text on top (2026-10-04) */
.al-notch > .al-shotbg{background-color:#1F2A36;background-repeat:no-repeat;background-size:auto,cover;background-position:0 0,left top}
.al-shotbg-1{background-image:linear-gradient(180deg,rgba(18,24,36,.48) 0%,rgba(18,24,36,.45) 55%,rgba(18,24,36,.29) 100%),url("/assets/panel-jobseeker.jpg")}
.al-shotbg-2{background-image:linear-gradient(180deg,rgba(18,24,36,.46) 0%,rgba(18,24,36,.43) 55%,rgba(18,24,36,.25) 100%),url("/assets/panel-recruiter.jpg")}
.al-shotbg-3{background-image:linear-gradient(180deg,rgba(18,24,36,.48) 0%,rgba(18,24,36,.45) 55%,rgba(18,24,36,.29) 100%),url("/assets/panel-projects.jpg")}
.al-shotbg-4{background-image:linear-gradient(180deg,rgba(18,24,36,.48) 0%,rgba(18,24,36,.45) 55%,rgba(18,24,36,.29) 100%),url("/assets/panel-hub.jpg")}
.al-shotbg .al-notch-cap b{color:#ECC58F;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.al-shotbg .al-notch-cap span{color:#FBF5EC;text-shadow:0 1px 8px rgba(0,0,0,.95)}
.al-shotbg .al-notch-cap i{color:#ECC58F}
.al-shotbg::before{color:#ECC58F}
/* tablets and phones: centre each panel on the main picture of its site (2026-10-04) */
@media (max-width:1100px){
  .al-notch > .al-shotbg-1{background-position:0 0,74% 52%}
  .al-notch > .al-shotbg-2{background-position:0 0,72% 60%}
  .al-notch > .al-shotbg-3{background-position:0 0,30% 70%}
  .al-notch > .al-shotbg-4{background-position:0 0,40% 48%}
}
/* lighter shading: keep the text readable with a stronger shadow */
.al-shotbg .al-notch-cap b{text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.85)}
.al-shotbg .al-notch-cap span,.al-shotbg .al-notch-cap i{text-shadow:0 1px 3px rgba(0,0,0,1),0 0 12px rgba(0,0,0,.95),0 0 24px rgba(0,0,0,.8)}
/* lighter shading: the text sits in a soft frosted box so it stays readable over the pictures */
/* desktop: the box appears on the open panel only; tablets and phones always show it */
.al-shotbg:is(:hover,:focus-visible) .al-notch-cap{background:rgba(18,24,36,.42);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1px solid rgba(236,197,143,.22);border-radius:12px;padding:12px 16px 14px;margin-left:-6px}
@media (max-width:1100px){.al-shotbg .al-notch-cap{background:rgba(18,24,36,.42);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1px solid rgba(236,197,143,.22);border-radius:12px;padding:12px 16px 14px;margin-left:0}}