/*
* Slengo Zine — front-end editorial overlay.
*
* Holds only the primitives FSE/theme.json can't express natively:
* slanted footer band, teal-rail dictionary callout, drop cap,
* section hairline rule, CSS-counter numbered list, chip cloud,
* cover-label photographic fallback. Everything else (palette, type
* scale, spacing, block gaps) lives in theme.json.
*/
/* ---------------------------------------------------------------- */
/* Kicker — uppercase spaced eyebrow. Used on patterns and parts. */
/* The color/size/letter-spacing are usually set inline via the */
/* block's typography panel; this class is a fallback/alias. */
/* ---------------------------------------------------------------- */
.kicker {
font-family: var(--wp--preset--font-family--sans);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--wp--preset--color--accent-darker);
margin: 0;
}
.kicker--muted { color: var(--wp--preset--color--ink-soft); }
.kicker--gold { color: var(--wp--preset--color--accent); }
.kicker--blue { color: var(--wp--preset--color--primary); }
/* ---------------------------------------------------------------- */
/* Section rule — the "heading + thin rule + CTA link" pattern */
/* used under each homepage section. */
/* ---------------------------------------------------------------- */
.slengo-section-rule { gap: var(--wp--preset--spacing--40); }
.slengo-section-rule .slengo-rule-grow,
.slengo-section-rule .wp-block-separator {
flex: 1 1 auto;
min-width: 40px;
margin-block: 0;
border: 0;
border-top: 1px solid currentColor;
opacity: 1;
height: 0;
}
/* ---------------------------------------------------------------- */
/* Masthead — accents already set inline; add a touch of kerning. */
/* ---------------------------------------------------------------- */
.slengo-masthead .wp-block-site-title a,
.slengo-masthead-title a {
text-decoration: none;
color: inherit;
}
.slengo-masthead-title em {
color: var(--wp--preset--color--accent-darker);
font-style: italic;
font-weight: inherit;
}
/* ---------------------------------------------------------------- */
/* Footer — slanted top edge. Matches the VariantA design: the dark */
/* band appears to tilt -1.2deg out of the hero above it. */
/* ---------------------------------------------------------------- */
.slengo-footer.slant-band {
position: relative;
margin-top: var(--wp--preset--spacing--60);
}
.slengo-footer.slant-band::before {
content: "";
position: absolute;
left: -3%;
right: -3%;
top: -18px;
height: 40px;
background: inherit;
transform: rotate(-1.2deg);
z-index: 0;
pointer-events: none;
}
/* -------------------------------------------------------------------- */
/* Hide the quick-adsense-reloaded sticky wrapper when its Yobee */
/* target slot stays empty (user outside ad target geos → Yobee never */
/* injects). The wrapper carries an inline rgba(255,255,255,0.7) */
/* background that otherwise paints a translucent white hairline across */
/* the viewport bottom on iOS. :has + :empty does the right thing with */
/* zero JS and automatically re-shows the ad if/when Yobee injects. */
/* -------------------------------------------------------------------- */
.quads-sticky:has(#yobee-sticky-magazine:empty) {
display: none !important;
}
.slengo-footer > * { position: relative; z-index: 1; }
/* Footer navigation — force the WP nav block to render flat list of links. */
.slengo-footer .wp-block-navigation {
--wp--preset--spacing--blockGap: var(--wp--preset--spacing--20);
}
.slengo-footer .wp-block-navigation__responsive-container-open,
.slengo-footer .wp-block-navigation__responsive-container-close { display: none; }
/* ---------------------------------------------------------------- */
/* Dictionary strip — chip cloud (the "top parole" pills). */
/* ---------------------------------------------------------------- */
.slengo-chip-cloud { gap: var(--wp--preset--spacing--20); }
.slengo-chip {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0;
padding: 0.5rem 0.9rem;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: transform 0.25s ease-out;
}
.slengo-chip:hover { transform: translateY(-2px); }
.slengo-chip__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--wp--preset--color--accent-darker);
color: #fff;
font-family: var(--wp--preset--font-family--sans);
font-size: 0.625rem;
font-weight: 700;
}
.slengo-chip__word,
a.slengo-chip__word,
.slengo-chip a.slengo-chip__word {
font-family: var(--wp--preset--font-family--serif);
font-size: 0.9375rem;
font-weight: 700;
color: var(--wp--preset--color--ink);
text-decoration: none;
}
a.slengo-chip__word:hover {
color: var(--wp--preset--color--accent-darker);
text-decoration: none;
}
/* ---------------------------------------------------------------- */
/* Dictionary callout — the inline white card with the teal rail, */
/* used inside article bodies. */
/* ---------------------------------------------------------------- */
.slengo-dict-callout {
position: relative;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.slengo-dict-callout::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 6px;
border-radius: 0 2px 2px 0;
background: var(--wp--preset--color--rail);
}
.slengo-dict-callout > * { padding-left: 0.25rem; }
.slengo-dict-example {
font-family: var(--wp--preset--font-family--sans);
}
/* ---------------------------------------------------------------- */
/* Numbered list — "Altre uscite" with big vermillion ordinals */
/* generated by CSS counters. */
/* ---------------------------------------------------------------- */
.slengo-numbered-list .wp-block-post-template {
counter-reset: slengo-ord;
}
.slengo-numbered-item {
counter-increment: slengo-ord;
position: relative;
padding-left: 3.6rem;
}
.slengo-numbered-item::before {
content: counter(slengo-ord, decimal-leading-zero);
position: absolute;
left: 0;
top: var(--wp--preset--spacing--30);
font-family: var(--wp--preset--font-family--serif);
font-weight: 900;
font-size: 2.6rem;
line-height: 1;
letter-spacing: -0.02em;
color: var(--wp--preset--color--accent-darker);
opacity: 0.45;
font-variant-numeric: tabular-nums;
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------- */
/* Article body — drop cap on the first paragraph and reading */
/* rhythm tuned for long-form. */
/* ---------------------------------------------------------------- */
.slengo-post-content {
font-family: var(--wp--preset--font-family--sans);
font-size: 1.0625rem;
line-height: 1.7;
color: var(--wp--preset--color--ink);
}
.slengo-post-content > p,
.slengo-post-content > h2,
.slengo-post-content > h3 {
max-width: 640px;
}
.slengo-post-content > h2 {
margin-top: 2.5rem;
margin-bottom: 0.8rem;
font-size: 2rem;
}
.slengo-post-content > h3 {
margin-top: 2rem;
margin-bottom: 0.6rem;
font-size: 1.4rem;
}
.slengo-post-content > p:first-of-type::first-letter {
font-family: var(--wp--preset--font-family--serif);
font-weight: 900;
font-size: 5.2em;
float: left;
line-height: 0.85;
margin: 0.05em 0.08em -0.1em 0;
color: var(--wp--preset--color--accent-darker);
}
/* Re-underline inline links inside the post body (theme default is no- */
/* underline; article prose wants them visible so readers spot citations). */
.slengo-post-content a,
.slengo-post-content a:hover {
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* Embeds (oembed cards, tweets, youtube) span the full post-content width. */
.slengo-post-content .wp-block-embed,
.slengo-post-content .wp-block-embed__wrapper,
.slengo-post-content .wp-block-embed iframe {
width: 100%;
max-width: 100%;
}
.slengo-post-content figure.wp-block-embed {
margin-inline: 0;
}
/* Editorial callout — paper background with a Slengo mark on the left, */
/* used for notices inside or around post content (e.g. the "Clicca sui */
/* termini sottolineati" dictionary hint injected after the first */
/* paragraph by the_content filter in functions.php). */
.slengo-callout {
position: relative;
display: grid;
grid-template-columns: 40px 1fr;
gap: 0.9rem;
align-items: center;
background: #ffffff;
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
border-radius: 10px;
padding: 0.9rem 1.2rem;
margin: 1.6rem 0;
}
.slengo-callout::before {
content: "";
width: 40px;
height: 40px;
background-image: url("../images/icon-logo.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.slengo-callout > p { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.slengo-post-content .slengo-dict-notice { max-width: none; }
/* Sample of a "linked word" in the dictionary notice — same red + under- */
/* line as the real inline dictionary links in post prose, so readers can */
/* pattern-match what to click on. */
.slengo-callout__link-sample {
color: var(--wp--preset--color--accent-darker);
text-decoration: underline;
text-underline-offset: 0.15em;
font-weight: inherit;
}
/* External-link icon for dictionary links — tried and parked. Asset stays */
/* at assets/images/ico-external-link.png for the next iteration's design. */
.slengo-post-content .wp-block-pullquote {
margin: 1.8rem 0;
padding: 1.1rem 0 1.1rem 1.4rem;
border-left: 4px solid var(--wp--preset--color--accent-darker);
}
.slengo-post-content .wp-block-pullquote p {
font-family: var(--wp--preset--font-family--serif);
font-style: italic;
font-weight: 700;
font-size: 1.625rem;
line-height: 1.25;
}
.slengo-post-content .wp-block-pullquote cite {
font-family: var(--wp--preset--font-family--sans);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--ink-soft);
font-style: normal;
}
/* ---------------------------------------------------------------- */
/* Article rail — sticky sidebar, offset defined in the block above. */
/* ---------------------------------------------------------------- */
.slengo-trending-list .wp-block-post-template {
counter-reset: slengo-trend;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--30);
}
.slengo-trending-list > .wp-block-post-template > li {
counter-increment: slengo-trend;
position: relative;
padding-left: 2.2rem;
list-style: none;
}
.slengo-trending-list > .wp-block-post-template > li::before {
content: counter(slengo-trend);
position: absolute;
left: 0;
top: 0.1em;
font-family: var(--wp--preset--font-family--serif);
font-weight: 900;
font-size: 1.25rem;
color: var(--wp--preset--color--accent-darker);
opacity: 0.5;
}
/* ---------------------------------------------------------------- */
/* Featured image — soft hover lift. */
/* ---------------------------------------------------------------- */
.wp-block-post-featured-image a {
display: block;
overflow: hidden;
}
.wp-block-post-featured-image img {
display: block;
width: 100%;
transition: transform 0.35s ease-out;
}
.wp-block-post-featured-image a:hover img {
transform: scale(1.02);
}
/* ---------------------------------------------------------------- */
/* Featured-image fallback — when a post has no thumbnail, show the */
/* stylized cover treatment from the design brief (gradient + big */
/* outlined uppercase label) instead of an empty box. */
/* Applied at the template level via has-post-thumbnail check. */
/* ---------------------------------------------------------------- */
.wp-block-post-featured-image:has(> a:empty),
.wp-block-post-featured-image:empty {
background: linear-gradient(160deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 100%);
aspect-ratio: 16/10;
position: relative;
}
/* ---------------------------------------------------------------- */
/* Header — the nav menu (with its admin-configured search inline) */
/* needs its submenu hover explicitly set; default was white-on- */
/* white. Search-pill styling stays for when the menu includes one. */
/* Logo is a wide 4:1 image; site-logo block renders height from the */
/* aspect ratio, which compresses it to ~8px at width:36. Force a */
/* visible height and let the width follow the aspect. */
/* ---------------------------------------------------------------- */
header .wp-block-site-logo a.custom-logo-link img.custom-logo,
header .custom-logo {
height: 32px !important;
width: auto !important;
max-width: none !important;
}
.slengo-footer .wp-block-site-logo a.custom-logo-link img.custom-logo,
.slengo-footer .custom-logo {
height: 36px !important;
width: auto !important;
max-width: none !important;
}
header .wp-block-search__inside-wrapper {
background: rgba(255,255,255,0.12);
border: 0;
border-radius: 999px;
padding: 0.45rem 0.85rem;
}
header .wp-block-search__input {
background: transparent;
color: #fff;
border: 0;
font-size: 0.8125rem;
min-width: 180px;
padding-left: 1.65rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 0 center;
background-size: 14px 14px;
}
header .wp-block-search__input::placeholder {
color: rgba(255,255,255,0.7);
}
header .wp-block-search__button {
background: transparent;
color: rgba(255,255,255,0.8);
padding: 0;
border: 0;
}
header .wp-block-navigation .wp-block-navigation-item__content:hover,
header .wp-block-navigation .wp-block-navigation-item__content:focus {
color: var(--wp--preset--color--accent);
}
/* Submenu — paper card detached from the violet nav bar. */
/* The admin-configured menu has has-base-color + has-secondary-background- */
/* color on the submenu , both with !important from core. Override with */
/* equal specificity + !important so mine wins via source order. */
.wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container.has-background,
.wp-block-navigation .wp-block-navigation__submenu-container.has-secondary-background-color {
background-color: #ffffff !important;
color: var(--wp--preset--color--accent-darker) !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
padding: 6px !important;
min-width: 200px;
overflow: hidden;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
border-radius: 6px;
overflow: hidden;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:visited,
.wp-block-navigation .wp-block-navigation__submenu-container.has-base-color .wp-block-navigation-item__content {
color: var(--wp--preset--color--accent-darker) !important;
background-color: transparent !important;
text-decoration: none !important;
padding: 10px 14px;
font-weight: 700;
display: block;
border-radius: 6px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation__submenu-container.has-base-color .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container.has-base-color .wp-block-navigation-item__content:focus {
color: #ffffff !important;
background-color: var(--wp--preset--color--accent-darker) !important;
text-decoration: none !important;
}
/* -------------------------------------------------------------------- */
/* Nav — divide the internal menu (Categorie) from the external links */
/* (Shop, Dizionario). The last two href-matched items become pills. */
/* Desktop only — on the mobile overlay these become plain link rows. */
/* -------------------------------------------------------------------- */
@media (min-width: 782px) {
header .wp-block-navigation .wp-block-navigation-item:has(a[href="https://slengo.it"]) {
margin-left: var(--wp--preset--spacing--40);
position: relative;
}
header .wp-block-navigation .wp-block-navigation-item:has(a[href="https://slengo.it"])::before {
content: "";
position: absolute;
left: calc(var(--wp--preset--spacing--40) * -0.5);
top: 15%;
bottom: 15%;
width: 1px;
background: rgba(255,255,255,0.25);
}
/* Dizionario pill — surface card with ink text + book icon. */
header .wp-block-navigation a[href="https://slengo.it"] {
padding: 0.45rem 0.95rem;
background: var(--wp--preset--color--surface) !important;
color: var(--wp--preset--color--ink) !important;
border-radius: 999px;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
header .wp-block-navigation a[href="https://slengo.it"]:hover {
background: #ffffff !important;
color: var(--wp--preset--color--accent-darker) !important;
}
header .wp-block-navigation a[href="https://slengo.it"]::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
flex-shrink: 0;
}
/* Shop pill — filled gold/accent + cart icon. */
header .wp-block-navigation a[href*="shop.slengo.it"] {
padding: 0.45rem 0.95rem;
background: var(--wp--preset--color--accent);
color: #ffffff !important;
border-radius: 999px;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
header .wp-block-navigation a[href*="shop.slengo.it"]:hover {
background: var(--wp--preset--color--accent-darker);
color: #ffffff !important;
}
header .wp-block-navigation a[href*="shop.slengo.it"]::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
flex-shrink: 0;
}
}
/* ---------------------------------------------------------------- */
/* Byline row — avatar + "di [Name]" inline on line 1, date below. */
/* Applies to both featured-lead (no avatar) and article-header. */
/* ---------------------------------------------------------------- */
.slengo-byline {
align-items: center;
}
.slengo-byline > p { margin: 0; }
.slengo-byline .wp-block-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
display: block;
}
.slengo-byline__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.slengo-byline__text > .wp-block-group > p,
.slengo-byline__text > .wp-block-group > .wp-block-post-author-name,
.slengo-byline__text > .wp-block-post-date {
margin: 0;
}
/* ---------------------------------------------------------------- */
/* Breadcrumbs — never underline (WP default link style adds it). */
/* Post-terms when used as a kicker should also stay clean. */
/* ---------------------------------------------------------------- */
.slengo-breadcrumbs a,
.slengo-breadcrumbs a:hover,
.kicker a,
.kicker a:hover,
.wp-block-post-terms.kicker a,
.wp-block-post-terms.kicker a:hover {
text-decoration: none;
}
/* ---------------------------------------------------------------- */
/* simpletoc plugin — editorial styling for the in-article TOC. */
/* Left column is sticky; list uses hairline rules and serif copy. */
/* ---------------------------------------------------------------- */
.slengo-article-toc,
.slengo-article-rail > .wp-block-group {
position: sticky;
top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
align-self: flex-start;
}
.simpletoc,
.simpletoc-list,
.simpletoc-list ul,
.simpletoc-list ol {
list-style: none;
padding-left: 0;
margin: 0;
}
.simpletoc-list li {
padding: 6px 0 6px 12px;
border-left: 1px solid var(--wp--preset--color--rule);
font-family: var(--wp--preset--font-family--serif);
font-size: 0.875rem;
line-height: 1.3;
margin: 0;
}
.simpletoc-list a {
color: var(--wp--preset--color--ink);
text-decoration: none;
}
.simpletoc-list a:hover {
color: var(--wp--preset--color--accent-darker);
}
.simpletoc-list ul,
.simpletoc-list ol {
margin-top: 4px;
padding-left: 12px;
}
.simpletoc-title { display: none; }
/* ---------------------------------------------------------------- */
/* Responsive adjustments — tighten the homepage grid on tablet, */
/* stack everything on mobile. */
/* ---------------------------------------------------------------- */
/* Overflow safety net — belts-and-braces against a single wide */
/* embed / image / long URL pushing horizontal scroll on mobile. */
/* `overflow-x: clip` (vs hidden) does NOT create a scroll container, */
/* which is important — `hidden` breaks position:sticky on every */
/* descendant (classic gotcha). */
html, body { overflow-x: clip; }
.slengo-post-content img,
.slengo-post-content video {
max-width: 100%;
height: auto;
}
.slengo-post-content figure,
.slengo-post-content .wp-block-embed,
.slengo-post-content .wp-block-embed__wrapper {
max-width: 100%;
}
/* Some oEmbed providers (wp-embed especially) write fixed pixel widths */
/* AND heights directly on the iframe — override width, but DON'T force */
/* `height: auto` because iframes aren't content-sized; auto collapses */
/* them to the browser default (~150px) and the content gets clipped. */
.slengo-post-content .wp-block-embed iframe,
.slengo-post-content iframe.wp-embedded-content {
width: 100% !important;
max-width: 100% !important;
}
.slengo-post-content .wp-block-embed {
margin-inline: 0;
}
@media (max-width: 959px) {
.slengo-article-body .wp-block-column { flex-basis: 100% !important; }
/* Keep .slengo-article-toc position:sticky (from the desktop rule):
the column stacks above the content on mobile, and sticking makes
the disclosure bar scroll with the article body until we scroll
past it. */
.slengo-article-toc { order: -1; width: 100%; }
.slengo-secondary-stack {
border-left: 0 !important;
padding-left: 0 !important;
border-top: 1px solid var(--wp--preset--color--rule);
padding-top: var(--wp--preset--spacing--40);
}
}
@media (max-width: 781px) {
/* --------------------------------------------------------------- */
/* Mobile menu overlay — stacked full-width rows inspired by */
/* slengo.it's app menu. Search at top, Categorie collapsed, */
/* external pills preserve color+icon as full-width bars. */
/* Each row has a light top border + dark bottom border that */
/* creates a 3D ridge between adjacent buttons. */
/* --------------------------------------------------------------- */
/* Row height is shared across search, nav items, and pills — set
once here and reused everywhere. */
.wp-block-navigation__responsive-container.is-menu-open {
--slengo-nav-row-height: 60px;
--slengo-nav-ridge-light: rgba(255, 255, 255, 0.12);
--slengo-nav-ridge-dark: rgba(0, 0, 0, 0.22);
padding: 0 !important;
}
/* Neutralise WP's own margin/padding on the close + dialog wrappers
so that `position: absolute` on the close button resolves against
the outer responsive-container (which is fixed to the viewport).
Content that needs breathing room uses the container's own
padding above. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
margin: 0 !important;
padding: 0 !important;
}
.wp-block-navigation__responsive-container-close {
position: absolute !important;
top: var(--wp--preset--spacing--30) !important;
right: var(--wp--preset--spacing--40) !important;
padding: 0.35rem !important;
margin: 0 !important;
color: #ffffff !important;
z-index: 10;
}
.wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
/* Content column — search first, then the nav list; no gap so the
ridge borders touch. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-search {
order: -1;
width: 100%;
}
/* Search — full-width rectangle, no radius, matches row height.
Override WP's hardcoded inline width="220px" on the wrapper. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-search__inside-wrapper {
background: rgba(255,255,255,0.1) !important;
border-radius: 0 !important;
padding: 0 1.25rem !important;
height: var(--slengo-nav-row-height);
width: 100% !important;
border-top: 1px solid var(--slengo-nav-ridge-light);
border-bottom: 1px solid var(--slengo-nav-ridge-dark);
box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-search__input {
min-width: 0;
width: 100%;
height: 100%;
font-size: 1rem !important;
background-size: 18px 18px;
background-position: 0 center;
padding-left: 1.8rem;
}
/* Nav list — stacked full-width rows, no gap. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
display: block;
}
/* The main link/button of every row — full-width, centered, with
the ridge. Applies to Parole/Meme/Categorie/Dizionario/Shop labels
at the top level (not submenu children). */
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-close > .wp-block-navigation__responsive-dialog > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open > * .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
display: flex !important;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
height: var(--slengo-nav-row-height);
padding: 0 1rem !important;
font-size: 1.125rem !important;
font-weight: 700 !important;
border-top: 1px solid var(--slengo-nav-ridge-light);
border-bottom: 1px solid var(--slengo-nav-ridge-dark);
box-sizing: border-box;
}
/* Categorie — the only submenu parent. Hide the separate chevron
button (it's visually redundant when the parent row is the tap
target) and render a chevron pseudo-element inside the label
instead. Tap the row to toggle. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-left: 0.25rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.2s ease-out;
}
/* Submenu open state — a class toggled by assets/js/mobile-menu.js.
Chevron rotates and submenu container appears. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.slengo-submenu-open > .wp-block-navigation-item__content::after {
transform: translateY(2px) rotate(-135deg);
}
/* The WP chevron button is what Interactivity toggles; the anchor
next to it has no href. Instead of hiding the button (which
leaves the row dead to taps), stretch it over the entire row as
a transparent overlay, so tapping anywhere in the Categorie row
triggers the toggle. The visible chevron is the anchor's ::after
above; the button beneath is just the hit area.
Also force flex-direction: column — WP defaults every - to
display:flex row, which laid out anchor + submenu side-by-side
after we pulled the submenu back into flow with position:static. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
position: relative;
flex-direction: column !important;
align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: var(--slengo-nav-row-height) !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
opacity: 0;
z-index: 2;
cursor: pointer;
}
/* Submenu: collapsed by default, visible when .slengo-submenu-open
is set on the parent
- by assets/js/mobile-menu.js. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
position: static !important;
background-color: rgba(0, 0, 0, 0.18) !important;
box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.15) !important;
padding: 0 !important;
border-radius: 0 !important;
min-width: 0 !important;
width: 100% !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
margin: 0 !important;
display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.slengo-submenu-open > .wp-block-navigation__submenu-container {
display: block;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
width: 100%;
display: block;
text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: rgba(255, 255, 255, 0.85) !important;
background: transparent !important;
width: 100%;
height: 44px;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
text-align: left;
padding: 0 1.5rem !important;
font-size: 0.95rem !important;
font-weight: 400 !important;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
color: #ffffff !important;
background: rgba(255,255,255,0.08) !important;
}
/* Neutralise browser/WP link :active / :hover / :focus color changes
on the main nav rows — the spec is "shouldn't change color on tap". */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:active {
color: #ffffff;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.slengo-submenu-open > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active {
background: transparent;
}
/* External pills preserved — full-width bars with their colors. */
.wp-block-navigation__responsive-container.is-menu-open a[href="https://slengo.it"] {
background: var(--wp--preset--color--surface) !important;
color: var(--wp--preset--color--ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a[href*="shop.slengo.it"] {
background: var(--wp--preset--color--accent) !important;
color: #ffffff !important;
}
.wp-block-navigation__responsive-container.is-menu-open a[href="https://slengo.it"]::before,
.wp-block-navigation__responsive-container.is-menu-open a[href*="shop.slengo.it"]::before {
display: inline-block !important;
content: "";
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
flex-shrink: 0;
}
.wp-block-navigation__responsive-container.is-menu-open a[href="https://slengo.it"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.wp-block-navigation__responsive-container.is-menu-open a[href*="shop.slengo.it"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
}
@media (max-width: 749px) {
.slengo-masthead h1 { font-size: clamp(2.75rem, 12vw, 4.25rem) !important; }
.slengo-numbered-item { padding-left: 2.8rem; }
.slengo-numbered-item::before { font-size: 2rem; }
.slengo-dict-strip .wp-block-columns { flex-direction: column; }
/* Smaller drop cap on mobile; 5.2em is too chunky at narrow widths. */
.slengo-post-content > p:first-of-type::first-letter { font-size: 3.8em; }
/* Callout — let the text wrap cleanly under the icon rather than squeeze
alongside it on the narrowest viewports. */
.slengo-callout { grid-template-columns: 32px 1fr; gap: 0.6rem; padding: 0.75rem 0.9rem; }
.slengo-callout::before { width: 32px; height: 32px; }
}
/* ---------------------------------------------------------------- */
/* Mobile TOC disclosure — injected by assets/js/toc-mobile.js. */
/* Becomes a sticky "Indice" bar that opens into the list on tap. */
/* ---------------------------------------------------------------- */
/* The sticky context comes from `.slengo-article-toc` (the column), */
/* which is position:sticky via the desktop rule. The disclosure itself */
/* stays static inside it — avoids the "short-parent, nothing-to-scroll- */
/* past" pitfall that breaks sticky on a sized child element. */
/* z-index 50 so it always pops over the in-article callout (default */
/* stacking) when scrolled past. */
.slengo-article-toc { z-index: 50; }
.slengo-toc-disclosure {
background: #ffffff;
border: 1px solid var(--wp--preset--color--rule);
border-radius: 8px;
margin: 0 0 var(--wp--preset--spacing--40);
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
/* Anchor-scroll to h2/h3 lands them below the sticky TOC bar instead of
under it. Matches the bar's ~48px height + some breathing room. */
.slengo-post-content { scroll-margin-top: 0; }
@media (max-width: 959px) {
.slengo-post-content :is(h2, h3) {
/* sticky disclosure (~48px) + admin bar + ~1em breathing room. */
scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 80px + 1em);
}
}
.slengo-toc-disclosure__summary {
padding: 12px 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--wp--preset--font-family--sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--wp--preset--color--accent-darker);
list-style: none;
}
.slengo-toc-disclosure__summary::-webkit-details-marker { display: none; }
.slengo-toc-disclosure__icon::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease-out;
margin-bottom: 4px;
}
.slengo-toc-disclosure[open] .slengo-toc-disclosure__icon::after {
transform: rotate(-135deg);
margin-bottom: 0;
margin-top: 4px;
}
.slengo-toc-disclosure[open] .simpletoc-list {
padding: 4px 16px 12px;
}
.slengo-toc-disclosure .simpletoc-list li { border-left-color: var(--wp--preset--color--rule); }