/* Meta Digital — brand overrides on top of the Hub (asymmetric-agency) template.
   Corporate teal #00a49d + deep ink navy #0E1B2A. Keep this file for all custom tweaks. */

:root {
  --meta-teal: #00a49d;
  --meta-teal-dark: #00857f;
  --meta-navy: #0E1B2A;
  --meta-ink: #0b1622;
}

::selection { background: var(--meta-teal); color: #fff; }

/* Footer: template ships a red footer → make it navy */
.main-footer.bg-red-500,
.main-footer.bg-red-500 .lqd-section { background-color: var(--meta-navy) !important; }
.bg-red-500 { background-color: var(--meta-navy) !important; }
.bg-red-100 { background-color: rgba(0,164,157,0.08) !important; }

/* Accent: links, underlines, highlights → teal */
a:hover { color: var(--meta-teal); }
.text-primary, .lqd-highlight-inner { color: var(--meta-teal) !important; }
.lqd-highlight-line { background-color: var(--meta-teal) !important; }

/* Primary buttons → teal */
.btn.btn-solid .btn-bg,
.btn-primary .btn-bg,
.lqd-btn-solid .btn-bg { background-color: var(--meta-teal) !important; }
.btn.btn-solid:hover .btn-bg { background-color: var(--meta-teal-dark) !important; }

/* Section eyebrow label */
.meta-eyebrow {
  display: inline-block; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--meta-teal); margin-bottom: 1rem;
}

/* Client logo grid — greyscale until hover (elite, monochrome) */
.meta-clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
@media (min-width: 992px) { .meta-clients-grid { grid-template-columns: repeat(3, 1fr); } }
.meta-client {
  display: flex; align-items: center; justify-content: center; min-height: 130px;
  padding: 28px; border: 1px solid rgba(14,27,42,0.08);
}
.meta-client img {
  max-width: 200px; width: auto; height: auto;
  filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s;
}
.meta-client:hover img { filter: grayscale(0); opacity: 1; }
.meta-client .meta-client-fallback { color: #6b7785; font-weight: 600; letter-spacing: .02em; }

/* Feature / service cards */
.meta-feature { padding: 8px 0; }
.meta-feature .meta-feature-icon { font-size: 40px; line-height: 1; color: var(--meta-teal); margin-bottom: 1.25rem; display: inline-block; }
.meta-feature h4 { margin-bottom: .5rem; }

.meta-service { padding: 24px 0; border-top: 1px solid rgba(14,27,42,0.10); }
.meta-service:first-child { border-top: 0; }
.meta-service h4 { color: var(--meta-navy); margin-bottom: .35rem; }

/* Contact form */
.meta-form .form-control,
.meta-form select.form-control,
.meta-form span.form-control {
  display: block; box-sizing: border-box;
  border: 0; border-bottom: 1px solid rgba(14,27,42,0.2); border-radius: 0;
  background: transparent; padding: 14px 2px; width: 100%;
  margin: 10px 0; line-height: 1.5; font: inherit; color: inherit;
}
/* Service selector — match the underlined text fields, drop native chrome */
.meta-form select.form-control {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230E1B2A' stroke-width='1.5' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
/* If a plain span is used as the service field, keep it looking like a field */
.meta-form span.form-control { min-height: 52px; cursor: pointer; }
.meta-form .form-control:focus { outline: 0; border-color: var(--meta-teal); box-shadow: none; }
.meta-form .meta-submit { background: var(--meta-teal); color: #fff; border: 0; border-radius: 999px; padding: 14px 34px; font-weight: 600; cursor: pointer; transition: background .2s; }
.meta-form .meta-submit:hover { background: var(--meta-teal-dark); }
.meta-form .meta-form-msg { margin-top: 14px; font-weight: 500; }
.meta-form .meta-form-msg.ok { color: var(--meta-teal-dark); }
.meta-form .meta-form-msg.err { color: #c0392b; }

/* Honeypot — keep off-screen, never shown */
.meta-hp { position: absolute !important; left: -5000px !important; height: 0; overflow: hidden; }

/* Navbar brand logo sizing (template hard-codes 52x23) */
.navbar-brand-inner img { width: auto !important; height: 40px !important; }

/* Missing utility classes (Hub's scale skips these) */
.mb-160 { margin-bottom: 160px; }
.mb-130 { margin-bottom: 130px; }
.mt-130 { margin-top: 130px; }
@media (max-width: 991.98px) { .md\:mb-60 { margin-bottom: 60px; } }

/* Section decorative icon */
.meta-sec-icon { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:16px; background:rgba(0,164,157,0.10); color:var(--meta-teal); font-size:30px; margin-bottom:20px; }

/* Inline-SVG icon sizing (we use SVG, not the flaky icon font) */
.meta-sec-icon svg { width: 30px; height: 30px; }
.iconbox-icon-container svg { width: 44px; height: 44px; }

/* Proper Hub theming (per docs): override the template's CSS variables.
   --lqd-color-primary is THE accent used for buttons, icon colours, links, etc. */
:root {
  --lqd-color-primary: #00a49d;   /* Meta teal — global accent */
  --lqd-color-secondary: #0E1B2A; /* deep ink navy */
  --lqd-color-link: #00a49d;
  --lqd-color-link-hover: #00857f;
}