/* === Base Styles === */
body {
    text-align: left;
    font-size: 1rem;      
    line-height: 1.6;     
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    text-align: left;
    line-height: 1.3;
}

p {
    font-size: 0.95rem;
    margin-bottom: 1em;
}

.breadcrumbs {
    font-size: 0.9em;
    margin-bottom: 1em;
}

.breadcrumbs a {
    text-decoration: none;
    color: #0000EE;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs span {
    color: #6c757d;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.column {
    flex: 1;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
    min-width: 0;
}

.column img {
    width: 100%;
    height: auto;
}

/* === Link Styling === */
a {
    color: #176BEF;
    text-decoration: none;
}

a:hover {
    color: #fa7d00;
    text-decoration: underline;
}

/* Sidebar links */
.sidebar a {
    color: #545454 !important;
    text-decoration: none;
}

.sidebar a:hover {
    color: #fa7d00 !important;
}

/* Text alignment helpers */
.justify-text {
    text-align: justify;
}

.justified-indent {
    text-align: justify;
    text-indent: 2em;
}

img {
    max-width: 100%;
    height: auto;
}

/* === MOBILE TEXT SIZE OVERRIDE === */
@media screen and (max-width: 768px) {
    html, body, * {
        font-size: 0.75rem !important;
    }
    
    /* Specific overrides for headings */
    h1, .h1 { font-size: 1rem !important; }
    h2, .h2 { font-size: 0.9rem !important; }
    h3, .h3 { font-size: 0.85rem !important; }
    
    /* Target common Quarto classes */
    .quarto-title, .title, .subtitle, 
    .quarto-section-identifier,
    .panel-tabset, .tab-content,
    .callout, .callout-body,
    .sidebar, .sidebar *,
    .content, .content *,
    p, li, td, th, span, div, a {
        font-size: 0.75rem !important;
    }
}