/* VISUALFIX-20261003: generic responsive/visual safety fixes (layout only, no content changes) */
html,body{overflow-x:clip}
body{overflow-wrap:break-word}
img,video{max-width:100%;height:auto}
pre{max-width:100%;overflow-x:auto}
table{max-width:100%}
.navbar-toggler{flex-shrink:0}
.navbar-toggler-icon{background-repeat:no-repeat;background-position:center;background-size:100%}
/* cookie banner: in the stacked (column) mobile layout the "flex:1 1 300px" text became 300px TALL */
@media (max-width:576px){
  #cookie-consent-banner p{flex:0 0 auto!important}
  #cookie-consent-banner,#cookie-banner,#sf-cookie-banner{max-height:45vh;overflow:auto}
}
@media (max-width:991.98px){
  .navbar>.container,.navbar>.container-fluid,.unified-navbar>.container{flex-wrap:wrap}
  .navbar .navbar-brand,.unified-navbar .navbar-brand{max-width:calc(100% - 86px);white-space:normal;overflow-wrap:anywhere;line-height:1.25}
}
/* floating newsletter button must not sit on top of the cookie banner buttons */
html.vf-ck-open #phub-trigger{bottom:calc(var(--vf-ck-h,0px) + 12px)!important;transition:bottom .2s}
/* content-engine news grid: 320px minimum column overflowed 390px phones */
.ce-dynamic-wrapper,.ce-section{max-width:100%;box-sizing:border-box}
.ce-news-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))!important}
.ce-news-item,.ce-trending-item,.ce-news-snippet,.ce-news-meta{min-width:0;overflow-wrap:anywhere}
.ce-weather-card{min-width:min(280px,100%)!important}
@media (max-width:576px){.ce-dynamic-wrapper{padding:12px!important}.ce-section{padding:16px!important}}
@media (max-width:576px){#af-cookie{max-height:45vh;overflow:auto}.af-cookie-btns{flex-wrap:wrap;max-width:100%}.af-cookie-btns button{max-width:100%}}
/* theme rules like "em,i{font-family:X!important}" were knocking out Font Awesome glyphs (tofu boxes) */
i.fas,i.fa-solid,i.far,i.fa-regular,i.fa{font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important}
i.fab,i.fa-brands{font-family:"Font Awesome 6 Brands","Font Awesome 5 Brands"!important}
/* article placed directly in <body> (no .container): text ran edge-to-edge on phones */
body>article{max-width:900px;margin-left:auto!important;margin-right:auto!important;padding-left:16px;padding-right:16px;box-sizing:border-box}
/* a page-wide "nav{position:fixed;top:0}" rule pinned the mobile BOTTOM nav to the top, over the logo */
.mobile-bottom-nav,.bottom-mobile-nav{top:auto!important}
/* header row relies on Bootstrap's .d-flex, which some pages do not load: logo and hamburger stacked */
#unifiedNav>.container.d-flex{display:flex;align-items:center;justify-content:space-between;padding-left:max(16px,var(--bs-gutter-x,0px));padding-right:max(16px,var(--bs-gutter-x,0px))}
/* inline flex newsletter forms: the email input refused to shrink and pushed "Subscribe" off-screen */
form[style*="display:flex"],form[style*="display: flex"]{flex-wrap:wrap;max-width:100%}
form[style*="display:flex"] input,form[style*="display: flex"] input{min-width:0}
/* bottom-nav entries that have no link: keep them in the same row/format as the linked ones */
.mobile-bottom-nav .vf-navitem,.bottom-mobile-nav .vf-navitem{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px 8px;font-size:.6rem;font-weight:600;color:rgba(255,255,255,.45);min-width:0;flex:1}
.mobile-bottom-nav .vf-navitem i,.bottom-mobile-nav .vf-navitem i{font-size:1.15rem;margin-bottom:3px}

/* thehedgeapple.com: 76px spacer left over from a fixed navbar that is now sticky (empty band under the header) */
nav.navbar.fixed-top+.breadcrumb-section{margin-top:0!important}