/* ============================================================
   Shared styles — Public Site Shell (Nav / Nav Buttons / Footer)
   ------------------------------------------------------------
   Used by: login.php, register.php, index.php

   REBRAND: rewritten for the light Team Capsule theme. Nav bar
   is now a white/frosted-light bar with dark text and a blue
   accent, rather than a dark translucent bar with light text.
   Structure, selectors and page-local override notes preserved
   from the previous version so per-page behaviour is unchanged.

   Requires css/variables.css to be loaded first for --brand-blue,
   --surface, --border-soft, etc.

   ------------------------------------------------------------
   Differences found between pages (NOT merged into this file):

   1. `nav` — index.php has one additional property:
        transition: background 0.3s;
      login.php and register.php do not have this property.
      No JS in index.php currently animates the nav background,
      so this transition has no visible effect today, but it was
      left in place as a page-local addition on index.php rather
      than silently dropped, to avoid any behaviour change.

   2. `footer` — index.php uses `padding: 2rem 2.5rem`, while
      login.php and register.php use `padding: 1.5rem 2.5rem`.
      This is a real visual difference (taller footer on the
      landing page), so the base `footer` rule below uses the
      login/register value, and index.php carries a one-line
      local override for its padding.

   3. Mobile nav collapse breakpoint — login.php/register.php
      collapse nav padding at `max-width: 480px`, while index.php
      does so at `max-width: 768px`. These @media blocks are
      NOT included here; they remain page-local since the
      breakpoint itself differs intentionally per page layout.
   ============================================================ */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.5rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.nav-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.nav-logo img { height: 36px; }

.nav-links { display: flex; gap: 0.5rem; align-items: center; }

.btn-nav {
  padding: 0.55rem 1.2rem;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  letter-spacing: 0.03em;
}

.btn-ghost {
  color: var(--text-body);
  border: 1px solid var(--border-soft);
  background: transparent;
}
.btn-ghost:hover,
.btn-ghost:focus-visible { background: var(--surface-alt); color: var(--text-heading); }

.btn-primary-nav {
  color: #fff;
  background: var(--brand-blue);
  border: 1px solid var(--brand-blue);
}
.btn-primary-nav:hover,
.btn-primary-nav:focus-visible { background: #1a68e0; box-shadow: var(--shadow-md); }

/* ─── Footer (base — see note #2 above re: index.php padding) ── */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border-soft);
  padding: 1.5rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--brand-blue); }

/* ─── Footer content patterns ───────────────────────────────
   Extracted from identical inline style="..." attributes that
   were duplicated across login.php, register.php, and index.php
   (and also terms-of-use.php / privacy-policy.php — see the
   matching block in css/policy-pages.css). Purely static/layout,
   no JS or dynamic values involved. */
.footer-brand { display: flex; align-items: center; gap: 0.8rem; }
.footer-logo { height: 22px; opacity: 0.6; }
.footer-links { display: flex; gap: 1.5rem; }

/* ─── Icon-before-text spacing inside buttons/links ─────────
   Extracted from identical inline style="margin-right:0.5rem"
   attributes repeated on icon elements inside buttons across
   login.php, register.php, and index.php. */
.btn-icon { margin-right: 0.5rem; }

/* ─── "You are here" nav button state ───────────────────────
   Extracted from an identical inline style override applied to
   whichever nav button represents the page currently being
   viewed (e.g. the "Login" button while on login.php). Apply in
   addition to the existing .btn-nav + .btn-ghost/.btn-primary-nav
   classes. */
.btn-nav-current {
  color: var(--brand-blue);
  border-color: rgba(46,124,246,0.4);
  background: rgba(46,124,246,0.08);
}