/* ============================================================================
Manuka Luxury — phase 3: header / navigation / footer (L2-015)
----------------------------------------------------------------------------
Loaded by mm_luxury_enqueue_global() on every front-end view EXCEPT the
CartFlows checkout steps (`cartflows_step`) and the orders PWA (`mua_app`).
The cart page IS included, and needs to be: it carries the same header.
Scope guard: every selector below is anchored to `.site-header`,
`#ast-mobile-popup`, `#ast-mobile-popup-wrapper` or `footer.site-footer`.
Nothing here may reach the catalogue, the product page, the ModernCart
drawer or any form.
Specificity note — this file cannot win on source order. Four stylesheets
print AFTER it and all four carry !important:
wp_head 99 WPCode #9486 MM-DROPDOWN-CSS (sub-menu, switcher)
wp_head 101 Customizer "Additional CSS" (~800 !important, 37 of them
on the header/footer)
wp_head 130 WPCode #9486 MM-LOGOCSS (.custom-logo width:120px)
wp_footer WPCode #9486 MM-A11Y (footer link colour)
So each block names its competitor and deliberately out-specifies it.
Measured, not assumed: the competing selectors were read out of the live
`wp_get_custom_css()` and out of #9486 on 2026-09-17.
========================================================================= */
:root{
--mm-cream:#fffdf9;
--mm-cream-deep:#f4efe6;
--mm-gold:#9b6b18; /* white on this = 4,66:1 — the counter badge */
--mm-gold-soft:#b07a1b; /* decorative only: white on it is 3,72:1 */
--mm-gold-deep:#8a5f15;
--mm-ink:#2e2519; /* 14,82:1 on cream */
--mm-ink-2:#5c5146; /* 7,60:1 on cream, 6,74:1 on cream-deep */
--mm-muted:#786c58; /* 5,06:1 on cream, 4,49:1 on cream-deep — never
use on cream-deep at small sizes */
--mm-line:#e3d9c6;
--mm-sans:'Lato','Lato Fallback',Arial,sans-serif;
/* The serif token is deliberately NOT redeclared here. mm-deploy-luxury.sh
greps for it as its signature for "the shop stylesheet is loaded on this
page / is absent from the checkout and the PWA". This file loads on a
different set of pages and nothing in it needs a serif face, so repeating
that token - even in a comment - would only blunt the gate. */
--mm-head-h:78px; /* desktop header height */
--mm-head-h-m:62px; /* mobile header height */
--mm-shell:1220px; /* 1180px of content + 2x20px gutter — the width
the page content already uses (measured) */
}
/* ============================================================================
1. STICKY — and the one thing that makes it possible
----------------------------------------------------------------------------
Competitor: Additional CSS `#page{overflow-x:hidden!important}` (1,0,0) and
`body{overflow-x:hidden!important}` (0,0,1).
overflow-x:hidden forces overflow-y to compute to `auto`, which turns #page
into a scroll container. position:sticky then anchors to a scrollport that
never scrolls, and the header rides away with the page. overflow-x:clip
clips exactly the same way WITHOUT creating a scroll container, so sticky
works and the horizontal-overflow guard is kept.
Behind @supports on purpose: Safari < 16 has no `clip`. There the rules are
skipped, `hidden` stays, and the header is simply static — the behaviour of
today, not a broken one.
========================================================================= */
@supports (overflow-x: clip){
html body,
html #page{ overflow-x:clip !important; }
}
.site-header#masthead{
position:sticky !important;
top:0 !important;
z-index:99 !important; /* Astra's own value, kept */
background-color:var(--mm-cream) !important;
border-bottom:1px solid var(--mm-line) !important;
}
/* The admin bar is fixed on desktop and 46px tall in the phone breakpoint;
without this the sticky header hides under it for logged-in users. */
body.admin-bar .site-header#masthead{ top:32px !important; }
@media (max-width:782px){ body.admin-bar .site-header#masthead{ top:46px !important; } }
/* ============================================================================
2. HEADER SHELL
----------------------------------------------------------------------------
Competitors: `.main-header-bar .ast-container{max-width:100%!important;
padding:0 20px!important}` (0,2,0) and `.ast-main-header-wrap,
.main-header-bar-wrap,.main-header-bar{width:100%!important;
max-width:100%!important}` (0,1,0).
========================================================================= */
.site-header .ast-primary-header-bar{
padding-top:0 !important;
padding-bottom:0 !important;
min-height:0 !important;
border-bottom:0 none !important;
background-color:transparent !important;
}
.site-header .main-header-bar .ast-container,
.site-header .ast-primary-header-bar > .ast-container,
.site-header .site-primary-header-wrap.ast-container{
max-width:var(--mm-shell) !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:20px !important;
padding-right:20px !important;
}
/* Astra's grid row is what actually holds the three sections. */
.site-header .ast-primary-header-bar .ast-builder-grid-row{
min-height:var(--mm-head-h) !important;
align-items:center !important;
}
/* Competitor: `.ast-main-header-bar-alignment{justify-content:flex-end
!important;padding-right:180px!important}` (0,1,0) — the 180px gap that
pushed the nav away from the cart. */
.site-header .ast-main-header-bar-alignment{
padding-right:0 !important;
justify-content:flex-end !important;
}
/* The nav sits to the left of the cart, both hard right. */
.site-header .site-header-primary-section-right{
gap:26px !important;
align-items:center !important;
}
/* ============================================================================
3. LOGO
----------------------------------------------------------------------------
Competitor: #9486 MM-LOGOCSS `.custom-logo,.custom-logo-link img{
width:120px!important;height:auto!important;max-height:none!important}`
(0,1,0)/(0,1,1), printed at wp_head 130. That block also dresses the
CartFlows checkout logo, which this file never reaches — so it is overridden
here rather than edited there.
========================================================================= */
.site-header .site-branding .custom-logo,
.site-header .site-branding .custom-logo-link img{
width:88px !important; /* 88 x 62,3 — the source is 120x85 */
height:auto !important;
max-height:none !important;
display:block !important;
}
/* Astra ships `.site-branding{padding:16px 0;margin-bottom:5px}`. Measured: it
was 37 of the 100px the header still had after the bar padding was zeroed. */
/* `.site-logo-img` carries a 14,59px right padding (Astra's logo/site-title gap).
With no site title to separate it from, it only pushed the phone logo 7px off
centre. */
.site-header .site-branding.ast-site-identity,
.site-header .site-branding,
.site-header .site-logo-img{
padding:0 !important;
margin:0 !important;
}
.site-header .site-branding,
.site-header .site-logo-img,
.site-header .site-branding .custom-logo-link{
line-height:0 !important;
display:flex !important;
align-items:center !important;
}
/* ============================================================================
4. PRIMARY NAVIGATION — desktop
----------------------------------------------------------------------------
Competitors, in the order they print:
`.ast-builder-menu-1 .menu-item > .menu-link` (0,3,0)
`.ast-builder-menu-1 .menu-item:hover > .menu-link` (0,3,0)
`#ast-hf-menu-1 .menu-item > a:hover` (1,1,1)
`#ast-hf-menu-1 .current-menu-item > a` (1,1,1)
Everything here carries the #ast-hf-menu-1 id plus two classes, so it wins
on specificity whatever the source order.
========================================================================= */
/* Strip the gold pill from every item, top level and sub-menu alike. */
.site-header #ast-hf-menu-1 .menu-item > .menu-link{
background:none !important;
background-color:transparent !important;
border-radius:0 !important;
box-shadow:none !important;
font-family:var(--mm-sans) !important;
transition:color .2s ease !important;
}
.site-header .ast-builder-menu-1 .menu-item{
margin:0 17px !important; /* 34px between items, as measured
in the mock */
}
/* The top-level item spans the whole bar. Not decoration: Astra drops the
sub-menu from the bottom of the , so a 33px-tall left the dropdown
hanging inside the header instead of under it. The link keeps its own small
box, which is what the hairline is drawn on. */
.site-header .ast-builder-menu-1 #ast-hf-menu-1 > .menu-item{
height:var(--mm-head-h) !important;
display:flex !important;
align-items:center !important;
}
.site-header .ast-builder-menu-1 > .ast-main-header-bar-alignment .menu-item:last-child{ margin-right:0 !important; }
.site-header #ast-hf-menu-1 > .menu-item > .menu-link{
font-size:12px !important;
font-weight:600 !important;
letter-spacing:1.4px !important;
text-transform:uppercase !important;
/* 1,9 rather than the mock's 1,6: Ė Ū Ā Š sit hard against the cap line and
were touching the underline at 1,6. */
line-height:1.9 !important;
color:var(--mm-ink-2) !important; /* 7,60:1 on cream */
padding:5px 0 !important;
position:relative !important;
white-space:nowrap !important;
display:inline-flex !important;
align-items:center !important;
}
/* The gold hairline. Drawn on a pseudo-element so nothing in the box model
moves between states — hover must not shift the text by a pixel. */
.site-header #ast-hf-menu-1 > .menu-item > .menu-link::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:1px;
background:var(--mm-gold);
transform:scaleX(0);
transform-origin:left center;
transition:transform .22s ease;
}
.site-header #ast-hf-menu-1 > .menu-item:hover > .menu-link::after,
.site-header #ast-hf-menu-1 > .menu-item > .menu-link:hover::after,
.site-header #ast-hf-menu-1 > .menu-item > .menu-link:focus-visible::after,
.site-header #ast-hf-menu-1 > .menu-item.current-menu-item > .menu-link::after,
.site-header #ast-hf-menu-1 > .menu-item.current-menu-ancestor > .menu-link::after{
transform:scaleX(1);
}
.site-header #ast-hf-menu-1 > .menu-item:hover > .menu-link,
.site-header #ast-hf-menu-1 > .menu-item > .menu-link:hover,
.site-header #ast-hf-menu-1 > .menu-item.current-menu-item > .menu-link,
.site-header #ast-hf-menu-1 > .menu-item.current-menu-ancestor > .menu-link{
color:var(--mm-ink) !important; /* 14,82:1 */
background:none !important;
background-color:transparent !important;
}
/* The language switcher carries `current-menu-parent` on EVERY page — its
sub-menu always contains the current language. Marking it active would put
the hairline under the switcher on every view, so it is excluded by hand. */
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item.current-menu-parent > .menu-link::after,
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item.current-menu-ancestor > .menu-link::after{
transform:scaleX(0);
}
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item:hover > .menu-link::after,
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item > .menu-link:hover::after,
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item > .menu-link:focus-visible::after{
transform:scaleX(1);
}
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item.current-menu-parent > .menu-link,
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item.current-menu-ancestor > .menu-link{
color:var(--mm-ink-2) !important;
}
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item:hover > .menu-link,
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item > .menu-link:hover{
color:var(--mm-ink) !important;
}
/* Caret. Astra ships a 26x16 SVG inside the link; shrink it and mute it. */
.site-header #ast-hf-menu-1 .ast-header-navigation-arrow{
margin-left:7px !important;
line-height:0 !important;
}
.site-header #ast-hf-menu-1 .ast-header-navigation-arrow .ast-arrow-svg{
width:8px !important;
height:8px !important;
fill:var(--mm-muted) !important;
transition:transform .2s ease;
}
.site-header #ast-hf-menu-1 > .menu-item:hover > .menu-link .ast-arrow-svg{
fill:var(--mm-ink) !important;
}
/* ============================================================================
5. DROPDOWN (sub-menu)
----------------------------------------------------------------------------
Competitors: Additional CSS `header #ast-hf-menu-1 .sub-menu{
background-color:transparent!important;box-shadow:none!important;
border:none!important;padding:0!important}` (1,1,1) and
`header .sub-menu .menu-link{box-shadow:0 6px 16px …!important}` (0,2,1),
plus #9486 MM-DROPDOWN-CSS `.main-header-menu .sub-menu{padding-top:10px
!important}` (0,2,0).
========================================================================= */
.site-header #ast-hf-menu-1 .sub-menu{
background-color:var(--mm-cream) !important;
border:1px solid var(--mm-line) !important;
border-radius:2px !important;
box-shadow:0 14px 34px rgba(46,37,25,.10) !important;
padding:8px 0 !important;
margin-top:0 !important;
min-width:212px !important;
}
.site-header #ast-hf-menu-1 .sub-menu .menu-item{
margin:0 !important;
}
.site-header #ast-hf-menu-1 .sub-menu .menu-item > .menu-link{
font-size:13.5px !important;
font-weight:400 !important;
letter-spacing:.2px !important;
text-transform:none !important;
line-height:1.5 !important;
color:var(--mm-ink-2) !important;
padding:9px 18px !important;
border-radius:0 !important;
box-shadow:none !important;
display:block !important;
transition:color .18s ease,background-color .18s ease !important;
}
.site-header #ast-hf-menu-1 .sub-menu .menu-item > .menu-link:hover,
.site-header #ast-hf-menu-1 .sub-menu .menu-item > .menu-link:focus-visible,
.site-header #ast-hf-menu-1 .sub-menu .menu-item.current-menu-item > .menu-link{
color:var(--mm-ink) !important;
background-color:var(--mm-cream-deep) !important;
}
/* Astra puts a decorative arrow glyph in front of every sub-menu label. */
.site-header #ast-hf-menu-1 .sub-menu .menu-link > .ast-icon.icon-arrow{
display:none !important;
}
/* The switcher is the last item in the bar and its panel is ~240px wide. Left
aligned it reached x=1429 of 1440 on a desktop and ran past the viewport at
1024, where overflow-x:clip would have cut it off in silence. Anchor it to
the right edge of its own item instead. */
.site-header #ast-hf-menu-1 > .menu-item.pll-parent-menu-item > .sub-menu{
left:auto !important;
right:0 !important;
}
/* ============================================================================
6. LANGUAGE SWITCHER
----------------------------------------------------------------------------
The trigger is "LT ▾": #9486 MM-PLL-CODE rewrites the title to the uppercase
language code, and `show_flags=0` on the five `_pll_menu_item` metas drops
the 16x11 base64 flag from the trigger and from the list.
The current language is hidden from the list by #9486 MM-DROPDOWN-CSS
(`.pll-parent-menu-item .sub-menu .current-lang{display:none!important}`),
so the dropdown shows the other four, each in its own language.
========================================================================= */
.site-header #ast-hf-menu-1 .sub-menu .lang-item > .menu-link{
text-transform:none !important;
letter-spacing:.2px !important;
}
/* Whatever Polylang wraps the name in, the 0.3em flag offset is dead weight
once the flag is gone. */
.site-header #ast-hf-menu-1 .pll-parent-menu-item > .menu-link > span[style],
.site-header #ast-hf-menu-1 .lang-item > .menu-link > span[style]{
margin-left:0 !important;
}
/* ============================================================================
7. CART
----------------------------------------------------------------------------
Competitors: `.ast-site-header-cart a,.ast-addon-cart-wrap{color:#b07a1b
!important}` (0,1,1)/(0,1,0); `.ast-site-header-cart svg{fill:#b07a1b
!important}` (0,1,1); `.ast-site-header-cart i.astra-icon::after{
background-color:#2e9e3f!important}` (0,2,2) — the green badge.
========================================================================= */
.site-header .ast-site-header-cart a.cart-container,
.site-header .ast-site-header-cart .ast-addon-cart-wrap{
color:var(--mm-ink-2) !important;
transition:color .2s ease !important;
}
.site-header .ast-site-header-cart a.cart-container:hover,
.site-header .ast-site-header-cart a.cart-container:hover .ast-addon-cart-wrap{
color:var(--mm-ink) !important;
}
.site-header .ast-site-header-cart .ast-addon-cart-wrap svg,
.site-header .ast-site-header-cart .ast-addon-cart-wrap .astra-icon svg{
fill:currentColor !important;
color:inherit !important;
width:20px !important;
height:20px !important;
}
/* With something in the cart Astra also prints the running total next to the
icon (`woo-header-cart-label-display = {cart_total_currency_symbol}`). It was
16px, weight 600, in --mm-gold-soft, which measures 3,66:1 on the cream
background - below AA for text this size, and far too loud for this header. */
.site-header .ast-site-header-cart .ast-woo-header-cart-info-wrap,
.site-header .ast-site-header-cart .ast-woo-header-cart-total,
.site-header .ast-site-header-cart .ast-woo-header-cart-total .amount,
.site-header .ast-site-header-cart .woocommerce-Price-amount,
.site-header .ast-site-header-cart .woocommerce-Price-currencySymbol{
font-family:var(--mm-sans) !important;
font-size:12px !important;
font-weight:600 !important;
letter-spacing:.4px !important;
color:var(--mm-ink-2) !important; /* 7,60:1 */
}
.site-header .ast-site-header-cart .ast-woo-header-cart-info-wrap{
margin-right:10px !important;
padding:0 !important;
}
/* The badge. White on --mm-gold is 4,66:1; on --mm-gold-soft it would be
3,72:1, which is why the soft gold is not used here. */
.site-header .ast-site-header-cart i.astra-icon::after,
.site-header .ast-site-header-cart .ast-addon-cart-wrap i.astra-icon::after{
background-color:var(--mm-gold) !important;
color:#ffffff !important;
font-family:var(--mm-sans) !important;
font-size:9px !important;
font-weight:600 !important;
letter-spacing:.2px !important;
line-height:15px !important;
min-width:15px !important;
height:15px !important;
padding:0 4px !important;
border-radius:9px !important;
top:-7px !important;
right:-10px !important;
border:0 none !important;
}
/* ============================================================================
8. MOBILE HEADER (Astra's breakpoint is 921px)
----------------------------------------------------------------------------
Competitors: `.ast-mobile-header-wrap .menu-toggle{...}` (0,2,0),
`.ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon{
background:url(bee.svg);width:30px;height:30px}` (0,3,0) and
`.ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon svg{
display:none!important}` (0,3,1) — the bee that replaces the hamburger.
The bee is deliberately kept: it is the brand mark, and swapping it for a
hamburger is a content decision, not a styling one.
========================================================================= */
@media (max-width:921px){
.site-header .ast-primary-header-bar .ast-builder-grid-row{
min-height:var(--mm-head-h-m) !important;
}
.site-header .site-branding .custom-logo,
.site-header .site-branding .custom-logo-link img{
width:72px !important; /* 72 x 51 */
}
.site-header .main-header-bar .ast-container,
.site-header .ast-primary-header-bar > .ast-container,
.site-header .site-primary-header-wrap.ast-container{
padding-left:14px !important;
padding-right:14px !important;
}
/* The mobile header has no .ast-container at all - the grid row sits straight
inside .ast-primary-header-bar - so the desktop gutter rule never reached it
and the burger sat at x=0. Competitor: `.ast-mobile-header-wrap
.ast-builder-grid-row-container,.ast-mobile-header-wrap .main-header-bar{
padding-right:16px!important}` (0,2,0). */
.site-header .ast-mobile-header-wrap .ast-primary-header-bar,
.site-header .ast-mobile-header-wrap .ast-builder-grid-row-container,
.site-header .ast-mobile-header-wrap .main-header-bar{
padding-left:14px !important;
padding-right:14px !important;
}
/* Astra sizes the three mobile columns to their content, so the logo sat 7px
left of centre (burger 40px, cart 36px). Equal side tracks centre it. */
.site-header .ast-mobile-header-wrap .ast-builder-grid-row.ast-grid-center-col-layout{
grid-template-columns:1fr auto 1fr !important;
}
.site-header .ast-mobile-header-wrap .site-header-primary-section-right{
justify-content:flex-end !important;
}
/* The centre track is auto-sized and came out 14,6px wider than the logo, so
the logo hung on its left edge. Centre it inside the track as well. */
.site-header .ast-mobile-header-wrap .site-header-primary-section-center .ast-builder-layout-element,
.site-header .ast-mobile-header-wrap .site-header-primary-section-center .site-branding{
justify-content:center !important;
width:100% !important;
}
.site-header .ast-mobile-header-wrap .menu-toggle{
min-width:40px !important;
min-height:40px !important;
padding:0 !important;
}
.site-header .ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon{
width:26px !important;
height:26px !important;
}
}
/* ============================================================================
9. OFF-CANVAS PANEL
----------------------------------------------------------------------------
#ast-mobile-popup lives in #ast-mobile-popup-wrapper, OUTSIDE #masthead, so
`header …` selectors from the Additional CSS never reach it — but
`.main-header-menu .sub-menu` (0,2,0) does. One id plus two classes clears it.
========================================================================= */
#ast-mobile-popup .ast-mobile-popup-inner{
background-color:var(--mm-cream) !important;
border-radius:0 !important;
}
/* Measured: the navigation column was 83px wide inside a 351px panel, so the
items wrapped mid-word and their separators stopped a quarter of the way
across the drawer. The cause is the Additional CSS rule
`.ast-main-header-bar-alignment{padding-right:180px!important}` (0,1,0) —
written for the desktop bar, but this class is reused inside the off-canvas
drawer, which sits OUTSIDE #masthead where the `.site-header`-scoped reset
above cannot reach it. 263px box minus 180px padding = the 83px measured. */
#ast-mobile-popup .ast-main-header-bar-alignment{
padding-left:0 !important;
padding-right:0 !important;
}
#ast-mobile-popup .ast-main-header-bar-alignment,
#ast-mobile-popup .main-header-bar-navigation,
#ast-mobile-popup .site-navigation,
#ast-mobile-popup .main-navigation,
#ast-mobile-popup .main-header-menu{
width:100% !important;
max-width:100% !important;
}
#ast-mobile-popup .ast-mobile-popup-content,
#ast-mobile-popup .ast-builder-menu-mobile{
padding-left:22px !important;
padding-right:22px !important;
}
/* Astra's close button carries a 1px dotted border of its own. */
#ast-mobile-popup #menu-toggle-close.menu-toggle-close{
border:0 none !important;
background:none !important;
color:var(--mm-ink-2) !important;
}
#ast-mobile-popup .main-header-menu > .menu-item > .menu-link{
font-family:var(--mm-sans) !important;
font-size:13px !important;
font-weight:600 !important;
letter-spacing:1.3px !important;
text-transform:uppercase !important;
line-height:1.9 !important;
color:var(--mm-ink-2) !important;
background:none !important;
background-color:transparent !important;
border-radius:0 !important;
padding:14px 4px !important;
}
#ast-mobile-popup .main-header-menu > .menu-item > .menu-link:hover,
#ast-mobile-popup .main-header-menu > .menu-item.current-menu-item > .menu-link{
color:var(--mm-ink) !important;
background:none !important;
background-color:transparent !important;
}
#ast-mobile-popup .main-header-menu .sub-menu{
background-color:transparent !important;
border:0 none !important;
box-shadow:none !important;
padding:0 0 6px 0 !important;
margin:0 !important;
}
#ast-mobile-popup .main-header-menu .sub-menu .menu-link{
font-size:14px !important;
font-weight:400 !important;
letter-spacing:.2px !important;
text-transform:none !important;
color:var(--mm-ink-2) !important;
background:none !important;
background-color:transparent !important;
border-radius:0 !important;
box-shadow:none !important;
padding:10px 4px 10px 18px !important;
}
#ast-mobile-popup .main-header-menu .sub-menu .menu-link > .ast-icon.icon-arrow{
display:none !important;
}
#ast-mobile-popup .main-header-menu .menu-item{
border-bottom:1px solid var(--mm-line) !important;
position:relative !important;
}
/* Astra's row toggle is a sibling of the link, not a child; without this the
label of a row that has one ("SUŽINOK", "LT") sat below the separator. */
#ast-mobile-popup .main-header-menu > .menu-item > .ast-menu-toggle{
position:absolute !important;
top:0 !important;
right:0 !important;
width:52px !important;
height:52px !important;
background:none !important;
border:0 none !important;
color:var(--mm-ink-2) !important;
}
#ast-mobile-popup .main-header-menu .sub-menu .menu-item{
border-bottom:0 none !important;
}
/* ============================================================================
10. FOCUS — keyboard only
----------------------------------------------------------------------------
:focus-visible, never :focus. A mouse click on the logo or the burger must
not leave a ring; Tab must.
========================================================================= */
.site-header a:focus,
.site-header button:focus,
#ast-mobile-popup a:focus,
#ast-mobile-popup button:focus,
footer.site-footer a:focus{ outline:none !important; }
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header .ast-header-navigation-arrow:focus-visible,
#ast-mobile-popup a:focus-visible,
#ast-mobile-popup button:focus-visible,
footer.site-footer a:focus-visible{
outline:2px solid var(--mm-gold) !important;
outline-offset:3px !important;
border-radius:1px !important;
}
/* ============================================================================
11. FOOTER
----------------------------------------------------------------------------
Style only — every string stays exactly as the Customizer and #9486
MM-FOOTER-COPYRIGHT produce it.
Competitors: `footer.site-footer{background-color:#fffdf9!important;
border-top:0 none!important}` (0,1,1); `.site-below-footer-wrap a,
.site-footer a{color:#b07a1b!important;text-decoration:none!important}`
(0,1,0)/(0,1,1); and, printed last of all in wp_footer,
#9486 MM-A11Y `body .site-below-footer-wrap a{color:#976917!important}`
(0,1,2).
The layout fix: the copyright block sits in column 1 of a four-column grid
whose other three columns are empty, so one line of text wrapped into four
on a 1440 desktop. One column, full width.
========================================================================= */
body footer.site-footer{
background-color:var(--mm-cream-deep) !important;
border-top:1px solid var(--mm-line) !important;
margin-top:0 !important;
}
body footer.site-footer .site-below-footer-wrap{
background-color:transparent !important;
border-top:0 none !important;
padding:0 !important;
}
/* width:100% is load-bearing. The wrap is a grid and this box shrink-wrapped to
its one line of text (measured 766px of 1440), so max-width alone left the
copyright floating in the middle of the page. */
body footer.site-footer .ast-builder-grid-row-container-inner{
width:100% !important;
max-width:var(--mm-shell) !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:20px !important;
padding-right:20px !important;
}
body footer.site-footer .ast-builder-footer-grid-columns{
grid-template-columns:1fr !important;
display:block !important;
}
body footer.site-footer .site-footer-below-section-2,
body footer.site-footer .site-footer-below-section-3,
body footer.site-footer .site-footer-below-section-4{
display:none !important;
}
/* Two nested boxes carry this class - the builder element and the copyright
div inside it. Padding on both doubled the footer to 192px. */
body footer.site-footer .ast-footer-copyright{
padding:0 !important;
text-align:left !important;
width:100% !important;
}
body footer.site-footer .ast-builder-layout-element.ast-footer-copyright{
padding:34px 0 36px !important;
}
body footer.site-footer .ast-footer-copyright,
body footer.site-footer .ast-footer-copyright p,
body footer.site-footer .ast-footer-copyright span{
font-family:var(--mm-sans) !important;
font-size:13px !important;
font-weight:400 !important;
line-height:2 !important;
letter-spacing:.3px !important;
text-transform:none !important; /* the Customizer asks for
uppercase; at 13px with LT
diacritics it reads as shouting */
color:var(--mm-ink-2) !important; /* 6,74:1 on cream-deep */
margin:0 !important;
}
body footer.site-footer .site-below-footer-wrap a,
body footer.site-footer .site-below-footer-wrap a:link,
body footer.site-footer .site-below-footer-wrap a:visited,
body footer.site-footer .ast-footer-copyright a{
color:var(--mm-ink-2) !important; /* 6,74:1 — links are quiet here,
gold is the hover signal */
text-decoration:none !important;
transition:color .18s ease !important;
border-bottom:1px solid transparent !important;
}
body footer.site-footer .site-below-footer-wrap a:hover,
body footer.site-footer .site-below-footer-wrap a:focus-visible,
body footer.site-footer .ast-footer-copyright a:hover{
color:var(--mm-gold) !important; /* 4,07:1 on cream-deep — a hover
state, not a resting one; the
underline carries the meaning */
text-decoration:none !important;
border-bottom-color:var(--mm-gold) !important;
}
@media (max-width:921px){
body footer.site-footer .ast-builder-layout-element.ast-footer-copyright{
padding:26px 0 28px !important;
}
body footer.site-footer .ast-builder-grid-row-container-inner{
padding-left:14px !important;
padding-right:14px !important;
}
}
/* ============================================================================
9. THE CONTACT PAGE MUST KEEP ITS NAVIGATION (L2-016)
----------------------------------------------------------------------------
Competitor: Additional CSS, "POLITIKŲ PUSLAPIAI - SLĖPTI NAVIGACIJĄ":
body.page-id-3, body.page-id-9343, body.page-id-9344, body.page-id-9345,
body.page-id-9346, body.page-id-9352 { display:none !important } (0,2,1)
9352 is Rekvizitai, and Rekvizitai is what the main menu's "Kontaktai" item
now points at (#9486 MM-CONTACT-MENU). A buyer who clicks Kontaktai lands on
a page with no way back except the logo.
Measured before touching anything, guest view, all five translations:
/rekvizitai/ 9352 nav display:none 0x0
/en/company-details/ 9583 nav display:flex 347x78
/lv/rekviziti/ 9589 nav display:flex 372x78
/et/ettevotte-andmed/ 9595 nav display:flex 338x78
/ru/rekvizity/ 9601 nav display:flex 399x78
So the rule only ever covered the Lithuanian page: the other four markets
already show the navigation there. This restores the Lithuanian page to what
the other four already do - it does not introduce a new behaviour.
The five legal pages are left hidden, in every language, exactly as they are:
that is the part of the Additional CSS rule that still expresses an intent.
Additional CSS itself is NOT edited - out-specified instead, (0,3,2) > (0,2,1),
so the change is one line to reverse.
========================================================================= */
html body.page-id-9352 .site-header .ast-builder-menu-1{
display:flex !important; /* measured value on the four
translated pages that work */
}