/* ============================================================================ brand-logo.css — TaxTami wordmark header sizing (site-wide) The wordmark is ~4.2:1. At the theme's 60px height it ran ~250px wide and pushed the navigation onto a second line, so it is capped shorter here. Loaded on every page; contains ONLY logo/nav sizing (no lesson styling). ========================================================================== */ .main-header .header-upper .logo-box .logo img, .main-header .logo-box .logo img, .logo-box .logo img, .logo img { max-height: 34px !important; /* ~143px wide at 4.2:1 */ width: auto !important; } .sticky-header .logo img { max-height: 28px !important; width: auto !important; } /* Trim the padding the square bird logo needed */ .main-header .header-upper .logo-box .logo, .logo-box .logo { padding-top: 6px !important; padding-bottom: 6px !important; } /* Give the nav the reclaimed room and keep it on one line */ .main-header .nav-outer .main-menu { max-width: none; } .main-menu .navigation > li { margin-left: 0; margin-right: 22px; white-space: nowrap; } .main-menu .navigation { display: flex; flex-wrap: nowrap; align-items: center; } @media (max-width: 1199px) { .main-menu .navigation > li { margin-right: 14px; } .logo img, .logo-box .logo img { max-height: 30px !important; } } /* ---- Dropdown menus --------------------------------------------------- Desktop only. The mobile menu uses different markup and is left alone. Measured before sizing: the widest child label in the whole menu is "Bonded Movement, Exports & SEZs" at 240px in the theme's 15px face. With 16px of horizontal padding either side that needs a 300px panel, so the old 250px floor is what forced "Value Added Tax Courses (VAT)", "ZIMRA Debt Management Courses" and "Tax In Financial Statements" onto two lines. The floor is now 320px and the items no longer wrap at all. */ @media (min-width: 992px) { .main-menu .navigation > li > ul, .main-menu .navigation > li > ul > li > ul { width: auto !important; min-width: 388px; /* label + dot + "44 lessons", measured */ max-width: 500px; padding: 8px 0 !important; border-radius: 0; /* squared, as everywhere else */ box-shadow: 0 12px 32px rgba(11, 31, 22, .13); } /* Eleven stacked items run about 470px tall — half the viewport on a laptop. Any panel with ten or more children splits into two columns instead, which brings the Domestic Tax Courses list back to roughly 250px. :has() is not universal; where it is missing the panel simply stays single-column, which is the current behaviour, so nothing breaks. */ .main-menu .navigation > li > ul:has(> li:nth-child(10)) { min-width: 764px; max-width: 820px; /* Grid, not `column-count`. Multi-column balances by *height*, and it does that on its own terms — with eleven rows it was leaving five on the left and six on the right. Grid with an explicit row count and column flow fills exactly six down the first column, then the rest down the second, in document order, every time. */ display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; } /* ten items -> 5 + 5 (Customs Course) */ .main-menu .navigation > li > ul:has(> li:nth-child(10)) { grid-template-rows: repeat(5, auto); } /* eleven -> 6 + 5 (Domestic Tax Courses) */ .main-menu .navigation > li > ul:has(> li:nth-child(11)) { grid-template-rows: repeat(6, auto); } .main-menu .navigation > li > ul > li, .main-menu .navigation > li > ul > li > ul > li { width: auto !important; border-bottom: 1px solid rgba(11, 31, 22, .07); /* hairline, not a gap */ } .main-menu .navigation > li > ul > li:last-child, .main-menu .navigation > li > ul > li > ul > li:last-child { border-bottom: 0; } .main-menu .navigation > li > ul > li > a, .main-menu .navigation > li > ul > li > ul > li > a { /* one line per item: the panel is now wide enough for every label */ white-space: nowrap !important; line-height: 1.45 !important; padding: 10px 18px !important; /* The theme shunts text from padding-left 10px to 30px on hover, so every label jumps 20px sideways under the pointer. Replaced with a rule that marks the row without moving the words. */ border-left: 3px solid transparent; transition: background .14s ease, color .14s ease, border-color .14s ease; } .main-menu .navigation > li > ul > li:hover > a, .main-menu .navigation > li > ul > li > ul > li:hover > a { padding-left: 18px !important; border-left-color: #2c724f; background: rgba(44, 114, 79, .06); color: #2c724f; } /* the theme's sliding dot rode along with that jump */ .main-menu .navigation > li > ul > li > a:not(.tt-mi)::before, .main-menu .navigation > li > ul > li > ul > li > a:not(.tt-mi)::before { content: none !important; } /* ---- Topic colour coding + lesson counts ---------------------------- Colours are the Zimbabwean flag's: green #319208, yellow #FFD200, red #DE2010, black #000000, and the hoist triangle's white. Five bands, which is what the flag gives — so the dot marks the *kind* of topic, not the individual item. Eleven separate hues would be decoration; five groupings a reader can actually learn are navigation. green the core domestic taxes on income and profit gold what is charged on value and transactions red enforcement, debt and dispute black administration and the filing system white cross-border Every dot carries a hairline ring: the flag's yellow and white are too light to hold an edge against a white panel on their own. */ .main-menu .navigation > li > ul > li > a.tt-mi { display: flex !important; align-items: center; gap: 10px; } .main-menu .navigation > li > ul > li > a.tt-mi::before { content: ''; position: static; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--tt-mi-c, #2c724f); box-shadow: inset 0 0 0 1px rgba(11, 31, 22, .28); text-shadow: none !important; opacity: 1 !important; } .main-menu .navigation > li > ul > li:hover > a.tt-mi::before { text-shadow: none !important; /* theme paints two green blobs here */ } .tt-mi--green { --tt-mi-c: #319208; } .tt-mi--gold { --tt-mi-c: #FFD200; } .tt-mi--red { --tt-mi-c: #DE2010; } .tt-mi--black { --tt-mi-c: #000000; } .tt-mi--white { --tt-mi-c: #ffffff; } /* the count sits hard right, so the labels stay on one reading edge */ .main-menu .navigation > li > ul > li > a .tt-mi-n { margin-left: auto; padding-left: 12px; flex: 0 0 auto; white-space: nowrap; font-size: .72rem; font-weight: 600; line-height: 1; color: #7b8a83; font-variant-numeric: tabular-nums; } .main-menu .navigation > li > ul > li:hover > a .tt-mi-n { color: #2c724f; } /* The section you are already in, marked the way the top-level menu marks it — a rule, not a filled block. */ .main-menu .navigation > li.current > ul > li > a { border-left-color: transparent; } /* ---- Opening and closing -------------------------------------------- The theme transitions `all 900ms`, which reads as a stuck menu, and it toggles `display`, which cancels the transition anyway. The panel now stays displayed and is driven by opacity and visibility, so it can both animate and hold open. The 220ms delay on the closing side is hover intent: cut a corner on the way down to a child and the panel waits for you instead of snapping shut. Opening stays immediate — a delay there feels like lag. */ .main-menu .navigation > li > ul, .main-menu .navigation > li > ul > li > ul { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity .14s ease .22s, transform .14s ease .22s, visibility 0s linear .36s; } .main-menu .navigation > li:hover > ul, .main-menu .navigation > li > ul > li:hover > ul { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .14s ease, transform .14s ease, visibility 0s; } /* keyboard: the same panel on focus, no delay */ .main-menu .navigation > li:focus-within > ul, .main-menu .navigation > li > ul > li:focus-within > ul { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .14s ease, transform .14s ease, visibility 0s; } /* Keep a right-edge dropdown on screen. A two-column panel is 620px wide, so the last two items get the right-aligned treatment, not just the last. */ .main-menu .navigation > li:last-child > ul, .main-menu .navigation > li:nth-last-child(2) > ul { left: auto !important; right: 0 !important; } } @media (prefers-reduced-motion: reduce) { .main-menu .navigation > li > ul, .main-menu .navigation > li > ul > li > ul { transform: none !important; } }