/* General helpers */
:root {
  --olpc-orange: #f97316;
  --olpc-orange-dark: #ea580c;
}

/* Smooth hover for all nav links/buttons inside header/footer */
.olpc-link {
  transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.olpc-link:hover { color: var(--olpc-orange-dark); }

/* Footer buttons baseline if Tailwind is missing (graceful fallback) */
.olpc-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .75rem; font:600 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  border:1px solid var(--olpc-orange); border-radius:9999px; color:var(--olpc-orange);
  background:#fff; text-decoration:none; transition:all .2s ease;
}
.olpc-btn:hover,.olpc-btn:focus { background:var(--olpc-orange); color:#fff; outline:none; box-shadow:0 0 0 .15rem #f9731640; }

/* Desktop dropdown reveal (works with or without Tailwind) */
.olpc-dropdown { position:relative; }
.olpc-dropdown > .olpc-panel {
  position:absolute; left:0; top:100%; display:none; min-width:14rem;
  background:#fff; border:1px solid #e5e7eb; box-shadow:0 10px 20px rgba(15,23,42,.08); z-index:20;
}
.olpc-dropdown:hover > .olpc-panel,
.olpc-dropdown:focus-within > .olpc-panel { display:block; }

/* Sticky header body offset (JS sets --olpc-header-h) */
body.olpc-has-sticky { padding-top: var(--olpc-header-h, 0px); }

/* Utility when Tailwind isn’t loaded (keeps layout decent) */
.wrapper { max-width:1000px; margin:0 auto; }
.header-surface { background:#fff; border-bottom:1px solid #e5e7eb; }
.footer-surface { background:#fff; border-top:1px solid #e5e7eb; }



.olpc-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem .8rem;
  font:600 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  border:1px solid #f97316;
  border-radius:9999px;
  color:#f97316;
  background:#fff;
  text-decoration:none;
  transition:all .2s ease;
}
.olpc-btn:hover,.olpc-btn:focus {
  background:#f97316;
  color:#fff;
  outline:none;
  box-shadow:0 0 0 .15rem #f9731640;
}




/* --- Header nav look & underline animation --- */
.olpc-navlink{
  position: relative;
  display: block;
  color: #1f2937;              /* slate-800 */
  text-decoration: none;
  transition: color .2s ease;
}
.olpc-navlink:hover{ color:#ea580c; }  /* orange-600 */

.olpc-navlink::after{
  content:"";
  position:absolute;
  left:1rem;                  /* aligns with Tailwind px-4 */
  right:1rem;
  bottom:8px;                 /* sits above bottom of link */
  height:2px;
  background: linear-gradient(90deg,#f97316,#ea580c); /* orange -> darker */
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .25s ease;
}
.olpc-navlink:hover::after{ transform: scaleX(1); }

/* dropdown items – slimmer underline */
.olpc-subitem{ position:relative; color:#374151; text-decoration:none; }
.olpc-subitem:hover{ color:#ea580c; background:#f8fafc; }
.olpc-subitem::after{
  content:"";
  position:absolute; left:16px; right:16px; bottom:6px; height:2px;
  background:#f97316; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .2s ease;
}
.olpc-subitem:hover::after{ transform:scaleX(1); }




/* -------------------------------
   Mobile Nav: Same hover look
----------------------------------*/
@media (max-width: 640px) {
  #olpcMobileNav a.olpc-navlink {
    color: #1f2937; /* dark grey text */
    border-bottom: 1px solid #f1f1f1;
    position: relative;
    transition: color 0.25s ease;
  }

  #olpcMobileNav a.olpc-navlink:hover {
    color: #ea580c; /* orange hover */
  }

  #olpcMobileNav a.olpc-navlink::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, #f97316, #ea580c);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
  }

  #olpcMobileNav a.olpc-navlink:hover::after {
    transform: scaleX(1);
  }
}