/* Creative Tunisia v3 - WordPress and Elementor integration, plus the components the static mockup did not have
   (programme filter, publications, video grid, form errors, pagination, social icons). Loaded after inner.css. */

/* ---------- WordPress ---------- */
body.admin-bar .header { top: 32px; }
body.admin-bar .tabs { top: calc(var(--header-h) + 32px); }
@media (max-width: 782px) { body.admin-bar .header { top: 46px; } body.admin-bar .tabs { top: calc(var(--header-h) + 46px); } }
body.admin-bar .mmenu { top: calc(var(--header-h) + 32px); }
.elementor-editor-active .rv, .elementor-editor-preview .rv { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .strip, .elementor-editor-preview .strip { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .strip-scroll, .elementor-editor-preview .strip-scroll { overflow-x: auto; }
.elementor-widget-container { margin: 0; }
.ct .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ---------- Elementor resets: keep the design system in charge ---------- */
.elementor a.btn, .elementor a.link, .elementor .hnav a { text-decoration: none; }
.elementor .btn--ghost { box-shadow: inset 0 0 0 1.5px var(--ink); }
.elementor .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.elementor .hero-frame > img,
.elementor .sc--photo img,
.elementor .oc .im img,
.elementor .post .img img,
.elementor .panel .pr img,
.elementor .vid img,
.elementor .hubsplit .hphoto img,
.elementor .imgband img,
.elementor .hubvideo img,
.elementor .pickview img,
.elementor .ohero .m img,
.elementor .split2 .pic img,
.elementor .bento .b5 img,
.elementor .vplay > img,
.elementor .doc .cover img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.elementor .sc--logos .lg img { height: 34px; width: auto; max-width: 48%; object-fit: contain; }
.elementor .partners-panel li img { height: 60px; width: auto; max-width: 100%; object-fit: contain; }
.elementor .funder .lg img { max-height: 72px; max-width: 220px; width: auto; height: auto; object-fit: contain; }
.elementor .brand img, .elementor .phead > img.leaf, .elementor .cta-band > img.leaf { width: auto; max-width: none; }
.elementor .phead > img.leaf { height: 118%; }
@media (max-width: 560px) { .elementor .partners-panel li img { height: 52px; } }

/* map library: its z-indexes (up to 1000) stay inside the map so the sticky header always wins */
.hubmap { isolation: isolate; position: relative; z-index: 0; }
.hubmap [data-ct-map], .leaflet-container { position: relative; z-index: 0; isolation: isolate; }

/* ---------- footer ---------- */
.fsocial { display: flex; gap: 10px; margin-top: 22px; }
.fsocial a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); font-size: 20px; transition: background .25s, color .25s; }
.fsocial a:hover { background: #fff; color: var(--ink); }

/* ---------- pagination ---------- */
.pagination .nav-links, .pagination ul.page-numbers { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination ul.page-numbers { padding: 0; margin: 0; border: 0; box-shadow: none; background: none; border-radius: 0; list-style: none; }
.pagination ul.page-numbers li { list-style: none; margin: 0; padding: 0; }
.pagination a.page-numbers, .pagination span.page-numbers { display: inline-block; padding: .7em 1.2em; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; transition: background .2s, color .2s; }
.pagination a.page-numbers:hover, .pagination .page-numbers.current { background: var(--ink); color: #fff; }

/* ---------- programme filter (Postuler) ---------- */
.afilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.afilter button, .afilter a.ext {
  display: inline-flex; align-items: center; gap: .5em; padding: .75em 1.35em; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1; background: #fff; color: var(--red, var(--ink));
  box-shadow: inset 0 0 0 1.5px var(--red, var(--ink)); transition: background .25s, color .25s, transform .2s var(--ease);
}
.afilter button:not([class*="ax-"]), .afilter a.ext:not([class*="ax-"]) { --red: var(--ink); }
.afilter a.ext { box-shadow: none; border: 1.5px dashed var(--red, var(--ink)); }
.afilter button:hover { background: var(--soft, var(--tint)); }
.afilter button[aria-pressed="true"] { background: var(--red); color: var(--on, #fff); }
.afilter button:active { transform: scale(.98); }
.afilter a.ext:hover { background: var(--red); color: var(--on, #fff); }
.afilter a.ext i { transition: transform .3s var(--ease); }
.afilter a.ext:hover i { transform: translate(3px, -3px); }
.afilter-count { margin: 0 0 28px; font-size: .98rem; color: var(--mute); }
.grid3 .post { position: relative; }
.atag { position: absolute; z-index: 2; top: 16px; left: 16px; display: inline-block; margin: 0; padding: .4em 1em; border-radius: 999px; font-weight: 600; font-size: .85rem; line-height: 1.2; background: var(--red, var(--ink)); color: #fff; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45); }
.atag:not([class*="ax-"]) { --red: var(--ink); }
.grid3 .post[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .grid3 .post.in-filter { animation: fadeUp .5s both; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mute { color: var(--mute); }

/* ---------- publications and video grid ---------- */
.docgrid, .vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px) clamp(18px, 2.4vw, 32px); }
.doc { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.doc .cover { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: var(--tint); border-radius: var(--r-lg); overflow: hidden; }
.doc .cover img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease); }
.doc .cover:hover img { transform: scale(1.04); }
.doc .cover i { font-size: 56px; color: var(--red); }
.doc h3 { font-size: clamp(1.3rem, 1.7vw, 1.65rem); }
.doc .btn { margin-top: auto; padding: .7em 1.2em; font-size: 1rem; }
.vcard { margin: 0; }
.vplay { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--r-lg); overflow: hidden; }
.vplay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform 1s var(--ease), opacity .3s; }
.vplay:hover img { transform: scale(1.04); opacity: 1; }
.vplay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 55%); pointer-events: none; }
.vplay .pbtn { position: absolute; left: 20px; bottom: 20px; z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 24px; transition: transform .3s var(--ease); }
.vplay:hover .pbtn { transform: scale(1.08); }
.vplay iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.vcard figcaption { padding-top: 14px; }
.vcard h3 { font-size: clamp(1.25rem, 1.6vw, 1.55rem); }
.vcard figcaption span { color: var(--mute); font-size: .95rem; }
@media (max-width: 960px) { .docgrid, .vgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .docgrid, .vgrid { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.mapframe { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; }
.mapframe iframe { width: 100%; height: 100%; border: 0; display: block; }
.form { position: relative; }
.form .error { border-radius: var(--r-md); background: var(--tint); padding: 16px 20px; color: var(--red-d); font-weight: 600; }

/* hubs map: the mockup sized #map, the widget uses [data-ct-map] */
.hubmap [data-ct-map] { min-height: 620px; height: 100%; background: #e9e5e0; }
@media (max-width: 960px) { .hubmap [data-ct-map] { min-height: 380px; } }

.hubvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* partners panel on phones: the EU logo comes first, then the two wide logos, then the last two side by side */
@media (max-width: 960px) {
  .partners-panel li:nth-child(n) { grid-column: span 1; }
  .partners-panel li:nth-child(1), .partners-panel li:nth-child(2), .partners-panel li:nth-child(3) { grid-column: span 2; }
  .partners-panel li:nth-child(1) { order: 1; } .partners-panel li:nth-child(2) { order: 2; } .partners-panel li:nth-child(3) { order: 3; }
  .partners-panel li:nth-child(4) { order: 4; } .partners-panel li:nth-child(5) { order: 5; }
}

/* Back to top */
.totop { position: fixed; right: clamp(14px, 2.2vw, 32px); bottom: clamp(14px, 2.2vw, 32px); z-index: 90; width: 52px; height: 52px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 24px; cursor: pointer; background: var(--red, #a02828); color: #fff; box-shadow: 0 10px 28px -8px rgba(20, 20, 20, .45); opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .3s, translate .3s, background .3s; }
.totop.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.totop:hover { background: var(--ink, #141414); }
.totop:focus-visible { outline: 3px solid var(--hi, #fca40f); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

/* Arabic articles: right-to-left (the wrapper is added by the plugin, includes/rtl.php). */
.cte-rtl { direction: rtl; }
.cte-rtl .elementor-icon-list-items { padding-inline-start: 0; }
.cte-rtl ul, .cte-rtl ol { padding-inline-start: 1.4em; padding-inline-end: 0; }
.cte-rtl .elementor-icon-list-items { list-style: none; }

/* Mixed-language articles: blocks that read right-to-left start on the right (the widget alignment "right" would otherwise flip to the left). */
[dir="auto"]:dir(rtl) { text-align: start; }