/* -------------------------------------- */
/* HERO SECTION                           */
/* -------------------------------------- */
body, html {
  margin-top: 0 !important;
  padding-top: 0 !important;
  scrollbar-width: auto;      /* Firefox base: auto | thin */
  -ms-overflow-style: auto;   /* Old IE/Edge */
}

html {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Firefox colors (thumb | track) and thin width */
html {
  scrollbar-width: auto;
  scrollbar-color: #F16629 #FFEAE0;
}

/* Chrome/Edge/Safari */
html::-webkit-scrollbar {
  width: 10px;                /* adjust 8–12px */
}
html::-webkit-scrollbar-track {
  background: #FFEAE0;        /* track color */
}
html::-webkit-scrollbar-thumb {
  background: #F16629;        /* thumb color */
  border-radius: 8px;         /* subtle rounding */
}
/* Optional hover shade (1 extra rule) */
html::-webkit-scrollbar-thumb:hover {
  background: #D4571F;
}
/* -------------------------------------- */
/* PAGE / HERO / GRID                     */
/* -------------------------------------- */
.page-legaldocs main { background: #f8f9fa; }

.docs-hero {
  /* increased top space so heading breathes */
  padding: 4.5rem 0 1.75rem;    /* extra top padding requested */
  background: linear-gradient(180deg,#fff 0%,#f7f7f7 100%);
  border-bottom: 1px solid #ececec;
  text-align: center;
  overflow: hidden;
}
.docs-title {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 .5rem;
}
.docs-subtitle { color: #555; margin: 0 0 .25rem; }

/* breathing room after cards */
.docs-container {
  padding: 1.5rem 0 8rem;
  margin-bottom: 2.5rem;
}

/* Grid */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 1rem;
  align-items: start;
}

/* desktop: 2 columns (6/12 each) */
.doc-card {
  grid-column: span 6;
  background: #fff;
  border: 1px solid #eee;
  border-radius: .75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: box-shadow .2s ease, transform .18s ease;
  opacity: 0;                /* hidden until animation plays */
  transform: translateY(18px);
  will-change: transform, opacity;
}
.doc-card:hover { box-shadow: 0 .5rem 1.25rem rgba(8,16,24,0.08); transform: translateY(-2px); }

.doc-media { align-self: start; background: #F16629; color: #fff; font-weight:700; font-size:.8rem; padding:.25rem .5rem; border-radius:.35rem; }
.doc-name { font-size: 1.1rem; margin: .25rem 0 .25rem; }
.doc-meta { color: #666; font-size: .95rem; margin: 0 0 .5rem; }

/* Buttons */
.doc-actions { margin-top:auto; display:flex; gap:.5rem; }
.btn-doc {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:.5rem; font-weight:600;
  position:relative; overflow:visible; transition:background .18s ease, transform .08s ease;
}
.btn-doc.download {
  background:#fff; color:#F16629; border:1px solid #F16629;
  padding-right:1.6rem; /* space for spinner */
}
.btn-doc.download:hover { background:#fff4ee; }

/* spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.btn-doc.download::after{
  content: "";
  display: block;
  width: 1rem; height: 1rem;
  border: 2px solid rgba(241,102,41,0.35);
  border-top-color:#F16629;
  border-radius: 50%;
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%) scale(0);
  opacity: 0;
  transition: transform .12s ease, opacity .12s ease;
}

/* -------------------------------------- */
/* Entrance animations (CSS-only)         */
/* -------------------------------------- */
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Start hidden, then reveal */
.reveal-down,
.reveal-up {
  opacity: 0;
  will-change: transform, opacity;
  animation-duration: .56s;
  animation-timing-function: cubic-bezier(.2,.9,.2,1);
  animation-fill-mode: forwards;  /* keep final state */
}
.reveal-down { transform: translateY(-18px); animation-name: fade-down; }
.reveal-up   { transform: translateY(22px);  animation-name: fade-up; }

/* Optional built-in delays if none provided inline */
.docs-title.reveal-down { animation-delay: 0.5s; }
.docs-subtitle.reveal-down { animation-delay: 0.54s; }
.doc-grid .doc-card.reveal-up:nth-child(1) { animation-delay: 0.8s; }
.doc-grid .doc-card.reveal-up:nth-child(2) { animation-delay: 0.85s; }
.doc-grid .doc-card.reveal-up:nth-child(3) { animation-delay: 0.9s; }
.doc-grid .doc-card.reveal-up:nth-child(4) { animation-delay: 0.95s; }
.doc-grid .doc-card.reveal-up:nth-child(5) { animation-delay: 1s; }
.doc-grid .doc-card.reveal-up:nth-child(6) { animation-delay: 1.05s; }

/* -------------------------------------- */
/* RESPONSIVE / MOBILE (one media query)  */
/* -------------------------------------- */
/* target: mobile portrait narrow screens only */
@media (max-width: 430px) and (orientation: portrait) {
  html { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar { display: none; }
  .doc-card { grid-column: span 12; }
  .docs-hero { padding: 3.5rem 0 1rem; }
  .docs-title { font-size: clamp(1.6rem, 5.5vw, 2rem); }
  .docs-subtitle { font-size: .98rem; }
  .docs-container { padding: 1rem 0 2rem; margin-bottom: 2rem; }
  .doc-grid { gap: .75rem; }
  .doc-card { padding:.9rem; transform: none; } /* ensure visible even if animation skipped on tiny devices */
  .btn-doc { padding:.6rem 1rem; font-size:1rem; }
}