/* ===== TYPOGRAPHY RULES - STRICT COMPLIANCE ===== */
/* All typography must use ONLY the specified fonts with exact specifications */
/* Follows CSS Guidelines for typography separation */

/* ===== GOOGLE FONTS IMPORTS ===== */
/* Ubuntu: 400 weight, oblique - for headings */
/* Montserrat: 100 weight for UI, 300 for body - for text */
/* Domine: 400 weight, normal style - for blockquotes */

/* Google Fonts are now loaded directly in HTML head for better performance */

/* ===== FONT FACE DECLARATIONS ===== */
/* Font faces are now loaded directly from Google Fonts CDN in HTML head */

/* ===== TYPOGRAPHY RULES - STRICT GUIDELINES COMPLIANCE ===== */
/* Only Ubuntu, Montserrat, and Domine fonts allowed - NO fallbacks */

/* ===== UBUNTU - PRIMARY HEADINGS ===== */
/* Ubuntu: 2.5rem h1, 2rem h2, 1.5rem h3 - font-weight 400, style oblique */
h1 {
    font-family: 'Ubuntu';
    font-size: 2.5rem;
    font-weight: 400;
    font-style: oblique;
    line-height: 1.2;
}

h2 {
    font-family: 'Ubuntu';
    font-size: 2rem;
    font-weight: 400;
    font-style: oblique;
    line-height: 1.2;
}

h3, h4, h5, h6 {
    font-family: 'Ubuntu';
    font-size: 1.5rem;
    font-weight: 400;
    font-style: oblique;
    line-height: 1.2;
}

/* ===== MONTSERRAT - UI ELEMENTS AND NAVIGATION ===== */
/* Montserrat: 1.25rem nav, 1.5rem subheaders, 1rem body - weight 300+ */
.navbar-nav .nav-link {
    font-family: 'Montserrat';
    font-size: 1.25rem;
    font-weight: 300;
    font-style: normal;
}

.btn {
    font-family: 'Montserrat';
    font-size: 1rem;
    font-weight: 300;
    font-style: normal;
}

.form-control {
    font-family: 'Montserrat';
    font-size: 1rem;
    font-weight: 300;
    font-style: normal;
}

.pagination .page-link {
    font-family: 'Montserrat';
    font-size: 1rem;
    font-weight: 100;
    font-style: normal;
}

footer h5 {
    font-family: 'Montserrat';
    font-size: 1.5rem;
    font-weight: 100;
    font-style: normal;
}

.search-result-item .result-title {
    font-family: 'Montserrat';
    font-size: 1rem;
    font-weight: 100;
    font-style: normal;
}

/* ===== MONTSERRAT - BODY TEXT ===== */
/* Montserrat: 1rem body text - weight 300 minimum for legibility */
#cont-p-home,
.text-content,
.content-text,
.main-content p,
.article-content p,
.blog-content p,
.portfolio-description p,
p {
    font-family: 'Montserrat';
    font-size: 1rem;
    font-weight: 300;
    font-style: normal;
    line-height: 1.6;
}

/* ===== DOMINE - LONG-FORM CONTENT ===== */
/* Domine: 2rem article headings, 1.125rem paragraphs, 0.875rem fine print - weight 400, normal */
blockquote, blockquote p, .blockquote, .blockquote-text {
    font-family: 'Domine';
    font-size: 1.125rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
}

/* Article headings in Domine */
.article-content h1,
.article-content h2,
.blog-content h1,
.blog-content h2 {
    font-family: 'Domine';
    font-size: 2rem;
    font-weight: 400;
    font-style: normal;
}

/* Fine print in Domine */
.fine-print,
.copyright,
.legal-text {
    font-family: 'Domine';
    font-size: 0.875rem;
    font-weight: 400;
    font-style: normal;
}

/* ===== MATHEMATICAL NOTATION ===== */
/* Ubuntu for mathematical notation - oblique style */
.math-formula,
.katex,
.mathjax,
mjx-chtml {
    font-family: 'Ubuntu';
    font-style: oblique;
    font-weight: 400;
}

/* ===== CODE COMMENTS ===== */
/* Ubuntu for code comments - oblique style */
.code-comment,
.comment-text {
    font-family: 'Ubuntu';
    font-style: oblique;
    font-weight: 400;
}

/* ===== SPECIFIC ELEMENT OVERRIDES ===== */
/* Force all text elements to use correct fonts - NO FALLBACKS */

/* UI Elements - Montserrat weight 300 for proper legibility */
.navbar-nav .nav-link,
.btn,
.form-control,
.pagination .page-link,
footer h5,
.search-result-item .result-title {
    font-family: 'Montserrat';
    font-weight: 300;
    font-style: normal;
}
#cont-p-home,
.text-content,
.content-text,
.main-content p,
.article-content p,
.blog-content p,
.portfolio-description p {
    font-family: 'Montserrat';
    font-weight: 300;
    font-style: normal;
}

/* Math formulas - use Ubuntu for mathematical notation */
.math-formula,
.katex,
.mathjax,
mjx-chtml {
    font-family: 'Ubuntu';
    font-style: oblique;
}

/* Code blocks - maintain monospace for code, but use Ubuntu for comments */
.code-comment,
.comment-text {
    font-family: 'Ubuntu';
    font-style: oblique;
    font-weight: 400;
}

/* ===== RESPONSIVE TYPOGRAPHY - MOBILE-FIRST APPROACH ===== */
/* Scale typography across breakpoints while maintaining font rules */

/* Mobile-first base (already defined above) */
/* h1: 2.5rem, h2: 2rem, h3: 1.5rem */

/* Small screens (576px+) */
@media (min-width: 576px) {
    h1 { font-size: 2.6rem; }
    h2 { font-size: 2.1rem; }
    h3, h4, h5, h6 { font-size: 1.6rem; }
    
    .navbar-nav .nav-link { font-size: 1.3rem; }
    footer h5 { font-size: 1.6rem; }
}

/* Medium screens (768px+) */
@media (min-width: 768px) {
    h1 { font-size: 2.7rem; }
    h2 { font-size: 2.2rem; }
    h3, h4, h5, h6 { font-size: 1.7rem; }
    
    .navbar-nav .nav-link { font-size: 1.35rem; }
    footer h5 { font-size: 1.7rem; }
}

/* Large screens (992px+) */
@media (min-width: 992px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.3rem; }
    h3, h4, h5, h6 { font-size: 1.8rem; }
    
    .navbar-nav .nav-link { font-size: 1.4rem; }
    footer h5 { font-size: 1.8rem; }
}

/* Extra large screens (1200px+) */
@media (min-width: 1200px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.5rem; }
    h3, h4, h5, h6 { font-size: 2rem; }
    
    .navbar-nav .nav-link { font-size: 1.5rem; }
    footer h5 { font-size: 2rem; }
}

/* Mobile adjustments for very small screens */
@media (max-width: 480px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3, h4, h5, h6 { font-size: 1.4rem; }
    
    .navbar-nav .nav-link { font-size: 1.1rem; }
    footer h5 { font-size: 1.4rem; }
    
    p, #cont-p-home {
        font-size: 0.9rem;
    }
    
    blockquote, blockquote p {
        font-size: 1rem;
    }
}

/* ===== ACCESSIBILITY OVERRIDES ===== */
/* Ensure typography remains correct in high contrast mode */
@media (prefers-contrast: high) {
    body {
        font-family: 'Montserrat';
        font-weight: 300;
        font-style: normal;
    }
    
    p, article, section, aside, main {
        font-family: 'Montserrat';
        font-weight: 300;
        font-style: normal;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Ubuntu';
        font-weight: 400;
        font-style: oblique;
    }

    blockquote, blockquote p {
        font-family: 'Domine';
        font-weight: 400;
        font-style: normal;
    }
}