/* ============================================================
   Dark-theme override for the portfolio page.
   Matches the macedomarketing.com Next.js site: dark base,
   Nunito Sans (already used), coral -> amber brand gradients.
   Buttons kept as-is. Loaded AFTER the theme CSS so it wins.
   ============================================================ */

:root { --mm-coral:#f26745; --mm-amber:#ffd230; --mm-ink:#f7f4ef; --mm-muted:#b7b2ab; }

/* Guard: never allow a horizontal scrollbar (e.g. decorative glows or the
   card carousels can momentarily overhang during load). Clips only content
   that would sit past the viewport edge - no visible change. The `clip`
   value wins in modern browsers (no scroll container, sticky-safe); older
   browsers fall back to `hidden`. Inner carousels keep their own overflow. */
#wrapper { overflow-x: hidden; overflow-x: clip; }

body {
  background:
    radial-gradient(circle at 50% -8%, rgba(246,103,69,0.20), transparent 32%),
    linear-gradient(180deg, #130d0b 0, #0a0a0a 36%) #0a0a0a !important;
  background-attachment: fixed !important;
  color: var(--mm-ink);
}

/* Generic text that was dark on light */
h1,h2,h3,h4,h5,h6,p,li,span,a,label { color: inherit; }
body, .portfolio-section, .additional-start, .growthProcess, .macedo-marketing { color: var(--mm-ink); }

/* ---------- Portfolio section ---------- */
.portfolio-section .main-heading {
  color: #fff !important;
  font-weight: 800 !important;
}
.portfolio-section .main-heading .mm-grad {
  background: linear-gradient(90deg, var(--mm-coral) 0%, var(--mm-amber) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.portfolio-section .mm-portfolio-sub {
  color: #a1a1aa; font-size: 15px; line-height: 1.6;
  max-width: 620px; margin: 0 auto 8px; text-align: center;
  font-family: "Nunito Sans", sans-serif;
}
.portfolio-section .portfolio-tabs {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10);
}
.portfolio-section .portfolio-tabs .nav-link { color: #d8d4cf; }
.portfolio-section .portfolio-tabs .nav-link.active { background: var(--mm-coral); color:#fff !important; }
/* Creatives auto-play on scroll (like the homepage marquee) - hide the manual
   play/pause overlay so the videos read as clean, chrome-free ads. */
.portfolio-section .portfolio-cards-sec .video-toggle { display: none !important; }

/* ---------- Newsletter / "additional start" ---------- */
.additional-start { background: rgba(255,255,255,0.03) !important; border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); }
.additional-start h2, .additional-start h6 { color: var(--mm-ink) !important; }
.additional-start h2 span {
  background: linear-gradient(90deg, var(--mm-coral) 0%, var(--mm-amber) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.additional-start .social-box { background: rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.08); }
.additional-start .social-box .socailtopIcon h3, .additional-start .social-box .additional-desc { color: var(--mm-ink) !important; }

/* ---------- Footer CTA (was a white card) ---------- */
.site-footer { background: transparent !important; }
.footer-cta {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 80px -40px rgba(242,103,69,0.5) !important;
}
.footer-cta h2 { /* already a coral->amber gradient in theme; keep */ }
.footer-cta .cta-left-para { color: rgba(247,244,239,0.78) !important; border-color: rgba(255,255,255,0.12) !important; }
.footer-cta .newsletter-form-title { color: var(--mm-ink) !important; }
.footer-cta .newsletter-form input { background:#0e0e0e; color:#fff; border:1px solid rgba(255,255,255,0.18) !important; }
.footer-cta { border-radius: 24px !important; }
.footer-cta .cta-right { border-color: rgba(255,255,255,0.12) !important; }
.footer-cta .cta-right .feature h4, .footer-cta .cta-right .feature p { color: var(--mm-ink) !important; }

/* ---------- Newsletter form -> match homepage (dark input, orange-gradient submit) ---------- */
.footer-cta .newsletter-form input {
  height: 48px; border-radius: 8px !important;
  background: #0b0b0b !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
.footer-cta .newsletter-form input::placeholder { color: #6b6b70 !important; }
.footer-cta .newsletter-form input:focus { border-color: var(--mm-coral) !important; outline: none; }
.footer-cta .newsletter-form button {
  background: linear-gradient(98deg, var(--mm-coral) -30.08%, var(--mm-amber) 146.04%) !important;
  color: #0b0b0b !important; font-weight: 600 !important;
  border-radius: 8px !important; padding: 12px 28px !important;
}

/* ---------- Buttons -> site orange-gradient style (whole-site look) ---------- */
.common-btn {
  background: linear-gradient(98deg, var(--mm-coral) -30.08%, var(--mm-amber) 146.04%) !important;
  color: #0b0b0b !important;
  box-shadow: 0 12px 40px -8px rgba(242,103,69,0.55) !important;
  border-radius: 10px !important;
  text-transform: none !important;
}
.common-btn span { color: #0b0b0b !important; }
.common-btn:hover { transform: translateY(-2px) !important; }

/* ---------- Footer bottom -> match site SiteFooter ---------- */
.footer-bottom {
  background: #0a0a0a !important;
  color: var(--mm-muted) !important;
  position: relative;
  padding-top: 42px !important;
  border-top: none !important;
}
.footer-bottom::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,103,69,0.6), transparent);
}
.footer-bottom .footer-links h4 {
  color: #6b6b70 !important; font-size: 12px !important;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
}
.footer-bottom .footer-logo p { color: var(--mm-muted) !important; }
.footer-bottom .footer-links ul li a { color: var(--mm-muted) !important; transition: color 0.2s; }
.footer-bottom .footer-links ul li a:hover { color: #fff !important; }
.footer-bottom .footer-links .social-icons li a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14); transition: border-color 0.2s, background 0.2s;
}
.footer-bottom .footer-links .social-icons li a:hover { border-color: var(--mm-coral); background: rgba(242,103,69,0.08); }
.footer-bottom .footer-links .social-icons li img { width: 18px !important; height: 18px !important; }

/* ---------- Misc sections that may appear (kept consistent) ---------- */
.clients, .best-converting, .whatsincluded, .faq-listing { background: rgba(255,255,255,0.02) !important; }
.macedo-marketing, .resultsbox, .allclient_btm, .includefullbox { background: transparent !important; }
.macedo-marketing__heading, .allclient_btm h2, .resultsbox h2, .includeBox .includeleftBox h3, .includeBox .includeleftBox p { color: var(--mm-ink) !important; }
.faqItems .accordion .accordion-item { background: rgba(255,255,255,0.04) !important; box-shadow:none; border:1px solid rgba(255,255,255,0.10); }

/* ==========================================================================
   Homepage-matching newsletter + footer (rebuilt markup: .mm-* classes)
   Mirrors the site's NewsletterCta + SiteFooter.
   ========================================================================== */
.mm-site-footer { background: transparent !important; padding: 0 !important; }
.mm-site-footer .container { max-width: 1152px; }

/* ---- Newsletter card (homepage NewsletterCta) ---- */
.mm-news { padding: 64px 0 24px; }
.mm-news-card {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 28px; border: 1px solid rgba(255,255,255,0.08);
  background: #141414; padding: 56px 24px;
}
.mm-news-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.04;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 44px 44px;
}
@media (min-width:640px){ .mm-news-card { padding: 64px 56px; } }
.mm-news-glow { position: absolute; border-radius: 9999px; filter: blur(100px);
  background: radial-gradient(circle, rgba(242,103,69,0.22), transparent 70%); pointer-events: none; }
.mm-news-glow-a { left: -64px; top: -80px; width: 280px; height: 280px; }
.mm-news-glow-b { right: -40px; bottom: -96px; width: 320px; height: 320px; opacity: 0.85; }
.mm-news-inner { position: relative; z-index: 1; max-width: 576px; margin: 0 auto; }
.mm-news h2 { font-size: clamp(28px,5vw,44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #fff; margin: 0; }
.mm-grad { background: linear-gradient(90deg,#f26745 0%,#ffd230 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mm-news p { color: #a1a1aa; font-size: 15px; line-height: 1.6; max-width: 448px; margin: 16px auto 0; }
.mm-news-form { display: flex; flex-direction: column; gap: 12px; max-width: 448px; margin: 32px auto 0; }
@media (min-width:640px){ .mm-news-form { flex-direction: row; } }
.mm-news-form input {
  height: 48px; flex: 1; border-radius: 8px; padding: 0 20px; font-size: 14px;
  background: #0a0a0a; color: #fff; border: 1px solid rgba(255,255,255,0.16); outline: none;
}
.mm-news-form input::placeholder { color: #6b6b70; }
.mm-news-form input:focus { border-color: #f26745; }
.mm-news-form button {
  height: 48px; border: 0; border-radius: 8px; padding: 0 24px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: #0b0b0b; background: linear-gradient(98deg,#f26745 -30%,#ffd230 146%); transition: transform .2s;
}
.mm-news-form button:hover { transform: translateY(-2px); }
.mm-news-note { margin-top: 16px; font-size: 12px; color: #6b6b70; display:flex; align-items:center; justify-content:center; gap:6px; }
.mm-news-note .mm-check { color: #f26745; }

/* ---- Footer (homepage SiteFooter) ---- */
.mm-foot-hair { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(242,103,69,0.6), transparent); }
.mm-foot { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 56px 0 24px; text-align: left; }
@media (min-width:768px){ .mm-foot { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.mm-foot-logo { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: #fff; }
.mm-foot-logo img { height: 44px; width: auto; }
.mm-foot-brand p { margin-top: 16px; max-width: 20rem; font-size: 14px; line-height: 1.6; color: #a1a1aa; }
.mm-foot-socials { display: flex; gap: 12px; margin-top: 24px; }
.mm-foot-socials a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); color: #a1a1aa; transition: color .2s, border-color .2s; }
.mm-foot-socials a:hover { color: #f26745; border-color: #f26745; }
.mm-foot-socials svg { width: 16px; height: 16px; }
.mm-foot-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: #6b6b70; font-weight: 700; margin: 0; }
.mm-foot-col ul { list-style: none; margin: 16px 0 0; padding: 0; }
.mm-foot-col ul li { margin-bottom: 10px; }
.mm-foot-col ul li a { font-size: 14px; color: #a1a1aa; transition: color .2s; }
.mm-foot-col ul li a:hover { color: #fff; }
.mm-foot-bar { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 48px; padding: 24px 0 56px; border-top: 1px solid rgba(255,255,255,0.08); }
@media (min-width:640px){ .mm-foot-bar { flex-direction: row; justify-content: space-between; } }
.mm-foot-bar span { font-size: 12px; color: #6b6b70; }
.mm-foot-cta { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 8px 20px; font-size: 12px; font-weight: 600; color: #0b0b0b; background: linear-gradient(98deg,#f26745 -30%,#ffd230 146%); transition: transform .2s; }
.mm-foot-cta:hover { transform: translateY(-2px); }