/* =====================
   Footer (Responsive, Mobile‑First + Capability/Orientation Helpers)
   Target HTML:
   <section class="footer">
     <div class="box-container">
       <div class="box"> … </div>
       <div class="box"> … </div>
       <div class="box"> … </div>
     </div>
     <h1 class="credit"> … </h1>
   </section>
   ===================== */

/* Base footer */
.footer {
  min-height: auto;
  padding-top: 0;
  background: rgb(0, 1, 43);
}

/* Box layout */
.footer .box-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 9%;
}

.footer .box-container .box {
  flex: 1 1 25rem;
  min-width: 24rem;
  max-width: 38rem;
  margin: 2.5rem 1.5rem;
}

/* Titles */
.footer .box-container .box h3 {
  font-size: 2.5rem;
  color: #fff;
  padding-bottom: 1rem;
  font-weight: normal;
}

/* Paragraphs */
.footer .box-container .box p {
  font-size: 1.5rem;
  color: #ccc;
  padding: 0.7rem 0;
  text-transform: none; /* keep sentence case */
}

/* Icons embedded in <p> */
.footer .box-container .box p i {
  padding-right: 1rem;
  color: #ffae00;
}

/* Text links inside <p> */
.footer .box-container .box p a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline;
}
.footer .box-container .box p a:hover,
.footer .box-container .box p a:focus-visible {
  color: #ffae00;
  text-decoration: underline;
  outline: none;
}

/* Simple link list */
.footer .box-container .box a {
  font-size: 1.5rem;
  color: rgb(238, 238, 238);
  padding: 0.3rem 0;
  display: block;
}
.footer .box-container .box a:hover,
.footer .box-container .box a:focus-visible {
  color: #ffae00;
  outline: none;
}

/* Social row */
.footer .box-container .box .share {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
}
.footer .box-container .box .share a {
  height: 4rem;
  width: 4rem;
  padding: 1rem;
  text-align: center;
  border-radius: 5rem;
  font-size: 1.7rem;
  margin-right: 1rem;
  transition: 0.2s ease;
  background: rgb(230, 230, 230);
  color: #02094b;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer .box-container .box .share a:hover,
.footer .box-container .box .share a:focus-visible {
  background: transparent;
  transform: scale(0.98);
  border: 0.1rem solid rgb(180, 178, 178);
  color: #ffae00;
  outline: none;
}

/* Credit row */
.footer .credit {
  padding: 1rem 9% 2rem 9%;
  text-align: center;
  font-size: 1.5rem;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  color: #fff;
  border-top: 0.1rem solid #ffffff33; /* #fff3 */
}
.footer .credit a {
  color: #ffae00;
}

/* Heart beat icon */
.footer .fa {
  color: #e90606;
  margin: 0 0.3rem;
  font-size: 1.5rem;
  animation: pound 0.35s infinite alternate;
}
@-webkit-keyframes pound { to { transform: scale(1.1); } }
@keyframes pound { to { transform: scale(1.1); } }


/* ===========================
   MOBILE-FIRST CORE BREAKPOINTS
   =========================== */

/* Tiny phones */
@media (min-width: 360px) {
  .footer .box-container { padding: 2rem 7%; }
}

/* Phones */
@media (min-width: 480px) {
  .footer .box-container .box h3 { font-size: 2.2rem; }
  .footer .box-container .box p { font-size: 1.45rem; }
}

/* Large phones / small phablets */
@media (min-width: 600px) {
  .footer .box-container { gap: 1.6rem; }
  .footer .box-container .box { margin: 2rem 1rem; }
  .footer .box-container .box .share a { height: 4.2rem; width: 4.2rem; }
}

/* Tablets (portrait) */
@media (min-width: 768px) {
  .footer .box-container { justify-content: space-between; padding: 2rem 6%; }
  .footer .box-container .box { flex: 1 1 28rem; min-width: 28rem; }
}

/* Tablets (landscape) / small laptops */
@media (min-width: 900px) {
  .footer .box-container { gap: 2.2rem; }
}

/* Laptops (HD-ready) */
@media (min-width: 1024px) {
  .footer .box-container { padding: 2.5rem 8%; }
  .footer .credit { padding: 1rem 8% 2.2rem 8%; }
}

/* Standard laptops */
@media (min-width: 1280px) {
  .footer .box-container { max-width: 1200px; margin: 0 auto; }
}

/* Large laptops / desktops */
@media (min-width: 1440px) {
  .footer .box-container { max-width: 1320px; }
}

/* Full HD desktops */
@media (min-width: 1920px) {
  .footer .box-container { max-width: 1440px; }
}

/* iMac / 2K–4K canvases */
@media (min-width: 2560px) {
  .footer .box-container { max-width: 1600px; gap: 2.6rem; }
  .footer .box-container .box h3 { font-size: 2.8rem; }
  .footer .box-container .box p { font-size: 1.6rem; }
}


/* ===========================
   CAPABILITY & PREFERENCE QUERIES
   =========================== */

/* Touch-first: bigger targets, less hover reliance */
@media (hover: none) and (pointer: coarse) {
  .footer .box-container .box .share a { height: 4.6rem; width: 4.6rem; padding: 1.2rem; }
  .footer .box-container .box a { padding: 0.5rem 0; }
}

/* High-density (retina) assets */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .footer .box-container .box .share a { box-shadow: 0 0 1px rgba(255,255,255,0.15); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer .box-container .box .share a,
  .footer .fa {
    animation: none !important;
    transition: none !important;
  }
}

/* Prefer more contrast */
@media (prefers-contrast: more) {
  .footer .credit { border-top-color: #fff; }
  .footer .box-container .box a { color: #ffffff; }
}


/* ===========================
   ORIENTATION HELPERS
   =========================== */

/* Tablet portrait behaviors */
@media (min-width: 768px) and (orientation: portrait) {
  .footer .box-container { align-items: stretch; }
}

/* Tablet landscape behaviors */
@media (min-width: 768px) and (orientation: landscape) {
  .footer .box-container { align-items: flex-start; }
}

/* Small devices in landscape (avoid cramped rows) */
@media (max-width: 900px) and (orientation: landscape) {
  .footer .box-container { padding: 1.5rem 5%; gap: 1rem; }
  .footer .box-container .box { margin: 1rem 0; }
}


/* ===========================
   LEGACY MAX-WIDTH SAFETY (optional)
   =========================== */

/* <= 1024px: tighten side paddings */
@media (max-width: 1024px) {
  .footer .credit { padding: 1rem 6% 2rem 6%; }
}

/* <= 768px: stack boxes vertically and center text where it helps */
@media (max-width: 768px) {
  .footer .box-container {
    justify-content: flex-start;
    gap: 1.2rem;
    padding: 2rem 5%;
  }
  .footer .box-container .box {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 1.2rem 0;
  }
  .footer .box-container .box h3 { font-size: 2.2rem; }
  .footer .box-container .box p { font-size: 1.45rem; }
}

/* <= 450px: compact spacing */
@media (max-width: 450px) {
  .footer .box-container { padding: 1.5rem 4%; }
  .footer .box-container .box { margin: 1.5rem 0; }
  .footer .box-container .box p { padding: 0.7rem 0; }
  .footer .box-container .box .share a { padding: 1.2rem; }
}