/* ===========================================================================
   Grinntec Custom Theme CSS
   ---------------------------------------------------------------------------
   - Modern, readable, and maintainable
   - Comments for clarity and future updates
   - Palette: navy, gold, white, off-white, light navy/grey
============================================================================= */

/* ----------------------------------------------------------------------------
   1. Global Box Sizing for Consistency
----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   2. Icon Styling (FontAwesome, Social, etc.)
----------------------------------------------------------------------------- */
.youtube {
  color: #EE0F0F !important;
}
.linkedin {
  color: #0A66C2 !important; /* LinkedIn Blue */
}
.github {
  color: #000000 !important; /* GitHub Black */
}

/* ----------------------------------------------------------------------------
   3. Heart Animation (For animated icons)
----------------------------------------------------------------------------- */
@keyframes heart {
  0%, 40%, 80%, 100% { transform: scale(1); }
  20%, 60% { transform: scale(1.15); }
}
.heart {
  animation: heart 1000ms ease-in-out infinite !important;
}

/* ----------------------------------------------------------------------------
   4. Certification Badge Styling
----------------------------------------------------------------------------- */
img.cert-badge {
  height: 72px !important;
  margin-bottom: 0.5rem !important;
  display: inline-block;
}

/* ----------------------------------------------------------------------------
   5. Responsive Card Grid Layout
----------------------------------------------------------------------------- */
.grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

/* ----------------------------------------------------------------------------
   6. Individual Card Styling
----------------------------------------------------------------------------- */
.card {
  text-align: center;
  background: #f9f9fb;
  border-radius: 8px;
  padding: 1rem;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(20,33,61,0.06);
  border: 1px solid #e1e4ea;
}
.card:hover { 
  transform: scale(1.05); 
  cursor: pointer; 
  background: #fffbe8;
  box-shadow: 0 4px 20px rgba(212,175,55,0.12);
}
.card img { margin-bottom: 0.5rem; }


/* ----------------------------------------------------------------------------
   8. Mermaid Diagram Clickable Styling
----------------------------------------------------------------------------- */
.mermaid-clickable {
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
.mermaid-clickable:hover { transform: scale(1.02); }
.mermaid-clickable:active {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: #fff; /* Matches main content */
  z-index: 9999;
  overflow: auto;
  padding: 1em;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* ----------------------------------------------------------------------------
   9. Main Content & Grid Adjustments
----------------------------------------------------------------------------- */
.md-main,
.md-main__inner {
  background: #fff !important; /* Clean white for readability */
}
.md-grid {
  max-width: initial;
  gap: 1.5rem;
}

/* ----------------------------------------------------------------------------
   10. Header, Footer, Navigation
----------------------------------------------------------------------------- */
.md-header, .md-footer {
  background: #14213d !important; /* Deep navy */
  color: #fff !important;
}
.md-footer {
  color: #bfa76f !important; /* Muted gold */
}
.md-nav__item--active > .md-nav__link {
  border-bottom: 2px solid #d4af37; /* Gold accent */
}

/* ----------------------------------------------------------------------------
   11. Typography, Headings, Accent Colors
----------------------------------------------------------------------------- */
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  color: #22223b; /* Dark grey for headings */
  font-family: 'Montserrat', 'IBM Plex Sans', 'Inter', sans-serif;
  letter-spacing: 0.5px;
}
.md-typeset a, .md-button {
  color: #d4af37 !important; /* Gold accent */
  border-color: #d4af37 !important;
}
.md-typeset .twemoji,
.md-typeset .icon {
  color: #222 !important;
  font-size: 2em !important;
}

/* ----------------------------------------------------------------------------
   12. Buttons & Social Buttons
----------------------------------------------------------------------------- */
.md-button {
  background: #fff;
  border: 2px solid #d4af37;
  color: #22223b !important;
  transition: background 0.2s, box-shadow 0.2s;
}
.md-button:hover {
  background: #fffbe8; /* Subtle gold tint on hover */
  box-shadow: 0 2px 8px rgba(212,175,55,0.10);
}

/* ----------------------------------------------------------------------------
   13. Cards & Boxes (Material Typeset)
----------------------------------------------------------------------------- */
.md-typeset .card, .md-typeset .box {
  background: #f9f9fb;
  border: 1px solid #e1e4ea;
  box-shadow: 0 2px 8px rgba(20,33,61,0.06);
}
.md-typeset .card:hover, .md-typeset .md-button:hover {
  background: #fffbe8;
  box-shadow: 0 4px 20px rgba(212,175,55,0.12);
}

/* ----------------------------------------------------------------------------
   14. Explorer Grid
----------------------------------------------------------------------------- */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; /* space between buttons */
  margin-top: 1.5rem;
}

.explore-grid .md-button {
  display: block;
  text-align: center;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

.explore-grid .md-button span {
  font-size: 0.8em;
  color: #888;
}

.explore-grid .md-button ul {
  font-size: 0.8em;
  color: #888;
}

.explore-grid .md-button:hover {
  background: #fffbe8;
  box-shadow: 0 4px 20px rgba(212,175,55,0.12);
}

.explore-grid .md-button ul {
  list-style: none;
  padding-left: 0;
  margin: 0.2em 0 0 0;
}