/* =========================================================================
   float.css — fixed edge widgets (replaces the old float.css completely)

   LEFT  : social icons — vertical stack of round icons with brand colours
           (Facebook blue, Instagram red, LinkedIn blue, X black,
           YouTube red, mail orange, location red, WhatsApp green).
           WhatsApp sits separately at the bottom-left with a soft ring pulse.
   RIGHT : "Admissions Are In Progress" tab — floating, orange, thick white
           text, reads bottom-to-top, soft glow every few seconds.
   Back-to-top button stays in base.css (bottom-right).

   Colours are matched by the link itself (facebook.com, instagram.com,
   mailto:, wa.me ...) AND by the class key, so they work whatever key
   names the admin panel uses.
   Sizes: change --fs-size (icons) and --ad-font (admissions text) below.
   NOTE: no transform/translate on .float-social itself, otherwise the
   fixed WhatsApp button would stop sticking to the screen corner.
   ========================================================================= */

:root {
  --fs-size: 44px;        /* social icon circle (desktop) */
  --fs-gap: 4px;
  --ad-font: 0.8rem;      /* admissions tab text size */
}

/* ---------- LEFT: social icons ---------- */
.float-social {
  position: fixed; left: 6px; top: 0; bottom: 0;
  margin: auto 0; height: max-content;      /* vertical centre without transform */
  z-index: 450;
  display: flex; flex-direction: column; gap: var(--fs-gap);
}

.float-social a {
  --fs-bg: #0A2C66;                          /* fallback colour (navy) */
  position: relative;
  width: var(--fs-size); height: var(--fs-size); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fs-bg); color: #fff; font-size: calc(var(--fs-size) * 0.4);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.28s cubic-bezier(.2, .8, .2, 1), box-shadow 0.28s ease, filter 0.28s ease;
  animation: fsIn 0.6s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: calc(0.3s + var(--i, 0) * 0.09s);
}
.float-social a:hover,
.float-social a:focus-visible {
  transform: translateX(6px) scale(1.1);
  box-shadow: 0 12px 22px -8px rgba(0, 0, 0, 0.6);
  filter: brightness(1.06);
}
.float-social a:focus-visible { outline: 3px solid #FFC400; outline-offset: 3px; }

/* ---- brand colours, same as the Kairos site (placed after the default so they win) ---- */
.float-social a.fs-facebook,  .float-social a[href*="facebook.com"], .float-social a[href*="fb.com"]  { --fs-bg: #3B5998; }
.float-social a.fs-instagram, .float-social a[href*="instagram.com"] { --fs-bg: #E1262D; }
.float-social a.fs-x, .float-social a.fs-twitter,
.float-social a[href*="twitter.com"], .float-social a[href*="x.com"] { --fs-bg: #000000; }
.float-social a.fs-linkedin,  .float-social a[href*="linkedin.com"]  { --fs-bg: #0A7BBF; }
.float-social a.fs-youtube,   .float-social a[href*="youtube.com"], .float-social a[href*="youtu.be"] { --fs-bg: #D91E1E; }
.float-social a.fs-mail, .float-social a.fs-email, .float-social a[href^="mailto:"] { --fs-bg: #E8790E; }
.float-social a.fs-location, .float-social a.fs-map, .float-social a.fs-maps,
.float-social a[href*="google.com/maps"], .float-social a[href*="maps.app"], .float-social a[href*="goo.gl/maps"] { --fs-bg: #2E8B57; }
.float-social a.fs-whatsapp,  .float-social a[href*="wa.me"], .float-social a[href*="whatsapp.com"] { --fs-bg: #25D366; }

/* CALL icon (replaces LinkedIn) */
.float-social a.fs-call, .float-social a[href^="tel:"] { --fs-bg: #0B7A75; }

/* Hover label: a coloured pill slides out of the icon ("Follow us on Instagram" etc.)
   The text comes from the link's aria-label (set in base.html -> fl_labels). */
.float-social a { isolation: isolate; }
@media (hover: hover) {
  .float-social a::after {
    content: attr(aria-label);
    position: absolute; z-index: -1;
    left: 50%; top: 0; height: 100%;
    display: flex; align-items: center;
    padding: 0 20px 0 calc(var(--fs-size) / 2 + 12px);
    border-radius: 999px;
    background: var(--fs-bg); color: #fff; white-space: nowrap;
    font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.55);
    clip-path: inset(0 100% 0 0 round 999px);
    opacity: 0; pointer-events: none;
    transition: clip-path 0.4s cubic-bezier(.2, .8, .2, 1), opacity 0.2s ease;
  }
  .float-social a:hover::after,
  .float-social a:focus-visible::after { clip-path: inset(0 0 0 0 round 999px); opacity: 1; }

  /* the icon itself gives a little wiggle while the label opens */
  .float-social a:hover i,
  .float-social a:focus-visible i { animation: fsWiggle 0.6s ease-in-out; }
}
@keyframes fsWiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  25%      { transform: rotate(-14deg) scale(1.15); }
  60%      { transform: rotate(10deg) scale(1.15); }
}

/* WhatsApp: separate, bottom-left corner, with a soft pulse ring */
.float-social a.fs-whatsapp {
  position: fixed; left: 14px; bottom: 20px;
  width: calc(var(--fs-size) + 8px); height: calc(var(--fs-size) + 8px);
  font-size: 1.6rem;
}
.float-social a.fs-whatsapp::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; pointer-events: none;
  animation: fsRing 2.6s ease-out 1.6s infinite;
}

@keyframes fsIn   { from { opacity: 0; transform: translateX(-26px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes fsRing { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.65); opacity: 0; } }

/* ---------- RIGHT: Admissions tab (floating) ---------- */
.float-admission {
  position: fixed; right: 0; top: 0; bottom: 0;
  margin: auto 0; height: max-content;      /* vertical centre without transform */
  z-index: 450;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;   /* icon at the bottom = start of the upward text */
  padding: 16px 9px 14px;
  background: linear-gradient(180deg, #F7993A 0%, #E8790E 50%, #C96208 100%);
  border-radius: 14px 0 0 14px;
  box-shadow: -8px 12px 26px -12px rgba(194, 98, 10, 0.7);
  font-family: var(--font-body); font-weight: 800; font-size: var(--ad-font);
  letter-spacing: 0.08em; line-height: 1;
  transition: transform 0.28s cubic-bezier(.2, .8, .2, 1), filter 0.28s ease;
  animation:
    adIn 0.8s cubic-bezier(.2, .8, .2, 1) 0.6s backwards,
    adGlow 3.2s ease-in-out 2s infinite;
}
/* text is always pure white (forced, so no page css can turn it dark) */
.float-admission,
.float-admission:link,
.float-admission:visited,
.float-admission:hover,
.float-admission span,
.float-admission i { color: #fff !important; }
.float-admission span {
  writing-mode: vertical-rl; transform: rotate(180deg);   /* reads bottom → top */
  white-space: nowrap; font-weight: 800;
}
.float-admission i { font-size: 0.95rem; }
.float-admission:hover,
.float-admission:focus-visible { transform: translateX(-4px); filter: brightness(1.07) saturate(1.05); }
.float-admission:focus-visible { outline: 3px solid #0A2C66; outline-offset: -3px; }

@keyframes adIn   { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }
@keyframes adGlow {
  0%, 100% { box-shadow: -8px 12px 26px -12px rgba(194, 98, 10, 0.7), 0 0 0 0 rgba(232, 121, 14, 0); }
  50%      { box-shadow: -8px 12px 26px -12px rgba(194, 98, 10, 0.7), 0 0 0 6px rgba(232, 121, 14, 0.18); }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 700px) {
  :root { --fs-size: 28px; --fs-gap: 4px; --ad-font: 0.68rem; }
  .float-social { left: 3px; opacity: .92; }
  .float-social a.fs-whatsapp { left: 10px; bottom: 16px; }
  .float-admission { padding: 12px 7px 11px; gap: 8px; border-radius: 12px 0 0 12px; }
}

@media print { .float-social, .float-admission { display: none; } }