/* =========================================================
   ForGrowth Academy — header-contact.css
   ISOLATED. Adds a static phone / email / Instagram contact row to the
   desktop header and a matching line to the mobile slide-in menu.
   No positioning, scrolling, sliding or rotation — only a plain color
   transition on hover/focus, same as the existing nav links. Does not
   touch .site-header, .nav-row, .nav-cta, .btn, or any other selector.
   ========================================================= */

.nav-contact {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  border-right: 1px solid var(--line, #E2DED3);
  margin-right: 2px;
}

.nav-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--grey, #6B6B6E);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-contact-link:hover,
.nav-contact-link:focus-visible {
  color: var(--accent, #D9400B);
}

.nav-contact-link svg,
.nav-contact-icon-img {
  flex: none;
  display: block;
  width: 24px;
  height: 24px;
}

/* Brand icons (WhatsApp/Gmail/Instagram) sit on a white highlighted
   plate so they read clearly against the header instead of floating
   loose — same treatment as the footer's circular social icons. */
.nav-contact-link.nav-contact-icon-only {
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: 50%;
  background: var(--white, #fff);
  box-shadow: 0 1px 2px rgba(28,28,30,.07), 0 4px 12px -5px rgba(28,28,30,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease);
}

.nav-contact-link.nav-contact-icon-only {
  color: var(--ink, #1C1C1E);
}

.nav-contact-link.nav-contact-icon-only svg,
.nav-contact-link.nav-contact-icon-only .nav-contact-icon-img {
  width: 19px;
  height: 19px;
}

.nav-contact-link.nav-contact-icon-only svg [stroke] {
  stroke-width: 2.1;
}

.nav-contact-link.nav-contact-icon-only:hover,
.nav-contact-link.nav-contact-icon-only:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -5px rgba(28,28,30,.32);
}

.nav-contact-icon-only .nav-contact-text { display: none; }

/* Below 1180px, keep the phone number text but it's the first thing to go
   so the row never crowds the nav links or CTA. */
@media (max-width: 1180px) {
  .nav-contact-link:not(.nav-contact-icon-only) .nav-contact-text {
    display: none;
  }
}

/* The header's own breakpoint already hides nav-links and the CTA label
   below 1270px in favour of the hamburger menu — the static contact row
   follows the same rule rather than forcing everything into one row. */
@media (max-width: 1269px) {
  .nav-contact {
    display: none;
  }
}

/* ---------------------------------------------------------
   MOBILE MENU — contact line under the Enquire Now button.
   Reuses the existing .mobile-nav-contact rule already defined in
   styles.css (color, font, margin-top: auto) and only adds layout.
   --------------------------------------------------------- */
.mobile-nav-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.mobile-nav-contact a { transition: color 0.2s ease; }
.mobile-nav-contact a:hover,
.mobile-nav-contact a:focus-visible { color: var(--accent); }

.mobile-nav-contact-sep { opacity: 0.5; }

.mobile-nav-contact-ig {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}
.mobile-nav-contact-ig svg { display: block; width: 16px; height: 16px; }

@media (max-width: 420px) {
  /* Narrowest phones: stack phone/email instead of risking overlap. */
  .mobile-nav-contact { gap: 6px; }
  .mobile-nav-contact-sep { display: none; }
  .mobile-nav-contact a:not(.mobile-nav-contact-ig) { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-contact-link,
  .mobile-nav-contact a {
    transition: none;
  }
}

/* ---------------------------------------------------------
   Contact section (#contact) — brand icons inside the existing
   circular plate. Only adds rounding to the image; .contact-icon's
   own size/background/layout (styles.css) is untouched.
   --------------------------------------------------------- */
.contact-icon-brand svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* ---------------------------------------------------------
   Footer — circular brand-icon row (reuses the existing
   .footer-socials plate from styles.css: size, border, hover
   background) and a "Free Demo Class" CTA strip above the
   copyright line. Isolated to these two new pieces only.
   --------------------------------------------------------- */
.footer-socials {
  margin-top: 22px;
  gap: 16px;
}
/* Solid white plate so each brand icon reads clearly against the dark
   footer, instead of the near-invisible translucent circle before. */
.footer-socials a {
  width: 48px;
  height: 48px;
  background: var(--white, #fff);
  color: var(--ink, #1C1C1E);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 8px 18px -8px rgba(0,0,0,.45);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-socials a:hover,
.footer-socials a:focus-visible {
  background: var(--white, #fff);
  border-color: var(--accent, #D9400B);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,.22), 0 0 0 4px rgba(217,64,11,.18), 0 12px 24px -10px rgba(0,0,0,.5);
}
.footer-socials a svg {
  display: block;
  width: 24px;
  height: 24px;
}
.footer-socials a svg [stroke] {
  stroke-width: 2.1;
}
@media (prefers-reduced-motion: reduce) {
  .footer-socials a { transition: none; }
  .nav-contact-link.nav-contact-icon-only { transition: none; }
}

.footer-demo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(217, 64, 11, 0.16), rgba(217, 64, 11, 0.04));
  border: 1px solid rgba(217, 64, 11, 0.35);
  border-radius: 14px;
  padding: 32px 36px;
  margin-bottom: 40px;
}
.footer-demo-text h3 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.footer-demo-text p {
  color: var(--grey-light);
  font-size: 14.5px;
  margin: 0;
}
.footer-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 26px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s ease;
}
.footer-demo-btn:hover {
  background: var(--accent-bright, #F0561F);
  transform: translateY(-2px);
}
.footer-demo-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.footer-demo-btn:hover .footer-demo-arrow {
  transform: translateX(4px);
}
@media (max-width: 640px) {
  .footer-demo-strip { padding: 26px 22px; }
  .footer-demo-btn { width: 100%; justify-content: center; }
}