/*

Theme Name: News24-7

Author:      Custom Theme

Description: A bold editorial news portal theme with a clean, magazine-style layout.

Version:     1.0.0

License:     GNU General Public License v2 or later

Text Domain: newspress

*/



/* ============================================================

   DESIGN TOKENS  (Tailwind-inspired CSS custom properties)

   ============================================================ */

:root {

  /* Palette */

  --color-ink:       #0d0d0d;

  --color-ink-mid:   #3a3a3a;

  --color-ink-soft:  #6b6b6b;

  --color-ink-light:  #cbc9c9;

  --color-paper:     #f9f6f0;

  --color-paper-2:   #f0ece4;

  --color-white:     #ffffff;

  --color-accent:    #2b84c0;       /* editorial red */

  --color-accent-2:  #2274e6;       /* warm amber */

  --color-rule:      #e2ddd6;



  /* Typography */

  --font-display:    'Playfair Display', Georgia, serif;

  --font-body:       'Source Serif 4', Georgia, serif;

  --font-ui:         'DM Sans', system-ui, sans-serif;



  /* Spacing scale */

  --space-1:  0.25rem;

  --space-2:  0.5rem;

  --space-3:  0.75rem;

  --space-4:  1rem;

  --space-5:  1.25rem;

  --space-6:  1.5rem;

  --space-8:  2rem;

  --space-10: 2.5rem;

  --space-12: 3rem;

  --space-16: 4rem;

  --space-20: 5rem;



  /* Radii */

  --radius-sm:  3px;

  --radius-md:  6px;

  --radius-lg:  12px;



  /* Shadows */

  --shadow-card: 0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);

  --shadow-hover: 0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);



  /* Transitions */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --duration: 280ms;

}



/* ============================================================

   RESET / BASE

   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



html { font-size: 16px; scroll-behavior: smooth; }



body {

  background-color: var(--color-paper);

  /* padding: 10px 20px 10px 20px; */

  color: var(--color-ink);

  font-family: var(--font-body);

  font-size: 1rem;

  line-height: 1.65;

  -webkit-font-smoothing: antialiased;

}



img { display: block; max-width: 100%; height: auto; }

a { text-decoration: none; color: inherit; }

a:hover { text-decoration: none; }



/* Google Fonts import (add to functions.php wp_enqueue_style) */

/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Source+Serif+4:wght@300;400;600&family=DM+Sans:wght@400;500;600&display=swap'); */



.site-main{

  padding-bottom: var(--space-20);

}

.block-with-separator{

  border-bottom: var(--color-ink-light) solid 1px;

}

/* METADATA HEADER */

.metadata-container {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

}

.current-date, .header-date, .placement-header {

    color: var(--color-ink-soft);

    padding: 5px 10px;

}



/* LOGO CONTAINER */

.logo-container {

  padding: var(--space-6) 0 var(--space-2);

  height: fit-content;

  display: flex;

  justify-content: center;

}

.main-logo {

  width: 350px;

}



/* NAVBAR */



.navbar-container{

  position: sticky;

  display: flex;

  align-items: center;

  top: 0;

  height: fit-content;

  justify-content: center;

  z-index: 9999;

  background: var(--color-paper);

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

}

.nav__list {

  display: flex;

  align-items:center;

  justify-content: space-evenly;

  list-style: none;

  width: 80%;

}



.nav__item {

  position: relative;

}



.nav__item > a {

  display: flex;

  align-items: center;

  gap: var(--space-4);

  padding: 0 var(--space-6);

  height: 52px;

  color:  var(--color-ink-mid);

  justify-content: space-between;

  text-decoration: none;

  font-size: 13px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  font-family: sans-serif;

  font-weight: 500;

  white-space: nowrap;

  transition: color 0.2s;

  border-bottom: 2px solid transparent;

  box-sizing: border-box;

}



.nav__item > a:hover,

.nav__item:hover > a {

  color: var(--color-accent);

  border-bottom-color: var(--color-accent-2);

}



.nav__item.has-children > a::after {

  content: '';

  display: inline-block;

  width: 0;

  height: 0;

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-top: 4px solid currentColor;

  margin-top: 1px;

  transition: transform 0.2s;

}



.nav__item.has-children:hover > a::after {

  transform: rotate(180deg);

}



.nav__dropdown {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  min-width: 220px;

  background: var(--color-paper);

  border-top: 2px solid var(--color-accent);

  list-style: none;

  z-index: 999;

  box-shadow: 0 8px 24px rgba(0,0,0,0.35);

}



.nav__item:hover > .nav__dropdown {

  display: block;

  animation: dropIn 0.18s ease;

}



@keyframes dropIn {

  from { opacity: 0; transform: translateY(-6px); }

  to   { opacity: 1; transform: translateY(0); }

}



.nav__dropdown li a {

  display: block;

  padding: var(--space-3) var(--space-4);

  color: var(--color-ink-mid);

  text-decoration: none;

  font-size: 13px;

  font-family: sans-serif;

  letter-spacing: 0.03em;

  border-left: 2px solid transparent;

  transition: color 0.15s, background 0.15s, border-color 0.15s;

}



.nav__dropdown li a:hover {

  color: #fff;

  background: #262626;

  border-left-color: var(--color-accent);

}



/* ── Search icon button ── */

.search-icon-btn {

    background: none;

    border: none;

    cursor: pointer;

    color: inherit;

    display: flex;

    align-items: center;

    padding: 0 4px;

}



/* ── Desktop: hide mobile trigger ── */

.mobile-search-trigger {

    display: none;

}



/* ── Mobile: show it, hide desktop one ── */

@media (max-width: 768px) {

    .mobile-search-trigger {

        display: flex;

        align-items: center;

        margin-left: auto; /* pushes it to the right of the logo, left of nothing */

    }



    .desktop-search-trigger {

        display: none;

    }

}



/* ── Search overlay ── */

.search-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    background: #fff;

    z-index: 99999;

    box-shadow: 0 4px 24px rgba(0,0,0,0.12);

    padding: 12px 24px;

}



.search-overlay.active {

    display: block;

}



.search-overlay__inner {

    display: flex;

    align-items: center;

    gap: 12px;

    max-width: 900px;

    margin: 0 auto;

}



.search-overlay__inner input {

    flex: 1;

    border: none;

    border-bottom: 2px solid #222;

    font-size: 18px;

    padding: 8px 0;

    outline: none;

    background: transparent;

}



.search-overlay__close {

    background: none;

    border: none;

    cursor: pointer;

    color: #222;

    display: flex;

    align-items: center;

}



/* ── Wrapper ── */

.lang-switcher {

    position: relative;

    display: flex;

    align-items: center;

}



/* ── Toggle button ── */

.lang-toggle {

    background: none;

    border: none;

    cursor: pointer;

    color: inherit;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 4px;

    border-radius: 4px;

    transition: color 0.15s;

}



.lang-toggle:hover {

    color: var(--color-accent);

}



.lang-toggle.is-active {

    color: var(--color-accent);

}



/* ── Dropdown panel ── */

.lang-dropdown {

    display: none;

    position: absolute;

    top: calc(100% + 8px);

    right: 0;

    background: var(--color-paper);

    border: 1px solid var(--color-rule);

    border-radius: 6px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.1);

    min-width: 140px;

    overflow: hidden;

    z-index: 9999;

}



.lang-dropdown.is-open {

    display: block;

}



/* ── Each language option ── */

.lang-option {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 10px 14px;

    background: none;

    border: none;

    cursor: pointer;

    text-align: left;

    color: inherit;

    transition: background 0.15s;

}



.lang-option:hover {

    background: var(--color-rule);

}



/* ── Active language highlighted ── */

.lang-option.is-active {

    color: var(--color-accent);

    font-weight: 600;

}



.lang-option.is-active .lang-code {

    background: var(--color-accent);

    color: #fff;

}



/* ── Language code badge ── */

.lang-code {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.05em;

    background: var(--color-rule);

    border-radius: 3px;

    padding: 2px 5px;

    flex-shrink: 0;

}



/* ── Language full name ── */

.lang-name {

    font-size: 13px;

}



/* ── Divider between options ── */

.lang-option + .lang-option {

    border-top: 1px solid var(--color-rule);

}

/* ============================================================

   HAMBURGER BUTTON — hidden on desktop

   ============================================================ */

.mobile-menu-nav{

    display: none; /* hidden by default, shown on mobile below */

}

.main-logo-sm{

  width: 100px;

}

.nav_toggle_container{

  display: flex;

  justify-content: flex-start;

}

.nav__toggle {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 5px;

  height: 52px;

  background: none;

  border: none;

  cursor: pointer;

  /* padding: 0 var(--space-4); */

  margin-left: auto; /* push to right side of navbar */

}



.nav__toggle-bar {

  display: block;

  width: 22px;

  height: 2px;

  background-color: var(--color-ink-mid);

  transition: transform 0.3s var(--ease-out),

              opacity 0.3s var(--ease-out),

              background-color 0.2s;

}



/* Animate bars into an X when open */

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {

  transform: translateY(7px) rotate(45deg);

}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {

  opacity: 0;

  transform: scaleX(0);

}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg);

}

@media (max-width: 1110px) {



  .site-header--no-logo {

    display: none;

  }



  .mobile-menu-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 var(--space-4);

    height: 52px;

    background-color: var(--color-paper);

    border-bottom: 1px solid var(--color-rule);

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 9999;

    gap: 0;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);



    /* starts hidden above the viewport */

    transform: translateY(-100%);

    opacity: 0;

    transition: transform 0.3s var(--ease-out),

                opacity   0.3s var(--ease-out);

  }

  .mobile-menu-nav.is-visible {

    transform: translateY(0);

    opacity: 1;

  }

  /* Small logo centered inside the sticky header */

  .logo-container-sm {

    flex: 1;

    display: flex;

    justify-content: center;

  }

  .mobile-search-trigger {

    display: flex;

    flex-shrink: 0;

    align-items: center;

  }

  .main-logo-sm {

    width: 120px;

    height: auto;

  }



  .nav_toggle_container {

    flex-shrink: 0;

  }



  /* Show the hamburger button */

  .nav__toggle {

    display: flex;

  }



  /* Make navbar a flex row so button and nav can wrap */

  .navbar-container {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

  }



  /* Hide the nav list by default */

  .main-nav {

    display: none;

    width: 100%;

    border-top: 1px solid var(--color-rule);

  }



  /* Show when hamburger is toggled */

  .main-nav.is-open {

    display: flex;

  }



  /* Stack nav items vertically */

  .nav__list {

    flex-direction: column;

    align-items: stretch;

    justify-content: start;

    padding: 0 var(--space-3);

    gap: 0;

  }



  .nav__item > a {

    height: 48px;

    padding: 0;

    border-bottom: 1px solid var(--color-rule);

  }



  /* Inline dropdown on mobile */

  .nav__item.has-children.is-open > .nav__dropdown {

    display: block;

    position: static;

    box-shadow: none;

    border-top: none;

    border-left: 3px solid var(--color-accent);

    margin-left: var(--space-4);

  }



  /* Arrow flips when dropdown is open */

  .nav__item.has-children.is-open > a::after {

    transform: rotate(180deg);

  }

}

/* ============================================================

   BREAKING NEWS TICKER

   ============================================================ */

.ticker-bar {

  background-color: var(--color-accent);

  color: var(--color-white);

  font-family: var(--font-ui);

  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  display: flex;

  align-items: center;

  overflow: hidden;

  height: 38px;

}



.ticker-label {

  flex-shrink: 0;

  background-color: rgba(0,0,0,.25);

  padding: 0 var(--space-5);

  height: 100%;

  display: flex;

  align-items: center;

  letter-spacing: 0.12em;

}



.ticker-track {

  display: flex;

  gap: var(--space-12);

  white-space: nowrap;

  animation: ticker 28s linear infinite;

  padding-left: var(--space-8);

}



.ticker-item {

  opacity: .9;

  transition: opacity var(--duration) var(--ease-out);

}

.ticker-item:hover { opacity: 1; text-decoration: underline; }

.ticker-item + .ticker-item::before {

  content: '•';

  margin-right: var(--space-12);

  opacity: .5;

}



@keyframes ticker {

  0%   { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



/* ============================================================

   LAYOUT CONTAINER

   ============================================================ */

.portal-container {

  max-width: 1280px;

  margin: 0 auto;

  padding:  var(--space-1) var(--space-20) var(--space-1) var(--space-20);

  display: flex;

  flex-direction: column;

}



/* ============================================================

   HERO SECTION

   ============================================================ */

.hero-section {

  margin-top: var(--space-8);

  margin-bottom: var(--space-16);

  border-radius: var(--radius-sm);

  overflow: hidden;

  position: relative;

}



.hero-link {

  display: block;

  position: relative;

}



.hero-image-wrap {

  position: relative;

  aspect-ratio: 16 / 7;

  overflow: hidden;

  background-color: var(--color-ink);

}



.hero-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 600ms var(--ease-out);

}

.hero-link:hover .hero-img { transform: scale(1.03); }



.hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to top,

    rgba(10,8,6,.88) 0%,

    rgba(10,8,6,.55) 42%,

    rgba(10,8,6,.10) 75%,

    transparent 100%

  );

}



.hero-content {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: var(--space-12) var(--space-10);

  color: var(--color-white);

}



.hero-title {

  font-family: var(--font-display);

  font-size: clamp(1.9rem, 4vw, 3.4rem);

  font-weight: 900;

  line-height: 1.1;

  letter-spacing: -0.02em;

  margin: var(--space-3) 0 var(--space-4);

  max-width: 820px;

  text-shadow: 0 2px 12px rgba(0,0,0,.3);

}



.hero-meta {

  font-family: var(--font-ui);

  font-size: 0.82rem;

  font-weight: 500;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  opacity: .75;

  margin-bottom: var(--space-3);

  display: flex;

  align-items: center;

  gap: var(--space-2);

}



.hero-excerpt {

  font-size: 1.05rem;

  opacity: .85;

  max-width: 600px;

  line-height: 1.6;

}



/* ============================================================

   CONTENT AND SIDEBAR

   ============================================================ */



.content-sidebar-wrap {

  display: grid;

  grid-template-columns: 1fr minmax(0, 300px);

  width: 100%;

  gap: var(--space-10);

  margin-bottom: var(--space-8);

  isolation: isolate; /* ← creates a new stacking context */

}

.content-main {

    flex: 1;

    min-width: 0;

    position: relative;

    z-index: 2; /* ← above the sidebar */

}

.portal-sidebar{

  display: flex;

  flex-direction: column;

  flex-shrink: 0;

  gap: var(--space-3);

  z-index: 1; /* ← behind content-main */

}

.sidebar-item {

  border-bottom: var(--color-ink-mid) solid 1px;

}

.sidebar-item-link {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  gap: var(--space-3);

  text-decoration: none;

}



.sidebar-info {

  flex: 1;          /* takes remaining space after thumb */

  min-width: 0;     /* prevents text overflow breaking layout */

}



.sidebar-thumb {

  flex-shrink: 0;

  width: 80px;

  height: 100%;

}



.sidebar-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.sidebar-title {

  font-size: 13px;

  font-weight: 600;

  line-height: 1.35;

  margin: var(--space-1) 0;

}



.sidebar-excerpt {

  font-size: 12px;

  color: var(--color-ink-mid);

  line-height: 1.4;

  margin: 0 0 var(--space-1);

}

.sidebar-cat-badge {

    text-transform: uppercase;

    font-size: 0.68rem;

}



/* ============================================================

   CATEGORY BADGE

   ============================================================ */

.cat-badge {

  display: inline-flex;

  align-items: center;

  background-color: var(--color-accent);

  color: var(--color-white);

  font-family: var(--font-ui);

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding: 3px 9px;

  white-space: nowrap;

}



.cat-badge--hero {

  font-size: 0.75rem;

  padding: 4px 12px;

}



/* Card badge – positioned absolute over image */

.card-thumb .cat-badge {

  position: absolute;

  top: var(--space-3);

  left: var(--space-3);

  z-index: 2;

  box-shadow: 0 1px 4px rgba(0,0,0,.25);

}



/* ============================================================

   SECTION HEADER

   ============================================================ */

.section-header {

  display: flex;

  align-items: center;

  gap: var(--space-5);

  margin-bottom: var(--space-8);

}



.section-label {

  font-family: var(--font-ui);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--color-accent);

  white-space: nowrap;

  margin-bottom: var(--space-3);

}



.section-rule {

  flex: 1;

  height: 2px;

  background: linear-gradient(to right, var(--color-accent), var(--color-rule));

  border-radius: 2px;

}



/* ── Active events grid ── */

.active-events-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: var(--space-3);

}



/* ── Event card ── */

.event-card {

    position: relative;

    border: 1px solid var(--color-rule);

    overflow: hidden;

    transition: box-shadow 0.2s, transform 0.2s;

}



.event-card:hover {

    box-shadow: 0 8px 24px rgba(0,0,0,0.1);

    transform: translateY(-2px);

}



.event-card-link {

    text-decoration: none;

    color: inherit;

    display: flex;

    flex-direction: column;

    height: 100%;

}



/* ── Thumbnail ── */

.event-card-thumb {

    position: relative;

    height: 160px;

    overflow: hidden;

}



.event-card-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;

}



.event-card:hover .event-card-img {

    transform: scale(1.03);

}



.event-card-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);

}



/* ── Live pill ── */

.event-live-pill {

    position: absolute;

    top: 10px;

    left: 10px;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    background: #e53e3e;

    color: #fff;

    border-radius: 20px;

    padding: 3px 10px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.event-live-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #fff;

    animation: pulse 1.5s infinite;

}



/* ── Card body ── */

.event-card-body {

    padding: 16px;

    flex: 1;

}



.event-card-title {

    font-size: 16px;

    font-weight: 700;

    margin: 0 0 8px;

    line-height: 1.3;

}



.event-card-excerpt {

    font-size: 13px;

    color: var(--color-ink-mid);

    margin: 0 0 12px;

    line-height: 1.5;

}



.event-card-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 11px;

    color: var(--color-ink-mid);

    gap: 8px;

    flex-wrap: wrap;

}



.event-card-date {

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



.event-card-count {

    font-weight: 600;

    color: var(--event-color);

}



/* ── Color accent bar at the bottom ── */

.event-card-accent {

    height: 3px;

    background: var(--event-color);

}



/* ── Mobile ── */

@media (max-width: 768px) {

    .active-events-grid {

        grid-template-columns: 1fr;

    }

}



/* ============================================================

   NEWS GRID

   ============================================================ */

.news-grid {

  display: grid;

  grid-template-columns: repeat(3, 2fr);

}



/* Wide card spans 2 columns */

.news-card--wide {

  grid-column: span 2;

}



/* ============================================================

   NEWS CARD

   ============================================================ */

.news-card {

  /* background-color: var(--color-white); */

  overflow: hidden;

  /* box-shadow: var(--shadow-card); */

  border-right: 1px solid var(--color-ink-light);



  padding: 0 var(--space-3) 0 var(--space-3);

  transition: box-shadow var(--duration) var(--ease-out),

              transform var(--duration) var(--ease-out);

}



.news-card:hover {

  /* box-shadow: var(--shadow-hover); */

  transform: translateY(-3px);

}



.card-link {

  display: flex;

  flex-direction: column;

  height: 100%;

}



/* Wide card: horizontal layout */

.news-card--wide .card-link {

  flex-direction: row;

}



/* ---- Thumbnail ---- */

.card-thumb {

  position: relative;

  overflow: hidden;

  /* aspect-ratio: 16 / 10; */

  background-color: var(--color-paper-2);

  flex-shrink: 0;

}



.news-card--wide .card-thumb {

  width: 46%;

  aspect-ratio: unset;

}



.card-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 500ms var(--ease-out);

}

.news-card:hover .card-img { transform: scale(1.05); }



.placeholder-img {

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, var(--color-paper-2) 0%, #ddd9d1 100%);

}



/* ---- Body ---- */

.card-body {

  display: flex;

  flex-direction: column;

  padding: var(--space-5);

  flex: 1;

}



.news-card--wide .card-body {

  padding: var(--space-7, 1.75rem) var(--space-6);

  justify-content: center;

}



.card-title {

  font-family: var(--font-display);

  font-size: 1.05rem;

  font-weight: 700;

  line-height: 1.3;

  letter-spacing: -0.01em;

  color: var(--color-ink);

  margin-bottom: var(--space-3);

  transition: color var(--duration) var(--ease-out);

}

.news-card--wide .card-title {

  font-size: 1.35rem;

  line-height: 1.25;

  margin-bottom: var(--space-4);

}

.news-card:hover .card-title { color: var(--color-accent); }



.card-excerpt {

  font-size: 0.88rem;

  color: var(--color-ink-mid);

  line-height: 1.65;

  flex: 1;

  margin-bottom: var(--space-4);

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.news-card--wide .card-excerpt {

  font-size: 0.95rem;

  -webkit-line-clamp: 4;

}



/* ---- Meta row ---- */

.card-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-family: var(--font-ui);

  font-size: 0.74rem;

  color: var(--color-ink-soft);

  margin-top: auto;

  /* padding-top: var(--space-4); */

  /* border-top: 1px solid var(--color-rule); */

  gap: var(--space-2);

}



.meta-date {

  font-weight: 500;

}



.meta-cat {

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-size: 0.68rem;

  color: var(--color-accent);

  transition: opacity var(--duration);

}

.meta-cat:hover { opacity: .7; }



.meta-sep { opacity: .4; }



/* ============================================================

   EMISSIONS

   ============================================================ */

.emissions-grid{

  display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--space-8);

}



/* ============================================================

   KRONIKA

   ============================================================ */



.kronika-thumb {

  position: relative;

  width: 100%;

  overflow: hidden;

}



.kronika-thumb .card-img {

  width: 100%;

  height: 400px;

  object-fit: cover;

  display: block;

}



.kronika-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to top,

    rgba(0, 0, 0, 0.85) 0%,

    rgba(0, 0, 0, 0.4) 50%,

    rgba(0, 0, 0, 0.0) 100%

  );

}



.kronika-body {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: var(--space-6);

  color: #fff;

  z-index: 1;

}



.kronika-body .card-title {

  color: #fff;

  font-size: clamp(1.2rem, 2.5vw, 1.8rem);

  margin-bottom: var(--space-2);

}



.kronika-body .card-excerpt {

  color: rgba(255, 255, 255, 0.85);

  font-size: 14px;

  line-height: 1.6;

  margin-bottom: var(--space-3);

}



.kronika-body .meta-date {

  color: rgba(255, 255, 255, 0.65);

  font-size: 12px;

}

/* ============================================================

   FOOTER

   ============================================================ */

.footer-container{

  width: 100%;

  height:fit-content;

  position: relative;

  top: -100;

  bottom: 0;

}

.footer-img{

  position: relative;

  z-index: 0;

}

.creditentials-container{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        #0f2027 0%,

        #203a43d2 50%,

        #1a1a2e9b 100%

    );



    display:flex;

    justify-content:center; /* horizontal center */

    align-items:flex-end;   /* move content to bottom */

    padding-bottom:30px;    /* distance from bottom image edge */

    z-index:2;

}



.share-footer{

    position:static;

}



.share-bar{

    display:flex;

    gap:18px;

    align-items:center;

}

.footer-bottom{
    background-color: none;
    text-align: center;
    font-family: var(--font-ui) ;
}

/* ============================================================

   PAGINATION

   ============================================================ */

.pagination-wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: var(--space-2);

  margin-bottom: var(--space-20);

  flex-wrap: wrap;

}



.pagination-wrap .page-numbers {

  font-family: var(--font-ui);

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--color-ink-mid);

  border: 1.5px solid var(--color-rule);

  padding: var(--space-2) var(--space-4);

  border-radius: var(--radius-sm);

  background-color: var(--color-white);

  transition: all var(--duration) var(--ease-out);

  letter-spacing: 0.02em;

}



.pagination-wrap .page-numbers:hover {

  background-color: var(--color-ink);

  border-color: var(--color-ink);

  color: var(--color-white);

}



.pagination-wrap .page-numbers.current {

  background-color: var(--color-accent);

  border-color: var(--color-accent);

  color: var(--color-white);

}



.pagination-wrap .page-numbers.dots {

  border: none;

  background: transparent;

  color: var(--color-ink-soft);

}



/* ============================================================

   NO POSTS

   ============================================================ */

.no-posts {

  font-family: var(--font-ui);

  text-align: center;

  color: var(--color-ink-soft);

  padding: var(--space-16);

}



/* ============================================================

   RESPONSIVE — TABLET  (< 1024px)

   ============================================================ */

@media (max-width: 1024px) {

  .news-grid {

    grid-template-columns: repeat(3, 1fr);

  }

  .news-card--wide {

    grid-column: span 2;

  }

  .content-sidebar-wrap{

    margin-top: var(--space-8);

  }

  .content-sidebar-wrap, .emissions-grid{

    grid-template-columns: 1fr;

    gap: var(--space-6);

  }

}



/* ============================================================

   RESPONSIVE — MOBILE  (< 640px)

   ============================================================ */

@media (max-width: 640px) {

  .metadata-container {

    font-size: 0.5rem;

  }



  .portal-container {

    padding: var(--space-6) var(--space-4);

  }



  .content-sidebar-wrap{

    margin-top: var(--space-8);

  }

  .content-sidebar-wrap, .emissions-grid{

    grid-template-columns: 1fr;

    gap: var(--space-6);

  }



  .content-main{

    padding-bottom: var(--space-3);

  }

  .news-grid {

    grid-template-columns: 1fr;

  }



  .news-card--wide {

    grid-column: span 1;

  }

  .news-card--wide .card-link {

    flex-direction: column;

  }

  .news-card--wide .card-thumb {

    width: 100%;

    aspect-ratio: 16 / 10;

  }



  .hero-content {

    padding: var(--space-1) var(--space-5);

  }

  .hero-title {

    font-size: 1.65rem;

  }

  .hero-excerpt {

    display: none;

  }



  .ticker-bar { height: 34px; font-size: 0.72rem; }



  .card-meta { flex-direction: column; align-items: flex-start; gap: var(--space-1); }

}



/* ============================================================

   WORDPRESS CORE ALIGNMENT CLASSES  (keep them working)

   ============================================================ */

.alignleft  { float: left;  margin: 0 var(--space-6) var(--space-4) 0; }

.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }

.aligncenter { display: block; margin: 0 auto var(--space-6); }

.wp-caption  { max-width: 100%; }

.wp-caption-text { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-ink-soft); margin-top: var(--space-2); }

.sticky { /* WP sticky post: add accent border */ border-left: 3px solid var(--color-accent); }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }