/* Import Roboto and Mukta font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;700&display=swap');

/* Apply font globally */
body, h1, h2, h3, h4, h5, h6, p, a, button, table, blockquote {
    font-family: 'Mukta', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* global font bigger */
html, body {
  font-size: 20px;
}

/* General page styling */
body {
    background-color: #F4F7FB;
    color: #2E2F33;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* image align */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Sections */
section {
    border: 1px solid #D7DFEE;
    background-color: #FFFFFF;
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.05);
}

/* Headings */

h1 {
    color: #009F5F; 
    border-bottom: 0px solid #D7DFEE;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    text-align: center;
}

h2, h3 {
    color: #009F5F; 
    border-bottom: 2px solid #D7DFEE;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-top: 0;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.3em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 0.9em; }

h4, h5, h6 {
    color: #009F5F;
    border-bottom: 0;
    padding-bottom: 3px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Custom GA block */
.ga-logo-block,
.ga-logo-block a {
    color: #FFFFFF !important;
}
.ga-logo-block a:hover {
    color: #D7DFEE !important;
}

/* Remove the underline ONLY in this block */
.ga-logo-block .no-underline-h2 {
    border-bottom: none !important;
}

/* Links */
a {
    color: #009F5F;
    text-decoration: none;
}
a:hover {
    color: #005A36;
    text-decoration: underline;
}

/* Buttons */
button, .nav-button {
    background-color: #009F5F;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}
button:hover, .nav-button:hover {
    background-color: #005A36;
    transform: translateY(-2px);
}


/* Callout styling */
.callout {
  font-size: 1em;
  padding: 0.5em;
  background-color: #FFFFFF !important;
}

.callout * {
  background-color: #FFFFFF !important;
}

.callout .callout-body-container,
.callout .callout-body {
  font-size: 1.1rem !important;
}

.callout .callout-title-container,
.callout .callout-title-container .callout-title,
.callout .callout-title p {
  font-size: 1.1rem !important;
}


/* Borders per callout type */
.callout-note {
    border-left: 4px solid #009F5F;
}

.callout-tip {
    border-left: 4px solid #005A36;
}

.callout-warning,
.callout-caution {
    border-left: 4px solid #9E5600;
}

.callout-important {
    border-left: 4px solid #9E5600;
}



/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.05);
}
table th, table td {
    border: 1px solid #D7DFEE;
    padding: 10px;
    text-align: left;
}
table th {
    background-color: #E9EEFA;
    color: #009F5F;
}
table tr:nth-child(even) {
    background-color: #F4F7FB;
}
table tr:hover {
    background-color: #E9EEFA;
}

/* Blockquotes */
blockquote {
    border-left: 4px solid #009F5F;
    background: #E9EEFA;
    padding: 15px;
    margin: 20px 0;
    color: #2E2F33;
    font-style: italic;
}

/* Content boxes */
.content-box {
    background-color: #FFFFFF;
    border: 1px solid #D7DFEE;
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
}

/* Navigation container */
.page-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #D7DFEE;
}

.code-block-title, .quarto-code-title {
  display: block;
  color: #009F5F;
  background: #E9EEFA;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
  font-size: 1em;
}

.workshop-banner {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #9E5600;
  color: white;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  padding: 5px 20px;
  z-index: 9999;
}