/* ===================================================================
   MANUS PLASTIC CO., LTD. — Shared Design System
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand palette */
  --navy:        #0B2A4A;
  --navy-2:      #123A63;
  --navy-dark:   #071B30;
  --sky:         #1E8FE1;
  --sky-dark:    #1573BB;
  --sky-soft:    #EAF4FC;
  --sky-soft-2:  #F4F9FD;
  --surface:     #F1F5F9;
  --border:      #E2E8F0;
  --text:        #13212F;
  --text-muted:  #51606F;
  --white:       #FFFFFF;

  --radius-card: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(11,42,74,0.04), 0 4px 16px rgba(11,42,74,0.07);
  --shadow-card-hover: 0 8px 28px rgba(11,42,74,0.14);
  --ease: cubic-bezier(.4,0,.2,1);
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  font-family:'Noto Sans Thai','Inter',sans-serif;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

.font-en{ font-family:'Inter','Noto Sans Thai',sans-serif; }

/* ---------- Layout helpers ---------- */
.container-x{ max-width:1400px; margin-inline:auto; padding-inline:1rem; }
@media (min-width:768px){ .container-x{ padding-inline:1.5rem; } }
@media (min-width:1024px){ .container-x{ padding-inline:2rem; } }

.section-pad{ padding-block:3.5rem; }
@media (min-width:768px){ .section-pad{ padding-block:5rem; } }

.bg-surface-blue{ background:var(--sky-soft); }
.bg-navy{ background:var(--navy); }

/* ---------- Eyebrow / kicker ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
  color:var(--sky-dark); background:var(--sky-soft);
  border:1px solid #d6e9fa; padding:.35rem .8rem; border-radius:999px;
}
.kicker-invert{ color:#bfe0fb; background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.18); }

/* ---------- Headings ---------- */
h1,h2,h3,h4{ color:var(--navy); font-weight:800 !important; line-height:1.25; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.95rem; line-height:1.2;
  padding:.85rem 1.6rem; border-radius:var(--radius-sm);
  transition:background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 150ms var(--ease);
  cursor:pointer; white-space:nowrap; min-height:44px;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--sky); color:#fff; }
.btn-primary:hover{ background:var(--sky-dark); box-shadow:0 6px 18px rgba(30,143,225,.35); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); box-shadow:0 6px 18px rgba(11,42,74,.35); }
.btn-outline{ background:transparent; color:var(--navy); border:1.5px solid var(--border); }
.btn-outline:hover{ background:var(--surface); border-color:#c9d5e2; }
.btn-outline-invert{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.btn-outline-invert:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-white{ background:#fff; color:var(--navy); }
.btn-white:hover{ background:#eef4fa; }
.btn-sm{ padding:.6rem 1.1rem; font-size:.85rem; min-height:38px; }
.btn-block{ width:100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid var(--sky); outline-offset:2px;
}

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  transition:box-shadow 250ms var(--ease), transform 250ms var(--ease), border-color 250ms var(--ease);
}
.card-hover:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-4px); border-color:#d7e6f5; }

/* ---------- Nav ---------- */
#site-header{ transition:background-color 250ms var(--ease), box-shadow 250ms var(--ease); }
#site-header.is-solid{ background:#fff; box-shadow:0 2px 16px rgba(11,42,74,.08); }
#header-logo{ filter:brightness(0) invert(1); transition:filter 250ms var(--ease); }
#site-header.is-solid #header-logo{ filter:none; }
.brand-text-th{ display:block; color:#fff; font-size:.95rem; font-weight:700; white-space:nowrap; transition:color 250ms var(--ease); }
.brand-text-en{ display:block; color:rgba(255,255,255,.75); font-size:.68rem; letter-spacing:.03em; white-space:nowrap; margin-top:1px; transition:color 250ms var(--ease); }
#site-header.is-solid .brand-text-th{ color:var(--navy); }
#site-header.is-solid .brand-text-en{ color:var(--text-muted); }
#site-header #menu-toggle{ color:#fff; transition:color 250ms var(--ease); }
#site-header.is-solid #menu-toggle{ color:var(--navy); }
.lang-switch{
  display:inline-flex; align-items:center; gap:.35rem; font-family:'Inter',sans-serif;
  font-weight:700; font-size:.8rem; letter-spacing:.02em; color:#fff;
  border:1.5px solid rgba(255,255,255,.5); border-radius:999px; padding:.4rem .8rem;
  transition:color 200ms var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.lang-switch:hover{ background:rgba(255,255,255,.12); }
#site-header.is-solid .lang-switch{ color:var(--navy); border-color:var(--border); }
#site-header.is-solid .lang-switch:hover{ background:var(--surface); }
#site-header .nav-link{
  position:relative; color:#fff; font-weight:500; font-size:.95rem;
  padding-block:.5rem; transition:color 200ms var(--ease);
}
#site-header.is-solid .nav-link{ color:var(--navy); }
#site-header .nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--sky);
  transition:right 220ms var(--ease);
}
#site-header .nav-link:hover::after, #site-header .nav-link.active::after{ right:0; }
#site-header .nav-link:hover{ color:#cfe7fb; }
#site-header.is-solid .nav-link:hover{ color:var(--sky); }
#site-header .nav-link.active{ font-weight:700; }

/* ---------- Mobile menu ---------- */
#mobile-menu{ transition:max-height 300ms var(--ease), opacity 250ms var(--ease); }

/* ---------- Reveal animations ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 650ms var(--ease), transform 650ms var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:80ms; }
.reveal-delay-2{ transition-delay:160ms; }
.reveal-delay-3{ transition-delay:240ms; }
.reveal-delay-4{ transition-delay:320ms; }
.reveal-delay-5{ transition-delay:400ms; }
.reveal-delay-6{ transition-delay:480ms; }

/* ---------- Hero ---------- */
.hero-media{ position:relative; }
.hero-overlay{
  background:linear-gradient(115deg, rgba(7,27,48,.94) 0%, rgba(11,42,74,.88) 38%, rgba(11,42,74,.55) 70%, rgba(11,42,74,.35) 100%);
}

/* ---------- Timeline ---------- */
.timeline-line{ background:linear-gradient(to bottom, var(--sky), var(--navy)); }
.timeline-dot{ box-shadow:0 0 0 5px var(--sky-soft); }

/* ---------- Stat counter ---------- */
.stat-num{ font-family:'Inter',sans-serif; font-weight:800; color:var(--navy); }

/* ---------- FAQ ---------- */
.faq-item[open] summary .faq-icon{ transform:rotate(180deg); }
.faq-item summary{ list-style:none; cursor:pointer; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{ transition:transform 220ms var(--ease); }
.faq-answer{ overflow:hidden; }

/* ---------- Gallery / Lightbox ---------- */
.gallery-item{ cursor:pointer; overflow:hidden; border-radius:var(--radius-card); position:relative; }
.gallery-item img{ transition:transform 400ms var(--ease); }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .gallery-caption{
  position:absolute; inset:auto 0 0 0; padding:.9rem 1rem .8rem;
  background:linear-gradient(to top, rgba(7,20,34,.88), rgba(7,20,34,0));
  color:#fff; font-size:.82rem; font-weight:500;
  opacity:0; transform:translateY(6px); transition:opacity 250ms var(--ease), transform 250ms var(--ease);
}
.gallery-item:hover .gallery-caption{ opacity:1; transform:translateY(0); }

#lightbox{ transition:opacity 220ms var(--ease); }
#lightbox img{ transition:transform 220ms var(--ease); }

.gallery-slider{ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gallery-slider::-webkit-scrollbar{ display:none; }
.gallery-slider > *{ scroll-snap-align:start; }

/* ---------- Floating action buttons ---------- */
.fab-stack{ position:fixed; right:1rem; bottom:1rem; z-index:40; display:flex; flex-direction:column; gap:.65rem; }
.fab{
  width:52px; height:52px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(11,42,74,.28); transition:transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 10px 26px rgba(11,42,74,.36); }

/* ---------- Cookie banner ---------- */
#cookie-banner{ transition:transform 350ms var(--ease); }

/* ---------- Misc ---------- */
.text-balance{ text-wrap:balance; }
.z-header{ z-index:50; }
.z-modal{ z-index:60; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:.6rem 1rem; z-index:100; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }