/* ════════════════════════════════════════════════════════════════════════
   base-layout.css
   ────────────────────────────────────────────────────────────────────────
   ONE shared, error-proof page shell + footer pattern for every Maixu page.

   WHY THIS FILE EXISTS:
   The old approach had every page (work.html, about.html, experience.html)
   relying on a global <footer> with position:fixed/static fighting against
   body's min-height:100vh from styles.css. Depending on how much content a
   page had, the footer would either disappear off-screen, sit too high, or
   leave huge gaps — because two different sizing systems were fighting each
   other. homepage.html never had this problem because it used a SIMPLE,
   SELF-CONTAINED flex pattern instead. This file generalizes THAT pattern
   so every page can use the exact same proven structure.

   HOW IT WORKS (the whole trick, in one sentence):
   body is a flex column that's *at least* one screen tall, and the footer
   has margin-top:auto — which means: if the page content is short, the
   footer gets pushed all the way to the bottom of the screen; if content
   is tall, the footer just sits right after it and the page scrolls
   normally. No position:fixed. No position:static fighting min-height.
   One rule, works in both cases, automatically.

   HOW TO USE THIS ON A PAGE:
   1. Add <link rel="stylesheet" href="ressources/01-css/base-layout.css">
      AFTER styles.css in the <head>, so it can override the old footer
      rules from styles.css safely.
   2. Wrap your page like this:

        <body>
          <div class="page-shell">

            <div class="nav-wrap">
              ... your .dropdown nav, unchanged ...
            </div>

            <main class="page-main">
              ... all your actual page content goes here ...
            </main>

            <footer class="site-footer">
              <div class="contact-info"> ... </div>
              <div class="credits"> ... </div>
            </footer>

          </div>
        </body>

   That's it. No per-page <style> overrides needed for footer positioning
   ever again — this file handles it once, for every page, consistently.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── The page shell: a full-height flex column ───────────────────────────
   This REPLACES relying on body's own min-height from styles.css for
   layout purposes — .page-shell is the thing that actually stretches,
   so this file works correctly even if styles.css changes in the future.
──────────────────────────────────────────────────────────────────────── */
.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 90vh;   /* slightly less than full screen so the footer
                          always fits without forcing a scroll on short
                          pages — footer sits a touch higher than dead
                          center, which is preferable to scrolling */
  width: 100%;
  box-sizing: border-box;
}

/* ─── Nav wrapper ────────────────────────────────────────────────────────
   Just a centering container for the existing .dropdown component.
   Doesn't touch .dropdown's own styles — those stay in styles.css.
──────────────────────────────────────────────────────────────────────── */
.nav-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 28px;
}

/* ─── Main content area ─────────────────────────────────────────────────
   flex: 1 means this grows to fill available space, which is what
   guarantees the footer below it gets pushed to the bottom on short
   pages — the actual mechanism that makes this whole system work.
──────────────────────────────────────────────────────────────────────── */
.page-main {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

/* ─── Footer — overrides the legacy rules from styles.css ──────────────────
   IMPORTANT: this intentionally overrides footer/.contact-info/.credits
   from styles.css. Load this file AFTER styles.css in the <head> so the
   cascade resolves correctly.
──────────────────────────────────────────────────────────────────────── */
.site-footer {
  position: static !important;   /* cancel any legacy position:fixed */
  width: 100%;
  box-sizing: border-box;
  padding: 20px 30px 16px;
  background-color: #ffffff;
  overflow: hidden;               /* contains the floated children below,
                                      so the footer's own box height is
                                      correctly calculated */
}

/* Left/right split via float — ONE footer style, used identically on
   EVERY page (homepage, work, about, experience). No variants, no
   centered mode, no exceptions — this is the only footer layout. */
.site-footer .contact-info {
  position: static !important;
  float: left;
  font-family: Helvetica, sans-serif;
  font-weight: 200;
  font-size: 12px;
  line-height: 9.5pt;
  text-align: left;
  max-width: 60%;
}

.site-footer .contact-info a {
  color: black;
  text-decoration: none;
}

.site-footer .contact-info a:hover {
  text-decoration: underline;
}

.site-footer .credits {
  float: right;
  font-family: Helvetica, sans-serif;
  font-weight: 200;
  font-size: 8px;
  line-height: 7pt;
  text-align: right;
  max-width: 38%;
}

/* ─── Mobile ─────────────────────────────────────────────────────────────
   Floats don't work well on narrow screens — stack and center instead.
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 650px) {
  .site-footer .contact-info,
  .site-footer .credits {
    float: none;
    max-width: 100%;
    text-align: center;
  }

  .site-footer {
    padding: 16px 20px;
  }
}
