/* Custom styles for Amazon Quick Suite Workshop */

/* Handle workshop-specific markdown syntax */

/* Convert ::alert[] syntax to styled boxes */
.md-typeset p:has(::alert) {
  background-color: rgba(255, 153, 0, 0.1);
  border-left: 4px solid #FF9900;
  padding: 1rem;
  border-radius: 4px;
  margin: 1.5rem 0;
}

/* Step indicators */
/* background: linear-gradient(90deg, #FF9900 0%, transparent 100%); */
  
.md-typeset h2[id^="step-"] {
  background: linear-gradient(90deg, #FF9900 30%, transparent 100%);
  padding: 0.8rem 1rem;
  border-radius: 4px;
  color: white;
  border-left: none;
}

/* Module overview boxes */
.md-typeset blockquote {
  border-left: 4px solid #0972D3;
  background-color: rgba(9, 114, 211, 0.05);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}

.md-typeset blockquote p strong:first-child {
  color: #0972D3;
  font-size: 1.1em;
}

/* Download links styling */
.md-typeset a[href$=".zip"],
.md-typeset a[href$=".pdf"] {
  display: inline-block;
  background-color: #FF9900;
  color: white !important;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s;
  margin: 0.5rem 0;
}

.md-typeset a[href$=".zip"]:hover,
.md-typeset a[href$=".pdf"]:hover {
  background-color: #EC7211;
  text-decoration: none;
}

.md-typeset a[href$=".zip"]:before {
  content: "📦 ";
}

.md-typeset a[href$=".pdf"]:before {
  content: "📄 ";
}

/* Prerequisites boxes */
.md-typeset h2#prerequisites + ul,
.md-typeset h2#prerequisites + p + ul {
  background-color: #F4F4F4;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  border-left: 4px solid #1D8102;
}

/* Learning objectives */
.md-typeset h2#learning-objectives + ul,
.md-typeset h2#learning-objectives + p + ul {
  background-color: rgba(9, 114, 211, 0.05);
  padding: 1rem 1.5rem;
  border-radius: 4px;
  border-left: 4px solid #0972D3;
}

/* GIF/Video indicators */
.md-typeset img[src*=".gif"] {
  border: 2px solid #FF9900;
  box-shadow: 0 4px 12px rgba(255, 153, 0, 0.2);
}

/* Navigation hints */
.md-typeset hr + p em {
  display: block;
  text-align: center;
  color: #545B64;
  font-style: italic;
  margin: 2rem 0;
  padding: 1rem;
  background-color: #FAFAFA;
  border-radius: 4px;
}

/* Code copy hint */
.md-typeset pre + p:has(em) {
  font-size: 0.85em;
  color: #545B64;
  font-style: italic;
  margin-top: -0.5rem;
}

/* Workshop materials section */
.md-typeset h1#workshop-materials + p {
  font-size: 1.1em;
  color: #545B64;
  margin-bottom: 2rem;
}

/* Copy button styling - override the existing orange styling */
.md-clipboard {
  color: #2563EB !important; /* Blue color */
}

.md-clipboard:hover {
  color: #1D4ED8 !important; /* Darker blue on hover */
}

/* Allow wider content and images */
.md-main__inner.md-grid {
  max-width: 90vw;
}

/* Image sizing utilities */
.md-typeset img {
  max-width: 100%;
  height: auto;
}

/* Small images */
.md-typeset img[alt*="small"] {
  max-width: 300px;
}

/* Inline images - appear in the middle of text */
.md-typeset img[alt*="inline"] {
  height: 1.5em;
  vertical-align: middle;
  display: inline;
  margin: 0 0.2em;
}

/* Inline images - medium */
.md-typeset img[alt*="inline-medium"] {
  height: 3em;
  vertical-align: middle;
  display: inline;
  margin: 0 0.2em;
}

/* Inline images - large */
.md-typeset img[alt*="inline-large"] {
  height: 5em;
  vertical-align: middle;
  display: inline;
  margin: 0 0.2em;
}

/* Medium images */
.md-typeset img[alt*="medium"] {
  max-width: 600px;
}

/* Large images (default behavior) */
.md-typeset img[alt*="large"] {
  max-width: 100%;
}

/* Specific size classes for more control */
.md-typeset img[alt*="200px"] { max-width: 200px; }
.md-typeset img[alt*="400px"] { max-width: 400px; }
.md-typeset img[alt*="800px"] { max-width: 800px; }

/* Center images */
.md-typeset img[alt*="center"] {
  display: block;
  margin: 0 auto;
}