/*
Theme Name: Sazmanab
Author: Sohrab Kashani
Version: 3.2.2
Description: Curatorial studio, former art space and residency programme
Text Domain: sazmanab
*/

:root{
  --saz-blue:#0000FF;
  --saz-bg: linear-gradient(180deg, #0000FF 0%, #FFFFFF 70%);
  --frame-radius:18px;
  --frame-outline:#c7c7c7;
  --shadow: 0 0 0 1px var(--frame-outline), 0 10px 30px rgba(0,0,0,.15);
  --font-size: 20px;
}
::selection{
  background: #0000FF;
  color: #FFFFFF;
}
::-moz-selection{
  background: #0000FF;
  color: #FFFFFF;
}
.saz-header, .saz-footer, .saz-nav, img {user-select: none !important; -moz-user-select: none !important; -khtml-user-select: none !important; -webkit-user-select: none !important; -o-user-select: none !important; -ms-user-select: none !important; -webkit-touch-callout: none !important; -webkit-user-drag: none !important; -khtml-user-drag: none !important; -moz-user-drag: none !important; -o-user-drag: none !important; user-drag: none !important;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--saz-bg);
  font-family: "SN Pro", serif;
  font-size: var(--font-size);
  line-height: 1.25;
  color:#111;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.35); }
a:hover{ border-bottom-color: rgba(0,0,0,.85); }
#saz-app{ min-height:100vh; padding-top:72px; padding-bottom:62px; }

/* Remove browser "clear / X" button from search inputs */

/* Chrome, Safari, Edge */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Firefox */
input[type="search"] {
  appearance: textfield;
}

/* Older Edge / IE (harmless elsewhere) */
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.saz-header{
  position:fixed; top:0; left:0; right:0; height:67px;
  display:flex; align-items:center; justify-content:space-between;
  padding-left:15px;
  padding-right:8px;
  padding-bottom:12px;
  z-index:50;
  background: var(--saz-header-bg, var(--saz-blue));
  color: var(--saz-header-fg, #fff);
}
.saz-header.is-transparent{
  background: transparent !important;
}
.saz-header a{ border-bottom-color: rgba(255,255,255,.45); }
.saz-header a:hover{ border-bottom-color: rgba(255,255,255,.95); }
.saz-title{
  font-weight: inherit;
  max-width:50vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.saz-nav{ display:flex; gap:6px; align-items:center; }
.saz-nav .item{ position:relative; }
.saz-nav .item > button,
.saz-nav .item > a{
  font: inherit; color:inherit; background:transparent; border:0; padding:6px 8px; cursor:pointer;
}
.saz-nav .submenu{
  position:absolute; right:0; top:100%;
  background: var(--saz-blue);
  color:#fff;
  border-radius: var(--frame-radius);
  box-shadow: var(--shadow);
  padding:10px;
  width: auto;
  min-width: max-content;
  max-width: 90vw;
  overflow-x: auto;
  display:inline-block;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
}
.saz-nav .item:hover > .submenu,
.saz-nav .item:focus-within > .submenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.saz-nav .item{
  position: relative;
}
.saz-nav .submenu a{
  white-space: nowrap;
}
.saz-nav .item:hover .submenu{ display:block; }
.saz-nav .submenu a{ display:block; padding:6px 8px; border-bottom:0; }
.saz-nav .submenu a:hover{ text-decoration:underline; }

.saz-footer{
  position:fixed; bottom:0; left:0; right:0; height:62px;
  display:flex; align-items:center; justify-content:flex-start;
  padding:10px 14px;
  background: var(--saz-blue);
  color:#fff;
  z-index:50;
}
.saz-footer a{ border-bottom-color: rgba(255,255,255,.45); }
.saz-footer a:hover{ border-bottom-color: rgba(255,255,255,.95); }
.saz-footer{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.saz-footer .brand{
  margin-right: 18px;   /* make smaller if you want closer */
  white-space: nowrap;
}
.saz-footer .saz-search{
  margin: 0;
}
.saz-footer .saz-search input{
  margin: 0;
}
.saz-footer .links{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px; /* spacing between links */
  white-space: nowrap;
}
.brand a{
  border-bottom: none !important;
}
.saz-search input[type="search"]{
  font: inherit;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.12);
  color:#fff;
  outline:none;
}
.saz-search input::placeholder{ color: rgba(255,255,255,.85); }

.saz-frames{
  width:100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.saz-frame{
  background:#fff;
  border-radius: var(--frame-radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 22px 16px;
  padding-bottom: 13px;
  min-height: calc(100vh - 72px - 62px - 32px);
  overflow:hidden;
  opacity:1;
  transition: opacity 180ms linear;
}
h1, h2 {margin-top: 0;}
.saz-frame.loading{ opacity:0.35; }
.saz-frame .inner{ height:100%; overflow:auto; padding-right: 6px; }
.saz-meta{ font-size: .9em; opacity:.85; display:flex; gap:10px; flex-wrap:wrap; }
.saz-activity-list{ display:flex; flex-direction:column; gap:18px; }
.saz-activity{ scroll-margin-top: 100px; }
.saz-activity .topline{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.saz-activity .title{ font-weight:600; }
.saz-activity .year{ white-space:nowrap; opacity:.8; }
.saz-activity .excerpt{ margin-top:6px; }
.saz-activity img{ max-width:100%; height:auto; border-radius: 12px; box-shadow: 0 0 0 1px #ddd; }

.saz-tags{ display:flex; gap:8px; flex-wrap:wrap; margin: 10px 0 14px 0; }
.saz-tag{ padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; font-size:.9em; }
.saz-tags{
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 0px;
  margin-top: 6px;
  margin-bottom: 5px;
}
.saz-media {
  margin-top: 20px;
}
/* Featured image effect: apply ONLY when not exempt */
.saz-media:not(.saz-no-featured-filter),
.media:not(.saz-no-featured-filter){
  position: relative;
  overflow: hidden;
}

/* If you are using a simple blue overlay */
.saz-media:not(.saz-no-featured-filter)::after,
.media:not(.saz-no-featured-filter)::after{
  content:"";
  position:absolute;
  inset:0;
  background:#0000FF;
  opacity:0.28; /* adjust strength */
  pointer-events:none;
}

/* If you are using a duotone/SVG filter on the image itself, force-disable it when exempt */
.saz-no-featured-filter img{
  filter: none !important;
}
/* Fix rounded corners + bottom gap on featured images */
.saz-media,
.media{
  border-radius: 12px;   /* match your current rounding */
  overflow: hidden;      /* CLIPS the filtered image to rounded corners */
  line-height: 0;        /* removes baseline/descender gap */
}

.saz-media img,
.media img{
  display: block;        /* removes the bottom gap */
  width: 100%;
  height: auto;
  border-radius: inherit; /* ensures image follows wrapper rounding */
}

.saz-modal-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,.25);
  display:none; align-items:center; justify-content:center;
  z-index:100;
  backdrop-filter: blur(6px);
}
.saz-modal{
  width:min(720px, calc(100vw - 26px));
  max-height: min(80vh, 780px);
  overflow:auto;
  background:#fff;
  border-radius: var(--frame-radius);
  box-shadow: var(--shadow);
  padding:16px;
  padding-left:38px;
  padding-right:38px;
}
.saz-modal-overlay.active{ display:flex; }

/* Tags shown under thumbnails in activity cards */
.saz-tags-card{
  clear: both;
  margin-top: 18x;
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  width: 100%;
}

.saz-tags-card .saz-tag{
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.9em;
  line-height: 1.2;
  text-decoration: none;
  margin-right: 6px;
  margin-bottom: 6px;
}

.saz-tags-card::before{
  content:"";
  flex: 0 0 0;
  width: 0;
  height: 0;
  margin-left: -6px;
}

.saz-tags-card .saz-tag:hover{
  text-decoration: underline;
}

.saz-tag{
  text-transform: lowercase;
}

@media (max-width: 900px){
  #saz-app{ padding-top:62px; padding-bottom: 94px; }
  .saz-header{ height:62px; }
  .saz-title{ max-width:60vw; overflow:hidden; text-overflow:ellipsis; }
  .saz-nav{ gap:10px; }
  .saz-frames{ grid-template-columns: 1fr; }
  .saz-frame{ min-height: 40vh; }
  .saz-frame.left{ height: 66vh; }
  .saz-frame.right{ height: 28vh; }
  .links{ font-size: 90%; }
  .saz-footer{
    height:98px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .saz-footer .links a[data-mobile-hide="1"]{ display:none; }
  .saz-footer .links{ justify-content:space-between; }
}

body.saz-dark{ background: linear-gradient(180deg, #000 0%, #111 70%); color:#eee; }
body.saz-dark .saz-frame{ background:#000; box-shadow: 0 0 0 1px #333, 0 10px 30px rgba(0,0,0,.6); }
body.saz-dark a{ border-bottom-color: rgba(255,255,255,.35); }
body.saz-dark a:hover{ border-bottom-color: rgba(255,255,255,.85); }
body.saz-dark .saz-modal{ background:#000; }


/* v3.2 structure fixes */
html, body { overflow: hidden; }
#saz-app{ padding-top:72px; padding-bottom:62px; height:100vh; }
@media (max-width: 900px){
  #saz-app{ padding-top:62px; padding-bottom:94px; height: calc(var(--saz-vh, 1vh) * 100); }
}
.saz-frames{ height: calc(100vh - 72px - 62px); padding: 12px; }
@media (max-width: 900px){
  .saz-frames{
    height: calc((var(--saz-vh, 1vh) * 100) - 62px - 94px);
  }
}

.saz-frame{ min-height: 0; height: 100%; }
.saz-frame .inner{ overflow:auto; overflow-x:hidden; }
.saz-media img, .media img, .saz-frame img{ max-width:100%; width:100%; height:auto; }

/* Mobile: prevent the document/page from scrolling (only frames scroll) */
@media (max-width: 900px){
  html, body{
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    height: 100%;
  }

  /* Lock the app to the viewport so Safari focus/keyboard doesn't "push" layout */
  #saz-app{
    position: fixed;
    inset: 0;
    width: 100%;
    /* keep your current vh system */
    height: calc(var(--saz-vh, 1vh) * 100);
  }
}

/* Neutral Sazmanab: disable dropdown only for About and Activities */
body[data-saz-is-sazmanab="1"] .saz-nav .item:nth-child(1) .submenu,
body[data-saz-is-sazmanab="1"] .saz-nav .item:nth-child(3) .submenu{
  display: none !important;
}

/* Program background system with safe fallbacks */
body{
  background: linear-gradient(
    180deg,
    var(--saz-bg-grad-a, #0000FF),
    var(--saz-bg-grad-b, #FFFFFF)
  );
}

body[data-saz-bg-mode="solid"]{
  background: var(--saz-bg-solid, #FFFFFF);
}

body[data-saz-bg-mode="gradient"],
body[data-saz-bg-mode="default"]{
  background: linear-gradient(
    180deg,
    var(--saz-bg-grad-a, #0000FF),
    var(--saz-bg-grad-b, #FFFFFF)
  );
}

body[data-saz-bg-mode="image"]{
  background: none;
}

body[data-saz-bg-mode="image"]::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: var(--saz-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fullscreen tiled GIF overlay (does not affect layout) */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;                 /* stays behind the site UI */
  opacity: 0.2;

  background-image: url("https://sazmanab.org/szm_wd0.gif");
  background-repeat: repeat;  /* tiled */
  background-position: 0 0;
  background-size: auto;      /* keep original GIF size */
}

/* Make sure the app UI stays above the overlay */
#saz-app{ position: relative; z-index: 1; }

/* Keep header/footer above everything */
.saz-header, .saz-footer{ position: fixed; z-index: 50; }

#saz-app{ position: relative; z-index: 1; }
.saz-header{ z-index: 50; }

#saz-left > h1 + .saz-meta{
  display: none;
}

@media print {

  @page{ margin: 8mm; }

  html, body{
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide all UI */
  .saz-header,
  .saz-footer,
  #saz-right,
  #saz-credits-overlay{
    display: none !important;
  }

  /* IMPORTANT: undo any fixed app layout / scroll containers */
  #saz-app,
  .saz-frames,
  .saz-frame,
  .saz-frame-inner,
  .saz-frame .inner,
  #saz-left{
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Make only left content visible */
  body *{
    visibility: hidden !important;
  }
  #saz-left,
  #saz-left *{
    visibility: visible !important;
  }

  /* Left content should print full width */
  #saz-left{
    width: 100% !important;
    max-width: none !important;
    margin-top: -70px !important;
    margin-left: -10px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
	padding: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Remove “frame” styling for print */
  .saz-frame,
  .saz-frame-inner,
  .saz-frame .inner{
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Media should not overflow the page */
  #saz-left img,
  #saz-left video,
  #saz-left iframe{
    max-width: 100% !important;
    height: auto !important;
  }

  /* Avoid ugly page breaks */
  h1, h2, h3{ break-after: avoid-page; page-break-after: avoid; }
  img, figure, table, blockquote{ break-inside: avoid; page-break-inside: avoid; }
  p, li{ orphans: 3; widows: 3; }
}

/* =========================
   Mobile mode (<= 900px)
   Goal:
   - show only LEFT frame visually
   - footer becomes two bars (search full width; links row)
   - hide desktop nav buttons, show hamburger created by JS
   ========================= */

@media (max-width: 900px){

  /* Show only the left frame */
  #saz-right,
  .saz-frame.right{
    display: none !important;
  }

  /* Make left frame take the space */
  .saz-frames{
    grid-template-columns: 1fr !important;
  }
  .saz-frame.left{
    height: calc((var(--saz-vh, 1vh) * 100) - 62px - 94px - 24px) !important;
  }

  /* Header: hide desktop nav, JS will add burger */
  .saz-nav{
    display: none !important;
  }

  /* Footer: already column, but make search truly full width */
  .saz-footer{
    padding: 10px 14px;
  }
  .saz-footer .brand{
    display: none !important;
  }
  .saz-footer .saz-search{
    width: 100%;
  }
  .saz-footer .saz-search input[type="search"]{
    width: 100%;
  }

  /* Keep link row aligned, but only show Instagram, Credits, Contact */
  .saz-footer .links{
    width: 100%;
    justify-content: space-between;
  }
  /* Hide anything that has the mobile-hide flag (you already use it) */
  .saz-footer .links a[data-mobile-hide="1"]{
    display: none;
  }

  /* If super narrow, show only Credits */
  @media (max-width: 360px){
    .saz-footer .links a:not([data-saz-open-credits]){
      display: none !important;
    }
    .saz-footer .links{
      justify-content: center;
    }
  }

  /* ---------- Hamburger UI (panel) ---------- */
  .saz-mobile-top{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    box-sizing: border-box;
  }

  .saz-mobile-brand{
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70vw;
    cursor: pointer;
  }

  .saz-burger{
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
	margin-right: -10.5px;
  }

  .saz-burger-lines{
    width: 20px;
    height: 14px;
    position: relative;
  }
  .saz-burger-lines::before,
  .saz-burger-lines::after,
  .saz-burger-lines span{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s ease, top .2s ease, opacity .2s ease;
  }
  .saz-burger-lines::before{ top: 0; }
  .saz-burger-lines span{ top: 6px; }
  .saz-burger-lines::after{ top: 12px; }

  body.saz-mobile-menu-open .saz-burger-lines::before{
    top: 6px;
    transform: rotate(45deg);
  }
  body.saz-mobile-menu-open .saz-burger-lines span{
    opacity: 0;
  }
  body.saz-mobile-menu-open .saz-burger-lines::after{
    top: 6px;
    transform: rotate(-45deg);
  }

  .saz-mobile-menu-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.18);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.saz-mobile-menu-open .saz-mobile-menu-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  .saz-mobile-menu{
    position: fixed;
    top: 62px; /* matches your mobile header height */
    left: 0;
    right: 0;
    background: #fff;
    color: #111;
    z-index: 100;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
    border-bottom: 3px solid var(--saz-blue);
    max-height: calc(100vh - 62px - 94px);
    overflow: auto;
    padding: 14px;
  }
  body.saz-mobile-menu-open .saz-mobile-menu{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .saz-mobile-menu h3{
    margin: 0 0 10px 0;
    font-size: 1.05em;
    font-weight: 600;
  }

  .saz-mobile-menu a,
  .saz-mobile-menu button{
    font: inherit;
    display: block;
    width: 100%;
    text-align: left;
    padding: 2px 8px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
	font-size: 90%;
  }

  .saz-mobile-menu .group{
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #0000FF;
  }
  .saz-mobile-menu .sub{
    padding-left: 16px;
    opacity: .95;
  }
}

/* Defensive: hide any mobile-only header UI on desktop */
.saz-mobilebar,
.saz-mobile-title,
.saz-mobile-menu,
.saz-mobile-drawer,
.saz-hamburger,
.saz-burger,
.saz-menu-button{
  display:none !important;
}

@media (max-width: 900px){
  .saz-mobilebar,
  .saz-mobile-menu,
  .saz-menu-button,
  .saz-hamburger,
  .saz-burger{
    display:block !important;
  }
}

/* Desktop tightness without breaking layout */
.saz-header{ top:0; padding-top:0px; padding-bottom:9px; }

#saz-left h1:first-child, #saz-left h2:first-child,
#saz-right h1:first-child, #saz-right h2:first-child{
  margin-top: 0;
  line-height: 1.05;
  margin-bottom: 40px;
}

/* Keep correct calc, add breathing room above footer */
.saz-frames{
  height: calc(100vh - 72px - 62px);
  padding-bottom: 32px;
}

/* Hide mobile-only UI on desktop by default (prevents duplicate title + hamburger showing on desktop) */
.saz-hamburger,
.saz-mobile-menu,
.saz-mobile-panel,
.saz-mobile-header {
  display: none !important;
}

/* Mobile: hide the desktop header title so it doesn't duplicate with the mobile bar/menu */
@media (max-width: 900px){
  .saz-title{
    display: none !important;
  }

  /* Show mobile UI only on mobile */
  .saz-hamburger,
  .saz-mobile-menu,
  .saz-mobile-panel,
  .saz-mobile-header {
    display: block !important;
  }
}
/* Desktop: never show injected mobile header UI */
@media (min-width: 901px){
  .saz-mobile-top,
  .saz-mobile-brand,
  .saz-burger,
  .saz-mobile-menu,
  .saz-mobile-menu-overlay{
    display: none !important;
  }
}

/* Mobile: never show the desktop title (edition title is shown via mobile brand when menu opens) */
@media (max-width: 900px){
  header.saz-header .saz-title{
    display: none !important;
  }
}
/* Mobile footer: align links left, desktop-like spacing */
@media (max-width: 900px){
  .saz-footer{
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .saz-footer .links{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 14px; /* match desktop gap */
    margin-top: 2px;
    margin-bottom: 0px;
  }

  .saz-footer .links a{
    display: inline-block;
    white-space: nowrap;
  }
.saz-search{
  padding-top: 5px !important;
}	
.saz-search input[type="search"]{
  font-size: 80%;
}
}
/* Move frames block slightly upward (closer to header, farther from footer) */
.saz-frames{
  padding-top: 6px;     /* was effectively 12px */
  padding-bottom: 40px; /* more space at bottom */
}

@media (max-width: 900px){
  .saz-frames{
    padding-top: 2px;
    padding-bottom: 26px;
  }
}

@media (max-width: 900px){
  /* Keep your -10px. Only nudge the X to the right when menu is open */
  body.saz-mobile-menu-open .saz-burger-lines{
    transform: translateX(1px);
  }

  /* Make the nudge animate smoothly (optional but nice) */
  .saz-burger-lines{
    transition: transform .2s ease;
  }
}

@media (max-width: 900px){
  .saz-frame.left{
    height: calc(100dvh - 62px - 94px - 24px) !important;
  }
  @supports not (height: 100dvh){
    .saz-frame.left{
      height: calc(100vh - 62px - 94px - 24px) !important;
    }
  }
}

@media (max-width: 900px){
  .saz-tags:not(.saz-tags-card){
    column-gap: 3px;
    row-gap: 0px;
    margin-top: 10px;
    margin-bottom: 6px;
  }
}
/* Mobile: activity POST tags only (not category cards) */
@media (max-width: 900px){

  /* this matches tags on the activity post (single view) */
  .saz-tags:not(.saz-tags-card){
    column-gap: 6px;     /* less space between tags */
    row-gap: 7px;        /* less space between rows */
    margin-top: 20px;    /* tweak if you want */
    margin-bottom: 20px; /* MORE space before featured image / content */
  }

  /* override inline margin-top:10px on each tag in activity posts */
  .saz-tags:not(.saz-tags-card) .saz-tag{
    margin-top: 0 !important;
    padding: 2px 7px;
    line-height: 1.05;
  }

}
#spin2{
  position: fixed;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7rem;
  color: rgba(0, 255, 255, 0.7);
  pointer-events: none;
  z-index: 10;

  opacity: 0;
  transition: opacity 600ms linear;
}

#spin2.is-visible{
  opacity: 1;
}

#spin2::after{
  content: "";
  animation: spin2 2s linear infinite;
}

@keyframes spin2{
  0%{content:"Water";}
  10%{content:"L'eau";}
  20%{content:"Agua";}
  30%{content:"Воды";}
  40%{content:"آب";}
  50%{content:"水";}
  60%{content:"Wasser";}
  70%{content:"ماء";}
  80%{content:"Su";}
  90%{content:"पानी";}
}

/* Activity post tags: keep full pill border, prevent global link bottom-border from turning black */
.saz-tags:not(.saz-tags-card) a.saz-tag{
  border: 1px solid currentColor;              /* ensure full pill border */
  border-bottom-color: currentColor !important; /* override global a border-bottom color */
  text-decoration: none;
}

.saz-tags:not(.saz-tags-card) a.saz-tag:hover{
  border-bottom-color: currentColor !important; /* override global a:hover border-bottom color */
  text-decoration: underline;                   /* normal underline like category pages */
}

/* Editions menu labels: use correct wrapper class from plugin */
.saz-editions-list a .saz-edition-label.saz-mobile { display: none !important; }
.saz-editions-list a .saz-edition-label.saz-desktop { display: inline !important; }

@media (max-width: 900px){
  .saz-editions-list a .saz-edition-label.saz-desktop { display: none !important; }
  .saz-editions-list a .saz-edition-label.saz-mobile  { display: inline !important; }
}
.saz-mobile-menu .saz-edition-label.saz-desktop { display: none !important; }

/* Auto-switch old tag green to new green */
.saz-tag[style*="#28ff83"],
.saz-tag[style*="rgb(40, 255, 131)"],
.saz-tag[style*="rgba(40, 255, 131"]{
  color: #027432 !important;
  border-color: #027432 !important;
}
/* EXACT blue + white only (true duotone) */
.saz-media img,
.media img,
img.wp-post-image {
  filter: url(#saz-blue-white);
}
/* Category pages: more space between featured image and tags */
body.category .media,
body.tag .media,
body.search .media {
  margin-bottom: 18px; /* adjust: 12px subtle, 24px strong */
}
/* Right frame category lists */
#saz-right .media {
  margin-bottom: 18px;
}
@media (max-width: 900px){
  .saz-tags.saz-tags-card{
    margin-top: 18px; /* mobile gap under featured image */
  }
}