/* What every page of the public site shares (2026-11-06; until then in irwin-home.css): the page's background, the
   header (the logo, the page's language under it, the menu, Sign up / Login and, at the far right, the other language
   with its flag when pointed at) and how the header folds on narrow and short windows.
   Loaded by index.html, home-fr.html (with irwin-home.css after it) and by sign-in, sign-up, the account form and the
   legal pages (with irwin-pages.css after it); the colours are css/irwin-colors.css's names. Loaded after
   irwin-site-theme.css.
     - the page                                  - the language button and its flags
     - the header and its menu                   - the header on smaller windows (wide, laptop, tablet, phone, short) */

/* ---- the page ---------------------------------------------------------------------------------------------------- */
/* (no scroll-behavior: smooth here: the page's own script, js/webflow.js, already glides to a section when its menu tab is
   clicked; both together made the glide crawl, so a click seemed to do nothing, 2026-11-05) */
body { background-color: var(--ih-page); color: var(--ih-text); }
html[data-theme="dark"] body { background-color: var(--ih-page); }
.w-container { max-width: 1120px; }

/* ---- the header and its menu ------------------------------------------------------------------------------------- */
/* header: the same dark grey, a little lighter shadow; the buttons rounded */
.menu { box-shadow: 0 2px 18px rgba(0, 0, 0, .22); }
.link-2 { border-radius: var(--ih-radius-button); }
/* the menu's tabs: orange when pointed at (irwin-site-theme.css), and an orange line growing under them */
.nav-link { position: relative; }
.nav-link:after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 14px; height: 2px; border-radius: 2px;
    background: var(--ih-orange); transform: scaleX(0); transition: transform .2s ease-out; }
.nav-link:hover:after, .nav-link:focus-visible:after { transform: scaleX(1); }
/* the menu folded behind its button (narrow screens): the header's dark grey, the tabs one under the other */
.w-nav-button.w--open { background-color: var(--ih-orange); }
.w-nav-overlay .w-nav-menu, .w--nav-menu-open, .w-nav-menu[data-nav-menu-open] { background: var(--ih-header); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.w-nav-overlay .nav-link { display: block; padding: 14px 24px; color: var(--ih-header-text); text-align: left; }
.w-nav-overlay .nav-link:after { left: 24px; right: auto; width: 40px; bottom: 8px; }
/* the buttons, reached with the keyboard: an orange ring */
.w-button:focus-visible, .link-2:focus-visible { outline: 3px solid rgba(var(--ih-orange-rgb), .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .nav-link:after { transition: none; }
}

/* the header: the menu takes the room, the buttons (Sign up, Login, the language) keep theirs, all on one line */
@media (min-width: 992px) {
    .menu .row-5 { display: flex; align-items: flex-start; }
    .menu .row-5:before, .menu .row-5:after { display: none; }
    .menu .row-5 > .column { flex: 1 1 auto; width: auto; float: none; }
    .menu .row-5 > .column-6 { flex: none; width: auto; float: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .menu .column-6 .link-2.irwin-signup-button { margin-right: 0 !important; }
    .menu .row-5, .menu .row-5 > .column-6 { position: static; }   /* (the button is placed against the header itself, not its column) */
    .menu .irwin-lang-switch { position: absolute; top: 26px; right: 24px; margin-top: 0 !important; }
    .menu > .w-container { max-width: none; margin-left: max(20px, calc((100vw - 1120px) / 2)); margin-right: max(220px, calc((100vw - 1120px) / 2)); }
}
/* 992 to 1079px (French words are longer): the menu and the buttons tighter still */
@media (min-width: 992px) and (max-width: 1079px) {
    .menu .navbar .nav-link { padding-left: 5px; padding-right: 5px; font-size: 12px; }
    .menu .nav-link:after { left: 5px; right: 5px; }
    .menu .column-6 .link-2 { padding: 8px 9px; font-size: 12px; letter-spacing: .4px; }
}
/* 992 to 1199px: less room; a narrower language button, still at the right edge, and the room kept for it smaller */
@media (min-width: 992px) and (max-width: 1199px) {
    .menu > .w-container { margin-right: 130px; }
    .menu .irwin-lang-switch { right: 16px; min-width: 0; }
}
.menu .column-6 { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.menu .column-6 .link-2, .menu .column-6 .irwin-lang-switch { margin-top: 24px; }

/* ---- the language button and its flags --------------------------------------------------------------------------- */
/* under the logo: the page's language, a word (not a link) */
.irwin-lang-now { cursor: default; user-select: none; -webkit-user-select: none; }   /* (it catches its clicks: the logo's link lies under it) */

/* the other language, at the far right: an outlined button; pointed at, its flag fills it (Canada for English, Quebec
   for French), with a light sweeping over it like a flag in the wind; pressed, it opens the page in that language */
.irwin-lang-switch { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    height: 38px; min-width: 100px; padding: 0 7px; overflow: hidden; border: 1px solid rgba(215, 227, 232, .5); border-radius: var(--ih-radius-button);
    color: var(--ih-header-text); font: 700 14px/1 Lato, sans-serif; letter-spacing: .6px; text-decoration: none;
    transition: border-color .25s ease-out, box-shadow .25s ease-out, transform .08s ease-out; }
.irwin-lang-switch .irwin-flag { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; opacity: 0; transition: opacity .2s ease-out; }
.irwin-lang-to-fr .irwin-flag-ca, .irwin-lang-to-en .irwin-flag-qc { display: none; }
.irwin-flag-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.irwin-lang-text { position: relative; padding: 3px 9px; border-radius: 6px; transition: color .2s ease-out, background-color .2s ease-out; }
.irwin-lang-switch:hover, .irwin-lang-switch:focus-visible { border-color: rgba(255, 255, 255, .85); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.irwin-lang-switch:hover .irwin-flag, .irwin-lang-switch:focus-visible .irwin-flag { opacity: 1; }
.irwin-lang-switch:hover .irwin-lang-text, .irwin-lang-switch:focus-visible .irwin-lang-text {
    color: #fff; background-color: rgba(17, 19, 21, .85); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.irwin-lang-switch:active { transform: translateY(1px); }
.irwin-lang-switch:focus-visible { outline: 3px solid rgba(var(--ih-orange-rgb), .55); outline-offset: 2px; }
/* the pieces of the flags come in */
.irwin-flag rect, .irwin-flag g, .irwin-flag use { transform-box: fill-box; transform-origin: center; }
.irwin-flag-left { transform: translateX(-100%); }
.irwin-flag-right { transform: translateX(100%); }
.irwin-flag-leaf { transform: scale(0) rotate(-120deg); }
.irwin-flag-blue { transform: scale(0); }
.irwin-flag-cross-h { transform: scaleX(0); }
.irwin-flag-cross-v { transform: scaleY(0); }
.irwin-flag-lis { transform: scale(0); }
.irwin-flag-shine { transform: translateX(-100%); }
.irwin-lang-switch:hover .irwin-flag-left, .irwin-lang-switch:hover .irwin-flag-right,
.irwin-lang-switch:focus-visible .irwin-flag-left, .irwin-lang-switch:focus-visible .irwin-flag-right { transform: translateX(0); }
.irwin-lang-switch:hover .irwin-flag-leaf, .irwin-lang-switch:focus-visible .irwin-flag-leaf { transform: scale(1) rotate(0); }
.irwin-lang-switch:hover .irwin-flag-blue, .irwin-lang-switch:focus-visible .irwin-flag-blue { transform: scale(1); }
.irwin-lang-switch:hover .irwin-flag-cross-h, .irwin-lang-switch:focus-visible .irwin-flag-cross-h { transform: scaleX(1); }
.irwin-lang-switch:hover .irwin-flag-cross-v, .irwin-lang-switch:focus-visible .irwin-flag-cross-v { transform: scaleY(1); }
.irwin-lang-switch:hover .irwin-flag-lis, .irwin-lang-switch:focus-visible .irwin-flag-lis { transform: scale(1); }
@media (prefers-reduced-motion: no-preference) {
    .irwin-flag-left, .irwin-flag-right { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
    .irwin-flag-leaf { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .15s; }
    .irwin-flag-blue { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
    .irwin-flag-cross-h { transition: transform .35s cubic-bezier(.2, .8, .2, 1) .12s; }
    .irwin-flag-cross-v { transition: transform .35s cubic-bezier(.2, .8, .2, 1) .12s; }
    .irwin-flag-lis { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
    .irwin-flag-lis1 { transition-delay: .25s; } .irwin-flag-lis2 { transition-delay: .32s; }
    .irwin-flag-lis3 { transition-delay: .39s; } .irwin-flag-lis4 { transition-delay: .46s; }
    .irwin-lang-switch:hover .irwin-flag-shine, .irwin-lang-switch:focus-visible .irwin-flag-shine { animation: irwin-flag-shine 2.4s linear .55s infinite; }
    .irwin-lang-switch:hover .irwin-flag, .irwin-lang-switch:focus-visible .irwin-flag { animation: irwin-flag-wave 2.4s ease-in-out .55s infinite; }
}
@keyframes irwin-flag-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes irwin-flag-wave { 0%, 100% { transform: skewY(0) scale(1.04); } 25% { transform: skewY(1.2deg) scale(1.04); } 75% { transform: skewY(-1.2deg) scale(1.04); } }

/* ---- the header on smaller windows ------------------------------------------------------------------------------- */
/* screens up to 1160px: a margin on each side (the logo touched the edge) */
@media (max-width: 1160px) {
    .w-container { box-sizing: border-box; padding-left: 20px; padding-right: 20px; }
}
/* 992 to 1180px: the menu and the buttons a little tighter, so that all of it stays on one line (the menu fell under it) */
@media (min-width: 992px) and (max-width: 1180px) {
    .menu .navbar .nav-link { padding-left: 7px; padding-right: 7px; font-size: 13px; }
    .menu .nav-link:after { left: 7px; right: 7px; }
    .menu .column-6 .link-2 { padding: 9px 11px; font-size: 13px; letter-spacing: .8px; }
    .menu .row-5 > .column-6 { gap: 6px; }
    .irwin-lang-switch { min-width: 0; padding: 0 11px; font-size: 13px; }
    .image-13 { width: 104px; }
    .menu .link-9.w--current { left: 17px; }   /* (the word under the smaller logo: it stood 17px to its left; moved, not resized, so the menu keeps its room) */
}
/* 992 to 1079px again, after the rule above (2026-11-06): it came first and was overridden, so the French menu (longer
   words) fell onto a second line under the header from 992 to about 1060px */
@media (min-width: 992px) and (max-width: 1079px) {
    .menu .navbar .nav-link { padding-left: 5px; padding-right: 5px; font-size: 12px; }
    .menu .nav-link:after { left: 5px; right: 5px; }
    .menu .column-6 .link-2 { padding: 8px 9px; font-size: 12px; letter-spacing: .4px; }
}
/* tablets and phones (the menu folded behind its button): the header grows with what it holds; the logo and the menu
   button on one line, Sign up, Login and the language beside them, or on a line of their own under them on phones
   (they fell out of the header over the page) */
@media (max-width: 991px) {
    .menu { height: auto; min-height: 90px; }
    .menu .row-5 { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
    .menu .row-5:before, .menu .row-5:after { display: none; }
    .menu .row-5 > .column { flex: 1 1 auto; width: auto; float: none; padding: 0; }
    .menu .row-5 > .column-6 { flex: 0 1 auto; width: auto; float: none; padding: 0; flex-wrap: nowrap; gap: 6px; }
    .menu .column-6 .link-2, .menu .column-6 .irwin-lang-switch { margin-top: 0; }
    .irwin-lang-switch { min-width: 0; height: 36px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 640px) {
    .menu .row-5 > .column-6 { flex: 1 1 100%; justify-content: center; padding: 0 0 12px; }
    .menu .column-6 .link-2 { padding: 8px 12px; font-size: 12px; letter-spacing: 1px; }
    .irwin-lang-switch { height: 34px; font-size: 12px; }
}
/* a short window (a quarter of the screen, or its top or bottom half; 2026-11-06): the header lower */
@media (max-height: 620px) and (min-width: 641px) {
    .menu { height: 70px; min-height: 0; }
    .menu .navbar { margin-top: 2px; }
    .menu .column-6 .link-2, .menu .column-6 .irwin-lang-switch { margin-top: 15px; }
}
@media (max-height: 620px) and (min-width: 992px) {
    .menu .irwin-lang-switch { top: 16px; }
}
/* very short (a quarter of a small screen): the header no longer stays at the top, it scrolls away with the page */
@media (max-height: 420px) and (min-width: 641px) {
    .menu { position: absolute; }
}