/* =====================================================================
   AI Resume Builder — layout chrome shared by the five product pages
   (landing, package/details, payment, payment-success, account).
   Linked from each view AFTER its page stylesheet. Hand-written (not
   generated by bin/build_ai_resume_builder_css.py).

   1. Sticky footer. Like the designer export, <body> is a flex column so the
      footer sits at the viewport bottom on short pages; the layout wrapper
      (body.phtml) grows, the footer inside it is pushed down.
   2. Phone footer. frontend-design/ai-resume-builder/css/footer.css centres
      the whole stack under 640px (logo, text, links, QR, badges, pill);
      the site-wide style.css only stacks it left-aligned. Mapped from the
      export's .jt-footer__* to the app's .app-footer__* and scoped to these
      pages so the footer elsewhere is untouched.
   ===================================================================== */

/* ---- 1. sticky footer ---- */
/* Fallback for browsers without :has(): 75px = the glass header's rendered height. */
.resume-builder-landing-wrapper,
.resume-builder-checkout-wrapper,
.resume-builder-account-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 75px);
}
/* Exact: <body> becomes the flex column (header + wrapper), the wrapper takes the rest. */
body:has(> .resume-builder-landing-wrapper),
body:has(> .resume-builder-checkout-wrapper),
body:has(> .resume-builder-account-wrapper) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > .resume-builder-landing-wrapper,
body > .resume-builder-checkout-wrapper,
body > .resume-builder-account-wrapper {
    flex: 1 0 auto;
    width: 100%;
}
.resume-builder-landing-wrapper > .app-footer,
.resume-builder-checkout-wrapper > .app-footer,
.resume-builder-account-wrapper > .app-footer {
    margin-top: auto;
}
/* Content sits in the layout's .nd-main (body.phtml); make it a column so .app-main still fills it. */
.resume-builder-account-wrapper > .nd-main { display: flex; flex-direction: column; }
.resume-builder-account-wrapper > .nd-main > .app-main { flex: 1 0 auto; width: 100%; }

/* ---- 2. phone footer: centred stack (designer footer.css @640) ---- */
@media (max-width: 640px) {
    .resume-builder-landing-wrapper .app-footer__inner,
    .resume-builder-checkout-wrapper .app-footer__inner,
    .resume-builder-account-wrapper .app-footer__inner { padding: 36px 20px 28px; }

    .resume-builder-landing-wrapper .app-footer__cols,
    .resume-builder-checkout-wrapper .app-footer__cols,
    .resume-builder-account-wrapper .app-footer__cols { gap: 32px; justify-items: center; text-align: center; }

    .resume-builder-landing-wrapper .app-footer__col-left,
    .resume-builder-checkout-wrapper .app-footer__col-left,
    .resume-builder-account-wrapper .app-footer__col-left { gap: 16px; align-items: center; width: 100%; }

    .resume-builder-landing-wrapper .app-footer__brand,
    .resume-builder-checkout-wrapper .app-footer__brand,
    .resume-builder-account-wrapper .app-footer__brand { width: 100%; justify-content: center; }

    .resume-builder-landing-wrapper .app-footer__brand-img,
    .resume-builder-checkout-wrapper .app-footer__brand-img,
    .resume-builder-account-wrapper .app-footer__brand-img { margin: 0 auto; }

    .resume-builder-landing-wrapper .app-footer__follow-row,
    .resume-builder-checkout-wrapper .app-footer__follow-row,
    .resume-builder-account-wrapper .app-footer__follow-row { justify-content: center; }

    .resume-builder-landing-wrapper .app-footer__links,
    .resume-builder-checkout-wrapper .app-footer__links,
    .resume-builder-account-wrapper .app-footer__links { width: 100%; justify-content: center; justify-self: center; }

    .resume-builder-landing-wrapper .app-footer__link-group,
    .resume-builder-checkout-wrapper .app-footer__link-group,
    .resume-builder-account-wrapper .app-footer__link-group { gap: 10px; align-items: center; flex: 0 1 auto; }

    .resume-builder-landing-wrapper .app-footer__col-right,
    .resume-builder-checkout-wrapper .app-footer__col-right,
    .resume-builder-account-wrapper .app-footer__col-right { width: 100%; justify-content: center; }

    .resume-builder-landing-wrapper .app-footer__app,
    .resume-builder-checkout-wrapper .app-footer__app,
    .resume-builder-account-wrapper .app-footer__app { width: 100%; justify-content: center; }

    .resume-builder-landing-wrapper .app-footer__app-right,
    .resume-builder-checkout-wrapper .app-footer__app-right,
    .resume-builder-account-wrapper .app-footer__app-right { align-items: center; }
}