/* ==========================================================================
   VFORGE — CONTACT KIT  (styles_contact.css)
   Shared contact components used on every page:
     .vc-contact      Get in touch block (footer) — location / email / call / WhatsApp
     .vc-enquire      email + WhatsApp icon pair for cards and slides
     .vc-modal        "Book a Diagnostic Call" booking table (date/day/time/venue)
   Loaded BEFORE styles_mobile.css so the mobile layer always wins.
   No fixed pixel widths: every block is fluid and stacks on phones.
   ========================================================================== */

/* ---------------------------------------------------------------- Get in touch */
.vc-contact { display: flex; flex-direction: column; gap: 0.9rem; }
.vc-row { display: flex; gap: 0.7rem; align-items: flex-start; min-width: 0; }
.vc-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 123, 74, 0.12);
  border: 1px solid rgba(201, 123, 74, 0.3);
  color: var(--copper-flare);
}
.vc-ico svg { width: 17px; height: 17px; display: block; }
.vc-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vc-name {
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  color: var(--signal); line-height: 1.35; overflow-wrap: anywhere;
}
.vc-sub { font-size: 0.85rem; color: rgba(244, 239, 228, 0.62); line-height: 1.45; overflow-wrap: anywhere; }
.vc-link {
  color: var(--copper-flare); text-decoration: none; font-size: 0.88rem;
  font-weight: 600; overflow-wrap: anywhere; line-height: 1.5;
}
.vc-link:hover { color: var(--copper-flare); text-decoration: underline; }
.vc-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.vc-legal {
  margin-top: 0.35rem; padding-top: 0.7rem; font-size: 0.78rem; line-height: 1.5;
  color: rgba(244, 239, 228, 0.55); border-top: 1px solid rgba(244, 239, 228, 0.1);
  overflow-wrap: anywhere;
}
.vc-legal strong { color: rgba(244, 239, 228, 0.8); font-weight: 600; }
/* on light surfaces (if ever used outside the dark footer) */
.vc-contact.on-light .vc-name { color: var(--verdan-green-deep); }
.vc-contact.on-light .vc-sub { color: #5A5A52; }
.vc-contact.on-light .vc-link { color: var(--forge-ember); }
.vc-contact.on-light .vc-legal { color: #5A5A52; border-top-color: var(--parchment-line); }

/* -------------------------------------------------------- enquire icon pair */
.vc-enquire { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.vc-enquire-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.85rem; min-height: 40px;
  border-radius: 999px; text-decoration: none;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  border: 1px solid rgba(201, 123, 74, 0.4);
  background: rgba(201, 123, 74, 0.1);
  color: var(--copper-flare);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.vc-enquire-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.vc-enquire-btn:hover { background: rgba(201, 123, 74, 0.22); color: var(--signal); transform: translateY(-1px); }
.vc-enquire-btn.is-wa { border-color: rgba(37, 211, 102, 0.45); background: rgba(37, 211, 102, 0.12); color: #6ee7a0; }
.vc-enquire-btn.is-wa:hover { background: rgba(37, 211, 102, 0.22); color: #d6ffe6; }
/* inside dark cards */
.vc-enquire.is-dark .vc-enquire-btn { color: var(--copper-flare); }
.vc-enquire.is-dark .vc-enquire-btn.is-wa { color: #6ee7a0; }
.vc-enquire-wrap { margin-top: auto; padding-top: 0.85rem; }
.section-dark .vc-enquire-btn, .is-slide .vc-enquire-btn { color: var(--copper-flare); }
.section-light .vc-enquire-btn { color: var(--forge-ember); border-color: rgba(181, 80, 46, 0.35); background: rgba(181, 80, 46, 0.07); }
.section-light .vc-enquire-btn.is-wa { color: #128c3a; border-color: rgba(18, 140, 58, 0.35); background: rgba(18, 140, 58, 0.08); }
.section-light .vc-enquire-btn:hover { background: rgba(181, 80, 46, 0.16); color: var(--verdan-green-deep); }

/* evidence cards: keep equal heights when wrapped in a cell */
.ev-cell { display: flex; flex-direction: column; }
.ev-cell > .ev-card { flex: 1 1 auto; }

/* narrow card contexts: never let the enquire pair overflow its card */
.vc-enquire-btn { max-width: 100%; min-width: 0; }
.vc-enquire-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-card .vc-enquire,
.industry-card .vc-enquire,
.ev-cell .vc-enquire,
.confidence-card .vc-enquire { flex-direction: column; align-items: stretch; }
.flow-card .vc-enquire-btn,
.industry-card .vc-enquire-btn,
.ev-cell .vc-enquire-btn,
.confidence-card .vc-enquire-btn { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- booking modal */
.vc-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(10, 18, 14, 0.72);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.vc-modal.is-open { display: flex; }
/* the cookie banner must never sit on top of the booking form */
body.vc-modal-open #cookie-notice { display: none !important; }
body.vc-modal-open { overflow: hidden; }
.vc-modal-dialog {
  position: relative; width: 100%; max-width: 620px; margin: auto;
  background: linear-gradient(180deg, #14201A 0%, #163A2B 100%);
  border: 1px solid rgba(201, 123, 74, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
  color: var(--signal);
  /* pinned header + footer, scrollable middle: the send buttons are always
     reachable and never overlap the form content */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 2.4rem); overflow: hidden;
}
.vc-modal-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.3rem 0.9rem; border-bottom: 1px solid rgba(244, 239, 228, 0.12);
}
.vc-modal-foot {
  flex: 0 0 auto;
  padding: 0.9rem 1.3rem 1.1rem;
  border-top: 1px solid rgba(244, 239, 228, 0.12);
  background: rgba(16, 26, 21, 0.55);
}
.vc-modal-head h3 { font-size: 1.15rem; color: var(--signal); line-height: 1.3; }
.vc-modal-head p { font-size: 0.85rem; color: rgba(244, 239, 228, 0.68); margin-top: 0.25rem; }
.vc-modal-close {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(244, 239, 228, 0.08); color: var(--signal); font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vc-modal-close:hover { background: rgba(244, 239, 228, 0.16); }
.vc-modal-body { padding: 1.1rem 1.3rem 1.7rem; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.vc-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.vc-table tr { border-bottom: 1px solid rgba(244, 239, 228, 0.1); }
.vc-table th, .vc-table td { text-align: left; padding: 0.6rem 0; font-size: 0.9rem; vertical-align: top; }
.vc-table th {
  width: 42%; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--copper-flare); font-weight: 700; padding-right: 0.8rem;
}
.vc-table td { color: rgba(244, 239, 228, 0.9); }
.vc-modal .vc-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.85rem; min-width: 0; }
.vc-modal label { font-size: 0.78rem; font-weight: 600; color: rgba(244, 239, 228, 0.85); }
.vc-modal input, .vc-modal select, .vc-modal textarea {
  width: 100%; max-width: 100%; min-width: 0;
  padding: 0.7rem 0.8rem; border-radius: 10px; font-family: inherit; font-size: 0.95rem;
  background: rgba(244, 239, 228, 0.06); color: var(--signal);
  border: 1px solid rgba(244, 239, 228, 0.2);
}
.vc-modal input:focus, .vc-modal select:focus, .vc-modal textarea:focus {
  outline: 2px solid rgba(201, 123, 74, 0.6); outline-offset: 1px;
}
.vc-modal input::placeholder, .vc-modal textarea::placeholder { color: rgba(244, 239, 228, 0.4); }
.vc-modal select option { background: #14201A; color: var(--signal); }
.vc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.vc-req { color: var(--copper-flare); }
.vc-modal-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
.vc-modal-actions .btn { flex: 1 1 220px; justify-content: center; }
.vc-btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85em 1.4em; border-radius: 999px; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  background: linear-gradient(120deg, #1fa855 0%, #25d366 100%); color: #06240f;
  border: 0;
}
.vc-btn-wa:hover { filter: brightness(1.06); }
.vc-note { font-size: 0.78rem; color: rgba(244, 239, 228, 0.6); margin-top: 0.8rem; line-height: 1.5; }
.vc-error { font-size: 0.82rem; color: #ffb4a2; margin-top: 0.5rem; display: none; }
.vc-error.is-on { display: block; }

/* contact-page summary panel */
.vc-summary {
  display: none; margin-top: 1.2rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--parchment-line); border-left: 3px solid var(--forge-ember);
  border-radius: var(--radius-md); background: var(--white);
}
.vc-summary.is-on { display: block; }
.vc-summary h3 { font-size: 1.05rem; color: var(--verdan-green-deep); margin-bottom: 0.6rem; }
.vc-summary pre {
  white-space: pre-wrap; word-break: break-word; font-family: var(--font-body); font-size: 0.9rem;
  color: var(--charcoal); line-height: 1.6; margin: 0 0 0.9rem;
}
.vc-summary .vc-modal-actions .btn, .vc-summary .vc-btn-wa { flex: 1 1 200px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .vc-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vc-modal { padding: 0; align-items: stretch; overflow: hidden; }
  .vc-modal-dialog {
    max-width: 100%; border-radius: 0;
    height: 100%; max-height: 100vh; overflow-y: auto;
    border-left: 0; border-right: 0;
  }
  .vc-modal-head { padding: 1rem 1.1rem 0.8rem; }
  .vc-modal-body { padding: 1rem 1.1rem 2.1rem; }   /* clears the pinned footer so the last field's border is never flush against it */
  .vc-table th { width: 38%; font-size: 0.68rem; }
  .vc-table th, .vc-table td { font-size: 0.86rem; padding: 0.5rem 0; }
  .vc-modal-actions .btn, .vc-btn-wa { flex: 1 1 100%; width: 100%; }
  .vc-modal-foot { padding: 0.8rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom)); }
  .vc-enquire-btn { flex: 1 1 auto; justify-content: center; }
  .vc-ico { width: 30px; height: 30px; }
}

/* ==========================================================================
   FOOTER v2 — the founder's 5-column arrangement (sample: 2026-09-16)
   Order: entity/address · Solutions · Company · Get in touch · Legal
   .footer-bottom (copyright row) is deliberately untouched.
   ========================================================================== */
.footer-top.footer-5 {
  grid-template-columns: 1.35fr 0.8fr 0.9fr 1.3fr 0.72fr;
  align-items: start;
  gap: var(--space-4) var(--space-3);
}
.footer-5 .f-col { min-width: 0; }
.footer-5 .f-col-entity { display: flex; flex-direction: column; gap: 0.9rem; }
.footer-5 .vc-contact { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-5 .vc-row { gap: 0.6rem; }
.footer-5 .vc-name { font-size: 1rem; color: var(--signal); }
.footer-5 .vc-addr {
  display: block; font-weight: 400; font-size: 0.85rem; line-height: 1.5;
  color: rgba(244, 239, 228, 0.62); text-decoration: none; overflow-wrap: anywhere;
}
.footer-5 .vc-addr:hover { color: var(--copper-flare); text-decoration: underline; }
.footer-5 .vc-sub { font-size: 0.85rem; line-height: 1.55; color: rgba(244, 239, 228, 0.55); }
.footer-5 .vc-legal { font-size: 0.76rem; color: rgba(244, 239, 228, 0.45); }
/* every footer link reads the same colour — no single item (e.g. Diagnostic) stands out */
.footer-5 .f-col a { color: rgba(244, 239, 228, 0.8); }
.footer-5 .f-col a:hover { color: var(--copper-flare); }
/* icon tiles: rounded squares, brand coloured (per the sample) */
.footer-5 .vc-ico { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; }
.footer-5 .vc-ico.is-pin {
  background: rgba(201, 123, 74, 0.16); border: 1px solid rgba(201, 123, 74, 0.42);
  color: var(--copper-flare);
}
.footer-5 .vc-ico.is-brand {
  background: rgba(22, 58, 43, 0.95); border: 1px solid rgba(244, 239, 228, 0.16);
  padding: 0; overflow: hidden;
}
.footer-5 .vc-ico.is-brand img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; }
/* the two numbers stack under one icon, as in the sample */
.footer-5 .vc-links { flex-direction: column; gap: 0.2rem; align-items: flex-start; }
.footer-5 .vc-link { font-size: 0.86rem; }

@media (max-width: 1240px) and (min-width: 981px) {
  .footer-top.footer-5 { grid-template-columns: 1.25fr 1fr 1fr; }
}
@media (max-width: 980px) and (min-width: 641px) {
  .footer-top.footer-5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-top.footer-5 { grid-template-columns: 1fr; gap: var(--space-3); }
  .footer-5 .f-col-entity { gap: 0.75rem; }
}

/* ------------------- cookie notice: never cover the footer's last rows ---- */
body.cookie-open .site-footer { padding-bottom: calc(var(--cookie-h, 0px) + var(--space-4)); }
@media (max-width: 640px) {
  .cookie-notice { padding: 0.7rem 0; }
  .cookie-notice .container { gap: 0.55rem; }
  .cookie-notice p { font-size: 0.78rem; line-height: 1.45; margin: 0; }
  .cookie-notice .btn { padding: 0.5em 1.1em; font-size: 0.78rem; }
}

/* -------- secondary link row: keeps Team/Engagement reachable without
   making the Company column denser than the rest of the footer -------- */

/* ------- Get in touch: keep the email on one line at desktop widths --------
   Grid columns were leaving the address ~10px short, so it broke mid-domain
   ("...verdanforge.co" / "m.my"). Rebalance and let it wrap only when it really
   has to (<=520px). */
@media (min-width: 1241px) {
  /* Rebalance only at full desktop: an unconditional rule here would beat the
     phone breakpoints below and squeeze the footer columns to a few px. */
  .footer-top.footer-5 { grid-template-columns: 1.30fr 0.75fr 0.85fr 1.42fr 0.66fr; }
}
.footer-5 .vc-ico { width: 32px; height: 32px; border-radius: 9px; }
.footer-5 .vc-contact { gap: 0.7rem; }
.footer-5 .vc-contact .vc-link { font-size: 0.84rem; }
.footer-5 .vc-contact .vc-email { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
@media (max-width: 1240px) {
  .footer-5 .vc-contact .vc-email { white-space: normal; overflow-wrap: anywhere; }
}