/* =========================================================
   Altawhed Mag - user.css (Cassiopeia, Joomla 5.4)
   Save this file as UTF-8.
   ========================================================= */

/* 1. Fonts - the @import line must stay the very first rule in the file */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700&family=Tajawal:wght@400;500;700&display=swap');

/* 2. Colors and fonts */
:root {
  --cassiopeia-color-primary: #003e57;
  --cassiopeia-color-hover: #0a6a8a;
  --cassiopeia-color-link: #0a6a8a;

  --bs-body-font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --font-headings: 'Cairo', 'Tajawal', sans-serif;
}

body {
  font-family: var(--bs-body-font-family);
  font-size: 1.05rem;
  line-height: 1.85;
  background-color: #faf8f3;
  color: #1f2937;
}

button, input, select, textarea, .mod-menu {
  font-family: var(--bs-body-font-family);
}

h1, h2, h3, h4, h5, h6,
.page-header h1,
.issues-grid-title {
  font-family: var(--font-headings);
  line-height: 1.5;
}

/* Header: one solid color instead of the default gradient */
.container-header {
  background-image: none;
  background-color: var(--cassiopeia-color-primary);
}

a:hover { color: var(--cassiopeia-color-hover); }


/* =========================================================
   3. Year groups in the main menu (built by user.js)
   ========================================================= */
.mod-menu .year-group { list-style: none; margin-block: .25rem; }

.mod-menu .year-group > details > summary {
  cursor: pointer;
  font-weight: 700;
  padding: .55rem .8rem;
  border-radius: .5rem;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.mod-menu .year-group > details > summary:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.mod-menu .year-group > details > ul {
  list-style: none;
  margin: .3rem 0 .6rem;
  padding: 0;
  padding-inline-start: .75rem;
  max-height: 18rem;
  overflow-y: auto;
}
.mod-menu .year-group > details > ul a {
  display: block;
  padding: .3rem .5rem;
}


/* =========================================================
   4. Latest issues and latest books grids (home page)
   ========================================================= */
.issues-grid-wrap { margin-block: 1.5rem; }
.issues-grid-title { font-size: 1.3rem; margin-bottom: .75rem; }

.issues-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}
.issues-grid a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.issues-grid img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  background: color-mix(in srgb, currentColor 8%, transparent);
  transition: transform .2s;
}
.issues-grid a:hover img { transform: translateY(-4px); }
.issue-num { display: block; margin-top: .5rem; font-weight: 700; }
.issue-date { display: block; font-size: .85rem; opacity: .75; }

.books-grid .issue-num {
  font-size: .95rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.issues-more { margin-top: .75rem; text-align: end; }
.issues-more a { font-weight: 700; }


/* =========================================================
   5. Download buttons (PDF / ePub / Telegram links in articles)
   ========================================================= */
main a[href$=".pdf" i]:not(td a):not(li a),
main a[href$=".epub" i]:not(td a):not(li a),
main a[href*="t.me/"]:not(td a):not(li a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;              /* comfortable touch target */
  padding: .6rem 1.4rem;
  margin: .35rem .25rem;
  border: 2px solid var(--cassiopeia-color-primary, #003e57);
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .1s;
}

/* PDF: solid primary button */
main a[href$=".pdf" i]:not(td a):not(li a) {
  background: var(--cassiopeia-color-primary, #003e57);
  color: #fff;
}
main a[href$=".pdf" i]:not(td a):not(li a):hover {
  background: var(--cassiopeia-color-hover, #0a6a8a);
  border-color: var(--cassiopeia-color-hover, #0a6a8a);
  color: #fff;
}

/* ePub: outline button */
main a[href$=".epub" i]:not(td a):not(li a) {
  background: transparent;
  color: var(--cassiopeia-color-primary, #003e57);
}
main a[href$=".epub" i]:not(td a):not(li a):hover {
  background: var(--cassiopeia-color-primary, #003e57);
  color: #fff;
}

/* Telegram alternative links: quieter secondary buttons */
main a[href*="t.me/"]:not(td a):not(li a) {
  min-height: 44px;
  padding: .45rem 1.1rem;
  font-size: .95rem;
  font-weight: 500;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
}
main a[href*="t.me/"]:not(td a):not(li a):hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Small press effect on touch */
main a[href$=".pdf" i]:not(td a):not(li a):active,
main a[href$=".epub" i]:not(td a):not(li a):active,
main a[href*="t.me/"]:not(td a):not(li a):active {
  transform: scale(.97);
}

/* Mobile: full-width stacked buttons */
@media (max-width: 575.98px) {
  main a[href$=".pdf" i]:not(td a):not(li a),
  main a[href$=".epub" i]:not(td a):not(li a),
  main a[href*="t.me/"]:not(td a):not(li a) {
    display: flex;
    width: 100%;
    margin-inline: 0;
  }
}


/* =========================================================
   6. Quick links (side menu)
   ========================================================= */
.quick-links {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.quick-links .ql {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .6rem 1rem;
  border: 2px solid var(--cassiopeia-color-primary, #003e57);
  border-radius: .75rem;
  background: transparent;
  color: var(--cassiopeia-color-primary, #003e57);
  font-family: var(--font-headings, inherit);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .1s;
}
.quick-links .ql:hover {
  background: var(--cassiopeia-color-primary, #003e57);
  color: #fff;
}
.quick-links .ql:active { transform: scale(.98); }

/* "Newest issue" button is the highlighted one */
.quick-links .ql-primary {
  background: var(--cassiopeia-color-primary, #003e57);
  color: #fff;
}
.quick-links .ql-primary:hover {
  background: var(--cassiopeia-color-hover, #0a6a8a);
  border-color: var(--cassiopeia-color-hover, #0a6a8a);
}

.quick-links .ql-icon {
  width: 1.75rem;
  font-size: 1.35rem;
  line-height: 1;
  text-align: center;
}

/* Phones and tablets: buttons in a grid */
@media (max-width: 991.98px) {
  .quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}


/* =========================================================
   7. Header banner + social links
   ========================================================= */

/* The header slot is a flex row, so make the module fill the whole row */
.container-header .container-below-top {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}
.container-below-top p { margin: 0; }

.site-hero {
  flex: 1 1 100%;
  width: 100%;
  text-align: center;
}
.site-hero-link { display: block; }

.site-hero-img {
  display: block;
  width: 100%;
  max-width: 780px;
  height: auto;
  margin-inline: auto;
  /* fades the image edges into the header color */
-webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.social-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .75rem 0 .25rem;
}
.social-bar-title {
  margin-inline-end: .4rem;
  font-weight: 700;
  color: #fff;
}

.social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .15s;
}
.social-link:hover {
  background: #fff;
  color: var(--cassiopeia-color-primary, #003e57);
  transform: translateY(-2px);
}

/* Screen-reader-only text inside each link */
.social-link > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Icons drawn with CSS - no icon font and no extra HTML needed */
.social-link::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}

/* Telegram */
.social-link[href*="t.me/"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E");
}
/* Facebook */
.social-link[href*="facebook.com/"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
}
/* X (Twitter) */
.social-link[href*="x.com/"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
}
/* YouTube */
.social-link[href*="youtube.com/"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpath d='M9.75 15.02 15.5 11.75 9.75 8.48z'/%3E%3C/svg%3E");
}
/* Instagram */
.social-link[href*="instagram.com/"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
}

@media (max-width: 575.98px) {
  .site-hero-img {
    max-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  }
  .social-bar-title { width: 100%; text-align: center; }
}




/* Banner position: full-width strip in the header color */
.container-banner {
  background-color: var(--cassiopeia-color-primary);
  padding-top: .5rem;
}





/* =========================================================
   8. Footer + back-to-top button
   ========================================================= */
.container-footer {
  background-image: none;
  background-color: var(--cassiopeia-color-primary);
  border-top: 4px solid var(--cassiopeia-color-hover);
  color: #fff;
  font-size: .95rem;
  padding-block: 1.5rem;
  margin-top: 2rem;
}
.container-footer .grid-child {
  justify-content: center;
  text-align: center;
}
.container-footer a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.container-footer a:hover { color: #bfe3f0; }
.container-footer .mod-menu a { text-decoration: none; }
.container-footer p { margin-block: .25rem; }

/* Back-to-top button */
.back-to-top-link {
  background-color: var(--cassiopeia-color-primary);
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.back-to-top-link:hover,
.back-to-top-link:focus {
  background-color: var(--cassiopeia-color-hover);
  color: #fff;
}












/* Plain text links: use the site link color */
a:not([class]):not([href$=".pdf" i]):not([href$=".epub" i]):not([href*="t.me/"]) {
  color: var(--cassiopeia-color-link);
}
a:not([class]):not([href$=".pdf" i]):not([href$=".epub" i]):not([href*="t.me/"]):hover {
  color: var(--cassiopeia-color-primary);
}













/* =========================================================
   9. Issue page (articles that contain a PDF link)
   ========================================================= */
.com-content-article:has(a[href$=".pdf" i]) .page-header {
  text-align: center;
}

.com-content-article__body:has(a[href$=".pdf" i]) {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

/* Cover image */
.com-content-article__body:has(a[href$=".pdf" i]) img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: .5rem auto 1.5rem;
  border-radius: .5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* Section headings above the alternative links */
.com-content-article__body:has(a[href$=".pdf" i]) :is(h2, h3, h4) {
  margin-top: 1.75rem;
  font-size: 1.1rem;
}











/* =========================================================
   10. Search box (sidebar)
   ========================================================= */

/* Hide the visible label (kept for screen readers) */
.mod-finder label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mod-finder .input-group {
  flex-wrap: nowrap;
  gap: .5rem;
}
.mod-finder .input-group > :not(:first-child) {
  margin-inline-start: 0;
}

.mod-finder .form-control {
  min-height: 44px;
  padding-inline: 1.1rem;
  border: 2px solid var(--cassiopeia-color-primary, #003e57);
  border-radius: 999px !important;
  background: #fff;
  color: #1f2937;
}
.mod-finder .form-control:focus {
  border-color: var(--cassiopeia-color-hover, #0a6a8a);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--cassiopeia-color-hover, #0a6a8a) 25%, transparent);
}

.mod-finder .btn {
  min-height: 44px;
  padding-inline: 1.2rem;
  border: 0;
  border-radius: 999px !important;
  background: var(--cassiopeia-color-primary, #003e57);
  color: #fff;
  font-weight: 700;
}
.mod-finder .btn:hover,
.mod-finder .btn:focus {
  background: var(--cassiopeia-color-hover, #0a6a8a);
  color: #fff;
}











/* =========================================================
   11. Search results page
   ========================================================= */
#search-result-list mark,
#search-result-list .highlight {
  background: #bfe3f0;
  color: inherit;
  padding: 0 .15em;
  border-radius: .2em;
}

#search-result-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
#search-result-list .result__item {
  margin-bottom: .75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .75rem;
}
#search-result-list .result__title {
  margin: 0 0 .35rem;
  font-family: var(--font-headings);
  font-size: 1.15rem;
  font-weight: 700;
}
#search-result-list .result__description {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
}
#search-result-list .result__title-url { display: none; }