/* RESPONSIVE / BREAKPOINT STYLES Every @media rule that exists in this theme + its blocks plugin, extracted from css/02-theme-style.css and css/03-organic-blocks-bundle.css and organized by breakpoint. Load AFTER those two files (same order as the main stylesheets — these rules are meant to override them at narrower widths). The theme-derived sections (768px nav submenu, 1366px, 781px, 768px phone) are now a byte-for-byte capture of the live theme's own style.css media queries (previously this file only had a partial, reconstructed subset — several real rules were missing, including the 781px column-stacking breakpoint, which didn't exist here at all). Breakpoints this theme actually uses: 1366px — wide-content padding 1024px — plugin-block breakpoint (hero padding, some OBB blocks) 781px — sidebar column stacking (rare — only matters with a sidebar template) 768px — the real "mobile" breakpoint: header restructures, type scale shrinks, columns stack, nav submenu overlay tweaks 600px — a couple of narrow-phone edge cases aspect-ratio 16/9 — background video sizing (not a width breakpoint) Sections marked "ACTIVE ON THIS SITE" are confirmed in use on the scanned pages (header/nav, hero, headings, columns, media-text). Sections marked "PLUGIN-PROVIDED (not seen on scanned pages)" come from the same organic-blocks-bundle plugin CSS and only matter if your WordPress agent also uses those specific OBB blocks (image slider, profile block, pricing tables, testimonials, or the plugin's own obb-header/obb-mobile-menu — this theme uses the CORE Gutenberg Navigation block for its menu instead, not obb-header). */ /* ================================================================ 1366px — CONTENT WIDTH / WRAPPER PADDING ================================================================ */ @media screen and (max-width: 1366px) { /* ACTIVE — side padding on wrapped content once the viewport is narrower than the "wide" alignment size (1366px, see --wp--style--global--wide-size in 01-design-tokens.css) */ .entry-content > .wp-block-group { padding-left: 36px; padding-right: 36px; } .page-template-template-blank .site-main .entry-content { padding-left: 0; padding-right: 0; } /* Legacy full-bleed-block width fix (theme's own name for it, not WooCommerce-specific despite the comment — keeps full-width children of .site-main flush instead of inheriting side padding) */ .site-main .site-main > *:not(.entry-content):not(.alignfull), .site-main .site-main > .entry-content > *:not(.alignfull) { padding-left: 0; padding-right: 0; } } /* ================================================================ 1024px — TABLET ================================================================ */ @media screen and (max-width: 1024px) { /* ACTIVE — hero block content padding tightens up */ .obb-hero-content { padding: 36px; } /* PLUGIN-PROVIDED — only relevant if you use OBB's own header/nav block instead of core Navigation (this theme does NOT use these) */ #obb-nav, .obb-navigation.secondary { display: none; } button.obb-menu-toggle, button.obb-menu-toggle:hover { display: flex; justify-content: flex-end; flex-basis: 20%; margin: 0; padding: 0; } .obb-mobile-menu-container { display: block; } .obb-header.is-style-obb-center-logo .obb-header-content { justify-content: space-between; flex-direction: row; } .obb-header.is-style-obb-center-logo .obb-site-identity { margin-left: 0; margin-right: 0; } /* PLUGIN-PROVIDED — OBB image slider / flexslider block, if used */ .style-framed .obb-flexslider .flex-direction-nav .flex-next { right: 16px; } .style-framed .obb-flexslider .flex-direction-nav .flex-prev { left: 16px; } .style-bordered .obb-flexslider .slides li { border-left: none; border-right: none; } .obb-flexslider .obb-aligner.obb-content-layout-overlay .obb-content { margin: 36px; } .obb-multi-posts-slide .obb-flexslider .slides li { padding: 0px; } .obb-multi-posts-slide .obb-flexslider .obb-bg-overlay, .obb-multi-posts-slide.style-modern .obb-flexslider .obb-bg-overlay { margin-top: 0px; margin-left: 0px; max-width: 100%; max-height: 100%; } .style-rounded .obb-flexslider .flex-direction-nav .flex-prev { left: 24px; } .style-rounded .obb-flexslider .flex-direction-nav .flex-next { right: 24px; } .style-modern.obb-slideshow { box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24); } .style-modern .obb-flexslider .obb-bg-overlay { margin-top: 0; margin-left: 0; max-width: none; max-height: none; } .style-modern .obb-flexslider .slides li { padding: 0; background-clip: border-box; border-radius: 3px; } .style-modern .obb-flexslider .flex-direction-nav .flex-prev { left: 12px; } .style-modern .obb-flexslider .flex-direction-nav .flex-next { right: 12px; } .style-modern.obb-multi-posts-slide .obb-flexslider .flex-control-nav { bottom: 12px; } .style-modern.obb-multi-posts-slide .obb-flexslider .slides li { border-radius: 3px; } } /* ================================================================ 781px — SIDEBAR COLUMN STACKING (rare — only with a sidebar template) ================================================================ */ @media screen and (max-width: 781px) { .sidebar-left .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column, .sidebar-right .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; } } /* ================================================================ 768px — MOBILE (the important breakpoint — real layout changes) ================================================================ */ @media screen and (max-width: 768px) { /* ---- ACTIVE: core Navigation block's built-in submenu adjustments ---- (the hamburger/overlay-modal behavior itself is JS-driven, not CSS — see the data-wp-interactive attributes in html/homepage-header.html; these rules only tweak the OPEN overlay-menu's appearance) */ .wp-block-navigation__container ul.wp-block-navigation__submenu-container { width: auto !important; border-radius: 0; box-shadow: none; } .wp-block-navigation__container ul.wp-block-navigation__submenu-container ul.wp-block-navigation__submenu-container { top: auto !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { font-size: 140%; line-height: 2; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { padding: 0 12px 0 0 !important; border-right: 1px solid var(--wp--preset--color--light-sage) !important; } .wp-block-navigation__container li li a::after, .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container::before { display: none; } .wp-block-navigation__container li a:hover { text-decoration: underline; } .wp-block-navigation__container li li a, .wp-block-navigation__container li li li a { border: none; } .wp-block-navigation .wp-block-navigation-item.button a { padding-left: 16px; padding-right: 16px; } /* ---- ACTIVE: header & site identity ---- */ .site-header .contact-info * { text-align: left; justify-content: flex-start; } .site-header .contact-info .wp-block-column:last-child { margin-top: 8px; } .site-header .site-identity, .site-header .site-info .wp-block-column:first-child { flex-basis: 75% !important; } .site-header .wp-block-navigation button, .site-header .wp-block-navigation button:hover { top: auto; box-shadow: none; } .site-header .wp-block-cover { min-height: 180px !important; } /* hero shrinks from 640px */ .site-header .wp-block-site-logo { max-width: 100px; } /* logo shrinks */ .wp-block-site-title, h1.wp-block-site-title { font-size: 1.6rem !important; letter-spacing: 0; } .wp-block-site-tagline, p.wp-block-site-tagline { font-size: 0.8rem !important; } /* ---- ACTIVE: typography scale shrinks one step down ---- */ h1, .site-main .has-huge-font-size { font-size: 2.6rem !important; } /* was 3.8rem (--huge) */ h2, .site-main .has-extra-large-font-size { font-size: 1.8rem !important; } /* was 3rem (--extra-large) */ h3, .site-main .has-large-font-size { font-size: 1.6rem !important; } /* was 2.4rem (--large) */ h4, .site-main .has-medium-large-font-size { font-size: 1.4rem !important; }/* was 1.8rem (--medium-large) */ h5, .site-main .has-medium-font-size { font-size: 1.2rem !important; } h6, .site-main .has-normal-font-size { font-size: 1.1rem !important; } .site-main .has-gigantic-font-size { font-size: 3.4rem !important; } .site-main .has-humongous-font-size { font-size: 4.2rem !important; } /* ---- ACTIVE: layout ---- */ .entry-content > .wp-block-group { padding-left: 24px; padding-right: 24px; } /* was 36px at 1366px, more at desktop */ .wp-block-column { margin-top: 12px; margin-bottom: 12px; } /* columns stack with vertical gap */ .wp-block-media-text .wp-block-media-text__content { height: auto; } .wp-block-media-text.is-stacked-on-mobile.alignwide .wp-block-media-text__content { padding-left: 24px; padding-right: 24px; } .wp-block-post-featured-image img { height: auto !important; } .blog-post-info .wp-block-column:last-child { display: none; } /* Image alignment fix + legacy full-bleed-block width fix (same pair of rules as the 1366px section above, re-applied at this narrower breakpoint — verbatim from the theme, not a duplication mistake) */ .alignleft { margin-left: auto !important; } .alignright { margin-right: auto !important; } .site-main .site-main > *:not(.entry-content):not(.alignfull), .site-main .site-main > .entry-content > *:not(.alignfull) { padding-left: 0; padding-right: 0; } .site-main > .entry-content > .alignwide, .site-main > .alignwide:not(.entry-content) { padding-left: 16px; padding-right: 16px; } /* ---- ACTIVE: hero block ---- */ .obb-hero-content { padding: 24px; } /* tighter than the 1024px 36px value */ .obb-hero.obb-window-height { height: auto; } /* full-viewport-height hero variant collapses to auto */ .obb-hero.obb-featured-img-parallax { background-attachment: scroll; } /* parallax disabled on mobile (perf/compat) */ /* ---- PLUGIN-PROVIDED (only if these OBB blocks are used) ---- */ .obb-filter-nav { display: block; } .obb-filter-buttons { font-size: 0.9rem; max-width: 100%; margin-bottom: 12px; } .obb-filter-search { max-width: 100%; margin-bottom: 12px; } .obb-post-container { display: block; } .obb-posts.obb-orientation-horizontal .obb-content { flex-direction: column; } .obb-posts.obb-orientation-horizontal .obb-img-and-title, .obb-posts.obb-orientation-horizontal .obb-excerpt-and-more { flex-basis: 100%; } .obb-position.obb-mobile-reset { transform: scale(1) !important; left: auto !important; right: auto !important; margin: auto !important; } .obb-featured.obb-mobile-reset { transform: scale(1) !important; } .obb-icon-box.obb-orientation-horizontal .obb-icon-img { max-width: 90px; } .organic-block-testimonials, .organic-block-testimonials.style-rounded { padding-left: 24px; padding-right: 24px; } .organic-block-testimonials .obb-excerpt p { font-size: 0.9rem; } .organic-block-testimonials .obb-flexslider .obb-content { padding-left: 24px; padding-right: 24px; } .obb-site-logo { margin: 0; } .obb-header .obb-site-identity { flex-basis: 75%; margin: 0; } .header-align-center .obb-header-content { flex-direction: row; } .header-align-center .obb-site-identity { margin-bottom: 0; } .admin-bar:not(.wp-admin) .organic-block.obb-header.position-fixed { top: 46px; transition: top .25s ease-out; } .admin-bar:not(.wp-admin) .obb-mobile-menu-container { top: 46px; } .obb-mobile-menu-container .obb-site-info, .obb-mobile-menu-container .obb-mobile-menus { padding-left: 0; padding-right: 0; } .obb-footer .obb-footer-container { flex-direction: column; } .obb-footer .obb-footer-container .obb-footer-icon { width: 100%; text-align: center; } .obb-footer .obb-footer-container .obb-footer-info { flex-direction: column; align-items: center; } .obb-footer .obb-footer-container .obb-footer-return { margin-left: auto; margin-right: auto; margin-bottom: 24px; } .obb-profile { flex-direction: column; padding: 0; } .obb-profile .obb-profile-image { background: none !important; max-width: 100%; width: 100%; } .obb-profile .obb-profile-image img { opacity: 1; margin: 0px auto; } .obb-style-rounded.obb-profile .obb-profile-image { margin-left: auto; margin-right: auto; } .obb-style-rounded.obb-profile:not(.obb-orientation-vertical) .obb-profile-image figure { margin: 24px 24px 0px 24px; } .obb-orientation-vertical.obb-profile:not(.obb-style-rounded) .obb-profile-image { min-height: auto !important; } .obb-profile.obb-style-angular.obb-orientation-horizontal .obb-profile-image { clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%); } .obb-pricing.obb-mobile-reset { transform: scale(1) !important; } /* Legacy shortcode-style multi-column helper (pre-Gutenberg-columns) — unlikely to be needed for a fresh build, kept for completeness */ .obb-columns-2, .obb-columns-3, .obb-columns-4, .obb-columns-5, .obb-columns-6, .obb-masonry-wrapper.obb-columns-2, .obb-masonry-wrapper.obb-columns-3, .obb-masonry-wrapper.obb-columns-4, .obb-masonry-wrapper.obb-columns-5, .obb-masonry-wrapper.obb-columns-6 { float: none; width: 100% !important; } .obb-columns-2 .obb-content, .obb-columns-3 .obb-content, .obb-columns-4 .obb-content, .obb-columns-5 .obb-content, .obb-columns-6 .obb-content { margin-left: 0px !important; margin-right: 0px !important; } } /* ================================================================ 600px — SMALL PHONE (rare, only 2 rules) ================================================================ */ @media screen and (max-width: 600px) { /* PLUGIN-PROVIDED — admin bar offset edge cases, safe to ignore unless replicating admin-bar-aware fixed headers */ .admin-bar:not(.wp-admin) .organic-block.obb-header.position-fixed { position: absolute; top: 0; } .admin-bar:not(.wp-admin) .obb-mobile-menu-container.scrolling { top: 0; } } /* ================================================================ ASPECT-RATIO — background video sizing (hero block only) Keeps a full-bleed