/* ─── Brand Tokens ─────────────────────────────── */
:root {
  --mgz-dark:      #142732;
  --mgz-dark-2:    #1a3345;
  --mgz-orange:    #e87825;
  --mgz-orange-2:  #f59440;
  --mgz-light:     #f4f6f8;
  --mgz-white:     #ffffff;
  --mgz-gray:      #6b7280;
  --mgz-border:    rgba(20,39,50,.08);
  --mgz-shadow:    0 4px 24px rgba(20,39,50,.10);
  --mgz-shadow-lg: 0 12px 48px rgba(20,39,50,.16);
  --navbar-h:      72px;
  --transition:    .3s cubic-bezier(.4,0,.2,1);
}

/* ─── Reset & Base ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans Thai', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: #1e293b;
  background: var(--mgz-white);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { transition: color var(--transition); }

/* ─── Typography ────────────────────────────────── */
.text-kanit  { font-family: 'Kanit', 'Segoe UI', Arial, sans-serif; }
.text-orange { color: var(--mgz-orange) !important; }

.section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mgz-orange);
  display: inline-block;
  margin-bottom: .5rem;
}

.section-title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--mgz-dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.section-title span { color: var(--mgz-orange); }

.section-subtitle {
  font-size: 1rem;
  color: var(--mgz-gray);
  max-width: 560px;
}

/* ─── Navbar ─────────────────────────────────────── */
#mgz-nav {
  height: var(--navbar-h);
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
  z-index: 1050;
}
#mgz-nav.scrolled {
  background: rgba(20,39,50,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
/* ── Logo — no pill, drop-shadow ensures readability on any banner ── */
#mgz-nav .navbar-brand img {
  height: 34px;
  /* original orange logo colours retained */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55))
          drop-shadow(0 0 8px rgba(0,0,0,.30));
  transition: filter var(--transition);
}

/* Scrolled: dark navbar — flip logo to white, no shadow needed */
#mgz-nav.scrolled .navbar-brand img {
  filter: brightness(0) invert(1);
}

#mgz-nav .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .5rem .8rem !important;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
#mgz-nav .nav-link:hover { color: var(--mgz-orange) !important; background: rgba(255,255,255,.06); }

#mgz-nav .dropdown-menu {
  border: none;
  border-radius: 12px;
  box-shadow: var(--mgz-shadow-lg);
  padding: .5rem;
  min-width: 230px;
  background: var(--mgz-dark);
  margin-top: .4rem;
  animation: dropFade .18s ease;
}
@keyframes dropFade {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
#mgz-nav .dropdown-item {
  color: rgba(255,255,255,.75);
  font-size: .82rem;
  border-radius: 7px;
  padding: .5rem .9rem;
  transition: all var(--transition);
}
#mgz-nav .dropdown-item:hover { background: rgba(232,120,37,.15); color: var(--mgz-orange); }

#mgz-nav .navbar-toggler {
  border: 1.5px solid rgba(255,255,255,.3);
  padding: .3rem .55rem;
  border-radius: 8px;
}
#mgz-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.85)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-btn-cta {
  background: var(--mgz-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: .42rem 1rem !important;
  box-shadow: 0 4px 12px rgba(232,120,37,.35);
}
.nav-btn-cta:hover { background: var(--mgz-orange-2) !important; box-shadow: 0 6px 16px rgba(232,120,37,.45); }

/* ─── Buttons ────────────────────────────────────── */
.btn-mgz {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--mgz-orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .7rem 1.7rem;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: all var(--transition);
  box-shadow: 0 4px 14px rgba(232,120,37,.35);
}
.btn-mgz:hover { background: var(--mgz-orange-2); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(232,120,37,.4); }

.btn-mgz-outline {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 10px;
  padding: .7rem 1.7rem;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: all var(--transition);
}
.btn-mgz-outline:hover { border-color: var(--mgz-orange); color: var(--mgz-orange); background: rgba(232,120,37,.08); }

/* ─── Section spacing ─────────────────────────────── */
.section-pad    { padding: 88px 0; }
.section-pad-sm { padding: 56px 0; }

/* ─── Footer ─────────────────────────────────────── */
footer.mgz-footer {
  background: var(--mgz-dark);
  color: rgba(255,255,255,.65);
  padding: 72px 0 0;
}
footer.mgz-footer .footer-logo img { height: 30px; filter: brightness(0) invert(1); }
footer.mgz-footer .footer-tagline {
  font-size: .875rem;
  color: rgba(255,255,255,.45);
  margin-top: .9rem;
  line-height: 1.65;
  max-width: 260px;
}
footer.mgz-footer .footer-heading {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mgz-orange);
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(232,120,37,.25);
  display: block;
}
footer.mgz-footer ul { padding:0; list-style:none; margin:0; }
footer.mgz-footer ul li { margin-bottom: .45rem; }
footer.mgz-footer ul li a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: .875rem;
  transition: color var(--transition);
}
footer.mgz-footer ul li a:hover { color: var(--mgz-orange); padding-left: 3px; }

footer.mgz-footer .contact-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  margin-bottom: .7rem;
}
footer.mgz-footer .contact-row i, footer.mgz-footer .contact-row .bi {
  color: var(--mgz-orange);
  font-size: .95rem;
  margin-top: .15rem;
  flex-shrink: 0;
}
footer.mgz-footer .contact-row a { color: rgba(255,255,255,.55); text-decoration: none; }
footer.mgz-footer .contact-row a:hover { color: var(--mgz-orange); }

footer.mgz-footer .social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.65);
  font-size: 1rem;
  margin-right: .4rem;
  text-decoration: none;
  transition: all var(--transition);
}
footer.mgz-footer .social-links a:hover { background: var(--mgz-orange); color: #fff; transform: translateY(-2px); }

footer.mgz-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 1.2rem 0;
  margin-top: 56px;
  font-size: .8rem;
  color: rgba(255,255,255,.3);
}
footer.mgz-footer .footer-bottom a { color: rgba(255,255,255,.38); text-decoration: none; transition: color var(--transition); }
footer.mgz-footer .footer-bottom a:hover { color: var(--mgz-orange); }

/* ─── Accessibility (WCAG 2.2) ───────────────────── */
/* Skip link – shown on keyboard focus only */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  background: var(--mgz-orange);
  color: #fff;
  padding: 8px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

/* WCAG 2.4.7 Focus Visible + 2.4.11 Focus Not Obscured */
:focus-visible {
  outline: 3px solid var(--mgz-orange);
  outline-offset: 3px;
  border-radius: 4px;
  scroll-margin-top: calc(var(--navbar-h) + 12px);
}
:focus:not(:focus-visible) { outline: none; }

/* ISO cert badges in footer – desaturate to fit dark theme */
.footer-iso img { filter: grayscale(1) brightness(2) opacity(0.55); height: 40px; }

/* ─── Scroll reveal ───────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }

/* ─── Misc utilities ─────────────────────────────── */
.font-14 { font-size: .875rem; }
.bg-dark-brand { background: var(--mgz-dark); }
.divider { height: 1px; background: var(--mgz-border); }