/**
 * PMR Club - Patriot Market Research Theme
 * Dark patriotic gold/amber theme for Joomla 5
 * Version: 1.0.0
 */

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */
:root {
  /* Primary Colors */
  --pmr-bg-primary: #0a0a1a;
  --pmr-bg-secondary: #0d1025;
  --pmr-bg-tertiary: #141830;
  --pmr-bg-card: rgba(255, 255, 255, 0.05);
  --pmr-bg-card-hover: rgba(255, 255, 255, 0.08);
  
  /* Gold/Amber Accent Colors */
  --pmr-gold: #f59e0b;
  --pmr-gold-light: #fbbf24;
  --pmr-gold-dark: #d97706;
  --pmr-amber: #f59e0b;
  
  /* Patriotic Colors */
  --pmr-red: #dc2626;
  --pmr-blue: #3b82f6;
  --pmr-white: #ffffff;
  
  /* Text Colors */
  --pmr-text-primary: #ffffff;
  --pmr-text-secondary: #9ca3af;
  --pmr-text-muted: #6b7280;
  
  /* Borders */
  --pmr-border: rgba(245, 158, 11, 0.2);
  --pmr-border-light: rgba(255, 255, 255, 0.1);
  
  /* Shadows */
  --pmr-shadow-gold: 0 0 30px rgba(255, 215, 0, 0.3);
  --pmr-shadow-gold-lg: 0 0 40px rgba(255, 215, 0, 0.5);
  
  /* Gradients */
  --pmr-gradient-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --pmr-gradient-patriot: linear-gradient(90deg, #dc2626, #ffffff, #3b82f6);
  --pmr-gradient-bg: linear-gradient(135deg, #0a0a1a 0%, #0d1025 50%, #0a0a1a 100%);
}

/* ============================================
   Base Styles
   ============================================ */
html {
  scroll-behavior: smooth;
}

body,
body.site {
  background: var(--pmr-bg-primary) !important;
  color: var(--pmr-text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

/* Background Pattern */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at top, rgba(220, 38, 38, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(255, 215, 0, 0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

a {
  color: var(--pmr-gold);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--pmr-gold-light);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--pmr-text-primary) !important;
  font-weight: 700;
  line-height: 1.2;
}

p {
  color: var(--pmr-text-secondary);
}

/* ============================================
   Header & Navigation
   ============================================ */
#sp-header,
.sp-header,
header,
#sp-top-bar {
  background: rgba(10, 10, 26, 0.95) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pmr-border) !important;
}

.sp-top-bar {
  background: var(--pmr-bg-secondary) !important;
  border-bottom: 1px solid var(--pmr-border) !important;
}

/* Logo */
.logo img,
.sp-logo img,
#sp-logo img {
  max-height: 50px;
  transition: transform 0.3s ease;
}

.logo:hover img,
.sp-logo:hover img {
  transform: scale(1.05);
}

.logo-text,
.sp-logo-text,
#sp-logo a {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, var(--pmr-text-primary), var(--pmr-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Navigation Menu */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
#sp-menu ul li a,
.nav-link,
#offcanvas-toggler {
  color: var(--pmr-text-secondary) !important;
  font-weight: 500;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
  border-radius: 0.5rem;
}

.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li > span:hover,
#sp-menu ul li a:hover,
.nav-link:hover {
  color: var(--pmr-gold) !important;
  background: rgba(245, 158, 11, 0.1);
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active > span,
#sp-menu ul li.active a,
.nav-link.active {
  color: var(--pmr-gold) !important;
}

/* Dropdown Menus */
.sp-dropdown,
.sp-megamenu-wrapper,
.dropdown-menu,
.sp-dropdown-inner {
  background: var(--pmr-bg-secondary) !important;
  border: 1px solid var(--pmr-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.sp-dropdown li a,
.sp-dropdown-inner li a,
.dropdown-item {
  color: var(--pmr-text-secondary) !important;
  padding: 0.75rem 1.5rem !important;
}

.sp-dropdown li a:hover,
.sp-dropdown-inner li a:hover,
.dropdown-item:hover {
  color: var(--pmr-gold) !important;
  background: rgba(245, 158, 11, 0.1) !important;
}

/* Mobile Menu / Offcanvas */
.offcanvas-menu,
#sp-offcanvas,
.sp-offcanvas-inner {
  background: var(--pmr-bg-primary) !important;
}

.offcanvas-menu a,
#sp-offcanvas a {
  color: var(--pmr-text-secondary) !important;
}

.offcanvas-menu a:hover,
#sp-offcanvas a:hover {
  color: var(--pmr-gold) !important;
}

/* ============================================
   Buttons
   ============================================ */
.btn,
.sp-btn,
button[type="submit"],
input[type="submit"],
.sppb-btn {
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 9999px !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
}

/* Primary Button - Gold */
.btn-primary,
.sp-btn-primary,
.btn-gold,
.sppb-btn-primary,
.sppb-btn-default {
  background: var(--pmr-gradient-gold) !important;
  border: none !important;
  color: #000 !important;
  box-shadow: var(--pmr-shadow-gold);
}

.btn-primary:hover,
.sp-btn-primary:hover,
.btn-gold:hover,
.sppb-btn-primary:hover,
.sppb-btn-default:hover {
  transform: translateY(-2px);
  box-shadow: var(--pmr-shadow-gold-lg) !important;
  color: #000 !important;
}

/* Secondary Button - Outline */
.btn-secondary,
.sp-btn-secondary,
.btn-outline,
.sppb-btn-secondary {
  background: transparent !important;
  border: 2px solid rgba(245, 158, 11, 0.5) !important;
  color: var(--pmr-gold) !important;
}

.btn-secondary:hover,
.sp-btn-secondary:hover,
.btn-outline:hover,
.sppb-btn-secondary:hover {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: var(--pmr-gold) !important;
  color: var(--pmr-gold) !important;
}

/* ============================================
   Cards & Modules
   ============================================ */
.card,
.sp-module,
.module,
.sppb-addon-wrapper,
.sppb-addon {
  background: var(--pmr-bg-card) !important;
  border: 1px solid var(--pmr-border-light) !important;
  border-radius: 1.5rem !important;
  transition: all 0.3s ease;
}

.card:hover,
.sp-module:hover {
  border-color: rgba(245, 158, 11, 0.5) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.1) !important;
}

/* Card Headers */
.card-header,
.module-title,
.sp-module-title,
.sppb-addon-title {
  border-bottom: 1px solid var(--pmr-border) !important;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  color: var(--pmr-text-primary) !important;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ============================================
   Hero / Slider Section
   ============================================ */
.sp-slider,
.sppb-section,
#sp-main-body,
#sp-page-builder {
  background: transparent !important;
}

.hero-title,
.sp-slider-title,
.sppb-addon-title.sppb-title-heading {
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin-bottom: 1.5rem;
}

.text-gradient-patriot {
  background: var(--pmr-gradient-patriot) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.text-gradient-gold,
.text-gold {
  background: var(--pmr-gradient-gold) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ============================================
   Content Area
   ============================================ */
#sp-main-body,
#sp-component,
.sp-content {
  background: transparent !important;
}

.article-list article,
.article-details,
.blog-article {
  background: var(--pmr-bg-card) !important;
  border: 1px solid var(--pmr-border-light) !important;
  border-radius: 1.5rem !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
}

.article-header h1,
.article-header h2,
.entry-title {
  color: var(--pmr-text-primary) !important;
}

.article-body,
.article-content,
.entry-content {
  color: var(--pmr-text-secondary) !important;
}

/* Article Meta */
.article-meta,
.article-info,
.entry-meta {
  color: var(--pmr-text-muted) !important;
  border-bottom: 1px solid var(--pmr-border) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1.5rem !important;
}

/* ============================================
   Sidebar
   ============================================ */
#sp-left,
#sp-right,
.sidebar {
  background: transparent !important;
}

#sp-left .sp-module,
#sp-right .sp-module,
.sidebar .module {
  background: var(--pmr-bg-card) !important;
  border: 1px solid var(--pmr-border-light) !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* ============================================
   Footer
   ============================================ */
#sp-footer,
.sp-footer,
footer,
#sp-bottom {
  background: var(--pmr-bg-secondary) !important;
  border-top: 1px solid var(--pmr-border) !important;
  padding: 4rem 0 2rem !important;
}

#sp-footer .sp-module-title,
.footer-title {
  color: var(--pmr-text-primary) !important;
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
}

#sp-footer a,
.footer-links a {
  color: var(--pmr-text-secondary) !important;
  display: block;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
}

#sp-footer a:hover,
.footer-links a:hover {
  color: var(--pmr-gold) !important;
  padding-left: 0.5rem;
}

.sp-copyright,
.footer-bottom {
  border-top: 1px solid var(--pmr-border) !important;
  margin-top: 3rem !important;
  padding-top: 2rem !important;
  text-align: center;
  color: var(--pmr-text-muted) !important;
}

/* Social Links */
.social-links a,
.sp-social-share a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid var(--pmr-border) !important;
  border-radius: 50% !important;
  color: var(--pmr-text-secondary) !important;
  margin: 0 0.25rem !important;
  transition: all 0.3s ease !important;
}

.social-links a:hover,
.sp-social-share a:hover {
  background: var(--pmr-gold) !important;
  border-color: var(--pmr-gold) !important;
  color: #000 !important;
  transform: translateY(-3px);
}

/* ============================================
   Forms
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select,
.form-control,
.inputbox {
  background: var(--pmr-bg-card) !important;
  border: 1px solid var(--pmr-border-light) !important;
  border-radius: 0.75rem !important;
  color: var(--pmr-text-primary) !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.inputbox:focus {
  border-color: var(--pmr-gold) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
  outline: none !important;
}

label,
.form-label,
.control-label {
  color: var(--pmr-text-secondary) !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}

/* ============================================
   Tables
   ============================================ */
table,
.table {
  background: var(--pmr-bg-card) !important;
  border-radius: 1rem !important;
  overflow: hidden;
}

th {
  background: var(--pmr-bg-secondary) !important;
  color: var(--pmr-text-primary) !important;
  font-weight: 600 !important;
  padding: 1rem !important;
  border-bottom: 1px solid var(--pmr-border) !important;
}

td {
  color: var(--pmr-text-secondary) !important;
  padding: 1rem !important;
  border-bottom: 1px solid var(--pmr-border-light) !important;
}

tr:hover td {
  background: rgba(245, 158, 11, 0.05) !important;
}

/* ============================================
   Alerts & Messages
   ============================================ */
.alert,
.system-message,
#system-message-container .alert {
  border-radius: 1rem !important;
  padding: 1rem 1.5rem !important;
  margin-bottom: 1rem !important;
}

.alert-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid var(--pmr-border) !important;
  color: var(--pmr-gold) !important;
}

.alert-danger,
.alert-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

.alert-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #3b82f6 !important;
}

/* ============================================
   Breadcrumbs
   ============================================ */
.breadcrumb,
.sp-breadcrumb,
#sp-breadcrumb {
  background: transparent !important;
  padding: 1rem 0 !important;
}

.breadcrumb-item a,
.sp-breadcrumb a {
  color: var(--pmr-text-muted) !important;
}

.breadcrumb-item a:hover,
.sp-breadcrumb a:hover {
  color: var(--pmr-gold) !important;
}

.breadcrumb-item.active,
.sp-breadcrumb .active {
  color: var(--pmr-text-primary) !important;
}

/* ============================================
   Pagination
   ============================================ */
.pagination {
  gap: 0.5rem !important;
}

.pagination .page-link,
.page-link {
  background: var(--pmr-bg-card) !important;
  border: 1px solid var(--pmr-border-light) !important;
  border-radius: 0.5rem !important;
  color: var(--pmr-text-secondary) !important;
  padding: 0.5rem 1rem !important;
}

.pagination .page-link:hover,
.page-link:hover {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: var(--pmr-gold) !important;
  color: var(--pmr-gold) !important;
}

.pagination .page-item.active .page-link,
.page-item.active .page-link {
  background: var(--pmr-gradient-gold) !important;
  border-color: var(--pmr-gold) !important;
  color: #000 !important;
}

/* ============================================
   Search
   ============================================ */
.sp-search-box,
#sp-search-box,
.search {
  background: var(--pmr-bg-card) !important;
  border: 1px solid var(--pmr-border-light) !important;
  border-radius: 9999px !important;
}

.sp-search-box input,
#sp-search-box input {
  background: transparent !important;
  border: none !important;
  color: var(--pmr-text-primary) !important;
}

.sp-search-box button,
#sp-search-box button {
  color: var(--pmr-gold) !important;
}

/* ============================================
   SP Page Builder Overrides
   ============================================ */
.sppb-section {
  background: transparent !important;
}

.sppb-section-title {
  color: var(--pmr-text-primary) !important;
}

.sppb-addon-text,
.sppb-addon-content {
  color: var(--pmr-text-secondary) !important;
}

.sppb-row-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Feature Boxes */
.sppb-addon-feature-box,
.sppb-addon-icon-box {
  background: var(--pmr-bg-card) !important;
  border: 1px solid var(--pmr-border-light) !important;
  border-radius: 1.5rem !important;
  padding: 2rem !important;
  transition: all 0.3s ease !important;
}

.sppb-addon-feature-box:hover,
.sppb-addon-icon-box:hover {
  border-color: rgba(245, 158, 11, 0.5) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.1) !important;
}

.sppb-addon-feature-box .sppb-icon,
.sppb-addon-icon-box .sppb-icon {
  color: var(--pmr-gold) !important;
}

/* Testimonials */
.sppb-addon-testimonial,
.sppb-addon-testimonial-content {
  background: var(--pmr-bg-card) !important;
  border: 1px solid var(--pmr-border-light) !important;
  border-radius: 1.5rem !important;
}

.sppb-addon-testimonial-footer-designation {
  color: var(--pmr-text-muted) !important;
}

/* Pricing */
.sppb-addon-pricing-table {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 2px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 2rem !important;
}

.sppb-addon-pricing-price {
  color: var(--pmr-gold) !important;
}

/* Accordion */
.sppb-addon-accordion .sppb-panel {
  background: var(--pmr-bg-card) !important;
  border: 1px solid var(--pmr-border-light) !important;
  border-radius: 1rem !important;
  margin-bottom: 1rem !important;
}

.sppb-addon-accordion .sppb-panel-heading {
  background: transparent !important;
}

.sppb-addon-accordion .sppb-panel-title a {
  color: var(--pmr-text-primary) !important;
}

/* Tabs */
.sppb-addon-tab .sppb-nav-tabs {
  border-bottom: 1px solid var(--pmr-border) !important;
}

.sppb-addon-tab .sppb-nav-link {
  color: var(--pmr-text-secondary) !important;
}

.sppb-addon-tab .sppb-nav-link.active {
  color: var(--pmr-gold) !important;
  border-bottom-color: var(--pmr-gold) !important;
}

/* ============================================
   Utility Classes
   ============================================ */
.text-gold { color: var(--pmr-gold) !important; }
.text-white { color: var(--pmr-text-primary) !important; }
.text-muted { color: var(--pmr-text-muted) !important; }

.bg-dark { background: var(--pmr-bg-primary) !important; }
.bg-darker { background: var(--pmr-bg-secondary) !important; }
.bg-card { background: var(--pmr-bg-card) !important; }

.border-gold { border-color: var(--pmr-gold) !important; }
.border-subtle { border-color: var(--pmr-border-light) !important; }

.shadow-gold { box-shadow: var(--pmr-shadow-gold) !important; }
.shadow-gold-lg { box-shadow: var(--pmr-shadow-gold-lg) !important; }

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 991px) {
  .hero-title,
  .sp-slider-title {
    font-size: 2.5rem !important;
  }
}

@media (max-width: 767px) {
  .hero-title,
  .sp-slider-title {
    font-size: 2rem !important;
  }
  
  .card,
  .sp-module {
    padding: 1.5rem !important;
  }
}

/* ============================================
   Animations
   ============================================ */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.5);
  }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--pmr-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--pmr-gold);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pmr-gold-light);
}