/* =========================================================
   MEVA main.css
   - Global theme, spacing system, reusable layout classes
   - Gold links, consistent gaps, mobile-friendly sections
   ========================================================= */

/* ---------- Theme Tokens ---------- */
:root{
  --bg: #070b14;
  --panel: #0b1220;
  --panel2: #0a1020;

  --text-main: #e5e7eb;
  --text-muted: #aab2c5;

  --gold: #d4af37;
  --gold-soft: #f3d77a;

  --border: rgba(212,175,55,.22);
  --border-soft: rgba(255,255,255,.08);

  --shadow: 0 14px 40px rgba(0,0,0,.45);

  --radius: 18px;
  --maxw: 1040px;

  /* Spacing scale */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(212,175,55,.10), transparent 55%),
    linear-gradient(180deg, #060913 0%, #070b14 100%);
  color: var(--text-main);
  line-height: 1.6;
}

/* ---------- Links (Gold, No Blue) ---------- */
a{
  color: var(--gold);
  text-decoration: none;              /* no underline by default */
}
a:hover{
  color: var(--gold-soft);
  text-decoration: none;              /* ensure no underline on hover */
}
a:visited{ color: var(--gold); }

/* If any browser/theme forces blue links, override strongly */
a, a:link, a:visited, a:hover, a:active{
  -webkit-text-decoration-skip: ink;
  text-decoration: none;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4{
  margin: 0 0 var(--space-3) 0;
  letter-spacing: -0.2px;
}

p{ margin: 0 0 var(--space-3) 0; color: var(--text-muted); }
strong{ color: var(--text-main); }

ul, ol{
  margin: var(--space-2) 0 var(--space-3) 0;
  padding-left: 20px;
  color: var(--text-muted);
}
li{ margin: 6px 0; }

/* ---------- Layout Containers ---------- */
.meva-container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 18px;
}

.meva-main{
  max-width: var(--maxw);
  margin: 26px auto 56px;
  padding: 0 18px;
}

.meva-date {
  cursor: pointer;
}

.meva-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(1);
  opacity: 0.9;
}
/* Make date text MEVA-bright after selection */
.meva-date { 
    color: #f8fafc; 
    cursor: pointer; 
}

/* Keep the icon visible in dark theme */
.meva-date::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.9;
  cursor: pointer;
}

/* Ensure date fields remain clickable even if wrappers use pseudo-elements */
.meva-date-field::before,
.meva-date-field::after { 
    pointer-events: none; 
}

.meva-date { 
    cursor: pointer; 
}

.meva-date::-webkit-calendar-picker-indicator {
    cursor: pointer; 
    filter: invert(1); 
    opacity: 0.9; 
}


/* FIX: Date picker not opening (Chrome desktop) */
.meva-date-field {
    position: relative; 
    z-index: 0; 
    
}

.meva-date-field * { 
    position: relative; 
    z-index: 1; 
    
}
.meva-date-field::before, 
.meva-date-field::after { 
    pointer-events: none !important; 
}

input[type="date"], .meva-date { 
    pointer-events: auto !important; 
    cursor: pointer; 
}

input[type="date"]::-webkit-calendar-picker-indicator { 
    cursor: pointer; 
    opacity: 0.9; 
    filter: invert(1); 
}



/* Standard section spacing (use on any page) */
.meva-section{ 
    margin: 0 0 var(--space-6) 0; 
}

.meva-section-tight{ 
    margin: 0 0 var(--space-5) 0; 
    
}

/* A consistent divider line */
.meva-divider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: var(--space-5) 0;
}

/* ---------- Cards / Panels (Reusable) ---------- */
.meva-card{
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,18,32,.78), rgba(7,11,20,.58));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 22px;
}

.meva-card--tight{ padding: 18px; }
.meva-card--hero{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(212,175,55,.18), transparent 62%),
    linear-gradient(180deg, rgba(11,18,32,.92), rgba(7,11,20,.92));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}

/* ---------- Buttons ---------- 
.meva-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text-main);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;   /* no underline 
}
.meva-btn:hover{
  border-color: rgba(212,175,55,.35);
  background: rgba(212,175,55,.10);
  text-decoration: none !important;
}

.meva-btn--primary{
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(180deg, rgba(212,175,55,.25), rgba(212,175,55,.10));
  color: var(--gold-soft);
}
.meva-btn--primary:hover{
  background: linear-gradient(180deg, rgba(243,215,122,.30), rgba(212,175,55,.12));
} */

/* Kill underline on button-like links everywhere 
a.meva-btn, a.meva-btn:hover{ text-decoration: none !important; }  */

/* ---------- Forms ---------- */
.meva-label{
  display: block;
  margin: 10px 0 6px;
  color: var(--text-muted);
  font-size: 13px;
}
.meva-input, .meva-textarea, input, textarea, select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text-main);
  outline: none;
}
.meva-textarea, textarea{ min-height: 120px; }
.meva-input:focus, .meva-textarea:focus, input:focus, textarea:focus, select:focus{
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 4px rgba(212,175,55,.10);
}

/* ---------- Image Helpers (No Cropping) ---------- */
/* Use for hero / banner images where you want full image visible */
.meva-img-full{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Use when you have a fixed-height image but never want crop */
.meva-img-box{
  width: 100%;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.meva-img-box img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ---------- Blog / Article Reusable Styles ---------- */
.meva-article{
  max-width: 900px;
  margin: 0 auto;
}

.meva-tag{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(212,175,55,.12);
  color: var(--gold-soft);
  font-size: 12px;
  letter-spacing: .4px;
  margin-bottom: 14px;
}

.privacy-consent {
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.privacy-note {
  margin-bottom: 0.75rem;
  color: #cbd5e1;
}

.privacy-note a {
  color: var(--gold);
  text-decoration: underline;
}

.privacy-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}


/* Normalize spacing inside a content card */
.meva-prose h1{ 
    margin-bottom: 14px; 
    color: var(--gold-soft); 
}

.meva-prose h2{
    margin-top: 28px; 
    margin-bottom: 10px; 
    color: var(--gold); 
}

.meva-prose p{ 
    margin: 10px 0; 
}

.meva-prose ul{ 
    margin: 8px 0 10px 0; 
}

/* FAQ container baseline (if you reuse it elsewhere) */
.meva-faq{ 
    margin-top: 26px; 
}

.meva-faq-item{
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

/* ---------- Footer spacing helpers ---------- */
.meva-footer-center{
  text-align: center;
}
.meva-footer-pad{
  padding: 20px 18px;
}

form {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

input[type="radio"],
input[type="checkbox"] {
  scroll-margin-top: 120px;
}

.privacy-notice a {
  color: var(--gold);
  text-decoration: underline;
}


/* Section heading */
.section-title {
  color: var(--gold);
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
}

/* =========================================================
   MEVA: FAQ + CTA (Global Reusable Components)
   ========================================================= */

/* CTA Panel (reusable) */
.meva-cta{
  margin-top: var(--space-6);
  padding: 22px;
  border-radius: 16px;
  background: rgba(212,175,55,.12);
  border: 1px solid var(--border);
}

.meva-cta h3{
  margin: 0 0 var(--space-2) 0;
  color: var(--gold-soft);
}

.meva-cta p{
  margin: 0 0 var(--space-2) 0;
}

.meva-cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(212,175,55,.30), rgba(212,175,55,.12));
  color: var(--gold-soft);
  font-weight: 700;
  text-decoration: none !important;
}

.meva-cta a:hover{
  background: linear-gradient(180deg, rgba(243,215,122,.35), rgba(212,175,55,.15));
  text-decoration: none !important;
}

/* FAQ Accordion (reusable) */
.meva-faq{
  margin-top: 26px;
  padding-top: 10px;
}

.meva-faq-item{
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

.meva-faq-q{
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: var(--gold-soft);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.meva-faq-q:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(212,175,55,.12);
}

.meva-faq-q span{
  color: var(--text-muted);
  font-weight: 700;
}

.meva-faq-a{
  padding: 0 16px 16px;
  color: var(--text-muted);
  display: none;
}

.meva-faq-item.open .meva-faq-a{
  display: block;
}

.meva-faq-item.open .meva-faq-q span{
  color: var(--gold);
}


/* Consent checkbox layout */
.checkbox-label{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
  cursor: pointer;
}

/* Make checkbox visible + aligned */
.checkbox-label input[type="checkbox"]{
  width: 20px;
  height: 20px;
  margin-top: 4px;         /* aligns with first line of text */
  flex: 0 0 auto;
  accent-color: #d4af37;   /* gold */
  cursor: pointer;
}

/* Ensure the consent text behaves like a paragraph block */
.checkbox-label span{
  display: block;
  color: #e5e7eb;
  line-height: 1.55;
  font-size: 0.95rem;
}
/* === MEVA Bright Text System === */

/* Main body text (bright white, not dull gray) */
.meva-content,
.meva-content p,
.meva-content li {
  color: #f8fafc;   /* bright white */
  line-height: 1.65;
  font-size: 1rem;
}

/* Section headings */
.meva-content h2,
.meva-content h3 {
  color: #ffffff;   /* pure white */
  font-weight: 600;
}

/* Notes / secondary text */
.meva-content .note,
.meva-content em {
  color: #e5e7eb;   /* slightly softer white */
}

/* Strong emphasis */
.meva-content strong {
  color: #ffffff;
}

/* Links inside content */
.meva-content a {
  color: var(--gold);
  text-decoration: underline;
}
/* === Consent Section (MEVA) === */

.consent-section {
  margin-top: 2.5rem;
}

.consent-block {
  margin-top: 1.5rem;
}

/* Checkbox + text alignment */
.consent-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
  color: #f8fafc;              /* bright white */
  font-size: 0.95rem;
  line-height: 1.6;
}


/* Gold checkbox (MEVA style) */
.consent-item input[type="checkbox"] {
  accent-color: var(--gold);
  margin-top: 0.3rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* Privacy explanation text */
.privacy-notice {
  margin: 0.75rem 0 1.4rem 1.9rem;
  font-size: 0.9rem;
  color: #e5e7eb;
}

/*
.privacy-notice {
  margin: 0.75rem 0 1.25rem 2rem;
  font-size: 0.9rem;
  color: #cbd5e1;
}
*/


.privacy-notice a {
  color: var(--gold);
  text-decoration: underline;
}

/* === FIX: Date picker not opening (Chrome desktop) === */
.meva-date-field {
  position: relative;
  z-index: 0;
}

.meva-date-field * {
  position: relative;
  z-index: 1;
}

.meva-date-field::before,
.meva-date-field::after {
  pointer-events: none !important;
}

/* Make sure the actual input receives clicks */
.meva-date,
input[type="date"] {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Ensure calendar icon is visible/clickable in dark theme */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.9;
  filter: invert(1);
}

/* Ministry compliance blocks (MEVA) */
.meva-compliance-box{
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 16px;
  margin: 18px 0;
  background: rgba(255,255,255,.03);
}
.meva-compliance-box h2, .meva-compliance-box h3{
  margin: 0 0 10px 0;
}
.meva-compliance-muted{
  opacity: .9;
}
.meva-small-note{
  font-size: 0.95rem;
  opacity: .9;
}


/* Reduce form spacing on mobile */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 1.2rem;
  }

  label {
    margin-bottom: 0.4rem;
  }
}

@media (max-width: 768px) {
  input,
  select,
  textarea {
    margin-bottom: 1rem;
  }
}



/* Mobile tuning */
@media (max-width: 768px){
  .checkbox-label{
    gap: 0.65rem;
  }
  .checkbox-label input[type="checkbox"]{
    width: 22px;
    height: 22px;
    margin-top: 3px;
  }
  .checkbox-label span{
    font-size: 0.98rem;
  }
}


/* ---------- Responsive (Mobile spacing tighter) ---------- */
@media (max-width: 900px){
  .meva-main{ margin: 18px auto 42px; }
  .meva-card{ padding: 20px; }
}

@media (max-width: 600px){
  .meva-main{ margin: 14px auto 36px; }
  .meva-section{ margin-bottom: 26px; }
  .meva-card{ padding: 18px; }
  .meva-prose h2{ margin-top: 24px; }
}

/* Mobile tightening for these components */
@media (max-width: 600px){
  .meva-cta{
    padding: 18px;
  }
  .meva-faq-q{
    padding: 13px 14px;
  }
}