/*
 * MakeMySnap Theme Override
 * Matches the admin panel dark zinc + amber/orange palette
 */

/* ──────────────────────────────────────────
   Root palette
────────────────────────────────────────── */
:root {
  --mms-bg:        #09090b;
  --mms-surface:   #18181b;
  --mms-border:    #3f3f46;
  --mms-text:      #f8fafc;
  --mms-muted:     #a1a1aa;
  --mms-amber:     #f59e0b;
  --mms-orange:    #f97316;
  --mms-amber-glow:rgba(245, 158, 11, 0.18);
}

/* ──────────────────────────────────────────
   Base
────────────────────────────────────────── */
html,
body {
  background: var(--mms-bg) !important;
  color: var(--mms-text) !important;
}

/* Preloader */
.preloader-bg,
#preloader {
  background: var(--mms-bg) !important;
}

/* Home / hero section */
.home-section {
  background: var(--mms-bg) !important;
}

/* ──────────────────────────────────────────
   Typography — headings
────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.main-title h1,
.post-title,
.subtitle,
.subtitle.subtitle-lead,
h2.section-subheading,
.facts-counter-number,
.testimonial cite {
  color: var(--mms-text) !important;
}

/* Accent: section headings get amber underline */
h2.section-subheading::after {
  background-color: var(--mms-amber) !important;
}

/* ──────────────────────────────────────────
   Body text, paragraphs, links
────────────────────────────────────────── */
p,
.facts-counter-description,
.facts-counter-description-img,
.skillbar-title,
.skill-bar-percent,
.percent-skills,
.percent-skills::after {
  color: var(--mms-muted) !important;
}

a,
body a {
  color: var(--mms-text) !important;
}

a:hover,
body a:hover {
  color: var(--mms-amber) !important;
}

/* ──────────────────────────────────────────
   Navigation menu
────────────────────────────────────────── */
nav.navigation-menu,
nav.navigation-menu.show {
  background: var(--mms-surface) !important;
  border: 1px solid var(--mms-border) !important;
}

nav.navigation-menu a:link,
nav.navigation-menu a:visited,
nav.navigation-menu a:active {
  color: var(--mms-text) !important;
}

nav.navigation-menu a:hover {
  color: var(--mms-amber) !important;
}

/* Hamburger dots */
.round-menu .dot-1,
.round-menu .dot-2,
.round-menu .dot-3 {
  background: var(--mms-text) !important;
}

.round-menu.direction {
  background: var(--mms-amber) !important;
}

.round-menu.direction .dot-1,
.round-menu.direction .dot-2,
.round-menu.direction .dot-3 {
  background: var(--mms-bg) !important;
}

/* ──────────────────────────────────────────
   Skill bars
────────────────────────────────────────── */
.skillbar-bar {
  background: linear-gradient(90deg, var(--mms-amber), var(--mms-orange)) !important;
}

/* ──────────────────────────────────────────
   Accent overline stripe
────────────────────────────────────────── */
.the-overline {
  background: linear-gradient(90deg, var(--mms-amber), var(--mms-orange)) !important;
}

/* ──────────────────────────────────────────
   Buttons (more / CTA)
────────────────────────────────────────── */
.more-button-bg,
.more-button-bg-center.more-button-bg-center-dark {
  background: linear-gradient(135deg, var(--mms-amber), var(--mms-orange)) !important;
  border: 2px dashed var(--mms-amber) !important;
}

.more-button-txt,
.more-button-txt-center {
  color: #111827 !important;
  font-weight: 700 !important;
}

/* ──────────────────────────────────────────
   Parallax / section overlays
────────────────────────────────────────── */
.parallax-overlay {
  background: rgba(9, 9, 11, 0.65) !important;
}

/* ──────────────────────────────────────────
   Testimonials
────────────────────────────────────────── */
.testimonial blockquote {
  color: var(--mms-muted) !important;
}

.testimonial blockquote::before {
  color: var(--mms-border) !important;
}

/* ──────────────────────────────────────────
   Link underline effect
────────────────────────────────────────── */
a.link-effect::after {
  background-color: var(--mms-amber) !important;
}

/* ──────────────────────────────────────────
   Contact form
────────────────────────────────────────── */
#form input,
textarea {
  border-bottom-color: var(--mms-border) !important;
  color: var(--mms-text) !important;
}

#form input:hover,
#form textarea:hover {
  border-color: var(--mms-amber) !important;
}

#form input:focus,
#form textarea:focus {
  border-color: var(--mms-amber) !important;
  box-shadow: 0 2px 0 var(--mms-amber-glow);
}

::-webkit-input-placeholder { color: var(--mms-muted) !important; }
::-moz-placeholder           { color: var(--mms-muted) !important; }
:-ms-input-placeholder       { color: var(--mms-muted) !important; }

/* ──────────────────────────────────────────
   Scroll-to-top arrow
────────────────────────────────────────── */
.to-top-arrow {
  background: linear-gradient(135deg, var(--mms-amber), var(--mms-orange)) !important;
  color: #111827 !important;
}

/* ──────────────────────────────────────────
   Scrollbar
────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mms-border) var(--mms-bg);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--mms-bg); }
::-webkit-scrollbar-thumb {
  background: var(--mms-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mms-amber);
}

/* ──────────────────────────────────────────
   Selection highlight
────────────────────────────────────────── */
::selection {
  background: var(--mms-amber) !important;
  color: #111827 !important;
}