/* ============================================================
   STAR SECURITY TRAINING — Professional Polish Layer
   Additive stylesheet: refines existing design, changes no content.
   Loaded last so it layers on top of each page's own styles.
   ============================================================ */

/* ---------- Global refinement ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
::selection { background: #0d2b6e; color: #f5c800; }

/* Accessible, on-brand keyboard focus */
:focus-visible { outline: 3px solid #f5c800; outline-offset: 2px; border-radius: 4px; }

/* Smooth interactive feel everywhere */
a, button, input, select, textarea { transition: all .22s ease; }

/* ---------- Navigation ---------- */
nav { box-shadow: 0 2px 14px rgba(13, 43, 110, .18); position: relative; z-index: 40; }

/* Logo: subtle lift on hover — signals "clickable, takes you home" */
.logo-wrap { transition: transform .22s ease, opacity .22s ease; }
.logo-wrap:hover { transform: translateY(-1px); opacity: .92; }

/* Nav links: animated gold underline */
.nav-links > li > a:not(.nav-cta) { position: relative; padding-bottom: 3px; }
.nav-links > li > a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: #f5c800; transition: width .25s ease; border-radius: 2px;
}
.nav-links > li > a:not(.nav-cta):hover::after { width: 100%; }

/* Dropdown menus: soft entrance, rounded, elevated */
.dropdown {
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(13, 43, 110, .22) !important;
  overflow: hidden;
  animation: ddIn .18s ease;
  border: 1px solid rgba(13, 43, 110, .08);
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.dropdown a { transition: background .15s ease, padding-left .15s ease; }
.dropdown a:hover { background: #f4f7ff !important; padding-left: 22px !important; color: #b8860b !important; }

/* Nav CTA + all primary buttons: lift on hover, press on click */
.nav-cta, .pg-cta, .btn, .btn-primary, .course-btn {
  box-shadow: 0 3px 10px rgba(245, 200, 0, .25);
}
.nav-cta:hover, .pg-cta:hover, .btn:hover, .btn-primary:hover, .course-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 200, 0, .38);
  filter: brightness(1.04);
}
.nav-cta:active, .pg-cta:active, .btn:active, .btn-primary:active, .course-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(245, 200, 0, .3);
}

/* Generic buttons (forms, widgets) get gentle feedback too */
button { cursor: pointer; }
button:hover { filter: brightness(1.05); }
button:active { transform: scale(.98); }

/* ---------- Cards ---------- */
.course-card, .blog-card, .faq-item, .contact-item {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.course-card:hover, .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(13, 43, 110, .13);
  border-color: #f5c800 !important;
}

/* Card CTAs and blog links brighten on hover */
.blog-link:hover, .blog-title a:hover { color: #b8860b !important; }

/* ---------- Typography rhythm ---------- */
h1, h2, h3 { letter-spacing: .01em; }
h1 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Forms ---------- */
input:focus, select:focus, textarea:focus {
  border-color: #f5c800 !important;
  box-shadow: 0 0 0 3px rgba(245, 200, 0, .18) !important;
  outline: none;
}
input:hover, select:hover, textarea:hover { border-color: #b9c5dd !important; }

/* ---------- Tables (schedules & pricing) ---------- */
table tr:nth-child(even) td { background: rgba(13, 43, 110, .025); }
table tr:hover td { background: rgba(245, 200, 0, .06); }

/* ---------- Footer ---------- */
footer a { transition: color .2s ease, padding-left .2s ease; }
footer a:hover { color: #f5c800 !important; }
footer li a:hover { padding-left: 4px; }

/* ---------- Scrollbar (WebKit/Chromium) ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #f4f7ff; }
::-webkit-scrollbar-thumb { background: #0d2b6e; border-radius: 8px; border: 2px solid #f4f7ff; }
::-webkit-scrollbar-thumb:hover { background: #f5c800; }

/* ---------- Hero polish ---------- */
.pg-hero { position: relative; }
.pg-hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }

/* Gentle content entrance on load */
@media (prefers-reduced-motion: no-preference) {
  .pg-hero > div { animation: heroIn .6s ease both; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}

/* ---------- Mobile menu ---------- */
.mobile-menu a { transition: background .15s ease, padding-left .15s ease; }
.mobile-menu a:hover { background: rgba(245, 200, 0, .12); padding-left: 26px; }

/* ---------- Motion sensitivity ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}