/* ==========================================================================
   PXLTR DIGITAL - PRODUCTION STYLE SYSTEM
   Editorial Minimalist Architecture & Multi-Column Journal Feed
   The 70-25-5 Rule: Pure White (#FFFFFF) | Deep Carbon (#111111) | Electric Accent (#0052FF)
   ========================================================================== */

@import url('pxltr-system.css');

:root {
  /* High-End Minimalist Palette */
  --bs-primary: #0052FF;
  --bs-primary-rgb: 0, 82, 255;
  --bs-link-color: #0052FF;
  --bs-link-hover-color: #0040D9;
  
  --color-primary: #0052FF;
  --color-primary-rgb: 0, 82, 255;
  --color-secondary: #111111;
  --color-secondary-rgb: 17, 17, 17;
  
  --pxltr-accent: #0052FF;
  --pxltr-dark: #111111;
  --pxltr-black: #0A0A0A;
  --pxltr-white: #FFFFFF;
  --pxltr-light: #F8FAFC;
  --pxltr-warm: #FDFBF7;
  --pxltr-border: #E2E8F0;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY (Plus Jakarta Sans & Inter)
   ========================================================================== */
body {
  font-family: var(--font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--px-text-main) !important;
  background-color: var(--px-bg) !important;
  line-height: 1.75 !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.brand-logo-text {
  font-family: var(--font-heading), -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--px-carbon) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

/* ==========================================================================
   SLEEK RECTANGULAR BUTTONS (Strict 48px Height & 0-4px Corner Radius)
   ========================================================================== */
.btn,
.animate-btn,
button[type="submit"],
a.btn,
input[type="submit"],
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-dark,
.btn-outline-white,
.btn-sm,
.btn-md,
.btn-lg,
.btn-action {
  border-radius: 2px !important;
  min-height: 48px !important;
  padding: 0 1.75rem !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.925rem !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Primary Button: Deep Carbon Rectangle (#111111) -> Electric Accent Hover */
.btn-primary,
button.btn-primary,
a.btn-primary,
[type="submit"].btn-primary,
button[type="submit"] {
  background-color: #111111 !important;
  border: 1px solid #111111 !important;
  color: #FFFFFF !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
[type="submit"].btn-primary:hover,
button[type="submit"]:hover {
  background-color: #0052FF !important;
  border-color: #0052FF !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.btn-primary *,
.btn-primary:hover *,
button[type="submit"] *,
button[type="submit"]:hover * {
  color: #FFFFFF !important;
}

/* Secondary / Ghost Buttons: Clean 1px border (#E2E8F0) */
.btn-outline,
.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-primary,
.btn-ghost {
  background-color: transparent !important;
  border: 1px solid #E2E8F0 !important;
  color: #111111 !important;
}

.btn-outline:hover,
.btn-outline-dark:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-ghost:hover {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.btn-outline:hover *,
.btn-outline-dark:hover *,
.btn-outline-primary:hover * {
  color: #FFFFFF !important;
}

/* WhatsApp Button: Clean Minimal with Subtle Hover */
.btn-whatsapp,
a[href*="wa.me"],
a[href*="whatsapp"] {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-whatsapp:hover,
a[href*="wa.me"]:hover {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #25D366 !important;
}

/* ==========================================================================
   MINIMAL FIXED HEADER WITH GLASSMORPHIC BLUR
   ========================================================================== */
.uc-header,
.uc-navbar-container {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: none !important;
}

/* Typographic Logo "PXLTR" */
.brand-typographic-logo {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: 1.65rem !important;
  letter-spacing: -0.04em !important;
  color: #111111 !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
}

.brand-typographic-logo .logo-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #0052FF;
  border-radius: 50%;
  margin-left: 2px;
}

/* Header Links */
.uc-navbar-nav > li > a {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.925rem !important;
  letter-spacing: -0.01em !important;
  color: #111111 !important;
  transition: color 0.18s ease;
}

.uc-navbar-nav > li > a:hover,
.uc-navbar-nav > li.uc-active > a {
  color: #0052FF !important;
}

/* Minimal 2-Line Mobile Menu Trigger */
.uc-menu-trigger,
.pxltr-menu-trigger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.uc-menu-trigger::before,
.uc-menu-trigger::after,
.pxltr-menu-trigger span {
  content: "";
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: #111111;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Accents & Text Links */
.text-primary,
span.text-primary,
a.text-primary,
i.text-primary {
  color: #0052FF !important;
}

.bg-primary {
  background-color: #111111 !important;
  color: #FFFFFF !important;
}

.border-primary {
  border-color: #E2E8F0 !important;
}

/* Charcoal Neutral Overrides */
:root {
  --color-secondary: #111111 !important;
  --color-secondary-500: #111111 !important;
  --bs-secondary: #111111 !important;
  --bs-secondary-500: #111111 !important;
  --bs-secondary-rgb: 17, 17, 17 !important;
}

.text-secondary {
  color: #111111 !important;
}

/* Clean Cards: 1px subtle border, 0 drop shadows. UIkit .panel MUST NOT have borders! */
.card, .blog-card {
  border: 1px solid #E2E8F0 !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

.panel {
  border: none !important;
  box-shadow: none !important;
}

/* Minimalist Form Controls */
.form-control, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  border: 1px solid #E2E8F0 !important;
  border-radius: 2px !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  background-color: #FFFFFF !important;
  color: #111111 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease;
}

.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: #0052FF !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.12) !important;
}

/* Dark Mode Overrides for style.css */
html.uc-dark body,
html.dark body,
[data-bs-theme="dark"] body {
  background-color: #0D0F12 !important;
  color: #F1F5F9 !important;
}

html.uc-dark .text-secondary,
html.dark .text-secondary,
[data-bs-theme="dark"] .text-secondary {
  color: #94A3B8 !important;
}

html.uc-dark .card,
html.dark .card,
[data-bs-theme="dark"] .card {
  background-color: #14171C !important;
  border-color: #23272F !important;
  color: #F1F5F9 !important;
}

html.uc-dark .panel,
html.dark .panel,
[data-bs-theme="dark"] .panel {
  border: none !important;
}

html.uc-dark .form-control,
html.dark .form-control,
[data-bs-theme="dark"] .form-control,
html.uc-dark input[type="text"],
html.dark input[type="text"],
[data-bs-theme="dark"] input[type="text"],
html.uc-dark textarea,
html.dark textarea,
[data-bs-theme="dark"] textarea,
html.uc-dark select,
html.dark select,
[data-bs-theme="dark"] select {
  background-color: #171A20 !important;
  border-color: #2D3748 !important;
  color: #F8FAFC !important;
}

/* Accordion Dark Theme Contrast Fix */
.uc-dark .uc-accordion-title,
html.uc-dark .uc-accordion-title,
html.dark .uc-accordion-title,
[data-bs-theme="dark"] .uc-accordion-title {
  color: #F8FAFC !important;
}

.uc-dark .uc-accordion-content p,
html.uc-dark .uc-accordion-content p,
html.dark .uc-accordion-content p,
[data-bs-theme="dark"] .uc-accordion-content p {
  color: #CBD5E1 !important;
}

.uc-dark .uc-accordion li,
html.uc-dark .uc-accordion li,
html.dark .uc-accordion li,
[data-bs-theme="dark"] .uc-accordion li {
  border-color: #23272F !important;
  background-color: #14171C !important;
}

/* ==========================================================================
   BLOG EDITORIAL, MOBILE HEADER & RESPONSIVENESS OVERRIDES
   ========================================================================== */
/* 1. Mobile Header Navigation Fix */
@media (max-width: 991px) {
  .uc-header .uc-navbar-center,
  .uc-navbar-center {
    display: none !important;
  }
  .uc-header .uc-navbar-nav,
  .uc-navbar-nav {
    display: none !important;
  }
  .pxltr-menu-trigger {
    display: inline-flex !important;
  }
}

/* 2. Global text-decoration elimination for clean editorial look */
a,
a:hover,
a:focus,
a:active,
.text-decoration-none,
.text-inherit,
.pxltr-blog-masthead h1,
.pxltr-blog-masthead h1 a,
.pxltr-blog-title,
.pxltr-blog-title a,
.blog-hero-spot h2,
.blog-hero-spot h2 a,
.blog-feed-title,
.blog-feed-title a,
.blog-read-link,
.blog-hero-btn,
.blog-hero-btn span,
.pxltr-cat-pill,
.blog-reading-title,
.blog-reading-title a,
.brand-typographic-logo {
  text-decoration: none !important;
}

/* Explicit exemption strictly for Unsplash photo credits */
.unsplash-overlay-badge a,
.unsplash-caption a {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* 3. Blog hero footer & button layout */
.blog-hero-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid var(--px-border, #E2E8F0) !important;
  margin-top: auto !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.blog-hero-footer .blog-hero-author {
  font-size: 0.8125rem !important;
  color: var(--px-text-muted, #64748B) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.blog-hero-footer .blog-hero-btn,
.blog-hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 18px !important;
  background-color: #111111 !important;
  color: #FFFFFF !important;
  font-family: var(--font-heading) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin-left: auto !important;
  overflow: visible !important;
  box-shadow: none !important;
  border: 1px solid #111111 !important;
  transition: all 0.2s ease !important;
}

.blog-hero-footer .blog-hero-btn:hover,
.blog-hero-btn:hover {
  background-color: #0052FF !important;
  border-color: #0052FF !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.blog-hero-footer .blog-hero-btn span,
.blog-hero-btn span {
  display: inline-block !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
}

/* 4. Blog Feed Card Footer */
.blog-feed-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--px-border, #E2E8F0) !important;
  gap: 12px !important;
}

.blog-feed-footer .blog-date {
  font-size: 0.75rem !important;
  color: var(--px-text-muted, #64748B) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.blog-feed-footer .blog-read-link {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  text-decoration: none !important;
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: color 0.18s ease !important;
}

.blog-feed-footer .blog-read-link:hover {
  color: #0052FF !important;
  text-decoration: none !important;
}

/* 5. Blog Social Share Buttons & Author Reading Meta */
.blog-reading-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.25rem 0 !important;
  border-top: 1px solid var(--px-border, #E2E8F0) !important;
  border-bottom: 1px solid var(--px-border, #E2E8F0) !important;
  margin-bottom: 2.5rem !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

@media (max-width: 575px) {
  .blog-reading-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  .blog-reading-meta .blog-share-group {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

.blog-share-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.blog-share-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border: 1px solid var(--px-border, #E2E8F0) !important;
  border-radius: 4px !important;
  background-color: #FFFFFF !important;
  color: #111111 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

.blog-share-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  display: block !important;
  margin: auto !important;
}

.blog-share-btn:hover {
  border-color: #111111 !important;
  color: #0052FF !important;
  transform: translateY(-2px) !important;
}

.blog-share-btn.share-wa:hover {
  color: #25D366 !important;
  border-color: #25D366 !important;
}

.blog-share-btn.share-li:hover {
  color: #0A66C2 !important;
  border-color: #0A66C2 !important;
}

.blog-share-btn.share-x:hover {
  color: #000000 !important;
  border-color: #000000 !important;
}

html.uc-dark .blog-share-btn,
html.dark .blog-share-btn {
  background-color: #14171C !important;
  border-color: #23272F !important;
  color: #F1F5F9 !important;
}

html.uc-dark .blog-share-btn:hover,
html.dark .blog-share-btn:hover {
  border-color: #F8FAFC !important;
  color: #FFFFFF !important;
}