/* ==========================================================================
   PODUL — HOMEPAGE

   Hero (lead + five stacked items), the three promo cards, and the category
   rows. The rows reuse .podul-grid and .podul-card from podul-card.css.
   ========================================================================== */

/* The homepage is the .main-content column inside #content.container, which
   podul-overrides.css pins to the design's 1400px.
 *
 * Padding is deliberately NOT reset here. Jannah's .tie-row carries
 * margin-inline: -15px and its columns pay it back with 15px of padding; zeroing
 * that padding leaves the whole homepage sitting 15px left of the logo above it.
 * Let the column padding stand. */
html body .podul-home {
  width: 100% !important;
  max-width: none;
  margin-inline: 0;
  float: none !important;
}

html body .podul-home > section {
  margin-bottom: 4rem;
}

@media (min-width: 992px) {
  html body .podul-home > section { margin-bottom: 6rem; }
}


/* --------------------------------------------------------------------------
   1. Hero — 7 / 5 split
   -------------------------------------------------------------------------- */

html body .podul-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
  padding-top: 3rem;
}

@media (min-width: 992px) {
  html body .podul-hero {
    grid-template-columns: 7fr 5fr;
    gap: 4rem;
  }
}

html body .podul-hero ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .podul-hero__side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

html body .podul-hero__side-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}


/* --------------------------------------------------------------------------
   2. Lead story
   -------------------------------------------------------------------------- */

html body .podul-hero-card {
  display: flex !important;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  list-style: none;
}

html body .podul-hero-card .post-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 2rem;
  background-color: var(--podul-slate-100);
  border: var(--podul-border-thin) solid var(--podul-black);
  border-radius: var(--podul-radius) !important;
  box-shadow: var(--podul-shadow-lg);
  transition: var(--podul-transition);
}

html body .podul-hero-card:hover .post-thumb {
  box-shadow: var(--podul-shadow-lg-hover);
}

html body .podul-hero-card .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--podul-transition-slow);
}

html body .podul-hero-card:hover .post-thumb img {
  transform: scale(1.03);
}

html body .podul-hero-card__cat {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--podul-text-base);
  font-weight: var(--podul-weight-bold);
  letter-spacing: var(--podul-track-wide);
  text-transform: uppercase;
  color: var(--podul-accent);
}

html body .podul-hero-card .podul-hero-card__title {
  margin: 0 0 1.5rem !important;
  font-family: var(--podul-font-display) !important;
  font-size: var(--podul-text-2xl) !important;
  font-weight: var(--podul-weight-headline) !important;
  letter-spacing: var(--podul-track-tight) !important;
  line-height: var(--podul-leading-tight) !important;
  text-transform: none !important;
}

@media (min-width: 768px) {
  html body .podul-hero-card .podul-hero-card__title { font-size: var(--podul-text-5xl) !important; }
}

html body .podul-hero-card .podul-hero-card__title a {
  display: inline;
  padding: 2px;
  margin-left: -2px;
  color: var(--podul-ink) !important;
  background-image: linear-gradient(var(--podul-yellow), var(--podul-yellow));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .3s ease;
}

html body .podul-hero-card:hover .podul-hero-card__title a {
  background-size: 100% 100%;
}

html body .podul-hero-card__excerpt {
  margin: 0 0 2rem;
  font-size: var(--podul-text-lg);
  font-weight: var(--podul-weight-medium);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--podul-slate-600);
}

@media (min-width: 768px) {
  html body .podul-hero-card__excerpt { font-size: var(--podul-text-xl); }
}

html body .podul-hero-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: var(--podul-border-thin) solid var(--podul-black);
}

html body .podul-hero-card__author {
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-wider);
  text-transform: uppercase;
  color: var(--podul-ink);
}

/* Hero: the author's name and the mini rows' category label became links on
   2 September 2026. Both inherit the colour they had as plain text — the name is
   ink, the mini label is the category accent — so the only visible change is the
   pointer state. */
html body a.podul-hero-card__author-name {
  color: inherit;
  text-decoration: none;
  transition: var(--podul-transition);
}

html body a.podul-hero-card__author-name:hover,
html body a.podul-hero-card__author-name:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html body a.podul-mini__cat {
  transition: var(--podul-transition);
}

html body a.podul-mini__cat:hover,
html body a.podul-mini__cat:focus-visible {
  color: var(--podul-ink);
}

html body .podul-hero-card__time {
  margin-left: auto;
  font-size: var(--podul-text-2xs);
  font-weight: var(--podul-weight-bold);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-slate-400);
}


/* --------------------------------------------------------------------------
   3. Hero sidebar rows
   -------------------------------------------------------------------------- */

html body .podul-mini {
  display: flex !important;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 0 1.5rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--podul-rule-light) !important;
  background: none !important;
  list-style: none;
}

html body .podul-mini:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html body .podul-mini__media {
  flex: 0 0 8rem;
  width: 8rem;
}

@media (min-width: 992px) {
  html body .podul-mini__media { flex-basis: 11rem; width: 11rem; }
}

html body .podul-mini .post-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--podul-ratio-card);
  overflow: hidden;
  background-color: var(--podul-slate-100);
  border: var(--podul-border-thin) solid var(--podul-black);
  border-radius: var(--podul-radius) !important;
  box-shadow: var(--podul-shadow-md);
  transition: var(--podul-transition);
}

html body .podul-mini:hover .post-thumb {
  box-shadow: var(--podul-shadow-md-hover);
}

html body .podul-mini .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html body .podul-mini__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

html body .podul-mini__cat {
  display: block;
  margin-bottom: .35rem;
  font-size: var(--podul-text-3xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-accent);
}

html body .podul-mini .podul-mini__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  font-family: var(--podul-font-display) !important;
  font-size: var(--podul-text-md) !important;
  font-weight: var(--podul-weight-headline) !important;
  letter-spacing: var(--podul-track-tight) !important;
  line-height: var(--podul-leading-tight) !important;
  text-transform: none !important;
}

html body .podul-mini .podul-mini__title a {
  display: inline;
  padding: 2px;
  margin-left: -2px;
  color: var(--podul-ink) !important;
  background-image: linear-gradient(var(--podul-yellow), var(--podul-yellow));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .3s ease;
}

html body .podul-mini:hover .podul-mini__title a {
  background-size: 100% 100%;
}

html body .podul-hero__more {
  width: 100%;
}


/* --------------------------------------------------------------------------
   4. Promo cards
   -------------------------------------------------------------------------- */

html body .podul-promos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  html body .podul-promos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

html body .podul-promo {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  background-color: var(--podul-white);
  border: var(--podul-border-thick) solid var(--podul-black);
  box-shadow: var(--podul-shadow-lg);
  transition: var(--podul-transition);
}

html body .podul-promo:hover {
  box-shadow: 12px 12px 0 0 var(--podul-accent);
}

html body .podul-promo__label {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-wider);
  text-transform: uppercase;
  color: var(--podul-accent);
}

html body .podul-promo__dot {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  border: 1px solid var(--podul-black);
  background-color: var(--podul-accent);
  flex-shrink: 0;
}

html body .podul-promo__title {
  margin: 0 0 1rem;
  font-family: var(--podul-font-display);
  font-size: var(--podul-text-2xl);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-tighter);
  line-height: 1;
  text-transform: uppercase;
  color: var(--podul-ink);
}

html body .podul-promo__text {
  flex: 1 1 auto;
  margin: 0 0 2rem;
  font-size: var(--podul-text-base);
  font-weight: var(--podul-weight-medium);
  line-height: 1.6;
  color: var(--podul-slate-600);
}

html body .podul-promo__btn {
  margin-top: auto;
}

/* Amber needs dark text to stay legible. */
html body .podul-promo[style*="FBBF24"] .podul-promo__btn,
html body .podul-promo[style*="fbbf24"] .podul-promo__btn {
  color: var(--podul-ink);
}


/* --------------------------------------------------------------------------
   5. Section headings
   -------------------------------------------------------------------------- */

html body .podul-section-head__more {
  flex-shrink: 0;
  padding: .25rem .5rem;
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-wider);
  text-transform: uppercase;
  color: var(--podul-ink);
  transition: var(--podul-transition);
}

html body .podul-section-head__more:hover {
  background-color: var(--podul-black);
  color: var(--podul-yellow);
}

/* On the homepage the rows are full width, so five across is right.
   `.podul-block` is the page-builder version of the same row: it carries
   .podul-archive for the card styling, and that class alone would pull in the
   archive page's three-across grid. */
@media (min-width: 1280px) {
  html body .podul-home .podul-grid,
  html body .podul-block .podul-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* …but the same block on a category page shares its row with the sidebar, in an
   891px column, where five across gives 152px cards. Three, like the archives —
   which is what those cards were designed against.

   The test is the section, not the block: blocks.php puts `has-sidebar` on any
   builder section with a sidebar, and `full-width` on the homepage's rows. So
   this needs no list of pages, and a homepage section given a sidebar tomorrow
   would fall to three across on its own. Written here rather than beside the
   archive cap in podul-card.css §1 because this file loads later and would
   otherwise win. */
@media (min-width: 1280px) {
  html body .has-sidebar .podul-block .podul-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* --------------------------------------------------------------------------
   6. Row pagination arrows

   Wired to Jannah's block AJAX; see podul_render_home_section().
   -------------------------------------------------------------------------- */

html body .podul-section .mag-box,
html body .podul-section .container-wrapper {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The arrows sit in the section heading, to the right of the title.
   Jannah's .pages-nav is a full-width, centred block; left as-is it eats all the
   remaining space in the flex row and pushes the buttons past the viewport. */
html body .podul-section-nav,
html body .podul-block .mag-box-options {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  /* Room for the 4px hard shadow — see the overflow note below. */
  padding: 0 4px 4px 0 !important;
  background: none !important;
  border: 0 !important;
  text-align: right !important;
}

/* Jannah sets overflow:hidden on both .pages-nav and .pages-numbers, which
   clipped the hard shadow off the right-hand button — the shadow was rendered,
   just cut away by the wrapper. */
html body .podul-section-nav,
html body .podul-section-nav .pages-numbers.pages-standard,
html body .podul-block .mag-box-options,
html body .podul-block .mag-box-options .slider-arrow-nav {
  overflow: visible !important;
}

html body .podul-section-nav .pages-numbers.pages-standard,
html body .podul-block .mag-box-options .slider-arrow-nav {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  width: auto !important;
  float: none !important;
}

/* The heading is now the flex row that holds them, and the title is a link. */
html body .podul-section .podul-section-head,
html body .podul-block .mag-box-title {
  align-items: center;
  gap: 2rem;
}

/* The rule under a section heading is a single black 2px line.
   Jannah draws three things here instead: a 2px hairline at 10% black for the
   border, a 40px blue segment as :after, and a 5px dot as :before. All three
   are replaced by the one rule.
   (The hand-coded homepage's .podul-section-head uses 4px — see podul-base.css
   §9 — so the two differ by design until one of them is changed.) */
html body .podul-block .mag-box-title {
  border-bottom: var(--podul-border-thin) solid var(--podul-black) !important;
}

html body .podul-block .mag-box-title:before,
html body .podul-block .mag-box-title:after {
  display: none !important;
}

/* Jannah's arrow wrapper is built to float right at full width. Inside the
   flex row above it took 1099 of 1336px and squeezed the heading into two
   lines — it only ever needs the width of the two buttons. */
html body .podul-block .mag-box-title .tie-alignright {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto;
}

html body .podul-block .mag-box-title h3 {
  max-width: none !important;
}

html body .podul-section .podul-section-head__title,
html body .podul-block .mag-box-title h3 {
  flex: 1 1 auto;
  min-width: 0;
}

html body .podul-section .podul-section-head__title a,
html body .podul-block .mag-box-title h3 a {
  color: var(--podul-ink) !important;
  transition: var(--podul-transition);
}

html body .podul-section .podul-section-head__title a:hover,
html body .podul-block .mag-box-title h3 a:hover {
  background-color: var(--podul-yellow);
}

html body .podul-section-nav .pages-numbers,
html body .podul-block .mag-box-options .slider-arrow-nav {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: none !important;
}

/* The wrapper spans must stay bare.
 *
 * podul-card.css styles `.pages-nav .pages-numbers span` as a bordered white
 * button for archive pagination, where the span is the current-page indicator.
 * Here the same span merely wraps the arrow, so that rule painted a white box
 * behind each one. Both rules use !important, and the card selector carries one
 * more class — hence the extra class here, to outrank it. */
/* Belt and braces: every span in here is a wrapper, never a button.
   (podul-card.css already excludes this container, but a stray rule from the
   parent theme would land on these too.) */
html body .podul-section-nav .pages-numbers span:not(.pagination-icon),
html body .podul-section-nav .pages-numbers .pagination-icon,
html body .podul-block .mag-box-options li,
html body .podul-block .mag-box-options .pagination-icon {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body .podul-section-nav a.block-pagination,
html body .podul-block .mag-box-options a.block-pagination {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 4.75rem;          /* wider than tall — reads as a control, not an icon */
  height: 3rem;
  padding: 0 !important;
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  box-shadow: var(--podul-shadow-md);
  font-size: 1rem;
  transition: var(--podul-transition);
}

/* Jannah sets .pagination-icon to 10px and gives it side margins for its inline
   layout; both have to go for the glyph to sit centred in the button. */
html body .podul-section-nav a.block-pagination .pagination-icon,
html body .podul-block .mag-box-options a.block-pagination .pagination-icon {
  display: block !important;
  font-size: 1.125rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  text-align: center;
}

html body .podul-section-nav a.block-pagination .pagination-icon::before,
html body .podul-block .mag-box-options a.block-pagination .pagination-icon::before {
  margin: 0 !important;
  line-height: 1 !important;
}

html body .podul-section-nav a.block-pagination:hover,
html body .podul-block .mag-box-options a.block-pagination:hover {
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
  box-shadow: var(--podul-shadow-lg);
}

/* Press: the button drops into the space its shadow occupied. */
html body .podul-section-nav a.block-pagination:active,
html body .podul-block .mag-box-options a.block-pagination:active {
  box-shadow: none;
  transform: translate(4px, 4px);
}

/* Jannah adds .pagination-disabled at the ends of the range. Both arrows keep
   the same yellow button shape so the pair stays visually balanced; the
   disabled one is simply dimmed and inert. */
html body .podul-section-nav a.pagination-disabled,
html body .podul-section-nav a.pagination-disabled:hover {
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
  border-color: var(--podul-black) !important;
  box-shadow: var(--podul-shadow-md) !important;
  opacity: .35;
  pointer-events: none;
  transform: none;
}

/* The loading spinner Jannah drops into the container while fetching. */
html body .podul-section .mag-box-container.is-loading,
html body .podul-section .posts-list-container.is-loading {
  opacity: .35;
  transition: opacity .2s ease;
}


/* ==========================================================================
   Hero, as a page-builder block
   --------------------------------------------------------------------------
   Same hero as the one front-page.php renders, rebuilt for Jannah's page
   builder. The difference is structural, not visual: front-page.php puts the
   lead story and the five stacked items in two separate <ul>s, and a block
   only ever produces one list.

   Floats, not grid. Grid needs to know how many rows the lead story spans, and
   `grid-row: 1 / -1` does not do it — `-1` resolves against the *explicit*
   grid, which here has one row, so the lead story stayed in row 1 and the mini
   rows started underneath it. Hard-coding a span would tie the CSS to the
   block's post count. A float takes the left side and lets `clear: right`
   stack the rest down the right, whatever the count, which is also how Jannah
   builds its own big-post-left-box.

   Everything the cards themselves look like — .podul-hero-card, .podul-mini —
   is shared with front-page.php and lives above. Nothing here restyles them,
   so the two homepages cannot drift apart.
   ========================================================================== */

html body .podul-hero-block .podul-hero__list-block {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {

  html body .podul-hero-block .podul-hero__list-block {
    display: flow-root;   /* contains the floats without a clearfix element */
    gap: 0;
  }

  /* !important, and the long path, because the card rules above neutralise
     Jannah's own floats with `float: none !important; width: auto !important`
     — the two homepages share those cards, so the block re-floats them here
     rather than weakening the rule they both depend on. */
  html body .podul-hero-block .podul-hero__list-block > .podul-hero-card {
    float: left !important;
    width: 58% !important;
  }

  html body .podul-hero-block .podul-hero__list-block > .podul-mini,
  html body .podul-hero-block .podul-hero__list-block > .podul-hero__more-item {
    float: right !important;
    clear: right !important;
    width: 38% !important;
    margin-bottom: 1.5rem !important;
  }
}

html body .podul-hero-block .podul-hero__more-item {
  list-style: none;
  padding: 0;
  border: 0;
}

/* Lead story on its own.
   When the hero block is set to one post — the arrangement where the section's
   sidebar carries the tabs widget instead of the five stacked rows — there is
   nothing to float beside, so the card takes the column and the "more news"
   button goes with the rows it belonged to. Keyed off the absence of
   .podul-mini rather than a class, so changing the block's post count in the
   builder is all it takes to switch between the two layouts. */
html body .podul-hero-block .podul-hero__list-block:not(:has(.podul-mini)) > .podul-hero-card {
  float: none !important;
  width: 100% !important;
}

html body .podul-hero-block .podul-hero__list-block:not(:has(.podul-mini)) .podul-hero__more-item {
  display: none !important;
}

/* The block wrapper is Jannah's .mag-box, which brings a card frame the hero
   does not want — the hero sits directly on the page like it does today. */
html body .podul-hero-block.mag-box {
  margin-top: 3rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html body .podul-hero-block.mag-box .mag-box-title {
  display: none;
}


/* ==========================================================================
   News ticker
   --------------------------------------------------------------------------
   Jannah's "News Ticker" block, dressed as a Podul element: square, black
   hairline, yellow label. Left stock it arrives as a red pill on a grey
   rounded bar, which is the one thing in the design language the homepage
   does not have.

   The markup is not the template's — jquery-news-ticker rewrites the <ul>
   into .ticker-wrapper > .ticker > .ticker-content at runtime, so the text
   itself is styled through .ticker-content, not .news-item.
   ========================================================================== */

html body .breaking-news-outer.mag-box {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* `.mag-box .breaking` in style.min.css carries two classes and `.breaking` in
   helpers.min.css is flagged important, so both outrank a plain `html body`
   prefix — hence the extra class and the !importants here. */
html body .mag-box .breaking {
  display: flex !important;
  align-items: stretch;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  background-color: var(--podul-white) !important;
  box-shadow: var(--podul-shadow-sm);
  overflow: hidden;
}

html body .mag-box .breaking .breaking-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  padding: .625rem 1.125rem;
  background-color: var(--podul-yellow) !important;
  border-right: var(--podul-border-thin) solid var(--podul-black);
  border-radius: 0 !important;
  color: var(--podul-ink) !important;
  font-family: var(--podul-font-display);
  font-size: var(--podul-text-2xs);
  font-weight: var(--podul-weight-bold);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
}

/* Jannah paints the label with a :before block (the red slab) and finishes it
   with a :after notch. Both are hidden: the background above is the label. */
html body .mag-box .breaking .breaking-title:before,
html body .mag-box .breaking .breaking-title:after {
  display: none !important;
}

html body .mag-box .breaking .ticker-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 1.125rem;
}

html body .mag-box .breaking .ticker-content a {
  color: var(--podul-ink);
  font-family: var(--podul-font-body);
  font-weight: var(--podul-weight-medium);
  transition: var(--podul-transition);
}

html body .mag-box .breaking .ticker-content a:hover {
  background-color: var(--podul-yellow);
}

/* The ticker's own prev/next, matched to the section arrows but at label size. */
html body .mag-box .breaking .breaking-news-nav {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 .625rem;
  list-style: none;
}

html body .mag-box .breaking .breaking-news-nav li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  border: var(--podul-border-thin) solid var(--podul-black);
  background-color: var(--podul-white);
  color: var(--podul-ink);
  cursor: pointer;
  transition: var(--podul-transition);
}

html body .mag-box .breaking .breaking-news-nav li:hover {
  background-color: var(--podul-yellow) !important;
}