/*
 * chrome.css - header (nav) and footer layout + polish, shared by every page.
 * Loaded LAST in <head> so it wins over page CSS and Tailwind at equal specificity.
 *
 * SAFETY RULES (enforced by tests/chrome-css.test.js):
 *  - The course pages pin the header/footer with position:fixed and hard-coded heights (!important).
 *    This file therefore never sets position, top/right/bottom/left, height, margin, z-index or overflow.
 *  - Only visual properties (background-image, shadows, radius, colour, transitions) plus the inner
 *    content width/gutters are changed.
 *  - Phones (<= 640px) are left exactly as they were.
 */

/* ---------- 1. Use the full screen width (tablet and up) ---------- */
@media (min-width: 641px) {
  /* Tailwind's .container caps at 640/768/1024/1280/1536px and centres, leaving dead space either side. */
  nav.bg-\[\#49A078\] > div,
  footer.footer > div.flex {
    max-width: none;
    width: 100%;
  }
  /* Even gutters; the footer's own padding is tiny on course pages.
     (div.flex = two classes, so it outranks the course stylesheets' `.footer .container { max-width: 1200px }`.) */
  footer.footer > div.flex {
    padding-inline: clamp(0.25rem, 1.6vw, 1.5rem);
    align-items: center; /* free-course footers were top-aligned (items-start) */
  }
}

/* ---------- 2. Header polish ---------- */
nav.bg-\[\#49A078\] {
  background-image: linear-gradient(100deg, #3b8462 0%, #49A078 48%, #56ae85 100%);
  box-shadow: 0 10px 28px -14px rgba(37, 109, 79, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
nav span.font-bold.text-xl {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* Gold ring around the round logos (header + footer), not the tiny author avatar */
nav img.rounded-full.h-10 {
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.95), 0 6px 14px rgba(0, 0, 0, 0.22);
}
/* slimmer in the 50px pinned footer so the ring never touches the screen edge */
footer.footer img.rounded-full.h-10 {
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.95), 0 2px 6px rgba(0, 0, 0, 0.16);
}

/* Pill-style header links: one consistent look on every page (Analyst Pro had none) */
@media (min-width: 769px) {
  nav .nav-links a.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
      transform 0.2s ease, box-shadow 0.2s ease;
  }
  nav .nav-links a.nav-link:hover {
    background-color: rgba(250, 204, 21, 0.16);
    border-color: #facc15;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5);
  }
  nav .nav-links a.nav-link:focus-visible {
    outline: 2px solid #facc15;
    outline-offset: 2px;
  }
}
@media (min-width: 1200px) {
  nav .nav-links a.nav-link {
    padding: 0.45rem 1.05rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  nav .nav-links a.nav-link {
    transition: none;
  }
  nav .nav-links a.nav-link:hover {
    transform: none;
  }
}

/* ---------- 3. Footer polish ---------- */
/* Soft gradient with a brand-colour accent line along the top edge.
   !important is needed only because Analyst Pro's stylesheet sets `background: ... !important`. */
footer.footer {
  background-image: linear-gradient(90deg, #49A078 0%, #facc15 50%, #49A078 100%),
    linear-gradient(180deg, #ecf9f2 0%, #d5eee0 100%) !important;
  background-size: 100% 3px, 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: top left, center !important;
}

/* Home page footer sits in normal flow, so it can breathe a little more (tablet and up only) */
@media (min-width: 641px) {
  body.home-page footer.footer {
    padding-block: 1.25rem;
  }
}