/* ==============================================================
   resumeFix.css
   Resume-page-only stylesheet — created 31-08-2026
   Used by: EN_resume.html, FR_resume.html ONLY.
   ==============================================================

   WHY THIS FILE EXISTS
   ---------------------------------------------------------------
   The resume pages used to load contact1.css, banking1.css,
   pmtcard1.css and payments1.css purely to inherit 4 small rules
   that actually belonged to payments1.css (.section-one,
   .section-one .section-tab, .payment-icon-stack, and a generic
   img fallback). contact1.css, banking1.css and pmtcard1.css were
   never used by the resume markup at all (0% selector overlap —
   verified against the live rendered DOM). Those 4 files have been
   dropped from EN_resume.html / FR_resume.html; the handful of
   lines the resume genuinely needs are reproduced in section 1
   below, so the resume page no longer depends on any of them.

   Sections 2–4 fix three mobile bugs without editing resume1.css
   or global2.css directly — global2.css in particular is the
   sitewide master file and is intentionally left untouched here.

   LOAD ORDER (important):
   global2.css → resume1.css → resumeFix.css → printResume.css
   This file must load AFTER resume1.css so its overrides win the
   cascade, and AFTER global2.css so section 1 behaves exactly as
   payments1.css did before.
   ============================================================== */


/* ----------------------------------------------------------------
   1) Rules relocated from payments1.css (unchanged) — the only
      part of that file the resume page actually used.
   ---------------------------------------------------------------- */

.section-one {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2rem 1rem;
}

.section-one .section-tab {
  display: inline-block;
  margin-bottom: 1.5rem;
  /* 31-08-2026: text-transform and letter-spacing removed — this rule used
     to override both away from global2.css's base .section-tab values
     (text-transform:lowercase, letter-spacing:0.02em). "Arsenal SC" is a
     small-caps display font: lowercase input renders as small-caps glyphs,
     but this override was force-uppercasing the resume tab's text first,
     so it rendered as full-height capitals instead — same 12.8px font-size
     as every other page's tab, but visually larger/bolder letters. Letting
     both properties fall back to global2.css now makes "explore my cv"
     render identically to "at a glance" on the home page and everywhere
     else that uses .section-tab. */
}

.payment-icon-stack {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .section-one { padding: 3rem 1.25rem; }
  .payment-icon-stack { gap: 2rem; }
}

@media (min-width: 1024px) {
  .section-one { padding: 4rem 1.5rem; }
  .section-one .section-tab { margin-bottom: 2rem; }
}


/* ----------------------------------------------------------------
   2) BUG FIX — "explore my cv" tab invisible on mobile
   ----------------------------------------------------------------
   resume1.css's mobile rules for `body.contact .page` set
   `margin: 0`, which wipes out the header-clearance margin-top
   (var(--header-h), ~56–120px) that global2.css normally reserves
   below the fixed header. That pulled #section-one — and the
   .section-tab pinned to its top edge — up underneath the fixed
   header (z-index:1000 vs the tab's z-index:10), fully hiding it.
   Verified live: the tab was rendering at ~5px from the top of the
   viewport, i.e. entirely behind the header bar.

   Fix: restore only margin-top (same selector, same specificity as
   the resume1.css rule, loaded later — wins in the cascade without
   touching resume1.css). The left/right margin reset that rule was
   actually meant to make is left alone.
   ---------------------------------------------------------------- */

@media (max-width: 900px) {
  body.contact .page {
    margin-top: var(--header-h);
    padding-top: 0;   /* the 16–20px padding-top resume1.css adds here was a
                          workaround for the margin-top it was zeroing out —
                          now that margin-top is restored, that padding is
                          redundant and left a visible sliver of the body's
                          gold background between the header and the tab.
                          Verified live: without this, .page's padding-top
                          revealed body.contact's #F2C078 background for
                          16–20px right under the header. */
  }

  /* With .page's padding-top now 0, #section-one's top edge sits exactly
     flush against the header's bottom edge. resume1.css's own mobile rule
     for the tab (body.contact #section-one .section-tab) still applies
     `transform: translateY(-50%)` on top of that — pulling the tab up by
     half its own height so it straddles that boundary on purpose ("overlap
     the section/header border", per that rule's original comment). But the
     header has a higher z-index (1000) than the tab (10), so anything
     pulled up into the header's vertical range paints *behind* it — the
     straddle doesn't read as an overlapping badge, it reads as the tab's
     top half being sliced off. Cancelling the transform here keeps the tab
     fully clear of the header instead. */
  body.contact #section-one .section-tab {
    transform: none;
    left: 0;   /* resume1.css's own rule sets left:1rem here, indenting the
                  tab 16px from the edge on mobile — every other page's tab
                  sits flush at left:0 (global2.css's base .section-tab
                  rule). Verified live: index.html's tab renders at x=0,
                  the resume tab was rendering at x=16. */
  }
}


/* ----------------------------------------------------------------
   3) Footer "Release Dashboard" overlapping "Let's Connect"
   ----------------------------------------------------------------
   This is now fixed site-wide directly in global2.css (see the
   `.footer-release-links` `@media (max-width:600px)` block there —
   updated 31-08-2026), since it's a shared-footer bug, not a
   resume-only one. No override needed here any more.
   ---------------------------------------------------------------- */


/* ----------------------------------------------------------------
   4) BUG FIX — footer links (and everything else sized in rem)
      rendering smaller on the resume page than the rest of the site
   ----------------------------------------------------------------
   resume1.css changes the *global* html/body font-size:
     @media (max-width: 480px) { html, body { font-size: 15px; } }
     @media (min-width: 1200px) { html, body { font-size: 13.5px; } }
   html/body are shared by every page (the header and footer are
   injected partials common to the whole site), and rem units always
   resolve against the root <html> element — never against a nearby
   wrapper — so this shrank the shared footer only on resume pages.
   Verified live: index.html renders .footer-release-link at 13.6px;
   EN_resume.html rendered the same shared markup at 11.475px.

   Fix: stop touching the root font-size at all, so it matches every
   other page (16px, the browser default — confirmed that's what
   index.html actually computes to). The resume card's own typography
   already scales responsively via clamp() elsewhere in resume1.css
   (.resume-bullets, .resume-section-title, etc.), so nothing is lost
   by removing this extra global multiplier.
   ---------------------------------------------------------------- */

@media (max-width: 480px) {
  html, body { font-size: 16px; }
}

@media (min-width: 1200px) {
  html, body { font-size: 16px; }
}


/* ----------------------------------------------------------------
   5) Mobile typography — match the compact scale (requested 31-08-2026)
   ----------------------------------------------------------------
   .resume-title, .resume-motto, .resume-meta, .resume-role-title and
   .resume-role-meta have no dedicated font-size in resume1.css, so on
   mobile they fall back to the full 16px body size — while
   .resume-bullets (clamp(0.9rem,1vw,1rem) ≈ 14.4px here) and
   .resume-section-title (13px, mobile override) are the only two
   elements that actually scale down. That mismatch is what reads as
   "big" next to the rest of the card. Bringing these five in line
   with the ~0.9rem compact scale already used elsewhere.
   ---------------------------------------------------------------- */

@media (max-width: 600px) {
  .resume-title,
  .resume-motto,
  .resume-meta,
  .resume-role-title,
  .resume-role-meta {
    font-size: 0.9rem;
  }
}