/* ProXpo modern styles + Dark mode overrides
   This stylesheet adds modern cards, glass effects, and a dark theme
   while leveraging the existing CSS variables from tooplate-waso-strategy.css.
*/

/* Feature cards and glass effect */
.card-glass {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .3s ease, background .2s ease;
}

.card-glass:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.12);
  background: rgba(255, 255, 255, 0.8);
}

.feature-card h5 {
  font-weight: 700;
}

.proxpo {
  background: linear-gradient(180deg, rgba(249, 193, 11, 0.08) 0%, rgba(249, 193, 11, 0) 100%);
}

/* Navbar active link underline */
.navbar .nav-link.active,
.navbar .nav-link:focus {
  color: var(--secondary-color);
}

.navbar .nav-link:hover {
  color: var(--secondary-color);
}

/* Theme toggle icon button */
#themeToggle i {
  font-size: 1.1rem;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .card-glass,
  .feature-card {
    transition: none !important;
  }
}

/* Dark theme
   We override CSS variables used throughout the base stylesheet
   by applying the .theme-dark class on the html element.
*/
html.theme-dark {
  --white-color: #0d1117;        /* used for backgrounds in base styles */
  --section-bg-color: #0b1324;   /* section background color */
  --dark-color: #ffffff;         /* used for headings/text */
  --p-color: #ffffff;            /* paragraph/text */
  --primary-color: #f9c10b;      /* keep brand */
  --secondary-color: #dc3545;    /* keep brand accent */
}

/* Global background/text adjustments in dark mode */
html.theme-dark body {
  background: var(--white-color);
  color: var(--p-color);
}

/* Header + footer */
html.theme-dark .site-header {
  background: #111827;
}

html.theme-dark .site-footer {
  background: #111827;
}

/* Navbar */
html.theme-dark .navbar {
  background: #0f172a !important;
}

html.theme-dark .navbar .navbar-brand {
  color: var(--primary-color);
}

html.theme-dark .navbar .nav-link {
  color: var(--p-color);
}

html.theme-dark .navbar .dropdown-menu {
  background: #0b1324;
  border-color: rgba(255,255,255,0.08);
}

html.theme-dark .dropdown-item {
  color: var(--p-color);
}

html.theme-dark .dropdown-item:hover,
html.theme-dark .dropdown-item:focus {
  background: rgba(249, 193, 11, 0.08);
  color: var(--dark-color);
}

/* Cards/blocks which used --white-color as background */
html.theme-dark .about-thumb,
html.theme-dark .contact-info,
html.theme-dark .projects-thumb:hover {
  background: #0f172a !important;
  color: var(--p-color);
}

/* ProXpo glass cards in dark mode */
html.theme-dark .card-glass {
  background: rgba(17, 24, 39, 0.75);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);
}

html.theme-dark .card-glass:hover {
  background: rgba(17, 24, 39, 0.9);
}

/* Social icons invert background for dark mode */
html.theme-dark .social-icon-link {
  background: #0b1324;
  color: var(--p-color);
}

html.theme-dark .social-icon-link:hover {
  color: var(--primary-color);
}

/* Forms */
html.theme-dark .custom-form .form-control {
  border-bottom-color: rgba(255,255,255,0.15);
  color: var(--p-color);
}

html.theme-dark .custom-form .form-control:hover,
html.theme-dark .custom-form .form-control:focus {
  background: #0b1324;
  color: var(--p-color);
}

/* Projects overlay titles */
html.theme-dark .projects-title-wrap {
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 90%);
}

/* Carousel overlay */
html.theme-dark .carousel-image-wrap::before {
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 90%);
}

/* ---------------------------
   Typography & Base tweaks
----------------------------*/
body {
  font-family: 'Inter', 'DM Sans', sans-serif;
}

h1, h2, h3 {
  letter-spacing: -0.5px;
}

/* ---------------------------
   Highlights section cards
----------------------------*/
.icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

#highlights .card-glass h5 {
  margin-bottom: 0.25rem;
}

#highlights p {
  font-size: 16px;
}

/* ---------------------------
   Events page modern cards
----------------------------*/
.event-card-modern img {
  transition: transform .35s ease, filter .35s ease;
}

.event-card-modern:hover img {
  transform: scale(1.05);
  filter: saturate(1.05);
}

.event-card-modern .badge {
  border-radius: 999px;
  padding: .35rem .6rem;
  font-weight: 600;
}

/* Category pill buttons */
[data-filter].btn-outline-dark {
  border-radius: 999px;
  border-color: rgba(0,0,0,.25);
  color: var(--dark-color);
}

[data-filter].btn-outline-dark.active,
[data-filter].btn-outline-dark:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff;
}

/* Dark mode adjustments for events */
html.theme-dark [data-filter].btn-outline-dark {
  border-color: rgba(255,255,255,.2);
  color: var(--p-color);
}

html.theme-dark [data-filter].btn-outline-dark.active,
html.theme-dark [data-filter].btn-outline-dark:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff;
}

/* ---------------------------
   Contact modern section
----------------------------*/
.contact .card-glass .form-label {
  font-weight: 600;
  opacity: .9;
}

.contact .form-control,
.contact select.form-control,
.contact textarea.form-control {
  background: rgba(255,255,255,0.65);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
}

html.theme-dark .contact .form-control,
html.theme-dark .contact select.form-control,
html.theme-dark .contact textarea.form-control {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: var(--p-color);
}

.contact .custom-btn.btn.w-100 {
  padding: .9rem 1.25rem;
}

/* About highlights layout */
.about-highlights .mini-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
}

/* Projects modernized visuals */
.projects-modern .projects-thumb {
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.projects-modern .projects-thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}

.projects-modern .projects-title-wrap {
  padding: 30px 28px 16px 28px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent 90%);
}

.projects-modern .projects-small-title {
  letter-spacing: 0.04em;
  font-weight: 600;
}

.projects-modern .projects-title {
  font-weight: 800;
}

html.theme-dark .projects-modern .projects-thumb {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

html.theme-dark .projects-modern .projects-title-wrap {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent 90%);
}