/* Mekaleh custom overrides for Cassiopeia Extended */

@import url('fonts-selfhosted.css');

:root {
  --cassiopeia-font-family-body: "Noto Sans", "Noto Sans Ethiopic", "Noto Sans Arabic", sans-serif;
  --cassiopeia-font-family-headings: "Noto Serif", "Noto Serif Ethiopic", "Noto Serif Arabic", serif;
}

/* Language switcher, sits in the dark masthead topbar */
.mekaleh-langswitch {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .45rem .75rem;
}

.mekaleh-langswitch a {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  padding: .3rem .7rem;
  border-radius: 999px;
  color: var(--headercolor);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .28);
  white-space: nowrap;
}

.mekaleh-langswitch a:hover,
.mekaleh-langswitch a:focus-visible {
  background: var(--link-color);
  border-color: var(--link-color);
  color: #fff;
}

/* Search box: the placeholder already says "Suche ...", so the visible
   "Suchen" label above the field is redundant. Keep it in the DOM for screen
   readers, just hide it visually (same technique as Bootstrap's sr-only). */
.container-header .mod-finder label.finder {
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

/* Site description under the wordmark (Ge'ez name) */
.container-header .site-description {
  color: var(--headercolor);
  opacity: .85;
  font-family: "Noto Serif", "Noto Serif Ethiopic", "Noto Serif Arabic", serif;
}

/* Brand banner: replaces the small logo, sits above the nav row, own aspect ratio kept (no cropping) */
.container-header .navbar-brand {
  display: block;
  width: 100%;
}

.container-header .navbar-brand .brand-logo {
  display: block;
}

.container-header .navbar-brand img {
  display: block;
  width: 100%;
  max-width: 1300px;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 700px) {
  .container-header .navbar-brand img {
    max-width: 100%;
    height: 140px;
  }
}

/* Reserved for the future "Spenden" call-to-action: red, matching the logo's wordmark */
:root {
  --btn-donate-bg: #d80000;
  --btn-donate-bg-hover: #a60000;
}
.btn-donate {
  display: inline-block;
  background: var(--btn-donate-bg);
  color: #fff;
  font-weight: 700;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
}
.btn-donate:hover,
.btn-donate:focus-visible {
  background: var(--btn-donate-bg-hover);
  color: #fff;
}

/* RTL: mirror the topbar row and keep switcher pills readable */
html[dir="rtl"] .container-topbar {
  direction: rtl;
}

html[dir="rtl"] .mekaleh-langswitch {
  direction: rtl;
}

/* ---------------------------------------------------------------- */
/* News-grid category layout (com_content category/blog override)    */
/* ---------------------------------------------------------------- */

.mekaleh-news { margin-top: .5rem; }

.mekaleh-section-heading {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 2.5rem 0 1.1rem;
}

.mekaleh-cat-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin: 0 0 1rem;
}

.mekaleh-chips {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.mekaleh-chip {
  font-size: .82rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border-color, #e2e4e0);
  color: var(--body-color);
  background: transparent;
  text-decoration: none;
}

.mekaleh-chip--active {
  background: var(--link-color);
  border-color: var(--link-color);
  color: #fff;
  font-weight: 600;
}

.mekaleh-chip:hover {
  border-color: var(--link-color);
  color: var(--link-color);
}

.mekaleh-chip--active:hover {
  color: #fff;
}

/* Top-stories cluster: one large lead article + up to 3 compact side items */
.mekaleh-top-stories {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.75rem;
  margin-bottom: 2.25rem;
  align-items: start;
}

@media (max-width: 760px) {
  .mekaleh-top-stories {
    grid-template-columns: 1fr;
  }
}

.mekaleh-card--hero .mekaleh-card__media {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}

.mekaleh-card--hero .mekaleh-card__title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

/* Side list: compact horizontal cards next to the hero */
.mekaleh-side-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.mekaleh-card--side {
  display: flex;
  gap: .8rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-color, #e2e4e0);
}

.mekaleh-side-list .mekaleh-card--side:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mekaleh-card--side .mekaleh-card__media {
  width: 84px;
  height: 64px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}

.mekaleh-card--side .mekaleh-card__body {
  min-width: 0;
}

.mekaleh-card--side .mekaleh-eyebrow {
  margin: 0 0 .3rem;
}

.mekaleh-card--side .mekaleh-card__title {
  font-size: .95rem;
}

/* Card grid */
.mekaleh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .mekaleh-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .mekaleh-grid { grid-template-columns: 1fr; }
}

.mekaleh-card--grid .mekaleh-card__media {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  margin-bottom: .7rem;
}

.mekaleh-card--grid .mekaleh-card__title {
  font-size: 1.05rem;
}

/* Shared card parts */
.mekaleh-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mekaleh-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--link-color);
  background: color-mix(in srgb, var(--link-color) 12%, transparent);
  padding: .18rem .55rem;
  border-radius: 4px;
  margin: .85rem 0 .5rem;
}

.mekaleh-card__title {
  margin: 0 0 .5rem;
  font-weight: 600;
  line-height: 1.3;
}

.mekaleh-card__title a {
  color: var(--body-color);
  text-decoration: none;
}

.mekaleh-card__title a:hover {
  color: var(--link-color);
}

.mekaleh-card__excerpt {
  color: var(--body-color);
  opacity: .75;
  font-size: .95rem;
  margin-bottom: .6rem;
}

.mekaleh-meta {
  font-size: .78rem;
  opacity: .65;
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* Homepage: donation / organisation card (sidebar-right, Home only) */
.mekaleh-donate-card {
  background: var(--body-bg, #fff);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  padding: 1.4rem 1.4rem 1.6rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px -16px rgba(0,0,0,.25);
  position: sticky;
  top: 1.5rem;
}

.mekaleh-donate-card__seal {
  display: block;
  width: 250px;
  height: auto;
  margin: 0 0 .9rem;
}

.mekaleh-donate-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.mekaleh-donate-card__lede {
  font-size: .88rem;
  opacity: .75;
  margin: 0 0 1.1rem;
}

.mekaleh-donate-card__paypal {
  margin: 0 0 1.2rem;
}

.mekaleh-donate-card__btn {
  display: block;
  width: 100%;
  text-align: center;
  border: none;
  cursor: pointer;
  font-size: .95rem;
}

.mekaleh-donate-card__bank {
  border-top: 1px dashed rgba(0, 0, 0, .15);
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.mekaleh-donate-card__bank-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: .55rem;
}

.mekaleh-donate-card__bank dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .7rem;
  margin: 0;
  font-size: .85rem;
}

.mekaleh-donate-card__bank dt {
  opacity: .6;
  font-weight: 600;
}

.mekaleh-donate-card__bank dd {
  margin: 0;
}

.mekaleh-donate-card__contact {
  font-size: .85rem;
  margin: 0;
}

.mekaleh-donate-card__contact a {
  color: var(--link-color);
}

.mekaleh-lang-badge {
  font-size: .68rem;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .05rem .5rem;
  opacity: .85;
}

/* ---------------------------------------------------------------- */
/* Article reading view (com_content article override)               */
/* ---------------------------------------------------------------- */

.mekaleh-article {
  max-width: 720px;
  margin: 0 auto;
}

.mekaleh-article__media {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.mekaleh-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mekaleh-article__header {
  margin-bottom: 1.5rem;
}

.mekaleh-article__header .mekaleh-eyebrow {
  text-decoration: none;
  margin-top: 0;
}

.mekaleh-article__title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  font-weight: 600;
  margin: .5rem 0 .75rem;
}

.mekaleh-article__body {
  font-size: 1.05rem;
  line-height: 1.7;
}

.mekaleh-article__body p {
  max-width: 68ch;
}

.mekaleh-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Photo banner: full-width, own aspect ratio preserved, no cropping */
.container-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Cookie / privacy notice: fixed bar, shown on every page until acknowledged */
.mekaleh-cookie-notice {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: var(--headerbg, #12261a);
  color: var(--headercolor, #f3f5f1);
  padding: .9rem 1.25rem;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
  font-size: .85rem;
}

.mekaleh-cookie-notice.is-visible {
  display: flex;
}

.mekaleh-cookie-notice p {
  margin: 0;
  max-width: 62ch;
  opacity: .92;
}

.mekaleh-cookie-notice button {
  flex: none;
  background: var(--link-color);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .5rem 1.3rem;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
}

.mekaleh-cookie-notice button:hover {
  filter: brightness(1.1);
}

.mekaleh-chips--tags {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color, #e2e4e0);
}