/* ============================================================
   MOBILE RESPONSIVENESS — GLOBAL OVERHAUL
   NanoLMS Blog
   ============================================================
   ROOT-LEVEL FIX: All blog post content is raw HTML with inline
   styles (fixed widths, absolute positions, etc.) echoed from
   the database. This stylesheet forcefully constrains ALL inline-
   styled elements to the viewport on mobile while preserving
   desktop layout completely.
   
   Every rule is inside a @media query — desktop is untouched.
   ============================================================ */

/* ==========================================================
   TABLET & MOBILE — 991px and below
   Core structural fix for the content container
   ========================================================== */

@media screen and (max-width: 991px) {

  /* Remove the 600px cap that creates a narrow column */
  .blog-single .single-main-content {
    max-width: 100% !important;
    width: 100% !important;
  }

  .blog-single .single-sidebar {
    max-width: 100% !important;
  }

  .blog-single .rel-vid {
    max-width: 100% !important;
  }

} /* End 991px */


/* ==========================================================
   PRIMARY MOBILE FIX — 768px and below
   This is the main block that handles all content overflow
   ========================================================== */

@media screen and (max-width: 768px) {

  /* ----------------------------------------------------------
     GLOBAL OVERFLOW CONTAINMENT
     The #1 root cause: inline-styled elements with fixed widths
     set in the WordPress editor. We must override at EVERY 
     nesting level to prevent parent containers from constraining
     their children.
     ---------------------------------------------------------- */

  /* Force ALL elements inside post content to respect viewport */
  .post > *,
  .post div,
  .post span,
  .post section,
  .post article,
  .post aside,
  .post header,
  .post footer,
  .single-main-content .post *,
  #video-hold .post *,
  .resourcing .content > *,
  .resourcing .content div,
  .resourcing .content span {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Override inline width declarations on ALL elements inside post.
     Use width:100% to force elements to fill their parent container,
     combined with overriding parent fixed widths at every level. */
  .post div[style],
  .post section[style],
  .post span[style],
  .post figure[style],
  .post p[style],
  .post div[style] > div[style],
  .post div[style] > div[style] > div[style],
  .single-main-content div[style],
  .single-main-content section[style],
  .single-main-content span[style],
  .single-main-content div[style] > div[style],
  .single-main-content div[style] > div[style] > div[style],
  .resourcing .content div[style],
  .resourcing .content section[style] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    float: none !important;
  }

  /* Ensure the body and html don't scroll horizontally */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Main content containers — centered */
  .container,
  .blog-single #content .container,
  #content .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow-x: visible !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center post content */
  .blog-single .single-main-content,
  .single-main-content,
  #video-hold,
  .resourcing .content {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .blog-single .single-main-content .post {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }


  /* ----------------------------------------------------------
     TABLES — Responsive scroll wrapper approach
     The table renders at its natural width. A CSS-only scroll
     container prevents page overflow. Tables narrower than 
     the viewport will fill it; wider ones scroll.
     ---------------------------------------------------------- */

  /* The post container allows internal horizontal scroll */
  .post,
  .single-main-content .post,
  #video-hold .post {
    overflow-x: visible !important;
  }

  /* Responsive table wrapper (added by JS below) */
  .table-responsive-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0 !important;
    border-radius: 8px;
  }

  .table-responsive-wrapper table {
    margin: 0 !important;
  }

  /* Table itself — natural width, at minimum fills container */
  .post table,
  .single-main-content table,
  .resourcing .content table,
  #video-hold table {
    display: table !important;
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    margin: 20px 0 !important;
  }

  /* Table cells — proper wrapping and sizing */
  .post table th,
  .post table td,
  .single-main-content table th,
  .single-main-content table td,
  .resourcing .content table th,
  .resourcing .content table td {
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    vertical-align: top !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    /* Remove any inline width constraints on cells */
    width: auto !important;
    min-width: 0 !important;
  }

  .post table th,
  .single-main-content table th,
  .resourcing .content table th {
    font-weight: 700 !important;
  }


  /* ----------------------------------------------------------
     DARK CARDS / STYLED SECTIONS / CUSTOM BLOCKS
     Root cause: Inline styles with fixed pixel widths, 
     padding, and sometimes overflow:hidden that clips text.
     These are the dark-background info cards, stat boxes, etc.
     ---------------------------------------------------------- */

  /* Any div with a dark/colored background that has inline styles */
  .post div[style*="background"],
  .post div[style*="border-radius"],
  .post section[style*="background"],
  .single-main-content div[style*="background"],
  .single-main-content div[style*="border-radius"],
  .single-main-content section[style*="background"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    padding: 20px !important;
  }

  /* Text inside dark cards must wrap — NO hyphens/word-break */
  .post div[style*="background"] *,
  .post div[style*="border-radius"] *,
  .single-main-content div[style*="background"] *,
  .single-main-content div[style*="border-radius"] * {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Headings inside cards — scale down to fit viewport */
  .post div[style*="background"] h1,
  .post div[style*="background"] h2,
  .post div[style*="background"] h3,
  .post div[style*="background"] h4,
  .single-main-content div[style*="background"] h1,
  .single-main-content div[style*="background"] h2,
  .single-main-content div[style*="background"] h3,
  .single-main-content div[style*="background"] h4 {
    font-size: clamp(16px, 4.5vw, 28px) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    max-width: 100% !important;
  }

  /* Paragraphs inside dark cards — prevent text cut off */
  .post div[style*="background"] p,
  .post div[style*="background"] span,
  .post div[style*="background"] li,
  .single-main-content div[style*="background"] p,
  .single-main-content div[style*="background"] span,
  .single-main-content div[style*="background"] li {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    max-width: 100% !important;
    font-size: clamp(14px, 3.8vw, 18px) !important;
    line-height: 1.5 !important;
  }

  /* Stat/number boxes inside dark sections */
  .post div[style*="background"] div[style],
  .single-main-content div[style*="background"] div[style] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }


  /* ----------------------------------------------------------
     COMPARISON SECTIONS / MULTI-COLUMN BLOCKS
     Root cause: Side-by-side divs with inline flex or 
     inline-block and fixed widths. The "OLD WAY vs NEW WAY"
     comparison blocks and similar layouts.
     ---------------------------------------------------------- */

  /* Force ALL flex containers inside post to stack vertically.
     Match every possible inline style variation. */
  .post div[style*="display: flex"],
  .post div[style*="display:flex"],
  .post div[style*="display: grid"],
  .post div[style*="display:grid"],
  .post div[style*="flex-direction"],
  .post div[style*="column-gap"],
  .post div[style*="gap:"],
  .post div[style*="gap :"],
  .single-main-content div[style*="display: flex"],
  .single-main-content div[style*="display:flex"],
  .single-main-content div[style*="display: grid"],
  .single-main-content div[style*="display:grid"],
  .single-main-content div[style*="flex-direction"],
  .single-main-content div[style*="column-gap"],
  .single-main-content div[style*="gap:"],
  .single-main-content div[style*="gap :"] {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
  }

  /* Children of flex containers — full width, no fixed widths */
  .post div[style*="display: flex"] > *,
  .post div[style*="display:flex"] > *,
  .post div[style*="flex-direction"] > *,
  .post div[style*="column-gap"] > *,
  .post div[style*="gap:"] > *,
  .single-main-content div[style*="display: flex"] > *,
  .single-main-content div[style*="display:flex"] > *,
  .single-main-content div[style*="flex-direction"] > *,
  .single-main-content div[style*="column-gap"] > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Inline-block elements that sit side by side */
  .post div[style*="inline-block"],
  .post div[style*="inline-flex"],
  .post span[style*="inline-block"],
  .single-main-content div[style*="inline-block"],
  .single-main-content div[style*="inline-flex"],
  .single-main-content span[style*="inline-block"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* WordPress block columns */
  .post .wp-block-columns,
  .single-main-content .wp-block-columns,
  .resourcing .content .wp-block-columns {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .post .wp-block-column,
  .single-main-content .wp-block-column,
  .resourcing .content .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Two-column layouts using float */
  .post div[style*="float"],
  .single-main-content div[style*="float"] {
    float: none !important;
    width: 100% !important;
    margin: 12px 0 !important;
  }


  /* ----------------------------------------------------------
     IMAGES — Fluid, no crop, no overflow
     ---------------------------------------------------------- */

  .post img,
  .post img[style],
  .single-main-content img,
  .single-main-content img[style],
  .resourcing .content img,
  .resourcing .content img[style],
  #video-hold img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
  }

  /* Images with explicit width/height attributes */
  .post img[width],
  .post img[height],
  .single-main-content img[width],
  .single-main-content img[height] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Figure containers */
  .post figure,
  .post figure[style],
  .single-main-content figure,
  .single-main-content figure[style],
  .resourcing .content figure {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
    padding: 0 !important;
  }

  .post figcaption,
  .single-main-content figcaption {
    font-size: 13px !important;
    line-height: 1.4;
    text-align: center;
    padding: 8px 0;
  }

  /* WordPress alignment overrides */
  .post .alignleft,
  .post .alignright,
  .post .aligncenter,
  .post .wp-caption,
  .single-main-content .alignleft,
  .single-main-content .alignright,
  .single-main-content .aligncenter,
  .single-main-content .wp-caption {
    float: none !important;
    display: block !important;
    margin: 16px auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .post .wp-caption-text,
  .single-main-content .wp-caption-text {
    font-size: 13px !important;
    text-align: center;
  }


  /* ----------------------------------------------------------
     VIDEOS / IFRAMES / EMBEDS — Responsive wrappers
     ---------------------------------------------------------- */

  .post iframe,
  .post iframe[style],
  .single-main-content iframe,
  .single-main-content iframe[style],
  .resourcing .content iframe,
  #video-hold iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px;
    aspect-ratio: 16 / 9;
    border: none !important;
  }

  /* Video wrapper containers */
  .post .video,
  .post .videoWrapper,
  .post .wp-block-embed,
  .single-main-content .video,
  .single-main-content .videoWrapper,
  .resourcing .content .videoWrapper,
  .resourcing .content .video {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 20px 0 !important;
  }

  .post .video iframe,
  .post .videoWrapper iframe,
  .post .wp-block-embed iframe,
  .single-main-content .video iframe,
  .single-main-content .videoWrapper iframe,
  .resourcing .content .videoWrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    aspect-ratio: unset !important;
  }

  .wp-block-embed__wrapper {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .wp-block-embed__wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Embedded objects */
  .post object,
  .post embed,
  .post video,
  .single-main-content object,
  .single-main-content embed,
  .single-main-content video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Social embeds */
  .post .twitter-tweet,
  .post .instagram-media,
  .post .fb-post,
  .single-main-content .twitter-tweet,
  .single-main-content .instagram-media,
  .single-main-content .fb-post {
    max-width: 100% !important;
    width: 100% !important;
    margin: 20px auto !important;
  }


  /* ----------------------------------------------------------
     CODE BLOCKS — Readable, scrollable
     ---------------------------------------------------------- */

  .post pre,
  .post pre[style],
  .single-main-content pre,
  .resourcing .content pre {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 16px !important;
    margin: 20px 0 !important;
    border-radius: 8px;
    box-sizing: border-box !important;
  }

  .post code,
  .single-main-content code,
  .resourcing .content code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Inline code */
  .post code:not(pre code),
  .single-main-content code:not(pre code),
  .resourcing .content code:not(pre code) {
    padding: 2px 6px;
    border-radius: 4px;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 13px !important;
  }

  /* Charts / SVG / Canvas */
  .post canvas,
  .post svg:not(.nano-footer svg),
  .single-main-content canvas,
  .single-main-content svg,
  .resourcing .content canvas,
  .resourcing .content svg {
    max-width: 100% !important;
    height: auto !important;
  }


  /* ----------------------------------------------------------
     TYPOGRAPHY — Optimized for mobile readability
     ---------------------------------------------------------- */

  /* Post title */
  .post h1#title,
  .single-main-content h1#title {
    font-size: 26px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Content headings */
  .post h1,
  .single-main-content h1,
  .resourcing .content h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }

  .post h2,
  .single-main-content h2,
  .resourcing .content h2 {
    font-size: 21px !important;
    line-height: 1.3 !important;
    margin-bottom: 14px !important;
    margin-top: 32px !important;
  }

  .post h3,
  .single-main-content h3,
  .resourcing .content h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
    margin-top: 28px !important;
  }

  .post h4,
  .single-main-content h4,
  .resourcing .content h4 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  .post h5,
  .single-main-content h5,
  .resourcing .content h5 {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .post h6,
  .single-main-content h6,
  .resourcing .content h6 {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Paragraphs */
  .post p,
  .single-main-content p,
  .resourcing .content p,
  #video-hold p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* Lists */
  .post ul,
  .post ol,
  .single-main-content ul,
  .single-main-content ol,
  .resourcing .content ul,
  .resourcing .content ol {
    padding-left: 20px !important;
    margin-bottom: 20px !important;
    margin-left: 0 !important;
  }

  .post li,
  .single-main-content li,
  .resourcing .content li {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
  }

  .resourcing .content ul li {
    margin-left: 0 !important;
    padding-left: 25px !important;
  }

  /* Links — prevent overflow */
  .post a,
  .single-main-content a,
  .resourcing .content a {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Blockquotes */
  .post blockquote,
  .post blockquote[style],
  .single-main-content blockquote,
  .resourcing .content blockquote {
    margin: 24px 0 !important;
    padding: 20px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }


  /* ----------------------------------------------------------
     CALLOUT BOXES / HIGHLIGHTS / CTA BLOCKS
     ---------------------------------------------------------- */

  .resourcing .content .highlights,
  .resourcing .content .highlights[style] {
    padding: 20px !important;
    margin: 24px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .resourcing .content .template,
  .resourcing .content .template[style] {
    padding: 20px !important;
    margin: 24px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .resourcing .content .template img {
    width: 100% !important;
    height: auto !important;
  }

  .resourcing .content .cta,
  .resourcing .content .cta[style] {
    padding: 30px 16px !important;
    margin: 24px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .resourcing .content .cta .title {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  /* ----------------------------------------------------------
     NAVIGATION & UX — Touch targets, buttons
     ---------------------------------------------------------- */

  /* CTA buttons full width on mobile */
  .post .btn,
  .post a.btn,
  .single-main-content .btn,
  .resourcing .content .btn,
  .resourcing .content .btnpink {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 16px auto !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Related post cards — stack */
  .rel-vid .col-md-4,
  .rel-vid .col-sm-6,
  #for-rel-video {
    width: 100% !important;
    float: none !important;
    margin-bottom: 24px !important;
    padding: 0 8px !important;
  }

  .rel-vid .single img,
  .relatedBlog .blogitem img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
  }

  .rel-vid .single h5,
  .rel-vid h5#title,
  .relatedBlog .blogitem h5 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-top: 12px !important;
  }

  .rel-vid .head-design h3 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }


  /* ----------------------------------------------------------
     BLOG LISTING / CATEGORY PAGES
     ---------------------------------------------------------- */

  .articles .flex .blog {
    width: 100% !important;
    margin: 20px 0 !important;
  }

  .articles .flex .space {
    padding: 16px !important;
  }

  .articles .heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .blogslider .title {
    padding: 20px !important;
  }

  .blogslider .title a h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .main-page-content {
    flex-direction: column !important;
  }

  .main-page-content .tutorial_contents {
    height: auto !important;
    padding: 16px !important;
  }

  #demo {
    padding: 20px !important;
    width: 100% !important;
    top: 0 !important;
  }

  #demo .slide_head {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Subscribe/CTA forms */
  #subscribe form {
    padding: 0 16px !important;
  }

  #subscribe #subs {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  #subscribe #button {
    width: 100% !important;
    float: none !important;
  }

  .ctaFull .form-inline {
    flex-direction: column !important;
    gap: 8px;
    padding: 0 16px;
  }

  .ctaFull .form-inline .form-control {
    min-width: unset !important;
    width: 100% !important;
  }

  .ctaFull .form-inline button {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Pagination */
  .wp-pagenavi {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px;
    height: auto !important;
    padding: 20px 0 !important;
  }

  /* ----------------------------------------------------------
     AUTHOR SECTION
     The "About the Author" card at the bottom of posts has
     an oversized image. Need to constrain it.
     ---------------------------------------------------------- */

  .author {
    overflow: hidden;
  }

  .author p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* About the Author card — image constraint */
  .post div[style*="background"] img,
  .post div[style*="border-radius"] img,
  .single-main-content div[style*="background"] img,
  .single-main-content div[style*="border-radius"] img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Author bio cards — typically a rounded box with image + text */
  .post div[style*="border-radius"] {
    padding: 20px !important;
    text-align: center;
  }

  .post div[style*="border-radius"] img[style*="border-radius"],
  .single-main-content div[style*="border-radius"] img[style*="border-radius"] {
    max-width: 150px !important;
    max-height: 150px !important;
    margin: 0 auto 16px auto !important;
    display: block !important;
  }

  /* ----------------------------------------------------------
     GALLERIES
     ---------------------------------------------------------- */

  .post .gallery,
  .post .wp-block-gallery,
  .single-main-content .gallery,
  .single-main-content .wp-block-gallery {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .post .gallery .gallery-item,
  .post .wp-block-gallery .wp-block-image,
  .single-main-content .gallery .gallery-item,
  .single-main-content .wp-block-gallery .wp-block-image {
    width: 100% !important;
    margin: 0 !important;
  }

  /* ----------------------------------------------------------
     LAYOUT SHIFT PREVENTION
     ---------------------------------------------------------- */

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
  }

  .post img[loading="lazy"],
  .single-main-content img[loading="lazy"] {
    min-height: 50px;
    background: #f8f8f8;
  }

} /* End 768px */



/* ==========================================================
   SMALL MOBILE — 480px and below
   ========================================================== */

@media screen and (max-width: 480px) {

  /* Tighter padding */
  .blog-single .single-main-content .post,
  .resourcing .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Smaller typography */
  .post h1#title,
  .single-main-content h1#title {
    font-size: 22px !important;
    letter-spacing: -0.8px !important;
  }

  .post h2,
  .single-main-content h2,
  .resourcing .content h2 {
    font-size: 19px !important;
  }

  .post h3,
  .single-main-content h3,
  .resourcing .content h3 {
    font-size: 16px !important;
  }

  .post p,
  .single-main-content p,
  .resourcing .content p,
  #video-hold p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .post li,
  .single-main-content li,
  .resourcing .content li {
    font-size: 15px !important;
  }

  /* Tables smaller */
  .post table th,
  .post table td,
  .single-main-content table th,
  .single-main-content table td,
  .resourcing .content table th,
  .resourcing .content table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* Code blocks */
  .post pre,
  .single-main-content pre,
  .resourcing .content pre {
    padding: 12px !important;
    font-size: 12px !important;
  }

  /* Blockquotes */
  .post blockquote,
  .single-main-content blockquote,
  .resourcing .content blockquote {
    padding: 16px !important;
    font-size: 15px !important;
  }

  /* Dark card headings even smaller */
  .post div[style*="background"] h1,
  .post div[style*="background"] h2,
  .post div[style*="background"] h3,
  .single-main-content div[style*="background"] h1,
  .single-main-content div[style*="background"] h2,
  .single-main-content div[style*="background"] h3 {
    font-size: clamp(16px, 4.5vw, 26px) !important;
  }

  .post div[style*="background"] p,
  .post div[style*="background"] span,
  .single-main-content div[style*="background"] p,
  .single-main-content div[style*="background"] span {
    font-size: clamp(12px, 3.2vw, 16px) !important;
  }

  /* TOC */
  #tableofcontents {
    padding: 14px !important;
  }

  #tableofcontents h4 {
    font-size: 14px !important;
  }

  #tableofcontents .toc-item a {
    font-size: 12px !important;
  }

  /* Iframes */
  .post iframe,
  .single-main-content iframe {
    min-height: 180px;
  }

  /* CTA */
  .resourcing .content .cta {
    padding: 24px 12px !important;
  }

  .resourcing .content .cta .title {
    font-size: 16px !important;
  }

  .resourcing .content .highlights {
    padding: 16px !important;
  }

} /* End 480px */



/* ==========================================================
   EXTRA SMALL — 375px and below (iPhone SE, small Android)
   ========================================================== */

@media screen and (max-width: 375px) {

  .post h1#title,
  .single-main-content h1#title {
    font-size: 20px !important;
  }

  .post h2,
  .single-main-content h2,
  .resourcing .content h2 {
    font-size: 17px !important;
  }

  .post h3,
  .single-main-content h3,
  .resourcing .content h3 {
    font-size: 15px !important;
  }

  .post p,
  .single-main-content p,
  .resourcing .content p,
  #video-hold p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .post li,
  .single-main-content li,
  .resourcing .content li {
    font-size: 14px !important;
  }

  .post pre,
  .single-main-content pre {
    font-size: 11px !important;
    padding: 10px !important;
  }

  .post table th,
  .post table td,
  .single-main-content table th,
  .single-main-content table td {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  .blog-single .single-main-content .post,
  .resourcing .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

} /* End 375px */



/* ==========================================================
   MINIMUM — 320px (absolute smallest viewport)
   ========================================================== */

@media screen and (max-width: 320px) {

  .post h1#title,
  .single-main-content h1#title {
    font-size: 18px !important;
  }

  .post h2,
  .single-main-content h2 {
    font-size: 16px !important;
  }

  .post p,
  .single-main-content p,
  #video-hold p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .blog-single .single-main-content .post,
  .resourcing .content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .container,
  .blog-single #content .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #tableofcontents {
    padding: 10px !important;
  }

  #tableofcontents .toc-item a {
    font-size: 11px !important;
  }

  .nano-header-logo img {
    max-width: 90px !important;
  }

  .nano-btn-login,
  .nano-btn-signup {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

} /* End 320px */



/* ==========================================================
   TABLET — 769px to 991px
   ========================================================== */

@media screen and (min-width: 769px) and (max-width: 991px) {

  .articles .flex .blog {
    width: 48% !important;
  }

  .resourcing .content {
    width: 100% !important;
  }

  .resourcing .sidebar {
    width: 100% !important;
    margin-top: 30px;
  }

  .rel-vid .col-md-4 {
    width: 50% !important;
  }

  .post h1#title,
  .single-main-content h1#title {
    font-size: 32px !important;
    line-height: 1.25 !important;
  }

  .post h2,
  .single-main-content h2,
  .resourcing .content h2 {
    font-size: 25px !important;
  }

  .post h3,
  .single-main-content h3,
  .resourcing .content h3 {
    font-size: 21px !important;
  }

  .post p,
  .single-main-content p,
  .resourcing .content p {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  /* Tables still need wrapping text on tablet */
  .post table th,
  .post table td,
  .single-main-content table th,
  .single-main-content table td {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Dark cards */
  .post div[style*="background"],
  .single-main-content div[style*="background"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

} /* End tablet */



/* ==========================================================
   LANDSCAPE ORIENTATION — Mobile landscape
   ========================================================== */

@media screen and (max-width: 768px) and (orientation: landscape) {

  .blog-single #content {
    padding-top: 16px !important;
  }

  .post h1#title,
  .single-main-content h1#title {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  .post iframe,
  .single-main-content iframe {
    min-height: 200px;
  }

  #tableofcontents {
    max-height: 40vh !important;
    overflow-y: auto !important;
  }

  #feat-image-section .container #feat-img {
    height: 200px !important;
  }

  .nano-header {
    padding: 8px 16px !important;
  }

} /* End landscape */