/* Brand layer: real logo + colourful social icons.
   Loaded after the extracted component CSS so these win, keeping the
   extracted stylesheets byte-identical to the original build. */

/* ---------------------------------------------------------------- LOGO ---
   The original slot was a dark-green gradient rounded square holding a 🌿
   emoji. The real mark is green, so the box is dropped and the mark stands
   on its own. */
.logo-icon,
.footer-logo-icon {
  background: none;
  box-shadow: none;
  border-radius: 0;
  width: auto;
}

.logo-icon { height: 54px; }
.footer-logo-icon { height: 64px; }

.logo-mark {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .logo-icon { height: 44px; }
  .footer-logo-icon { height: 56px; }
}

/* -------------------------------------------------------------- SOCIAL ---
   Was bare "IG"/"LN"/"YT"/"FB" text in unclickable divs. Now real brand marks
   in the brand colours, on the footer's existing 48px rounded square. */
.social-btn {
  color: #fff;
  text-decoration: none;
  border-color: transparent;
  /* .social-btn already sets size, radius, flex centring and transition. */
}

.social-btn svg { display: block; }

.social-instagram {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.social-linkedin { background: #0a66c2; }
.social-youtube  { background: #ff0000; }
.social-facebook { background: #1877f2; }

/* The original lifted and glowed green on hover; keep the motion, but glow in
   each brand's own colour. */
.social-btn:hover,
.social-btn:focus-visible {
  transform: translateY(-5px) scale(1.05);
  border-color: transparent;
  color: #fff;
}

.social-instagram:hover,
.social-instagram:focus-visible { box-shadow: 0 18px 38px rgba(214, 36, 159, .45); }

.social-linkedin:hover,
.social-linkedin:focus-visible { box-shadow: 0 18px 38px rgba(10, 102, 194, .45); }

.social-youtube:hover,
.social-youtube:focus-visible { box-shadow: 0 18px 38px rgba(255, 0, 0, .42); }

.social-facebook:hover,
.social-facebook:focus-visible { box-shadow: 0 18px 38px rgba(24, 119, 242, .45); }

/* Placeholder entries (url '#') render as spans - visibly present but clearly
   not clickable, so a dead link never ships. */
span.social-btn { cursor: default; opacity: .55; }
span.social-btn:hover { transform: none; box-shadow: none; }