/* ============================================================
   Footer — shared across every page that renders the site footer
   (index, about, photography, youtube, and the work case studies).
   Page-agnostic selectors (data-framer-name / colour tokens) since
   the Framer hash classes differ per page.
   ============================================================ */

/* Tagline: "Always open to conversations about design…" → 14px */
[data-framer-name^="Always open to conversations"] p.framer-text {
  --framer-font-size: 14px !important;
  font-size: 14px !important;
}

/* Credit line: "© 2026 · Built with ❤ and cmd+z · Bengaluru, KA"
   → 12px + ALL CAPS. The 10px / rgb(200,200,200) token is unique
   to these credit parts (social labels are rgb(26,26,26)). */
p.framer-text[style*="--framer-font-size:10px"][style*="rgb(200, 200, 200)"] {
  --framer-font-size: 12px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}

/* Social containers (Mail, X, GitHub, LinkedIn, Substack, YouTube,
   Figma) — the only `motion.a` elements on the page. Hover fills the
   container with #FAFAFA, with a smooth transition.
   Equal padding on all four sides (Framer ships `0 12px` + fixed
   height); `height:auto` lets the symmetric padding size the box
   (8px ≈ the original 33px height). */
[data-framer-name="motion.a"] {
  transition: background-color 0.2s ease !important;
  padding: 8px !important;
  height: auto !important;
}
[data-framer-name="motion.a"]:hover {
  background-color: #FAFAFA !important;
}

/* External link labels (Mail, LinkedIn, Twitter/X, …) → 12px */
[data-framer-name="motion.a"] p.framer-text {
  --framer-font-size: 12px !important;
  font-size: 12px !important;
}