/*
Primary CTA	bg-gold text-navy hover:bg-opacity-90	Rounded corners (4px), padding .75rem 1.5rem
Secondary	border-gold text-gold hover:bg-gold hover:text-navy	Border 2px, transparent bg
Text link	text-gold underline-offset-2 hover:underline	No bg, uppercase
*/


/*
Primary Navy	#00264F (RGB 0 36 79)	Main backgrounds (header, footer), site wrapper, primary buttons
Accent Gold	#FFE34C (RGB 255 227 76)	Logo text, call-to-action buttons, highlights, hover states
Secondary Blue	#1B3B6F (RGB 27 59 111)	Card headers, section dividers, links
Neutral Light	#F5F7FA (RGB 245 247 250)	Page backgrounds, form fields, modals
Text Dark	#0F172A (RGB 15 23 42)	Body text, headings on light backgrounds
Text Light	#FFFFFF	Text on dark/navy backgrounds
*/

:root {
  --primary-navy: #00264F; /* Main backgrounds (header, footer), site wrapper, primary buttons */
  --accent-gold: #FFE34C; /* Logo text, call-to-action buttons, highlights, hover states */
  --secondary-blue: #1B3B6F; /* Card headers, section dividers, links */
  --neutral-light: #dae6f7; /* Page backgrounds, form fields, modals */
  --text-dark: #0F172A; /* Body text, headings on light backgrounds */
  --text-light: #FFFFFF; /* Text on dark/navy backgrounds */
  --cherry-blossom-red: #C80E47; /* sti pink color */
  --cherry-blossom-red-darker: #BF093A; /* sti pink color darker */
  --spacing-base: 1rem;
}

/* Then your base styles: */
body {
  font-family: 'Inter', sans-serif;
  color: #0F172A; /* Text Dark */
  letter-spacing: 0.025em; /* slight tracking */
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600; /* SemiBold for headings */
  letter-spacing: 0.05em;
}
p, a, li {
  color: white;
  font-weight: 400;
}

a {
  cursor:pointer;
}

/* -------------- END: Font -------------- */

/*───────────────────────────────────────────────────────────────────────────
  Site Footer CSS
───────────────────────────────────────────────────────────────────────────*/
.site-footer {
  background-color:    var(--primary-navy);
  color:               var(--text-light);
  padding:             calc(var(--spacing-base) * 2) var(--spacing-base);
  font-size:           0.9rem;
  text-align:          center;
}

.site-footer a {
  color:               var(--text-light);
  text-decoration:     none;
  font-weight:         500;
  transition:          color 0.2s ease-in-out;
}

.site-footer a:hover,
.site-footer a:focus {
  color:               var(--accent-gold);
  text-decoration:     underline;
}

.site-footer .footer-links {
  margin-bottom:      var(--spacing-base);
}

.site-footer .footer-links a {
  margin:             0 var(--spacing-base);
}

.site-footer .legal {
  font-size:          0.75rem;
  color:              rgba(255, 255, 255, 0.6);
  margin-top:         var(--spacing-base);
}

/* Example HTML usage:
   <footer class="site-footer">
     <div class="footer-links">
       <a href="/privacy">Privacy Policy</a>
       <a href="/terms">Terms of Service</a>
     </div>
     <div class="legal">
       &copy; 2025 Moto-Calendars. All rights reserved.
     </div>
   </footer>
*/

/*─────────────────────────────────────────────────────────────────────────
  “Contact” button variant
─────────────────────────────────────────────────────────────────────────*/
.nav-link-account {
  background-color:    var(--accent-gold);
  color:               var(--primary-navy);
  border-radius: 0.25rem;           /* ≈ rounded */
  border-width: 2px;
  border-color: var(--primary-navy);
}

.nav-link-account:hover,
.nav-link-account:focus {
  background-color: var(--primary-navy);
  color:               var(--text-light);
  border-width: 2px;
  border-color: var(--accent-gold);
}


.home-account-link {
padding: 0.5rem 1.75rem;
  border-radius:       0.25rem;           /* ≈ rounded */
  background-color:    var(--accent-gold);
  color:               var(--primary-navy);
  border-width:         2px;
  border-color:         var(--accent-gold);
}
.home-account-link:hover,
.home-account-link:focus {
  background-color:    var(--primary-navy);
  color:               var(--text-light);
  border-width: 2px;
  border-color:    var(--accent-gold);
  cursor:pointer;
}

.social-account-link {
padding: 0.5rem 1.5rem;
  border-radius:       0.25rem;           /* ≈ rounded */
  background-color:    var(--primary-navy);
  color:               var(--text-light);
  border-width:         2px;
  border-color:         var(--accent-gold);
}
.social-account-link:hover,
.social-account-link:focus {
  background-color:    var(--cherry-blossom-red-darker);
  color:               var(--text-light);
  border-width: 2px;
  border-color:    var(--accent-gold);
  cursor:pointer;
}

.export-account-link {
  font-size:           0.75rem;
    padding: 0.125rem 0.5rem;
  border-radius:       0.25rem;           /* ≈ rounded */
  background-color:    var(--cherry-blossom-red-darker);
  color:               var(--text-light);
  border-width:         2px;
  border-color:         var(--cherry-blossom-red-darker);

}
.export-account-link:hover,
.export-account-link:focus {
  background-color:    var(--primary-navy);
  color:               var(--cherry-blossom-red-darker);
  border-width: 2px;
  border-color:    var(--cherry-blossom-red-darker);
  cursor:pointer;
}


/* New color variables */
:root {
  --neutral-light:  #F5F7FA;
  --secondary-blue: #1B3B6F;
  --text-dark:      #0F172A;
}

/* Background utility */
.bg-neutral-light {
  background-color: var(--neutral-light);
}
.bg-secondary-blue {
  background-color: var(--secondary-blue);
}

/* Text color util */
.text-text-dark {
  color: var(--text-dark);
}

/* Card component */
.card {
  background:            var(--secondary-blue);
  border-radius:         0.5rem;
  box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.5);
  padding:               1rem;
}

.card h3 {
    color: var(--accent-gold);
}

.layout-main{
  min-width: 568px; /* might to be too large */
}

/* sidebars and mobile */
.layout {
  width: 95%;
  display: flex;
  align-items: flex-start;       /* top-align all three columns */
  flex-wrap: nowrap;            /* prevent any wrapping */
  justify-content: center;    /* center the 3 columns */
  margin: auto;                /* center on the page */
  gap: 1rem;                     /* space between columns */
  padding: 2rem 1rem;            /* optional padding around content */

}

/* Sidebars stay a fixed width */
.sidebar {
  margin-top: 64px;
  padding-top: 50px;
  min-height: 100vh; /* so we have something to fill */
  display: flex;
  min-width: 120px;
  max-width: 250px; /* or whatever your page width is */
  overflow: hidden;
}

.sidebar img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sidebar-right {
    margin-left: 75px;
}

.sidebar-left {
    margin-right: 75px;
}

.tile {
  display: block;
  width: 100%;
  height: auto;
}

/* Main grows to fill whatever’s left */
.main {
  /*flex: 1 1 0;*/        /* allow main to shrink below its content width if needed */
  min-width: 0;       /* critical: allows it to actually shrink! */
}

/* Hide sidebars on small screens */
@media (max-width: 868px) {
  .sidebar {
    display: none;
  }
  .layout {
    padding: 1rem;
  }
}

.header-link {
  color: white;
}

.header-link:hover,
.header-link:focus {
  color: var(--accent-gold);
  text-decoration:     none;
  transition:          color 0.2s ease-in-out;
}

#nav-font-force,
#nav-font-force a {
  font-family: 'Inter', sans-serif;  /* or whatever your header uses */
  font-weight: 400;                  /* match your desktop nav weight */
}

.force-text-gold {
  color: var(--accent-gold);
}
.force-text-cherry-blossom-red-darker {
  color: var(--cherry-blossom-red-darker);
}


.bg-primary-navy {
  background-color: var(--primary-navy);
}
.bg-accent-gold {
  background-color: var(--accent-gold);
}
.bg-cherry-blossom-red-darker {
  background-color: var(--cherry-blossom-red-darker);
}

.force-text-primary-navy {
  color: var(--primary-navy);
}
.force-text-secondary-blue {
  color: var(--secondary-blue);
}
.force-text-cherry-blossom-red {
  color: var(--cherry-blossom-red);

}

.dropdown > ul {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.dropdown.open > ul {
  max-height: 700px;   /* or large enough for your menu */
  opacity: 1;
}

.dropdown-menu {
  position: absolute;
  top: 100%; left: 0;
  background-color: var(--secondary-blue);
  border-radius: .375rem; /* rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: .5rem 0;
  min-width: 12rem;
  pointer-events: none;
}

.dropdown-menu li {
  list-style: none;
}

.dropdown-menu li a {
  display: block;
  padding: .25rem 0.5rem;

  text-decoration: none;
}

.dropdown-menu li a:hover {
  color: var(--accent-gold);
}

.dropdown-menu .divider {
  height: 1px;
  background: #E5E7EB;
  margin: .25rem 0;
}

.dropdown-menu.offset {
  top: calc(100% + 1rem);   /* a little gap */
  left: -0.5rem;                /* shift left */
  background-color: var(--secondary-blue);
  backdrop-filter: blur(5px);         /* glassy effect */
  border-radius: .25rem;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(255,255,255,0.5);
}

/* 1023px is where the header goes to mobile */
@media (max-width: 1023px) {
    .dropdown-menu {
      min-width: 10rem;
    }
    .dropdown-menu.offset {
      top: calc(100%);
      left: 0.5rem;
        padding: 0.5rem;
    }
    .dropdown-menu li a {
      padding: .125rem 0.25rem;
    }
}

.divider-footer {
  height: 1px;
  width: 175px;
  background-color: black;
  margin: .25rem 0;
}
.divider-footer-wide{
  height: 1px;
  background-color: var(--cherry-blossom-red-darker);
  margin: 1rem 0;
}
.footer-link {
  color: var(--primary-navy);
}

.footer-link:hover,
.footer-link:focus {
  color:               var(--cherry-blossom-red);
  text-decoration:     underline;
  text-underline-offset: 0.125em;
}

.loader {
  opacity: 0;
  position: fixed;
  top: 50%;
  left: calc(50% - 24px);
  background-color: rgba(0, 38, 79, 0.5);
  box-shadow: 0 0 5px 25px rgba(0, 38, 79, 0.5);
  padding: 10px;
  pointer-events: none;
  visibility: hidden;
  border-radius: 10px;
  transition:         opacity 0.5s ease-in-out;
}

.loader.htmx-request {
  opacity: 1;
  visibility: visible;
}

.divider-white {
  height: 1px;
  background-color: white;
  margin: 1rem 0;
}

/* when the parent <li> has .open, let it receive clicks again */
.dropdown.open .dropdown-menu {
  pointer-events: auto;
}

.card-box-shadow-white {
    box-shadow: 0 0 10px 0 rgba(255,255,255,0.5), 0 0 20px 0 rgba(255,255,255,0.1);
    border-style: solid;
  border-width: 1px;
    border-color: white;
}
.card-timer-box-shadow-white {
    box-shadow: 0 0 20px 0 rgba(255,255,255,0.5), 0 0 30px 0 rgba(255,255,255,0.1);
}

.card-footer-tickets {
  display: grid;
  grid-template-rows: 4fr 1fr;
  min-height: 25rem;
  max-height: 28rem;
  overflow: hidden;              /* contain zoom within the card */
}

.card-footer-tickets img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform .25s ease;
  will-change: transform;
}

.card-footer-tickets img:hover {
  transform: scale(1.10);
}

.time-accordion-error-section {
  padding: 8px 10px;
  border: 1px solid #FCA5A5;   /* soft red border */
  background: #FEF2F2;         /* light red background */
  color: #7F1D1D;              /* dark red text */
  border-radius: 8px;
  font-size: 0.85rem;
}

.trackbox { background: #c00; padding: 8px; border-radius: 8px; }
.trackmap { background: #c00; display: block; }

.trackmap text,
.trackmap foreignObject,
.trackmap image { display: none !important; }

.trackmap path,
.trackmap polyline,
.trackmap polygon,
.trackmap circle,
.trackmap ellipse,
.trackmap rect {
  fill: none !important;
  stroke: #000 !important;
  vector-effect: non-scaling-stroke;
}

.trackmap marker path,
.trackmap marker polygon,
.trackmap marker polyline { fill:#0a0 !important; stroke:#0a0 !important; }

.trackmap [id*="arrow" i],
.trackmap [class*="arrow" i] { fill:#0a0 !important; stroke:#0a0 !important; }
.trackbox { padding: 8px; border-radius: 8px; }
.trackmap { display: block; width: 100%; height: auto; }

.track-card { font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height: 1.55; max-width: 980px; padding: 20px; }
.track-card header h1 { margin: 0; font-size: 32px; }
.track-card header p { margin: 6px 0 0 0; color: #dedede; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 12px; margin: 16px 0 10px; }
.fact { background: var(--primary-navy); border: 1px solid #eee; padding: 12px; border-radius: 10px; }
.fact .k { font-size: 12px; color: #dedede; text-transform: uppercase; letter-spacing: .06em; }
.fact .v { font-weight: 700; }
.section { margin: 18px 0 12px; }
.section h2 { margin: 0 0 8px; font-size: 22px; }
.section p { margin: 0 0 10px; }
.section ul { margin: 0 0 8px 18px; }
.muted { color: #dedede; font-size: 12px; }
.disclaimer { color: #dedede; font-size: 12px; margin-top: 14px; }