/* === American Royal Timeline CSS === */

:root {
  --ar-navy: #002D6A;
  --ar-light-blue: #92B8E2;
  --ar-off-white: #F7F6FB;
  --ar-accent: #BE3526;
  --dot-size: 12px;
  --active-dot-color: var(--ar-navy);
  --inactive-dot-color: #ccc;
  --progress-height: 4px;
}

.timeline-progress-wrapper {
  position: relative;
  margin: 2rem auto;
  width: 100%;
  max-width: 900px;
}

.timeline-progress-bar-bg {
  position: relative;
  height: var(--progress-height);
  background-color: var(--inactive-dot-color);
  border-radius: 2px;
  overflow: hidden;
}

.timeline-progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--progress-height);
  width: 0%;
  background-color: var(--ar-navy);
  transition: width 0.4s ease-in-out;
}

.timeline-progress-dots {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  padding: 0 8px;
  z-index: 2;
}

.timeline-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background-color: var(--inactive-dot-color);
  cursor: pointer;
  transition: background-color 0.3s;
}

.timeline-dot.active {
  background-color: var(--active-dot-color);
}

.timeline-card {
  background: linear-gradient(145deg, #002d6a, #184675);
  color: var(--ar-off-white);
  border-radius: 1rem;
  padding: 1.5rem;
  width: 300px;
  flex: 0 0 auto;
  margin-right: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  font-family: var(--font-p1, sans-serif);
}

.timeline-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 2rem;
  margin-bottom: 3rem;
}

.timeline-container::-webkit-scrollbar {
  display: none;
}

.timeline-month {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ar-light-blue);
  margin-bottom: 0.5rem;
  font-family: var(--font-p1, sans-serif);
}

.timeline-title {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.timeline-description {
  font-size: 0.95rem;
  line-height: 1.4;
  font-family: var(--font-p1, sans-serif);
}

/* Optional button styling if used */
.timeline-card button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: var(--ar-off-white);
  color: var(--ar-navy);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.timeline-card button:hover {
  background: var(--ar-light-blue);
  color: #fff;
}
/* === Compatibility patch for current timeline HTML/JS === */

/* Track + container */
.timeline-container,
.timeline-content { background: var(--ar-off-white) !important; }

.timeline-container {
  display: flex; align-items: center; position: relative;
  width: 100%; margin: 0 auto 32px auto; max-width: 1600px;
  justify-content: center; min-height: 440px;
}

.timeline-content {
  position: relative; display: flex; gap: 24px; overflow-x: auto;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  flex: 1 1 auto; align-items: stretch; min-width: 0; z-index: 1;
}
.timeline-content::-webkit-scrollbar { display: none; }

/* Cards (map to your new structure) */
.timeline-item {
  min-width: 420px; max-width: 440px;
  background: var(--ar-navy) !important; color: #fff;
  border-radius: 24px; box-shadow: 0 4px 24px rgba(0,0,0,.10) !important;
  padding: 32px 24px 24px; font-family: inherit; flex-shrink: 0;
  transition: box-shadow .15s; border: 2px solid transparent; position: relative;
}
.timeline-item.timeline-buffer {
  background: transparent !important; box-shadow: none !important; border: none !important;
  pointer-events: none; min-width: 340px; max-width: 340px;
}
.timeline-item:focus-within, .timeline-item:focus {
  border: 2px solid var(--ar-accent);
  box-shadow: 0 8px 28px rgba(190,53,38,.14);
}

/* Arrows */
.timeline-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20; background: none; border: none; outline: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s; opacity: .8; min-width: 60px; min-height: 40px;
  max-width: 120px; max-height: 120px; padding: 0;
}
.timeline-arrow-left { left: 0; }
.timeline-arrow-right { right: 0; }
.timeline-arrow:active, .timeline-arrow:focus { opacity: 1; }
.timeline-arrow[aria-disabled="true"] { opacity: .25; pointer-events: none; }
.timeline-arrow img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Edge fades */
.timeline-fade { position: absolute; top: 0; bottom: 0; width: 120px; z-index: 9; pointer-events: none; }
.timeline-fade-left {
  left: 0; background: linear-gradient(to right,var(--ar-off-white) 0%,var(--ar-off-white) 55%,rgba(247,246,251,.17) 85%,rgba(247,246,251,0) 100%);
}
.timeline-fade-right {
  right: 0; background: linear-gradient(to left,var(--ar-off-white) 0%,var(--ar-off-white) 55%,rgba(247,246,251,.17) 85%,rgba(247,246,251,0) 100%);
}

/* Progress bar (you already have these; kept for consistency) */
.timeline-progress-wrapper { margin: 0 auto; width: 100%; max-width: 900px; padding: 0 0 32px; position: relative; }
.timeline-progress-bar-bg { background: var(--ar-navy); border-radius: 5px; height: 7px; position: relative; width: 100%; }
.timeline-progress-bar-fill { background: var(--ar-light-blue); border-radius: 5px; height: 7px; width: 0; transition: width .3s; position: absolute; top: 0; left: 0; }

/* Dots: add the class your JS uses, but keep your old one for safety */
.timeline-dots,
.timeline-progress-dots { /* alias so both class names work */
  position: absolute; left: 0; top: 50%; width: 100%;
  display: flex; justify-content: space-between;
  transform: translateY(-50%); pointer-events: none;
  padding: 0 8px;
}

.timeline-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ar-off-white);
  border: 2.5px solid var(--ar-navy);
  margin: 0 .5vw; box-shadow: 0 2px 4px rgba(0,0,0,.06);
  cursor: pointer; pointer-events: all;
  transition: background .18s, border .18s, transform .18s;
}

/* Pick one active color — red (accent) to match your current timeline */
.timeline-dot.active {
  background: var(--ar-accent);
  border-color: var(--ar-accent);
  transform: scale(1.18);
}

/* Animations */
@keyframes arrow-bop-left {
  0%{transform:translateY(-50%) scale(1) translateX(0);}
  30%{transform:translateY(-50%) scale(1.13) translateX(-16px);}
  70%{transform:translateY(-50%) scale(1.06) translateX(-7px);}
  100%{transform:translateY(-50%) scale(1) translateX(0);}
}
@keyframes arrow-bop-right {
  0%{transform:translateY(-50%) scale(1) translateX(0);}
  30%{transform:translateY(-50%) scale(1.13) translateX(16px);}
  70%{transform:translateY(-50%) scale(1.06) translateX(7px);}
  100%{transform:translateY(-50%) scale(1) translateX(0);}
}
.timeline-arrow.bopping-left { animation: arrow-bop-left .38s cubic-bezier(.52,2,.45,.77) 1; }
.timeline-arrow.bopping-right { animation: arrow-bop-right .38s cubic-bezier(.52,2,.45,.77) 1; }

/* Visibility + footer */
@media (max-width:900px){ .timeline-desktop { display: none !important; } }
.timeline-desktop { display: block; }
.timeline-loaded-fade { opacity: 0; transition: opacity .5s cubic-bezier(.52,2,.45,.77); }
.timeline-loaded-fade.timeline-show { opacity: 1; }
.ar-footer-logo { margin: 24px auto 0; width: 220px; max-width: 28vw; opacity: .75; display: flex; justify-content: center; }
.ar-footer-logo img { width: 100%; height: auto; display: block; }

/* Responsive tweaks */
@media (max-width:900px){
  .timeline-container { max-width: 98vw; }
  .timeline-item, .timeline-item.timeline-buffer { min-width: 84vw; max-width: 88vw; font-size: .97em; padding: 22px 9px 16px 13px; }
  .timeline-fade { width: 16vw; }
}
@media (max-width:600px){
  .timeline-progress-bar-bg, .timeline-progress-wrapper { max-width: 96vw; }
  .timeline-dot { width: 13px; height: 13px; margin: 0 .2vw; }
  .timeline-fade { width: 12vw; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .timeline-arrow.bopping-left,
  .timeline-arrow.bopping-right { animation: none; }
  .timeline-content { scroll-behavior: auto; }
}