/* The guides (the SEO pages, such as /canadian-resume-format) and /guides, loaded after legal.css. legal.css draws
   the header, footer, hero, reading column, tables, callouts and FAQ. This adds what a guide needs on top: the
   breadcrumb and byline, an example resume drawn as a sheet of paper, before-and-after lines, the template downloads,
   the source notes, and the guide cards on /guides and under each guide. */

/* ---- Hero: a guide's H1 is longer than the privacy page's, so it runs a size smaller ---- */
.guide-hero h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.02; }
/* The hero runs straight into the reading column: legal.css gives each its own padding, which stacked up to a 144px gap. */
.guide-hero .wrap { padding-bottom: 32px; }
.legal.guide { padding-top: 16px; }
.guide > .wrap > .short:first-child { margin-top: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-faint); }
.crumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; }
.crumbs a:hover { border-bottom-color: var(--violet); }
.crumbs [aria-current="page"] { color: var(--ink); }
.byline { font-size: 15px; color: var(--ink-faint); }
.byline strong { color: var(--ink-soft); font-weight: 700; }

/* ---- The reading column: a guide's sections get a little more room than the policy text ---- */
.guide section { margin-top: 64px; }
.guide section > h2 { display: flex; align-items: center; gap: 12px; }
.guide section:nth-of-type(6n+2) .num { --chip: var(--mint); }
.guide section:nth-of-type(6n+3) .num { --chip: var(--pink); }
.guide section:nth-of-type(6n+4) .num { --chip: var(--violet); --chip-ink: #fff; }
.guide section:nth-of-type(6n+5) .num { --chip: var(--sky); }
.guide section:nth-of-type(6n) .num { --chip: var(--tomato); }
.guide .table-wrap { margin-top: 18px; }
.guide td:first-child { min-width: 110px; }
.src { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.src .icon { width: 13px; height: 13px; }
.checked { display: block; font-size: 13px; color: var(--ink-faint); font-weight: 500; }

/* ---- The sections of a resume, in order ---- */
.order { list-style: none; padding: 0 !important; counter-reset: order; display: grid; gap: 10px; }
.order li { counter-increment: order; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 !important; padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--paper); box-shadow: var(--shadow-chunky-sm); }
.order li::before { content: counter(order); display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 10px; background: var(--sun); font-family: var(--font-display); font-weight: 800; }
.order li.optional::before { background: var(--canvas); }
.order strong { display: block; font-family: var(--font-display); font-size: 18px; }
.order span { color: var(--ink-soft); }

/* ---- What to leave out: a grid of struck-through chips ---- */
.leave-out { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.leave-out li { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--tomato-soft); font-weight: 700; }
.leave-out .icon { flex: none; color: var(--tomato); stroke-width: 3; }

/* ---- Spelling: three columns, with Canada's highlighted ---- */
.guide td.ca { background: var(--mint-soft); font-weight: 700; }

/* ---- The example resume, as a sheet of paper ---- */
.example-note { display: flex; gap: 10px; align-items: flex-start; }
.example-note .icon { flex: none; margin-top: 3px; color: var(--violet); }
.sheet {
  margin-top: 22px; padding: 44px 48px; background: #fff; color: #1d1b26; border: 2px solid var(--ink); border-radius: 6px;
  box-shadow: var(--shadow-chunky-lg); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; line-height: 1.45;
  transform: rotate(-0.4deg);
}
.sheet h3 { margin: 0; font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: 0; }
.sheet .contact { margin-top: 4px; color: #4a4858; }
.sheet h4 { margin: 22px 0 8px; padding-bottom: 3px; border-bottom: 1px solid #9a98a6; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sheet .role { margin-top: 12px; font-weight: 700; }
.sheet .role:first-of-type { margin-top: 0; }
.sheet .when { font-style: italic; color: #5a5868; }
.sheet ul { margin-top: 4px !important; padding-left: 20px !important; }
.sheet li { margin-top: 3px !important; }
.sheet li::marker { color: #1d1b26 !important; }
.sheet p { margin: 0 !important; }
.sheet ul + .role { margin-top: 14px !important; }

/* ---- Before and after ---- */
.ba { display: grid; gap: 18px; margin-top: 18px; }
.ba-pair { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.ba-line { height: 100%; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; font-weight: 600; line-height: 1.4; }
.ba-line.ba-before { background: var(--pink-soft); }
.ba-line.ba-after { background: var(--mint-soft); box-shadow: var(--shadow-chunky-sm); }
.ba-label { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.ba-arrow { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--ink); border-radius: 10px; background: var(--sun); box-shadow: var(--shadow-chunky-sm); }
.ba-why { grid-column: 1 / -1; font-size: 15px; color: var(--ink-soft); }

/* ---- The template: a picture of it and the downloads ---- */
.template { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; margin-top: 22px; }
.template-pic { margin: 0; border: 2px solid var(--ink); border-radius: 6px; background: #fff; box-shadow: var(--shadow-chunky-lg); overflow: hidden; transform: rotate(1deg); }
.template-pic img { width: 100%; height: auto; }
.downloads { display: grid; gap: 12px; }
.download { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--tone, var(--paper)); box-shadow: var(--shadow-chunky); color: var(--ink); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
@media (hover: hover) { .download:hover { transform: translateY(-2px); box-shadow: var(--shadow-chunky-lg); color: var(--ink); } }
.download:active { transform: translate(2px, 2px); box-shadow: var(--shadow-chunky-sm); }
.download strong { display: block; font-family: var(--font-display); font-size: 18px; }
.dl-text > span { display: block; font-size: 15px; color: var(--ink-soft); }
.download .promise-icon { width: 46px; height: 46px; }
.download.yap { --tone: var(--violet); color: #fff; }
.download.yap .dl-text > span { color: #efe9ff; }

/* ---- Volunteer work on a resume (volunteer-work-on-resume.astro): three layouts as small resume snippets, the
   bullet formula, and the example entries. The snippets reuse .sheet; the formula reuses .ba-label. ---- */
.layouts { display: grid; gap: 32px; margin-top: 22px; }
.layout { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 24px; align-items: start; margin: 0; scroll-margin-top: 16px; }
.layout figcaption { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.layout figcaption .num { grid-row: span 2; align-self: start; font-family: var(--font-display); font-weight: 800; }
.layout figcaption strong { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.layout figcaption > span:last-child { grid-column: 2; color: var(--ink-soft); font-size: 16px; }
.sheet.mini { margin-top: 0; padding: 22px 24px; font-size: 14px; transform: rotate(var(--tilt, -0.4deg)); box-shadow: var(--shadow-chunky); }
.sheet .sheet-name { font-size: 19px; font-weight: 700; }
.sheet.mini h4 { margin: 14px 0 6px; font-size: 12px; }
.formula { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 18px !important; }
.formula li { position: relative; margin: 0 !important; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--tone); box-shadow: var(--shadow-chunky-sm); font-weight: 600; line-height: 1.4; }
.formula li + li::before { content: "+"; position: absolute; top: 50%; left: -21px; transform: translateY(-50%); font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; }
.entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; margin-top: 22px; }
.entry { display: flex; flex-direction: column; min-width: 0; border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: #fff; box-shadow: var(--shadow-chunky); overflow: hidden; }
.guide .entry h3 { margin: 0; padding: 10px 16px; border-bottom: 2px solid var(--ink); background: var(--tone); font-size: 18px; }
.entry-body { padding: 14px 16px 16px; color: #1d1b26; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; line-height: 1.45; }
.entry-body p { margin: 0 !important; }
.entry-body .role { font-weight: 700; }
.entry-body .when { font-style: italic; color: #5a5868; }
.entry-body ul { margin-top: 6px !important; padding-left: 20px !important; }
.entry-body li { margin-top: 4px !important; }
.entry-body li::marker { color: #1d1b26 !important; }
@media (max-width: 640px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sheet.mini { padding: 18px 16px; transform: none; }
  .formula { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .formula li + li::before { top: -24px; left: 50%; transform: translateX(-50%); }
}

/* ---- The FAQ inside the reading column: its questions sit level with their buttons ---- */
.guide .faq-item h3 { margin-top: 0; }

/* ---- The call to action and the sources, closer together ---- */
.guide { padding-bottom: 8px; }
.guide-cta { padding: 48px 0; }
.guide-sources { padding-top: 0; }
.guide-sources .legal-end { margin-top: 0; }
.sources { margin-top: 10px; padding-left: 22px; display: grid; gap: 8px; }
.sources + p { margin-top: 14px !important; }
.nowrap { white-space: nowrap; }

@media (max-width: 760px) {
  .template { grid-template-columns: minmax(0, 1fr); }
  .template-pic { max-width: 420px; }
}
@media (max-width: 640px) {
  .guide-hero .wrap { padding-bottom: 24px; }
  .legal.guide { padding-top: 8px; }
  /* A short comparison stays a table on phones (legal.css turns tables into cards there). */
  .legal .compare table { display: table; }
  .legal .compare thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .legal .compare tbody { display: table-row-group; }
  .legal .compare tr { display: table-row; padding: 0; }
  .legal .compare th, .legal .compare td { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
  .legal .compare td::before { content: none !important; }
  .legal .compare td:first-child { font-size: 15px; }
  .guide section { margin-top: 48px; }
  .sheet { padding: 24px 20px; font-size: 14px; transform: none; }
  .sheet h3 { font-size: 24px; }
  .ba-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
  .order li { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 14px; }
}

/* ---- The co-op resume guide (/co-op-resume): the hero's sample on a stack of paper, the kinds of experience as
   cards, each sample beside its notes with its text in a fold, and the sheet's smaller headings there (its name is an
   h4 under the program's h3). The before-and-after pairs, the picture frame (.template) and the sheet are the ones
   above. ---- */
.coop-art { min-height: 0; padding: 12px 0 28px; }
.coop-stack { position: relative; width: min(100%, 320px); margin: 0 4% 0 auto; }
.coop-stack img { position: relative; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 6px; background: #fff; box-shadow: var(--shadow-chunky-lg); transform: rotate(2deg); }
.coop-paper { position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-chunky); }
.coop-paper:nth-child(1) { background: var(--mint-soft); transform: rotate(-8deg) translate(-9%, 3%); }
.coop-paper:nth-child(2) { background: var(--sun-soft); transform: rotate(-3deg) translate(-4%, 1%); }
.coop-art .p-hero-coach { position: absolute; left: 0; bottom: 0; z-index: 2; width: 140px; height: 140px; margin: 0; }
.coop-art .p-hero-bubble { z-index: 2; top: auto; right: auto; left: 0; bottom: 172px; max-width: 210px; font-size: 20px; }
.coop-art .tap-me { left: 120px; bottom: 6px; z-index: 3; }

.kinds { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.kind { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 !important; padding: 16px; border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--tone, var(--paper)); box-shadow: var(--shadow-chunky-sm); }
.kind strong { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.kind span:not(.promise-icon) { display: block; margin-top: 4px; font-size: 15.5px; color: var(--ink-soft); }
.legal section .kind-eg { margin-top: 10px; padding: 8px 12px; border: 1px solid var(--ink); border-radius: 8px; background: #fff; color: #1d1b26; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14.5px; line-height: 1.45; }
.kind-eg::before { content: "•"; margin-right: 8px; }
.coop-yap { margin-top: 22px; }

.program { margin-top: 44px; scroll-margin-top: 16px; }
.program + .program { padding-top: 40px; border-top: 2px solid var(--line); }
.legal section .program > h3 { margin-top: 0; font-size: clamp(22px, 2.6vw, 26px); font-weight: 800; }
.sample { margin-top: 18px; }
.program:nth-of-type(even) .template-pic { transform: rotate(-1deg); }
.sample-notes { padding: 20px 22px; border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--paper); box-shadow: var(--shadow-chunky); }
.legal section .sample-notes-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.legal section .sample-notes ul { margin-top: 10px; padding-left: 20px; }
.as-text { margin-top: 24px; border-bottom: 2px solid var(--line); }
.as-text summary { padding: 14px 0; }
.as-text-label { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.25; }
.as-text summary:hover .as-text-label { color: var(--violet-dark); }
.as-text .sheet { margin: 4px 0 26px; }
.sheet .sheet-name { margin: 0; padding: 0; border: 0; font-size: 28px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.sheet h5 { margin: 22px 0 8px; padding-bottom: 3px; border-bottom: 1px solid #9a98a6; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sheet .where { font-weight: 400; }
.sheet-snippet { padding: 28px 32px; }
.sheet-snippet h4:first-child { margin-top: 0; }

@media (max-width: 760px) {
  .sample .template-pic { justify-self: center; }
}
@media (max-width: 640px) {
  .coop-art { padding: 4px 0 20px; }
  .coop-stack { width: min(74%, 260px); margin-right: 2%; }
  .coop-art .p-hero-coach { width: 92px; height: 92px; }
  .coop-art .p-hero-bubble { bottom: 108px; max-width: 170px; font-size: 16px; padding: 10px 14px; }
  .coop-art .p-hero-bubble-tail { left: 20px; width: 36px; height: 27px; }
  .coop-art .tap-me { left: 78px; }
  .kind { grid-template-columns: 42px minmax(0, 1fr); padding: 14px; }
  .sample-notes { padding: 16px 18px; }
  .program { margin-top: 36px; }
  .program + .program { padding-top: 32px; }
  .sheet-snippet { padding: 20px 18px; }
  .sheet h4.sheet-name { font-size: 24px; }
}

/* ---- Guide cards (GuideCards.astro): every guide on /guides, and "More guides" at the end of each guide ---- */
.guide-cards { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 24px; }
.guide-cards > li { margin: 0 !important; min-width: 0; }
.guide-cards.large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.guide-cards.small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 18px; }
.guide-card {
  height: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px;
  border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--tone, var(--paper)); box-shadow: var(--shadow-chunky);
  color: var(--ink); text-decoration: none; transform: rotate(var(--tilt, 0deg)); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .guide-card:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-chunky-lg); color: var(--ink); }
  .guide-card:hover .guide-doodle { animation: wiggle 0.6s ease-in-out; }
  .guide-card:hover .guide-card-go .icon { transform: translateX(3px); }
}
.guide-card:active { transform: translate(2px, 2px); box-shadow: var(--shadow-chunky-sm); }
.guide-doodle { width: 96px; height: 96px; }
.guide-card-text { height: 100%; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.guide-card-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; }
.guide-card-summary { color: var(--ink-soft); line-height: 1.5; }
.guide-card-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800; color: var(--violet-dark); }
.guide-card-go .icon { transition: transform 0.15s ease; }
.guide-cards.small .guide-card { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 16px 18px; }
.guide-cards.small .guide-doodle { width: 56px; height: 56px; }
.guide-cards.small .guide-card-title { font-size: 19px; }
.guide-cards.small .guide-card-summary { font-size: 15px; }
.guide-cards.small .guide-card-go { font-size: 15px; }

/* ---- "More guides" (MoreGuides.astro), the last thing in a guide's reading column ---- */
.more-guides { margin-top: 64px; padding-top: 32px; border-top: 2px solid var(--line); }
.more-guides h2 { font-weight: 800; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.1; letter-spacing: -0.03em; }
.more-guides-all { margin-top: 18px; font-weight: 700; }

/* ---- /guides ---- */
.guides-hero .wrap { padding-bottom: 24px; }
.guides-list { padding: 8px 0 24px; }
.guides-how { padding: 56px 0 0; }
.guides-how h2 { margin-bottom: 26px; font-weight: 800; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.1; letter-spacing: -0.03em; }

@media (max-width: 640px) {
  .guide-cards { gap: 18px; }
  .guide-card { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .guide-doodle { width: 64px; height: 64px; }
  .guide-card-title { font-size: 22px; }
  .guide-cards.small .guide-card { grid-template-columns: 48px minmax(0, 1fr); }
  .guide-cards.small .guide-doodle { width: 48px; height: 48px; }
  .more-guides { margin-top: 48px; }
  .guides-how { padding-top: 40px; }
}