/* ==========================================================================
   Sou2na - modern light-mode design layer
   --------------------------------------------------------------------------
   Loaded AFTER the original theme stylesheets so it can restyle without
   forking them. Deliberately keeps the existing page structure, navigation,
   off-canvas panel and footer in place -- this changes how things look, not
   where they are, and it stays in light mode.
   ========================================================================== */

:root {
  --su-bg: #ffffff;
  --su-bg-soft: #f6f8fb;
  --su-bg-sunken: #eef2f7;
  --su-ink: #0f172a;
  --su-ink-soft: #47546b;
  --su-ink-faint: #8a94a6;
  --su-line: #e3e8ef;
  --su-line-soft: #eef1f6;

  --su-brand: #0d6efd;
  --su-brand-dark: #0a58ca;
  --su-brand-tint: #e8f1ff;
  --su-accent: #06b6d4;

  --su-radius-sm: 8px;
  --su-radius: 14px;
  --su-radius-lg: 20px;

  --su-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --su-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --su-shadow: 0 6px 20px rgba(15, 23, 42, .08);
  --su-shadow-lg: 0 16px 40px rgba(15, 23, 42, .12);

  --su-sans: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;

  --su-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- foundations */

html { -webkit-text-size-adjust: 100%; }

body,
#tie-wrapper,
.tie-container {
  background-color: var(--su-bg-soft) !important;
  color: var(--su-ink);
  font-family: var(--su-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.005em;
}

#content,
.site-content { background: transparent; }

::selection { background: var(--su-brand-tint); color: var(--su-brand-dark); }

*:focus-visible {
  outline: 2px solid var(--su-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------- typography */

h1, h2, h3, h4, h5, h6,
.post-title, .entry-title, .thumb-title, .page-title, .widget-title h1,
.wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4, .wf-active h5, .wf-active h6 {
  font-family: var(--su-sans) !important;
  color: var(--su-ink);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.page-title,
.entry-title,
h1.post-title {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.6rem) !important;
  font-weight: 800;
  letter-spacing: -.03em;
}

.entry-content { font-size: 1.0625rem; line-height: 1.8; color: var(--su-ink-soft); }
.entry-content > p { margin: 0 0 1.15em; }
.entry-content strong { color: var(--su-ink); font-weight: 650; }

/* Comfortable reading measure on article bodies only. */
.single .entry-content > p,
.single .entry-content > ul,
.single .entry-content > ol,
.single .entry-content > h2,
.single .entry-content > h3,
.single .entry-content > h4,
.single .entry-content > blockquote { max-width: 72ch; }

.entry-content h2 {
  margin: 2.2em 0 .7em;
  font-size: 1.55rem;
  padding-bottom: .4em;
  border-bottom: 1px solid var(--su-line);
}
.entry-content h3 { margin: 1.8em 0 .6em; font-size: 1.25rem; }
.entry-content h4 { margin: 1.5em 0 .5em; font-size: 1.08rem; }

.entry-content a { color: var(--su-brand-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--su-brand); }

.entry-content ul, .entry-content ol { padding-inline-start: 1.35em; margin: 0 0 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content li::marker { color: var(--su-brand); }

.entry-content blockquote {
  margin: 1.8em 0;
  padding: 1.1em 1.3em;
  background: var(--su-brand-tint);
  border: 1px solid #d6e6ff;
  border-inline-start: 4px solid var(--su-brand);
  border-radius: var(--su-radius);
  color: var(--su-ink);
  font-style: normal;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content img { border-radius: var(--su-radius); height: auto; }
.entry-content figure { margin: 1.6em 0; }

/* ------------------------------------------------------------------- tables
   These articles are frequency tables first and foremost, so the table
   treatment matters more here than in a typical blog theme. */

.entry-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.6em 0;
  font-size: .94rem;
  background: var(--su-bg);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  overflow: hidden;
  box-shadow: var(--su-shadow-xs);
}
.entry-content table th {
  background: var(--su-bg-sunken);
  color: var(--su-ink);
  font-weight: 650;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .8em 1em;
  text-align: start;
  border-bottom: 1px solid var(--su-line);
  white-space: nowrap;
}
.entry-content table td {
  padding: .8em 1em;
  border-bottom: 1px solid var(--su-line-soft);
  color: var(--su-ink-soft);
  vertical-align: middle;
}
.entry-content table tr:last-child td { border-bottom: 0; }
.entry-content table tbody tr:nth-child(even) { background: #fbfcfe; }
.entry-content table tbody tr:hover { background: var(--su-brand-tint); }

/* Numeric columns read far better tabular and monospaced. */
.entry-content table td:nth-child(2),
.entry-content table td:nth-child(3),
.entry-content table td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Keep wide tables usable on phones instead of breaking the layout. */
.entry-content .tie-table-wrap,
.entry-content .su-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.6em 0;
  border-radius: var(--su-radius);
}
.entry-content .su-table-scroll > table { margin: 0; }

/* ---------------------------------------------------------------- header/nav */

#theme-header,
#theme-header .logo-container,
.main-nav-wrapper #main-nav,
#main-nav {
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--su-line);
  box-shadow: none !important;
}

#main-nav .main-menu > ul > li > a,
#main-nav ul.main-menu > li > a {
  color: var(--su-ink-soft) !important;
  font-weight: 550;
  font-size: .935rem;
  letter-spacing: -.01em;
  padding-inline: 14px;
  border-radius: var(--su-radius-sm);
  transition: color .18s var(--su-ease), background-color .18s var(--su-ease);
}
#main-nav .main-menu > ul > li > a:hover,
#main-nav ul.main-menu > li > a:hover {
  color: var(--su-brand-dark) !important;
  background: var(--su-brand-tint);
}

/* The theme paints the active item as a solid block; soften it to a pill. */
#main-nav .main-menu > ul > li.current-menu-item > a,
#main-nav ul.main-menu > li.current-menu-item > a,
#main-nav .main-menu > ul > li.current-post-ancestor > a {
  background: var(--su-brand) !important;
  color: #fff !important;
  border-radius: var(--su-radius-sm);
}
#main-nav .main-menu > ul > li.current-menu-item > a::after { display: none !important; }

#logo img, #logo .tie-logo-img { transition: opacity .2s var(--su-ease); }
#logo a:hover img { opacity: .82; }

/* ------------------------------------------------------------- masonry cards */

#masonry-grid,
.masonry-grid-wrapper { gap: 22px; }

.container-wrapper,
.post-element.container-wrapper {
  background: var(--su-bg);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius-lg) !important;
  box-shadow: var(--su-shadow-sm);
  overflow: hidden;
  transition: transform .28s var(--su-ease), box-shadow .28s var(--su-ease),
    border-color .28s var(--su-ease);
}
.post-element.container-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--su-shadow-lg);
  border-color: #d3dced;
}

.post-element .slide {
  border-radius: var(--su-radius-lg);
  background-size: cover;
  background-position: center;
  position: relative;
}
/* Stronger, smoother scrim so overlaid titles stay legible on busy artwork. */
.post-element .thumb-overlay {
  background: linear-gradient(
    to top,
    rgba(8, 13, 25, .93) 0%,
    rgba(8, 13, 25, .72) 32%,
    rgba(8, 13, 25, .18) 66%,
    rgba(8, 13, 25, .04) 100%
  ) !important;
  padding: 18px !important;
}

.post-element .thumb-title,
.post-element .thumb-title a {
  color: #fff !important;
  font-size: 1.06rem !important;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.post-element .thumb-title a:hover { color: #cfe4ff !important; }

.post-element .thumb-desc {
  color: rgba(255, 255, 255, .84) !important;
  font-size: .875rem;
  line-height: 1.6;
}
.post-element .thumb-meta,
.post-element .post-meta,
.post-element .post-meta span,
.post-element .date {
  color: rgba(255, 255, 255, .72) !important;
  font-size: .78rem !important;
  font-variant-numeric: tabular-nums;
}

/* Category pill on cards */
a.post-cat {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: .715rem !important;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .95) !important;
  color: var(--su-brand-dark) !important;
  box-shadow: var(--su-shadow-xs);
  backdrop-filter: blur(4px);
  transition: transform .2s var(--su-ease), background-color .2s var(--su-ease);
}
a.post-cat:hover {
  background: var(--su-brand) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ------------------------------------------------------ single post surface */

.single .entry-header,
.page .entry-header { margin-bottom: 1.4em; }

#content .entry-content,
.post-inner,
.entry-content-wrap,
.page-content,
.single-post-content {
  background: var(--su-bg);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius-lg);
  box-shadow: var(--su-shadow-sm);
}
.post-inner, .page-content { padding: clamp(20px, 4vw, 40px); }

.post-meta,
.post-meta a,
.post-meta span,
.single .date,
.breadcrumbs,
.breadcrumbs a {
  color: var(--su-ink-faint);
  font-size: .84rem;
}
.breadcrumbs a:hover { color: var(--su-brand-dark); }

.breadcrumbs {
  background: transparent;
  padding: 14px 0;
  font-weight: 500;
}

/* ------------------------------------------------------------ archive intros */

#archive-title,
.archive-title,
.page-header {
  background: var(--su-bg);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius-lg);
  box-shadow: var(--su-shadow-xs);
  padding: clamp(20px, 4vw, 34px);
  margin-bottom: 24px;
  text-align: center;
}
#archive-title .archive-subtitle,
.archive-description,
.term-description {
  color: var(--su-ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 76ch;
  margin-inline: auto;
}

/* ------------------------------------------------------------------ widgets */

.widget,
.widget-container {
  background: var(--su-bg);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius-lg);
  box-shadow: var(--su-shadow-xs);
  overflow: hidden;
}
.widget-title,
.widget-title h4,
.widget-title h2 {
  background: transparent;
  border-bottom: 1px solid var(--su-line);
  font-size: .95rem !important;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 14px 16px;
}

/* --------------------------------------------------- off-canvas side panel */

#mobile-menu,
.side-aside,
#side-aside {
  background: #0d1424 !important;
  border-inline-start: 1px solid rgba(255, 255, 255, .07);
}
.side-aside .widget-title,
.side-aside h2,
.side-aside h4 {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, .1) !important;
  letter-spacing: -.01em;
}
.side-aside a,
.side-aside li a,
#mobile-menu a {
  color: rgba(255, 255, 255, .78) !important;
  border-radius: var(--su-radius-sm);
  transition: background-color .18s var(--su-ease), color .18s var(--su-ease);
}
.side-aside a:hover,
#mobile-menu a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
}
.side-aside .widget,
.side-aside .widget-container {
  background: transparent !important;
  border: 0;
  box-shadow: none;
}

/* ------------------------------------------------------------------- search */

.tie-popup-search-wrap,
.tie-popup .tie-popup-search-form { border-radius: var(--su-radius-lg); }

.search-form input[type="search"],
.search-field,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  background: var(--su-bg);
  border: 1px solid var(--su-line) !important;
  border-radius: var(--su-radius-sm) !important;
  padding: 11px 14px;
  font-family: var(--su-sans);
  font-size: .95rem;
  color: var(--su-ink);
  box-shadow: var(--su-shadow-xs);
  transition: border-color .18s var(--su-ease), box-shadow .18s var(--su-ease);
  max-width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--su-brand) !important;
  box-shadow: 0 0 0 3px var(--su-brand-tint) !important;
  outline: none;
}
::placeholder { color: var(--su-ink-faint); }

button,
input[type="submit"],
.button,
.wpcf7-submit,
.more-link {
  background: var(--su-brand);
  border: 0;
  border-radius: var(--su-radius-sm);
  color: #fff;
  font-family: var(--su-sans);
  font-weight: 600;
  font-size: .95rem;
  padding: 11px 20px;
  cursor: pointer;
  box-shadow: var(--su-shadow-xs);
  transition: background-color .18s var(--su-ease), transform .18s var(--su-ease),
    box-shadow .18s var(--su-ease);
}
button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover,
.more-link:hover {
  background: var(--su-brand-dark);
  transform: translateY(-1px);
  box-shadow: var(--su-shadow-sm);
}

/* Static-build search results list injected by site-runtime.js */
.search-results-static ul > li {
  background: var(--su-bg);
  border: 1px solid var(--su-line) !important;
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow-xs);
  padding: 16px !important;
  transition: box-shadow .2s var(--su-ease), transform .2s var(--su-ease);
}
.search-results-static ul > li:hover {
  box-shadow: var(--su-shadow); transform: translateY(-2px);
}
.search-results-static h2 a { color: var(--su-ink); }
.search-results-static h2 a:hover { color: var(--su-brand-dark); }

/* ------------------------------------------------- channel lookup cards
   The channel search pages ship their own inline CSS; these overrides modernise
   them without touching that markup. */

.channel-card {
  background: var(--su-bg) !important;
  border: 1px solid var(--su-line) !important;
  border-radius: var(--su-radius-lg) !important;
  box-shadow: var(--su-shadow-sm) !important;
  overflow: hidden;
  transition: transform .26s var(--su-ease), box-shadow .26s var(--su-ease);
}
.channel-card:hover { transform: translateY(-3px); box-shadow: var(--su-shadow-lg) !important; }

.channel-header {
  background: var(--su-bg-sunken) !important;
  border-bottom: 1px solid var(--su-line);
  padding: 16px !important;
  gap: 12px;
}
/* Darker end-stop than --su-accent: white text on a light cyan does not carry
   enough contrast, and these badges are only ever 2-3 characters. */
.channel-initials {
  background: linear-gradient(135deg, #0b5ed7, #0e7490) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  box-shadow: var(--su-shadow-xs);
  /* Guards the glyphs if a name yields an unusually pale rendering. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.channel-title { font-size: 1.02rem !important; font-weight: 700 !important; color: var(--su-ink) !important; }

.detail-item {
  border-bottom: 1px solid var(--su-line-soft) !important;
  padding: 10px 16px !important;
  background: transparent !important;
}
.detail-item:last-child { border-bottom: 0 !important; }
.detail-label {
  color: var(--su-ink-faint) !important;
  font-size: .76rem !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.detail-value {
  color: var(--su-ink) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
.frequency-value { color: var(--su-brand-dark) !important; }

/* --------------------------------------------------------------- pagination */

.pages-nav .pages-numbers a,
.pages-nav .pages-numbers span,
.page-numbers {
  border-radius: var(--su-radius-sm) !important;
  border: 1px solid var(--su-line) !important;
  background: var(--su-bg) !important;
  color: var(--su-ink-soft) !important;
  font-weight: 600;
  min-width: 40px;
  transition: all .18s var(--su-ease);
}
.pages-nav .pages-numbers a:hover,
.page-numbers:hover { background: var(--su-brand-tint) !important; color: var(--su-brand-dark) !important; }
.pages-nav .current,
.page-numbers.current {
  background: var(--su-brand) !important;
  border-color: var(--su-brand) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------- footer */

#footer,
.site-footer,
#site-info {
  background: #0d1424 !important;
  color: rgba(255, 255, 255, .66);
  border-top: 0;
}
#footer a,
.site-footer a,
#site-info a { color: rgba(255, 255, 255, .82) !important; transition: color .18s var(--su-ease); }
#footer a:hover,
.site-footer a:hover { color: #fff !important; }
.footer-menu, #site-info .container { padding-block: 18px; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 991px) {
  .post-element .thumb-title,
  .post-element .thumb-title a { font-size: .98rem !important; }
  #masonry-grid, .masonry-grid-wrapper { gap: 16px; }
}

@media (max-width: 767px) {
  .entry-content { font-size: 1rem; }
  .entry-content h2 { font-size: 1.32rem; }
  .post-inner, .page-content { padding: 18px; }
  .entry-content table { font-size: .86rem; }
  .entry-content table th,
  .entry-content table td { padding: .65em .75em; }
}

/* ----------------------------------------------------------------- printing */

@media print {
  #theme-header, #main-nav, #footer, .side-aside, .breadcrumbs, a.post-cat { display: none !important; }
  body, #tie-wrapper { background: #fff !important; }
  .post-inner, .entry-content { border: 0; box-shadow: none; }
}

/* ------------------------------------------------- homepage channels strip
   Injected block above the article grid, fed live from the published sheet.
   Reuses .channel-card so it inherits the styling defined earlier. */

.sou2na-channels-section {
  background: var(--su-bg);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius-lg);
  box-shadow: var(--su-shadow-xs);
  padding: clamp(18px, 3vw, 30px);
  margin-bottom: 24px;
}

.sou2na-channels-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--su-line);
}
.sou2na-channels-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sou2na-channels-head p {
  margin: 0;
  font-size: .88rem;
  color: var(--su-ink-faint);
}

.sou2na-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px;
}

.sou2na-channel-foot {
  margin: 18px 0 0;
  font-size: .84rem;
  color: var(--su-ink-faint);
  text-align: center;
}
.sou2na-channel-foot a { color: var(--su-brand-dark); font-weight: 600; }

/* Placeholder height while the sheet is still loading, so the article grid
   below does not jump once the cards arrive. */
#sou2na-home-channels:empty { min-height: 210px; }

@media (max-width: 480px) {
  .sou2na-channel-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------- homepage channel card layout
   The channel pages ship their own inline CSS that sizes these elements. The
   homepage block reuses the same class names but gets none of that CSS, so
   without explicit rules here the initials badge stretches to full width and
   the label/value pairs collapse into each other ("FREQUENCY12729").
   Scoped to the homepage grid so the channel pages keep their own styling. */

.sou2na-channel-grid .channel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px !important;
}

.sou2na-channel-grid .channel-logo-container {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}

/* Fixed square box, centred glyphs. Without an explicit size the gradient
   stretches to the full card width and the initials end up sitting on top of
   the channel name. !important is needed because the channel pages ship inline
   CSS of their own for this class. */
.sou2na-channel-grid .channel-initials {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  flex: 0 0 42px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: .92rem;
  line-height: 1;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  text-align: center;
}

.sou2na-channel-grid .channel-title {
  flex: 1 1 auto;
  margin: 0 !important;
  font-size: .98rem !important;
  line-height: 1.35;
  /* Long names wrap instead of pushing the badge out of the card. */
  overflow-wrap: anywhere;
}

.sou2na-channel-grid .channel-details { padding: 0; }

/* Label on the left, value on the right, with guaranteed separation. */
.sou2na-channel-grid .detail-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 16px !important;
}

.sou2na-channel-grid .detail-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sou2na-channel-grid .detail-value {
  flex: 1 1 auto;
  text-align: end;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ pager controls
   Give the prev/next controls real spacing and make it obvious when one is
   absent (first and last page). */

.pages-nav { margin: 26px 0 10px; }

.pages-nav .pages-numbers.pages-standard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The theme draws these arrows from an icon font ("tiefonticon", codepoint
   \f106). That font is not loading, so the glyph rendered as an empty tofu box
   next to the label. Neutralise the icon span entirely and use plain Unicode
   arrows, which depend on no external font. */
.pages-nav .first-last-pages .pagination-icon {
  display: none !important;
}

.pages-nav .first-page a::before {
  content: "\2190"; /* leftwards arrow */
  font-size: 1.05em;
  line-height: 1;
}
.pages-nav .last-page a::after {
  content: "\2192"; /* rightwards arrow */
  font-size: 1.05em;
  line-height: 1;
}

.pages-nav .first-last-pages a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--su-bg);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius-sm);
  padding: 11px 18px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--su-ink-soft) !important;
  box-shadow: var(--su-shadow-xs);
  transition: background-color .18s var(--su-ease), color .18s var(--su-ease),
    transform .18s var(--su-ease);
}
.pages-nav .first-last-pages a:hover {
  background: var(--su-brand);
  border-color: var(--su-brand);
  color: #fff !important;
  transform: translateY(-1px);
}

/* When only one control remains, keep it on its natural side. */
.pages-nav .pages-numbers.pages-standard > .last-page:only-child { margin-inline-start: auto; }