/*
Theme Name: Flatsome Child
Theme URI: https://flatsome.uxthemes.com/
Description: Flatsome child-thema voor Mars Auto (marsauto.nl). Warm-premium graphite huisstijl. Beheerd door Brand Bazen / TVZ.
Author: Brand Bazen
Template: flatsome
Version: 1.1.0
*/

/* ==========================================================================
   Mars Auto — warm-premium graphite huisstijl
   Palette-tokens (1 bron van waarheid)
   ========================================================================== */
:root {
  --ma-bg: #F5F2EC;          /* pagina-achtergrond, warm zand */
  --ma-secondary: #EAE4DB;   /* secundaire secties */
  --ma-surface: #FFFFFF;     /* kaarten/oppervlakken */
  --ma-text: #1D2228;        /* primaire tekst, graphite */
  --ma-text-soft: #5F666E;   /* secundaire tekst */
  --ma-accent: #8C6A3D;      /* accent, warm brons */
  --ma-accent-hover: #A57B45;/* accent hover, lichter brons */
  --ma-dark: #232A31;        /* donkere secties */
  --ma-dark-2: #2D343C;      /* donkere kaarten */
  --ma-border: #D7D0C6;      /* randen/scheidingen */
  --ma-radius: 4px;
  --ma-shadow: 0 1px 2px rgba(29,34,40,.04), 0 8px 28px -12px rgba(29,34,40,.18);
  --ma-shadow-lg: 0 2px 6px rgba(29,34,40,.06), 0 24px 60px -24px rgba(29,34,40,.30);
  --ma-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --ma-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Basis -------------------------------------------------------------- */
body {
  background-color: var(--ma-bg);
  color: var(--ma-text);
  font-family: var(--ma-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .005em;
}

p { color: var(--ma-text); }
.is-small, small, .small { color: var(--ma-text-soft); }

h1, h2, h3, h4, h5, h6,
.heading-font {
  font-family: var(--ma-serif);
  color: var(--ma-text);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.18;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

a { color: var(--ma-accent); transition: color .2s ease; }
a:hover { color: var(--ma-accent-hover); }

/* eyebrow / kicker */
.ma-eyebrow {
  font-family: var(--ma-sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ma-accent);
  display: inline-block;
  margin-bottom: .8rem;
}

/* ---- Knoppen ------------------------------------------------------------ */
.button,
button,
input[type="submit"],
.ff-btn.ff-btn-submit {
  font-family: var(--ma-sans);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: var(--ma-radius);
  transition: all .22s ease;
  box-shadow: none;
}
.button.primary,
.button.is-form,
button.primary,
input[type="submit"],
.ff-btn.ff-btn-submit {
  background-color: var(--ma-accent);
  border-color: var(--ma-accent);
  color: #fff;
}
.button.primary:hover,
button.primary:hover,
input[type="submit"]:hover,
.ff-btn.ff-btn-submit:hover {
  background-color: var(--ma-accent-hover);
  border-color: var(--ma-accent-hover);
  color: #fff;
  transform: translateY(-1px);
}
.button.secondary {
  background-color: var(--ma-dark);
  border-color: var(--ma-dark);
  color: #fff;
}
.button.secondary:hover { background-color: var(--ma-dark-2); border-color: var(--ma-dark-2); color:#fff; }

/* outline-knop in graphite */
.button.is-outline {
  color: var(--ma-text);
  border-color: var(--ma-border);
  background: transparent;
}
.button.is-outline:hover {
  color: var(--ma-accent);
  border-color: var(--ma-accent);
  background: transparent;
}
/* lichte outline op donkere secties */
.dark .button.is-outline,
.ma-section-dark .button.is-outline {
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.dark .button.is-outline:hover,
.ma-section-dark .button.is-outline:hover {
  color: var(--ma-bg);
  border-color: #fff;
  background: rgba(255,255,255,.08);
}

/* ---- Header ------------------------------------------------------------- */
/* Flatsome-topbalk (demo-rommel: social/newsletter/"add anything") verbergen tot
   er bevestigde contactgegevens zijn. */
#top-bar { display: none !important; }
/* lege placeholder-elementen rechts in de hoofdheader verbergen */
.header-main .nav-dropdown-default,
.header-main li.html.custom.html-1:empty { display: none; }

#masthead,
.header-main { background-color: var(--ma-surface); }
.header-bottom { background-color: var(--ma-surface); border-top: 1px solid var(--ma-border); }
.header:not(.transparent) #logo a,
#logo a {
  color: var(--ma-text);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: .005em;
  line-height: 1;
  display: flex;
  align-items: center;
}
#logo a:hover { color: var(--ma-accent); }
.nav > li > a { color: var(--ma-text); font-weight: 500; }
.nav > li > a:hover { color: var(--ma-accent); }
.nav-line-bottom > li > a:before,
.nav-line > li > a:before { background-color: var(--ma-accent); }
.header-top { background-color: var(--ma-dark); }
.header-top .nav > li > a,
.header-top a { color: rgba(255,255,255,.85); }
.header-top .nav > li > a:hover { color: #fff; }

/* woordmerk fallback (geen logo-afbeelding) */
#logo a { font-family: var(--ma-serif); font-weight: 600; letter-spacing: .04em; font-size: 1.45rem; }

/* ---- Secties / kleurklassen -------------------------------------------- */
.ma-section-bg { background-color: var(--ma-bg) !important; }
.ma-section-secondary { background-color: var(--ma-secondary) !important; }
.ma-section-dark { background-color: var(--ma-dark) !important; color: #fff; }
.ma-section-dark h1, .ma-section-dark h2, .ma-section-dark h3,
.ma-section-dark h4, .ma-section-dark p, .ma-section-dark li { color: #fff; }
.ma-section-dark .ma-eyebrow { color: var(--ma-accent-hover); }
.ma-section-dark p { color: rgba(255,255,255,.82); }

/* ---- Kaarten ------------------------------------------------------------ */
.box,
.ma-card {
  background-color: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
}
.ma-card {
  padding: 2rem;
  box-shadow: var(--ma-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.ma-card:hover { transform: translateY(-4px); box-shadow: var(--ma-shadow-lg); }
.ma-card h3 { margin-top: .2rem; }
.ma-card .ma-card-icon {
  width: 46px; height: 46px; margin-bottom: 1.1rem;
  color: var(--ma-accent);
}

/* ---- Badges ------------------------------------------------------------- */
.ma-badge {
  display: inline-block;
  font-family: var(--ma-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .32em .7em;
  border-radius: 2px;
  background: var(--ma-secondary);
  color: var(--ma-text);
  border: 1px solid var(--ma-border);
  margin: 0 .35rem .35rem 0;
}
.ma-badge.is-accent { background: var(--ma-accent); color:#fff; border-color: var(--ma-accent); }

/* ---- Formulieren -------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="url"], input[type="search"], textarea, select,
.ff-el-input--content input, .ff-el-input--content textarea, .ff-el-input--content select {
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
  color: var(--ma-text);
  box-shadow: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ma-accent) !important;
  box-shadow: 0 0 0 3px rgba(140,106,61,.14) !important;
}
label, .ff-el-input--label label { color: var(--ma-text); font-weight: 600; }

/* ---- Footer ------------------------------------------------------------- */
.footer-1 { background-color: var(--ma-dark); }
.footer-2 { background-color: var(--ma-dark-2); }
.footer-1, .footer-2,
.footer-1 a, .footer-2 a,
.footer-1 p, .footer-2 p,
.footer-1 li, .footer-2 li { color: rgba(255,255,255,.78); }
.footer-1 a:hover, .footer-2 a:hover { color: #fff; }
.footer-1 h1, .footer-1 h2, .footer-1 h3, .footer-1 h4, .footer-1 h5 { color: #fff; }
.absolute-footer, html .absolute-footer.dark { background-color: var(--ma-dark-2); }

/* ---- Diversen ----------------------------------------------------------- */
hr, .divider { border-color: var(--ma-border); }
.is-divider { background-color: var(--ma-accent); height: 3px; width: 56px; border-radius: 2px; }
::selection { background: var(--ma-accent); color: #fff; }

/* ruimere sectie-ritmiek */
.ma-section { padding-top: clamp(3.5rem, 8vw, 7rem); padding-bottom: clamp(3.5rem, 8vw, 7rem); }

/* hero-overlay leesbaarheid */
.ma-hero-overlay:before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,34,40,.30) 0%, rgba(29,34,40,.62) 100%);
}

/* link-underline accent in lopende tekst */
.ma-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* knop-pill subtiel */
.button { padding-left: 1.6em; padding-right: 1.6em; }

/* ---- Footer-socials ----------------------------------------------------- */
.ma-footer-socials { text-align: center; padding: 14px 0 2px; }
.ma-footer-social {
  display: inline-block; margin: 0 12px; font-weight: 600; letter-spacing: .02em;
  color: rgba(255,255,255,.82) !important;
}
.ma-footer-social:hover { color: #fff !important; }

/* ---- FAQ-accordion ------------------------------------------------------ */
.ma-faq .accordion-item { border-bottom: 1px solid var(--ma-border); }
.ma-faq .accordion-title {
  font-weight: 600; color: var(--ma-text); padding: 18px 8px; font-size: 1.05rem;
}
.ma-faq .accordion-title.active, .ma-faq .accordion-title:hover { color: var(--ma-accent); }
.ma-faq .accordion-inner { color: var(--ma-text); padding: 4px 8px 20px; }
/* Compacte mini-FAQ op losse pagina's (top-vragen, verwijst naar volledige FAQ) */
.ma-faq-mini { max-width: 760px; margin: 0 auto; }
.ma-faq-mini .accordion-title { padding: 14px 8px; font-size: 1rem; }
.ma-faq-mini .accordion-inner { padding: 4px 8px 16px; }

/* ---- Reviews-placeholder ------------------------------------------------ */
.ma-reviews-placeholder { border: 1px dashed var(--ma-border); }

/* -------------------------------------------------------------------------
 * Juridische pagina's (algemene voorwaarden / privacy / cookies / disclaimer)
 * ---------------------------------------------------------------------- */
.ma-legal {
  max-width: 820px;
  margin: 0 auto;
  color: #1D2228;
  font-size: 16px;
  line-height: 1.7;
}
.ma-legal h1 {
  font-family: "Fraunces", Georgia, serif;
  color: #232A31;
  margin: 0 0 24px;
}
.ma-legal h2 {
  font-family: "Fraunces", Georgia, serif;
  color: #232A31;
  font-size: 21px;
  margin: 32px 0 8px;
}
.ma-legal p { margin: 0 0 14px; color: #5F666E; }
.ma-legal ul { margin: 0 0 14px 20px; color: #5F666E; }
.ma-legal li { margin: 0 0 6px; }
.ma-legal a { color: #8C6A3D; }
.ma-legal-note {
  background: #EAE4DB;
  border-left: 3px solid #8C6A3D;
  padding: 12px 16px;
  border-radius: 4px;
  color: #5F666E !important;
  font-size: 14px;
}
.ma-legal-meta { font-size: 13px; color: #8a8f96 !important; margin-bottom: 22px !important; }

/* Footer juridische links */
.ma-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
}
.ma-footer-legal-link {
  color: #EAE4DB;
  opacity: 0.75;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.ma-footer-legal-link:hover { opacity: 1; color: #fff; }