/* UNA Enhancements v1.2.8 (overlay)
   Uses UNA Style Library CSS variables (fallbacks included)
*/

/* Explanatory title under post title */
.una-explanatory-title,
.una-facility-title{
  margin: 6px 0 14px;
  padding: 8px 12px;
  border-radius: var(--una-radius-md, 12px);
  border: 1px solid var(--una-border-color, rgba(0,0,0,.08));
  background: var(--una-surface-bg, #fff);
  color: var(--una-text-muted, #444);
  font-weight: 700;
  font-size: 14px;
}

/* Category + tag pills (taxonomy) */
.una-term-pills{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.una-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--una-pill-pad-y, 8px) var(--una-pill-pad-x, 12px);
  border-radius:var(--una-pill-radius, 999px);
  background:var(--una-pill-bg, #0a7b56);
  color:var(--una-pill-color, #fff);
  border:var(--una-pill-border-width, 1px) solid var(--una-pill-border, transparent);
  box-shadow:var(--una-pill-shadow, none);
  text-decoration:none;
  font-weight:var(--una-pill-weight, 800);
  font-size:var(--una-pill-size, 13px);
  line-height:1;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,filter .15s ease;
}
.una-pill:hover{filter:none;
  background:var(--una-pill-bg-hover, var(--una-pill-bg));
  color:var(--una-pill-color-hover, var(--una-pill-color));
  border-color:var(--una-pill-border-hover, var(--una-pill-border));
  box-shadow:var(--una-pill-shadow-hover, var(--una-pill-shadow, none));
}
.una-pill:focus-visible{
  background:var(--una-pill-bg-focus, var(--una-pill-bg-hover, var(--una-pill-bg)));
  color:var(--una-pill-color-focus, var(--una-pill-color-hover, var(--una-pill-color)));
  border-color:var(--una-pill-border-focus, var(--una-pill-border-hover, var(--una-pill-border)));
  box-shadow:var(--una-pill-shadow-focus, var(--una-pill-shadow-hover, var(--una-pill-shadow, none)));
  outline:var(--una-pill-outline-width, 0px) solid var(--una-pill-outline-color, currentColor);
  outline-offset:var(--una-pill-outline-offset, 0px);
}

/* Allow different style for Categories vs Tags via CSS variables */
.una-pill--cat{
  background:var(--una-pill-cat-bg, var(--una-pill-bg, #0a7b56));
  color:var(--una-pill-cat-color, var(--una-pill-color, #fff));
  border-color:var(--una-pill-cat-border, var(--una-pill-border, transparent));
  border-width:var(--una-pill-cat-border-width, var(--una-pill-border-width, 1px));
  border-radius:var(--una-pill-cat-radius, var(--una-pill-radius, 999px));
  padding:var(--una-pill-cat-pad-y, var(--una-pill-pad-y, 8px)) var(--una-pill-cat-pad-x, var(--una-pill-pad-x, 12px));
  font-weight:var(--una-pill-cat-weight, var(--una-pill-weight, 800));
  font-size:var(--una-pill-cat-size, var(--una-pill-size, 13px));
  box-shadow:var(--una-pill-cat-shadow, var(--una-pill-shadow, none));
}
.una-pill--tag{
  background:var(--una-pill-tag-bg, var(--una-pill-bg, #0f3d2e));
  color:var(--una-pill-tag-color, var(--una-pill-color, #fff));
  border-color:var(--una-pill-tag-border, var(--una-pill-border, transparent));
  border-width:var(--una-pill-tag-border-width, var(--una-pill-border-width, 1px));
  border-radius:var(--una-pill-tag-radius, var(--una-pill-radius, 999px));
  padding:var(--una-pill-tag-pad-y, var(--una-pill-pad-y, 8px)) var(--una-pill-tag-pad-x, var(--una-pill-pad-x, 12px));
  font-weight:var(--una-pill-tag-weight, var(--una-pill-weight, 800));
  font-size:var(--una-pill-tag-size, var(--una-pill-size, 13px));
  box-shadow:var(--una-pill-tag-shadow, var(--una-pill-shadow, none));
}

/* Breaking / Ticker label (generic label layer) */
.una-pill--breaking{
  background: var(--una-pill-breaking-bg, var(--una-pill-bg));
  color: var(--una-pill-breaking-color, var(--una-pill-color));
  border-color: var(--una-pill-breaking-border, var(--una-pill-border));
  border-width: var(--una-pill-breaking-border-width, var(--una-pill-border-width));
  border-radius: var(--una-pill-breaking-radius, var(--una-pill-radius));
  padding: var(--una-pill-breaking-pad-y, var(--una-pill-pad-y)) var(--una-pill-breaking-pad-x, var(--una-pill-pad-x));
  font-size: var(--una-pill-breaking-size, var(--una-pill-size));
  font-weight: var(--una-pill-breaking-weight, var(--una-pill-weight));
  box-shadow: var(--una-pill-breaking-shadow, var(--una-pill-shadow, none));
}

/* Hover / Focus (Variables-first)
   - If a hover var is not defined, it falls back to base.
   - Focus falls back to hover then base.
*/
.una-pill--cat:hover{filter:none;
  background:var(--una-pill-cat-bg-hover, var(--una-pill-cat-bg));
  color:var(--una-pill-cat-color-hover, var(--una-pill-cat-color));
  border-color:var(--una-pill-cat-border-hover, var(--una-pill-cat-border));
  box-shadow:var(--una-pill-cat-shadow-hover, var(--una-pill-cat-shadow, var(--una-pill-shadow, none)));
}
.una-pill--tag:hover{filter:none;
  background:var(--una-pill-tag-bg-hover, var(--una-pill-tag-bg));
  color:var(--una-pill-tag-color-hover, var(--una-pill-tag-color));
  border-color:var(--una-pill-tag-border-hover, var(--una-pill-tag-border));
  box-shadow:var(--una-pill-tag-shadow-hover, var(--una-pill-tag-shadow, var(--una-pill-shadow, none)));
}
.una-pill--breaking:hover{filter:none;
  background:var(--una-pill-breaking-bg-hover, var(--una-pill-breaking-bg));
  color:var(--una-pill-breaking-color-hover, var(--una-pill-breaking-color));
  border-color:var(--una-pill-breaking-border-hover, var(--una-pill-breaking-border));
  box-shadow:var(--una-pill-breaking-shadow-hover, var(--una-pill-breaking-shadow, var(--una-pill-shadow, none)));
}

.una-pill--cat:focus-visible{
  background:var(--una-pill-cat-bg-focus, var(--una-pill-cat-bg-hover, var(--una-pill-cat-bg)));
  color:var(--una-pill-cat-color-focus, var(--una-pill-cat-color-hover, var(--una-pill-cat-color)));
  border-color:var(--una-pill-cat-border-focus, var(--una-pill-cat-border-hover, var(--una-pill-cat-border)));
  box-shadow:var(--una-pill-cat-shadow-focus, var(--una-pill-cat-shadow-hover, var(--una-pill-cat-shadow, var(--una-pill-shadow, none))));
  outline:var(--una-pill-cat-outline-width, 0px) solid var(--una-pill-cat-outline-color, currentColor);
  outline-offset:var(--una-pill-cat-outline-offset, 0px);
}
.una-pill--tag:focus-visible{
  background:var(--una-pill-tag-bg-focus, var(--una-pill-tag-bg-hover, var(--una-pill-tag-bg)));
  color:var(--una-pill-tag-color-focus, var(--una-pill-tag-color-hover, var(--una-pill-tag-color)));
  border-color:var(--una-pill-tag-border-focus, var(--una-pill-tag-border-hover, var(--una-pill-tag-border)));
  box-shadow:var(--una-pill-tag-shadow-focus, var(--una-pill-tag-shadow-hover, var(--una-pill-tag-shadow, var(--una-pill-shadow, none))));
  outline:var(--una-pill-tag-outline-width, 0px) solid var(--una-pill-tag-outline-color, currentColor);
  outline-offset:var(--una-pill-tag-outline-offset, 0px);
}
.una-pill--breaking:focus-visible{
  background:var(--una-pill-breaking-bg-focus, var(--una-pill-breaking-bg-hover, var(--una-pill-breaking-bg)));
  color:var(--una-pill-breaking-color-focus, var(--una-pill-breaking-color-hover, var(--una-pill-breaking-color)));
  border-color:var(--una-pill-breaking-border-focus, var(--una-pill-breaking-border-hover, var(--una-pill-breaking-border)));
  box-shadow:var(--una-pill-breaking-shadow-focus, var(--una-pill-breaking-shadow-hover, var(--una-pill-breaking-shadow, var(--una-pill-shadow, none))));
  outline:var(--una-pill-breaking-outline-width, 0px) solid var(--una-pill-breaking-outline-color, currentColor);
  outline-offset:var(--una-pill-breaking-outline-offset, 0px);
}

.una-search-highlight{background:rgba(255,230,0,.35);padding:0 2px;border-radius:3px;}

/* Share buttons */
.una-share{
  display:flex;
  flex-wrap:wrap;
  gap:var(--una-share-gap, 10px);
  align-items:center;
  margin:14px 0;

  /* Token defaults (can be overridden by UNA Style Library vNext layers). */
  --una-share-btn-bg: var(--una-surface-bg,#fff);
  --una-share-btn-color: var(--una-text-strong,#111);
  --una-share-btn-border-color: var(--una-border-color, rgba(0,0,0,.08));
  --una-share-btn-border-width: 1px;
  --una-share-btn-radius: 999px;
  --una-share-btn-pad-y: 8px;
  --una-share-btn-pad-x: 10px;
  --una-share-btn-shadow: none;

  --una-share-icon-size: 18px;
  --una-share-icon-gap: 8px;
  --una-share-label-size: 13px;
  --una-share-label-weight: 800;
}

/* New contract: .una-share__btn (keep .una-share__item as backward-compatible alias) */
.una-share__btn,
.una-share__item{
  position:relative;
  display:inline-flex;
  gap:var(--una-share-icon-gap);
  align-items:center;
  padding:var(--una-share-btn-pad-y) var(--una-share-btn-pad-x);
  border-radius:var(--una-share-btn-radius);
  border:var(--una-share-btn-border-width) solid var(--una-share-btn-border-color);
  background:var(--una-share-btn-bg);
  color:var(--una-share-btn-color);
  text-decoration:none;
  font-weight:var(--una-share-label-weight);
  font-size:var(--una-share-label-size);
  line-height:1;
  box-shadow:var(--una-share-btn-shadow);
  cursor:pointer;
  transition:filter .12s ease, transform .12s ease;
}

.una-share__icon svg,
.una-share__btn svg,
.una-share__item svg{
  width:var(--una-share-icon-size);
  height:var(--una-share-icon-size);
}

.una-share__btn:hover,
.una-share__item:hover{filter:brightness(.98)}

.una-share__btn:active,
.una-share__item:active{transform:translateY(1px)}

.una-share__btn:focus-visible,
.una-share__item:focus-visible{
  outline:2px solid color-mix(in srgb, var(--una-share-btn-color) 35%, transparent);
  outline-offset:2px;
}

.una-share__copy{appearance:none}

/* Modes */
.una-share--icon-only .una-share__label{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.una-share--icon-only .una-share__btn,
.una-share--icon-only .una-share__item{
  padding:var(--una-share-btn-pad-y);
}

/* Make icon-only buttons look like a clean grid of icons */
.una-share--icon-only .una-share__btn,
.una-share--icon-only .una-share__item{
  width:38px;
  height:38px;
  padding:0;
  justify-content:center;
}

@media (max-width: 480px){
  .una-share--icon-only .una-share__btn,
  .una-share--icon-only .una-share__item{
    width:42px;
    height:42px;
  }
}

/* Mobile: force share buttons to icon-only to keep the layout clean */
@media (max-width: 782px){
  .una-single .una-share:not(.una-share--text-only) .una-share__label{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .una-single .una-share:not(.una-share--text-only) .una-share__btn,
  .una-single .una-share:not(.una-share--text-only) .una-share__item{
    width:42px;
    height:42px;
    padding:0;
    justify-content:center;
  }
}

/* ---------------------------------
   Sidebar Tabs (Latest / Most viewed)
---------------------------------- */
.una-sidebar-tabs{border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;background:var(--una-surface, #fff)}
.una-sidebar-tabs__head{display:flex;gap:0;border-bottom:1px solid rgba(0,0,0,.08);}
.una-sidebar-tabs__head .una-tab-btn{
  flex:1;
  appearance:none;
  border:0;
  background:transparent;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
  opacity:.7;
}
.una-sidebar-tabs__head .una-tab-btn.is-active{opacity:1;}
.una-sidebar-tabs__body{padding:12px;}
.una-tab-panel{display:none;}
.una-tab-panel.is-active{display:block;}
.una-mini-list{display:flex;flex-direction:column;gap:10px;}
.una-mini-list .una-card.is-mini{display:flex;gap:10px;align-items:flex-start;}
.una-mini-list .una-card.is-mini .una-card__thumb{flex:0 0 auto;position:relative;overflow:hidden;}
.una-mini-list .una-card.is-mini .una-card__thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.una-mini-list .una-card.is-mini .una-card__body{min-width:0;}
.una-mini-list .una-card.is-mini .una-card__title{margin:0;font-size:inherit;line-height:1.25;}
.una-mini-list .una-card.is-mini .una-card__title a{text-decoration:none;}
.una-mini-list .una-card.is-mini .una-card__meta{margin-top:4px;font-size:12px;opacity:.75;}

.una-thumb__badge{
  position:absolute;
  top:8px;
  right:8px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  background:rgba(0,0,0,.68);
  color:#fff;
}



/* Share buttons shapes + extras */
.una-share--shape-rounded{ --una-share-btn-radius: 12px; }
.una-share--shape-square{ --una-share-btn-radius: 8px; }
.una-share--shape-pill{ --una-share-btn-radius: 999px; }
.una-share--shape-circle{ --una-share-btn-radius: 999px; }

/* If shape is circle, keep icon-only buttons perfectly round. */
.una-share--shape-circle.una-share--icon-only .una-share__btn,
.una-share--shape-circle.una-share--icon-only .una-share__item{
  border-radius:999px;
}

.una-share__extras{
  flex-basis: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,.08);
}
.una-share__extra-row{
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 10px;
  align-items: center;
}
.una-share__extra-label{
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
}
.una-share__extra-input{
  max-width: 560px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  font-size: 13px;
  direction: ltr;
}
.rtl .una-share__extra-input{ direction: ltr; text-align: left; }
.una-share__mini-copy{
  height: 36px;
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--una-share-btn-radius, 12px);
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.una-share__mini-copy .una-share__icon svg{ width: 18px; height: 18px; }
.una-share__qr{
  display:flex;
  justify-content: flex-start;
  gap: 10px;
}
.una-share__qr img{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}
@media (min-width: 900px){
  .una-share__extras{
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .una-share__qr{ justify-content: flex-end; }
}
@media (max-width: 560px){
  .una-share__extra-row{ grid-template-columns: 1fr; }
  .una-share__extra-input{ max-width: 100%; }
  .una-share__mini-copy{ width: 100%; }
}



/* === P1: Sidebar Tabs mini cards — match compact news list look === */
.una-mini-list{gap:12px;}
.una-mini-list .una-card.is-mini{
  display:flex;
  gap:12px;
  align-items:center;
}
.una-mini-list .una-card.is-mini .una-card__thumb{
  width: 96px;
  height: 72px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.una-mini-list .una-card.is-mini .una-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.una-mini-list .una-card.is-mini .una-card__title{
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.una-mini-list .una-card.is-mini .una-card__meta{
  margin-top: 6px;
  font-size: 12px;
  opacity: .72;
}
.una-mini-list .una-card.is-mini .una-card__excerpt{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  opacity: .85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile tweaks */
@media (max-width: 520px){
  .una-sidebar-tabs__body{padding:10px;}
  .una-mini-list .una-card.is-mini .una-card__thumb{width:90px;height:68px;border-radius:16px;}
  .una-mini-list .una-card.is-mini .una-card__title{font-size:14px;}
}