/* * Zero BS - POFO responsive CSS, SIMPLE edition. * Generated from POFO responsive.css. * * IMPORTANT MAINTENANCE NOTE: * This file is a selector-level declutter, not a hand-written replacement. * We retain rules matching audited DOM plus a small explicit safety list for * components that remain in the site's architecture. Dead POFO systems such * as WooCommerce, Swiper, skillbars/counters and unused menu families are * intentionally excluded. If a future page exposes a missing responsive rule, * add the real component family/selector; do not restore the whole parent file. */ @media (min-width: 992px){.simple-dropdown.simple-dropdown-left > ul.dropdown-menu{left: inherit !important; right: 0 !important; text-align: right;}.simple-dropdown.simple-dropdown-left > ul.dropdown-menu > li > ul.sub-menu{left: inherit !important; right: 221px; text-align: right;}.simple-dropdown.simple-dropdown-left > ul.dropdown-menu > li > ul.sub-menu > li > ul.sub-menu{left: inherit !important; right: 221px; text-align: right;}.simple-dropdown.simple-dropdown-left > ul.dropdown-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu{left: inherit !important; right: 221px; text-align: right;}.simple-dropdown.simple-dropdown-left > ul.dropdown-menu > li a i{float: left; right: inherit; left: 0;}.simple-dropdown.simple-dropdown-left > ul.dropdown-menu > li a .fa-angle-right{-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}nav.navbar.bootsnav .simple-dropdown.simple-dropdown-left .dropdown-menu > li{padding-left: 20px;}nav.navbar.bootsnav .simple-dropdown.simple-dropdown-left .dropdown-menu > li a{padding-left: 20px; padding-right: 0;}.navbar-nav > .simple-dropdown.simple-dropdown-left ul > li > a > i{float: right; margin-right: 0; margin-left: 5px; margin-bottom: 5px;}.simple-dropdown.simple-dropdown-left .dropdown-menu > li > a i.fa-angle-right{margin-top: -1px; margin-left: 0; margin-bottom: 0;}.simple-dropdown.simple-dropdown-left .dropdown-menu > li > ul > li > a i.fa-angle-right{margin-top: 0px; margin-left: 0; margin-bottom: 0;}.navbar-brand-top .navbar-collapse.collapse.display-inline-block{display: inline-block !important; vertical-align: middle;}.navbar-brand-top .nav-header-container{text-align: center;}.navbar-brand-top .nav-header-container .row{display: block !important; display: block !important; display: block !important;}.navbar-brand-top .brand-top-menu-right{display: inline-block; vertical-align: middle; padding-left: 5px; position: relative;}.navbar.navbar-brand-top .row > div:first-child{flex: inherit;}.navbar-brand-top .brand-top-menu-right > div:first-child{margin-left: 0;}.navbar-brand-top .brand-top-menu-right > div:first-child > div{margin-left: 0;}}@media (min-width: 1025px){nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li a:hover,nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li:last-child > a{border-bottom: none;}}@media (max-width: 1199px){section{padding: 90px 0}h1,h2,h3,h4,h5,h6{margin:0 0 22px; padding:0; letter-spacing: 0; font-weight: 400;}h1{font-size:65px; line-height: 65px;}h2{font-size:50px; line-height:55px}h3{font-size:42px; line-height:48px}h4{font-size:35px; line-height:41px}h5{font-size:27px; line-height:32px}h6{font-size:22px; line-height:27px}header nav .navbar-nav > li > a,header nav.navbar-brand-top .navbar-nav > li:last-child a{margin: 0 11px;}.nav.navbar-right-sidebar .dropdown.on .second-level{left: 230px}.nav.navbar-left-sidebar li{padding: 0 20px;}.nav.navbar-left-sidebar > li > ul li a{margin-right: 15px;}nav.navbar.bootsnav li.dropdown .mega-menu-full{padding: 25px;}nav.navbar.bootsnav li.dropdown .mega-menu-full > ul > li{border-right: none;}nav.navbar.bootsnav li.dropdown .menu-back-div > ul{width: 920px;}nav.navbar.bootsnav li.dropdown .mega-menu-full > ul li a,nav.navbar.bootsnav li.dropdown .mega-menu-full > ul li.dropdown-header{padding: 0 10px 0 0; margin: 0;}nav.navbar.bootsnav li.dropdown .mega-menu-full > ul li a.dropdown-header{padding-left: 0; padding-right: 10px;}nav.navbar.bootsnav li.dropdown .mega-menu-full > ul > li:last-child img{padding-left: 10px;}.navbar-brand-top .brand-top-menu-right{padding-left: 15px;}}@media (max-width: 1050px){.nav.navbar-left-sidebar li a{padding: 17px 0 !important;}}@media (max-width: 991px){.pofo-center-logo-menu .accordion-menu{width: auto;}.center-logo-search-cart-full-width .accordion-menu .nav,.center-logo-search-cart-full-width .accordion-menu .nav:nth-child(2){width: 100% !important;}h1,h2,h3,h4,h5,h6{margin:0 0 18px; padding:0; letter-spacing: 0; font-weight: 400;}h1{font-size:57px; line-height: 58px;}h2{font-size:43px; line-height:48px}h3{font-size:36px; line-height:41px}h4{font-size:30px; line-height:35px}h5{font-size:24px; line-height:30px}h6{font-size:22px; line-height:26px}p{margin: 0 0 20px;}section{padding: 75px 0;}.sm-margin-30px-bottom{margin-bottom:30px !important;}.sm-padding-15px-left{padding-left:15px !important;}.sm-clear-both{clear: both}.sm-no-border-right{border-right:0 !important}.navbar-nav > li.page_item ul.children,.navbar-nav > li.page_item > ul li > ul.children{display: block; min-width: 100%; padding: 0 0 15px; position: inherit;}.navbar-nav > li.page_item > ul li > ul.children > li:last-child,.navbar-nav > li.page_item ul.children > li:last-child{border-bottom: 0;}.navbar-nav > li.page_item > ul li > ul.children{left: 0; top: 0;}.navbar-nav > li.page_item ul.children > li{padding-left: 15px;}nav.mobile-menu ul.nav > li > a{color: #ffffff !important}nav.mobile-menu ul > li > ul > li > a,nav.mobile-menu ul > li.simple-dropdown > ul > li > ul > li > a{color: rgba(255, 255, 255, 0.6) !important}nav.mobile-menu.navbar.bootsnav li.dropdown .mega-menu-full > ul li a.dropdown-header,nav.navbar.bootsnav.mobile-menu ul.nav li.dropdown.simple-dropdown > ul > li > a{color: #ffffff !important}header nav.navbar.bootsnav.mobile-menu ul.nav > li.current-menu-ancestor > a,nav.navbar.bootsnav ul.nav li.dropdown.simple-dropdown ul.dropdown-menu > li.current-menu-item > a{color: rgba(255, 255, 255, 0.6) !important}nav.navbar.bootsnav.mobile-menu li.dropdown .mega-menu-full > ul li.current-menu-item > a,nav.mobile-menu.navbar.bootsnav li.dropdown .mega-menu-full > ul li.current-menu-ancestor a.dropdown-header,nav.mobile-menu.navbar.bootsnav li.dropdown .mega-menu-full > ul li.current-menu-ancestor a.dropdown-header,nav.mobile-menu.navbar.bootsnav li.dropdown .mega-menu-full > ul li.active a.dropdown-header,header nav.navbar.mobile-menu .navbar-nav > li > a.active,nav.navbar.bootsnav.mobile-menu ul.nav > li > a.active{color: #fff !important}nav.navbar.bootsnav.mobile-menu ul.nav li.dropdown.simple-dropdown ul.dropdown-menu > li.current-menu-ancestor > a,nav.navbar.bootsnav.mobile-menu ul.nav li.dropdown.simple-dropdown ul.dropdown-menu > li.current-menu-item > a,nav.navbar.bootsnav.mobile-menu ul.nav li.dropdown.simple-dropdown ul.dropdown-menu > li.active > a{color: #fff !important;}nav.mobile-menu.navbar.bootsnav .navbar-nav li,nav.mobile-menu.navbar.bootsnav.menu-logo-center .navbar-nav.navbar-left > li:last-child{border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important}nav.mobile-menu.navbar.bootsnav li.dropdown .mega-menu-full > ul > li > ul,nav.mobile-menu.navbar.bootsnav ul.nav .simple-dropdown ul.dropdown-menu li.dropdown ul.dropdown-menu{border-top: 1px solid rgba(255, 255, 255, 0.06) !important}nav.mobile-menu.navbar.bootsnav .navbar-nav{background-color: rgba(23, 23, 23, 0.95) !important;}nav.mobile-menu.navbar.bootsnav li.dropdown .mega-menu-full,nav.navbar.bootsnav.mobile-menu ul.nav li.dropdown.simple-dropdown > .dropdown-menu{background: #232323 !important;}nav.mobile-menu.navbar.bootsnav li.dropdown .mega-menu-full > ul > li:last-child{border: 0 none !important;}nav.mobile-menu.navbar.bootsnav li.dropdown .mega-menu-full > ul > li:last-child,nav.mobile-menu.navbar.bootsnav .navbar-nav li:last-child{border-bottom: 0 none !important;}nav.mobile-menu.navbar.bootsnav .navbar-nav li ul > li.menu-item-has-children{border-bottom: 0 none !important;}nav.navbar.bootsnav .pofo-normal-menu li ul,nav.navbar.bootsnav .pofo-normal-menu li .sub-menu li ul,.navbar-nav.pofo-normal-menu > li.page_item ul.children,.navbar-nav.pofo-normal-menu > li.page_item > ul li > ul.children{display: block}nav.navbar.bootsnav .pofo-normal-menu li .sub-menu li ul,.navbar-nav.pofo-normal-menu > li.page_item ul.children,.navbar-nav.pofo-normal-menu > li.page_item > ul li > ul.children{position: inherit; left: 0; background: rgba(35,35,35,1); width: 100%; padding: 0; box-shadow: none; margin: 0; top: 0;}nav.navbar.bootsnav .pofo-normal-menu li > ul > li,.navbar-nav.pofo-normal-menu > li.page_item ul.children li{padding-left: 0; padding-right: 0;}nav.navbar.bootsnav .pofo-normal-menu .sub-menu li a,.navbar-nav.pofo-normal-menu > li.page_item ul.children li a{padding: 9px 15px 8px;}nav.navbar.bootsnav .pofo-normal-menu li .sub-menu li ul,.navbar-nav.pofo-normal-menu > li.page_item > ul li > ul.children{border-top: 1px solid rgba(255, 255, 255, 0.06)}nav.navbar.bootsnav .pofo-normal-menu li .sub-menu li ul li a,.navbar-nav.pofo-normal-menu > li.page_item > ul li > ul.children li a{font-weight: 400; padding: 9px 25px 8px}}@media (max-width: 767px){body{font-size: 12px; line-height: 20px}h1,h2,h3,h4,h5,h6{margin:0 0 17px; padding:0; letter-spacing: 0; font-weight: 400;}h1{font-size:37px; line-height: 42px;}h2{font-size:30px; line-height:36px}h3{font-size:28px; line-height:34px}h4{font-size:24px; line-height:30px}h5{font-size:20px; line-height:28px}h6{font-size:18px; line-height:23px}.xs-text-center{text-align: center !important;}span.wpcf7-list-item input[type=checkbox]{margin-top: 3px}span.wpcf7-list-item input[type=radio]{margin-top: 3px}.xs-margin-30px-bottom{margin-bottom:30px !important;}.xs-padding-30px-top{padding-top:30px !important;}.xs-padding-30px-tb{padding-top:30px !important; padding-bottom:30px !important;}.one-second-screen{height:300px !important;}.extra-small-screen{height:250px !important;}section{padding: 50px 0;}blockquote{margin: 30px 0; padding: 15px 25px;}.header-with-topbar.sticky-mini-header.sticky.header-appear .navbar{top: 30px;}.admin-bar .header-with-topbar.sticky-mini-header.sticky.header-appear .navbar{top: 30px;}.header-with-topbar.sticky-mini-header.sticky nav.navbar-fixed-top{top: 30px;}nav.navbar.bootsnav li.dropdown .mega-menu-full > ul > li > .widget_media_image{width: 100%; margin-bottom: 15px;}nav.navbar.bootsnav li.dropdown .mega-menu-full > ul > li > .widget_media_image:last-child{margin-bottom: 0;}.sticky .navbar-top{top: -160px;}.header-appear.sticky .navbar-top{top: 0;}header nav.navbar{margin-bottom: 0; border-bottom: 0;}.admin-bar .header-with-topbar.sticky nav.navbar-fixed-top{top: 0;}.admin-bar .header-with-topbar.sticky.sticky-mini-header nav.navbar-fixed-top{top: 30px;}.navbar-nav .open .dropdown-menu>li>a{line-height: 20px;}.footer-widget-area .list-unstyled{margin-bottom: 0;}.footer-style-one .widget:last-child{margin-bottom: 0 !important}footer .pofo-footer-wrapper .footer-wrapper-text-align-col-two:first-child{text-align: center;}footer .pofo-footer-wrapper .footer-wrapper-text-align-col-one{text-align: center}.footer-wrapper-style-4{padding-bottom: 0 !important}nav.navbar .container-fluid{padding-left: 15px; padding-right: 15px;}.navbar.navbar-brand-top.bootsnav .navbar-toggle{top: 4px;}.navbar-brand-top .brand-top-menu-right{padding-left: 15px;}.navbar-brand-top .header-searchbar,.navbar-brand-top .header-social-icon{top: 1px;}footer .menu{margin: 0 0 7px;}footer .instagram-follow-api ul{padding-top: 5px;}footer .latest-post li:last-child{padding-bottom: 0;}.page-title-large h1{font-size: 35px; line-height: 35px;}.page-title-medium h1{font-size: 25px; line-height: 30px;}img.alignleft,img.alignright{float: none; margin: 0 auto 15px; width: 100%}}@media (max-width: 640px){.breadcrumb ul > li:after{padding: 0 3px 0 5px}}@media screen and (max-height: 320px){nav.navbar.bootsnav.no-full .navbar-collapse{max-height: 240px;}}@media (min-width: 768px){.container{max-width: 750px;}}@media (min-width: 992px){.container{max-width: 970px;}}@media (min-width: 1200px){.container{max-width: 1170px;}}@media (max-width: 767px){.container{max-width: 100%;}} /* ============================================================ * ZBS Responsive / troubleshoot v12 * * ACCORDION STYLE 2 * ----------------- * Mobile/tablet uses a true 3-column grid: number | question | chevron. * The first column is MAX-CONTENT, not a fixed 52/54 px track. This keeps the * number vertically centred while reclaiming the dead horizontal space that * v9/v10 left between "01" and the question. The chevron still owns a fixed * right-hand track, so long titles physically cannot run underneath it. * * NON-STICKY MOBILE MENU * ---------------------- * POFO structurally places Bootstrap's .navbar-collapse below the logo row. * We keep that correct DOM/layout. A real background element injected by * main-simple.js (.zbs-mobile-menu-backdrop) sits BEHIND the existing logo, * hamburger and menu. This is deliberately an actual element rather than a * ::before/::after trick: it avoids stacking-context surprises in POFO's many * header variants. * * main-simple.js measures the real header and visible menu heights. The dark * backdrop grows from 0 to header+menu height at constant vertical speed. * Bootstrap's opening collapse is delayed by exactly: * * lead = 350ms * headerHeight / menuHeight * * Therefore menu items start appearing precisely when the backdrop reaches * the bottom of the header. Closing is the exact inverse: collapse starts at * once, backdrop retracts at the same speed, then needs only `lead` ms to * finish the header portion. * * STICKY MOBILE MENU * ------------------ * Keep POFO's white sticky header, compact dark logo and black hamburger. * Only the dropdown becomes a nearly white translucent extension. Never swap, * filter or resize logos while the menu is open. * ============================================================ */ @media (max-width: 991px) { .accordion-style2 .panel .panel-heading { padding: 18px 24px 19px 28px; } .accordion-style2 .panel-title { display: grid; grid-template-columns: max-content minmax(0, 1fr) 22px; column-gap: 12px; align-items: center; min-width: 0; } .accordion-style2 .tab-tag { float: none; display: block; margin: 0 !important; padding: 0; font-size: 20px; line-height: 1.25; text-align: left; align-self: center; } .accordion-style2 .accordion-title { display: block; min-width: 0; padding: 0 !important; line-height: 1.35 !important; align-self: center; overflow-wrap: anywhere; } .accordion-style2 .panel .panel-heading i.fa-angle-down { position: static !important; top: auto !important; right: auto !important; display: block; justify-self: end; align-self: center; width: 12px; height: 12px; margin: 0 !important; font-size: 0; border-right: 2px solid #ff214f; border-bottom: 2px solid #ff214f; transform: rotate(45deg); transform-origin: 50% 50%; transition: transform .2s ease-in-out; } .accordion-style2 .panel-heading.active-accordion i.fa-angle-down { transform: rotate(225deg); } /* Real backdrop injected as the first child of nav. nav is already fixed/ absolute in POFO, so this absolute child uses the nav as its containing block. It sits above the nav background but below .nav-header-container. */ header nav.pofo-standard-menu .zbs-mobile-menu-backdrop { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 0; background: #1c1c1c; pointer-events: none; overflow: hidden; transition-property: height; transition-duration: var(--zbs-mobile-menu-total-duration, 450ms); transition-timing-function: linear; transition-delay: 0ms; } header nav.pofo-standard-menu .nav-header-container { position: relative; z-index: 1; } /* Non-sticky opening: the backdrop starts immediately. Bootstrap's actual menu height transition waits the measured lead time, so the text doesn't appear "through" the part of the backdrop still covering the logo row. */ header.zbs-mobile-menu-open:not(.zbs-menu-opened-sticky):not(.zbs-mobile-menu-closing) nav.pofo-standard-menu .zbs-mobile-menu-backdrop { height: var(--zbs-mobile-menu-total-height, 0px); } header.zbs-mobile-menu-open:not(.zbs-menu-opened-sticky):not(.zbs-mobile-menu-closing) nav.pofo-standard-menu .navbar-collapse.collapsing { transition-duration: var(--zbs-mobile-menu-collapse-duration, 350ms) !important; transition-delay: var(--zbs-mobile-menu-lead-duration, 100ms) !important; transition-timing-function: linear !important; overflow: hidden !important; } /* Non-sticky closing: backdrop and menu start retracting at the same time. Background needs totalDuration; Bootstrap needs only 350 ms. JS keeps the menu-open state alive for the measured remaining lead after `hidden`. */ header.zbs-mobile-menu-open.zbs-mobile-menu-closing:not(.zbs-menu-opened-sticky) nav.pofo-standard-menu .zbs-mobile-menu-backdrop { height: 0; } header.zbs-mobile-menu-open.zbs-mobile-menu-closing:not(.zbs-menu-opened-sticky) nav.pofo-standard-menu .navbar-collapse.collapsing { transition-duration: var(--zbs-mobile-menu-collapse-duration, 350ms) !important; transition-delay: 0ms !important; transition-timing-function: linear !important; overflow: hidden !important; } /* The backdrop is the only dark surface in non-sticky open state. */ header.zbs-mobile-menu-open:not(.zbs-menu-opened-sticky) nav.pofo-standard-menu, header.zbs-mobile-menu-open:not(.zbs-menu-opened-sticky) nav.pofo-standard-menu .navbar-collapse.collapsing, header.zbs-mobile-menu-open:not(.zbs-menu-opened-sticky) nav.pofo-standard-menu .navbar-collapse.collapse.show, header.zbs-mobile-menu-open:not(.zbs-menu-opened-sticky) nav.pofo-standard-menu .navbar-nav { background: transparent !important; box-shadow: none !important; } header.zbs-mobile-menu-open:not(.zbs-menu-opened-sticky) nav.pofo-standard-menu .navbar-toggle .icon-bar { background-color: #fff !important; } /* Sticky: intentionally stable. Existing dark logo remains untouched. */ header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu { background: #fff !important; } header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu .zbs-mobile-menu-backdrop { display: none; } header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu .navbar-collapse.collapsing, header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu .navbar-collapse.collapse.show, header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu .navbar-nav { background: rgba(255,255,255,.96) !important; } header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu .navbar-nav > li { border-bottom-color: rgba(0,0,0,.08) !important; } header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu .navbar-nav > li > a, header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu ul.nav > li > a, header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu ul.nav > li.current-menu-item > a, header.zbs-mobile-menu-open.zbs-menu-opened-sticky nav.pofo-standard-menu ul.nav > li.current-menu-ancestor > a { color: #232323 !important; text-shadow: none !important; } } @media (max-width: 640px) { .accordion-style2 .panel .panel-heading { padding: 17px 22px 18px 24px; } .accordion-style2 .panel-title { grid-template-columns: max-content minmax(0, 1fr) 22px; column-gap: 10px; } } /* Course/Meetup pricing responsive utilities intentionally retained. */ @media (max-width: 991px) { .sm-padding-20px-all { padding: 20px !important; } .sm-padding-30px-all { padding: 30px !important; } .sm-no-margin-top { margin-top: 0 !important; } } @media (max-width: 767px) { .xs-padding-30px-all { padding: 30px !important; } .xs-padding-40px-all { padding: 40px !important; } } /* ============================================================ * ZBS v15 - ONE standard mobile-navbar architecture * ------------------------------------------------------------ * Why this exists: * POFO's original responsive.css contained a late * @media only screen and (min-width:320px) * block which re-applied DESKTOP navbar geometry on phones. POFO then relied * on a huge generated inline max-width:991px block printed later to undo it. * * Router v4 deliberately trims that inline legacy prefix. v14 temporarily * compensated by adding another mobile block after the reset. It worked * mechanically but preserved the silly architecture: * * mobile -> desktop reset -> mobile again * * v15 removes the desktop-reset block from our audited responsive file. * Therefore this section is now the ONE final source of standard mobile menu * geometry at <=991px. No megamenu, sidebar-nav, shopping cart or alternate * POFO header families are restored. * * IMPORTANT: * - main-simple.js / the ZBS v12 visual state still owns the non-sticky dark * backdrop animation and the sticky white-panel treatment. * - These rules own only layout/spacing/collapse mechanics. * - The compact 9px/15px/8px anchor padding reproduces POFO's actual mobile * menu spacing and deliberately overrides the desktop/sticky 20px padding. * ============================================================ */ @media (max-width: 991px) { nav.pofo-standard-menu .responsive-navbar-toggle { display: inline-block !important; } nav.pofo-standard-menu .navbar-toggle { background-color: transparent !important; border: 0; padding: 0; font-size: 18px; position: relative; top: 3px; float: right; margin: 0; } nav.pofo-standard-menu .navbar-collapse { left: 0; top: 100%; width: 100%; padding: 0; position: absolute; border: 0; margin-bottom: 0; box-shadow: none; } nav.pofo-standard-menu .navbar-collapse.collapse { display: none !important; height: auto; } nav.pofo-standard-menu .navbar-collapse.collapse.show { display: block !important; overflow-y: auto !important; } nav.pofo-standard-menu.no-full .navbar-collapse { max-height: 335px; } nav.pofo-standard-menu .navbar-nav, nav.pofo-standard-menu ul.nav.navbar-nav { float: none !important; flex-direction: column; width: 100%; margin: 0 !important; padding: 0 !important; text-align: left; background-color: rgba(23,23,23,.95); } nav.pofo-standard-menu .navbar-nav > li, nav.pofo-standard-menu .navbar-nav li { float: none !important; display: block; clear: both; position: relative; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.06); } nav.pofo-standard-menu .navbar-nav > li:last-child { border-bottom: 0; } /* Higher specificity is intentional: parent POFO has desktop/sticky selectors with 20px vertical padding. Without this explicit mobile value the menu rows become roughly twice as tall after inline trimming. */ header nav.pofo-standard-menu.navbar.navbar-default ul.nav.navbar-nav > li > a, header.sticky nav.pofo-standard-menu.navbar.navbar-default.navbar-fixed-top ul.nav.navbar-nav > li > a, header.sticky nav.pofo-standard-menu.navbar.navbar-default.navbar-top ul.nav.navbar-nav > li > a { display: block; width: 100%; margin: 0 !important; padding: 9px 15px 8px !important; line-height: normal; border-top: 0; border-bottom: 0; } nav.pofo-standard-menu .accordion-menu, .sticky nav.pofo-standard-menu .accordion-menu { padding: 26px 15px; } } /* ============================================================ * ZBS v18 - ONE-LEVEL PRIMARY NAV SUBMENU * ------------------------------------------------------------ * WordPress/POFO continues to generate the menu tree. We deliberately do NOT * restore POFO's legacy dropdown/mega-menu CSS or Font Awesome arrow system. * main-simple.js owns one disclosure state: .zbs-submenu-open. * * Design rules: * - exactly one submenu level; * - click/tap, never hover-only; * - the parent is a disclosure control (final WP menu item should use URL #); * - the obsolete generated is hidden; * - our chevron is pure CSS on the parent link; * - desktop dropdown is compact, centered and overlays page content; mobile submenu is an indented continuation * of the already-open hamburger menu. * ============================================================ */ nav.pofo-standard-menu #accordion > li.menu-item-has-children { position: relative; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > i.dropdown-toggle { display: none !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > a { position: relative; cursor: pointer; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > a::after { content: ""; position: absolute; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transform-origin: 50% 50%; transition: transform .18s ease-in-out; } nav.pofo-standard-menu #accordion > li.menu-item-has-children.zbs-submenu-open > a::after { transform: rotate(225deg); } @media (min-width: 992px) { nav.pofo-standard-menu #accordion > li.menu-item-has-children > a { padding-right: 14px !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > a::after { right: 0; top: 50%; margin-top: -5px; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu { display: block !important; position: absolute !important; z-index: 1100; top: 100% !important; left: 50% !important; right: auto !important; min-width: 235px; width: max-content; max-width: 300px; margin: 0 !important; padding: 5px 0 !important; border: 0 !important; border-radius: 3px; background: rgba(18,18,18,.97) !important; box-shadow: 0 8px 24px rgba(0,0,0,.22); opacity: 0 !important; visibility: hidden !important; pointer-events: none; transform: translate(-50%, -3px); transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s linear .16s; } nav.pofo-standard-menu #accordion > li.menu-item-has-children.zbs-submenu-open > .dropdown-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li { display: block !important; float: none !important; clear: both; width: 100%; padding: 0 !important; margin: 0 !important; border: 0 !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a { display: block; width: 100%; padding: 9px 15px !important; margin: 0 !important; color: #fff !important; font-size: 12px; line-height: 1.35; font-weight: 500; text-transform: none; white-space: nowrap; background: transparent !important; border: 0 !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a:hover, nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a:focus { color: #ff214f !important; background: transparent !important; } /* Sticky keeps the visual language of the existing white compact header. */ header.sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu { background: rgba(255,255,255,.985) !important; border: 1px solid rgba(0,0,0,.07) !important; box-shadow: 0 8px 24px rgba(0,0,0,.13); } header.sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a { color: #232323 !important; } header.sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a:hover, header.sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a:focus { color: #ff214f !important; } } @media (max-width: 991px) { nav.pofo-standard-menu #accordion > li.menu-item-has-children > a { padding-right: 46px !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > a::after { right: 18px; top: 50%; margin-top: -5px; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu { display: none !important; position: static !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 4px 0 6px !important; border: 0 !important; border-radius: 0; box-shadow: none !important; background: rgba(35,35,35,.96) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children.zbs-submenu-open > .dropdown-menu { display: block !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li { float: none !important; clear: both; display: block !important; width: 100%; padding: 0 !important; margin: 0 !important; border: 0 !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a { display: block; width: 100%; margin: 0 !important; padding: 8px 18px 8px 30px !important; color: rgba(255,255,255,.78) !important; font-size: 12px; line-height: 1.35; font-weight: 500; text-transform: none; background: transparent !important; border: 0 !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a:hover, nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a:focus { color: #fff !important; } /* When the whole hamburger was opened from sticky state, keep the submenu in the same light visual family as the white sticky panel. */ header.zbs-menu-opened-sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu { background: rgba(245,245,245,.98) !important; } header.zbs-menu-opened-sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a { color: #333 !important; } header.zbs-menu-opened-sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a:hover, header.zbs-menu-opened-sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a:focus { color: #ff214f !important; } } /* ============================================================ * ZBS v19 - MOBILE SUBMENU POLISH + /SZKOLENIA MOBILE LIST * ============================================================ */ @media (max-width: 991px) { /* Align the disclosure chevron on the same visual vertical axis as the 22px hamburger. The header/button geometry places that axis ~25px from the viewport/container right edge. */ nav.pofo-standard-menu #accordion > li.menu-item-has-children > a::after { right: 22px; } /* Once Bootstrap has completely opened the main hamburger, let the actual collapse panel own the same surface colour as the backdrop. This makes nested submenu growth independent of the top-of-screen backdrop timing. */ header.zbs-mobile-menu-open:not(.zbs-menu-opened-sticky) nav.pofo-standard-menu .navbar-collapse.collapse.show { background: #1c1c1c !important; } /* A child item should look like part of the same navigation system, not a second grey card. Hierarchy is communicated by indentation + a small ›. */ nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu { display: block !important; max-height: 0; overflow: hidden !important; margin: 0 !important; padding: 0 !important; background: transparent !important; opacity: 0 !important; visibility: visible !important; transition: max-height .18s ease-out, opacity .12s ease-out, padding .18s ease-out; } nav.pofo-standard-menu #accordion > li.menu-item-has-children.zbs-submenu-open > .dropdown-menu { max-height: 260px; padding: 2px 0 6px !important; opacity: 1 !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li, header.zbs-menu-opened-sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li { padding: 0 !important; background: transparent !important; border: 0 !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a, header.zbs-menu-opened-sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a { position: relative; margin: 0 !important; padding: 9px 46px 9px 44px !important; background: transparent !important; border: 0 !important; font-family: "Montserrat", sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: normal !important; text-transform: none !important; } nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a::before { content: "›"; position: absolute; left: 25px; top: 50%; transform: translateY(-52%); color: #ff214f; font-size: 17px; font-weight: 400; line-height: 1; } header:not(.zbs-menu-opened-sticky) nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a { color: #fff !important; } header.zbs-menu-opened-sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu, header.zbs-menu-opened-sticky nav.pofo-standard-menu #accordion > li.menu-item-has-children > .dropdown-menu > li > a { background: transparent !important; color: #232323 !important; } }