/* ===========================================================================
   25H — article UI: featured-image hero (carousel) + floating actions + AI summary.
   Loaded only on single posts.
   =========================================================================== */

/* Search: hidden on mobile (full-bleed hero there), shown in the desktop header band. */
.h25-sc-search { display: none !important; }
@media (min-width: 1000px) { .h25-sc-search { display: block !important; } }

/* ---- Hero / carousel ---- */
/* Full-bleed (edge-to-edge), no corners, with a soft fade-out at the bottom. */
.h25-hero {
  position: relative;
  z-index: 1; /* sit above the header it is pulled over (the floating controls use a higher z-index) */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 0;
}
.h25-carousel {
  overflow: hidden;
  border-radius: 0;
  direction: ltr;
  background: #e9e9e9;
}
/* soft fade from the image into the page background */
.h25-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 90px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
html.dark-mode .h25-hero::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000); }

/* desktop: a header band (logo + search + toggle) sits above the image, like the
   homepage header; the image keeps a soft fade on all four edges. */
@media (min-width: 1000px) {
  .h25-hero {
    width: 100%;
    max-width: var(--wp--style--global--content-size, 800px);
    left: auto; right: auto;
    margin-left: auto;
    margin-right: auto;
    --h25-band: 130px; /* header band height = where the image starts */
    padding-top: var(--h25-band);
    background: #fff; /* fills the band and covers the page header behind it */
  }
  html.dark-mode .h25-hero { background: #000; }
  /* four-sided fade over the image only (below the band):
     ::before = left + right, ::after = top + bottom */
  .h25-hero::before, .h25-hero::after {
    content: "";
    position: absolute;
    top: var(--h25-band);
    left: 0; right: 0; bottom: 0;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }
  .h25-hero::before { background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 96%, #fff 100%); }
  .h25-hero::after { background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, #fff 100%); }
  html.dark-mode .h25-hero::before { background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0) 96%, #000 100%); }
  html.dark-mode .h25-hero::after { background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 92%, #000 100%); }
  /* rounded image + soft feathered edges (the hybrid) */
  .h25-carousel { border-radius: 48px; }
  /* action buttons sit a little lower on the image so they read clearly */
  .h25-hero .h25-actions { top: calc(var(--h25-band) + 30px); }
  /* category badge straddles the image's bottom edge (only partly over the image) */
  body.single .category-button-wrapper { margin-top: -16px !important; }
  /* search + toggle align vertically with the logo (their 50px edges come from single-chrome) */
  .h25-sc { top: 81px !important; }
  /* desktop only: a larger category badge and a slightly larger date line */
  body.single .category-button { font-size: 15px !important; padding: 7px 24px !important; }
  body.single .wp-block-post-date,
  body.single .wp-block-post-date time { font-size: 0.9rem !important; letter-spacing: 0; }
}

/* ---- Hero brand logo (desktop only) ----
   In the header band above the image, at the same position as the homepage logo. */
.h25-hero-logo {
  position: absolute;
  top: 56px; /* glyph centred at ~81px — matches the homepage header (1.5rem + 115px logo) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: none; /* desktop only */
}
.h25-hero-logo img {
  width: 115px;
  height: 51px; /* keeps the wordmark ratio; object-fit crops the PNG's square padding */
  object-fit: cover;
  display: block;
  filter: brightness(0); /* white PNG → black on the light page */
}
/* homepage-style: black on the light page, white on the dark page */
html.dark-mode .h25-hero-logo img { filter: none; }
@media (min-width: 1000px) { .h25-hero-logo { display: block; } }

/* Pull the category badge up so it overlaps the hero's bottom fade — reclaims the
   gap and makes room for the elements below. z-index keeps it above the image. */
.category-button-wrapper {
  position: relative;
  z-index: 2;
  margin-top: -44px !important;
}

/* smaller category badge (~20%) */
.category-button {
  font-size: 13px !important;
  padding: 5px 19px !important;
}

/* smaller article title — closer to the app */
.wp-block-post-title {
  font-size: clamp(1.55rem, 6vw, 1.95rem) !important;
  line-height: 1.3 !important;
}

/* smaller date / time line */
.wp-block-post-date,
.wp-block-post-date time { font-size: 0.8rem !important; }

/* small, consistent gap between the date and the body (≈ the title→date spacing) */
.wp-block-post-content { margin-top: 1rem !important; }
/* the body is display:flow-root, so its first paragraph's own top margin adds to the
   gap; zero it so the body text starts at the same point as the AI summary. */
.wp-block-post-content > :first-child { margin-top: 0 !important; }

/* date line greyed in dark mode */
html.dark-mode .wp-block-post-date,
html.dark-mode .wp-block-post-date time { color: #9a9a9a !important; }
.h25-slides {
  display: flex;
  transition: transform .35s ease;
}
.h25-slide {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
html.dark-mode .h25-carousel { background: #161616; }

/* pagination dots */
.h25-dots {
  position: absolute;
  bottom: 100px; /* above the bottom fade */
  left: 0; right: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  z-index: 3;
}
.h25-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.h25-dot.active { width: 18px; border-radius: 4px; background: #fff; }

/* ---- Floating action buttons ---- */
.h25-actions {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 4;
}
.h25-act {
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(255, 255, 255, .92);
  color: #111;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .25s ease, color .25s ease;
}
.h25-act:hover { transform: translateY(-1px); }
.h25-act svg { width: 22px; height: 22px; display: block; }
.h25-act:focus-visible { outline: 2px solid rgba(0, 0, 0, .35); outline-offset: 3px; }

/* dark mode: dark circle, white icon */
html.dark-mode .h25-act { background: rgba(20, 20, 20, .82); color: #fff; }
html.dark-mode .h25-act:focus-visible { outline-color: rgba(255, 255, 255, .45); }

/* like state + count */
.h25-like.liked svg { fill: #ff2d55; stroke: #ff2d55; }
.h25-like.pop { animation: h25-pop .4s ease; }
@keyframes h25-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* like button: solid heart, centered. Once the count is revealed, the heart
   shrinks up and the number appears below it — both inside the circle. */
.h25-like { flex-direction: column; gap: 1px; }
.h25-like svg { width: 22px !important; height: 22px !important; transition: width .2s ease, height .2s ease; }
.h25-like.revealed svg { width: 18px !important; height: 18px !important; }
.h25-like-count {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #111;
  pointer-events: none;
}
html.dark-mode .h25-like-count { color: #fff; }

/* share "link copied" feedback */
.h25-share.copied::after {
  content: "تم نسخ الرابط";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-family: var(--wp--preset--font-family--ibm-plex-sans-arabic, "IBM Plex Sans Arabic", sans-serif);
  font-size: 14px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 13px;
  pointer-events: none;
}

/* AI button — matches the homepage's animated sparkle gradient when active */
.h25-ai { position: relative; overflow: hidden; }
.h25-ai::before {
  content: "";
  position: absolute;
  inset: -2px; /* cover the button's edge so no background ring shows (clipped by overflow) */
  border-radius: 50%;
  background-image: linear-gradient(135deg, #a05fd0 0%, #6b78e0 35%, #33a0e8 70%, #a05fd0 100%);
  background-size: 220% 220%;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
}
.h25-ai.active::before { opacity: 1; animation: aiSparkleWave 3.2s ease-in-out infinite; }
.h25-ai svg { position: relative; z-index: 1; }
.h25-ai.active svg { fill: #fff !important; color: #fff !important; }
@keyframes aiSparkleWave {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ---- AI summary panel ---- */
.h25-ai-summary {
  display: none;
  margin-top: 1rem; /* match .wp-block-post-content's top gap so the toggle lands in place */
  /* match the article body's side spacing (the body uses .has-global-padding) */
  padding-left: var(--wp--style--root--padding-left, 1.25rem);
  padding-right: var(--wp--style--root--padding-right, 1.25rem);
}
/* font-size + line-height are copied from the article body in JS so they match;
   max-width matches the constrained body text so it doesn't run full-width on desktop. */
.h25-ai-text {
  color: #333;
  margin: 0 auto;
  max-width: var(--wp--style--global--content-size, 800px);
}
html.dark-mode .h25-ai-text { color: #e0e0e0; }

@media (max-width: 600px) {
  .h25-actions { top: 12px; left: 12px; gap: 10px; }
  .h25-act { width: 42px; height: 42px; }
  .h25-act svg { width: 20px; height: 20px; }
  .h25-slide { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .h25-slides, .h25-ai::before, .h25-ai-summary.show, .h25-act { animation: none !important; transition: none !important; }
}