/* ==========================================================================
   Jingu Group English Template CSS Overrides
   Version: 1.0
   Date: 2026-01-24
   Purpose: English-specific typography and layout adaptations
   Usage: Load after custom.css in English template
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ENGLISH TYPOGRAPHY FOUNDATION
   -------------------------------------------------------------------------- */

/* Modern English font stack optimized for readability */
:root {
  /* Override Chinese font stack with modern English system fonts */
  --font-main-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                  "Noto Color Emoji";

  /* Numeric font remains consistent */
  --font-num-en: "Arial", "Helvetica Neue", sans-serif;
}

/* Apply English font stack to body and text elements */
body {
  font-family: var(--font-main-en);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Numeric elements */
.stock-item .value,
.stat-num,
.p-stat-item .num,
.global-en-title {
  font-family: var(--font-num-en);
}

/* --------------------------------------------------------------------------
   2. NAVIGATION BAR ADAPTATIONS (Prevent Line Breaks)
   -------------------------------------------------------------------------- */

/* Desktop navigation: prevent wrapping, adjust spacing for longer English text */
.navbar-nav .nav-item {
  margin-left: 15px;  /* Reduced from 20px */
  margin-right: 15px; /* Reduced from 20px */
}

.navbar-nav .nav-link {
  font-size: 14px;    /* Reduced from 16px for better density */
  font-weight: 500;
  padding: 10px 8px;  /* Added horizontal padding */
  white-space: nowrap; /* Critical: prevent line breaks */
  letter-spacing: 0.2px; /* Slight letter spacing for readability */
  word-break: break-word; /* Emergency break for extremely long words */
}

/* Navigation underline adjustment for smaller font */
.navbar-nav .nav-link::after {
  bottom: 6px;        /* Adjusted for smaller font */
  height: 2px;
}

/* Dropdown menu items */
.dropdown-item {
  font-size: 14px;
  padding: 8px 20px;
  white-space: normal; /* Allow wrapping in dropdown */
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   3. RESPONSIVE NAVIGATION ADJUSTMENTS
   -------------------------------------------------------------------------- */

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item {
    margin-left: 10px;
    margin-right: 10px;
  }

  .navbar-nav .nav-link {
    font-size: 13px;
    padding: 10px 6px;
  }

  /* Reduce header actions spacing */
  .header-actions {
    margin-left: 20px;
    padding-left: 20px;
  }
}

/* Mobile menu adjustments */
@media (max-width: 767px) {
  .navbar-nav .nav-link {
    font-size: 15px;
    padding: 12px 15px;
    white-space: normal; /* Allow wrapping in mobile menu */
    line-height: 1.4;
  }

  .navbar-nav .nav-item {
    margin-left: 0;
    margin-right: 0;
  }

  /* Mobile dropdown items */
  .dropdown-item {
    font-size: 14px;
    padding: 10px 25px;
  }
}

/* --------------------------------------------------------------------------
   4. BANNER & HEADLINE TYPOGRAPHY MICRO-ADJUSTMENTS
   -------------------------------------------------------------------------- */

/* Global section titles with responsive clamp() scaling */
.global-main-title {
  font-size: clamp(24px, 4vw, 36px) !important; /* Responsive scaling */
  line-height: 1.2;
  letter-spacing: -0.5px; /* Tighter for English */
  font-weight: 700;
  word-break: break-word; /* Emergency break for long titles */
}

/* Slogan/subtitle adjustments */
.global-slogan {
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.4;
  letter-spacing: 0.5px;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 8px;
  word-break: break-word; /* Emergency break for long slogans */
}

/* Homepage welcome title */
.profile-welcome h1 {
  font-size: clamp(28px, 5vw, 42px) !important;
  line-height: 1.1;
  letter-spacing: -0.5px;
  word-break: break-word; /* Emergency break for long welcome titles */
}

.profile-welcome p {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.5;
  margin-top: 12px;
}

/* Section headers */
.section-header h3,
.profile-section-title h3 {
  font-size: clamp(22px, 3.5vw, 32px) !important;
  line-height: 1.2;
  letter-spacing: -0.3px;
  word-break: break-word; /* Emergency break for long section titles */
}

/* --------------------------------------------------------------------------
   5. LIST ITEM OPTIMIZATIONS (Word Break & Line Height)
   -------------------------------------------------------------------------- */

/* Global layout list items */
.global-item {
  font-size: 14px; /* Reduced from 15px */
  line-height: 1.5; /* Increased from default */
  margin-bottom: 10px;
  padding-left: 18px;
  padding-right: 10px;

  /* Word break handling for long company names */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Manual breakpoints for critical long terms */
.global-item[data-target="south-america"],
.global-item[data-target="southeast-asia"] {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* News list items */
.news-list-item {
  line-height: 1.5;
  padding: 18px 0; /* Slightly reduced vertical padding */
}

.news-list-item .title {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 4px;
  overflow-wrap: break-word;
  word-break: break-word; /* Additional emergency break for news titles */
}

.news-list-item .desc {
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* News feature cards */
.news-feature-card .title {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 8px;
  overflow-wrap: break-word;
  word-break: break-word; /* Additional emergency break for feature titles */
}

.news-feature-card .desc {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   6. BUTTON TEXT ADAPTATIONS
   -------------------------------------------------------------------------- */

/* Banner buttons with proportional padding */
.btn-banner {
  font-size: 14px; /* Reduced from 15px */
  padding: 10px clamp(20px, 4vw, 35px); /* Responsive horizontal padding */
  font-weight: 500;
  letter-spacing: 0.3px;
  min-width: 120px; /* Ensure minimum clickable area */
}

/* Outline buttons */
.btn-outline-primary-custom {
  font-size: 14px;
  padding: 8px 25px;
  font-weight: 500;
}

/* Shortcut buttons */
.shortcut-btn {
  font-size: 13px;
  padding: 6px 20px;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   7. FORM & INPUT OPTIMIZATIONS
   -------------------------------------------------------------------------- */

/* Form labels and placeholders */
.form-group label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-control {
  font-size: 14px;
  padding: 10px 15px;
  line-height: 1.5;
}

.form-control::placeholder {
  font-size: 13px;
  color: #999;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   8. FOOTER TEXT ADJUSTMENTS
   -------------------------------------------------------------------------- */

.footer-title {
  font-size: 16px; /* Reduced from default */
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 0.3px;
}

.footer-nav-list li a {
  font-size: 14px;
  line-height: 1.6;
  padding: 4px 0;
}

.footer-info-list li span {
  font-size: 14px;
  line-height: 1.5;
}

.footer-qrcode-text {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   9. DATA DISPLAY & STATS OPTIMIZATION
   -------------------------------------------------------------------------- */

/* Stock ticker area */
.stock-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.stock-item .label {
  font-size: 13px;
  margin-right: 4px;
}

.stock-item .value {
  font-size: 16px;
  font-weight: 600;
}

/* Profile stats */
.p-stat-item .num {
  font-size: 32px; /* Reduced from larger size */
  line-height: 1;
  font-weight: 700;
}

.p-stat-item .desc {
  font-size: 14px;
  margin-top: 5px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   10. MAP & GEOGRAPHIC ELEMENTS
   -------------------------------------------------------------------------- */

.map-tooltip h5 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
}

.map-tooltip p {
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   11. PAGINATION & BREADCRUMBS
   -------------------------------------------------------------------------- */

/* Pagination */
.pagination .page-link {
  font-size: 14px;
  padding: 8px 15px;
  min-width: 60px;
  text-align: center;
}

/* Breadcrumb/position */
.position {
  font-size: 14px;
  color: #666;
}

.position a {
  font-size: 14px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE ADJUSTMENTS FOR LONG TEXT
   -------------------------------------------------------------------------- */

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
  /* Force single-line truncation for critical elements */
  .navbar-nav .nav-link {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  /* Allow two-line display for long content */
  .global-slogan,
  .profile-welcome p,
  .news-list-item .desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Compact list items */
  .global-item {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  /* Reduce button padding */
  .btn-banner {
    padding: 8px 20px;
    font-size: 13px;
  }
}

/* Small devices (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .global-main-title {
    font-size: clamp(22px, 3.5vw, 28px) !important;
  }

  .global-slogan {
    font-size: clamp(13px, 1.8vw, 15px);
  }

  .news-list-item .title {
    font-size: 15px;
  }
}

/* Extra extra small devices (phones, less than 320px) - Critical overflow prevention */
@media (max-width: 320px) {
  /* Force aggressive word breaking for navigation */
  .navbar-nav .nav-link {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    font-size: 13px !important;
    padding: 8px 6px !important;
  }

  /* Ensure titles break properly */
  .global-main-title,
  .profile-welcome h1,
  .section-header h3,
  .profile-section-title h3 {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(18px, 4vw, 24px) !important;
  }

  /* Adjust slogan and descriptive text */
  .global-slogan,
  .profile-welcome p {
    font-size: clamp(12px, 1.5vw, 14px) !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Compact list items further */
  .global-item {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    padding-left: 12px !important;
    padding-right: 6px !important;
  }

  /* Reduce button sizes */
  .btn-banner {
    padding: 6px 16px !important;
    font-size: 12px !important;
    min-width: 100px !important;
  }

  /* Ensure news titles don't overflow */
  .news-list-item .title,
  .news-feature-card .title {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-size: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   13. ACCESSIBILITY & READABILITY ENHANCEMENTS
   -------------------------------------------------------------------------- */

/* Improve contrast for better readability */
body {
  color: #333; /* Darker text for better contrast */
}

/* Link hover states */
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. PRINT OPTIMIZATIONS
   -------------------------------------------------------------------------- */

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    font-family: "Times New Roman", Times, serif;
  }

  .navbar,
  .footer-actions,
  .video-overlay,
  .carousel-controls {
    display: none !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  .btn-banner,
  .btn-outline-primary-custom {
    border: 1px solid #000 !important;
    background: none !important;
    color: #000 !important;
  }
}

/* --------------------------------------------------------------------------
   15. UTILITY CLASSES FOR ENGLISH CONTENT
   -------------------------------------------------------------------------- */

/* Text truncation utilities */
.text-truncate-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Word break utilities */
.break-word {
  overflow-wrap: break-word;
  word-break: break-word;
}

.break-all {
  word-break: break-all;
}

.break-keep {
  word-break: keep-all;
}

/* Letter spacing utilities */
.letter-tight {
  letter-spacing: -0.5px;
}

.letter-normal {
  letter-spacing: 0;
}

.letter-wide {
  letter-spacing: 0.5px;
}

.letter-wider {
  letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   END OF ENGLISH CSS OVERRIDES
   -------------------------------------------------------------------------- */

/*
   Implementation Notes:
   1. This file should be loaded AFTER custom.css in the English template
   2. Test thoroughly on mobile devices for overflow issues
   3. Verify font rendering across different operating systems
   4. Check contrast ratios meet WCAG AA standards
*/