/* ================================================
   OCPL Logistics - Global Styles
   ================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=B612:wght@400;700&family=Lato:wght@300;400;500;700&family=Sarabun:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap');

/* ── Base Typography & Viewport Setup ── */
html {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-neutral-2);
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Bootstrap Container Override ──
   Match original design's max-width of 1392px */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 1392px;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

/* ── Section Spacing ── */
.section {
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
}

.section--sm {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* ── Section Heading Block ── */
.section-label {
  font-family: var(--font-body);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1;
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-neutral-2);
  line-height: var(--lh-heading);
}

.section-title--white {
  color: var(--color-neutral-8);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}


/* ── Utility: Centered Heading Group ── */
.heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.heading-group--center {
  align-items: center;
  text-align: center;
}

/* ── Scroll animation — only hidden when JS is active ── */
/* Elements are visible by default; JS adds .js-anim to body to enable animations */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.js-anim .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.js-anim .reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.js-anim .reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.js-anim .reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.js-anim .reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.js-anim .reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js-anim .reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Delay helpers ── */
.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

.delay-4 {
  transition-delay: 0.4s;
}

.delay-5 {
  transition-delay: 0.5s;
}

.delay-6 {
  transition-delay: 0.6s;
}

/* ── Design-specific helper: section description text ── */
.section-desc {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  color: var(--color-neutral-3);
  line-height: var(--lh-body);
  margin: 0;
}



/* ── Design-specific helper: button self-start ── */
.btn--self-start {
  align-self: flex-start;
}

/* ── Design-specific helper: btn full width ── */
.btn--full {
  width: 100%;
  justify-content: center;
}

/* ── Design-specific helper: section title sizing override ── */
.section-title--sm {
  font-size: 28px;
}

/* ── Scroll to Top Button ── */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: var(--color-primary);
  color: var(--color-neutral-8);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: var(--color-neutral-1);
}