/*!
 * CroFaktura - Main CSS File
 * Modular CSS architecture for better maintainability
 * All styles organized into logical components
 * 
 * This file imports all CSS modules in the correct order for proper cascading
 * Version: 1.0
 * Last updated: 2025-08-30
 */

/* === 1. CSS Custom Properties & Variables === */
@import url('variables.css');

/* === 2. Google Fonts === */
@import url('fonts.css');

/* === 3. WordPress Core Styles === */
@import url('wordpress.css');

/* === 4. Divi Theme Foundation === */
@import url('divi-theme.css');

/* === 5. Divi Page Builder === */
@import url('divi-builder.css');

/* === 6. Layout & Grid System === */
@import url('layout.css');

/* === 7. Components & Widgets === */
@import url('components.css');

/* === 8. Responsive Design === */
@import url('responsive.css');

/* === 9. Site-Specific Overrides === */

/* CroFaktura Brand Colors Override */
:root {
  --brand-primary: #2ea3f2;
  --brand-secondary: #7EBEC5; 
  --brand-accent: #82c0c7;
}

/* Override default link color with brand color */
a {
  color: var(--brand-primary);
}

a:hover {
  color: var(--brand-accent);
  transition: color 0.3s ease;
}

/* Brand-specific button styling */
.et_pb_button,
.wp-block-button__link,
.wp-element-button {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

.et_pb_button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* Ensure proper brand color consistency */
#et_search_icon:hover,
.et-social-icon a:hover,
.et_password_protected_form .et_submit_button,
.nav-single a,
.posted_in a {
  color: var(--brand-primary);
}

.et-search-form,
blockquote {
  border-color: var(--brand-primary);
}

/* Header and navigation brand colors */
.et_pb_bg_layout_light .et_pb_more_button {
  color: var(--brand-primary);
}

/* Responsive brand color adjustments */
@media (max-width: 980px) {
  .et_pb_bg_layout_light_tablet.et_pb_button,
  .et_pb_bg_layout_light_tablet.et_pb_module.et_pb_button,
  .et_pb_bg_layout_light_tablet .et_pb_more_button {
    color: var(--brand-primary);
  }

  .et_pb_module .et_pb_bg_layout_light_tablet.et_pb_button {
    color: var(--brand-primary) !important;
  }
}

@media (max-width: 767px) {
  .et_pb_bg_layout_light_phone.et_pb_button,
  .et_pb_bg_layout_light_phone.et_pb_module.et_pb_button,
  .et_pb_bg_layout_light_phone .et_pb_more_button {
    color: var(--brand-primary);
  }

  .et_pb_module .et_pb_bg_layout_light_phone.et_pb_button {
    color: var(--brand-primary) !important;
  }
}

/* === 10. Performance & Optimization === */

/* Smooth scrolling for modern browsers */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Optimize font loading */
@media (prefers-reduced-motion: no-preference) {
  * {
    font-display: swap;
  }
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .et_pb_button,
  .wp-block-button__link {
    border: 2px solid;
  }
}

/* Print optimization */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  .et_pb_section {
    page-break-inside: avoid;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
}

/* === 11. Site-Wide Utilities === */

/* Screen reader only text */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--brand-primary);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 3px;
  z-index: 100000;
}

.skip-link:focus {
  top: 6px;
}

/* === 12. Footer Mobile & Social Media Fixes === */

/* Fix footer mobile menu - always show navigation links */
@media (max-width: 980px) {
  /* Always show footer menu items on mobile */
  footer .et_pb_menu__menu,
  footer .et-menu-nav,
  footer .et-menu-nav ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Hide hamburger menu in footer */
  footer .et_mobile_nav_menu,
  footer .mobile_nav,
  footer .mobile_menu_bar {
    display: none !important;
  }
  
  /* Ensure footer menu links are properly styled */
  footer .et-menu-nav li {
    display: block !important;
    margin-bottom: 8px;
  }
  
  footer .et-menu-nav a {
    color: #ffffff !important;
    text-decoration: none;
    padding: 5px 0;
    display: block;
  }
  
  footer .et-menu-nav a:hover {
    color: var(--brand-accent, #82c0c7) !important;
  }
}

/* Fix LinkedIn icon visibility on dark background */
.et-social-linkedin a.icon:before {
  color: #0077b5 !important; /* LinkedIn blue color for visibility */
}

/* Set white background for LinkedIn icon */
.et-social-linkedin a.icon.et_pb_with_border,
footer .et-social-linkedin a.icon.et_pb_with_border,
.et_pb_social_media_follow .et-social-linkedin a.icon.et_pb_with_border {
  background-color: #ffffff !important;
  border: 1px solid #ddd !important;
}

/* Ensure all social media icons are visible on dark footer */
footer .et_pb_social_media_follow .et_pb_social_icon a.icon:before {
  color: #ffffff !important;
}

/* Social media icon hover states */
footer .et_pb_social_media_follow .et_pb_social_icon a.icon:hover:before {
  color: rgba(255, 255, 255, 0.8) !important;
}

/*
 * End of CroFaktura main.css
 * 
 * File structure summary:
 * - variables.css: CSS custom properties & brand colors
 * - fonts.css: Google Fonts (Open Sans family)
 * - wordpress.css: WordPress core block styles
 * - divi-theme.css: Divi theme base styles
 * - divi-builder.css: Page builder components
 * - layout.css: Grid system, sections, rows, columns
 * - components.css: Forms, buttons, widgets
 * - responsive.css: Mobile-first responsive design
 * - main.css: Imports all above + site-specific overrides
 */