/**
 * PURPLE & BLACK THEME - COLOR VARIABLES & CUSTOMIZATION
 * ======================================================
 * Easy-to-change color system using CSS custom properties
 * Edit the :root section to customize all theme colors instantly
 */

:root {
  /* Primary Colors — dark navy matching logo text */
  --color-primary: #1a1d24;
  --color-primary-dark: #0f1214;
  --color-primary-light: #474c50;
  --color-primary-lighter: #f2f2f2;

  --color-secondary: #000000;
  --color-secondary-dark: #1a1a1a;
  --color-secondary-light: #333333;

  /* Neutral Colors */
  --color-text: #1d1d1d;
  --color-text-light: #666666;
  --color-text-white: #ffffff;

  /* Background Colors */
  --color-bg-light: #f5f5f7;
  --color-bg-white: #ffffff;
  --color-bg-dark: #0f1214;

  /* Accent Colors — neutral, no purple tint */
  --color-accent: #7c3aed;            /* brand purple, used sparingly */
  --color-border: #e0e0e0;
  --color-border-dark: #1a1d24;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #1a1d24 0%, #0f1214 100%);
  --gradient-accent: linear-gradient(135deg, #474c50 0%, #1a1d24 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
}

/* ============================================
   OVERRIDE ALL COLORS TO PURPLE & BLACK THEME
   ============================================ */

/* ============================================
   1. BUTTONS - PURPLE & BLACK THEME
   ============================================ */

button,
input[type=button],
input[type=reset],
input[type=submit],
.theme_button,
.post_item .more-link,
.gallery_preview_show .post_readmore,
.sc_button,
.sc_form button,
.tribe-events-button,
#tribe-events .tribe-events-button,
.edd_download_purchase_form .button,
#edd-purchase-button,
.edd-submit.button {
  background: var(--color-primary) !important;
  color: var(--color-text-white) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all 0.3s ease !important;
}

button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover,
.theme_button:hover,
.post_item .more-link:hover,
.sc_button:hover,
.sc_form button:hover,
.tribe-events-button:hover {
  background: var(--color-primary-dark) !important;
  color: var(--color-text-white) !important;
  border: 2px solid var(--color-primary-dark) !important;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15) !important;
}

button:active,
input[type=button]:active,
input[type=submit]:active,
.theme_button:active,
.sc_button:active {
  background: var(--color-primary-dark) !important;
  color: var(--color-text-white) !important;
  border: 2px solid var(--color-primary) !important;
  transform: scale(0.98);
}

/* Bordered buttons */
.sc_button.sc_button_bordered {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: 0 !important;
}

.sc_button.sc_button_bordered:hover {
  background: var(--color-primary) !important;
  color: var(--color-text-white) !important;
  border: 2px solid var(--color-primary) !important;
}

/* Simple buttons */
.sc_button_simple {
  color: var(--color-primary) !important;
  border: none !important;
}

.sc_button_simple:hover {
  color: var(--color-primary-dark) !important;
}

/* ============================================
   1.5 LOGO STYLING - WHITE BACKGROUND
   ============================================ */

.top_panel_navi .columns_wrap {
  align-items: center;
}

.top_panel_navi .column-1_4 {
  display: flex;
  justify-content: center;
}

.sc_layouts_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 0;
  transition: opacity 0.25s ease;
  min-height: 90px;
  width: 320px;
  max-width: 100%;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.sc_layouts_logo:hover {
  opacity: 0.85;
  box-shadow: none !important;
  transform: none;
}

.sc_layouts_logo img {
  max-height: 110px !important;
  width: auto !important;
  object-fit: contain !important;
}

.logo_png_image {
  max-height: 110px !important;
  width: auto !important;
  object-fit: contain !important;
}

.logo_text,
.logo_slogan {
  color: #000000 !important;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.logo_text {
  font-size: 24px !important;
  margin: 0 !important;
}

.logo_slogan {
  font-size: 13px !important;
  color: #444444 !important;
  margin: 8px 0 0 0 !important;
}


/* ============================================
   2. HEADER & NAVIGATION
   ============================================ */

/* Make entire header white — override dark scheme rows */
.top_panel_default,
.top_panel_default .sc_layouts_row,
.top_panel_default .sc_layouts_row_type_normal,
.top_panel_default .sc_layouts_row_type_compact,
.top_panel_navi,
.top_panel_title,
.top_panel_title.sc_layouts_row_type_normal {
  background: #ffffff !important;
  color: #1d1d1d !important;
}

/* Hide the page title bar on front page — it's just a blank dark bar */
.home .top_panel_title.sc_layouts_row_type_normal {
  display: none !important;
}

.top_panel_default {
  background: #ffffff !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.top_panel_default .top_panel_title,
.top_panel_default .top_panel_title a,
.top_panel_default .menu_main_nav > li > a {
  color: #1d1d1d !important;
  transition: all 0.3s ease;
}

.top_panel_default .menu_main_nav > li > a:hover,
.top_panel_default .menu_main_nav > li.current-menu-item > a,
.top_panel_default .menu_main_nav > li.current-menu-parent > a {
  color: var(--color-primary-dark) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-bottom: 2px solid var(--color-primary) !important;
}

.top_panel_default .menu_main_nav > li > ul {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.top_panel_default .menu_main_nav > li > ul > li > a {
  color: #1d1d1d !important;
}

.top_panel_default .menu_main_nav > li > ul > li > a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--color-primary-dark) !important;
}

/* Mobile menu button */
.sc_layouts_menu_mobile_button {
  color: var(--color-primary-dark) !important;
  border-color: var(--color-primary) !important;
}

.sc_layouts_menu_mobile_button:hover {
  background: var(--color-primary) !important;
  color: var(--color-text-white) !important;
}

/* ============================================
   3. FORMS & INPUTS
   ============================================ */

input[type=text],
input[type=number],
input[type=email],
input[type=url],
input[type=tel],
input[type=password],
input[type=search],
select,
textarea,
textarea.wp-editor-area {
  background: var(--color-bg-white) !important;
  color: var(--color-text) !important;
  border-bottom: 2px solid var(--color-primary) !important;
  transition: all 0.3s ease;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus {
  background: var(--color-bg-light) !important;
  border-bottom: 2px solid var(--color-primary-dark) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05) !important;
}

/* ============================================
   4. LINKS & ACCENTS
   ============================================ */

a {
  color: var(--color-accent) !important;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary) !important;
  text-decoration: underline;
}

/* Dark background sections */
.post_layout_excerpt.first_big .post_title a,
.front_page_section h1 a,
.front_page_section h2 a,
.front_page_section h3 a {
  color: #ffffff !important;
}

.post_layout_excerpt.first_big .post_title a:hover,
.front_page_section h1 a:hover,
.front_page_section h2 a:hover,
.front_page_section h3 a:hover {
  color: #dddddd !important;
  text-decoration: underline !important;
}

/* ============================================
   5. CARDS & CONTAINERS
   ============================================ */

.post_item,
.post_container {
  background: var(--color-bg-white) !important;
  border: 2px solid var(--color-border) !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
}

.post_item:hover {
  border: 2px solid var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.post_featured_bg {
  border: 2px solid var(--color-border) !important;
}

/* ============================================
   6. HERO SECTIONS & OVERLAYS
   ============================================ */

.mask,
.hover_simple:hover .mask,
.post_layout_excerpt.first_big .mask,
.post_layout_excerpt.first_big .hover_simple:hover .mask {
  opacity: 0.85;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.15) 100%) !important;
}

.front_page_section_title_wrap,
.post_featured .mask {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 100%) !important;
}

/* ============================================
   7. FOOTER
   ============================================ */

.footer {
  background: linear-gradient(90deg, #000000 0%, #1a1a1a 100%) !important;
  color: var(--color-text-white) !important;
  border-top: 2px solid var(--color-primary) !important;
}

.footer a {
  color: #cccccc !important;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.footer_copyright {
  background: linear-gradient(90deg, #000000 0%, #0f0f0f 100%) !important;
  color: var(--color-text-white) !important;
  border-top: 1px solid var(--color-primary) !important;
}

/* ============================================
   8. SIDEBAR & WIDGETS
   ============================================ */

.sidebar {
  background: var(--color-bg-white) !important;
}

.widget {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: 30px !important;
  margin-bottom: 30px !important;
}

.widget:last-child {
  border-bottom: none !important;
}

.widget_title,
.widget h3 {
  color: var(--color-primary-dark) !important;
  border-bottom: 2px solid var(--color-primary) !important;
  padding-bottom: 12px !important;
  font-weight: 700;
}

/* ============================================
   9. SEARCH & PAGINATION
   ============================================ */

.pagination {
  text-align: center !important;
}

.pagination a,
.pagination span {
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg-white) !important;
  color: var(--color-text) !important;
  margin: 0 2px !important;
  transition: all 0.3s ease;
}

.pagination a:hover,
.pagination .current {
  background: var(--color-primary) !important;
  color: var(--color-text-white) !important;
  border: 1px solid var(--color-primary) !important;
}

/* ============================================
   10. COMMENTS SECTION
   ============================================ */

.comments_wrap {
  border-top: 2px solid var(--color-primary) !important;
}

.comment {
  border-left: 3px solid var(--color-primary) !important;
  background: var(--color-bg-light) !important;
  transition: all 0.3s ease;
}

.comment:hover {
  border-left: 3px solid var(--color-primary-dark) !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0%, transparent 100%);
}

.comment-reply-link {
  color: var(--color-primary) !important;
  border-bottom: 1px solid var(--color-primary) !important;
  transition: color 0.3s ease;
}

.comment-reply-link:hover {
  color: var(--color-primary-dark) !important;
}

/* ============================================
   11. ALERTS & NOTICES
   ============================================ */

.notice-info,
.notice-success,
.notice-warning,
.notice-error,
.notice.notice-error,
.notice.notice-success,
.notice.notice-warning,
.notice.notice-info {
  background: var(--color-bg-light) !important;
  border-left: 4px solid var(--color-primary) !important;
  color: var(--color-text) !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.notice-info a,
.notice-success a,
.notice-warning a,
.notice-error a {
  color: var(--color-primary) !important;
}

/* ============================================
   12. BLOCKQUOTES & CODE
   ============================================ */

blockquote {
  border-left: 4px solid var(--color-primary) !important;
  background: var(--color-bg-light) !important;
  color: var(--color-text) !important;
}

blockquote p {
  color: var(--color-text) !important;
}

code,
pre {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
  color: var(--color-primary-light) !important;
  border: 1px solid var(--color-primary) !important;
}

/* ============================================
   13. FRONT PAGE SECTIONS
   ============================================ */

.front_page_section {
  background: var(--color-bg-white) !important;
}

.front_page_section h1,
.front_page_section h2,
.front_page_section h3,
.front_page_section_caption {
  color: var(--color-primary-dark) !important;
}

.front_page_section p {
  color: var(--color-text) !important;
}

/* Dark section variations */
.front_page_section.dark,
.front_page_section.sc_layouts_row_type_dark {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
}

.front_page_section.dark h1,
.front_page_section.dark h2,
.front_page_section.dark h3,
.front_page_section.dark p {
  color: var(--color-text-white) !important;
}

.front_page_section.dark a {
  color: #cccccc !important;
}

/* ============================================
   14. SOCIAL MEDIA ELEMENTS
   ============================================ */

.social_item,
.social_link {
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

.social_item:hover,
.social_link:hover {
  background: var(--color-primary) !important;
  color: var(--color-text-white) !important;
  border: 2px solid var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   15. SPECIAL STYLING CLASSES
   ============================================ */

.bg-primary,
.bg-accent,
.bg-secondary {
  background: var(--color-primary) !important;
  color: var(--color-text-white) !important;
}

.info-box,
.box-info,
.message-box {
  background: var(--color-bg-light) !important;
  border-left: 4px solid var(--color-primary) !important;
  color: var(--color-text) !important;
}

.feature-list li {
  color: var(--color-text) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.feature-list li:before {
  color: var(--color-primary) !important;
}

/* ============================================
   16. ANIMATIONS & TRANSITIONS (PRESERVED)
   ============================================ */

.fade-in {
  animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Smooth transitions on all interactive elements */
button,
a,
.sc_button,
input[type=submit],
.post_item,
.comment {
  transition: all 0.3s ease !important;
}

/* ============================================
   17. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  button,
  input[type=button],
  .sc_button {
    border-width: 2px !important;
    padding: 12px 20px !important;
  }

  .top_panel_default {
    border-bottom: 1px solid var(--color-border) !important;
    padding: 10px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Logo full-width on mobile */
  .sc_layouts_logo {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 70px !important;
    padding: 6px 0 !important;
    justify-content: flex-start !important;
  }

  .sc_layouts_logo img,
  .logo_png_image {
    max-height: 70px !important;
  }

  /* Header columns stack vertically */
  .top_panel_navi .columns_wrap {
    flex-direction: column !important;
  }

  .top_panel_navi .column-1_4,
  .top_panel_navi .column-3_4 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hamburger menu always visible on mobile */
  .sc_layouts_menu_mobile_button {
    display: flex !important;
  }

  .pagination a,
  .pagination span {
    border: 1px solid var(--color-border) !important;
    padding: 8px 10px;
  }

  /* Content padding on mobile */
  .content_wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Single video mobile */
  .sv-title { font-size: 20px !important; }
  .sv-grid { grid-template-columns: 1fr !important; }
  .sv-sidebar { position: static !important; }
  .sv-info-card,
  .sv-comments-section { padding: 16px !important; }

  /* Front page mobile */
  .hero-headline { font-size: 28px !important; }
  .hero-section { padding: 60px 16px !important; }
  .section-title { font-size: 26px !important; }
  .films-grid { grid-template-columns: 1fr !important; }
  .benefits-grid { grid-template-columns: 1fr !important; }
  .categories-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .journey-steps { grid-template-columns: repeat(2, 1fr) !important; }
  .cta-section h2 { font-size: 26px !important; }
}

/* ============================================
   HOW TO CUSTOMIZE COLORS
   ============================================
   Edit the :root section at the top of this file:
   
   --color-primary: #7c3aed;      (Change purple)
   --color-secondary: #000000;    (Change black)
   --color-primary-dark: #6d28d9; (Darker purple)
   
   All colors will update automatically!
   
   Popular purple alternatives:
   - #6366f1 (Indigo)
   - #8b5cf6 (Violet)
   - #a78bfa (Lighter Purple)
   - #5b21b6 (Darker Purple)
   - #9333ea (Bold Purple)
*/