/*!
 * Nebula Digital — shared site styles
 * -----------------------------------
 * Hand-written CSS shared by every page, loaded AFTER styles.css.
 *
 * Why this file exists: styles.css is generated by the Tailwind CLI, and this
 * project has no package.json or node_modules, so a rebuild is not currently
 * available. Anything that cannot be expressed with the utilities already
 * compiled into styles.css lives here instead. It is hand-written, so it is
 * never overwritten by a Tailwind rebuild.
 *
 * Selectors deliberately include a class (e.g. `footer > div.flex`) because a
 * bare element selector loses to Tailwind's utility classes on specificity.
 */

/* ---------------------------------------------------------------------------
   Footer, small screens.

   The footer markup is `flex flex-col md:flex-row`, so below 768px the nav
   dropped underneath the VAT line. Keep it as a row at every width: brand on
   the left, links on the right.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  footer > div.flex {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  /* Links column: never squashed, always ranged right. */
  footer > div.flex > nav {
    flex-shrink: 0;
    text-align: right;
  }

  /* Brand column: allowed to shrink and wrap so the links always fit. */
  footer > div.flex > div {
    min-width: 0;
  }

  /* Trim the brand block so both columns fit on narrow phones (~320px). */
  footer > div.flex > div a img {
    height: 2rem;
  }

  footer > div.flex > div p {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  footer > div.flex > nav a {
    font-size: 0.8125rem;
  }
}

/* The scroll-to-top button is fixed at bottom-right, so once the page is
   scrolled to the end it sits directly over the last footer links. Reserve
   space below them on small screens.

   Note the `.pb-4` in the selector: the footer carries Tailwind's pb-4, and a
   bare `footer { padding-bottom }` loses to it on specificity, so the clearance
   silently did nothing. The button occupies the bottom ~72px of the viewport
   (24px offset + 48px tall); 6rem clears it with room to spare. */
@media (max-width: 767px) {
  footer.pb-4 {
    padding-bottom: 6rem;
  }
}

/* Very narrow phones: tighten further rather than letting anything overflow. */
@media (max-width: 360px) {
  footer > div.flex {
    gap: 0.5rem;
  }

  footer > div.flex > div a img {
    height: 1.75rem;
  }

  footer > div.flex > nav a {
    font-size: 0.75rem;
  }
}