/** * PPB Core — site chrome (header, footer, logo). * Block: ppb-site-* */ .ppb-site-header { position: sticky; top: 0; z-index: 300; transition: box-shadow var(--ppb-transition-base); } /* Scroll-aware header: `ppb-is-scrolled` on from `assets/js/scroll-header.js` */ .ppb-is-scrolled .ppb-site-header { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } @media (prefers-reduced-motion: reduce) { .ppb-site-header { transition: none; } } .ppb-site-header:not(.ppb-site-header--on-image) { background-color: var(--ppb-color-surface-page, #f7f6f2); } /* Set `$GLOBALS['ppb_header_on_image']` before `get_header()` when the page hero uses a full-bleed image. */ .ppb-site-header--on-image { background-color: transparent; color: var(--ppb-color-footer-fg, #fefffc); } .ppb-site-header--on-image .ppb-site-logo__link { color: inherit; } .ppb-site-header--on-image .ppb-site-logo__text { color: inherit; } .ppb-site-header--on-image a { color: inherit; } /* Primary nav (Appearance → Menus → Primary navigation) */ .ppb-site-header__inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; width: 100%; box-sizing: border-box; } /* * Home + section landings (Eat & Drink, Stay, …): 2× theme default horizontal inset (1.5rem → 3rem). * Header bar and main `.ppb-wrap` blocks (e.g. page-header hero) share the same values. */ body.ppb-page-home, body.ppb-page-eat-drink, body.ppb-page-stay, body.ppb-page-whats-on, body.ppb-page-your-event, body.ppb-page-contact, body.ppb-page-page-builder, body.error404 { --ppb-home-wrap-padding-inline: 3rem; } body.ppb-page-home .ppb-site-header .ppb-wrap, body.ppb-page-home .ppb-site-main--home .ppb-wrap, body.ppb-page-eat-drink .ppb-site-header .ppb-wrap, body.ppb-page-eat-drink .ppb-site-main--eat-drink .ppb-wrap, body.ppb-page-stay .ppb-site-header .ppb-wrap, body.ppb-page-stay .ppb-site-main--stay .ppb-wrap, body.ppb-page-whats-on .ppb-site-header .ppb-wrap, body.ppb-page-whats-on .ppb-site-main--whats-on .ppb-wrap, body.ppb-page-your-event .ppb-site-header .ppb-wrap, body.ppb-page-your-event .ppb-site-main--your-event .ppb-wrap, body.ppb-page-contact .ppb-site-header .ppb-wrap, body.ppb-page-contact .ppb-site-main--contact .ppb-wrap, body.ppb-page-page-builder .ppb-site-header .ppb-wrap, body.ppb-page-page-builder .ppb-site-main--page-builder .ppb-wrap { padding-inline: var(--ppb-home-wrap-padding-inline); } /* * 404: main doesn’t use only `.ppb-wrap` (text block uses `.ppb-text-block__inner`). * Apply the same horizontal inset as the header bar + landing pages. */ body.error404 .ppb-site-header .ppb-wrap, body.error404 .ppb-site-main--404 .ppb-page-header .ppb-page-header__inner, body.error404 .ppb-site-main--404 .ppb-text-block__inner { padding-inline: var(--ppb-home-wrap-padding-inline); } /* 404: don’t stack text-block top padding on top of `main > * + *` gap after the light intro header. */ body.error404 .ppb-site-main--404 > .ppb-text-block { padding-block-start: 0; } /* * Main: one consistent vertical rhythm between top-level blocks. * Page builder is different: sections rely on their own padding-block — see `.ppb-site-main--page-builder`. * Same gap after main so the space above the footer matches gaps between regions inside main. * Themes may override --ppb-space-main-gap on :root. */ .ppb-site-main { margin-block-end: var(--ppb-space-main-gap); } /* * One rhythm step between top-level regions. Use `main` in the selector so specificity beats * component blocks that set `margin-block: 0` on sections (same single-class specificity otherwise). */ main.ppb-site-main > * + * { margin-block-start: var(--ppb-space-main-gap); } /* * What’s On: optional card grid then TEC loop should sit flush (no extra gap between them). * Header → first block uses `main.ppb-site-main > * + *` like Your Event — do not zero that margin. */ main.ppb-site-main--whats-on > .ppb-page-header ~ * + * { margin-block-start: 0; } /* * Page builder: flexible sections use padding-block (~--ppb-space-main-gap) for internal rhythm. * Do not also apply main’s sibling margin — that stacks gap + padding on the same edge (doubled spacing). */ main.ppb-site-main.ppb-site-main--page-builder > * + * { margin-block-start: 0; } /* * Page builder: light (or image) hero already ends with padding-block; the first text block adds * the same rhythm via `padding-block` — reads as double gap. Same seam as 404 (`body.error404 .ppb-site-main--404 > .ppb-text-block`). * `page-page-builder.php` outputs sr-only `h1` between header and flexible sections. */ main.ppb-site-main.ppb-site-main--page-builder > .ppb-page-header + .ppb-text-block, main.ppb-site-main.ppb-site-main--page-builder > .ppb-page-header + .ppb-u-sr-only + .ppb-text-block { padding-block-start: 0; } /* * Gallery adds padding-block-start to match the old main stack; inside page builder that duplicates * spacing next to the previous section’s padding — drop the extra top pad here only. */ main.ppb-site-main.ppb-site-main--page-builder .ppb-image-gallery .ppb-gallery { padding-block-start: 0; } /* * Optional flexible “Vertical spacer”: height from shared `--ppb-space-*` tokens (see tokens.css). */ .ppb-pb-spacer { margin: 0; padding: 0; border: 0; pointer-events: none; flex-shrink: 0; } .ppb-site-main.ppb-site-main--page-builder .ppb-pb-spacer--sm { min-height: var(--ppb-space-stack-sm); } .ppb-site-main.ppb-site-main--page-builder .ppb-pb-spacer--md { min-height: var(--ppb-space-stack-md); } .ppb-site-main.ppb-site-main--page-builder .ppb-pb-spacer--lg { min-height: var(--ppb-space-stack-lg); } .ppb-site-main.ppb-site-main--page-builder .ppb-pb-spacer--region { min-height: var(--ppb-space-main-gap); } /* Form Embed template: no vertical rhythm in main (flush to footer; no stacked-region gap). */ .ppb-site-main--form-embed { margin-block-end: 0; } main.ppb-site-main--form-embed > * + * { margin-block-start: 0; } .ppb-site-header__brand { flex: 0 1 auto; min-width: 0; line-height: 0; } /* Primary nav + optional “Book a table” (Venue → Book now link) */ .ppb-site-header__actions { flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.75rem 1.25rem; min-width: 0; } .ppb-site-header__nav { flex: 0 1 auto; display: flex; justify-content: flex-end; min-width: 0; } .ppb-site-header__book { flex: 0 0 auto; line-height: 0; } /* Slightly tighter padding in the header bar than default CTAs */ .ppb-site-header__book .ppb-site-header__book-btn { padding-block: 0.55rem; padding-inline: 1.1rem; } .ppb-site-header__menu { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.75rem 1.25rem; list-style: none; margin: 0; padding: 0; } .ppb-site-header__menu > li { position: relative; margin: 0; } /* Default bar: body text; hover/ current use secondary; underline is the signal on hover + current. */ .ppb-site-header__menu a { display: inline-block; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 1px; font-family: var(--font-body, inherit); font-weight: 400; font-size: var(--ppb-text-base, 1rem); line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--ppb-color-text, #1a1a1a); transition: color var(--ppb-transition-base), text-decoration-color var(--ppb-transition-base); } .ppb-site-header__menu a:hover, .ppb-site-header__menu a:focus-visible { color: var(--color-secondary, #1E374B); text-decoration-color: currentColor; } .ppb-site-header__menu .current-menu-item > a, .ppb-site-header__menu .current_page_item > a, .ppb-site-header__menu a[aria-current="page"] { color: var(--color-secondary, #1E374B); text-decoration-color: currentColor; } .ppb-site-header--on-image .ppb-site-header__menu a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--ppb-transition-base), text-decoration-color var(--ppb-transition-base); } .ppb-site-header--on-image .ppb-site-header__menu a:hover, .ppb-site-header--on-image .ppb-site-header__menu a:focus-visible { color: var(--ppb-color-footer-fg, #fefffc); text-decoration-color: currentColor; } .ppb-site-header--on-image .ppb-site-header__menu .current-menu-item > a, .ppb-site-header--on-image .ppb-site-header__menu .current_page_item > a, .ppb-site-header--on-image .ppb-site-header__menu a[aria-current="page"] { color: var(--ppb-color-footer-fg, #fefffc); text-decoration-color: currentColor; } .ppb-site-header__menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 12rem; margin: 0.25rem 0 0; padding: 0.35rem 0; list-style: none; background: var(--ppb-color-surface-page, #fff); border: 1px solid var(--ppb-color-border-subtle); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); z-index: 200; } .ppb-site-header--on-image .ppb-site-header__menu .sub-menu { background: rgba(26, 34, 50, 0.96); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .ppb-site-header__menu .sub-menu a { display: block; padding: 0.4rem 1rem; text-transform: none; letter-spacing: normal; font-weight: 400; font-size: var(--ppb-text-base, 1rem); } @media (min-width: 48rem) { .ppb-site-header__menu .sub-menu { display: none; } .ppb-site-header__menu .menu-item-has-children:hover > .sub-menu, .ppb-site-header__menu .menu-item-has-children:focus-within > .sub-menu { display: block; } } @media (max-width: 47.9375rem) { .ppb-site-header__menu .sub-menu { position: static; display: block; margin: 0.35rem 0 0 0.75rem; padding: 0; border: 0; box-shadow: none; background: transparent; } .ppb-site-header--on-image .ppb-site-header__menu .sub-menu { background: transparent; border: 0; box-shadow: none; } .ppb-site-header__menu .sub-menu a { padding: 0.25rem 0; } } /* * Hero + nav overlay: set `$GLOBALS['ppb_header_on_image']` before `get_header()` (e.g. homepage * with page-header background image). Header is removed from flow so the first main section can * extend to the top; nav sits above the hero with z-index. When an announcement bar is present, * `sticky-header-overlay.js` sets `--ppb-announcement-bar-offset` so this bar clears it (same coord * system as `getBoundingClientRect().bottom` while the strip is on-screen). */ body.ppb-header-overlays-hero .ppb-site-header.ppb-site-header--on-image { position: absolute; inset-inline: 0; top: var(--ppb-announcement-bar-offset, 0px); z-index: 100; width: 100%; max-width: none; background: transparent; pointer-events: none; } body.ppb-header-overlays-hero .ppb-site-header.ppb-site-header--on-image .ppb-site-header__inner { pointer-events: auto; } /* * Overlay pages: pin bar after scroll (sticky-header-overlay.js). Background = same token as footer * (`--ppb-color-footer-bg` from Venue branding inline tokens — no one-off hexes here). */ body.ppb-header-overlays-hero.ppb-header-overlay-is-fixed .ppb-site-header.ppb-site-header--on-image { position: fixed; inset-inline: 0; top: var(--ppb-announcement-bar-offset, 0px); z-index: 400; width: 100%; max-width: none; background-color: var(--ppb-color-footer-bg, var(--color-secondary, #1E374B)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; border-bottom: 1px solid color-mix(in srgb, var(--ppb-color-footer-fg, #fefffc) 14%, transparent); } .ppb-site-footer { margin-top: auto; width: 100%; min-width: 0; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: var(--ppb-footer-padding-bottom, 0.625rem); box-sizing: border-box; font-family: var(--font-body, inherit); font-size: var(--ppb-text-base, 1rem); line-height: var(--ppb-leading-normal, 1.5); color: var(--ppb-color-footer-fg, #fefffc); background-color: var(--ppb-color-footer-bg, var(--color-secondary, #1E374B)); border-top: 1px solid rgba(255, 255, 255, 0.12); border-top: 1px solid color-mix(in srgb, var(--ppb-color-footer-fg, #fefffc) 14%, transparent); } /* Footer: muted underline on footer foreground. Visit us panel: primary surface uses button-on-primary text (see tokens). */ .ppb-site-footer a:not(.ppb-button):not(.ppb-social-link), .ppb-site-footer a:not(.ppb-button):not(.ppb-social-link):visited { color: var(--ppb-color-footer-fg, #fefffc); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--ppb-color-footer-fg, #fefffc) 45%, transparent); text-underline-offset: 0.2em; transition: color var(--ppb-transition-base), text-decoration-color var(--ppb-transition-base); } .ppb-visit-us__panel a:not(.ppb-button):not(.ppb-social-link), .ppb-visit-us__panel a:not(.ppb-button):not(.ppb-social-link):visited { color: var(--ppb-btn-primary-text, #fff); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--ppb-btn-primary-text, #fff) 45%, transparent); text-underline-offset: 0.2em; transition: color var(--ppb-transition-base), text-decoration-color var(--ppb-transition-base); } .ppb-site-footer a:not(.ppb-button):not(.ppb-social-link):hover, .ppb-site-footer a:not(.ppb-button):not(.ppb-social-link):focus-visible { color: #fff; text-decoration-color: #fff; } .ppb-visit-us__panel a:not(.ppb-button):not(.ppb-social-link):hover, .ppb-visit-us__panel a:not(.ppb-button):not(.ppb-social-link):focus-visible { color: #fff; text-decoration-color: #fff; } /* Button objects set their own label colours; generic footer link colour would wash out inverse CTAs. */ .ppb-site-footer a.ppb-button--inverse, .ppb-site-footer a.ppb-button--inverse:visited { color: var(--ppb-btn-inverse-text, var(--ppb-color-text, #1a1a1a)); } .ppb-site-footer a.ppb-button--secondary, .ppb-site-footer a.ppb-button--secondary:visited { color: var(--ppb-btn-secondary-text, #fff); } .ppb-site-footer a.ppb-button--primary, .ppb-site-footer a.ppb-button--primary:visited, .ppb-site-footer a.ppb-button--primary-on-dark, .ppb-site-footer a.ppb-button--primary-on-dark:visited { color: var(--ppb-btn-primary-text, #fff); } .ppb-site-footer .ppb-site-logo__text { color: var(--ppb-color-footer-fg, #fefffc); } .ppb-site-footer .ppb-social-link { color: var(--ppb-color-footer-fg, #fefffc); transition: color var(--ppb-transition-base), opacity var(--ppb-transition-base), transform var(--ppb-transition-base); } .ppb-site-footer .ppb-social-link:hover, .ppb-site-footer .ppb-social-link:focus-visible { color: #fff; opacity: 1; transform: translateY(-1px); } /* Brand link must not spill past the shrinking flex column — keeps desktop header one row with nav. */ .ppb-site-header .ppb-site-logo--header .ppb-site-logo__link { max-width: 100%; } .ppb-site-logo__link { display: inline-block; text-decoration: none; color: inherit; line-height: 0; transition: opacity var(--ppb-transition-base); } .ppb-site-logo__link:hover, .ppb-site-logo__link:focus-visible { opacity: 0.8; } .ppb-site-logo__img { display: block; width: auto; height: auto; } .ppb-site-logo--header .ppb-site-logo__img { max-height: 30px; max-width: 100%; height: auto; width: auto; object-fit: contain; object-position: left center; } /* Wide raster logos otherwise exceed readable bar proportions; footer is unchanged. */ .ppb-site-header__brand .ppb-site-logo--header .ppb-site-logo__img--compact, .ppb-site-header__brand .ppb-site-logo--header .ppb-site-logo__img--wide, .ppb-site-header__brand .ppb-site-logo--header .ppb-site-logo__img { max-width: min(330px, 100%); } .ppb-site-header .ppb-site-logo--header .ppb-site-logo__text { font-size: clamp(0.6875rem, 0.58rem + 1.5vw, 1.375rem); } .ppb-site-logo--footer .ppb-site-logo__img { max-height: 22.5px; } /* * Wide vs compact mobile logo pair: breakpoints match components/mobile-nav.css * (~900px) where `.ppb-site-header` hides and the bar + drawer use compact chrome. */ .ppb-site-logo--header.ppb-site-logo--has-compact .ppb-site-logo__img--compact { display: block; max-height: 40px; max-width: 100%; width: auto; height: auto; object-fit: contain; object-position: left center; } .ppb-site-logo--header.ppb-site-logo--has-compact .ppb-site-logo__img--wide { display: none; } @media (min-width: 900px) { .ppb-site-logo--header.ppb-site-logo--has-compact .ppb-site-logo__img--wide { display: block; } .ppb-site-logo--header.ppb-site-logo--has-compact .ppb-site-logo__img--compact { display: none; } } .ppb-site-logo__text { display: inline-block; font-family: var(--font-display, inherit); font-weight: var(--ppb-font-weight-display-soft, 600); font-size: clamp(1.125rem, 2.5vw, 1.5rem); line-height: 1.2; color: var(--color-primary, #917145); } /* Footer layout shell — structure only; colour/type from themes */ .ppb-site-footer__inner { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); width: 100%; min-width: 0; box-sizing: border-box; } .ppb-site-footer__main { width: 100%; min-width: 0; } .ppb-site-footer__utility { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); width: 100%; min-width: 0; } .ppb-site-footer__primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); align-items: start; width: 100%; min-width: 0; } .ppb-site-footer__primary--without-food { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Let long address / hours wrap inside the column instead of overflowing the grid. */ .ppb-site-footer__primary > .ppb-site-footer__col { min-width: 0; } /* * Stack to one column only on narrow viewports. (A breakpoint near 900px made most * laptop / split-screen windows look like a “broken” single column.) */ @media (max-width: 47.9375rem) { .ppb-site-footer__primary { grid-template-columns: 1fr; } } .ppb-site-footer__brand { display: flex; flex-direction: column; gap: 0; } .ppb-site-footer__logo-row { margin-bottom: var(--ppb-space-footer-brand-tight, 0.25rem); } .ppb-site-footer__logo-row .ppb-site-logo { line-height: 0; } .ppb-site-footer__pub-name { margin: 0 0 var(--ppb-space-footer-brand-tight, 0.25rem); } h2.ppb-site-footer__subheading { margin: 0; margin-block-end: var(--ppb-space-after-heading); /* Not --font-display: child themes often set a display serif for marketing type. */ font-family: var(--font-body, inherit); font-size: var(--ppb-text-xl, 1.25rem); font-weight: var(--ppb-font-weight-display-strong, var(--ppb-font-weight-bold, 700)); line-height: var(--ppb-leading-tight, 1.3); } .ppb-site-footer__supporting-label { display: block; margin: 0; flex: 0 0 auto; min-width: 0; max-width: max-content; font-family: var(--font-body, inherit); font-size: var(--ppb-text-xl, 1.25rem); font-weight: var(--ppb-font-weight-display-strong, var(--ppb-font-weight-bold, 700)); line-height: var(--ppb-leading-tight, 1.3); } .ppb-site-footer__actions { display: flex; flex-wrap: wrap; gap: var(--ppb-space-stack-xs); margin-block-start: var(--ppb-space-stack-sm); margin-bottom: 0; } .ppb-site-footer__contact-block { display: flex; flex-direction: column; gap: var(--ppb-space-stack-md); } .ppb-site-footer__contact-line { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--ppb-space-stack-sm); margin: 0; } .ppb-site-footer__contact-line--address { align-items: flex-start; } /* Do not grow single-line links (directions / phone): flex:1 pushed the external icon to the row end */ .ppb-site-footer__contact-line .ppb-site-footer__contact-text { flex: 0 1 auto; min-width: 0; } .ppb-site-footer__contact-line--address > address { flex: 1; min-width: 0; margin: 0; font-style: normal; } .ppb-site-footer__contact-line--address > address.ppb-venue-globals__block { margin-block: 0; } .ppb-site-footer__address-wrap { flex: 1; min-width: 0; } .ppb-site-footer__address-wrap > address { margin: 0; font-style: normal; } .ppb-site-footer__address-wrap > address.ppb-venue-globals__block { margin-block: 0; } .ppb-site-footer .ppb-venue-globals__address, .ppb-site-footer .ppb-venue-globals__addr-line { font-weight: var(--ppb-font-weight-bold, 700); } .ppb-site-footer__contact-text--placeholder { opacity: 0.65; } .ppb-site-footer__icon-slot { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: var(--ppb-footer-icon-color, var(--ppb-color-footer-fg, #fefffc)); } .ppb-site-footer__icon-svg { display: block; width: 100%; height: 100%; } /* Same left column as address/phone (icon + gap); link + external icon grouped inside */ .ppb-site-footer__contact-line--directions { flex-wrap: wrap; align-items: center; justify-content: flex-start; } .ppb-site-footer__directions-cta { display: inline-flex; align-items: center; gap: var(--ppb-space-footer-external-icon-gap, 0.35rem); flex: 0 1 auto; min-width: 0; } .ppb-site-footer__directions-link { display: inline-block; color: inherit; } .ppb-site-footer__external-slot { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 0.875rem; height: 0.875rem; color: var(--ppb-footer-icon-color, var(--ppb-color-footer-fg, #fefffc)); } .ppb-site-footer__external-slot .ppb-site-footer__icon-svg--external { width: 100%; height: 100%; } .ppb-site-footer__inline-list .ppb-site-footer__nav-item { display: inline-flex; align-items: center; gap: var(--ppb-space-footer-external-icon-gap, 0.35rem); } /* Wired footer nav (Careers / Contact): anchor wraps label + optional external icon */ .ppb-site-footer__inline-list .ppb-site-footer__nav-item > .ppb-site-footer__nav-inline-link { display: inline-flex; align-items: center; gap: var(--ppb-space-footer-external-icon-gap, 0.35rem); color: inherit; text-decoration: none; } .ppb-site-footer__hours-body { margin: 0; } .ppb-site-footer__hours-plain { margin: 0; white-space: pre-line; } .ppb-site-footer__hours-grid { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; } .ppb-site-footer__hours-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem clamp(1rem, 3vw, 1.75rem); align-items: start; margin: 0; } .ppb-site-footer__hours-grid--split .ppb-site-footer__hours-time { text-align: start; } .ppb-site-footer__hours-row dt, .ppb-site-footer__hours-row dd { margin: 0; } .ppb-site-footer__hours-day { font-weight: var(--ppb-font-weight-bold, 700); } .ppb-site-footer__hours-time { font-weight: var(--ppb-font-weight-light, 300); } /* Prose fallback: bold before first comma, light after (see `ppb_core_site_footer_hours_prose_line_html`) */ .ppb-site-footer__hours-body--prose p { margin: 0; } .ppb-site-footer__hours-body--prose p + p { margin-top: 0.35rem; } .ppb-site-footer__hours-part--label { font-weight: var(--ppb-font-weight-bold, 700); } .ppb-site-footer__hours-sep, .ppb-site-footer__hours-part--time { font-weight: var(--ppb-font-weight-light, 300); } /* “Proudly supporting” + logo: horizontal when space allows; wrap / stack within the grid cell */ .ppb-site-footer__supporting { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--ppb-space-stack-md); margin-top: 2.5rem; min-width: 0; max-width: 100%; box-sizing: border-box; } .ppb-site-footer__supporting-logo { flex: 0 1 auto; min-width: 0; line-height: 0; max-width: min(10.9375rem, 100%); } .ppb-site-footer__supporting-logo-link { display: inline-flex; max-width: 100%; line-height: 0; text-decoration: none; color: inherit; } .ppb-site-footer__supporting .ppb-site-footer__supporting-logo-link { text-decoration: none; } .ppb-site-footer__supporting-img { display: block; width: auto; height: auto; max-width: min(10.9375rem, 100%); max-height: 7rem; object-fit: contain; } /* Mid-width viewports: primary footer is still multi-column with narrow cells — stack label above logo so the row never exceeds the column width (avoids page-level horizontal scroll). */ @media (max-width: 60rem) { .ppb-site-footer__supporting { flex-direction: column; align-items: flex-start; } } .ppb-site-footer__nav-row, .ppb-site-footer__legal-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; } .ppb-site-footer__nav-row--links-only { justify-content: flex-end; } /* Narrow viewports: align socials, footer links, and legal strip to one left column */ @media (max-width: 47.9375rem) { .ppb-site-footer__nav-row { justify-content: flex-start; align-items: flex-start; flex-direction: column; } .ppb-site-footer__legal-row { justify-content: flex-start; align-items: flex-start; /* DOM order is copyright then legal nav; reverse so Privacy/Terms sit above © (copyright last). */ flex-direction: column-reverse; } .ppb-site-footer__nav-row--links-only { justify-content: flex-start; } .ppb-site-footer__utility .ppb-site-footer__social-nav, .ppb-site-footer__utility .ppb-site-footer__link-nav, .ppb-site-footer__utility .ppb-site-footer__legal-nav { width: 100%; max-width: 100%; } .ppb-site-footer__utility .ppb-site-footer__inline-list--end { justify-content: flex-start; } } .ppb-site-footer__copyright { margin: 0; font-weight: var(--ppb-font-weight-light, 300); } .ppb-site-footer__copyright .ppb-site-footer__copyright-link { color: inherit; text-decoration: none; } /* Utility submenus: social, primary footer links, legal — light weight (override theme link bold) */ .ppb-site-footer__utility .ppb-site-footer__social-nav, .ppb-site-footer__utility .ppb-site-footer__link-nav, .ppb-site-footer__utility .ppb-site-footer__legal-nav { font-weight: var(--ppb-font-weight-light, 300); } .ppb-site-footer__utility .ppb-site-footer__social-nav a, .ppb-site-footer__utility .ppb-site-footer__link-nav a, .ppb-site-footer__utility .ppb-site-footer__legal-nav a, .ppb-site-footer__utility .ppb-site-footer__copyright a, .ppb-site-footer__utility .ppb-site-footer__nav-text { font-weight: var(--ppb-font-weight-light, 300); } .ppb-site-footer__inline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .ppb-site-footer__inline-list--end { justify-content: flex-end; } /* Keep SVGs from scaling with an unusually narrow flex column */ .ppb-site-footer .ppb-social-link__icon .ppb-social-svg { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }