/*
 * Grammar Shared Styles - Common for All Grammar Topics
 * Path: E:\OneDrive\CODING\APPS\Ultracirculum_Hub\ultracirculum.cloud\grammarindex\grammar\shared\shared.css
 * 
 * This file contains styles shared across all 68 grammar topics
 */

:root {
  /* Base Theme Colors */
  --primary: #40c4ff;
  --background: #00000F;
  --surface: rgba(15, 15, 40, 0.3);
  --on-surface: #e0e0e0;
  --grey: #b3c2cc;
  --card-radius: 8px;
  --shadow: 0 4px 12px rgba(64, 196, 255, 0.075), 0 2px 6px rgba(0, 0, 0, 0.2);
  --blur: blur(4px);
  --border-color: rgba(64, 196, 255, 0.2);
  
  /* Layout - Perfect 20px consistency */
  --container-gap: 20px;
  --top-margin: 20px;
  --container-max-width: 840px; /* 25% narrower - was 1120px, now 840px */
  --standard-spacing: 20px;
  
  /* Grammar Colors - Direct word coloring */
  --correct: rgba(176, 229, 124, 1);     /* Green - correct words */
  --incorrect: rgba(255, 136, 136, 1);   /* Red - incorrect words */
  --neutral: rgba(224, 224, 224, 1);     /* White - neutral words */
  --indefinite: rgba(187, 134, 252, 1);  /* Purple - a/an */
  --definite: rgba(0, 230, 118, 1);      /* Green - the */
  --not: rgba(255, 23, 68, 1);           /* Red - "not" word */
  
  /* Category Colors - From reference table */
  --tenses-primary: #ff6b35;              /* Orange-Red - Tenses category */
  --advanced-primary: #6200ea;            /* Deep Purple - Advanced Grammar category */
  --modal-verbs-primary: #00bcd4;         /* Teal - Modal Verbs category */
  --nouns-articles-primary: #2196f3;      /* Blue - Nouns & Articles category */
  --vocabulary-primary: #4caf50;          /* Green - Vocabulary & Expression category */
  --communication-primary: #e91e63;       /* Pink - Communication & Style category */
  --conditionals-primary: #ffc107;        /* Amber - Conditionals category */

  /* Part of Speech Colors - Complete System */
  --verb: #bb86fc;
  --aux: #ffe066;
  --modal: #d1caff;
  --not: #ff1744;
  --neg: #ff8888;
  --pronoun: #ffb3c0;
  --noun: #40c4ff;
  --time: #b6a4f7;
  --adjective: #00e676;
  --adverb: #ffb066;
  --preposition: #b6a4f7;
  --conjunction: #ffe066;
  --article: #bb86fc;
  --suffix: #00e676;
  --question: #ffe066;
}

/* Base Layout */
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: var(--background);
  color: var(--on-surface);
  font-size: 15px;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Animated Backgrounds - SHARED for all 68 grammar topics */
.stars, .fireflies, .fireflies-front {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  display: block;
  z-index: 0; /* Behind content */
}

.fireflies { 
  z-index: 1; /* Middle layer */
}

.fireflies-front { 
  z-index: 2; /* Front layer - but still behind content */
}

/* Container System */
.container {
  min-height: 100vh;
  position: relative;
  z-index: 10; /* Above background animations */
}

.navigation-wrap {
  max-width: var(--container-max-width);
  width: 100%;
  margin: var(--standard-spacing) auto;
  padding: 0 var(--standard-spacing);
  display: flex;
  flex-direction: column;
  gap: var(--standard-spacing);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* Navigation Header - SHARED for all 68 grammar topics */
.top-navigation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--standard-spacing);
  margin: 0;
  background: rgba(3, 7, 18, 0.2); /* 20% transparency standard */
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}

/* Navigation Links - Auto-generated content */
.top-navigation-header a:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(64, 196, 255, 0.1);
  border: 1px solid rgba(64, 196, 255, 0.3);
  border-radius: var(--card-radius);
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  height: 36px;
  box-sizing: border-box;
}

.top-navigation-header a:first-child::before {
  content: '';
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15' stroke='%2340c4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.top-navigation-header a:first-child::after {
  content: 'Hub';
}

.top-navigation-header a:last-child {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(64, 196, 255, 0.1);
  border: 1px solid rgba(64, 196, 255, 0.3);
  border-radius: var(--card-radius);
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  height: 36px;
  box-sizing: border-box;
  margin-left: 10px;
}

.top-navigation-header a:last-child::after {
  content: 'Subjects';
}

.top-navigation-header a:hover {
  background: rgba(var(--category-primary-rgb, 64, 196, 255), 0.2);
  border-color: var(--category-primary, var(--primary));
  color: var(--category-primary, var(--primary));
  transform: translateX(-2px);
}

/* Remove old nav styles */
.nav-actions {
  display: none;
}

.home-btn {
  display: none;
}

.grammar-subjects-btn {
  display: none;
}

.home-icon {
  display: none;
}

/* Header Section - SHARED for all 68 grammar topics */
.header-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--standard-spacing);
  margin: 0;
  min-height: 80px; /* Ensure header has minimum height */
  background: rgba(3, 7, 18, 0.2); /* 20% transparency standard */
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}

/* Logo Container - SHARED for all 68 grammar topics */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0; /* No gap - only logo */
  width: 100%;
  min-height: 40px; /* Ensure container has minimum height */
}

.main-title-image {
  max-width: 320px; /* Limit maximum width */
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  opacity: 1; /* Ensure visibility */
  z-index: 1;
  /* 
   * SHARED LOGO: This logo is used across all 68 grammar topics
   * Path: ../../../icons/gri_title.png (relative to grammar/[topic]/)
   * All topic HTML files should use: <img src="../../../icons/gri_title.png" class="main-title-image">
   */
}

/* Hide custom titles and subtitles - STANDARDIZATION */
.main-title {
  display: none !important;
}

.subtitle {
  display: none !important;
}

/* Section Title - Future-proof for long titles */
.section-title {
  font-size: 1.6em; /* Exactly 18pt - 24px / 15px base = 1.6em */
  font-weight: 700;
  color: var(--category-primary); /* Uses topic-specific category color */
  margin: 0; /* No margin - spacing controlled by main-content gap */
  padding: 12px 20px; /* More padding for better spacing */
  text-align: center;
  letter-spacing: .03em;
  line-height: 1.3; /* Better line spacing for multi-line */
  min-height: 2.4em; /* Accommodate up to 2 lines */
  display: flex;
  align-items: center;
  justify-content: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  background: rgba(3, 7, 18, 0.2); /* 20% transparency standard */
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: var(--shadow);
}

/* Content Blocks */
.info-block {
  display: flex;
  flex-direction: column;
  background: rgba(3, 7, 18, 0.2); /* 20% transparency standard */
  border-radius: var(--card-radius);
  padding: var(--standard-spacing);
  margin-bottom: 0; /* Removed - spacing now controlled by main-content gap */
  border: 1px solid var(--border-color);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: var(--shadow);
  box-sizing: border-box;
  max-width: 100%; /* Prevent overflow */
}

/* Main Content Container */
.main-content {
  display: flex;
  flex-direction: column;
  gap: var(--standard-spacing);
  margin-bottom: 0; /* Reduce footer top spacing by using no bottom margin */
}

.info-label {
  color: #ffb066;
  font-weight: 700;
  font-size: 1em;
  margin-bottom: 5px;
}

.info-label::before {
  content: "📝 ";
}

.info-content {
  width: 100%;
  color: var(--grey);
  font-weight: 400;
  font-size: 1em;
  font-family: Arial, sans-serif;
  line-height: 1.6; /* Better text readability */
  text-align: left;
  max-width: 100%; /* Prevent overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Part of Speech Classes */
.verb { color: var(--verb); font-weight: 400; }
.aux { color: var(--aux); font-weight: 400; }
.modal { color: var(--modal); font-weight: 400; }
.not { color: var(--not); font-weight: 400; }           /* Red "not" word */
.neg { color: var(--neg); font-weight: 400; }
.pronoun { color: var(--pronoun); font-weight: 400; }
.noun { color: var(--noun); font-weight: 400; }
.time { color: var(--time); font-weight: 400; }
.adjective { color: var(--adjective); font-weight: 400; }
.adverb { color: var(--adverb); font-weight: 400; }
.preposition { color: var(--preposition); font-weight: 400; }
.conjunction { color: var(--conjunction); font-weight: 400; }
.article { color: var(--article); font-weight: 400; }
.suffix { color: var(--suffix); font-weight: 400; }
.question { color: var(--question); font-weight: 400; }

/* Grammar Specific Classes */
.correct { color: var(--correct); font-weight: 400; }     /* Green correct words */
.incorrect { color: var(--incorrect); font-weight: 400; } /* Red incorrect words */
.indefinite { color: var(--indefinite); font-weight: 400; } /* Purple a/an */
.definite { color: var(--definite); font-weight: 400; }   /* Green the */

/* Footer */
.footer-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  background: rgba(3, 7, 18, 0.2);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.copyright {
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  margin: 0;
  color: #fbbf24;
}

/* Responsive Design - Maintaining 20px consistency */
@media (max-width: 700px) {
  :root {
    --container-gap: var(--standard-spacing);
    --top-margin: var(--standard-spacing);
  }

  .navigation-wrap {
    padding: 0 var(--standard-spacing);
  }

  .top-navigation-header {
    padding: var(--standard-spacing);
  }

  .header-wrap {
    padding: var(--standard-spacing);
  }
  
  /* Mobile logo optimization: 25% smaller */
  .main-title-image {
    max-width: 240px; /* 320px * 0.75 = 240px */
  }

  /* Mobile navigation adjustments */
  .top-navigation-header a:first-child,
  .top-navigation-header a:last-child {
    padding: 6px 12px;
    font-size: 13px;
    gap: 6px;
    height: 32px;
  }
  
  .top-navigation-header a:first-child::before {
    width: 16px;
    height: 16px;
  }
  
  .top-navigation-header a:last-child {
    margin-left: 8px;
  }

  .footer-wrap {
    padding: 10px 0;
    margin-top: var(--standard-spacing); /* Fixed footer spacing to 20px */
  }
  
  /* Fix footer spacing issue */
  .main-content {
    margin-bottom: 0; /* Ensure no extra spacing */
  }

  .copyright {
    font-size: 0.75rem;
  }

  .info-block {
    font-size: 0.95em;
    padding: var(--standard-spacing);
  }

  /* Section title responsive adjustments */
  .section-title {
    font-size: 1.4em; /* 21px / 15px = 1.4em - smaller but still readable on mobile */
    padding: 10px 15px;
    min-height: 2.6em; /* Slightly more room on mobile for wrapping */
    line-height: 1.25;
  }
}

@media (max-width: 480px) {
  /* Mobile logo optimization: Further reduction for very small screens */
  .main-title-image {
    max-width: 180px; /* 240px * 0.75 = 180px for small mobile */
  }
  
  .copyright {
    font-size: 0.7rem;
  }
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.font-bold { font-weight: 700; }
.font-normal { font-weight: 400; }