/**
* Custom front-end CSS — separate from style.css so page-specific
* tweaks and shortcode styling (.npm-grid etc.) don't touch the
* theme's base stylesheet. Loaded after style.css, front-end only.
*
* @package NPM_Refinery
*/
/* =========================================================================
Global defaults
========================================================================= */
.wp-block-image img {
width: 100%;
}
a {
text-decoration: none;
}
/* transition on base state too, so it animates both ways */
a:hover,
.wp-block-button a {
transition: all ease .25s;
}
.solid-bg-buttons a:hover {
background-color: var(--wp--preset--color--white, #ffffff);
color: var(--wp--preset--color--primary, #182b0f);
}
/* =========================================================================
Header navigation
========================================================================= */
/* "Contact Us" CTA — scoped to the last top-level item only, so it
doesn't also catch dropdown items (e.g. "Melting"). */
.main-navigation > ul#primary-menu > li:last-child > a {
background-color: var(--wp--preset--color--accent);
padding: 1em;
border-radius: 5px;
transition: all ease .25s;
font-weight: 600;
}
.main-navigation > ul#primary-menu > li:last-child > a:hover {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--primary);
}
/* Desktop dropdown (Services > Refining / Melting / ...) */
.main-navigation ul ul {
padding: 0.4rem;
border-radius: 6px;
}
.main-navigation ul ul li a {
padding: 0.65rem 0.85rem;
border-radius: 4px;
color: var(--wp--preset--color--contrast, #353535) !important;
border-left: 3px solid transparent;
}
/* Hover text uses primary, not accent — accent-on-background fails
WCAG contrast (~2.3:1 vs required 4.5:1), primary passes (~13:1). */
.main-navigation ul ul li a:hover,
.main-navigation ul ul li a:focus {
background-color: var(--wp--preset--color--background, #ededeb);
color: var(--wp--preset--color--primary, #182b0f);
/* border-left-color: var(--wp--preset--color--accent, #ba9a52); */
}
@media (max-width: 782px) {
/* Mobile has its own chevron via .submenu-toggle */
.main-navigation ul#primary-menu ul {
padding: 0 !important;
}
}
@media (min-width: 783px) {
/* .main-navigation ul ul {
padding: 0 !important;
} */
/* Down-arrow on top-level items with a dropdown, desktop only */
.main-navigation > ul#primary-menu > li.menu-item-has-children > a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.main-navigation > ul#primary-menu > li.menu-item-has-children > a::after {
content: '';
width: 7px;
height: 7px;
margin-top: -3px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.main-navigation > ul#primary-menu > li.menu-item-has-children:hover > a::after,
.main-navigation > ul#primary-menu > li.menu-item-has-children:focus-within > a::after {
transform: rotate(225deg);
margin-top: 3px;
}
}
/* Mobile menu toggle (hamburger/close) */
.menu-toggle {
background-color: var(--wp--preset--color--primary, #182b0f);
border-color: var(--wp--preset--color--primary, #182b0f);
color: var(--wp--preset--color--base, #fff);
}
.menu-toggle:hover,
.menu-toggle:focus {
background-color: var(--wp--preset--color--accent, #ba9a52);
border-color: var(--wp--preset--color--accent, #ba9a52);
color: var(--wp--preset--color--primary, #182b0f);
}
.menu-toggle[aria-expanded="true"] {
background-color: var(--wp--preset--color--base, #fff);
border-color: var(--wp--preset--color--base, #fff);
color: var(--wp--preset--color--primary, #182b0f);
}
/* Mobile sliding panel — solid opaque background for contrast */
.main-navigation ul#primary-menu {
/* background-color: var(--wp--preset--color--primary, #182b0f);
opacity: 1; */
background-color: transparent;
}
.main-navigation ul#primary-menu a {
color: var(--wp--preset--color--base, #fff);
}
.main-navigation ul#primary-menu a:hover,
.main-navigation ul#primary-menu a:focus {
color: var(--wp--preset--color--accent, #ba9a52);
}
.main-navigation ul#primary-menu > li {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
.main-navigation ul#primary-menu .submenu-toggle {
color: var(--wp--preset--color--base, #fff);
}
/* Keeps "Contact Us" legible on the dark mobile panel */
.main-navigation ul#primary-menu > li:last-child > a {
color: var(--wp--preset--color--white, #ffffff);
}
.main-navigation ul#primary-menu > li:last-child > a:hover {
color: var(--wp--preset--color--primary, #182b0f);
}
@media (max-width: 782px) {
.main-navigation ul#primary-menu > li > a {
padding: .5rem 0;
}
}
/* style.css already makes #primary-menu position: fixed with its own
overflow-y: auto (so expanding Services scrolls inside the panel,
not the page) — but with nothing stopping the page underneath from
also scrolling, a touch-scroll near the end of the panel's own
scroll range "chains" onto the body behind it, which is what reads
as content getting shoved/pushed around instead of a clean scroll.
navigation.js already adds/removes body.nav-is-open on toggle, so
this locks the body while the panel is open and stops the panel's
own scroll from bleeding through to it. */
body.nav-is-open {
overflow: hidden;
}
@media (max-width: 782px) {
.main-navigation ul#primary-menu {
overscroll-behavior: contain;
background-color: var(--wp--preset--color--primary);
}
}
/* =========================================================================
Homepage hero header — transparent, floats over the video background
========================================================================= */
/* The homepage's Main Banner hero now has a video background
(npm-hero-video.css/.php); this drops the header's own background
and pulls it out of the document flow so it overlaps the top of
the hero instead of sitting above it as a solid bar — homepage
only, via the .home body class WordPress adds on the site's front
page. Not position: fixed — it overlays just the hero, then
scrolls away normally with the rest of the page. z-index clears
the hero's own video/overlay (z-index: 0/1 in npm-hero-video.css). */
body:not(.product-template-default):not(.page-template-template-all-products):not(.single-post):not(.error404) .site-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent;
border-bottom: none;
z-index: 10;
}
/* Hamburger button had its own solid dark background — matches the
transparent header instead so there's no leftover solid square. */
body:not(.product-template-default):not(.page-template-template-all-products):not(.single-post):not(.error404) .menu-toggle {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.6);
}
body:not(.product-template-default):not(.page-template-template-all-products):not(.single-post):not(.error404) .menu-toggle:hover,
body:not(.product-template-default):not(.page-template-template-all-products):not(.single-post):not(.error404) .menu-toggle:focus {
background-color: var(--wp--preset--color--accent, #ba9a52);
border-color: var(--wp--preset--color--accent, #ba9a52);
color: var(--wp--preset--color--primary, #182b0f);
}
@media (max-width: 782px) {
/* Same transparent/floating treatment at mobile widths, still
homepage only — repeated explicitly in case style.css sets its
own mobile-specific .site-header background at this breakpoint. */
body:not(.product-template-default):not(.page-template-template-all-products):not(.single-post):not(.error404) .site-header {
position: absolute;
/* background: transparent; */
border-bottom: none;
}
}
/* Home Sections */
@media (max-width: 600px) {
.home-main-banner h1 {
font-size: 3.75rem !important;
line-height: 1.125;
}
.home-banner-cta h2 {
text-align: center;
}
}
/* =========================================================================
Footer
========================================================================= */
.site-footer {
background-image: url("/wp-content/uploads/2026/09/bg-footer.webp");
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
}
.site-footer ul {
padding-left: 0;
}
.site-footer ul li {
list-style-type: none;
line-height: 2.25;
}
.site-footer ul li a {
text-decoration: none;
transition: all ease .25s;
}
.site-footer ul li a:hover {
color: var(--wp--preset--color--white);
}
.site-footer .site-info a {
text-decoration: none;
}
/* =========================================================================
[npm_posts] shortcode output — shared hook + per-container styling
========================================================================= */
/* CTA for an ACF "Page Link" field (npm_refinery_render_field()) */
.npm-grid__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.75rem;
text-decoration: none;
color: var(--wp--preset--color--accent);
}
.npm-grid__cta:hover {
color: var(--wp--preset--color--primary);
}
/* Arrow icon — same rotated-border chevron trick used elsewhere on the
site (post navigation, slider arrows), no image asset needed. Nudges
right on hover via margin, not transform, so the -45deg rotation
isn't fighting a translate in its own rotated coordinate space. */
.npm-grid__cta::after {
content: "";
flex: 0 0 auto;
width: 6px;
height: 6px;
border: solid currentColor;
border-width: 0 2px 2px 0;
transform: rotate(-45deg);
transition: margin-left ease .25s;
}
.npm-grid__cta:hover::after {
margin-left: 0.2rem;
}
/* --- Home — product type grid --- */
.product-types-container .npm-grid {
display: grid;
grid-template: auto / auto auto auto;
gap: 30px;
}
.product-types-container .npm-grid .npm-grid__item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.product-types-container .npm-grid .npm-grid__item img {
max-height: 100%;
height: 450px;
object-fit: cover;
}
.product-types-container .npm-grid .npm-grid__item .npm-grid__field[data-field="product_title"] {
margin-top: 20px;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--large);
}
/* --- Home — services grid --- */
.services-container .npm-grid {
display: flex;
flex-direction: column;
gap: 30px;
}
.services-container .npm-grid .npm-grid__item .npm-grid__field[data-field="heading"] {
margin: 0 0 10px 0;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--large);
font-weight: 600;
color: var(--wp--preset--color--primary);
}
/* --- Home — services card grid --- */
.services-card-container .npm-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.5rem;
}
/* .services-card-container .npm-grid .npm-grid__item {
padding: 1.5rem;
background-color: var(--wp--preset--color--background);
} */
.services-card-container .npm-grid .npm-grid__item .npm-grid__image img {
margin-bottom: 5px;
border-radius: 5px;
}
.services-card-container .npm-grid .npm-grid__item .npm-grid__field[data-field="heading"] {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--large);
font-weight: 600;
color: var(--wp--preset--color--primary);
margin-bottom: 10px;
}
.services-card-container.services-page {
padding: 0 1rem !important;
}
@media (max-width: 900px) {
.services-card-container.services-page .npm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
}
@media (max-width: 600px) {
.services-card-container.services-page .npm-grid {
grid-template-columns: 1fr;
}
.services-points-card {
grid-template-columns: 1fr !important;
}
.services-detail-section-cta {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.services-detail-section-cta .wp-block-buttons {
margin-top: 0 !important;
}
}
/* --- Accreditations & Certificates grid ---
[npm_posts post_type="accreditation" fields="short_description,link"
title_field="title" link_text="View Award"] */
.npm-grid[data-post-type="accreditation"] {
display: block;
max-width: var(--wp--style--global--wide-size, 1240px);
margin: 0 auto;
}
.npm-grid[data-post-type="accreditation"] .npm-grid__item {
display: flex;
align-items: center;
gap: 2rem;
padding: 1.75rem 0;
border-top: 1px solid var(--wp--preset--color--background);
}
.npm-grid[data-post-type="accreditation"] .npm-grid__image {
flex: 0 0 240px;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 4px;
}
.npm-grid[data-post-type="accreditation"] .npm-grid__image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background-color: var(--wp--preset--color--background);
}
.npm-grid[data-post-type="accreditation"] .npm-grid__content {
flex: 1 1 auto;
min-width: 0; /* lets long text wrap instead of widening the row */
}
.npm-grid[data-post-type="accreditation"] .npm-grid__title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--large);
line-height: 1.3;
margin: 0 0 0.6rem;
}
.npm-grid[data-post-type="accreditation"] .npm-grid__field[data-field="short_description"] {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--contrast);
line-height: 1.6;
margin: 0 0 0.6rem;
}
.npm-grid[data-post-type="accreditation"] .npm-grid__link {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
font-weight: 400;
color: var(--wp--preset--color--accent);
text-decoration: none;
}
.npm-grid[data-post-type="accreditation"] .npm-grid__link:hover {
text-decoration: none;
}
@media (max-width: 600px) {
.npm-grid[data-post-type="accreditation"] .npm-grid__item {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.npm-grid[data-post-type="accreditation"] .npm-grid__image {
flex-basis: auto;
width: 100%;
}
}
/* --- Accreditations — legacy hand-authored entries (pre-shortcode) --- */
.accreditations-card p a {
text-decoration: none;
}
/* =========================================================================
Account Opening — placeholder, no rules yet
========================================================================= */
.account-opening-container {
}
/* =========================================================================
Reusable content components
========================================================================= */
/* Icon bullet list — accent square + checkmark instead of the default
bullet. Apply via Additional CSS Class(es) on any List block. */
.npm-icon-list {
list-style: none;
margin: 15px 0 0 0;
padding: 0;
}
.npm-icon-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.25rem 0;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--medium);
color: var(--wp--preset--color--contrast);
line-height: 1.5;
}
.npm-icon-list li::before {
content: "";
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 0.1em;
border-radius: 5px;
background-color: var(--wp--preset--color--accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 6.5 11.5 13 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 11px;
}
/* Equal-height cards inside a Columns block (e.g. "Our Mission" /
"Our Vision") — apply via Additional CSS Class(es) on the Columns
block itself. WordPress sets align-self: center on each
.wp-block-column whenever the block has a vertical alignment
(is-vertically-aligned-center here), which is exactly why the
shorter card doesn't grow to match the taller one — this overrides
that back to stretch, opt-in only so it doesn't affect every
Columns block on the site. display: flex + flex-direction: column
on the column, then flex: 1 1 auto on the card inside it, is what
actually lets the card grow to fill that stretched height. */
.npm-equal-columns > .wp-block-column.is-vertically-aligned-center {
align-self: stretch;
}
.npm-equal-columns > .wp-block-column {
display: flex;
flex-direction: column;
}
.npm-equal-columns > .wp-block-column > .wp-block-group {
flex: 1 1 auto;
}
/* =========================================================================
Single Service page (single-service.php)
========================================================================= */
.service-single__eyebrow {
margin: 0 0 0.75rem;
text-align: center;
}
.service-single__eyebrow a {
color: inherit;
text-decoration: none;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.85;
}
.service-single__eyebrow a:hover,
.service-single__eyebrow a:focus {
opacity: 1;
text-decoration: underline;
}
.service-single__image img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
.services-detail-additional-bullets .additional-detailed-box {
height: 100%;
}
.services-detail-section-cta {
display: flex;
justify-content: center;
gap: 20px;
}
/* =========================================================================
Previous/next post navigation — single-service.php and single.php,
via the shared nav-subtitle/nav-title markup in the_post_navigation().
========================================================================= */
.post-navigation {
max-width: 800px;
margin: 0 auto 3rem;
padding: 0 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.5rem;
}
.post-navigation .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
}
.post-navigation a {
text-decoration: none;
}
.post-navigation .nav-subtitle {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--wp--preset--color--secondary, #acaeaf);
}
.post-navigation .nav-title {
font-family: var(--wp--preset--font-family--heading);
color: var(--wp--preset--color--primary, #182b0f);
}
.post-navigation a:hover .nav-title,
.post-navigation a:focus .nav-title {
color: var(--wp--preset--color--accent, #ba9a52);
}
/* =========================================================================
Contact Form 7 — unstyled by default; brought in line with the site.
========================================================================= */
.wpcf7-form {
display: flex;
flex-direction: column;
/* gap: 1.5rem; */
gap: 0;
max-width: 480px;
}
.wpcf7-form p {
margin-top: 0;
}
.wpcf7-form > p br {
display: none;
}
.wpcf7-form > p label:not(:last-child) {
margin-bottom: 1rem;
}
.wpcf7-form label {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-family: var(--wp--preset--font-family--body);
color: var(--wp--preset--color--primary, #182b0f);
font-size: 0.9375rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
width: 100%;
padding: 0.75em 1em;
border: 1px solid var(--wp--preset--color--secondary, #acaeaf);
border-radius: 5px;
background-color: var(--wp--preset--color--base, #fff);
color: var(--wp--preset--color--contrast, #353535);
font-family: inherit;
font-size: 1rem;
transition: all ease .25s;
}
.wpcf7-form textarea {
min-height: 140px;
resize: vertical;
}
/* Two fields on one line (e.g. First/Last name) — wrap the pair in
...
in the CF7 template. CF7/wpautop
puts both labels in one shared , so the flex row targets that
,
not the wrapping div. */
.wpcf7-form-row p {
display: flex;
gap: 1rem;
}
.wpcf7-form-row label {
flex: 1 1 0;
min-width: 0;
}
.wpcf7-form-row br {
display: none;
}
@media (max-width: 480px) {
.wpcf7-form-row p {
flex-direction: column;
}
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form textarea:focus {
outline: none;
border-color: var(--wp--preset--color--accent, #ba9a52);
box-shadow: 0 0 0 3px rgba(186, 154, 82, 0.2);
}
/* Submit button in its own
in the CF7
template — keeps wpautop from merging it into the message field's
. */
.wpcf7-form-submit-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.wpcf7-form .wpcf7-spinner {
margin-left: 0;
}
/* Submit button — same accent-to-base hover as the header's CTA */
.wpcf7-form input.wpcf7-submit {
align-self: flex-start;
padding: 1em 2em;
border: none;
border-radius: 5px;
background-color: var(--wp--preset--color--accent, #ba9a52);
color: var(--wp--preset--color--base, #fff);
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all ease .25s;
}
.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form input.wpcf7-submit:focus {
background-color: var(--wp--preset--color--base, #fff);
color: var(--wp--preset--color--primary, #182b0f);
box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary, #182b0f);
}
.wpcf7-form input.wpcf7-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.wpcf7-form .wpcf7-not-valid {
border-color: #c0392b !important;
}
.wpcf7-form .wpcf7-not-valid-tip {
margin-top: 0.35rem;
color: #c0392b;
font-size: 0.8125rem;
}
.wpcf7-form .wpcf7-response-output {
margin: 1.5rem 0 0;
padding: 0.85em 1.1em;
border-radius: 5px;
border: 1px solid var(--wp--preset--color--secondary, #acaeaf);
font-size: 0.9375rem;
}
.wpcf7-form.sent .wpcf7-response-output {
border-color: var(--wp--preset--color--primary, #182b0f);
background-color: var(--wp--preset--color--background, #ededeb);
color: var(--wp--preset--color--primary, #182b0f);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
border-color: #c0392b;
background-color: #fbeceb;
color: #c0392b;
}
.wpcf7-form .wpcf7-spinner {
margin-left: 0.75rem;
}
/*
* Responsive utility classes — NPM Refinery
*
* Native Gutenberg blocks have no built-in way to hide an element on
* mobile, or otherwise vary per breakpoint, beyond the Columns block's
* own "Stack on mobile" toggle. These classes fill that specific gap:
* apply them to ANY block via "Additional CSS Class(es)" in the block
* editor's Advanced panel, no code change needed per page/section.
*
* Standardized breakpoints (use these three going forward — several
* page-specific stylesheets in this project picked slightly different
* cutoffs (600/640/782/900/960) as they were built one at a time; not
* worth retrofitting those, but new work should converge on this set):
* Mobile: max-width 600px
* Tablet: 601px – 900px
* Desktop: min-width 901px
*
* Lives in the site-wide stylesheet (custom.css), not a conditionally-
* enqueued file, since any block on any page could use these — same
* reasoning as .npm-icon-list.
*/
/* ---- Visibility ---- */
@media (max-width: 600px) {
.npm-hide-mobile {
display: none !important;
}
}
@media (min-width: 601px) and (max-width: 900px) {
.npm-hide-tablet {
display: none !important;
}
}
@media (min-width: 901px) {
.npm-hide-desktop {
display: none !important;
}
}
/* Inverse helpers — show ONLY on one breakpoint band. Default hidden,
then switched on inside its own band. */
.npm-show-mobile-only,
.npm-show-tablet-only,
.npm-show-desktop-only {
display: none !important;
}
@media (max-width: 600px) {
.npm-show-mobile-only {
display: block !important;
}
}
@media (min-width: 601px) and (max-width: 900px) {
.npm-show-tablet-only {
display: block !important;
}
}
@media (min-width: 901px) {
.npm-show-desktop-only {
display: block !important;
}
}
/* ---- Text alignment per breakpoint ----
Common case: a heading/paragraph designed centered on desktop reads
better left-aligned once it stacks full-width on mobile. */
@media (max-width: 600px) {
.npm-text-left-mobile {
text-align: left !important;
}
.npm-text-center-mobile {
text-align: center !important;
}
}
/* ---- Stacking ----
For a hand-built flex/Group row (not the Columns block, which
already has its own "Stack on mobile" toggle) that needs the same
stack-to-column behavior on tablet and below. */
@media (max-width: 900px) {
.npm-stack-tablet {
flex-direction: column !important;
}
}
@media (max-width: 600px) {
.npm-stack-mobile {
flex-direction: column !important;
}
}
/* ---- Spacing ----
Trim a block's padding/margin on mobile without a whole new stylesheet.
Value is fixed rather than configurable per-instance — for anything
needing a specific number, that's a case for a real scoped CSS rule
in the page's own stylesheet instead of a generic utility class. */
@media (max-width: 600px) {
.npm-tight-mobile {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
}
/* ---- Horizontal padding cap on mobile ----
Any Group/Column block whose left/right padding was set via the
block editor's Dimensions > Padding panel gets a spacing preset
(--wp--preset--spacing--80, etc.) saved as a fixed inline style.
WP 7.1's per-viewport editing isn't available on this theme (see
npm-site-structure.md), so that same desktop-sized value carries
straight through to phones with no breakpoint awareness, crowding
content edge-to-edge.
Add "npm-tight-sides-mobile" in the block's Advanced panel >
Additional CSS Class(es) to cap it back down to 1rem (16px) below
600px — no CSS edit needed per block. Companion to .npm-tight-mobile
above (that one trims top/bottom, this one trims left/right).
!important is required — an inline style always outranks a plain
class selector, same reason WordPress's own "Stack on mobile" rule
needs it too. */
@media (max-width: 600px) {
.npm-tight-sides-mobile {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.npm-button-full-wide-mobile {
width: 100%;
}
}