/* ---------------------------------------------------------
   1. Load General Sans from Fontshare (woff2)
   2. Apply Inter to body
   3. Apply General Sans to all headings
   4. Force #052333 on every text node
   5. .tyler-small-light-text class for dark backgrounds (#FAF8F4)
   6. #blog-post-content – RESPONSIVE + NO PADDING ON DESKTOP
   --------------------------------------------------------- */

/* ---- General Sans (Fontshare) ---- */
@font-face {
    font-family: 'General Sans';
    src: url('https://cdn.fontshare.com/wf/6F5C4A1F-4B6C-4E2F-9F1D-8A7B9C3E2F1D/Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('https://cdn.fontshare.com/wf/6F5C4A1F-4B6C-4E2F-9F1D-8A7B9C3E2F1D/Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('https://cdn.fontshare.com/wf/6F5C4A1F-4B6C-4E2F-9F1D-8A7B9C3E2F1D/Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('https://cdn.fontshare.com/wf/6F5C4A1F-4B6C-4E2F-9F1D-8A7B9C3E2F1D/Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---- Base typography (default dark text) ---- */
html,
body {
    font-family: 'Inter', sans-serif;
    color: #052333 !important;
}

/* ---- Headings (default dark text) ---- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.wp-block-heading {
    font-family: 'General Sans', sans-serif !important;
    color: #052333 !important;
}

/* ---- Catch-all for any stray text (default dark) ---- */
*,
*::before,
*::after {
    color: #052333;
}

/* Links */
a {
    color: inherit;
    text-decoration: underline;
}
a:hover {
    opacity: 0.8;
}

/* ---------------------------------------------------------
   LIGHT TEXT CLASS FOR DARK BACKGROUNDS
   --------------------------------------------------------- */
.tyler-small-light-text,
.tyler-small-light-text * {
    color: #FAF8F4 !important;
}
.tyler-small-light-text h1,
.tyler-small-light-text h2,
.tyler-small-light-text h3,
.tyler-small-light-text h4,
.tyler-small-light-text h5,
.tyler-small-light-text h6,
.tyler-small-light-text .elementor-heading-title,
.tyler-small-light-text .wp-block-heading {
    font-family: 'General Sans', sans-serif !important;
    color: #FAF8F4 !important;
}
.tyler-small-light-text a {
    color: #FAF8F4 !important;
}
.tyler-small-light-text a:hover {
    opacity: 0.8;
}

/* ---------------------------------------------------------
   #blog-post-content – RESPONSIVE + NO PADDING ON DESKTOP
   --------------------------------------------------------- */
#blog-post-content {
    max-width: 720px;
    margin: 0;
    padding: 2rem 1.5rem;
    line-height: 1.75;
    font-size: 1.125rem;
}

/* Remove padding on desktop */
@media (min-width: 1024px) {
    #blog-post-content {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Larger screens */
@media (min-width: 1280px) {
    #blog-post-content {
        font-size: 1.25rem;
        line-height: 1.8;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    #blog-post-content {
        padding: 1.5rem 1rem;
        font-size: 1.0625rem;
    }
}

/* Paragraphs */
#blog-post-content p {
    margin-bottom: 1.75rem;
}

/* ---------------------------------------------------------
   HEADINGS – DEFAULT SIZES (DESKTOP)
   --------------------------------------------------------- */
#blog-post-content h1 { font-size: 2.5rem;   }   /* 40px */
#blog-post-content h2 { font-size: 2rem;     }   /* 32px */
#blog-post-content h3 { font-size: 1.75rem;  }   /* 28px */
#blog-post-content h4 { font-size: 1.5rem;   }   /* 24px */
#blog-post-content h5 { font-size: 1.25rem;  }   /* 20px */
#blog-post-content h6 { font-size: 1.125rem; }   /* 18px */

/* Shared heading styles */
#blog-post-content h1,
#blog-post-content h2,
#blog-post-content h3,
#blog-post-content h4,
#blog-post-content h5,
#blog-post-content h6 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    font-weight: 600;
}

/* ---------------------------------------------------------
   MOBILE: SMALLER HEADINGS (≤767px)
   --------------------------------------------------------- */
@media (max-width: 767px) {
    #blog-post-content h1 { font-size: 2rem;     } /* 32px */
    #blog-post-content h2 { font-size: 1.75rem;  } /* 28px */
    #blog-post-content h3 { font-size: 1.5rem;   } /* 24px */
    #blog-post-content h4 { font-size: 1.375rem; } /* 22px */
    #blog-post-content h5 { font-size: 1.25rem;  } /* 20px */
    #blog-post-content h6 { font-size: 1.125rem; } /* 18px */
}

/* Tablet tweak (optional – keeps h1/h2 readable) */
@media (min-width: 768px) and (max-width: 1023px) {
    #blog-post-content h1 { font-size: 2.25rem; }
    #blog-post-content h2 { font-size: 1.875rem; }
}

/* Lists */
#blog-post-content ul,
#blog-post-content ol {
    margin-bottom: 1.75rem;
    padding-left: 1.5rem;
}
#blog-post-content li {
    margin-bottom: 0.5rem;
}

/* Blockquote */
#blog-post-content blockquote {
    margin: 2rem 0;
    padding-left: 1.5rem;
    border-left: 4px solid #052333;
    font-style: italic;
}

/* Images */
#blog-post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem 0;
    border-radius: 8px;
}

/* Dark mode override */
.tyler-small-light-text #blog-post-content,
.tyler-small-light-text #blog-post-content * {
    color: #FAF8F4 !important;
}
.tyler-small-light-text #blog-post-content blockquote {
    border-left-color: #FAF8F4;
}