/* ==========================================================================
   SANTODAIME.ORG — Mobile Responsive Overrides (sd-frontpage)
   Loaded AFTER template.css. Uses !important to override Artisteer's
   deeply nested fixed-width styles.
   
   Mobile layout order (top to bottom):
   1. Top bar (nav) — site description + search + hamburger
   2. Header banner image
   3. Content (main first, sidebars below)
   4. Footer
   ========================================================================== */

/* Hamburger button — hidden on desktop */
.art-hamburger-btn { display: none; }

/* === TABLET (≤1024px) === */
@media screen and (max-width: 1024px) {
   body { min-width: 0 !important; }
   .art-sheet { width: 100% !important; max-width: 100% !important; }
   .art-header-wrapper { width: 100% !important; max-width: 960px; }
   .art-nav-wrapper { width: 100% !important; max-width: 980px; }
   .art-footer-center { width: 100% !important; max-width: 960px; }
   .art-headerobject { left: 0 !important; margin-left: 0 !important; width: 100% !important; }
   .art-headerobject img { width: 100% !important; height: auto !important; }
}

/* ==========================================================================
   MOBILE (≤768px)
   ========================================================================== */
@media screen and (max-width: 768px) {

   /* ── Global resets ── */
   html, body {
      min-width: 0 !important;
      max-width: 100vw !important;
      overflow-x: hidden !important;
      width: auto !important;
      background-color: #ffffff !important;
      background-image: none !important;
   }
   #art-main {
      overflow-x: hidden !important;
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      background-color: #ffffff !important;
      background-image: none !important;
   }
   #art-page-background-glare { display: none !important; }
   #art-page-background-glare-wrapper {
      position: relative !important;
      background-color: #ffffff !important;
      background-image: none !important;
   }
   .reset-box { display: block !important; }
   table.position { table-layout: auto !important; width: 100% !important; }

   /* ── Reorder: DOM order is handled by JS, default order is used ── */

   /* ─────────────────────────────────────────────
      TOP BAR (nav bar becomes a top info bar)
      ───────────────────────────────────────────── */
    .art-nav {
       position: relative !important;
       min-height: 0 !important;
       width: 100% !important;
       margin: 0 !important;
       background: transparent !important;
       border: none !important;
       z-index: 10000 !important;
    }
    .art-nav::before, .art-nav::after { display: none !important; }
    .art-nav-outer {
       position: relative !important;
       width: 100% !important;
    }
    .art-nav-wrapper {
       width: 100% !important;
       margin: 0 !important;
       box-sizing: border-box !important;
    }
    .art-nav-inner {
       margin: 0 !important;
       padding: 12px 16px 20px 16px !important;
       position: fixed !important;
       top: 0 !important;
       left: 0 !important;
       width: 100% !important; /* full width */
       height: 100vh !important;
       z-index: 10000 !important;
       background: #1d324d !important;
       box-shadow: 2px 0 10px rgba(0,0,0,0.3) !important;
       transform: translateX(-100%) !important; /* start off-screen left */
       transition: transform 0.3s ease-in-out !important;
       display: block !important; /* always block, visible via transition */
       overflow-y: auto !important;
       box-sizing: border-box !important;
    }

   /* ── Top bar row: description text + hamburger on same line ── */
   /* extra1 = search, extra2 = description text */
   .art-hmenu-extra1 {
      display: block !important;
      float: none !important;
      width: 100% !important;
      height: auto !important;
      padding: 8px 56px 8px 12px !important;
      box-sizing: border-box !important;
      position: relative !important;
      background: #2d4a23 !important;
      color: #c8dcc0 !important;
      font-size: 11px !important;
      line-height: 1.4 !important;
      text-align: left !important;
   }
   .art-hmenu-extra1 h3,
   .art-hmenu-extra1 .art-blockheader {
      display: none !important;
   }
   /* Style the search input inside extra1 */
   .art-hmenu-extra1 input[type="text"],
   .art-hmenu-extra1 input.form-control,
   .art-hmenu-extra1 input.js-finder-search-query {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      padding: 6px 10px !important;
      font-size: 13px !important;
      height: auto !important;
      border: 1px solid rgba(255,255,255,0.3) !important;
      border-radius: 3px !important;
      background: rgba(255,255,255,0.15) !important;
      color: #fff !important;
   }
   .art-hmenu-extra1 input::placeholder {
      color: rgba(255,255,255,0.5) !important;
   }

   .art-hmenu-extra2 {
      display: block !important;
      float: none !important;
      width: 100% !important;
      height: auto !important;
      padding: 6px 12px !important;
      box-sizing: border-box !important;
      background: #3a5a2e !important;
      color: #c8dcc0 !important;
      font-size: 10px !important;
      line-height: 1.3 !important;
      text-align: center !important;
      letter-spacing: 0.3px !important;
   }
   .art-hmenu-extra2 h3 {
      display: none !important;
   }
   .art-hmenu-extra2 a {
      color: #c8dcc0 !important;
   }

   /* ── Hamburger button — inside top bar ── */
    .art-hamburger-btn {
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       position: absolute !important;
       right: 12px !important;
       top: 50% !important;
       transform: translateY(-50%) !important;
       z-index: 10001 !important;
       width: 30px !important;
       height: 30px !important;
       padding: 0 !important;
       background: rgba(29, 50, 77, 0.85) !important; /* semi-transparent theme blue */
       border: 1px solid rgba(255,255,255,0.3) !important;
       border-radius: 0 !important; /* square to match site's rectangular design */
       cursor: pointer !important;
       -webkit-appearance: none !important;
       appearance: none !important;
       box-sizing: border-box !important;
    }
    .art-hamburger-icon,
    .art-hamburger-icon::before,
    .art-hamburger-icon::after {
       display: block !important;
       width: 16px !important;
       height: 2px !important;
       background: #fff !important;
       border-radius: 0 !important;
       transition: all 0.3s ease !important;
    }
    .art-hamburger-icon { position: relative !important; }
    .art-hamburger-icon::before,
    .art-hamburger-icon::after {
       content: '' !important;
       position: absolute !important;
       left: 0 !important;
    }
    .art-hamburger-icon::before { top: -6px !important; }
    .art-hamburger-icon::after { top: 6px !important; }
   /* X animation */
   .art-hamburger-btn[aria-expanded="true"] .art-hamburger-icon { background: transparent !important; }
   .art-hamburger-btn[aria-expanded="true"] .art-hamburger-icon::before { top: 0 !important; transform: rotate(45deg) !important; }
   .art-hamburger-btn[aria-expanded="true"] .art-hamburger-icon::after { top: 0 !important; transform: rotate(-45deg) !important; }

    /* ── Menu — collapsed by default ── */
    .art-nav-inner .art-hmenu {
       display: block !important; /* always block inside drawer */
       float: none !important;
       width: 100% !important;
    }
    .art-nav-inner.nav-expanded {
       transform: translateX(0) !important; /* slide in from left */
    }

   /* ── Menu items ── */
   ul.art-hmenu {
      float: none !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
   }
   ul.art-hmenu li {
      float: none !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
   }
   ul.art-hmenu > li {
      border-bottom: 1px solid rgba(255,255,255,0.1) !important;
      position: relative !important;
   }
   ul.art-hmenu > li:last-child { border-bottom: none !important; }
   ul.art-hmenu > li > a {
      display: block !important;
      height: auto !important;
      min-height: 44px !important;
      line-height: 44px !important;
      padding: 0 15px !important;
      padding-right: 50px !important; /* make room for toggle arrow */
      text-align: left !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      color: rgba(255,255,255,0.9) !important;
      text-decoration: none !important;
      letter-spacing: 0.3px !important;
      text-transform: uppercase !important;
   }
   ul.art-hmenu > li > a:hover,
   ul.art-hmenu > li > a.active {
      background: rgba(255,255,255,0.08) !important;
      color: #fff !important;
   }
   ul.art-hmenu > li > a::before,
   ul.art-hmenu > li > a::after { display: none !important; }

    /* Submenus — visible when parent has class .submenu-open, indented */
    ul.art-hmenu ul {
       position: relative !important;
       visibility: hidden !important;
       display: none !important;
       padding: 4px 6px !important;
       margin: 0 !important;
       background: rgba(0,0,0,0.15) !important;
       list-style: none !important;
       width: 100% !important;
       left: 0 !important;
       border: none !important;
       box-shadow: none !important;
       box-sizing: border-box !important;
    }
    ul.art-hmenu li.submenu-open > ul {
       visibility: visible !important;
       display: block !important;
    }
    /* Keep nested (3rd-level) submenu boxes consistent */
    ul.art-hmenu ul ul {
       margin: 0 !important;
       padding: 4px 6px !important;
    }
    
    /* Submenu toggles */
    .art-submenu-toggle {
       position: absolute !important;
       right: 0 !important;
       top: 0 !important;
       width: 44px !important;
       height: 38px !important; /* matches menu link height */
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       cursor: pointer !important;
       color: rgba(255,255,255,0.7) !important;
       font-size: 11px !important;
       transition: transform 0.3s ease !important;
       z-index: 100 !important;
    }
    .submenu-open > .art-submenu-toggle {
       transform: rotate(180deg) !important;
       color: #fff !important;
    }

    /* Menu overlay backdrop styling */
    .art-menu-overlay {
       position: fixed !important;
       top: 0 !important;
       left: 0 !important;
       width: 100vw !important;
       height: 100vh !important;
       background: rgba(0,0,0,0.5) !important;
       z-index: 9999 !important;
       display: none !important;
       opacity: 0 !important;
       transition: opacity 0.3s ease !important;
    }
    .art-menu-overlay.active {
       display: block !important;
       opacity: 1 !important;
     }

      /* Close button inside full-width drawer */
      .art-drawer-close-btn {
         position: absolute !important;
         right: 12px !important;
         top: 12px !important;
         width: 38px !important;
         height: 38px !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
         background: transparent !important;
         border: none !important;
         color: rgba(255, 255, 255, 0.8) !important;
         font-size: 28px !important;
         line-height: 1 !important;
         cursor: pointer !important;
         padding: 0 !important;
         z-index: 10005 !important;
         transition: color 0.2s ease !important;
         -webkit-appearance: none !important;
         appearance: none !important;
      }
     .art-drawer-close-btn:hover, .art-drawer-close-btn:focus {
        color: #fff !important;
        outline: none !important;
     }

   ul.art-hmenu ul a {
      display: flex !important;
      align-items: center !important;
      padding: 4px 10px !important;
      min-height: 36px !important;
      line-height: 1.4 !important; /* allow multi-line wrap */
      white-space: normal !important; /* let long submenu labels wrap */
      word-break: break-word !important;
      font-size: 13px !important;
      color: rgba(255,255,255,0.8) !important;
      background: none !important;
      background-image: none !important;
      text-transform: none !important;
   }
   ul.art-hmenu ul a::before,
   ul.art-hmenu ul a::after { display: none !important; }

   /* ─────────────────────────────────────────────
      HEADER BANNER
      ───────────────────────────────────────────── */
   .art-header {
      height: auto !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
   }
   .art-header:after { display: none !important; }
   .art-header-position { position: relative !important; }
   .art-header-wrapper {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box !important;
   }
   .art-header-inner { margin: 0 !important; position: relative !important; overflow: hidden !important; }
   .art-headerobject {
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      overflow: hidden !important;
      background-color: #ffffff !important;
      z-index: 2 !important;
   }
   .art-headerobject img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
   }
   .art-headerobject iframe {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      border: 0 !important;
      aspect-ratio: 944 / 139 !important;
   }
   /* flor-jagube graphic is shifted right so the word "Daime" remains 100% clear and un-obscured */
   .art-header-inner .art-hmenu-extra2,
   .art-hmenu-extra2 {
      display: block !important;
      position: absolute !important;
      right: 0 !important;
      top: 50% !important;
      transform: translate(32%, -50%) !important;
      left: auto !important;
      width: auto !important;
      max-width: 55% !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      text-align: right !important;
      z-index: 10 !important;
      opacity: 1 !important;
      pointer-events: none !important;
   }
   .art-header-inner .art-hmenu-extra2 img {
      width: auto !important;
      max-width: 100% !important;
      height: auto !important;
      display: block !important;
   }
   .art-logo { display: none !important; }
   #art-flash-area, #art-flash-container {
      position: relative !important;
      width: 100% !important;
      height: auto !important;
      left: 0 !important;
      top: 0 !important;
   }

   /* ─────────────────────────────────────────────
      MAIN CONTENT SHEET
      ───────────────────────────────────────────── */
   .art-sheet {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      border: none !important;
      background-color: #ffffff !important;
      background-image: none !important;
   }
   .art-sheet::before, .art-sheet::after { display: none !important; }
   .art-sheet-body {
      padding: 12px !important;
      background-color: #ffffff !important;
      background-image: none !important;
   }
   .art-sheet-body::before, .art-sheet-body::after { display: none !important; }
   .art-post, .art-post-body, .art-postcontent, .art-content, .art-layout-cell, .art-article {
      background-color: #ffffff !important;
      background-image: none !important;
   }

   /* ── Layout — content first, sidebars below ── */
   .art-content-layout {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      table-layout: auto !important;
   }
   .art-content-layout-row {
      display: flex !important;
      flex-direction: column !important;
      height: auto !important;
      min-height: 0 !important;
   }
   .art-layout-cell {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      padding: 0 !important;
   }
   .art-content {
      order: 1 !important;
      height: auto !important;
      min-height: 0 !important;
   }
     .art-sidebar1 {
        display: none !important;
     }
    /* Tighten sidebar button/link modules — drop <br>-caused gaps and excess block padding */
    .art-sidebar1 br { display: none !important; }
    .art-sidebar1 a { display: block !important; }
    .art-sidebar1 img { margin: 0 auto !important; }
    .art-sidebar1 .art-block { margin: 0 !important; }
    .art-sidebar1 .art-blockcontent { padding: 0 !important; }
   .art-sidebar2 {
      order: 3 !important;
      height: auto !important;
      min-height: 0 !important;
      margin-top: 12px !important;
      padding: 8px 12px 8px 12px !important; /* symmetric top/bottom gap */
      border-top: 2px solid #e0e0e0 !important;
      box-sizing: border-box !important;
   }
   /* Tighten gaps between stacked blocks inside sidebars */
   .art-sidebar2 .art-block,
   .art-sidebar2 .art-vmenublock { margin: 0 0 10px 0 !important; }

   /* ── Blog columns — stack ── */
   .cols-2 .column-1, .cols-2 .column-2,
   .cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3 {
      float: none !important;
      width: 100% !important;
   }

   /* ── Module blocks ── */
   .art-block { max-width: 100% !important; margin: 0 0 15px 0 !important; }
   .art-post { max-width: 100% !important; }
   .art-vmenublock { max-width: 100% !important; margin: 0 0 15px 0 !important; }
   /* Allow long vmenu labels to wrap on mobile */
   ul.art-vmenu > li > a {
      height: auto !important;
      line-height: 1.4 !important;
      white-space: normal !important;
      word-break: break-word !important;
   }
   .art-blockcontent { max-width: 100% !important; }
   .art-vmenublockcontent { max-width: 100% !important; }
   .art-nostyle { width: 100% !important; }

   /* ── Custom modules — reset positioning ── */
   .custom_jagube, .custom_toptext, .custom_banner2,
   .finder_search, .search_search, .gtranslate_wrapper {
      float: none !important;
      position: relative !important;
      top: 0 !important;
      right: 0 !important;
      left: 0 !important;
      margin: 0 0 10px 0 !important;
      padding: 8px !important;
      text-align: center !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      height: auto !important;
   }
   .finder_search input[type="text"],
   .finder_search input.form-control {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      padding: 8px 10px !important;
      font-size: 14px !important;
      height: auto !important;
   }

   /* ── Content typography ── */
   .art-postcontent {
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
   }
   .art-postcontent img { max-width: 100% !important; height: auto !important; }
   .art-article img, img.art-article, .art-block img {
      max-width: 100% !important; height: auto !important;
   }
   .art-article table {
      display: block !important; width: 100% !important;
      overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
   }

   /* ─────────────────────────────────────────────
      FOOTER
      ───────────────────────────────────────────── */
   .art-footer-center {
      width: 100% !important;
      box-sizing: border-box !important;
   }
   .art-footer-wrapper { margin: 0 10px !important; }
   .art-footer-body { padding: 10px !important; }
   .art-footer table.position,
   .art-footer table.position td {
      display: block !important;
      width: 100% !important;
   }
   .art-footer .art-block { margin: 0 0 15px 0 !important; }

   /* ── Forms ── */
   .registration fieldset dt, .profile-edit fieldset dt,
   .profile fieldset dt, #user-registration fieldset dt {
      float: none !important; width: 100% !important;
   }
   .registration fieldset dd, .profile-edit fieldset dd,
   .profile fieldset dd, #user-registration fieldset dd {
      margin-left: 0 !important;
   }
   .login .login-fields label { float: none !important; width: 100% !important; }
   .contact-email label { float: none !important; width: 100% !important; }

   /* ── Pagination ── */
   ul.pagenav li.pagenav-prev, ul.pagenav li.pagenav-next {
      float: none !important; display: inline-block !important;
   }

   /* ─────────────────────────────────────────────
      SLIDESHOW / FPSS
      ───────────────────────────────────────────── */
   .fpss-container.fpss-template-jj-obs {
      width: 100% !important; max-width: 100% !important;
      box-sizing: border-box !important; margin: 0 0 15px 0 !important;
   }
   .fpss-template-jj-obs .slides-wrapper {
      width: 100% !important; height: auto !important;
      padding-bottom: 67% !important; position: relative !important;
      overflow: hidden !important; background: #000 !important;
   }
   .fpss-template-jj-obs .slides {
      position: absolute !important; top: 0 !important; left: 0 !important;
      width: 100% !important; height: 100% !important;
   }
   .fpss-template-jj-obs .slide {
      width: 100% !important; height: 100% !important; overflow: hidden !important;
      position: absolute !important; top: 0 !important; left: 0 !important;
   }
   .fpss-template-jj-obs .slide a span {
      display: block !important; width: 100% !important; height: 100% !important;
      background-size: cover !important; background-position: 50% 50% !important;
   }
   .fpss-template-jj-obs .slide img { display: none !important; }
   .fpss-template-jj-obs .slidetext {
      position: absolute !important; bottom: 0 !important; left: 0 !important;
      width: 100% !important; box-sizing: border-box !important;
      padding: 10px 12px !important;
   }
   .fpss-template-jj-obs .navigation-wrapper { width: 100% !important; box-sizing: border-box !important; }
   .fpss-template-jj-obs .navigation {
      list-style: none !important; margin: 0 !important; padding: 0 !important;
      display: flex !important; flex-wrap: wrap !important; align-items: center !important;
   }
   .fpss-template-jj-obs .navigation li { float: none !important; }
   .fpss-template-jj-obs .slide-loading { width: 100% !important; height: 100% !important; }

   /* ── Hide decorative elements ── */
   #art-flash-area, #art-flash-container { display: none !important; }
}

/* ==========================================================================
   SMALL PHONE (≤480px)
   ========================================================================== */
@media screen and (max-width: 768px) {
   .art-postcontent, .art-postcontent li,
   .art-postcontent table, .art-postcontent a { font-size: 14px !important; }
   .art-postheader, .art-postheader a { font-size: 20px !important; }
   .art-postcontent h1, .art-postcontent h1 a { font-size: 22px !important; }
   .art-postcontent h2 { font-size: 18px !important; }
   .art-postcontent h3, .art-postcontent h3 a { font-size: 16px !important; }
   .art-sheet-body { padding: 10px !important; }
   ul.art-hmenu > li > a { font-size: 13px !important; }
   .art-blockheader .t { font-size: 13px !important; white-space: normal !important; }
   .art-vmenublockheader .t { font-size: 14px !important; }
   .fpss-template-jj-obs .slidetext h1,
   .fpss-template-jj-obs .slidetext h1 a { font-size: 16px !important; }
   .fpss-template-jj-obs .slidetext h3 { display: none !important; }
   .fpss-template-jj-obs .slidetext p { display: none !important; }
}
/* Custom Mobile & Desktop Header Adjustments */
.flor-jagube-img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 10;
}
.art-header-inner {
    position: relative;
}
/* flor-jagube image lives inside .custom_jagube (extra2) — keep it responsive
   so the fixed 400x164 inline dimensions never overflow small screens. */
.custom_jagube img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

/* Custom mobile topbar and header styles */
@media screen and (max-width: 768px) {
    /* Hide top text box on mobile */
    .custom_toptext,
    .art-hmenu-extra1 {
        display: none !important;
    }

    /* Style Search box inside mobile menu drawer */
    .art-nav-inner .finder_search,
    .art-nav-inner .search_search,
    .finder_search,
    .search_search {
        float: none !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 auto 12px auto !important;
        padding: 0 !important;
        text-align: center !important;
        width: calc(100% - 85px) !important;
        max-width: calc(100% - 85px) !important;
        box-sizing: border-box !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
    }
    .art-nav-inner .finder_search input[type="text"],
    .art-nav-inner .finder_search input.form-control,
    .art-nav-inner .search_search input[type="text"],
    .art-nav-inner .search_search input.form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        height: 38px !important;
        text-align: center !important;
        border: 1px solid rgba(255,255,255,0.25) !important;
        border-radius: 4px !important;
        background: rgba(255,255,255,0.15) !important;
        color: #ffffff !important;
    }
    .art-nav-inner .finder_search input::placeholder,
    .art-nav-inner .search_search input::placeholder {
        color: rgba(255,255,255,0.6) !important;
        text-align: center !important;
    }

    /* Style Google Translate module inside mobile menu drawer */
    .art-nav-inner .gtranslate_wrapper,
    .gtranslate_wrapper {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        float: none !important;
        margin: 0 0 16px 0 !important;
        padding: 8px 10px !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        border-radius: 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    .art-nav-inner .gtranslate_wrapper h3,
    .gtranslate_wrapper h3 {
        margin: 0 0 6px 0 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: bold !important;
        font-family: inherit !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    .art-headerobject img.flor-jagube-img {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        height: 100% !important;
        width: auto !important;
        z-index: 10 !important;
        display: block !important;
    }

    /* Sidebar button images full width */
    .art-sidebar1 img[src*="botao_"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        margin: 10px auto !important;
    }

    /* Inline-floated content images (e.g. float:left with fixed width) would
       otherwise leave only a thin column of text beside them on phones. Drop
       the float and let the image sit above the text at full width. */
    .art-postcontent img[style*="float: left"],
    .art-postcontent img[style*="float:left"],
    .art-article img[style*="float: left"],
    .art-article img[style*="float:left"] {
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 10px auto !important;
    }

    /* Spacing & Typography Optimizations for Mobile */
    .art-postheader {
       margin: 5px 0 !important;
       padding: 5px 0 !important;
       font-size: 20px !important;
       line-height: 1.2 !important;
    }
    .art-postcontent h1, .art-postcontent h2, .art-postcontent h3, 
    .art-postcontent h4, .art-postcontent h5, .art-postcontent h6 {
       margin-top: 14px !important;
       margin-bottom: 6px !important;
       line-height: 1.25 !important;
    }
    .art-postcontent p {
       margin-top: 0 !important;
       margin-bottom: 8px !important;
       line-height: 1.4 !important;
    }
    /* Clean up empty elements and consecutive line breaks from the editor */
    .art-postcontent br + br {
       display: none !important;
    }
    .art-postcontent div:empty, 
    .art-postcontent p:empty {
       display: none !important;
    }
}