/* One outer frame, matching the active WHM Studio Bootstrap 5 container policy.
 * Smaller copy measures, modal sizes and grid columns remain component decisions. */
:root{--hw-content-max:100%;--hw-content-gutter:12px;--hw-header-height:98px;--hw-toolbar-offset:0px}
@media(min-width:576px){:root{--hw-content-max:540px}}
@media(min-width:768px){:root{--hw-content-max:720px}}
@media(min-width:992px){:root{--hw-content-max:960px}}
@media(min-width:1200px){:root{--hw-content-max:1140px}}
@media(min-width:1400px){:root{--hw-content-max:1320px}}
.container,.container-fluid,.container-full,.hw-content-container{box-sizing:border-box;width:100%;max-width:var(--hw-content-max);margin-inline:auto;padding-inline:var(--hw-content-gutter)}
/* Adapt the old grid's 15px negative margins to the shared 12px frame. */
.row{margin-inline:calc(-1 * var(--hw-content-gutter))}
.row:not(.portfolio):not(.masonry-portfolio)>[class*="col-"],.row>.masonry-container>[class*="col-"]{padding-inline:var(--hw-content-gutter)}
.container-fluid>.row>.portfolio{margin-inline:var(--hw-content-gutter)}
/* Fluid legacy gallery wrappers now share the same outer frame. Hero backgrounds
 * live on their full-width sections, not these inner wrappers. */
#hw-main img,#hw-main video,#hw-main iframe{max-width:100%}
#hw-main article img:not([class]),#hw-main .wp-block-image img{height:auto}
#hw-main :is(.container,.container-fluid,.container-full) :is(p,li,h1,h2,h3){overflow-wrap:break-word}
html{scroll-padding-top:calc(var(--hw-header-height) + var(--hw-toolbar-offset) + 12px)}
.hw-header-solid #hw-main{padding-top:var(--hw-header-height)}
/* Scale the source 375:200 strip thumbnails without distorting their ratio. */
.into-slider .item img{width:100%;height:auto;aspect-ratio:375/200;object-fit:cover}
.admin-bar{--hw-toolbar-offset:32px}
.admin-bar #wpadminbar{position:fixed;top:0}
@media(max-width:992px){:root{--hw-header-height:65px}}
@media(max-width:782px){.admin-bar{--hw-toolbar-offset:46px}}