/* Content safeguards shared by every bundled theme, including generated CSS builds. */
body { overflow-wrap: anywhere; }
:where(main, header, footer, #announcement-bar) :where(*) { min-width: 0; }
:where(main, header, footer) :where(img, video, iframe, input, select, textarea) { max-width: 100%; }
/* A picture printed with its width and height keeps its shape: the attributes reserve its place, CSS sets its size. */
:where(main, header, footer) :where(img[width][height]) { height: auto; }
:where(main, header, footer) a { max-width: 100%; }
.btn-pill, .loom-button, .loom-nav__item > a { white-space: normal; max-width: 100%; }
.btn-pill > *, .loom-button > * { min-width: 0; }
#announcement-bar .flex { flex-wrap: wrap; }
/* A footer row with more in it than fits (thirteen legal links, a long copyright beside them) wraps to another line instead of
   squeezing its words letter by letter. Zero specificity: a theme's own flex-wrap wins. */
:where(footer) :where(.flex:not(.flex-nowrap)) { flex-wrap: wrap; }
/* The same for a row of links or buttons in the page (thirteen social profiles under a team member, seven buttons in a
   hero): they wrap instead of shrinking over each other. */
:where(main) :where(.flex:not(.flex-nowrap):not(.flex-col):not(.overflow-x-auto):not([class*="snap-x"]):not(.swiper-wrapper)):where(:has(> a + a, > button + button, > a + button)) { flex-wrap: wrap; }
#site-header nav[class*="lg:flex"], .loom-nav--desktop { flex-wrap: wrap; }
#site-header :is(.h-14, .h-16, .h-20) { height: auto; min-height: 4rem; padding-block: .5rem; gap: .75rem; }
#site-header nav .group:focus-within > .invisible { opacity: 1; visibility: visible; }
#site-header nav .group > .absolute { max-width: calc(100vw - 2rem); }
#site-header nav .group > .absolute > * { min-width: min(200px, calc(100vw - 2rem)); }
.loom-nav__children { visibility: hidden; }
.loom-nav__item:is(:hover, :focus-within) > .loom-nav__children { visibility: visible; }
.loom-nav--mobile .loom-nav__children { visibility: visible; }

/* Switch crowded desktop navigation to the existing menu, not clipped links (resilience.js measures; the header declares its
   parts with data-site-nav, data-site-menu-button, data-site-cta and data-site-phone). The call to action stays in the bar
   unless it does not fit there either (theme-nav-compact-cta); the menu holds it then. */
#site-header.theme-nav-compact :is([data-site-nav], [data-theme-desktop-nav], [data-site-nav-row], [data-site-phone]),
#site-header.theme-nav-compact-cta [data-site-cta],
#site-header.theme-nav-compact > div > .hidden.lg\:flex { display: none !important; }
/* Themes without the contract (made before it): their old parts. */
#site-header.theme-nav-compact:not(:has([data-site-cta])) .hidden.lg\:inline-block,
#site-header.theme-nav-compact:not(:has([data-site-phone])) a[href^="tel:"]:not(.mobile-nav *),
#site-header.theme-nav-compact:not(:has([data-site-cta])) .loom-header__actions > .loom-button { display: none !important; }
#site-header.theme-nav-compact :is([data-site-menu-button], .mobile-menu-btn),
#site-header.theme-nav-compact .loom-menu-button { display: inline-flex !important; flex-shrink: 0; }
#site-header.theme-nav-compact .loom-menu-button { display: grid !important; }
/* The parts left in a compact bar keep one line each. */
#site-header.theme-nav-compact [data-site-cta], #site-header.theme-nav-compact [data-site-cta] * { white-space: nowrap; }
.loom-mobile-panel:not([hidden]) .loom-menu-close { display: grid; }
#site-header.theme-nav-compact .mobile-nav:not(.hidden),
#site-header.theme-nav-compact > div > .flex.lg\:hidden { display: flex !important; }
#site-header.theme-nav-compact .loom-header__inner { grid-template-columns: minmax(0, 1fr) auto; }

/* A picture whose file is missing (resilience.js): a quiet tint in the picture's place instead of the broken-image sign; a
   missing logo gives way to the website's name. */
img.theme-picture-missing { background: color-mix(in srgb, currentColor 8%, transparent); object-fit: cover; min-height: 2.5rem; }
img.theme-picture-missing--logo { display: none !important; }
.theme-logo-missing { display: inline-block; max-width: min(18rem, 60vw); overflow: hidden; font-weight: 700; font-size: 1.1em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* With JavaScript disabled, navigation and answers remain available. */
@media (scripting: none) {
  .mobile-menu-btn, .loom-menu-button, .loom-menu-close, .loom-nav__submenu-toggle { display: none !important; }
  .mobile-nav.hidden { display: block !important; max-height: none !important; }
  .loom-mobile-panel[hidden] { display: block; position: static; }
  .loom-nav--mobile .loom-nav__children[hidden] { display: block; }
  .faq-answer { max-height: none !important; opacity: 1 !important; }
}

/* White text on an accent fill reads the palette's on-accent colour: a light accent (amber, sage, lavender) gets dark text. Palettes
   and custom colours set --on-accent; without it the text stays white. */
[class~="bg-accent"][class~="text-white"],
[class~="bg-accent/90"][class~="text-white"],
[class~="hover:bg-accent"][class~="hover:text-white"]:hover { color: var(--on-accent, #fff) !important; }

/* Tables in written text (articles, Markdown pages, rich text): one layout for every theme. The Markdown parser puts each
   table in .kit-table and marks a column of amounts; themes give only the colours and type of the lines and headings.
   The table is as wide as the text column, so tables on a page line up; one too wide for a phone scrolls inside the
   wrapper, never the page; a long text column wraps while a short amount keeps its line. */
.kit-table { max-width: 100%; margin: 0 0 1.5em; overflow-x: auto; overscroll-behavior-x: contain; }
.kit-table:last-child { margin-bottom: 0; }
.kit-table > table { display: table; width: 100%; max-width: none; margin: 0; border-collapse: collapse; table-layout: auto; font-variant-numeric: tabular-nums; }
.kit-table :is(th, td) { padding: 0.65em 0.9em; text-align: start; vertical-align: top; overflow-wrap: break-word; }
.kit-table :is(th, td):first-child { padding-inline-start: 0; }
.kit-table :is(th, td):last-child { padding-inline-end: 0; }
.kit-table thead th { vertical-align: bottom; }
:where(.kit-table) :where(th, td) { border-bottom: 1px solid color-mix(in srgb, var(--text-primary, currentColor) 14%, transparent); }
:where(.kit-table) :where(thead th) { border-bottom-color: color-mix(in srgb, var(--text-primary, currentColor) 32%, transparent); font-weight: 600; }
.kit-table .kit-table__num { text-align: end; }
.kit-table .kit-table__nowrap { white-space: nowrap; }
/* A long amount still wraps, but not into a sliver beside a long name. */
.kit-table td.kit-table__num:not(.kit-table__nowrap) { min-width: min(11em, 40vw); }

/* Lists, quotes and rules in a table-less piece of written text keep their theme's look; these only stop a quote or a
   list from running past the column on a phone. */
:where(.kit-rich-text, [class*="-prose"], .prose) :where(ul, ol) { padding-inline-start: 1.35em; }
:where(.kit-rich-text, [class*="-prose"], .prose) :where(blockquote, pre) { max-width: 100%; }

/* Grids whose rows fill (theme_balanced_grid_classes in helpers.php picks the columns from the number of items): each
   item spans two of twice as many tracks, so a short last row can start half a column in and sit centred. One set of
   column counts for a phone, a tablet and a desktop. */
.kit-balanced { display: grid; }
.kit-balanced > * { grid-column-end: span 2; min-width: 0; }
@media (max-width: 639.98px) {
  .kit-balanced.kit-bal-phone--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-phone--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-phone-last--2-1 > :nth-last-child(1) { grid-column-start: 2; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .kit-balanced.kit-bal-mid--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-mid--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-mid--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-mid-last--2-1 > :nth-last-child(1) { grid-column-start: 2; }
  .kit-balanced.kit-bal-mid-last--3-1 > :nth-last-child(1) { grid-column-start: 3; }
  .kit-balanced.kit-bal-mid-last--3-2 > :nth-last-child(2) { grid-column-start: 2; }
}
@media (min-width: 1024px) {
  .kit-balanced.kit-bal--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--4 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--5 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--6 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-last--2-1 > :nth-last-child(1) { grid-column-start: 2; }
  .kit-balanced.kit-bal-last--3-1 > :nth-last-child(1) { grid-column-start: 3; }
  .kit-balanced.kit-bal-last--3-2 > :nth-last-child(2) { grid-column-start: 2; }
  .kit-balanced.kit-bal-last--4-1 > :nth-last-child(1) { grid-column-start: 4; }
  .kit-balanced.kit-bal-last--4-2 > :nth-last-child(2) { grid-column-start: 3; }
  .kit-balanced.kit-bal-last--4-3 > :nth-last-child(3) { grid-column-start: 2; }
  .kit-balanced.kit-bal-last--5-1 > :nth-last-child(1) { grid-column-start: 5; }
  .kit-balanced.kit-bal-last--5-2 > :nth-last-child(2) { grid-column-start: 4; }
  .kit-balanced.kit-bal-last--5-3 > :nth-last-child(3) { grid-column-start: 3; }
  .kit-balanced.kit-bal-last--5-4 > :nth-last-child(4) { grid-column-start: 2; }
  .kit-balanced.kit-bal-last--6-1 > :nth-last-child(1) { grid-column-start: 6; }
  .kit-balanced.kit-bal-last--6-2 > :nth-last-child(2) { grid-column-start: 5; }
  .kit-balanced.kit-bal-last--6-3 > :nth-last-child(3) { grid-column-start: 4; }
  .kit-balanced.kit-bal-last--6-4 > :nth-last-child(4) { grid-column-start: 3; }
  .kit-balanced.kit-bal-last--6-5 > :nth-last-child(5) { grid-column-start: 2; }
}

/* The steps block (kit-blocks/process_steps.php, .kit-steps) on a phone, where the steps stand in one column: the number, the
   icon and the title share one line and the description runs under them, instead of number, title and icon stacked. */
@media (max-width: 639.98px) {
  .kit-steps .kit-card__content { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 0.75rem; }
  .kit-steps .kit-card__eyebrow { grid-column: 1; grid-row: 1; margin: 0; }
  .kit-steps .kit-card__body { display: contents; }
  .kit-steps .kit-card__body > .kit-icon:first-child { grid-column: 2; grid-row: 1; margin: 0; }
  .kit-steps .kit-card__title { grid-column: 3; grid-row: 1; margin: 0; }
  .kit-steps .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__title { grid-column: 2 / -1; }
  .kit-steps .kit-card__body > :not(.kit-icon:first-child) { grid-column: 1 / -1; margin-top: 0.5rem; }
  /* With an icon the icon leads the line and the number follows it as a quiet label (kit.css), then the title. */
  .kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__eyebrow { grid-column: 2; }
  .kit-steps .kit-card__body > .kit-icon:first-child { grid-column: 1; }
}

/* A masonry gallery (image_gallery with layout masonry): every picture whole, in two columns on a phone, three on a
   tablet and up to four on a desktop, for a gallery page of 20 to 40 pictures. */
/* A picture that asked to be shown whole (its media object's fit: "whole", CMS 4.21.1: a map, a plan, a poster) is never
   cropped: its frame takes the picture's own shape. A picture with a focus keeps that part in view (object-position on
   the picture itself, from ResponsiveImages::img). */
img[data-fit="whole"] { object-fit: contain !important; }
.kit-picture:has(img[data-fit="whole"]) { aspect-ratio: auto !important; height: auto !important; align-self: start; }
.kit-picture:has(img[data-fit="whole"]) img { width: 100% !important; height: auto !important; aspect-ratio: auto !important; transform: none !important; animation: none !important; }

/* A flat shade a theme lays over a picture or video (Chic, Universal): the layer names its own strength (--shade) and
   follows the block's tint (--pgs-tint, 1 unless the block asked for a lighter or a darker shade; CMS 4.21.2). */
.theme-shade { background-color: rgb(0 0 0 / min(0.94, calc(var(--shade, 0.55) * var(--pgs-tint, 1)))) !important; }

/* width: inside a stack that starts its children at the left, the columns would shrink to fit their pictures and leave
   the rest of a wide window empty (4.21.1). */
.kit-masonry { columns: 2; column-gap: 0.75rem; width: 100%; }
.kit-masonry > * { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: auto; margin: 0 0 0.75rem; break-inside: avoid; }
.kit-masonry img { display: block; width: 100%; height: auto; }
@media (min-width: 640px) { .kit-masonry { columns: 3; column-gap: 1rem; } .kit-masonry > * { margin-bottom: 1rem; } }
@media (min-width: 1024px) { .kit-masonry--4 { columns: 4; } .kit-masonry--2 { columns: 2; } }

/* The top of the page on a phone: the announcement's message keeps to at most two lines, and its link is never cut or
   hidden (it is often the phone number): beside the message when both fit, on a line of its own when they do not, whole
   and tall enough to tap. The close button keeps its place at the end of the band, out of the flow, so it never moves
   to a line of its own. The phone and email band above the header gives way to the action bar's Call button (or keeps to
   one short line when there is no phone), so the page itself starts within about 120 px. */
@media (max-width: 639.98px) {
  .theme-announcement__row { position: relative !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 0.15rem 0.6rem !important; padding-block: 0.4rem !important; font-size: 0.8125rem !important; line-height: 1.3 !important; text-align: center !important; }
  .theme-announcement__row:has(> button) { padding-inline-end: 2.5rem !important; }
  .theme-announcement__row > :not(a, button) { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; }
  .theme-announcement__row > a { display: inline-flex !important; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 1.75rem; max-width: 100%; margin: 0; overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
  .theme-announcement__row > button { position: absolute !important; inset-inline-end: 0.25rem; inset-inline-start: auto !important; top: 50% !important; flex: none; width: 2rem; height: 2rem; margin: 0 !important; transform: translateY(-50%) !important; }
  .theme-announcement__message { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-align: center; }
  body:has(> .theme-action-bar .theme-action-bar__call) :is(.atelier-topbar, .encore-topbar, .forge-topbar, .grove-topbar, .kite-topbar, .muse-topbar, .pulse-topbar, .saffron-topbar, .loom-topline) { display: none; }
  :is(.atelier-topbar, .encore-topbar, .forge-topbar, .grove-topbar, .kite-topbar, .muse-topbar, .pulse-topbar, .saffron-topbar) { font-size: 0.8rem; }
  :is(.atelier-topbar, .encore-topbar, .forge-topbar, .grove-topbar, .kite-topbar, .muse-topbar, .pulse-topbar, .saffron-topbar) > * { flex-wrap: nowrap !important; padding-block: 0.3rem !important; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  :is(.atelier-topbar, .encore-topbar, .forge-topbar, .grove-topbar, .kite-topbar, .muse-topbar, .pulse-topbar, .saffron-topbar) [class$="__social"] { display: none; }
}

/* The parts of a stock enquiry form a theme draws with theme_enquiry_fields_html and theme_enquiry_after_html (CMS 4.21.0):
   a yes/no question and its two answers, a ticked box with its words, the notes under the button and the call line. The
   theme's own classes give the inputs their look; these only lay out what every theme draws the same way. */
.theme-enquiry-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-enquiry-legend { display: block; margin-bottom: 0.5rem; padding: 0; font-size: 0.875rem; font-weight: 500; }
.theme-enquiry-choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.theme-enquiry-check { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; cursor: pointer; }
.theme-enquiry-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent, currentColor); }
.theme-enquiry-notes { display: grid; gap: 0.35rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 1.5; opacity: 0.85; }
.theme-enquiry-notes li { position: relative; padding-inline-start: 1.1rem; }
.theme-enquiry-notes li::before { content: ""; position: absolute; inset-inline-start: 0.2rem; top: 0.6em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent, currentColor); }
.theme-enquiry-call { margin: 0.85rem 0 0; font-size: 0.9375rem; text-align: center; }
.theme-enquiry-call__link { font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 0.2em; color: inherit; }
.kit-enquiry .kit-form__call { text-align: center; }

/* The phone action bar (theme_action_bar_html, shown by resilience.js): the page's main action and a Call button fixed to
   the bottom of a phone screen, above the safe area. It slides in once the visitor has scrolled past the first screen
   and away while a form field has focus, while the place its action leads to is on screen and near the footer. The
   page keeps room for it below its last line, so nothing shifts when it appears. */
.theme-action-bar { display: none; }
@media (max-width: 767.98px) {
  /* The bar steps aside near the footer, so only a page without one needs room below its last line. */
  body:has(> .theme-action-bar):not(:has(footer)) { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  .theme-action-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem max(0.75rem, env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
    border-top: 1px solid color-mix(in srgb, var(--text-primary, #1a1a1a) 12%, transparent);
    background: color-mix(in srgb, var(--surface, #fff) 96%, transparent);
    box-shadow: 0 -8px 24px -16px color-mix(in srgb, var(--text-primary, #1a1a1a) 45%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    will-change: transform;
  }
  .theme-action-bar.is-shown { transform: none; visibility: visible; transition: transform 0.25s ease, visibility 0s; }
  .theme-action-bar a { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .theme-action-bar a:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
  .theme-action-bar__primary {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.35rem 1rem;
    border-radius: 0.75rem;
    background: var(--accent, #1a1a1a);
    color: var(--on-accent, #fff);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
  }
  .theme-action-bar__primary[hidden] { display: none; }
  .theme-action-bar__label, .theme-action-bar__note { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .theme-action-bar__note { font-size: 0.75rem; font-weight: 500; opacity: 0.9; }
  .theme-action-bar__note[hidden] { display: none; }
  .theme-action-bar__call {
    flex: 0 0 auto;
    gap: 0.4rem;
    padding: 0 1rem;
    border: 1.5px solid color-mix(in srgb, var(--text-primary, #1a1a1a) 22%, transparent);
    border-radius: 0.75rem;
    color: var(--text-primary, #1a1a1a);
    font-weight: 600;
  }
  .theme-action-bar__primary[hidden] + .theme-action-bar__call { flex: 1 1 auto; }
  .theme-action-bar__call svg { flex: none; width: 1.25rem; height: 1.25rem; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .theme-action-bar, .theme-action-bar.is-shown { transition: none; }
}

/* The first section under the breadcrumb starts close to it: the breadcrumb already opens the page, so a full band of
   empty space above the first heading (about 130 px) only pushes the content down. */
main > nav[aria-label]:first-child + .kit-root:not(.pgs-page-title) > .kit-section:first-child { padding-top: clamp(1.5rem, 3.5vw, 3rem); }
main > nav[aria-label]:first-child + section { padding-top: clamp(1.5rem, 3.5vw, 3rem); }
/* With the page title header between them (kit.css, .pgs-page-title: its own compact top, nothing below), the first
   section follows the title as closely as a section follows its heading, so breadcrumb, title and content read as one. */
.pgs-page-title + .kit-root > .kit-section:first-child,
.pgs-page-title + section { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
/* A page whose first block opens with its own heading gets no title header: that heading is the page's h1 (PageHead::
   promoteOpeningHeading). It keeps its block's look, eyebrow, ornament and spacing, a step larger (about the size of the
   title header's) so it reads as the page's heading, not a section's. Here, not in kit.css: a theme's own block may open the
   page on a page that draws nothing with the kit. */
h1.pgs-page-heading { zoom: 1.15; }

/* A logo in its own colours that would vanish into what is behind it (resilience.js decides from its pixels) sits on a
   plate of the opposite lightness. */
.brand-logo-original.brand-logo-plate { box-sizing: content-box; padding: 0.4rem 0.65rem; border-radius: 0.6rem; }
.brand-logo-original.brand-logo-plate--light { background: #fbfaf7; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.brand-logo-original.brand-logo-plate--dark { background: #1d1f22; }

/* The footer's large name (theme_footer_wordmark, site setting footer_wordmark) in a theme with no look of its own for it: the
   heading face in a faded shade of the footer's text, as large as its length lets it be on one line of the screen (capped),
   centred under the footer, never wider than the page. Decoration: hidden from screen readers, not selectable. */
.theme-footer-wordmark {
  display: block;
  max-width: 100%;
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  overflow: hidden;
  color: currentColor;
  font-family: var(--font-heading, inherit);
  font-size: clamp(2rem, calc(min(100vw, 80rem) * 0.88 / (var(--theme-wordmark-chars, 10) * 0.62)), 9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.95;
  opacity: 0.12;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: center;
  user-select: none;
}

/* The website's name beside its mark in a footer is never cut: the header keeps it to one line (and an ellipsis) to hold its
   bar together, but a footer has the room, so the name wraps under itself instead ("Baidarių nu…" in a footer column, CMS
   4.20). Important: the Tailwind themes write the header's limits inline (render_brand_text). */
footer .brand-lockup-text {
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* On a phone, where the header bar is narrowest, a name that does not fit one line beside the menu button takes a second,
   balanced line ("Baidarių / nuomėlė") instead of an ellipsis; only a name longer than two lines is cut, at the end of the
   second. A desktop header keeps the theme's one line. */
@media (max-width: 639.98px) {
header .brand-lockup-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
  text-wrap: balance;
}
}
/* A menu entry or footer link that leads to another website ends in a small drawn arrow, in the link's own colour, so nobody
   types one into the label: OutsideLinks puts an empty .pgs-outside-arrow at the end of such a link on the finished page (an
   element, because themes draw their own underlines with a link's ::after). It shows in a header, a menu, a drawer and a
   footer; anywhere else (a link in the page's text) it stays hidden. */
.pgs-outside-arrow { display: none; }
:is(header, footer, nav, dialog, [data-site-nav], [data-site-drawer], [class*="mobile"]) .pgs-outside-arrow {
  display: inline-block;
  flex: none;
  width: 0.62em;
  height: 0.62em;
  margin-inline-start: 0.3em;
  vertical-align: 0.06em;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (forced-colors: active) {
  :is(header, footer, nav, dialog, [data-site-nav], [data-site-drawer], [class*="mobile"]) .pgs-outside-arrow { forced-color-adjust: none; background: LinkText; }
}