/* Light to start */
:root{
  --light:#FBFCFF;
  --dark:#212121;
}
body { background: var(--light); }

/* CONTACT hero */
.contact-hero{
  flex: 0 0 100vw;
  min-width: 100vw;
  height: 200vh;
  position: relative;
}
.contact-hero__sticky{
  position: sticky; top: 0; height: 100vh; overflow: clip;
  background: var(--light);
}

.contact-word {
  position: absolute;
  inset: 0;
  display: flex;           /* instead of grid */
  align-items: center;     /* vertical centering */
  left: 30px;
  /* padding-left: clamp(16px, 6vw, 8rem); */
  font-family: "Montserrat",  sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--dark);
  font-size: clamp(6rem, 18vw, 22rem);
  line-height: 1;          /* prevent breaking */
  margin: 0;
  pointer-events: none;
}

.contact-word .o{ 
    display:inline-block; 
}

/* Growing dark circle */
.o-burst{
  position:absolute; 
  inset:0; 
  z-index:1;
  background: var(--dark);
  clip-path: circle(var(--r,0vmax) at var(--cx,50%) var(--cy,50%));
  transition: clip-path 0.6s linear;
  will-change: clip-path;
}
.contact-word{ 
    z-index:2; 
}

.get-in-touch .typewriter-heading {
    padding-left: 50px;
}

.get-in-touch-description {
    padding-left: 50px;
}

.social-icons {
    padding-left: 50px;
}

body.is-contact-dark .navbar {
  background-color: #212121;
}

/* Lock the site dark after the take-over */
body.is-contact-dark { 
    background:#212121; 
}

body.is-contact-dark .contact-hero__sticky { 
    background: #212121; 
}

body.is-contact-dark .navbar #hamburger div { 
    background-color:#FBFCFF; 
}

body.is-contact-dark .logo {
    color: #FBFCFF;
}

body.is-contact-dark .logo:hover {
    color: #9BC13B;
}

body.is-contact-dark .get-in-touch-description {
    color: #FBFCFF;
}

body.is-contact-dark .social-icons span {
    color: #FBFCFF;
}

body.is-contact-dark .social-icons span:hover {
    color: #9BC13B;
}

/* Base row style */
.social-icons .icon-link{
  display: flex;                /* flex row */
  align-items: center;          /* vertical center */
  gap: 1rem;                    /* space between icon and text */
  text-decoration: none;
  position: relative;
  color: inherit;
}

/* Icon drawn via pseudo-element */
.social-icons .icon-link::before{
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: var(--icon) no-repeat center / contain;
  flex-shrink: 0;               /* don't shrink */
}

/* Hide the inline <img> versions so only the pseudo shows */
.social-icons .icon-link img{ display: none; }

/* LIGHT mode sources (path is relative to your CSS file) */
.social-icons .linkedin{ --icon: url("/images/linkedin-desktop-icon.svg"); }
.social-icons .github  { --icon: url("/images/github-desktop-icon.svg"); }

/* DARK mode sources (triggered by your class toggle) */
body.is-contact-dark .social-icons .linkedin{ --icon: url("/images/linkedin-mobile-icon.svg"); }
body.is-contact-dark .social-icons .github  { --icon: url("/images/github-mobile-icon.svg"); }

/* Your existing dark-mode text colors still apply */
body.is-contact-dark .social-icons span{ color:#FBFCFF; }
body.is-contact-dark .social-icons .icon-link:hover span{ color:#9BC13B; }

body.is-contact-dark #get-in-touch {
    background-image: url("/images/get-in-touch-bg-white.svg");
    background-repeat: no-repeat;
    background-position: 80%;
}

body.is-contact-dark form label {
    color: #FBFCFF;
}

body.is-contact-dark .follow-through {
    color: #FBFCFF;
}

body.is-contact-dark .story-line input::placeholder {
    color: #fbfcff67;
}

body.is-contact-dark .story-line input:focus::placeholder {
    color: transparent;
}

/* Mobile tweak */
@media (max-width:768px){
    .contact-word{ 
        font-size: clamp(2.6rem, 18vw, 10rem);
        left: 5px;
    }

    .get-in-touch .typewriter-heading {
        padding-left: 0;
    }

    .get-in-touch-description {
    padding-left: 0;
    }

    .social-icons {
    padding-left: 20px;
    }

    #get-in-touch {
        background-image: none !important;
    }


}