/* =========================================================
   URBAN TUTOR SITE
   GLOBAL FOOTER
   ========================================================= */

:root {
  --footer-bg: #050505;
  --footer-text: #f5f5f5;
  --footer-muted: #999999;

  /* Site accent - brand wordmark, focus rings */
  --footer-green: #16a34a;

  /* Secondary accent - floating contact buttons, social icons */
  --footer-blue: #2563eb;

  --footer-border:
    rgba(255, 255, 255, 0.08);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  width: 100%;

  background: var(--footer-bg);

  color: var(--footer-text);

  border-top:
    1px solid var(--footer-border);
}


/* =========================================================
   MAIN FOOTER
   ========================================================= */

.footer-main {

  width: min(
    1120px,
    calc(100% - 40px)
  );

  min-height: 230px;

  margin: 0 auto;

  padding: 55px 0 40px;

  display: flex;

  align-items: center;

  justify-content: center;
}


/* =========================================================
   CENTER
   ========================================================= */

.footer-center {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}


/* =========================================================
   BRAND
   ========================================================= */

.footer-brand {

  display: inline-block;

  font-size: 28px;

  font-weight: 850;

  line-height: 1;

  letter-spacing: -1px;

  text-decoration: none;

  transition:
    transform 0.2s ease;
}


/*
   Two-colour UrbanTutorSite
*/

.brand-urban {
  color: #ffffff;
}


.brand-tutorsite {
  color: var(--footer-green);
  margin-left: 0.28em;   /* "Urban Tutor Site" - a space before Tutor Site */
}


.footer-brand:hover {
  transform: translateY(-1px);
}


/* =========================================================
   TAGLINE
   ========================================================= */

.footer-tagline {

  margin: 13px 0 0;

  color: var(--footer-muted);

  font-size: 13px;

  line-height: 1.5;
}


/* =========================================================
   SOCIAL MEDIA
   ========================================================= */

.footer-socials {

  margin-top: 27px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 13px;
}


/* =========================================================
   SOCIAL ICON
   ========================================================= */

.social-link {

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #999999;

  border: 1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 10px;

  background: #0d0d0d;

  text-decoration: none;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}


.social-link svg {

  width: 18px;
  height: 18px;

  fill: currentColor;

  display: block;
}


/*
   Hover
*/

.social-link:hover {

  color: var(--footer-blue);

  border-color:
    rgba(37, 99, 235, 0.35);

  background:
    rgba(37, 99, 235, 0.06);

  transform:
    translateY(-2px);
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.footer-bottom {

  width: min(
    1120px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding: 18px 0 22px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.06);

  color: #555555;

  font-size: 10px;

  font-weight: 600;

  text-align: center;
}


/* =========================================================
   FLOATING CONTACT BUTTONS
   ========================================================= */

.floating-contact {

  position: fixed;

  bottom: 22px;

  width: 52px;
  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  border-radius: 50%;

  color: var(--footer-blue);

  background:
    #101010;

  border:
    1px solid
    rgba(37, 99, 235, 0.45);

  box-shadow:
    0 8px 25px
    rgba(0, 0, 0, 0.45);

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


/* =========================================================
   LEFT — WHATSAPP
   ========================================================= */

.floating-whatsapp {

  left: 22px;
}


/* =========================================================
   RIGHT — CALL
   ========================================================= */

.floating-call {

  right: 22px;
}


/* =========================================================
   FLOATING ICON
   ========================================================= */

.floating-contact svg {

  width: 25px;
  height: 25px;

  fill: currentColor;

  display: block;
}


/* =========================================================
   FLOATING HOVER
   ========================================================= */

.floating-contact:hover {

  color: #050505;

  background:
    var(--footer-blue);

  border-color:
    var(--footer-blue);

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 30px
    rgba(37, 99, 235, 0.18);
}


.floating-contact:active {

  transform:
    translateY(0);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 699px) {

  .footer-main {

    width: calc(100% - 28px);

    min-height: 220px;

    padding: 45px 0 35px;
  }


  .footer-brand {

    font-size: 24px;
  }


  .footer-tagline {

    max-width: 290px;

    font-size: 12px;
  }


  .footer-socials {

    gap: 9px;
  }


  .social-link {

    width: 35px;
    height: 35px;

    border-radius: 9px;
  }


  .social-link svg {

    width: 16px;
    height: 16px;
  }


  /*
     Smaller floating buttons on phones
  */

  .floating-contact {

    bottom: 16px;

    width: 47px;
    height: 47px;
  }


  .floating-whatsapp {

    left: 14px;
  }


  .floating-call {

    right: 14px;
  }


  .floating-contact svg {

    width: 22px;
    height: 22px;
  }


  .footer-bottom {

    width: calc(100% - 28px);

    padding:
      16px 0 20px;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.floating-contact:focus-visible,
.social-link:focus-visible,
.footer-brand:focus-visible {

  outline:
    2px solid var(--footer-green);

  outline-offset: 4px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .floating-contact,
  .social-link,
  .footer-brand {

    transition: none;
  }

}


/* =========================================================
   FOOTER - TIGHTER, CLEANER
   ========================================================= */

/* 1. less space between the footer's top edge and the brand */
.footer-main {
  min-height: 0;
  padding: 24px 0 14px;
}

/* 2. social icons without their outer box */
.social-link {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.social-link:hover {
  border: 0;
  background: transparent;
  color: var(--footer-blue);
}

.social-link svg {
  width: 19px;
  height: 19px;
}

/* 3. smaller gap between the icons and the line below them */
.footer-socials {
  margin-top: 16px;
  gap: 18px;
}

/* 4. "© 2026 Urbantutorsite" centred */
.footer-bottom {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 0 16px;
  text-align: center !important;
}

@media (max-width: 699px) {

  .footer-main {
    min-height: 0;
    padding: 20px 0 12px;
  }

  .footer-socials {
    gap: 16px;
  }

  .social-link {
    width: 24px;
    height: 24px;
    border-radius: 0;
  }

  .footer-bottom {
    padding: 12px 0 16px;
  }

}


/* =========================================================
   FONT + SOCIAL ICON SPACING
   The footer has its own font (it no longer falls back to the
   browser's Times on pages that set none). Icons get more room
   on big screens and wrap neatly on small phones.
   ========================================================= */

.site-footer {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.footer-socials {
  flex-wrap: wrap;
  row-gap: 14px;
}

@media (min-width: 900px) {

  .footer-main {
    padding: 34px 0 22px;
  }

  .footer-socials {
    margin-top: 22px;
    gap: 30px;
  }

  .social-link {
    width: 32px;
    height: 32px;
  }

  .social-link svg {
    width: 22px;
    height: 22px;
  }

}

@media (max-width: 380px) {

  .footer-socials {
    gap: 12px;
  }

}



/* =========================================================
   LIGHT MODE  (html[data-theme="light"], js/theme.js)
   ========================================================= */

html[data-theme="light"] .site-footer {
  --footer-bg: #ffffff;
  --footer-text: #111418;
  --footer-muted: #5b6472;
  --footer-border: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .site-footer .brand-urban { color: #111418; }
html[data-theme="light"] .social-link { color: #5b6472; }
html[data-theme="light"] .footer-bottom { color: #8a8f98; }

html[data-theme="light"] .floating-contact {
  background: #ffffff;
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .floating-contact:hover { color: #ffffff; }

/* =========================================================
   ONE FOOTER ON EVERY PAGE - the same height as on Tuition Jobs, whatever a page's own css says (the registration
   pages' old ".footer-bottom" rule added 30px above the line)
   ========================================================= */
.site-footer .footer-bottom { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 12px 0 16px; display: block; text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 10px; line-height: 15px; }
html[data-theme="light"] .site-footer .footer-bottom { border-top-color: rgba(0, 0, 0, 0.08); }

/* while the footer is on its way: its place is kept (same height, same colour), so nothing on the page moves */
#site-footer:empty { display: block; min-height: 216px; background: var(--footer-bg); border-top: 1px solid var(--footer-border); }
html[data-theme="light"] #site-footer:empty { background: #ffffff; border-top-color: rgba(0, 0, 0, 0.08); }

/* the floating WhatsApp / call buttons are gone from the site (also hides them in a footer copy saved earlier) */
.floating-contact { display: none !important; }

/* while a page is still loading (the profiles, Available Tuitions) the footer stays below the screen - it no
   longer shows near the top and then jumps down when the page arrives */
main.loading-page:not(.hidden) { min-height: 100vh; }

/* a short page: the footer still sits at the bottom of the screen (an empty space above it, not below) */
body:not([data-page="admin"]) { min-height: 100vh; display: flex; flex-direction: column; }
body:not([data-page="admin"]) > #site-footer { margin-top: auto; }
html.embed body, html.acting body { display: block; min-height: 0; }

/* a social icon with no page yet: shown as the others, but nothing happens on a tap (no hover either) */
.social-link.is-off { pointer-events: none; cursor: default; }