/* ==========================================================================
   Homepage facelift (preview). Layered AFTER main.css, touches no markup.
   One type family, one brand colour, calm surfaces, instant press feedback.
   ========================================================================== */

:root {
  --fl-ink: #1d1d1f;
  --fl-ink-2: #515154;
  --fl-ink-3: #6e6e73;
  --fl-canvas: #f4f3ef;
  --fl-card: #ffffff;
  --fl-hair: rgba(0, 0, 0, 0.08);
  --fl-brand: #80a51b;
  --fl-brand-ink: #4d6a07;
  --fl-brand-deep: #2f4400;
  --fl-radius: 14px;
  --fl-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.06);
  --fl-shadow-hi: 0 2px 4px rgba(0, 0, 0, 0.06), 0 14px 34px rgba(0, 0, 0, 0.10);
  --fl-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --fl-ease: cubic-bezier(0.25, 1, 0.5, 1);

  /* accents, now used for a label, never for a whole block */
  --fl-events: #1f8a95;
  --fl-news: #b8661f;
  --fl-library: #6f7a2c;
  --fl-calendar: #1f9a67;
  --fl-poll: #8a4f4f;
}

/* --- Type: one family everywhere, size-specific tracking ---------------- */
body, input, select, textarea, button,
h1, h2, h3, h4, h5, h6, .lang-switch, .lang-switch a, .lang-switch span,
#banner, #menu2, #menu3, #mobile-menu, #mobile-menu2,
.highlights .box, .number-of-trees, .number-of-trees span,
#cta, .clips, #footer {
  font-family: var(--fl-font) !important;
}
body {
  background: var(--fl-canvas) !important;
  color: var(--fl-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
section.wrapper { background: transparent !important; }
/* main.css lays a fixed 50% grey sheet over the whole viewport; the canvas colour replaces it */
body:before { display: none !important; }

/* --- Category bar: a translucent material that stays with you ----------- */
/* Forest green, not the lime: white on the old #80a51b measured 2.9:1, and small text needs
   4.5:1. #44620f gives 7.0:1. The lime stays as the accent line under the current section. */
#menu2 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(68, 98, 15, 0.94) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
#menu2 > nav > a:after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 44%; height: 3px; border-radius: 3px 3px 0 0;
  background: #fff;
  transform: translateX(-50%) scaleX(0);
  transition: transform 200ms var(--fl-ease);
}
#menu2 > nav > a:hover:after, #menu2 > nav > a.active:after { transform: translateX(-50%) scaleX(1); }
#menu2 > nav > a,
#menu2 > nav > a:first-child {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  line-height: 52px !important;
  position: relative;
  transition: background-color 150ms var(--fl-ease), opacity 100ms ease-out !important;
}
#menu2 > nav > a:hover,
#menu2 > nav > a.active { background: rgba(255, 255, 255, 0.08) !important; }
#menu2 > nav > a:active { opacity: 0.7; transition-duration: 0ms !important; }

/* The weekly review is the first item of the bar. The bar holds one more link, so items size
   to their words and never wrap onto a second line. */
#menu2 > nav > a { width: auto !important; flex: 1 1 auto; white-space: nowrap; padding: 0 0.55rem !important; }
/* Where am I: the current section is marked in every menu. The bar already underlines .active
   (the lime line under the link); the header links and the two phone strips get the same cue. */
/* in the forest header the current section is the one link at full white and bold; an underline
   collided with the coloured rule, and lime text read as a colour from somewhere else */
#banner .inner .banner-menu > div > a.active { color: #fff !important; font-weight: 700 !important; text-decoration: none; }
#mobile-menu .scroll-inner a.active {
  color: var(--fl-ink) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #44620f;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
#mobile-menu2 .scroll-inner a.active {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
/* never let the phone strip wrap: an item that allows a line break drops onto a row of its own */
#mobile-menu .scroll-inner, #mobile-menu2 .scroll-inner { white-space: nowrap; }

/* The second lane: from a dark slab to one line on the page, the weekly review and how fresh it is */
#menu3 {
  background: transparent !important;
  margin: 0 !important;
  padding: 1rem 0 0;
}
#menu3 > nav > div {
  line-height: 1 !important;
  gap: 0.5rem !important;
  flex-wrap: wrap;
}
#menu3 .fl-item {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem !important;
  border-radius: 999px;
  background: var(--fl-card);
  box-shadow: 0 0 0 1px var(--fl-hair);
  color: var(--fl-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color 150ms ease-out, transform 80ms ease-out !important;
}
#menu3 .fl-item b { font-weight: 700; }
#menu3 .fl-item span { color: var(--fl-ink-3); }
#menu3 .fl-item:hover { background: #ecebe6; }
#menu3 .fl-item:active { transform: scale(0.97); }
/* green while the latest issue is under a week old, grey once it is not */
.fl-lane .dot {
  flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: #1f9a67;
  box-shadow: 0 0 0 3px rgba(31, 154, 103, 0.18);
}
#menu3 .fl-stale .dot { background: #b5b5ad; box-shadow: none; }

/* --- Header: the forest header, measured again ----------------------------
   Search and language are one family: 32px pills of the same glass, 24px under the top edge on
   every page. (A slim-bar alternative was built and compared on 27.09.2026; this one was kept.) */
#banner .inner > .search > input {
  width: 180px; height: 32px !important; margin: 0;
  padding: 0 14px 0 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 16px !important; box-shadow: none !important;
  background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E") no-repeat 12px 50% / 15px 15px !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff !important; font: 400 14px/30px var(--fl-font) !important;
  transition: background-color 0.2s ease;
}
#banner .inner > .search > input:focus { width: 260px; background-color: rgba(255, 255, 255, 0.2) !important; }
#banner .inner > .search > input::placeholder { color: rgba(255, 255, 255, 0.72) !important; }
#banner .inner > .lang-switch > ul {
  height: 32px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#banner .inner > .lang-switch > ul > li > a,
#banner .inner > .lang-switch > ul > li > span { height: 30px; line-height: 30px; padding: 0 12px; font-size: 12px; letter-spacing: 0.06em; }
#banner .inner .banner-menu > div > a {
  font-weight: 500 !important; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.8) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
@media (hover: hover) { #banner .inner .banner-menu > div > a:not(.active):hover { color: #fff !important; } }
@media screen and (min-width: 1041px) {
  #banner.mainpage { height: 300px !important; min-height: 300px; }
  #banner:not(.mainpage) { height: 200px !important; min-height: 200px; }
  /* logo in the middle, two equal blocks either side of it, one gap */
  #banner .inner { display: flex !important; align-items: center; justify-content: center; gap: 3.5rem; }
  #banner .inner > .logo { display: block; flex: 0 0 auto; width: auto; margin: 0; padding: 0; }
  #banner .inner > .logo img { display: block; width: 220px; }
  #banner:not(.mainpage) .inner > .logo img { width: 160px; }
  #banner .inner .banner-menu { display: block !important; flex: 0 0 18rem; width: 18rem; padding: 0 !important; }
  /* each block is two even columns, each word centred in its column, 44px rows */
  #banner .inner .banner-menu > div { display: grid; grid-template-columns: 1fr 1fr; line-height: 44px; }
  #banner .inner .banner-menu > div > div { display: none; }
  #banner .inner .banner-menu > div > a { float: none !important; margin: 0 !important; text-align: center; font-size: 18px !important; line-height: 44px; }
  #banner .inner .banner-menu > div:first-child { border-bottom-width: 2px !important; }
  /* the coloured rules continue the line either side of "UN", which sits 2.6% below the logo's centre */
  #banner.mainpage .inner .banner-menu { position: relative; top: 6px; }
  #banner:not(.mainpage) .inner .banner-menu { position: relative; top: 4px; }
  #banner.mainpage .inner > .search, #banner.mainpage .inner > .lang-switch { top: -16px; }
  #banner:not(.mainpage) .inner > .search, #banner:not(.mainpage) .inner > .lang-switch { top: 4px; }
}
@media screen and (max-width: 1040px) {
  #banner, #banner.mainpage { height: auto !important; min-height: 0 !important; padding: 16px 0 20px !important; }
  #banner .inner { display: block !important; width: calc(100% - 30px) !important; margin: 0 auto; }
  #banner .inner > .logo { display: block; width: auto !important; margin: 0 auto !important; padding: 0 !important; }
  #banner .inner > .logo img { display: block; width: 148px !important; margin: 0 auto; }
  #banner .inner > .search, #banner .inner > .lang-switch { top: 0; }
}
@media screen and (max-width: 736px) {
  #banner .inner > .logo img { width: 136px !important; }
  /* search folds to a round button beside the logo and opens across it */
  #banner .inner > .search { z-index: 3; }
  #banner .inner > .search > input { width: 32px; padding: 0 !important; background-position: 8px 50% !important; }
  #banner .inner > .search > input::placeholder { color: transparent !important; }
  #banner .inner > .search > input:focus { width: calc(100vw - 128px); padding: 0 14px 0 34px !important; background-position: 12px 50% !important; }
  #banner .inner > .search > input:focus::placeholder { color: rgba(255, 255, 255, 0.72) !important; }
}

/* Phone menu strips. The nav itself scrolls; .scroll-inner is narrower than its links, so a mask on
   it hid every link scrolled into view. The edge fades come from main.css's own .scroll-indicator. */
#mobile-menu, #mobile-menu2 { font-family: var(--fl-font) !important; }
/* the phone category strip gets the same forest green as the desktop bar (white text 7:1, not 2.9:1) */
#mobile-menu2 { background: #44620f !important; }
#mobile-menu2 a { color: #fff !important; }
#mobile-menu2 .scroll-indicator.left { background-image: linear-gradient(to right, rgba(68, 98, 15, 1), rgba(68, 98, 15, 0)) !important; }
#mobile-menu2 .scroll-indicator.right { background-image: linear-gradient(to right, rgba(68, 98, 15, 0), rgba(68, 98, 15, 1)) !important; }
#mobile-menu .scroll-inner a { font-weight: 500; color: var(--fl-ink-2) !important; }
#mobile-menu .scroll-inner span, #mobile-menu2 .scroll-inner span { opacity: 0.25; }

/* with the counter gone, the grid starts one gap below the weekly review line */
.wrapper > .inner > .highlights:first-child { margin-top: 1.25rem; }

/* --- Conference: one quiet sentence above the tiles, no block behind it ---- */
.fl-announce { text-align: center; padding: 1.1rem 16px 0; }
.fl-announce a {
  display: inline-block;
  max-width: 44rem;
  color: var(--fl-ink-2) !important;
  text-decoration: none !important;
  font: 400 1rem/1.45 var(--fl-font);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.fl-an-title { color: var(--fl-ink); font-weight: 600; }
.fl-an-more { color: var(--fl-brand-ink); font-weight: 600; white-space: nowrap; }
.fl-announce a:active { opacity: 0.55; transition: none; }

/* --- The tree count as the newsletter card's headline, over Latvia ------- */
#cta > .inner { background: #23390a !important; text-align: left !important; padding: 2.75rem 2.75rem 2.5rem !important; }
#cta > .inner:before { background: radial-gradient(120% 120% at 85% 20%, rgba(169, 207, 58, 0.16), rgba(0, 0, 0, 0) 60%) !important; }
#cta .fl-fact-wrap { max-width: 54%; margin-bottom: 1.5rem; }
#cta .fl-eyebrow { color: rgba(255, 255, 255, 0.72); font: 700 0.74rem/1 var(--fl-font); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.7rem; }
#cta h2.fl-fact {
  margin: 0 0 0.6rem !important;
  text-align: left !important;
  font-size: 3.1rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}
#cta h2.fl-fact b { font-weight: 800; }
#cta .fl-exact { color: rgba(255, 255, 255, 0.62); font: 500 0.8rem/1.4 var(--fl-font); margin: 0 0 1.1rem; font-variant-numeric: tabular-nums; }
#cta .fl-sub { color: rgba(255, 255, 255, 0.88); font: 500 1.02rem/1.4 var(--fl-font); margin: 0; }
#cta .fl-map { position: absolute; right: 2.75rem; top: 50%; transform: translateY(-50%); height: 78%; width: auto; max-width: 40%; opacity: 0.9; }
#cta > .inner #newsletter-subscription { margin: 0 !important; max-width: 440px !important; }

/* --- Cards ------------------------------------------------------------ */
.highlights .content {
  border-radius: var(--fl-radius) !important;
  box-shadow: var(--fl-shadow) !important;
  transition: transform 220ms var(--fl-ease), box-shadow 220ms var(--fl-ease) !important;
  -webkit-transform: translateZ(0);
}
.highlights a:hover .content,
.highlights .content.solid:hover {
  box-shadow: var(--fl-shadow-hi) !important;
  transform: translateY(-2px);
  opacity: 1 !important;
}
/* feedback lives on the press, and it is instant */
.highlights a:active .content {
  transform: scale(0.985);
  transition-duration: 80ms !important;
}

/* Photo tiles: a softer, taller scrim so the headline always reads */
.highlights header {
  border-radius: 0 !important;
  padding: 3.5rem 1.4rem 1.6rem !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%) !important;
}
.highlights header h3 {
  font-weight: 650 !important;
  font-size: 1.12rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.012em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.highlights .box1 header h3 { font-size: 1.5rem !important; letter-spacing: -0.02em; line-height: 1.2 !important; }
.highlights .details { right: 1.4rem !important; bottom: 0.55rem !important; }
.highlights .details > label {
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 400 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.01em;
}

/* List cards (events, news, library, calendar, poll): white, colour as a label */
.highlights .content.solid,
.highlights .poll-box .content.solid {
  background: var(--fl-card) !important;
  color: var(--fl-ink) !important;
  box-shadow: var(--fl-shadow) !important;
}
.highlights .content.solid h2 {
  color: var(--fl-accent, var(--fl-brand-ink)) !important;
  text-align: left !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  padding: 1.6rem 1.75rem 0.9rem !important;
  margin: 0 !important;
  border-bottom: 0 !important;
}
.highlights .content.solid .list { padding: 0 1.75rem !important; }
.highlights .content.solid .list > div,
.highlights .content.solid .list > div a,
.highlights .content.solid h3 {
  color: var(--fl-ink) !important;
  text-transform: none !important;
  font-size: 1rem !important;
  font-weight: 550 !important;
  line-height: 1.38 !important;
  letter-spacing: -0.008em;
}
.highlights .content.solid .list > div {
  border-bottom: 1px solid var(--fl-hair) !important;
  padding: 0 0 0.75rem !important;
  margin: 0 0 0.75rem !important;
}
.highlights .content.solid .list > div:last-child { border-bottom: 0 !important; }
.highlights .content.solid .list > div a:hover { color: var(--fl-accent, var(--fl-brand-ink)) !important; }
.highlights .content.solid .list .date {
  display: block;
  color: var(--fl-ink-3);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.15rem;
}
.highlights .content.solid.blue { --fl-accent: var(--fl-events); }
.highlights .content.solid.brown { --fl-accent: var(--fl-news); }
.highlights .content.solid.green { --fl-accent: var(--fl-library); }
.highlights .content.solid.green-blue { --fl-accent: var(--fl-calendar); }
.highlights .poll-box .content.solid { --fl-accent: var(--fl-poll); }

/* Library card lists the newest documents; titles run long, so three lines at most */
.highlights .content.solid.green .list > div a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.highlights .content.solid.green .list .date { text-transform: uppercase; }

/* Calendar */
.highlights .content.datepickk #Datepickk,
.highlights .content.datepickk #Datepickk .d-calendar,
.highlights .content.datepickk #Datepickk .d-header {
  background: transparent !important;
  color: var(--fl-ink) !important;
}
.highlights .content.datepickk #Datepickk .d-header p,
.highlights .content.datepickk #Datepickk .d-header span {
  color: var(--fl-ink) !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em;
}
.highlights .content.datepickk #Datepickk .d-month,
.highlights .content.datepickk #Datepickk .d-year {
  font-size: 1.15rem !important;
  text-transform: none !important;
}
.highlights .content.datepickk #Datepickk .d-month { text-transform: capitalize !important; }
/* the month alone: the year is the two-digit "26" and adds nothing to a tile that shows this month */
.highlights .content.datepickk #Datepickk .d-year { display: none !important; }
/* arrows: thin chevrons instead of stacked border triangles */
.highlights .content.datepickk #Datepickk .d-header i:after { display: none !important; }
.highlights .content.datepickk #Datepickk .d-header i:before {
  border: 0 !important;
  width: 8px; height: 8px;
  top: 11px !important; left: 12px !important;
  border-left: 2px solid var(--fl-calendar) !important;
  border-bottom: 2px solid var(--fl-calendar) !important;
  transform: rotate(45deg);
}
.highlights .content.datepickk #Datepickk .d-header i#d-next:before { left: 9px !important; transform: rotate(-135deg); }
.highlights .content.datepickk #Datepickk .d-header i:hover { background-color: rgba(31, 154, 103, 0.1) !important; }
.highlights .content.datepickk #Datepickk .d-calendar .d-tables .d-table > label,
.highlights .content.datepickk #Datepickk .d-week div,
.highlights .content.datepickk #Datepickk .d-week p {
  color: var(--fl-ink) !important;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.highlights .content.datepickk #Datepickk .d-calendar .d-tables .d-table > label.prev,
.highlights .content.datepickk #Datepickk .d-calendar .d-tables .d-table > label.next {
  color: #86868b !important;
}
.highlights .content.datepickk #Datepickk .d-table input + label.today {
  border: 0 !important;
  color: #fff !important;
  font-weight: 700;
}
.highlights .content.datepickk #Datepickk .d-table input + label.today:after {
  content: ""; position: absolute; z-index: 1;
  width: 2rem; height: 2rem; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--fl-calendar);
}
.highlights .content.datepickk #Datepickk .d-table input + label.today text { color: #fff !important; }
.highlights .content.datepickk #Datepickk .d-table input + label [data-tooltip]:after {
  background-color: var(--fl-calendar) !important;
  width: 5px !important; height: 5px !important;
  top: auto !important; bottom: -7px; right: 50% !important;
  transform: translateX(50%);
}
.highlights .content.datepickk #Datepickk .d-table input + label.prev [data-tooltip]:after,
.highlights .content.datepickk #Datepickk .d-table input + label.next [data-tooltip]:after { opacity: 0.45; }

.highlights .content.datepickk #Datepickk .d-calendar { box-shadow: none !important; }

/* Poll */
.highlights .box .poll { padding: 1.6rem 1.75rem !important; }
.highlights .box .poll .question {
  color: var(--fl-ink) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.38 !important;
  letter-spacing: -0.008em;
}
.highlights .box .poll .answers > div {
  border: 1px solid var(--fl-hair) !important;
  background: #f6f5f2;
  color: var(--fl-ink) !important;
  border-radius: 10px !important;
  padding: 0.45rem 0.8rem !important;
  text-align: left !important;
  font-size: 0.88rem !important;
  line-height: 1.3;
  transition: background-color 120ms ease-out, transform 80ms ease-out;
}
.highlights .box .poll .answers > div:hover { background: #ecebe6 !important; color: var(--fl-ink) !important; }
.highlights .box .poll .answers > div:active { transform: scale(0.98); }
.highlights .box .poll .poll-details { color: var(--fl-ink-3) !important; }

/* --- Newsletter: from a full-bleed band to one card inside the column, the
       forest photo framed like the tiles, the form on a glass panel --------- */
#cta {
  background: none !important;
  padding: 1rem 0 0 !important;
}
#cta > .inner {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 3rem 2rem 2.75rem;
  background: url(../images/forest-bg1.jpg) center 70% / cover no-repeat;
  box-shadow: var(--fl-shadow);
  isolation: isolate;
}
#cta > .inner:before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12, 22, 6, 0.35) 0%, rgba(12, 22, 6, 0.7) 100%);
}
#cta h2 {
  color: #fff !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  text-shadow: none !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.25 !important;
  text-wrap: balance; /* on a phone it broke inside "e-pastā" */
}
#cta #newsletter-form { margin: 0 !important; padding: 0 !important; }
/* One control, not two: the field is part of the glass and only the button is solid.
   newsletter.css stacks them into two white slabs below 768px; that is undone here. */
#cta #newsletter-subscription {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0 !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 150ms ease-out !important;
}
#cta #newsletter-subscription:hover { transform: none !important; box-shadow: none !important; }
#cta #newsletter-subscription:focus-within { border-color: rgba(255, 255, 255, 0.6) !important; }
#cta #newsletter-email {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 1.1rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 400 16px/44px var(--fl-font) !important; /* 16px keeps iOS from zooming in on focus */
}
#cta #newsletter-email::placeholder { color: rgba(255, 255, 255, 0.72) !important; font-style: normal !important; }
#cta #newsletter-subscription button {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 44px !important;
  line-height: 44px !important;
  margin: 0 !important;
  padding: 0 1.25rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--fl-brand-deep) !important;
  font: 700 13px/44px var(--fl-font) !important;
  letter-spacing: 0.05em;
  transition: transform 80ms ease-out !important;
}
#cta #newsletter-subscription button:before { display: none !important; }
#cta #newsletter-subscription button:active { transform: scale(0.97); }

/* --- Video / broadcast sections: neutral surface, colour moves to a label - */
.clips,
.clips.orange, .clips.green, .clips.blue {
  background: var(--fl-card) !important;
  border-radius: 18px !important;
  box-shadow: var(--fl-shadow);
}
.clips > h2,
.clips.green:before, .clips.blue:before {
  display: block;
  color: var(--fl-brand-ink) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.6rem 2rem 0 !important;
  margin: 0 !important;
}
.clips.green:before { content: "Video"; }
.clips.blue:before { content: "Raidījumi"; }
.clips > div { padding: 1rem 2rem 3rem !important; }
.clips .content {
  background: transparent !important;
  border-radius: 12px !important;
  transition: transform 200ms var(--fl-ease) !important;
}
.clips .content:hover { opacity: 1 !important; }
.clips a:active .content { transform: scale(0.985); transition-duration: 80ms !important; }
.clip {
  border-radius: 12px !important;
  box-shadow: none !important;
  background-color: #e8e7e2;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
}
.clip .play-video, .clip .play-audio { height: 100% !important; transition: opacity 150ms ease-out; }
/* The play (video) and microphone (audio) marks are always shown, small and a little translucent in
   the bottom-left corner, on every device. They used to appear only on hover, big in the middle: a
   touch screen needed one tap to reveal and a second to play, the middle is usually someone's face,
   and on a desktop nothing said a thumbnail was playable until the pointer was on it. A pointer
   brightens the mark to full on hover. */
.clip .play-video, .clip .play-video:hover,
.clip .play-audio, .clip .play-audio:hover {
  opacity: 0.85 !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
.clip .play-video { background-size: 2.6rem !important; background-position: left 0.7rem bottom 0.7rem !important; }
.clip .play-audio { background-size: 2rem !important; background-position: left 0.8rem bottom 0.8rem !important; }
@media (hover: hover) {
  a:hover .clip .play-video, a:hover .clip .play-audio,
  .clip:hover .play-video, .clip:hover .play-audio { opacity: 1 !important; }
}
.clips .details {
  color: var(--fl-ink-3) !important;
  font-size: 0.72rem !important;
  padding: 0.75rem 0 0 !important;
  letter-spacing: 0.01em;
}
.clips .details > span { color: var(--fl-hair) !important; }
.clips .content h3 {
  color: var(--fl-ink) !important;
  text-align: left !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.008em;
  padding: 0.4rem 0 0 !important;
  height: auto !important;
  /* three whole lines at most: a max-height cut the third line in half, padding counted in */
  max-height: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clips .more {
  color: var(--fl-brand-ink) !important;
  font-family: var(--fl-font) !important;
  font-size: 0.8rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  bottom: 1.1rem !important;
}
.clips .more:after { content: " \203A"; }

/* ==========================================================================
   Inner pages (layout_page.php): the article or listing is one white sheet,
   the sidebar a column of small cards beside it, all in the same type.
   ========================================================================== */
#main { padding-top: 1.25rem; }
#main .inner { background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
#main .inner:after { content: ""; display: table; clear: both; }
#main .content {
  width: calc(74% - 1rem) !important;
  padding: 2.5rem 3rem 3rem !important;
  background: var(--fl-card);
  border-radius: 18px;
  box-shadow: var(--fl-shadow);
}
#main .sidebar { width: 26% !important; }

/* sidebar: each block a quiet card, its heading a small label */
#main .sidebar > div {
  background: var(--fl-card);
  border-radius: var(--fl-radius);
  box-shadow: var(--fl-shadow);
  padding: 1.25rem 1.35rem 0.5rem;
  margin-bottom: 1rem;
}
#main .sidebar h3, #main .sidebar h3 > a {
  border: 0 !important;
  margin: 0 0 0.6rem !important;
  padding: 0 !important;
  color: var(--fl-brand-ink) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
}
#main .sidebar .posts > div { border-bottom: 1px solid var(--fl-hair) !important; margin: 0 !important; padding: 0.6rem 0 !important; line-height: 1.35 !important; }
#main .sidebar .posts > div:last-child { border-bottom: 0 !important; }
#main .sidebar .posts > div > a { color: var(--fl-ink) !important; font-size: 0.9rem !important; font-weight: 550; letter-spacing: -0.005em; }
#main .sidebar .posts > div > a:hover { color: var(--fl-brand-ink) !important; }
/* sidebar videos: the thumbnail with a play mark, the title under it (preview markup, .fl-vid) */
#main .sidebar .posts > div.fl-vid { border-bottom: 0 !important; padding: 0.5rem 0 0.75rem !important; }
#main .sidebar .posts > div.fl-vid > a { display: block; }
.fl-vid-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #e8e7e2; margin-bottom: 0.55rem; }
.fl-vid-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-vid-thumb:after {
  content: ""; position: absolute; left: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='white'/%3E%3C/svg%3E") no-repeat 58% 50% / 14px 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fl-vid-title { display: block; }
@media (hover: hover) { #main .sidebar .fl-vid a:hover .fl-vid-thumb img { opacity: 0.9; } }
#main .sidebar .polls { padding-bottom: 1.1rem; }
#main .sidebar .polls .poll .question { color: var(--fl-ink) !important; font-size: 0.92rem !important; font-weight: 600 !important; line-height: 1.38 !important; }
#main .sidebar .polls .poll .answers > div {
  border: 1px solid var(--fl-hair) !important;
  background: #f6f5f2;
  color: var(--fl-ink) !important;
  border-radius: 10px !important;
  padding: 0.45rem 0.7rem !important;
  text-align: left !important;
  font-size: 0.84rem !important;
  line-height: 1.3;
}
#main .sidebar .polls .poll .answers > div:hover { background: #ecebe6 !important; }

/* page headings and article titles: large, tight, the one loud thing on the sheet */
#main .content .page-heading {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  color: var(--fl-ink);
  font-size: 2rem !important;
  font-weight: 750 !important;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-transform: none;
  text-wrap: balance;
}
#main .content > .article .title, #main .content > .article > h2.title {
  font-size: 2.35rem !important;
  font-weight: 750 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.028em;
  color: var(--fl-ink);
  margin-bottom: 0.9rem !important;
  text-wrap: balance;
}
#main .content .article-meta, #main .content .article-meta .details, #main .content .article .details {
  color: var(--fl-ink-3) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.005em;
}
#main .content .share-btn {
  border-radius: 999px !important;
  border: 1px solid var(--fl-hair) !important;
  background: var(--fl-card) !important;
  color: var(--fl-ink-2) !important;
  box-shadow: none !important;
  transition: background-color 120ms ease-out, transform 80ms ease-out !important;
}
#main .content .share-btn:hover { background: #f1f0eb !important; color: var(--fl-ink) !important; }
#main .content .share-btn:active { transform: scale(0.96); }
#main .content > .article .image { border-radius: 14px !important; box-shadow: none !important; }

/* reading: one comfortable measure, generous leading, links that look like links */
#main .content .article .text {
  max-width: 68ch;
  color: #2a2a2c;
  font-size: 1.07rem;
  line-height: 1.7;
  letter-spacing: 0.002em;
}
#main .content .article .text p { margin: 0 0 1.15em; }
#main .content .article .text > p:first-child { font-size: 1.14rem; line-height: 1.6; color: var(--fl-ink); }
#main .content .article .text h2, #main .content .article .text h3, #main .content .article .text h4,
#main .content .article .text p > strong:only-child {
  display: block;
  margin: 2rem 0 0.7rem !important;
  color: var(--fl-ink);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
#main .content .article .text a {
  color: var(--fl-brand-ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere; /* pasted raw links no longer push the column wide */
}
#main .content .article .text img { border-radius: 12px; }
#main .content .article .text blockquote {
  margin: 1.75rem 0; padding: 0 0 0 1.5rem;
  border: 0 !important;
  color: var(--fl-ink-2); font-size: 1.14rem; line-height: 1.6; font-style: normal;
}

/* weekly review: each "raw link + sentence" item is one readable block, the whole block the link */
#main .content .article .text.wr > p:first-child { font-size: inherit; font-weight: inherit; }
#main .content .article .text.wr .wr-section {
  margin: 2.1rem 0 0.8rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--fl-hair);
  color: var(--fl-ink);
  font-size: 1.2rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.015em;
}
#main .content .article .text.wr .wr-entry { margin: 0 0 0.6rem; }
#main .content .article .text.wr .wr-item {
  display: block;
  padding: 0.85rem 1rem 0.8rem;
  border-radius: 12px;
  background: #f6f5f2;
  color: var(--fl-ink) !important;
  text-decoration: none !important;
  transition: background-color 150ms ease-out, transform 80ms ease-out;
}
#main .content .article .text.wr a.wr-item:hover { background: #eeede7; }
#main .content .article .text.wr a.wr-item:active { transform: scale(0.99); }
#main .content .article .text.wr .wr-text { display: block; font-size: 1rem; line-height: 1.55; }
#main .content .article .text.wr .wr-src {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--fl-brand-ink) !important;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none !important;
}
#main .content .article .text.wr .wr-src:after { content: " \203A"; }
#main .content .article .text.wr .wr-bare .wr-src { margin-top: 0; }
#main .content .article .text.wr .wr-short {
  text-decoration: none !important;
  font-size: 0.85rem;
  font-weight: 650;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  background: rgba(169, 207, 58, 0.2);
}

/* listings: the same card language as the homepage tiles */
#main .content .articles { margin: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
#main .content .articles .article { width: auto !important; height: auto !important; float: none !important; margin: 0 !important; }
#main .content .articles .article .image {
  height: 210px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform 220ms var(--fl-ease);
}
#main .content .articles .article a:hover .image { transform: translateY(-2px); }
#main .content .articles .article a:active .image { transform: scale(0.985); transition-duration: 80ms; }
#main .content .articles .article .title { margin: 0.8rem 0 0.3rem !important; font-size: 1.12rem !important; font-weight: 650 !important; line-height: 1.3 !important; letter-spacing: -0.012em; }
#main .content .articles .article .title a { color: var(--fl-ink) !important; }
#main .content .articles .archive { grid-column: 1 / -1; margin: 0.5rem 0 0 !important; border-top: 1px solid var(--fl-hair) !important; padding-top: 0.5rem; }
#main .content .articles .article-archived { margin: 0 !important; padding: 0.6rem 0; border-bottom: 1px solid var(--fl-hair) !important; }
#main .content .articles .article-archived a { color: var(--fl-ink) !important; font-size: 0.95rem !important; font-weight: 550 !important; }
#main .content .articles .article-archived a:hover { color: var(--fl-brand-ink) !important; }

/* calendar, videos, library, search, contact form */
/* main.css names Georgia on search results and parts of articles directly; icons keep their font */
#main .content, #main .content *:not(.fa):not(.icon):not([class*="fa-"]) { font-family: var(--fl-font) !important; }
#main .content .search-results .search-results-title {
  color: var(--fl-ink); font-size: 2rem !important; font-weight: 750 !important; line-height: 1.12;
  letter-spacing: -0.025em; text-transform: none !important; margin: 0 0 1rem !important; padding: 0 !important; border: 0 !important;
}
#main .content .search-results .subitem > h3 { margin: 0.25rem 0 0.35rem !important; }
#main .content .search-results .subitem > h3 > strong > a { font-size: 1.08rem !important; line-height: 1.35 !important; color: var(--fl-ink) !important; }
#main .content .search-results .subitem .date { color: var(--fl-ink-3) !important; font-variant-numeric: tabular-nums; }
#main .content .search-results .subitem b { color: var(--fl-ink) !important; background: rgba(169, 207, 58, 0.28); border-radius: 3px; padding: 0 2px; }
#main .content .form-box h2 {
  color: var(--fl-ink); font-size: 1.3rem !important; font-weight: 700 !important; letter-spacing: -0.012em;
  text-transform: none !important; margin: 2rem 0 1rem !important;
}
#main .content .form label { color: var(--fl-ink-2) !important; font-size: 0.85rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
#main .content .calendar-event { border-radius: 12px; }
#main .content .calendar-event .title { font-size: 1.05rem !important; font-weight: 650 !important; letter-spacing: -0.01em; }
#main .content .videos .video { border-bottom: 1px solid var(--fl-hair); }
#main .content .videos .video .clip { border-radius: 12px !important; box-shadow: none !important; }
#main .content .videos .video .description h3, #main .content .videos .video .description a {
  color: var(--fl-ink) !important; text-transform: none !important; font-weight: 650 !important; letter-spacing: -0.01em;
}
#main .content .documents_list h3, #main .content .heading_h2 { color: var(--fl-ink) !important; letter-spacing: -0.012em; }
#main .content .documents_list a { color: var(--fl-brand-ink) !important; }
/* Library type scale. The intro was 28px under a 29px page title, so it read as the title; it is a
   lede now. Section names step down to one size above the list, and the 663 document links drop
   from 16px medium to regular weight, so the list reads as text rather than a wall of green. */
#main .content .heading_h2 h2 {
  font-size: 1.25rem !important; font-weight: 400 !important; line-height: 1.45 !important;
  letter-spacing: -0.008em; color: var(--fl-ink-2) !important; max-width: 38em; margin: 0 0 1.5rem !important;
}
#main .content .documents h3 { font-size: 1.15rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.01em; }
#main .content .documents li a { font-size: 1.05rem !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: -0.003em; }
#main .content .search-results .item a { color: var(--fl-ink) !important; font-weight: 650; letter-spacing: -0.01em; }
#main .content .search-results .item a:hover { color: var(--fl-brand-ink) !important; }
#main .content .search-results .item { color: var(--fl-ink-2); font-size: 0.95rem; line-height: 1.55; }
#main .content .search-results .location { color: var(--fl-brand-ink) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.1em; text-transform: uppercase; }
#main .content .search-page-search input[type="text"],
#main .content .form input[type="text"], #main .content .form input[type="email"], #main .content .form textarea {
  background: #f6f5f2 !important;
  border: 1px solid var(--fl-hair) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--fl-ink) !important;
  font-size: 16px !important;
}
#main .content .form input:focus, #main .content .form textarea:focus, #main .content .search-page-search input:focus {
  background: #fff !important;
  border-color: #6f8f22 !important;
  outline: 3px solid rgba(169, 207, 58, 0.35);
}
#main .content .form button, #main .content .form .comment-send {
  height: 44px !important;
  min-height: 0 !important;
  width: auto !important;
  line-height: 44px !important;
  padding: 0 1.4rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #44620f !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 700 !important;
}

@media screen and (max-width: 980px) {
  #main { padding-top: 0.75rem; }
  #main .content { width: 100% !important; padding: 1.5rem 1.25rem 2rem !important; border-radius: 14px; }
  #main .content > .article .title, #main .content > .article > h2.title { font-size: 1.7rem !important; }
  #main .content .page-heading { font-size: 1.55rem !important; margin-bottom: 1.1rem !important; }
  #main .content .article .text { font-size: 1.04rem; }
}
@media screen and (max-width: 640px) {
  #main .content .articles { grid-template-columns: 1fr; }
}

/* --- Apple design pass: feedback, touch, focus -------------------------- */
/* hover belongs to pointers: on a touch screen a tapped tile would otherwise stay lifted */
@media (hover: hover) {
  .fl-announce a:hover .fl-an-more { text-decoration: underline; text-underline-offset: 3px; }
}
@media (hover: none) {
  .highlights a:hover .content, .highlights .content.solid:hover { transform: none; box-shadow: var(--fl-shadow) !important; }
  #main .content .articles .article a:hover .image { transform: none; }
  #main .content .article .text.wr a.wr-item:hover { background: #f6f5f2; }
}
/* every link answers the press, instantly, not only the cards */
#mobile-menu .scroll-inner a:active, #mobile-menu2 .scroll-inner a:active,
.highlights .content.solid .list a:active, #main .sidebar .posts a:active,
#main .content .articles .article-archived a:active, .clips .more:active, #banner .banner-menu a:active {
  opacity: 0.55;
  transition: none !important;
}
/* phone strips: a link was only as tall as its text (~16px); now it fills the strip's height */
#mobile-menu2 .scroll-inner a { display: inline-block; line-height: 40px; }
#mobile-menu .scroll-inner a { display: inline-block; line-height: 30px; }
/* keyboard focus is visible wherever it lands */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(169, 207, 58, 0.9) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Motion and material preferences ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .highlights .content, .clips .content, #menu2 > nav > a, #menu2 > nav > a:after { transition: none !important; }
  .highlights a:hover .content, .highlights .content.solid:hover,
  .highlights a:active .content, .clips a:active .content { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  #menu2 { background: var(--fl-brand) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --- Narrow screens --------------------------------------------------- */
@media screen and (max-width: 736px) {
  .highlights .box1 header h3 { font-size: 1.3rem !important; }
  .clips { border-radius: 14px !important; }
  .clips > div { padding: 0.75rem 1.25rem 3rem !important; }
  .clips > h2, .clips.green:before, .clips.blue:before { padding: 1.3rem 1.25rem 0 !important; }
  #cta h2 { font-size: 1.35rem !important; }
  #cta > .inner { padding: 2rem 1.25rem; border-radius: 14px; }
  .fl-announce a { font-size: 0.95rem; }
  #cta > .inner { padding: 2rem 1.25rem !important; }
  #cta .fl-fact-wrap { max-width: none; }
  #cta .fl-map { position: static; transform: none; width: 100%; height: auto; max-width: 240px; display: block; margin-bottom: 1.25rem; }
  /* the weekly line becomes a small card: label on top, dates under it */
  #menu3 > nav > div { padding: 0 16px; }
  #menu3 .fl-item { flex-wrap: wrap; width: 100%; border-radius: 14px; row-gap: 0.3rem; line-height: 1.35 !important; text-align: left; }
  #menu3 .fl-item span { flex-basis: 100%; padding-left: calc(7px + 0.5rem); }
  #cta h2.fl-fact { font-size: 2.3rem !important; }
  #menu3 { padding-top: 0.75rem; }
}

/* --- Homepage rhythm: one gap between cards, one inset inside them ---------
   Tiles, the tree card and the three clip cards all stand 1rem apart, the grid's own gap (the
   tree card had 44px above it and the clip cards 29px). The page ends 2rem above the footer.
   Content sits 1.75rem in from every edge of a card, the inset the tiles already use, so the
   text of stacked cards starts on one line. */
:root { --fl-gap: 1rem; --fl-inset: 1.75rem; }
.highlights { margin-bottom: 0 !important; }
#cta { padding-top: 0 !important; }
.clips { margin-top: var(--fl-gap) !important; }
.clips:last-child { margin-bottom: 2rem !important; }
#cta > .inner { padding: var(--fl-inset) !important; }
#cta .fl-map { right: var(--fl-inset); }
.clips > h2, .clips.green:before, .clips.blue:before { padding: var(--fl-inset) var(--fl-inset) 0 !important; }
.clips > div { padding: 1rem var(--fl-inset) calc(var(--fl-inset) + 2rem) !important; }
.clips .more { right: var(--fl-inset); margin-right: 0 !important; bottom: var(--fl-inset) !important; line-height: 1rem; }

/* --- Side menus in the forest header ---------------------------------------
   The 2x2 keeps its shape; the orange and teal rules became one white stroke that fades in toward
   the logo, like the strokes either side of "UN" (picked over a single row and a stacked column,
   27.09.2026). Desktop only: below 1041px the side menus are hidden. */
@media screen and (min-width: 1041px) {
  #banner .inner .banner-menu > div:first-child { border-bottom: 0 !important; }
  #banner .inner .banner-menu:before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px;
  }
  #banner .inner .banner-menu.left:before { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); }
  #banner .inner .banner-menu.right:before { background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); }
  #banner:not(.mainpage) .inner .banner-menu:before { height: 1.5px; margin-top: -0.75px; }
}

/* --- Preview switch (menu_controller::preview_switch), for comparing variants live -------- */
.fl-switch {
  display: flex; align-items: center; gap: 2px;
  position: fixed; left: 12px; bottom: 12px; z-index: 2000;
  padding: 3px; border-radius: 999px;
  background: rgba(29, 29, 31, 0.88);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.fl-switch span { padding: 0 8px 0 10px; color: rgba(255, 255, 255, 0.6); font: 600 12px/1 var(--fl-font); }
.fl-switch button {
  height: 28px !important; margin: 0; padding: 0 12px !important;
  border: 0 !important; border-radius: 999px; background: transparent !important; box-shadow: none !important;
  color: rgba(255, 255, 255, 0.85) !important; font: 600 12px/28px var(--fl-font) !important; cursor: pointer;
}
.fl-switch button[aria-pressed="true"] { background: #fff !important; color: var(--fl-ink) !important; }

/* --- Footer: the page's own forest green, the homepage's type and spacing ------------------
   Near-black #111 was the one colour on the page from outside the palette; it is now a deeper
   shade of the tree card's green. Headings take the cards' small tracked label, links sit at 70%
   white, the partner logos are four equal white tiles in one row, and the sign-up is the tree
   card's glass pill. On the homepage the tree card already carries the sign-up, so the footer's
   copy is left out there. Twitter and Instagram point at "#" and are hidden until they exist. */
#footer { background: #152109 !important; color: rgba(255, 255, 255, 0.62) !important; padding: 3.5rem 0 2.25rem !important; }
#footer .content { border-color: rgba(255, 255, 255, 0.1) !important; }
#footer h4 {
  color: rgba(255, 255, 255, 0.55) !important;
  font: 700 0.72rem/1.4 var(--fl-font) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important;
  margin: 0 0 1rem !important;
}
#footer a { color: rgba(255, 255, 255, 0.72) !important; text-decoration: none !important; border-bottom: 0 !important; }
#footer a:active { opacity: 0.55; transition: none; }
@media (hover: hover) { #footer a:hover { color: #fff !important; } }
#footer .about p, #footer .about article { color: rgba(255, 255, 255, 0.62) !important; font-size: 0.95rem !important; line-height: 1.6 !important; max-width: 40em; }
#footer .social li:has(> a[href="#"]) { display: none !important; }
#footer .social li { margin: 0 0 0.35rem !important; padding: 0 !important; }
#footer .social .icon { color: rgba(255, 255, 255, 0.72) !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; }

/* sign-up: on inner pages only, as the tree card's pill */
#cta ~ #footer .newsletter-section { display: none !important; }
#footer .content.newsletter-section { padding-bottom: 2.5rem !important; margin-bottom: 2.5rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
#footer .newsletter h4 { color: #fff !important; font: 700 1.5rem/1.2 var(--fl-font) !important; letter-spacing: -0.02em !important; text-transform: none !important; margin: 0 0 0.4rem !important; }
#footer .newsletter { text-align: center !important; }
#footer .newsletter p { color: rgba(255, 255, 255, 0.72) !important; font-size: 0.95rem !important; margin: 0 auto 1.25rem !important; max-width: none !important; text-align: center !important; }
#footer-newsletter-subscription {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 0 !important;
  max-width: 460px !important; margin: 0 auto !important; padding: 5px !important;
  border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.1) !important; box-shadow: none !important; transform: none !important;
}
#footer-newsletter-subscription:hover { transform: none !important; box-shadow: none !important; }
#footer-newsletter-subscription:focus-within { border-color: rgba(255, 255, 255, 0.6) !important; }
#footer-newsletter-email {
  flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 44px !important; margin: 0 !important;
  padding: 0 1.1rem !important; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; box-shadow: none !important; color: #fff !important;
  font: 400 16px/44px var(--fl-font) !important;
}
#footer-newsletter-email::placeholder { color: rgba(255, 255, 255, 0.72) !important; font-style: normal !important; }
#footer-newsletter-subscription button {
  flex: 0 0 auto !important; min-width: 0 !important; width: auto !important; height: 44px !important; margin: 0 !important;
  padding: 0 1.25rem !important; border: 0 !important; border-radius: 999px !important;
  background: #fff !important; box-shadow: none !important; color: var(--fl-brand-deep) !important;
  font: 700 13px/44px var(--fl-font) !important; letter-spacing: 0.05em; text-transform: uppercase;
}
#footer-newsletter-subscription button:active { transform: scale(0.97); }

/* partners: four equal white tiles, the logo contained in each */
#footer .partnership > div { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fl-gap, 1rem); }
#footer .partnership a { display: block; line-height: 0; }
#footer .partnership img {
  display: block; width: 100% !important; height: 104px !important; margin: 0 !important;
  object-fit: contain; box-sizing: border-box; padding: 12px 18px !important;
  border: 0 !important; border-radius: 12px !important; background: #fff !important;
}

/* web resources: three columns, quieter and smaller than the text above */
#footer .link-cols ul.alt { column-gap: 2rem; }
#footer .link-cols ul.alt li { border: 0 !important; padding: 0 !important; margin: 0 !important; line-height: 1.9 !important; }
#footer .link-cols ul.alt li a { font-size: 0.88rem !important; color: rgba(255, 255, 255, 0.6) !important; }

/* the last line */
#footer .copyright { color: rgba(255, 255, 255, 0.45) !important; font-size: 0.78rem !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; }
#footer .copyright .cc-license span, #footer .copyright .cc-license a { color: rgba(255, 255, 255, 0.55) !important; }

@media screen and (max-width: 980px) {
  #footer .partnership > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #footer .content.partnership-mobile .partnership { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fl-gap, 1rem); }
  #footer .content.partnership-mobile .partnership h4 { grid-column: 1 / -1; }
  #footer .content.partnership-mobile img { width: 100% !important; height: 88px !important; }
  #footer .link-cols ul.alt { columns: 2; }
  /* a long host name broke out of its column and was cut at the screen edge */
  #footer .link-cols ul.alt li { overflow-wrap: anywhere; break-inside: avoid; }
}

/* --- Phone header ("Viena josla", picked 27.09.2026 over two restyled strips) -----------------
   Phones had two scrolling strips doing one job in two styles: 30px white sections above the
   banner (under the 44pt tap target) and 40px green topics below it. Now there is one strip, as
   on the desktop: the sections sit behind a menu button in the banner, in a full-screen sheet that
   also carries the language switch, and the green strip is 44px with no separators. */
.fl-mbtn, .fl-msheet { display: none; }
.fl-mbtn .fl-i-close { display: none; }
@media screen and (max-width: 980px) {
  #mobile-menu2 { height: 44px !important; padding: 0 !important; }
  #mobile-menu2 .scroll-inner { padding: 0 16px 0 5px !important; }
  #mobile-menu2 .scroll-inner a {
    font: 500 15px/44px var(--fl-font) !important; letter-spacing: -0.01em;
    margin: 0 0 0 11px !important; padding: 0 !important; border: 0 !important; text-decoration: none !important;
  }
  #mobile-menu2 .scroll-inner span { display: none !important; }
  #mobile-menu2 .scroll-inner a.active { font-weight: 600 !important; box-shadow: inset 0 -2px 0 #fff; }

  #mobile-menu, #banner .inner > .lang-switch { display: none !important; }
  .fl-mbtn {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: 0; z-index: 3;
    width: 32px; height: 32px !important; min-width: 0; margin: 0; padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important; box-shadow: none !important; color: #fff !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); line-height: 0; cursor: pointer;
  }
  /* the sheet carries its own close button: the banner's button sits in the banner's stacking
     context, so no z-index lifts it above a fixed sheet, and the sheet swallowed every tap on it */
  .fl-msheet .fl-msheet-close {
    position: absolute; top: 16px; right: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px !important; min-width: 0; margin: 0; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important; box-shadow: none !important;
    background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; line-height: 0; cursor: pointer;
  }
  .fl-msheet {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1500;
    overflow-y: auto; padding: 64px 16px 32px; background: #152109;
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  html.fl-menu-open .fl-msheet { visibility: visible; opacity: 1; transform: none; transition: opacity 0.2s ease, transform 0.2s ease; }
  html.fl-menu-open, html.fl-menu-open body { overflow: hidden; }
  /* the green strip's edge fades are z-index 999999 and would show through the sheet */
  html.fl-menu-open #mobile-menu2 { visibility: hidden; }
  .fl-msheet nav span { display: none; }
  .fl-msheet nav a {
    display: block; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font: 600 1.375rem/1.2 var(--fl-font) !important; letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.78) !important; text-decoration: none !important;
  }
  .fl-msheet nav a.active { color: #fff !important; font-weight: 700 !important; }
  .fl-msheet nav a:active { opacity: 0.55; }
  .fl-msheet .lang-switch { margin-top: 1.5rem; }
  .fl-msheet .lang-switch ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .fl-msheet .lang-switch li { margin: 0; padding: 0; }
  .fl-msheet .lang-switch li:before { content: none !important; display: none !important; }
  .fl-msheet .lang-switch a, .fl-msheet .lang-switch span {
    display: block; padding: 0 14px; border-radius: 17px;
    font: 600 14px/34px var(--fl-font) !important; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.72) !important; text-decoration: none !important;
  }
  .fl-msheet .lang-switch li.on span { color: #fff !important; background: rgba(255, 255, 255, 0.14); }
}
/* The strip's edge fades are overlays (position: absolute) only up to 540px; wider, main.css
   leaves them as ordinary blocks, and a 44px height on them pushed the links out of the strip,
   which then showed empty green between 541 and 980px. So they are resized only where they overlay. */
@media screen and (max-width: 540px) {
  #mobile-menu2 .scroll-indicator { height: 44px !important; }
  #mobile-menu2 .scroll-indicator.right { margin-top: -44px !important; }
}

/* --- Banner corners on wider screens: two 32px circles, as on phones ("Apļi", 27.09.2026) -------
   A 180px search pill faced an 84px two-part LV|EN pill, so the corners did not mirror. Search
   opens into a field on focus; the language circle shows the language to switch to. */
@media screen and (min-width: 737px) {
  #banner .inner > .search > input { width: 32px; padding: 0 !important; background-position: 8px 50% !important; }
  #banner .inner > .search > input::placeholder { color: transparent !important; }
  #banner .inner > .search > input:focus { width: 260px; padding: 0 14px 0 34px !important; background-position: 12px 50% !important; }
  #banner .inner > .search > input:focus::placeholder { color: rgba(255, 255, 255, 0.72) !important; }
  #banner .inner > .lang-switch li.on { display: none; }
  #banner .inner > .lang-switch > ul { width: 32px; justify-content: center; border-radius: 50%; }
  #banner .inner > .lang-switch > ul > li > a { width: 30px; padding: 0; text-align: center; font-size: 11px; }
}

/* --- Banner video: exactly the banner's box ---------------------------------------------------
   main.css sized it by min-width/min-height and centred it with a translate, so the element was
   810px tall and hung about 250px below a 300px banner, relying on the banner's overflow to hide
   the rest. Its bottom edge landed across the tile row and the article picture, where a light line
   showed on screen (Firefox, macOS, some widths). It now fills the banner's box and crops itself.
   The crop is aligned to the BOTTOM: Firefox on macOS draws a video on its own layer the size of the
   whole scaled frame and clips it afterwards, so with a centred crop the frame's edge still sat at
   150 + width x 0.28px and the line stayed. Bottom-aligned, that edge is the banner's own edge and
   the rest of the frame lies above the top of the page. */
#banner video {
  top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
  width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important;
  transform: none !important; object-fit: cover; object-position: 50% 100%;
}

/* --- Video and Raidījumi lists: one row style ----------------------------------------------------
   /video got its type in the inner-page pass; /raidijumi uses another element (.audios .audio) and
   kept main.css's uppercase, regular, pure black titles. On both, the date was 10px pinned to the
   row's bottom-right corner, far from what it dates. Now: an even 16:9 thumbnail, then the title,
   the date right under it, and at most three lines of summary. The date sits inside .description
   on /video and after it on /raidijumi, so .description is dissolved into the row's grid. */
#main .content .videos .video, #main .content .audios .audio {
  display: grid !important; grid-template-columns: 15rem minmax(0, 1fr); grid-auto-rows: auto; column-gap: 1.25rem;
  align-items: start; align-content: start;
  padding: 0 0 1.25rem !important; margin: 0 0 1.25rem !important; border-bottom: 1px solid var(--fl-hair) !important;
}
#main .content .videos .video .clip, #main .content .audios .audio .clip {
  grid-column: 1; grid-row: 1 / span 3;
  width: 100%; min-width: 0 !important; min-height: 0 !important; height: auto !important; aspect-ratio: 16 / 9;
  border-radius: 12px !important; box-shadow: none !important;
}
#main .content .videos .video .description, #main .content .audios .audio .description { display: contents; }
#main .content .videos .video .description > *, #main .content .audios .audio .description > * { grid-column: 2; }
#main .content .videos .video h3, #main .content .audios .audio h3 {
  grid-column: 2; grid-row: 1; margin: 0 !important; padding: 0 !important;
  font: 650 1.1rem/1.3 var(--fl-font) !important; letter-spacing: -0.01em; text-transform: none !important; color: var(--fl-ink) !important;
}
#main .content .videos .video date, #main .content .audios .audio date {
  grid-column: 2; grid-row: 2; position: static !important; display: block; margin: 0.3rem 0 0;
  font: 500 0.8rem/1.3 var(--fl-font) !important; color: var(--fl-ink-3) !important; font-variant-numeric: tabular-nums;
}
#main .content .videos .video .description p, #main .content .audios .audio .description p {
  margin: 0.5rem 0 0 !important; font-size: 0.95rem !important; line-height: 1.5 !important; color: var(--fl-ink-2) !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#main .content .videos .video .description p:empty, #main .content .audios .audio .description p:empty { display: none; }
@media screen and (max-width: 650px) {
  #main .content .videos .video, #main .content .audios .audio { grid-template-columns: minmax(0, 1fr); }
  #main .content .videos .video .clip, #main .content .audios .audio .clip { grid-row: 1; }
  #main .content .videos .video h3, #main .content .audios .audio h3 { grid-row: 2; margin-top: 0.75rem !important; }
  #main .content .videos .video date, #main .content .audios .audio date { grid-row: 3; }
  #main .content .videos .video .description, #main .content .audios .audio .description { margin: 0 !important; }
  /* one column: everything the desktop rules put in column 2 comes back to column 1 */
  #main .content .videos .video .description > *, #main .content .audios .audio .description > *,
  #main .content .videos .video h3, #main .content .audios .audio h3,
  #main .content .videos .video date, #main .content .audios .audio date { grid-column: 1; }
}

/* --- Calendar page (preview markup from page_elements/calendar.php) ----------------------------
   Was: the date as plain text beside a grey box with a lime left border, each box only as wide as
   its title, so the column was ragged. Now each event is a row: a calendar tile (day over short
   month), the title, and under it the weekday, the date and how far away it is. The next event's
   tile is solid green; past events are dimmed. */
#main .content a.fl-event {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
  padding: 0.85rem 0; border-bottom: 1px solid var(--fl-hair); text-decoration: none !important; color: inherit !important;
}
#main .content a.fl-event:last-child { border-bottom: 0; }
.fl-ev-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 12px;
  background: rgba(128, 165, 27, 0.12); color: var(--fl-brand-ink);
}
.fl-ev-tile b { font: 700 1.35rem/1 var(--fl-font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: inherit !important; }
.fl-ev-tile span { margin-top: 0.2rem; font: 700 0.62rem/1 var(--fl-font); letter-spacing: 0.1em; text-transform: uppercase; }
#main .content a.fl-event:first-child:not(.fl-past) .fl-ev-tile,
#main .content a.fl-past + a.fl-event:not(.fl-past) .fl-ev-tile { background: var(--fl-brand-ink); color: #fff; }
.fl-ev-title { display: block; font: 650 1.05rem/1.3 var(--fl-font); letter-spacing: -0.01em; color: var(--fl-ink); }
.fl-ev-when { display: block; margin-top: 0.25rem; font: 500 0.85rem/1.35 var(--fl-font); color: var(--fl-ink-3); }
#main .content a.fl-event.fl-past { opacity: 0.55; }
#main .content a.fl-event:active { opacity: 0.55; transition: none; }
@media (hover: hover) { #main .content a.fl-event:hover .fl-ev-title { color: var(--fl-brand-ink); } }

/* --- Poll results, homepage tile and sidebar ------------------------------------------------------
   The results were bars painted behind the text by main.js (dark brown on the homepage, solid orange
   in the sidebar), and the homepage's flat pinkish override hid them; the percentage sat flush on the
   right edge. Now each answer is its text, the percentage in its own right-hand column, and a thin
   rounded bar under it, green, darker for the answer this reader chose. main.js still paints its
   inline background; it is overridden here and the bar is read from the --perc it now also sets. */
.highlights .box .poll .poll-results > div, #main .sidebar .poll .poll-results > div {
  position: relative; margin: 0 0 0.6rem !important; padding: 0 3rem 0.65rem 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important;
  font-size: 0.86rem !important; line-height: 1.35 !important; color: var(--fl-ink) !important; text-align: left !important;
}
.highlights .box .poll .poll-results > div:before, #main .sidebar .poll .poll-results > div:before,
.highlights .box .poll .poll-results > div:after, #main .sidebar .poll .poll-results > div:after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 2px;
}
.highlights .box .poll .poll-results > div:before, #main .sidebar .poll .poll-results > div:before { width: 100%; background: #e9e8e3; }
.highlights .box .poll .poll-results > div:after, #main .sidebar .poll .poll-results > div:after { width: var(--perc, 0%); background: var(--fl-brand); }
.highlights .box .poll .poll-results > div:has(> b):after, #main .sidebar .poll .poll-results > div:has(> b):after { background: var(--fl-brand-ink); }
.highlights .box .poll .poll-results > div > b, #main .sidebar .poll .poll-results > div > b { color: var(--fl-brand-ink) !important; }
.highlights .box .poll .poll-results > div label, #main .sidebar .poll .poll-results > div label {
  position: absolute !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important;
  width: auto !important; margin: 0 !important; padding: 0 !important;
  font: 600 0.86rem/1.35 var(--fl-font) !important; color: var(--fl-ink-2) !important; font-variant-numeric: tabular-nums;
}
/* the homepage tile has a fixed height: a slightly tighter question and answer list so the results fit */
.highlights .box .poll { padding: 1.25rem 1.6rem !important; }
.highlights .box .poll .question { font-size: 0.92rem !important; line-height: 1.35 !important; margin-bottom: 0.75rem !important; }
.highlights .box .poll .poll-results > div { margin-bottom: 0.45rem !important; padding-bottom: 0.55rem !important; }
.highlights .box .poll .poll-results > div:last-child { margin-bottom: 0 !important; }
.highlights .box .poll .answers > div { padding: 0.4rem 0.75rem !important; font-size: 0.85rem !important; margin-bottom: 0.35rem !important; }