/**
* Masthead brand row + header CTA cluster.
*
* The7 renders the near-logo widget row as an absolutely positioned block
* pinned to the bottom-right of .branding, so the row reflowed on its own and
* the masthead measured 282px at 1440 but 355px at 1200. This puts the row
* back in flow and lays .branding out as one vertically centred line — brand
* left, actions right — with two gaps and one height ladder:
*
* group A DONATE (filled) + Subscribe to E-News (outline), 40px
* hairline
* group B phone, then the two banner images, 48px
*
* Everything is scoped to `.branding .mini-widgets`: #top-bar carries a SECOND
* .mini-widgets, and The7 re-renders these same four widgets inside the mobile
* menu (that is what the in-menu-*-switch / near-logo-* classes switch on).
* Neither copy may be restyled from here.
*/
.masthead .header-bar {
/* dt-custom floors this at 220px, which is what pinned the masthead at 266
however far the branding row tightened. */
min-height: 0 !important;
--ausom-action-ink: #06342c;
/* Same derivation as the plugin's action tokens: the raw theme accent
resolves to #61CE70 (2.0:1 on white), the 50% ink mix to 4.78:1, the 34%
mix to 6.65:1. Static hex first for engines without color-mix(). */
--ausom-action-accent: #34814e;
--ausom-action-accent-strong: #256843;
--ausom-header-rule: rgba( 6, 52, 44, 0.16 );
--ausom-header-muted: #4a5c56;
}
@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
.masthead .header-bar {
--ausom-action-accent: color-mix( in srgb, var( --e-global-color-accent, #2d8b78 ) 50%, var( --ausom-action-ink ) );
--ausom-action-accent-strong: color-mix( in srgb, var( --e-global-color-accent, #2d8b78 ) 34%, var( --ausom-action-ink ) );
}
}
/* === Brand row =========================================================== */
.masthead .header-bar .branding {
/* The7 generates the branding box model into dt-custom (its own padding
plus the absolute widget row), hence the overrides: 5px + the 96px logo
+ 5px = 106px, which with the untouched 51px #top-bar and the 52px nav
band is a ~209px masthead at every width from 1200 up. */
display: flex !important;
align-items: center;
flex-wrap: wrap;
column-gap: 40px;
row-gap: 14px;
padding: 5px 0 !important;
min-height: 0 !important;
text-align: left;
}
.masthead .header-bar .branding > a,
.masthead .header-bar .branding > *:not( .mini-widgets ) > a {
/* The7 leaves the logo link inline-block, which adds ~4px of descender
space below the image and pushes the row past its content height.
flex: none keeps the brand at full size — the CTA cluster is what gives
way if the row ever runs out of width. */
display: block;
flex: 0 0 auto;
line-height: 0;
}
.masthead .header-bar .branding > a img,
.masthead .header-bar .branding > *:not( .mini-widgets ) > a img {
/* 210px is the 300x137 original's exact ratio at 95.9px tall — scaled by
width only so the logo is never distorted or cropped. */
width: 210px !important;
height: auto !important;
max-width: 100%;
}
/* === CTA cluster ========================================================= */
.masthead .header-bar .branding .mini-widgets {
position: static !important;
display: flex !important;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
/* dt-custom gives the absolute row a fixed ~270px width, which the row in
flow would overflow instead of sizing to. */
width: auto !important;
max-width: none !important;
min-width: 0;
column-gap: 18px;
row-gap: 10px;
margin-left: auto;
padding: 0;
font-size: 13px;
line-height: 1.2;
}
.masthead .header-bar .branding .mini-widgets .text-area {
display: flex;
align-items: center;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.masthead .header-bar .branding .mini-widgets .text-area p {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
}
/* The stored widget value ends in a
INSIDE the DONATE anchor, which kept
that group 20px taller than the 40px actions beside it. `display: none` on the
br loses on the live page, so the anchor is made a flex container instead —
a flex container generates no line box for a stray
at all. */
.masthead .header-bar .branding .mini-widgets .text-area p br {
display: none;
}
/* The7 ships the actions with a 10px vertical margin, which made this group 60px
against the 40px pills inside it and set the whole row's height. */
.masthead .header-bar .branding .mini-widgets .text-area.first a,
.masthead .header-bar .branding .mini-widgets .text-area a.ausom-enews-trigger {
margin: 0 !important;
}
/* --- Group A: the two actions --- */
/* Both actions are styled by class and never by position: The7 hands the LAST
anchor in this widget a 2px mint border and 16px/600 type from a selector we
cannot see, so the box properties it sets are overridden explicitly. */
.masthead .header-bar .branding .mini-widgets .text-area.first a,
.masthead .header-bar .branding .mini-widgets .text-area a.ausom-enews-trigger {
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center;
height: 40px !important;
padding: 0 18px !important;
font-size: 13px !important;
line-height: 1 !important;
letter-spacing: 0.02em;
text-decoration: none !important;
white-space: nowrap !important;
vertical-align: middle;
border: 1px solid transparent !important;
border-radius: 2px;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.masthead .header-bar .branding .mini-widgets .text-area.first a:not( .ausom-enews-trigger ) {
/* One step up the ladder from the outline action (13px/600) and the phone
(13px/500), plus a floor on the width: this is the money CTA and the
banners beside it carry their own loud red artwork. */
justify-content: center;
min-width: 124px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.04em;
color: #ffffff !important;
background-color: var( --ausom-action-accent ) !important;
border-color: var( --ausom-action-accent ) !important;
}
/* DONATE's pale-green box is drawn by markup stored inside the widget value,
so its inline styling has to be flattened for the fill above to read as one
box rather than a box inside a box. */
.masthead .header-bar .branding .mini-widgets .text-area.first a:not( .ausom-enews-trigger ) * {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font: inherit !important;
color: inherit !important;
letter-spacing: inherit !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.masthead .header-bar .branding .mini-widgets .text-area.first a:not( .ausom-enews-trigger ):hover,
.masthead .header-bar .branding .mini-widgets .text-area.first a:not( .ausom-enews-trigger ):focus {
background-color: var( --ausom-action-accent-strong ) !important;
border-color: var( --ausom-action-accent-strong ) !important;
}
.masthead .header-bar .branding .mini-widgets .text-area a.ausom-enews-trigger {
font-weight: 600 !important;
color: var( --ausom-action-accent-strong ) !important;
background-color: transparent !important;
border-color: var( --ausom-action-accent ) !important;
cursor: pointer;
}
.masthead .header-bar .branding .mini-widgets .text-area a.ausom-enews-trigger:hover,
.masthead .header-bar .branding .mini-widgets .text-area a.ausom-enews-trigger:focus {
color: #ffffff !important;
background-color: var( --ausom-action-accent-strong ) !important;
border-color: var( --ausom-action-accent-strong ) !important;
}
.masthead .header-bar .branding .mini-widgets .text-area a:focus-visible {
outline: 2px solid var( --ausom-action-accent );
outline-offset: 2px;
}
/* --- Group separator + phone --- */
/* The phone widget: the only near-logo widget carrying both in-menu switches
without .first, so the groups are separated by class rather than by index. */
.masthead .header-bar .branding .mini-widgets .text-area.in-menu-first-switch.in-menu-second-switch {
gap: 24px;
margin-left: 6px !important;
}
.masthead .header-bar .branding .mini-widgets .text-area.in-menu-first-switch.in-menu-second-switch::before {
content: "";
flex: 0 0 auto;
width: 1px;
/* 8px shorter than the action boxes so the rule reads as a separator
between the two groups, not as a full-height column. */
height: 32px;
background-color: var( --ausom-header-rule );
}
/* The stored value wraps the number in a span carrying its own 26px/600 black
type, so the descendants are reset too — and with !important, since that size
comes from the markup itself and outranks any selector we can write. */
.masthead .header-bar .branding .mini-widgets .text-area.in-menu-first-switch.in-menu-second-switch p *,
.masthead .header-bar .branding .mini-widgets .text-area.in-menu-first-switch.in-menu-second-switch a * {
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
letter-spacing: inherit !important;
}
.masthead .header-bar .branding .mini-widgets .text-area.in-menu-first-switch.in-menu-second-switch p,
.masthead .header-bar .branding .mini-widgets .text-area.in-menu-first-switch.in-menu-second-switch a {
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: 0.01em;
color: var( --ausom-header-muted ) !important;
text-decoration: none !important;
white-space: nowrap;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.masthead .header-bar .branding .mini-widgets .text-area.in-menu-first-switch.in-menu-second-switch a:hover {
color: var( --ausom-action-accent-strong ) !important;
}
/* --- Group B: the two banner images --- */
.masthead .header-bar .branding .mini-widgets .text-area:not( .first ):not( .in-menu-second-switch ) a {
display: block !important;
padding: 0 !important;
line-height: 0 !important;
background: none !important;
border: 0 !important;
}
.masthead .header-bar .branding .mini-widgets .text-area img {
display: block;
box-sizing: border-box;
/* One height for both banners, scale driven by height alone so neither
190x63 original is distorted (52px tall = 152.8px wide). 52px is the top
of the usable band: both banners carry two lines of ~13px baked type,
which is already at ~11px here. */
height: 52px !important;
width: auto !important;
max-width: none;
border: 1px solid var( --ausom-header-rule ) !important;
border-radius: 2px;
}
/* === Nav band ============================================================ */
/* No #main-nav exists on this build: the measured chain is
header.header-bar > nav.navigation > ul#primary-menu.main-nav > li > a, and the
mint band is painted by nav.navigation::before (its own box, full-bleed), not
by a background on the nav or the ul. Height comes from the anchors' 15px
vertical padding, so that is what shrinks; the ::before is left to follow the
nav's own height so its full-bleed positioning is untouched. */
.masthead .header-bar nav.navigation ul.main-nav > li > a {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* The dividers are borders on li::before (transparent background, 15px tall), so
only the border colour is replaced — light enough to stop competing with the
labels either side. */
.masthead .header-bar nav.navigation ul.main-nav > li,
.masthead .header-bar nav.navigation ul.main-nav > li > a,
.masthead .header-bar nav.navigation ul.main-nav > li::before,
.masthead .header-bar nav.navigation ul.main-nav > li::after {
border-color: var( --ausom-header-rule ) !important;
}
/* === Widths ============================================================== */
@media ( min-width: 1200px ) {
.masthead .header-bar .branding,
.masthead .header-bar .branding .mini-widgets {
flex-wrap: nowrap;
}
}
@media ( max-width: 1199px ) {
/* Around here The7's first switch moves the phone and the second banner
into the mobile menu, which takes the group hairline with them, so the
banner that stays carries the group gap on its own. */
.masthead .header-bar .branding .mini-widgets .text-area.near-logo-first-switch:not( .first ) {
margin-left: 10px !important;
}
}
/* === Mobile menu panel ===================================================
The7 re-renders the same microwidgets into `.mobile-mini-widgets-in-menu`
inside the panel, outside every `.branding` selector above — so the panel
otherwise keeps the raw theme treatment: content-width pills on ragged
lines and a 26px/600 phone from the stored markup. Measured live: the panel
copies do NOT carry `.text-area.first`, and the action tokens declared on
`.header-bar` do not reach here, so both are restated below. */
.mobile-header-scrollbar-wrap {
--ausom-action-ink: #06342c;
--ausom-action-accent: #34814e;
--ausom-action-accent-strong: #256843;
--ausom-header-rule: rgba( 6, 52, 44, 0.16 );
--ausom-header-muted: #4a5c56;
}
@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
.mobile-header-scrollbar-wrap {
--ausom-action-accent: color-mix( in srgb, var( --e-global-color-accent, #2d8b78 ) 50%, var( --ausom-action-ink ) );
--ausom-action-accent-strong: color-mix( in srgb, var( --e-global-color-accent, #2d8b78 ) 34%, var( --ausom-action-ink ) );
}
}
/* Making the secondary list visible in-flow grew the panel past the screen, and
The7 ships the panel container with `overflow-y: hidden` (it scrolls 20px, the
slack it needs for its own chrome) — so the tail was unreachable. The panel
scrolls natively now; the cluster's bottom padding keeps the last row clear of
the site's fixed language switcher (`.gt_switcher_wrapper`, 48px, z 999999). */
.dt-mobile-header {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.mobile-header-scrollbar-wrap ul.mobile-main-nav > li > a {
color: #00454c;
}
/* --- Cluster shell -------------------------------------------------------
The7 ships `padding: 30px 0` on the cluster and `margin: 5px 20px 5px 0` on
every child: the asymmetric right margin is what pulled each widget off the
nav's left edge and gave the block its ragged look. One column, one gap, one
hairline instead. */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 14px;
width: 100%;
/* No top margin: the hairline sits flush against the nav's own bottom edge so
the two never read as a double rule. */
margin: 0 !important;
/* The site's floating language switcher is fixed over the lower-left of the
viewport, and this cluster is the last thing in a panel taller than the
screen — without clearance the social row scrolls to rest underneath it. */
padding: 18px 0 72px !important;
border-top: 1px solid var( --ausom-header-rule );
text-align: left;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu > * {
box-sizing: border-box;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
}
/* --- Reading order (The7 fixes the DOM order) --- */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area.near-logo-first-switch:has( a.ausom-enews-trigger ) {
order: 1;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area.in-menu-first-switch {
order: 2;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area.near-logo-first-switch:has( img ) {
order: 3;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav {
order: 4;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .soc-ico {
order: 5;
}
/* --- Actions --- */
/* No `display` is set on the widget box itself: two of these copies are hidden
phone duplicates and any display declaration here would unhide them. */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area {
padding: 0 !important;
}
/* The7 leaves this shrink-to-fit — it measured 155px inside the 222px
widget, which is why the actions never reached the panel width. The
percentage resolves against the widget box whatever display or float the
theme lands on either box. */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area p {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Text links only: the banner widget is an anchor wrapping an ![]()
. */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a:not( :has( img ) ) {
box-sizing: border-box !important;
display: flex !important;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 100% !important;
height: 44px !important;
margin: 0 !important;
padding: 0 16px !important;
border: 1px solid var( --ausom-action-accent ) !important;
border-radius: 2px;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.02em;
text-align: center;
text-decoration: none !important;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a:not( :has( img ) ) * {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a:not( :has( img ) ):not( .ausom-enews-trigger ),
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a:not( :has( img ) ):not( .ausom-enews-trigger ) * {
background: var( --ausom-action-accent ) !important;
border-color: var( --ausom-action-accent ) !important;
color: #ffffff !important;
/* The stored markup nests its own boxed element inside the link, which drew a
pale frame inside our fill. */
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a:not( :has( img ) ):not( .ausom-enews-trigger ):hover,
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a:not( :has( img ) ):not( .ausom-enews-trigger ):focus {
background: var( --ausom-action-accent-strong ) !important;
border-color: var( --ausom-action-accent-strong ) !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a.ausom-enews-trigger,
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a.ausom-enews-trigger * {
background: transparent !important;
color: var( --ausom-action-accent-strong ) !important;
font-size: 13px !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a.ausom-enews-trigger:hover,
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a.ausom-enews-trigger:focus,
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a.ausom-enews-trigger:hover *,
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area a.ausom-enews-trigger:focus * {
background: var( --ausom-action-accent-strong ) !important;
border-color: var( --ausom-action-accent-strong ) !important;
color: #ffffff !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu a:focus-visible {
outline: 2px solid var( --ausom-action-accent );
outline-offset: 2px;
}
/* --- Phone --- */
/* The number carries its own 26px/600 from the stored markup, so the reset has
to reach the descendants and outrank an inline size. It is plain text, not a
link. */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area:not( :has( a ) ) p,
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area:not( :has( a ) ) p * {
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: 0.01em !important;
color: var( --ausom-header-muted ) !important;
text-align: left !important;
}
/* --- Banner --- */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area:has( img ) p {
align-items: flex-start;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area:has( img ) a {
display: block !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
background: none !important;
border: 0 !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .text-area img {
display: block;
max-width: 100%;
height: auto;
border-radius: 2px;
}
/* --- Secondary link list --- */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav {
position: static !important;
display: block !important;
height: auto !important;
padding-top: 18px !important;
overflow: visible !important;
border-top: 1px solid var( --ausom-header-rule );
}
/* The label prints the source menu's admin name ("Top Bar Menu") — meaningless
to a visitor. */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav .menu-select {
display: none !important;
}
/* The7 renders these submenus as absolutely positioned hover dropdowns; on the
phone panel they measured off-panel at x=114 and x=355, so the links were
unreachable. Forced back into flow as a plain list. */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav ul.mini-sub-nav {
box-sizing: border-box !important;
position: static !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
pointer-events: auto !important;
list-style: none !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav ul.mini-sub-nav ul.mini-sub-nav {
padding-left: 14px !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav li.menu-item {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav li.menu-item > a {
box-sizing: border-box;
display: flex !important;
align-items: center;
width: 100% !important;
min-height: 40px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: var( --ausom-header-muted ) !important;
text-decoration: none !important;
background: none !important;
border: 0 !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav li.menu-item > a span {
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
color: inherit !important;
background: none !important;
border: 0 !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav li.menu-item > a:hover,
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .mini-nav li.menu-item > a:focus {
color: var( --ausom-action-ink ) !important;
}
/* --- Social row --- */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .soc-ico {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 10px;
height: auto !important;
text-align: left !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .soc-ico a {
box-sizing: border-box;
display: inline-flex !important;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 34px !important;
height: 34px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 16px !important;
line-height: 1 !important;
color: var( --ausom-action-ink ) !important;
border-color: var( --ausom-header-rule ) !important;
}
/* The visible disc is the link's ::before, filled by The7 at 20% grey, and the
glyph inside it is white — on a white panel that reads as a disabled control.
The disc takes the brand colour and the glyph stays white on top of it.
`-webkit-text-fill-color` is set because The7 paints the icon font with it,
which overrides `color` outright. */
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .soc-ico a::before {
width: 32px !important;
height: 32px !important;
background: var( --ausom-action-accent ) !important;
border-radius: 100px;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .soc-ico a .soc-font-icon,
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .soc-ico a .soc-font-icon::before {
font-size: 15px !important;
line-height: 1 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
fill: #ffffff !important;
}
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .soc-ico a:hover::before,
.mobile-header-scrollbar-wrap .mobile-mini-widgets-in-menu .soc-ico a:focus::before {
background: var( --ausom-action-accent-strong ) !important;
}